/* TS Digital — feuille de style unique.
   Charte : encre, vert forêt, crème. Style minimal et suisse : beaucoup d'air,
   grille simple, peu d'effets. Pas de dépendance, police auto-hébergée. */

/* Outfit, police de la charte, fonte variable (SIL Open Font License, voir
   fonts/OFL-Outfit.txt). Servie depuis le site : aucun appel à Google. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --encre: #16251E;        /* texte, titres, boutons principaux */
  --vert: #1E8E63;         /* accents, filets, grands titres seulement */
  --vert-texte: #156043;   /* liens et petits textes verts (contraste 6,7:1) */
  --vert-clair: #29A272;   /* accents sur fond sombre */
  --creme: #F5F2EC;        /* fond de page */
  --blanc: #FFFFFF;        /* cartes, champs */
  --gris: #6B6560;         /* textes secondaires (5,1:1 sur crème) */
  --filet: #DED9CF;        /* bordures */
  --sombre: #101A16;       /* pied de page */
  --sombre-texte: #B9B3A8; /* texte secondaire sur fond sombre */
  --erreur: #B4321F;

  --police: "Outfit", "Century Gothic", "Questrial", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  --espace-1: 0.5rem;
  --espace-2: 1rem;
  --espace-3: 1.5rem;
  --espace-4: 2.5rem;
  --espace-5: 4rem;
  --espace-6: 6rem;

  --largeur: 1080px;
  --rayon: 3px;
  --transition: 200ms ease;
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--espace-2);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--espace-2); max-width: 65ch; }
ul, ol { margin: 0 0 var(--espace-2); padding-left: 1.25rem; }
li { margin-bottom: var(--espace-1); }

a {
  color: var(--vert-texte);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--transition);
}
a:hover { color: var(--encre); }

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

/* Accès direct au contenu pour le clavier */
.acces-contenu {
  position: absolute;
  left: -999px;
  top: var(--espace-2);
  background: var(--encre);
  color: var(--creme);
  padding: var(--espace-1) var(--espace-2);
  z-index: 100;
}
.acces-contenu:focus { left: var(--espace-2); }

.conteneur {
  width: min(100% - 2 * var(--espace-3), var(--largeur));
  margin-inline: auto;
}

.section { padding-block: var(--espace-5); }
.section--serree { padding-block: var(--espace-4); }
@media (min-width: 768px) {
  .section { padding-block: var(--espace-6); }
}

/* Le filet vert de la charte, repris comme motif */
.regle {
  height: 3px;
  width: 74px;
  background: var(--vert);
  margin: var(--espace-2) 0 var(--espace-3);
  border: 0;
}

.surtitre {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vert-texte);
  margin-bottom: var(--espace-1);
}

.secondaire { color: var(--gris); }

/* --- En-tête -------------------------------------------------------------- */

.entete {
  background: var(--creme);
  border-bottom: 1px solid var(--filet);
  position: sticky;
  top: 0;
  z-index: 50;
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
  min-height: 72px;
}
.entete__logo { display: inline-flex; align-items: center; }
.entete__logo img { width: 170px; height: auto; }

.menu-bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--espace-1);
  background: none;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: var(--encre);
  font: inherit;
  cursor: pointer;
}
.menu-bouton svg { width: 22px; height: 22px; }
.menu-bouton { display: none; }

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1) var(--espace-3);
  align-items: center;
}
.navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--encre);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.navigation a:hover, .navigation a[aria-current="page"] { border-bottom-color: var(--vert); }
.navigation a.bouton { border-bottom: 0; color: var(--creme); min-height: 44px; }
.navigation a.bouton:hover { color: var(--blanc); }

@media (max-width: 767px) {
  .js .menu-bouton { display: inline-flex; }
  .js .navigation { display: none; width: 100%; padding-bottom: var(--espace-2); }
  .js .navigation.ouvert { display: block; }
  .entete__barre { flex-wrap: wrap; }
  .navigation ul { flex-direction: column; align-items: stretch; gap: 0; }
  .navigation li { margin: 0; border-top: 1px solid var(--filet); }
  .navigation a { min-height: 48px; width: 100%; }
  .navigation a.bouton { margin-top: var(--espace-2); justify-content: center; }
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-1);
  min-height: 48px;
  padding: 0 var(--espace-3);
  background: var(--encre);
  color: var(--creme);
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bouton:hover { background: var(--vert-texte); border-color: var(--vert-texte); color: var(--blanc); }
.bouton--secondaire {
  background: transparent;
  color: var(--encre);
}
.bouton--secondaire:hover { background: var(--encre); color: var(--creme); }
.bouton[disabled] { opacity: 0.6; cursor: wait; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  margin-top: var(--espace-3);
}

/* --- Accueil ------------------------------------------------------------- */

.heros { padding-block: var(--espace-5) var(--espace-5); }
@media (min-width: 768px) { .heros { padding-block: var(--espace-6) var(--espace-6); } }
.heros h1 { max-width: 20ch; }
.heros .accroche { font-size: 1.25rem; color: var(--gris); max-width: 50ch; }

.grille {
  display: grid;
  gap: var(--espace-3);
}
@media (min-width: 640px) { .grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } }

.carte {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: var(--espace-3);
  border-top: 3px solid var(--vert);
}
.carte h3 { margin-top: var(--espace-1); }
.carte p:last-child { margin-bottom: 0; }
.carte__icone {
  width: 32px;
  height: 32px;
  color: var(--vert-texte);
}

/* Liste d'étapes numérotées */
.etapes {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: etape;
  display: grid;
  gap: var(--espace-3);
}
@media (min-width: 768px) { .etapes { grid-template-columns: repeat(2, 1fr); } }
.etapes li {
  counter-increment: etape;
  position: relative;
  padding-left: 3.5rem;
  margin: 0;
}
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vert);
  line-height: 1;
}
.etapes h3 { margin-bottom: var(--espace-1); }
.etapes p { margin-bottom: 0; }

.bandeau {
  background: var(--encre);
  color: var(--creme);
}
.bandeau h2 { color: var(--creme); }
.bandeau p { color: var(--sombre-texte); }
.bandeau .bouton { background: var(--creme); color: var(--encre); border-color: var(--creme); }
.bandeau .bouton:hover { background: var(--vert-clair); border-color: var(--vert-clair); color: var(--encre); }

.deux-colonnes {
  display: grid;
  gap: var(--espace-4);
  align-items: start;
}
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: 1.2fr 1fr; } }

.encadre {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--vert);
  border-radius: var(--rayon);
  padding: var(--espace-3);
}
.encadre p:last-child, .encadre ul:last-child { margin-bottom: 0; }

/* --- Formulaire ---------------------------------------------------------- */

.formulaire { max-width: 640px; }
.champ { margin-bottom: var(--espace-3); }
.champ label, .champ legend {
  display: block;
  font-weight: 600;
  margin-bottom: var(--espace-1);
}
.champ .aide { color: var(--gris); font-size: 0.9375rem; margin: -0.25rem 0 var(--espace-1); }
.champ input:not([type="checkbox"]), .champ select, .champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-radius: var(--rayon);
  color: var(--encre);
  font: inherit;
  transition: border-color var(--transition);
}
.champ textarea { min-height: 160px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--vert-texte); }
.champ [aria-invalid="true"] { border-color: var(--erreur); border-width: 2px; }
.champ fieldset { border: 0; padding: 0; margin: 0; }
.cases { display: grid; gap: var(--espace-1); }
.cases label {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
  font-weight: 400;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
}
.cases input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--vert-texte); margin: 0; }

.erreur-champ {
  color: var(--erreur);
  font-size: 0.9375rem;
  margin: var(--espace-1) 0 0;
  font-weight: 600;
}
.erreur-champ:empty { display: none; }

.resume-erreurs {
  background: var(--blanc);
  border: 2px solid var(--erreur);
  border-radius: var(--rayon);
  padding: var(--espace-2) var(--espace-3);
  margin-bottom: var(--espace-3);
}
.resume-erreurs h2 { font-size: 1.125rem; color: var(--erreur); margin-bottom: var(--espace-1); }
.resume-erreurs ul { margin: 0; }
.resume-erreurs a { color: var(--erreur); }

.confirmation {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--vert);
  border-radius: var(--rayon);
  padding: var(--espace-3);
}
.confirmation h2 { margin-bottom: var(--espace-1); }

/* Champ piège : invisible pour les humains, hors du flux clavier */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Pied de page -------------------------------------------------------- */

.pied {
  background: var(--sombre);
  color: var(--creme);
  padding-block: var(--espace-5) var(--espace-3);
  margin-top: var(--espace-4);
}
.pied a { color: var(--creme); }
.pied a:hover { color: var(--vert-clair); }
.pied__grille {
  display: grid;
  gap: var(--espace-4);
  margin-bottom: var(--espace-4);
}
@media (min-width: 768px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied__logo img { width: 170px; }
.pied p { color: var(--sombre-texte); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: var(--espace-1); }
.pied li a { display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; }
.pied li a:hover { text-decoration: underline; }
.pied__titre {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vert-clair);
  margin-bottom: var(--espace-2);
}
.pied__bas {
  border-top: 1px solid rgba(245, 242, 236, 0.15);
  padding-top: var(--espace-3);
  font-size: 0.9375rem;
  color: var(--sombre-texte);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1) var(--espace-3);
  justify-content: space-between;
}

/* --- Page de texte (mentions légales, 404) ------------------------------- */

.texte h2 { margin-top: var(--espace-4); font-size: 1.375rem; }
.texte h2:first-of-type { margin-top: 0; }

/* --- Animation d'apparition, discrète, désactivable ---------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .apparait {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 350ms ease-out, transform 350ms ease-out;
  }
  .js .apparait.visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}