/* --------------------------------------------------------------- la charte
   Charte graphique Eau vive, version 1.0, septembre 2026.

   Six couleurs, chacune avec un rôle précis, et un dosage voulu :
   Rosée 50 %, Bleu profond 24 %, Bleu vive 15 %, Écume 8 %, Lumière 3 %.
   Un écran entièrement en Bleu vive n'est pas à la charte.
   ------------------------------------------------------------------------ */
:root {
  /* Les six couleurs, sous leur nom d'origine dans la charte. */
  --bleu-profond: #063b52;
  --bleu-vive: #1585ae;
  --ecume: #7ed1de;
  --lumiere: #e9b44c;
  --rosee: #f3f8f9;
  --ardoise: #24333a;

  /* Les rôles employés dans cette feuille de style. */
  --encre: var(--bleu-profond);
  --encre-douce: #4a6270;        /* 6,0 : 1 sur Rosée — texte secondaire */
  --papier: #fff;
  --fond: var(--rosee);
  --trait: #dce9ed;
  --trait-fort: #bcd4db;
  --marque: var(--bleu-vive);
  --marque-sombre: var(--bleu-profond);
  --marque-pale: #e4f2f5;

  /* La charte ne définit pas de couleur d'état. J'en garde une verte et une
     rouge : un message d'erreur doit se lire comme une erreur avant de se
     lire comme une marque. À confirmer avec l'association. */
  --succes: #0f6e5e;
  --succes-pale: #e6f4f1;
  --alerte: #9c3a22;
  --alerte-pale: #fbeeea;

  /* Deux familles, gratuites sur Google Fonts. Newsreader porte la voix,
     Karla porte l'information. */
  --titre: "Newsreader", Georgia, "Times New Roman", serif;
  --texte: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.contenu { max-width: 940px; margin: 0 auto; padding: 0 1rem; }
.etroit { max-width: 420px; }
.moyen { max-width: 720px; }

/* -------------------------------------------------- bandeau et navigation */

.bandeau {
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
  padding: 1rem 0;
}
.bandeau .contenu { display: flex; align-items: center; gap: 1rem; }
.marque {
  font-weight: 650;
  color: var(--encre);
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bandeau nav { display: flex; align-items: center; gap: .35rem;
               flex: 0 0 auto; }
.bandeau nav a,
.bandeau nav button {
  font-size: .88rem;
  color: var(--encre-douce);
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: 8px;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.bandeau nav a:hover,
.bandeau nav button:hover { background: var(--fond); color: var(--encre); }
.bandeau nav form { display: inline; margin: 0; }

/* ------------------------------------------------------------------ titres */

h1 { font-size: 1.9rem; margin: 2rem 0 .5rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 1rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
.introduction { color: var(--encre-douce); margin: 0 0 1.5rem; }

/* ------------------------------------------------------------------ le mur */

.onglets { display: flex; gap: .3rem; margin-bottom: 1.5rem; }
.onglets a {
  padding: .5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--encre-douce);
  font-size: .92rem;
}
.onglets a.actif { background: var(--marque-pale); color: var(--marque); }

.mur { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.vignette {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
a.vignette { text-decoration: none; color: inherit; }
a.vignette:hover { border-color: var(--trait-fort); }

.vignette .image {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--marque-pale), #f8fbfd);
  overflow: hidden;
  position: relative;
}
.vignette .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vignette .image .sans-affiche {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.vignette .image .date-bloc {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: .5rem .9rem;
  text-align: center;
}
.vignette .image .jour {
  font-size: 1.7rem;
  font-weight: 650;
  line-height: 1;
  color: var(--marque-sombre);
}
.vignette .image .mois {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--encre-douce);
}

.vignette .corps {
  padding: 1rem 1.1rem 1.1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.vignette .quand {
  font-size: .8rem;
  font-weight: 600;
  color: var(--marque);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vignette h3 { margin: .3rem 0 .2rem; font-size: 1.05rem; }
.vignette .ou { color: var(--encre-douce); font-size: .9rem;
                margin: 0 0 .7rem; }
.vignette .pied {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

.pastille {
  font-size: .73rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--marque-pale);
  color: var(--marque);
  white-space: nowrap;
}
.pastille.brouillon { background: #fff4e0; color: #8a5200; }
.pastille.jauge { background: var(--succes-pale); color: var(--succes);
                  font-weight: 500; }
.pastille.complet { background: var(--alerte-pale); color: var(--alerte);
                    font-weight: 500; }

.vide {
  background: var(--papier);
  border: 1px dashed var(--trait);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--encre-douce);
}
.vide p { margin: 0 0 .5rem; }

/* ---------------------------------------------------------------- la fiche */

.fiche { padding-bottom: 3rem; }

.retour {
  display: inline-block;
  font-size: .88rem;
  color: var(--encre-douce);
  text-decoration: none;
  margin-top: 1.5rem;
}
.retour:hover { color: var(--marque); }

.fiche-affiche {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--trait);
  background: var(--papier);
  margin: 1.5rem 0;
}
.fiche-affiche img { width: 100%; display: block; }
.fiche-affiche .pdf {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--encre-douce);
}

.reperes { display: grid; gap: .75rem; margin: 0 0 1.5rem; padding: 0;
           list-style: none; }
.reperes li { display: flex; gap: .75rem; align-items: flex-start; }
.reperes .etiquette {
  flex: 0 0 6.8rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--encre-douce);
  padding-top: .15rem;
}
.reperes .valeur { font-weight: 500; }

.bloc {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.description { white-space: pre-line; margin: 0; }
.aide { font-size: .87rem; color: var(--encre-douce); margin: 0; }

/* ------------------------------------------------------ pont calendriers */

.autres-calendriers { display: flex; flex-wrap: wrap; gap: .5rem;
                      margin-top: .75rem; }
.autres-calendriers a {
  font-size: .85rem;
  color: var(--encre-douce);
  text-decoration: none;
  border: 1px solid var(--trait-fort);
  border-radius: 8px;
  padding: .35rem .7rem;
  background: var(--papier);
}
.autres-calendriers a:hover { color: var(--marque);
                              border-color: var(--marque); }

.adresse-flux {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: .6rem .7rem;
  word-break: break-all;
  margin: .5rem 0 0;
}

/* ------------------------------------------------------------- formulaires */

.champ { margin-bottom: 1.1rem; }
.champ label {
  display: block;
  font-size: .89rem;
  font-weight: 500;
  margin-bottom: .35rem;
}
.champ .indication {
  font-size: .82rem;
  color: var(--encre-douce);
  font-weight: 400;
  margin-top: .2rem;
}
.champ input[type=text],
.champ input[type=password],
.champ input[type=datetime-local],
.champ input[type=number],
.champ input[type=file],
.champ textarea,
.champ select {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--trait-fort);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  background: var(--papier);
  color: var(--encre);
}
.champ textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.champ input:focus,
.champ textarea:focus {
  outline: 2px solid var(--marque);
  outline-offset: 1px;
  border-color: var(--marque);
}
.champ.case { display: flex; gap: .6rem; align-items: flex-start; }
.champ.case input { margin-top: .3rem; flex: 0 0 auto; }
.champ.case label { font-weight: 400; margin: 0; font-size: .89rem; }

.duo { display: grid; gap: 1.1rem; }

/* Le champ piège doit être invisible mais rester dans le formulaire :
   « display: none » suffirait pour l'œil, mais certains robots ignorent
   les champs cachés de cette façon. On le sort de l'écran à la place. */
.piege { position: absolute; left: -9999px; }

/* ----------------------------------------------------------------- boutons */

.bouton,
button.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--marque);
  background: var(--marque);
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.bouton:hover { background: var(--marque-sombre);
                border-color: var(--marque-sombre); }
.bouton.secondaire { background: var(--papier); color: var(--marque); }
.bouton.secondaire:hover { background: var(--marque-pale); }
.bouton.discret {
  background: var(--papier);
  color: var(--encre-douce);
  border-color: var(--trait-fort);
}
.bouton.discret:hover { background: var(--fond); color: var(--encre); }
.bouton.danger {
  background: var(--papier);
  color: var(--alerte);
  border-color: #e9c3bc;
}
.bouton.danger:hover { background: var(--alerte-pale); }
.bouton.large { width: 100%; }
.bouton.petit { padding: .4rem .75rem; font-size: .85rem; }

.rangee-boutons { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------------------------------------------------------------- messages */

.messages { margin-top: 1rem; }
.message {
  padding: .75rem 1rem;
  border-radius: 8px;
  margin-bottom: .5rem;
  font-size: .92rem;
  border: 1px solid transparent;
}
.message.succes { background: var(--succes-pale); color: var(--succes);
                  border-color: #bfe3d7; }
.message.erreur { background: var(--alerte-pale); color: var(--alerte);
                  border-color: #eec8c1; }
.message.info   { background: var(--marque-pale); color: var(--marque);
                  border-color: #c9dfee; }

/* ---------------------------------------------------------------- tableaux */

.tableau-enveloppe { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: middle;
}
th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--encre-douce);
  background: var(--fond);
  font-weight: 600;
}
tr:last-child td { border-bottom: 0; }
td .titre-ligne { font-weight: 500; }
td .sous-ligne { font-size: .84rem; color: var(--encre-douce); }
.colonne-actions { text-align: right; white-space: nowrap; }

/* -------------------------------------------------------------------- pied */

.gros-code { font-size: 2rem; font-weight: 650; color: var(--encre);
             margin: 0 0 .5rem; }

.pied-page {
  border-top: 1px solid var(--trait);
  background: var(--papier);
  margin-top: 3rem;
  padding: 1.5rem 0;
  font-size: .85rem;
  color: var(--encre-douce);
}
.pied-page a { color: var(--encre-douce); }

/* ------------------------------------------------------------------ écrans */

@media (max-width: 560px) {
  .bandeau nav a,
  .bandeau nav button { font-size: .84rem; padding: .4rem .5rem; }
}

@media (min-width: 620px) {
  .mur { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) { .mur { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------- modération et statistiques */

.entete-proposition { display: flex; flex-wrap: wrap; gap: .35rem;
                      margin-bottom: 1rem; }

.brut { margin-bottom: 1.25rem; }
.brut summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--encre-douce);
  padding: .4rem 0;
}
.brut .description {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: .75rem .9rem;
  font-size: .9rem;
  margin-top: .4rem;
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.chiffre {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.chiffre .valeur {
  font-size: 1.6rem;
  font-weight: 650;
  line-height: 1.1;
  color: var(--marque-sombre);
}
.chiffre .quoi {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--encre-douce);
  margin-top: .2rem;
}

@media (min-width: 620px) {
  .chiffres { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .chiffres { grid-template-columns: repeat(6, 1fr); }
}


/* ------------------------------------------------- la charte : typographie
   Ce bloc est placé en fin de fichier volontairement : il passe après les
   règles précédentes et prend donc le dessus par cascade, sans qu'on ait à
   récrire la feuille de style ligne par ligne.
   ------------------------------------------------------------------------ */

body {
  font-family: var(--texte);
  font-size: 17px;            /* texte courant : Karla 400, 17 px */
  line-height: 1.62;
}

/* La charte n'autorise que les graisses 300 et 400 pour Newsreader :
   « le gras alourdit la page ». */
h1, h2, h3, .marque {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: -0.01em;
}
h1 { font-weight: 300; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.04; }
h2 { font-size: 1.55rem; line-height: 1.12; color: var(--bleu-profond); }
h3 { font-size: 1.3rem; line-height: 1.22; }

.introduction { font-size: 1.1rem; line-height: 1.55; color: var(--encre-douce); }

/* 64 signes par ligne au maximum, comme le fixe la charte. Au-delà, l'œil
   perd la ligne suivante en revenant à la marge. */
main p, main li { max-width: 64ch; }

.marque { font-size: 1.2rem; }
.marque .surtitre {
  display: block;
  font-family: var(--texte);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .14em;     /* approche +14 %, réservée au logo */
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* Angles droits. La charte ne tolère d'arrondi que sur les extrémités des
   ondes du logo. */
.carte, .bloc, .tableau-enveloppe, .message, .vide, .encadre,
.bouton, .pastille, .chiffre, .entete-proposition, .brut {
  border-radius: 2px;
}

/* L'or ne va que sur fond sombre : 1,9 : 1 sur blanc, à proscrire même
   pour un titre. */
.pied-page { background: var(--bleu-profond); color: var(--ecume); }
.pied-page a { color: var(--lumiere); }
.pied-page .mention { color: #a9cad5; }

/* Une seule onde par visuel, en séparation — jamais sur du texte. */
.onde-separation {
  display: block;
  width: 100%;
  height: 26px;
  margin: 2rem 0;
  color: var(--ecume);
}

/* ------------------------------------------------- bandeau d'accueil photo
   La charte proscrit les dégradés de fond, les ombres portées et les
   effets de relief. Le voile est donc uni, et porte la couleur de la
   marque plutôt qu'un noir neutre. */

.accueil-photo {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-bottom: 2.2rem;
}
.accueil-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.accueil-photo .voile {
  position: absolute;
  inset: 0;
  background: rgba(6, 59, 82, .72);   /* Bleu profond, à 72 % */
}

.texte-accueil { position: relative; padding: 3.2rem 20px 2.6rem; }

.surtitre-accueil {
  font-family: var(--texte);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ecume);
  margin: 0 0 .9rem;
}

/* Newsreader en graisse 300, la seule autorisée pour un grand titre.
   L'italique du second mot reprend celui du logo « Eau vive ». */
.titre-accueil {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(2.3rem, 8vw, 4rem);
  line-height: .96;
  color: #fff;
  margin: 0;
  max-width: none;
}
.titre-accueil .second { display: block; font-style: italic; }

.phrase-accueil {
  color: var(--ecume);
  margin: 1.1rem 0 0;
  max-width: 42ch;
  font-size: 1.05rem;
}

@media (max-width: 640px) {
  .accueil-photo { min-height: 56vh; }
  .texte-accueil { padding: 2.4rem 20px 2rem; }
}