/* Bivouac — site vitrine. Charte : docs/CADRAGE.md §3.2.
   Bleu nuit #16213E, braise #F28C28, neige #F5F7FA. Aucune ressource externe :
   la police (Fraunces, SIL OFL 1.1) est servie depuis /fonts/. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --nuit: #16213E;
  --nuit-profonde: #0F1730;
  --nuit-2: #1F2D52;
  --crete: #2A3B66;
  --braise: #F28C28;
  --neige: #F5F7FA;

  /* Thème clair */
  --fond: #F5F7FA;
  --fond-teinte: #EAEEF5;
  --carte: #FFFFFF;
  --texte: #16213E;
  --texte-doux: #46516F;
  --trait: #D5DBE6;
  --lien: #16213E;
  --souligne: #C2620E;
  --icone: #C2620E;
  --pastille-fond: #FDE7D2;
  --pastille-texte: #7A3A05;
  --a-completer-fond: #FFF0C2;
  --a-completer-texte: #5C3B00;
  color-scheme: light;

  --titres: "Fraunces", Georgia, "Times New Roman", serif;
  --corps: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --largeur: 70rem;
  --marge: clamp(1rem, 4vw, 2.5rem);
  /* Largeur d'un bloc qui porte lui-même ses marges latérales. */
  --largeur-bloc: calc(var(--largeur) + 2 * var(--marge));
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16213E;
    --fond-teinte: #1A2647;
    --carte: #1F2D52;
    --texte: #F5F7FA;
    --texte-doux: #BCC4D6;
    --trait: #2F4170;
    --lien: #F5F7FA;
    --souligne: #F28C28;
    --icone: #F28C28;
    --pastille-fond: #3A2A1E;
    --pastille-texte: #FFC48A;
    --a-completer-fond: #4A3A10;
    --a-completer-texte: #FFE7A3;
    color-scheme: dark;
  }
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 1.0625rem/1.65 var(--corps);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--titres);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

a { color: var(--lien); text-decoration-color: var(--souligne); text-decoration-thickness: 0.09em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.16em; }

:focus-visible {
  outline: 3px solid var(--braise);
  outline-offset: 3px;
  border-radius: 4px;
}

.evitement {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--braise);
  color: var(--nuit);
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
}
.evitement:focus { top: 1rem; }

/* --- La nuit : en-tête et ouverture, sombres dans les deux thèmes ---------- */
.nuit {
  position: relative;
  background: var(--nuit-profonde);
  background-image: radial-gradient(ellipse 60% 70% at 78% 55%, rgba(242, 140, 40, 0.16), transparent 70%),
                    linear-gradient(180deg, var(--nuit-profonde), var(--nuit));
  color: var(--neige);
}
.nuit a { color: var(--neige); }

.entete {
  max-width: var(--largeur-bloc);
  margin: 0 auto;
  padding: 1.25rem var(--marge);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}
.marque { display: inline-flex; border-radius: 0.5rem; }
.marque img { display: block; height: 2.5rem; width: auto; }

.entete ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.entete nav a {
  text-decoration: none;
  font-weight: 500;
  color: #D9DFEB;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.entete nav a:hover, .entete nav a[aria-current="page"] { color: var(--neige); border-bottom-color: var(--braise); }

.heros {
  max-width: var(--largeur-bloc);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--marge) 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}
.surtitre {
  margin: 0 0 0.75rem;
  color: var(--braise);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.heros h1 { font-size: clamp(2.1rem, 1.2rem + 4.2vw, 4rem); }
.chapeau { margin: 1.25rem 0 0; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: #D9DFEB; max-width: 36rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
}
.nuit .bouton-plein { background: var(--braise); color: var(--nuit); }
.nuit .bouton-plein:hover { background: #F7A456; }
.nuit .bouton-trait { border-color: rgba(245, 247, 250, 0.55); color: var(--neige); }
.nuit .bouton-trait:hover { border-color: var(--neige); }

/* L'emplacement de l'application web : un bouton sans lien tant qu'elle n'existe pas. */
.navigateur {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  padding: 0.55rem 0.6rem 0.55rem 1rem;
  border: 1px dashed rgba(245, 247, 250, 0.4);
  border-radius: 0.75rem;
  color: #C9D1E3;
}
.pastille, .etat {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nuit .pastille { background: rgba(242, 140, 40, 0.18); color: #FFC48A; }

.heros-dessin { width: 100%; max-width: 22rem; justify-self: center; overflow: visible; }
.heros-dessin .toile { fill: var(--neige); stroke: var(--neige); }
.heros-dessin path.toile:first-child { fill: none; }
.heros-dessin .porte { fill: var(--braise); }
.heros-dessin .etoile { fill: var(--neige); }

.crete { display: block; width: 100%; height: clamp(2.5rem, 7vw, 6rem); margin-top: -1px; }
.crete path { fill: var(--fond); }

/* --- Contenu ------------------------------------------------------------ */
.bloc {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--marge);
}
.bloc > * { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.bloc-teinte { background: var(--fond-teinte); }
.bloc h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
.intro { margin-top: 0.75rem; margin-bottom: 2rem; color: var(--texte-doux); font-size: 1.125rem; }
.bloc h2 + .intro { max-width: var(--largeur); }

.grille {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.carte {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 1rem;
  padding: 1.5rem;
}
.carte h3 { font-size: 1.25rem; margin-top: 0.9rem; }
.carte p { margin: 0.5rem 0 0; color: var(--texte-doux); }
.icone {
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: var(--icone);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.points {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.75rem 2.5rem;
}
.points li { padding-left: 1.25rem; border-left: 3px solid var(--braise); }
.points h3 { font-size: 1.2rem; }
.points p { margin: 0.4rem 0 0; color: var(--texte-doux); }
.suite { margin-top: 2.25rem; font-weight: 600; }

.plateformes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.75rem;
}
.plateformes li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 0.75rem;
}
.plateforme { font-weight: 600; }
.etat { background: var(--pastille-fond); color: var(--pastille-texte); }

.etapes {
  list-style: none;
  padding: 0;
  counter-reset: etape;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.etapes li {
  counter-increment: etape;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 1rem;
  padding: 1.5rem;
}
.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--nuit);
  color: var(--neige);
  font-family: var(--titres);
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .etapes li::before { background: var(--braise); color: var(--nuit); }
}
.etapes h3 { font-size: 1.2rem; }
.etapes p { margin: 0.5rem 0 0; color: var(--texte-doux); }

.faq details { max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq details:first-child { border-top: 1px solid var(--trait); }
.faq summary {
  cursor: pointer;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font-weight: 600;
  font-size: 1.1rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--icone);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 1.25rem; color: var(--texte-doux); max-width: 42rem; }

/* --- Pages de texte (confidentialité, mentions légales) ---------------------- */
/* Le titre s'aligne sur la colonne de texte qui le suit. */
.page-titre {
  max-width: calc(44rem + 2 * var(--marge));
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--marge) 1rem;
}
.page-titre h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.page-titre p { color: #D9DFEB; max-width: 40rem; font-size: 1.15rem; margin: 1rem 0 0; }

.texte {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem var(--marge) clamp(2.5rem, 6vw, 4.5rem);
  box-sizing: content-box;
}
.texte h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); margin: 2.75rem 0 0.75rem; }
.texte h3 { font-size: 1.15rem; margin: 1.75rem 0 0.4rem; }
.texte p, .texte li { color: var(--texte); }
.texte ul { padding-left: 1.25rem; }
.texte li { margin: 0.35rem 0; }
.texte li::marker { color: var(--icone); }
.encadre {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--braise);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.encadre > :first-child { margin-top: 0; }
.encadre > :last-child { margin-bottom: 0; }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.deux-colonnes .encadre { margin: 0; }
.deux-colonnes h3 { margin-top: 0; }

dl.fiche { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: 0.6rem 1.5rem; margin: 1rem 0; }
dl.fiche dt { font-weight: 600; }
dl.fiche dd { margin: 0; }
@media (max-width: 34rem) {
  dl.fiche { grid-template-columns: 1fr; gap: 0.15rem; }
  dl.fiche dd { margin-bottom: 0.75rem; }
}

/* Champ que la session de rédaction ne connaissait pas : visible tant qu'il n'est pas rempli. */
.a-completer {
  background: var(--a-completer-fond);
  color: var(--a-completer-texte);
  border: 1px dashed currentColor;
  border-radius: 0.3rem;
  padding: 0 0.35rem;
  font-weight: 600;
}

/* --- Pied de page ---------------------------------------------------------- */
.pied { background: var(--nuit-profonde); color: #C9D1E3; }
.pied-dedans {
  max-width: var(--largeur-bloc);
  margin: 0 auto;
  padding: 2.5rem var(--marge);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.pied p { margin: 0; }
.pied-marque { display: flex; align-items: center; gap: 0.6rem; font-family: var(--titres); font-weight: 600; font-size: 1.25rem; color: var(--neige); }
.pied-marque img { border-radius: 22%; }
.pied-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.pied a { color: var(--neige); }
.pied-note { flex-basis: 100%; font-size: 0.9rem; }

@media (max-width: 52rem) {
  .heros { grid-template-columns: 1fr; }
  .heros-dessin { grid-row: 1; max-width: 9rem; justify-self: start; }
}