/* Charte commune aux pages secondaires : mentions legales, conditions de
   vente, confidentialite. Les jetons de couleur et la typographie sont ceux
   de la page d'accueil, dont le style reste en ligne parce qu'il ne sert
   qu'a elle. Ici trois pages partagent la meme mise en page : un fichier
   externe evite de la recopier, et le navigateur ne la telecharge qu'une fois. */

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

:root {
  --forest: #1C3A28;
  --forest-mid: #2D5A3E;
  --green: #3A7D52;
  --sage: #7AB893;
  --sage-light: #A8D4B8;
  --wheat: #D4A94A;
  --wheat-light: #E8C877;
  --cream: #F5F8F4;
  --sand: #E8EEE5;
  --mid: #5A7A65;
  --blanc: #FFFFFF;
  --ombre: 0 4px 24px rgba(28, 58, 40, .06);
  --rayon: 20px;
  --largeur: 1180px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--cream);
  color: var(--forest);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--forest); color: var(--cream);
  padding: 12px 20px; border-radius: 0 0 12px 0;
}
.saut-contenu:focus { left: 0; }

.zone { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

/* ─────────── Barre ─────────── */
.barre {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 248, 244, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(168, 212, 184, .35);
}
.barre .zone {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 14px;
}
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.marque img { width: 38px; height: 38px; border-radius: 11px; }
.marque span {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em;
}
.liens { display: flex; gap: 30px; font-size: .92rem; }
.liens a { text-decoration: none; color: var(--mid); transition: color .15s; }
.liens a:hover, .liens a[aria-current] { color: var(--forest); }

/* ─────────── Titre de page ─────────── */
.entete {
  position: relative; overflow: hidden;
  padding: clamp(44px, 6vw, 76px) 0 clamp(28px, 4vw, 44px);
}
.entete::after {
  content: ''; position: absolute; z-index: 0;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 212, 184, .5), transparent 68%);
  top: -230px; right: -150px; pointer-events: none;
}
.entete .zone { position: relative; z-index: 1; }
.surtitre {
  display: inline-block; font-size: .72rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); margin-bottom: 16px;
}
h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.1; letter-spacing: -.02em;
}
h1 em { font-style: italic; color: var(--green); }
.entete p { color: var(--mid); font-weight: 300; max-width: 62ch; margin-top: 18px; }
.maj { font-size: .88rem; color: var(--mid); margin-top: 22px; }

/* ─────────── Corps du document ─────────── */
.document { padding-bottom: clamp(40px, 6vw, 72px); }
/* Une colonne de texte etroite : au-dela d'environ 78 caracteres, l'oeil
   perd la ligne suivante, et ces pages sont deja assez ingrates a lire. */
.document .zone { max-width: 860px; }

.sommaire {
  background: var(--blanc); border: 1px solid var(--sand);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 26px 30px; margin-bottom: 42px;
}
/* Le sommaire vit dans l'article : sans ces remises a zero, il heriterait du
   filet et de l'indentation des titres et des listes du corps du document. */
.sommaire h2 {
  font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green);
  margin-bottom: 16px; padding-bottom: 0; border-bottom: none;
}
.sommaire ol { list-style: none; counter-reset: s; display: grid; gap: 9px; margin: 0; }
.sommaire li { counter-increment: s; font-size: .94rem; }
.sommaire li::before {
  content: counter(s) '.'; color: var(--sage); margin-right: 9px; font-variant-numeric: tabular-nums;
}
.sommaire a { color: var(--forest-mid); text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }

article section { margin-bottom: 40px; scroll-margin-top: 90px; }
article h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: 1.5rem; line-height: 1.2; letter-spacing: -.015em;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--sand);
}
article h2 em { font-style: italic; color: var(--green); }
article h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: 1.1rem; margin: 26px 0 10px;
}
article p, article li { color: var(--mid); font-weight: 300; }
article p { margin-bottom: 14px; }
article ul, article ol { margin: 0 0 16px 22px; display: grid; gap: 8px; }
article li::marker { color: var(--sage); }
article a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
article strong { font-weight: 500; color: var(--forest); }

/* Bloc d'identite, de coordonnees ou de definitions. */
.encart {
  background: var(--blanc); border: 1px solid var(--sand);
  border-radius: var(--rayon); padding: 22px 26px; margin-bottom: 18px;
}
.encart p:last-child { margin-bottom: 0; }
.encart--vert { background: rgba(168, 212, 184, .16); border-color: rgba(168, 212, 184, .5); }

dl.champs { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 10px 24px; }
dl.champs dt { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--green); font-weight: 500; }
dl.champs dd { color: var(--mid); font-weight: 300; }

table.grille { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: .94rem; }
table.grille th, table.grille td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--sand); }
table.grille th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); font-weight: 500; }
table.grille td { color: var(--mid); font-weight: 300; }
table.grille tr:last-child td { border-bottom: none; }

/* Mention qui reste a renseigner : volontairement criarde, pour qu'aucune
   ne parte en ligne par distraction. Le script de publication les refuse. */
.manque {
  background: var(--wheat-light); color: #6b4c00;
  padding: 1px 8px; border-radius: 6px;
  font-weight: 500; font-size: .9em; white-space: nowrap;
}

.retour { margin-top: 8px; }
.retour a { color: var(--green); text-decoration: none; font-size: .94rem; }
.retour a:hover { text-decoration: underline; }

/* ─────────── Pied de page ─────────── */
footer {
  background: var(--forest); color: var(--sage-light);
  padding: 56px 0 30px; margin-top: clamp(48px, 7vw, 84px);
}
.pied { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.pied .marque span { color: var(--cream); }
.pied-intro { margin-top: 14px; font-size: .9rem; color: var(--sage); max-width: 34ch; }
.pied h2 {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage);
  margin-bottom: 16px; font-family: 'DM Sans', sans-serif; font-weight: 500;
}
.pied ul { list-style: none; display: grid; gap: 10px; }
.pied a { color: var(--sage-light); text-decoration: none; font-size: .92rem; }
.pied a:hover { color: var(--cream); text-decoration: underline; }
.pied-bas {
  margin-top: 44px; padding-top: 24px;
  border-top: 1px solid rgba(168, 212, 184, .18);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: .84rem; color: var(--sage);
}

@media (max-width: 900px) {
  .liens { display: none; }
  .pied { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pied { grid-template-columns: 1fr; }
  dl.champs { grid-template-columns: 1fr; gap: 4px 0; }
  dl.champs dd { margin-bottom: 10px; }
}

@media print {
  .barre, footer, .sommaire, .saut-contenu, body::before { display: none; }
  body { background: #fff; }
  article p, article li { color: #333; }
}