/* =====================================================================
   PAGES PUBLIQUES — une feuille, pas de dépendance, pas d'étape de build.
   Le reste du dépôt a déjà une chaîne d'outils (la SPA) ; en ajouter une
   seconde pour six pages de texte serait exactement ce que le cadrage
   interdit (§4, option B écartée).

   Le vert vient du produit, pour que le site et l'application se
   ressemblent le jour où un gérant passe de l'un à l'autre.
   ===================================================================== */

:root {
  --encre: #1b2320;
  --encre-douce: #4d5a54;
  --produit: #2f7d55;
  --produit-sombre: #245f41;
  --papier: #ffffff;
  --papier-teinte: #f4f7f5;
  --trait: #dde5e0;
  --large: 62rem;
}

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

body {
  margin: 0;
  color: var(--encre);
  background: var(--papier);
  font: 400 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); margin: 0 0 1rem; }
/* La seconde phrase du titre d'accueil. Le titre pose un constat que le
   visiteur reconnaît — « votre logiciel vous laisse saisir » — puis y répond ;
   composées à l'identique, les deux phrases se lisent comme une seule et la
   réponse se perd. Même taille, moins de poids et moins de contraste : c'est
   la respiration entre les deux, pas une sous-partie. */
h1 .suite { font-weight: 400; color: var(--encre-douce); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 0 0 .9rem; }
h3 { font-size: 1.12rem; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
a { color: var(--produit-sombre); }

/* Le lien d'évitement : invisible tant qu'on ne navigue pas au clavier,
   indispensable dès qu'on le fait. */
.saut {
  position: absolute; left: -9999px;
  background: var(--produit); color: #fff; padding: .7rem 1rem;
}
.saut:focus { left: 1rem; top: 1rem; z-index: 10; border-radius: 6px; }

/* ---- Bandeau ------------------------------------------------------ */
.bandeau {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
  max-width: var(--large); margin: 0 auto; padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--trait);
}
.marque {
  font-weight: 650; font-size: 1.05rem; color: var(--encre);
  text-decoration: none; letter-spacing: -.01em;
}
.bandeau nav { display: flex; flex-wrap: wrap; gap: 1.15rem; align-items: center; }
.bandeau nav a {
  color: var(--encre-douce); text-decoration: none; font-size: .95rem;
}
.bandeau nav a:hover { color: var(--produit-sombre); }
.bandeau nav a[aria-current="page"] {
  color: var(--produit-sombre); font-weight: 600;
}
.bandeau .connexion {
  border: 1px solid var(--trait); border-radius: 999px;
  padding: .35rem .9rem; color: var(--encre);
}

/* ---- Sections ----------------------------------------------------- */
main { display: block; }
.hero, .bande, .trois {
  max-width: var(--large); margin: 0 auto; padding: 3rem 1.25rem;
}
.hero { padding-top: 3.5rem; padding-bottom: 2.5rem; }
.hero.etroit, .bande.sobre p, .bande.encadre p { max-width: 46rem; }
.chapo {
  font-size: 1.2rem; color: var(--encre-douce); max-width: 44rem;
}
.bande { border-top: 1px solid var(--trait); }
.bande.sobre { background: var(--papier-teinte); max-width: none; }
.bande.sobre > * { max-width: var(--large); margin-left: auto; margin-right: auto; }
.bande.encadre {
  border: 1px solid var(--trait); border-left: 4px solid var(--produit);
  border-radius: 10px; max-width: 58rem; margin: 2.5rem auto; padding: 1.75rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.75rem; }
.bouton {
  display: inline-block; background: var(--produit); color: #fff;
  text-decoration: none; font-weight: 600;
  padding: .8rem 1.4rem; border-radius: 8px;
}
.bouton:hover { background: var(--produit-sombre); }
.lien-second { color: var(--encre-douce); }

/* ---- La citation : le test de faisabilité qui parle --------------------------- */
.citation {
  font-size: 1.3rem; font-weight: 600; color: var(--produit-sombre);
  border-left: 4px solid var(--produit); padding-left: 1rem; margin: 1.5rem 0;
}
.citation.petite {
  font-size: 1rem; font-weight: 400; color: var(--encre);
  background: var(--papier-teinte); border-radius: 8px;
  border-left-width: 4px; padding: .9rem 1rem; margin: .9rem 0 0;
}

/* ---- Listes ------------------------------------------------------- */
.deroule { padding-left: 1.2rem; }
.deroule > li { margin-bottom: 1.1rem; }
.colonnes { padding-left: 1.2rem; }
.colonnes > li { margin-bottom: .65rem; }
.trois {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  border-top: 1px solid var(--trait);
}

/* ---- La grille tarifaire ------------------------------------------ */
/* ⚠️ Un tableau doit pouvoir défiler SEUL sur téléphone : sans ce
   conteneur, c'est la page entière qui part en travers. */
.grille { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.grille caption { text-align: left; color: var(--encre-douce); padding-bottom: .75rem; font-size: .95rem; }
.grille th, .grille td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--trait); }
.grille thead th { font-size: .9rem; color: var(--encre-douce); font-weight: 600; }
.grille tbody th { font-weight: 600; }
.grille .retenu { background: var(--papier-teinte); font-weight: 600; }
.grille .detail { display: block; font-weight: 400; font-size: .88rem; color: var(--encre-douce); }

/* ---- Mentions provisoires ----------------------------------------- */
.provisoire { color: var(--encre-douce); font-size: .9rem; }
.centre { max-width: var(--large); margin: 0 auto 3rem; padding: 0 1.25rem; text-align: center; }

/* ---- Pied --------------------------------------------------------- */
.pied {
  border-top: 1px solid var(--trait); margin-top: 2rem;
  padding: 2rem 1.25rem 3rem;
}
.pied nav {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  max-width: var(--large); margin: 0 auto .9rem;
}
.pied nav a { color: var(--encre-douce); text-decoration: none; font-size: .93rem; }
.pied nav a:hover { color: var(--produit-sombre); }
.pied .provisoire { max-width: var(--large); margin: 0 auto; }

/* ---- Thème sombre : suivre le système, pas l'imposer -------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --encre: #e8eeea; --encre-douce: #a8b5ae;
    --papier: #121714; --papier-teinte: #1a211d;
    --trait: #2b342f; --produit: #4aa87a; --produit-sombre: #6cc396;
  }
  .bouton { color: #10221a; }
  .bandeau .connexion { color: var(--encre); }
}

/* ---- Centre d'aide ------------------------------------------------ */
/* Le fil d'Ariane : sur un article atteint depuis un moteur de
   recherche, c'est le seul chemin de retour vers le reste du site. */
.fil { font-size: .93rem; margin-bottom: .6rem; }
.fil a { color: var(--encre-douce); }

.sommaire { list-style: none; padding: 0; margin: 0; }
.sommaire > li {
  border-bottom: 1px solid var(--trait); padding: 1.1rem 0;
}
.sommaire > li:first-child { border-top: 1px solid var(--trait); }
.sommaire a { text-decoration: none; font-size: 1.08rem; }
.sommaire a:hover { text-decoration: underline; }
.sommaire .detail {
  display: block; color: var(--encre-douce); font-size: .95rem;
  margin-top: .25rem;
}

/* ---- L'inscription (P5) ------------------------------------------- */
/* Le seul formulaire du site public. Deux champs, en une colonne :
   côte à côte, ils invitent à remplir vite et à se tromper d'adresse —
   et l'adresse est la seule chose qu'on ne peut pas rattraper, puisque
   c'est elle qui reçoit le lien d'entrée. */
.formulaire { margin-top: 2rem; max-width: 32rem; }

.champ { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.5rem; }
.champ label { font-weight: 600; }
.champ input {
  font: inherit; color: var(--encre); background: var(--papier);
  padding: .7rem .85rem; border: 1px solid var(--trait); border-radius: 8px;
}
/* Le contour de focus est VISIBLE et ne se supprime pas : sans lui, on ne
   sait plus où l'on est au clavier — et c'est le premier écran du site. */
.champ input:focus-visible {
  outline: 2px solid var(--produit); outline-offset: 1px;
  border-color: var(--produit);
}
.champ .aide { color: var(--encre-douce); font-size: .9rem; }

/* L'erreur ne se distingue PAS par la seule couleur (une bordure épaisse
   la porte aussi) : un daltonien lirait sinon un paragraphe ordinaire. */
.alerte {
  border-left: 4px solid var(--produit); background: var(--papier-teinte);
  padding: .85rem 1rem; border-radius: 0 8px 8px 0; margin-top: 1.5rem;
}

button.bouton { font: inherit; border: 0; cursor: pointer; }

/* Le bouton d'inscription DANS le bandeau.
   ⚠️ Trouvé à l'écran, pas en relisant : `.bandeau nav a` (deux classes et
   un élément) l'emporte en spécificité sur `.bouton`, si bien que le texte
   restait vert sombre SUR le vert du bouton — illisible, et sur le seul
   bouton qui mène à un client. Il faut donc reposer la couleur au moins
   aussi précisément. */
.bandeau nav a.bouton {
  color: #fff; padding: .45rem 1rem; font-size: .95rem; font-weight: 600;
}
.bandeau nav a.bouton:hover { color: #fff; background: var(--produit-sombre); }

@media (prefers-color-scheme: dark) {
  .bandeau nav a.bouton, .bandeau nav a.bouton:hover { color: #10221a; }
}

/* Le champ de texte long de la page de contact — même traitement que les
   champs courts, sinon il a l'air d'appartenir à un autre site. */
.champ textarea {
  font: inherit; color: var(--encre); background: var(--papier);
  padding: .7rem .85rem; border: 1px solid var(--trait); border-radius: 8px;
  resize: vertical;
}
.champ textarea:focus-visible {
  outline: 2px solid var(--produit); outline-offset: 1px;
  border-color: var(--produit);
}

/* ---- Les pages juridiques ----------------------------------------- */
/* Un document se lit en COLONNE ÉTROITE et avec des titres qu'on
   retrouve en diagonale : c'est le seul endroit du site où quelqu'un
   cherche une clause précise plutôt que de lire une page. */
.juridique { max-width: 48rem; }
.juridique h2 {
  font-size: 1.25rem; margin-top: 2.5rem;
  padding-top: 1.5rem; border-top: 1px solid var(--trait);
}
.juridique h3 { margin-top: 1.75rem; }
.juridique h4 { font-size: 1rem; margin: 1.25rem 0 .35rem; }
.juridique hr {
  border: 0; border-top: 2px solid var(--produit); margin: 3rem 0;
}
.juridique .bande.sobre {
  padding: 1.5rem; border-radius: 10px; margin: 1.5rem 0;
}