/* Feuille de style unique de la plateforme des Copains d'abord.
   Pensée d'abord pour le téléphone. Aucune dépendance, aucun outil de compilation.
   Les couleurs et les polices viennent de la charte « Le Coq et la Guirlande ». */

@font-face {
  font-family: "Alfa Slab One";
  src: url("polices/alfa-slab-one-latin-400-normal.a67b53512e75.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("polices/oswald-latin-600-normal.3ab06adc1658.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("polices/spectral-latin-400-normal.6ec1900716de.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("polices/spectral-latin-400-italic.ae983716cc52.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("polices/spectral-latin-600-normal.ccd396b92abd.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

:root {
  --rouge: #d8232a;
  --rouge-fonce: #a8161c;
  --or: #f2b705;
  --creme: #fbf3e4;
  --creme-2: #f3e6cb;
  --encre: #2a1a12;
  --encre-douce: #6b5a4e;
  --sauge: #6e8c72;
  --sauge-fonce: #4d6a52;
  --blanc: #fffdf8;
  --rayon: 14px;
  --titre: "Alfa Slab One", Rockwell, "Roboto Slab", Georgia, serif;
  --etiquette: "Oswald", "Arial Narrow", Impact, sans-serif;
  --texte: "Spectral", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.125rem;
  line-height: 1.5;
  /* Place pour la barre de navigation du bas sur téléphone. */
  padding-bottom: 5.5rem;
}

a { color: var(--rouge-fonce); text-underline-offset: 0.15em; }
a:hover { color: var(--rouge); }

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-family: var(--titre); font-weight: 400; font-size: 1.9rem; color: var(--rouge); }
h2 { font-family: var(--etiquette); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; }
h3 { font-family: var(--texte); font-weight: 600; font-size: 1.15rem; }
p { margin: 0 0 1em; }

/* --- En-tête et guirlande ------------------------------------------------ */

.entete { background: var(--blanc); }
.entete__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 46rem; margin: 0 auto; padding: 0.6rem 1rem;
}
.marque { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--encre); }
.marque img { width: 2.6rem; height: auto; }
.marque span { font-family: var(--titre); font-size: 1.05rem; line-height: 1.05; color: var(--rouge); }

/* Les fanions : rouge, or, sauge, pointe en bas. */
.guirlande {
  height: 18px;
  background: var(--creme) repeat-x top left / 72px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='18'%3E%3Cpath d='M0 0h24L12 18z' fill='%23d8232a'/%3E%3Cpath d='M24 0h24L36 18z' fill='%23f2b705'/%3E%3Cpath d='M48 0h24L60 18z' fill='%236e8c72'/%3E%3C/svg%3E");
}

/* --- Navigation ---------------------------------------------------------- */

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around;
  background: var(--blanc); border-top: 2px solid var(--creme-2);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  flex: 1; text-align: center; padding: 0.7rem 0.2rem 0.6rem;
  font-family: var(--etiquette); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em;
  text-transform: uppercase; text-decoration: none; color: var(--encre-douce);
  border-top: 4px solid transparent; margin-top: -2px;
}
.nav a[aria-current="page"] { color: var(--rouge); border-top-color: var(--rouge); }

.page { max-width: 46rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }

/* --- Messages ------------------------------------------------------------ */

.messages { list-style: none; margin: 0 0 1rem; padding: 0; }
.messages li {
  background: var(--sauge); color: var(--blanc); padding: 0.6rem 0.9rem;
  border-radius: var(--rayon); margin-bottom: 0.5rem;
}
.messages li.error { background: var(--rouge); }

/* --- Cartes -------------------------------------------------------------- */

.carte {
  background: var(--blanc); border: 2px solid var(--creme-2); border-radius: var(--rayon);
  padding: 1rem; margin-bottom: 0.9rem;
}
.carte--annulee { opacity: 0.6; }
.carte__titre { font-family: var(--texte); font-weight: 600; font-size: 1.2rem; margin: 0.15rem 0 0.3rem; }
.carte__titre a { color: var(--encre); text-decoration: none; }
.carte__titre a:hover { color: var(--rouge); }
.carte__meta { color: var(--encre-douce); font-size: 1rem; margin: 0; }

.liste { list-style: none; margin: 0; padding: 0; }

.etiquette {
  display: inline-block; font-family: var(--etiquette); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.07em; text-transform: uppercase; padding: 0.15rem 0.6rem;
  border-radius: 999px; background: var(--creme-2); color: var(--encre);
}
.etiquette--or { background: var(--or); }
.etiquette--rouge { background: var(--rouge); color: var(--blanc); }
.etiquette--sauge { background: var(--sauge); color: var(--blanc); }

.quand {
  font-family: var(--etiquette); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--rouge); font-size: 0.95rem;
}

.mois {
  font-family: var(--etiquette); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--encre-douce); margin: 1.4rem 0 0.6rem; font-size: 0.95rem;
}

.entre-deux { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.entre-deux h1 { margin: 0; }

.discret { color: var(--encre-douce); font-size: 1rem; }
.vide { text-align: center; color: var(--encre-douce); font-style: italic; padding: 2rem 1rem; }

/* --- Boutons ------------------------------------------------------------- */

.bouton {
  display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--etiquette); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.65rem 1.1rem; min-height: 2.75rem;
  border-radius: 999px; border: 2px solid var(--rouge);
  background: var(--rouge); color: var(--blanc);
}
.bouton:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); color: var(--blanc); }
.bouton--second { background: transparent; color: var(--rouge-fonce); }
.bouton--second:hover { background: var(--creme-2); color: var(--rouge-fonce); border-color: var(--rouge); }
.bouton--discret { background: transparent; border-color: var(--creme-2); color: var(--encre-douce); }
.bouton--discret:hover { background: var(--creme-2); border-color: var(--creme-2); color: var(--encre); }
.bouton--petit { font-size: 0.8rem; padding: 0.35rem 0.8rem; min-height: 2.1rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.actions form { margin: 0; }

/* Les trois réponses de présence : un seul geste. */
.reponses { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.reponses button {
  flex: 1 1 auto; cursor: pointer; min-height: 2.75rem; padding: 0.45rem 0.8rem;
  font-family: var(--etiquette); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em;
  text-transform: uppercase; border-radius: 999px;
  border: 2px solid var(--creme-2); background: var(--blanc); color: var(--encre);
}
.reponses button:hover { border-color: var(--encre-douce); }
.reponses button[aria-pressed="true"][value="oui"] { background: var(--sauge); border-color: var(--sauge); color: var(--blanc); }
.reponses button[aria-pressed="true"][value="verre"] { background: var(--or); border-color: var(--or); }
.reponses button[aria-pressed="true"][value="non"] { background: var(--encre); border-color: var(--encre); color: var(--blanc); }

/* --- Formulaires --------------------------------------------------------- */

.formulaire p { margin-bottom: 1rem; }
.formulaire label { display: block; font-family: var(--etiquette); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 0.25rem; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"],
.formulaire input[type="date"], .formulaire input[type="datetime-local"],
.formulaire select, .formulaire textarea {
  width: 100%; font: inherit; color: inherit; padding: 0.6rem 0.75rem; min-height: 2.9rem;
  background: var(--blanc); border: 2px solid var(--creme-2); border-radius: 10px;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
  outline: 3px solid var(--or); outline-offset: 1px; border-color: var(--encre-douce);
}
.formulaire input[type="checkbox"] { width: 1.3rem; height: 1.3rem; vertical-align: middle; margin-right: 0.4rem; accent-color: var(--rouge); }
.formulaire .helptext, .formulaire .aide { display: block; color: var(--encre-douce); font-size: 0.95rem; margin-top: 0.2rem; }
.formulaire .errorlist { list-style: none; margin: 0 0 0.3rem; padding: 0; color: var(--rouge-fonce); font-weight: 600; }

/* --- Personnes ----------------------------------------------------------- */

.personnes { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0.4rem 0 0; padding: 0; }
.personnes li { background: var(--creme); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 1rem; }

.pastille {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--sauge); color: var(--blanc);
  font-family: var(--etiquette); font-weight: 600; letter-spacing: 0.04em;
}
.ligne-personne { display: flex; align-items: center; gap: 0.8rem; }
.ligne-personne > div { flex: 1; min-width: 0; }
.ligne-personne p { margin: 0; overflow-wrap: anywhere; }

/* --- Page d'accueil publique -------------------------------------------- */

.affiche { text-align: center; padding: 1.5rem 0 0.5rem; }
.affiche img { width: 9rem; height: auto; }
.affiche h1 { font-size: 2.6rem; margin-top: 0.4rem; }
.affiche p { font-size: 1.25rem; font-style: italic; }

.pied { text-align: center; color: var(--encre-douce); font-size: 0.95rem; padding: 1rem; }

/* --- Écrans larges ------------------------------------------------------- */

@media (min-width: 48rem) {
  body { padding-bottom: 0; }
  h1 { font-size: 2.3rem; }
  .nav {
    position: static; border-top: 0; background: transparent; padding: 0;
    max-width: 46rem; margin: 0 auto; justify-content: flex-start; gap: 0.3rem;
  }
  .nav a { flex: none; padding: 0.6rem 0.9rem; border-top: 0; margin-top: 0; border-bottom: 4px solid transparent; }
  .nav a[aria-current="page"] { border-bottom-color: var(--rouge); }
  .nav-enveloppe { background: var(--blanc); padding: 0 1rem; }
}