/* La base commune aux deux sites du collectif. Chaque site y ajoute sa
   feuille propre (`<site>/actifs/style.css`) ; les deux sont assemblées au
   démarrage en un seul fichier servi — voir `commun/src/style.rs`.

   Deux thèmes.
   Crème : la charte de la brochure du Sentier (brochures/construction/
   brochure.typ) — papier crème, encre chaude, orange de l'app.
   Sombre : la palette de l'app (~/fdc/le_sentier/tout/systeme/
   palette_standard.md), valeurs OKLch exactes.

   Le motif à trois états fait que le tout premier rendu est déjà bon : le
   média fixe le défaut, `data-theme` posé par le script du thème tranche
   ensuite dans les deux sens. */

:root {
  --fond: #fdfaf5;
  --fond-2: #ffffff;
  --texte: #2d2a26;
  --texte-attenue: #7a7168;
  --accent: #b34407;
  --accent-vif: #e8590c;
  --accent-fonce: #8f3606;
  --accent-plein: #b34407;
  --accent-pale: #fcefe3;
  --filet: #e7ddcd;
  --succes: oklch(43.2% 0.095 166.913);
  --erreur: oklch(50.5% 0.213 27.518);
  --sur-accent: #fff;
  --ombre: 0 18px 40px -24px rgb(45 42 38 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="creme"]) {
    --fond: oklch(27.4% 0.006 286.033);
    --fond-2: oklch(21% 0.006 285.885);
    --texte: #fff;
    --texte-attenue: oklch(80% 0.01 286);
    --accent: oklch(82.8% 0.189 84.429);
    --accent-vif: oklch(82.8% 0.189 84.429);
    --accent-fonce: oklch(55.5% 0.163 48.998);
    --accent-plein: oklch(41.4% 0.112 45.904);
    --accent-pale: oklch(27.9% 0.077 45.635);
    --filet: oklch(37% 0.013 285.805);
    --succes: oklch(59.6% 0.145 163.225);
    --erreur: oklch(70.4% 0.191 22.216);
    --sur-accent: #fff;
    --ombre: 0 18px 40px -20px rgb(0 0 0 / 0.7);
  }
}

:root[data-theme="sombre"] {
  --fond: oklch(27.4% 0.006 286.033);
  --fond-2: oklch(21% 0.006 285.885);
  --texte: #fff;
  --texte-attenue: oklch(80% 0.01 286);
  --accent: oklch(82.8% 0.189 84.429);
  --accent-vif: oklch(82.8% 0.189 84.429);
  --accent-fonce: oklch(55.5% 0.163 48.998);
  --accent-plein: oklch(41.4% 0.112 45.904);
  --accent-pale: oklch(27.9% 0.077 45.635);
  --filet: oklch(37% 0.013 285.805);
  --succes: oklch(59.6% 0.145 163.225);
  --erreur: oklch(70.4% 0.191 22.216);
  --sur-accent: #fff;
  --ombre: 0 18px 40px -20px rgb(0 0 0 / 0.7);
}

:root {
  color-scheme: light dark;
  --texte-taille: 1.2rem;
  --texte-sm: 1.02rem;
  /* La hauteur de l'en-tête collant, sur laquelle les ancres se calent. */
  --entete-hauteur: 4.5rem;
  --rayon: 0.75rem;
}

/* ---------- socle ---------- */

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

html {
  /* Une ancre (`/#services`) se cale sous l'en-tête collant au lieu de
     passer dessous : sans ça, le titre de la section arrive coupé. */
  scroll-padding-top: calc(var(--entete-hauteur) + 1.25rem);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-size: var(--texte-taille);
  line-height: 1.6;
  font-family:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--accent-vif);
  outline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

.enveloppe {
  width: min(72rem, 100% - 3rem);
  margin-inline: auto;
}

/* Le lien d'évitement : invisible jusqu'à ce qu'on y arrive au clavier. */
.saut {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--accent-plein);
  color: var(--sur-accent);
  border-radius: 0.5rem;
  text-decoration: none;
}
.saut:focus {
  top: 1rem;
}

/* ---------- entête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fond-2);
  background: color-mix(in oklab, var(--fond-2) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
}
.entete .enveloppe {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  min-height: var(--entete-hauteur);
}
.marque {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.marque:hover {
  text-decoration: none;
}
.marque img {
  height: 2.75rem;
  width: auto;
  border-radius: 0.5rem;
}
.marque strong {
  display: block;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.onglets {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}
.onglet {
  padding: 0.45rem 0.8rem;
  border-radius: 0.5rem;
  color: var(--texte);
  text-decoration: none;
  font-size: 1.02rem;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.onglet:hover {
  background: var(--accent-pale);
  text-decoration: none;
}
/* L'onglet de la page où l'on est : souligné d'orange, sans aplat. */
.onglet[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0.5rem 0.5rem 0 0;
}
.bascules {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.bascule {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 0.5rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.bascule:hover {
  background: var(--accent-plein);
  color: var(--sur-accent);
  text-decoration: none;
}

/* En dessous, l'en-tête n'est plus collant : deux rangées collées en haut
   mangeraient un cinquième d'un écran de téléphone. La marque et les
   bascules restent sur la première rangée ; les onglets prennent la
   seconde et défilent de côté s'ils dépassent. */
@media (max-width: 56rem) {
  html {
    scroll-padding-top: 1rem;
  }
  .entete {
    position: static;
    background: var(--fond-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .entete .enveloppe {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding-block: 0.75rem 0;
  }
  .marque {
    flex: 1 1 auto;
    min-width: 0;
  }
  .bascules {
    margin-left: auto;
  }
  .onglets {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 0.25rem 0;
    /* Le soulignement de l'onglet courant se pose sur le filet du bas. */
    margin-bottom: -1px;
    padding-inline-end: 1rem;
    /* Une ombre au bord droit dit qu'il reste des onglets à faire défiler.
       Deux fonds : l'ombre, fixe (`scroll`), et un cache de la couleur du
       fond qui suit le contenu (`local`) — au bout du défilement, ou quand
       rien ne déborde, le cache recouvre l'ombre et elle disparaît. */
    background:
      linear-gradient(to left, var(--fond-2) 40%, transparent) right / 3rem 100% no-repeat local,
      linear-gradient(to left, var(--filet), transparent) right / 1.5rem 100% no-repeat scroll;
  }
  .onglets::-webkit-scrollbar {
    display: none;
  }
  .onglet {
    padding-block: 0.6rem;
  }
  .onglet[aria-current="page"] {
    border-radius: 0;
  }
}

/* ---------- sections ---------- */

section {
  padding-block: clamp(2.75rem, 7vh, 5.5rem);
  border-bottom: 1px solid var(--filet);
}
section:last-of-type {
  border-bottom: 0;
}

/* Le surtitre de la brochure : petites capitales orange, très espacées,
   suivies d'un filet. */
.surtitre {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--filet);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 1.25rem;
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 1.5rem;
}
h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: var(--accent);
}
p {
  margin: 0 0 1rem;
  max-width: 68ch;
  text-wrap: pretty;
}
.accent {
  color: var(--accent);
  font-weight: 600;
}
.amorce {
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  line-height: 1.55;
}

/* ---------- le héros ---------- */

.heros {
  padding-block: clamp(3rem, 9vh, 6.5rem);
  background:
    radial-gradient(60rem 30rem at 0% 0%, var(--accent-pale), transparent 65%);
}
.heros .enveloppe {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr);
  gap: 3rem 4rem;
  align-items: center;
}
.heros h1 {
  font-size: clamp(2.3rem, 5vw, 3.8rem);
}
.heros-visuel {
  display: flex;
  justify-content: center;
}
@media (max-width: 56rem) {
  .heros .enveloppe {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* Sur un téléphone, le visuel passe sous le texte et rapetisse : la
     promesse d'abord, pas un écran entier d'image. */
  .heros-visuel {
    max-width: 16rem;
    margin-inline: auto;
  }
}

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

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.7rem;
  background: var(--accent-plein);
  color: var(--sur-accent);
  border: 1px solid transparent;
  border-radius: 0.6rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.bouton:hover {
  background: var(--accent-fonce);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px var(--accent-fonce);
}
.bouton:disabled {
  opacity: 0.6;
  cursor: progress;
}
.bouton-second {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.bouton-second:hover {
  background: var(--accent-pale);
  color: var(--accent);
  box-shadow: none;
}
p > .bouton {
  margin-top: 0.5rem;
}

/* ---------- grilles et cartes ---------- */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}
.carte {
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.5rem;
}
.carte p:last-child {
  margin-bottom: 0;
}
/* Une carte qui est un lien : elle se soulève, et rien n'y est souligné. */
a.carte {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.carte:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--ombre);
}
a.carte .suite {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}

.liste-nue {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  max-width: 68ch;
}
.liste-nue li {
  border-left: 4px solid var(--accent);
  padding-left: 1rem;
  margin-bottom: 1rem;
}

/* Une liste ordonnée garde ses numéros même sans puces natives. */
ol.liste-nue {
  counter-reset: pas;
}
ol.liste-nue li {
  counter-increment: pas;
}
ol.liste-nue li::before {
  content: counter(pas) ". ";
  color: var(--accent);
  font-weight: 700;
}

/* ---------- l'appel, avant le pied ---------- */

.appel .enveloppe {
  background: var(--accent-pale);
  border-radius: 1.25rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 3rem;
  align-items: center;
}
.appel h2 {
  margin-bottom: 0.5rem;
}
.appel p {
  margin-bottom: 0;
}
@media (max-width: 56rem) {
  .appel .enveloppe {
    grid-template-columns: 1fr;
  }
}

/* ---------- contact ---------- */

.formulaire {
  display: grid;
  gap: 1rem;
  max-width: 40rem;
}
.formulaire label {
  display: grid;
  gap: 0.35rem;
  font-weight: 600;
}
.formulaire input,
.formulaire textarea {
  font: inherit;
  font-weight: 400;
  color: var(--texte);
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.15s;
}
.formulaire input:focus-visible,
.formulaire textarea:focus-visible {
  border-color: var(--accent);
  outline-offset: 0;
}
.formulaire textarea {
  min-height: 9rem;
  resize: vertical;
}
.mention {
  font-size: var(--texte-sm);
  color: var(--texte-attenue);
}
.succes {
  color: var(--succes);
  font-weight: 600;
}
.erreur {
  color: var(--erreur);
  font-weight: 600;
}

/* Pot de miel du formulaire : hors de l'écran et hors de l'arbre
   d'accessibilité, mais bien présent dans le DOM — c'est tout son intérêt.
   `display: none` marcherait aussi, mais les robots les plus grossiers le
   repèrent ; sortir de l'écran est moins lisible pour eux. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.pied {
  background: var(--fond-2);
  border-top: 1px solid var(--filet);
  padding-block: 2.75rem 2rem;
  font-size: var(--texte-sm);
  color: var(--texte-attenue);
}
.pied p {
  margin: 0.2rem 0;
}
.pied strong {
  color: var(--texte);
}
.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 3rem;
  align-items: start;
}
.pied-marque {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pied-marque img {
  height: 3.5rem;
  width: auto;
  border-radius: 0.6rem;
  flex: 0 0 auto;
}
.pied-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pied-nav a {
  color: var(--texte);
  text-decoration: none;
}
.pied-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.pied-legal {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}
@media (max-width: 40rem) {
  .pied-grille {
    grid-template-columns: 1fr;
  }
}


/* ---------- propre au site ---------- */

/* Ce qui est propre au site du Sentier. La base — thèmes, en-tête, sections,
   boutons, formulaire, pied — vient de `commun/actifs/base.css`, et les deux
   sont servies en un seul fichier. */

:root {
  --cadre: #2b2723; /* le cadre « téléphone » des captures, dans les deux thèmes */
}

.marque strong {
  font-style: italic;
}

/* ---------- le bandeau « présenté par », au-dessus de la barre ---------- */

/* Voisin de la barre collante, pas dedans : il défile avec la page et la
   barre garde la hauteur sur laquelle les ancres se calent. Visible à toutes
   les largeurs — c'est pour le nouveau visiteur qu'il existe. */
.presente-par {
  background: var(--fond-2);
  border-bottom: 1px solid var(--filet);
  font-size: var(--texte-sm);
  color: var(--texte-attenue);
}
.presente-par .enveloppe {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.4rem;
}
.presente-par p {
  margin: 0;
}
.presente-par strong {
  color: var(--texte);
}
/* L'emblème garde son fond papier dans les deux thèmes, comme au pied. */
.presente-par img {
  height: 2rem;
  width: auto;
  border-radius: 0.4rem;
  border: 1px solid var(--filet);
  flex: 0 0 auto;
}

/* ---------- l'encadré « pilote fermé » du héros ---------- */

.pilote {
  background: var(--accent-pale);
  border-left: 4px solid var(--accent);
  border-radius: var(--rayon);
  padding: 0.75rem 1rem;
  font-size: var(--texte-sm);
  margin-bottom: 1.25rem;
}
.pilote strong {
  color: var(--accent);
}

/* La ligne d'aide sous l'étiquette d'un champ du formulaire. */
.indice {
  display: block;
  font-size: 0.9rem;
  color: var(--texte-attenue);
  margin-bottom: 0.35rem;
}

/* ---------- le héros : une capture à côté du texte ---------- */

.heros .capture {
  max-width: 17rem;
  flex: 0 1 17rem;
  filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.28));
}
.heros .capture img {
  border-width: 4px;
  border-radius: 20px;
}

/* ---------- l'encadré « workflow » de la brochure ---------- */

.encadre {
  background: var(--accent-pale);
  border-radius: var(--rayon);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.encadre p:last-child {
  margin-bottom: 0;
}

/* ---------- les étapes numérotées ---------- */

.etape {
  display: grid;
  /* La colonne de droite tient deux captures côte à côte ; en dessous de
     ~58rem de large, tout retombe en une seule colonne. */
  grid-template-columns: minmax(18rem, 1fr) minmax(22rem, 27rem);
  gap: 2rem 3rem;
  align-items: start;
  padding-block: 2.5rem;
  border-top: 1px solid var(--filet);
}
.etape:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.etape:last-child {
  padding-bottom: 0;
}
@media (max-width: 58rem) {
  .etape {
    grid-template-columns: 1fr;
  }
}
.etape h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--texte);
  font-size: 1.45rem;
  margin-bottom: 0.75rem;
}
.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.6rem;
  background: var(--accent-plein);
  color: var(--sur-accent);
  font-weight: 800;
  font-size: 1.05rem;
}
.captures {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Le `shot()` du Typst : capture encadrée façon téléphone, légende en
   petites capitales espacées. */
.capture {
  margin: 0;
  flex: 0 1 12rem;
  max-width: 12rem;
}
.capture img {
  display: block;
  width: 100%;
  border: 2.5px solid var(--cadre);
  border-radius: 14px;
  background: var(--cadre);
}
.capture figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}
.capture-large {
  max-width: 22rem;
  margin-inline: auto;
}

/* Une capture posée à côté du texte, qui repasse au-dessus quand la place
   manque. */
.capture-cote {
  float: right;
  margin: 0 0 1rem 2rem;
}
@media (max-width: 40rem) {
  .capture-cote {
    float: none;
    margin: 0 0 1.5rem;
  }
}

/* La minicarte : le texte et la capture côte à côte. */
.minicarte .enveloppe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 4rem;
  align-items: center;
}
@media (max-width: 56rem) {
  .minicarte .enveloppe {
    grid-template-columns: 1fr;
  }
}

/* ---------- l'onglet technique ---------- */

/* L'intro de la page : un titre et une phrase, sans l'air d'une section. */
.intro {
  padding-block: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 4vh, 2.5rem);
}
.intro .amorce {
  margin-bottom: 0;
}
.technique h3 {
  margin-top: 2rem;
}
.tableau {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
}
.tableau th,
.tableau td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}
.tableau tr:last-child td {
  border-bottom: 0;
}
.tableau th {
  color: var(--accent);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent-pale);
}
.defile {
  overflow-x: auto;
  border-radius: var(--rayon);
}
code,
.bloc-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
code {
  background: var(--accent-pale);
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
}
.bloc-code {
  display: block;
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* ---------- le pied : présenté par le collectif ---------- */

/* L'emblème du collectif garde son fond papier dans les deux thèmes :
   c'est une vignette, pas une icône. */
.pied-marque img {
  border: 1px solid var(--filet);
}