/* ═══════════════════════════════════════════════════════════════════
   Jetons de conception — Webside Software V2

   Chargée en premier, avant tout le reste : ces valeurs sont la source
   unique. Les feuilles suivantes s'y réfèrent, elles ne redéclarent pas
   de couleur en dur.

   Le point de départ de ce fichier est une mesure : le vert de la marque
   sur du texte blanc donne un rapport de contraste de 1,94:1, quand la
   norme AA en demande 4,5. Le vert reste donc la marque, mais il devient
   une SURFACE — encre sombre par-dessus (9,3:1) — et cède la couleur du
   texte à sa version foncée, --ws-vert-encre (5,5:1).
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Encres ─────────────────────────────────────────────────────
       Les rapports indiqués sont mesurés sur --ws-papier. */
    --ws-encre:       #14170f;   /* 18,1:1 — titres */
    --ws-texte:       #4a4f42;   /* 8,4:1  — texte courant */
    --ws-doux:        #6b7060;   /* 5,1:1  — mentions, légendes */
    --ws-vert-encre:  #5f7000;   /* 5,5:1  — liens et accents de texte */

    /* ── Surfaces ─────────────────────────────────────────────────── */
    --ws-papier:      #ffffff;
    --ws-sol:         #f6f7f2;
    --ws-trait:       #e4e7dc;
    --ws-trait-fort:  #cdd3c1;

    /* ── Marque ───────────────────────────────────────────────────
       Fond de bouton, pastille, barre d'accent, pictogramme plein.
       Jamais de texte de cette couleur sur fond clair. */
    --ws-accent:      #afc500;
    --ws-accent-fort: #95aa00;
    --ws-accent-doux: #f3f6d8;

    /* ── Signaux ──────────────────────────────────────────────────
       Le bleu est déjà celui de l'application QuickLog. */
    --ws-info:        #00719b;   /* 5,5:1 */
    --ws-alerte:      #a05e00;   /* 5,1:1 */
    --ws-erreur:      #b3261e;   /* 6,5:1 */

    /* ── Typographie ─────────────────────────────────────────────── */
    --ws-police:      "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

    --ws-t-display:   clamp(2.25rem, 5vw, 3rem);
    --ws-t-h1:        clamp(1.75rem, 3.4vw, 2.625rem);
    --ws-t-h2:        clamp(1.375rem, 2.4vw, 1.875rem);
    --ws-t-h3:        1.25rem;
    --ws-t-lg:        1.125rem;
    --ws-t-base:      1rem;
    --ws-t-sm:        0.875rem;
    --ws-t-label:     0.75rem;

    /* ── Espacement, base 4 ──────────────────────────────────────── */
    --ws-esp-1:  4px;
    --ws-esp-2:  8px;
    --ws-esp-3:  12px;
    --ws-esp-4:  16px;
    --ws-esp-6:  24px;
    --ws-esp-8:  32px;
    --ws-esp-12: 48px;
    --ws-esp-16: 64px;
    --ws-esp-24: 96px;
    --ws-esp-32: 128px;
    --ws-section: clamp(72px, 8vw, 112px);

    /* ── Formes ──────────────────────────────────────────────────── */
    --ws-rayon-sm: 8px;    /* contrôles */
    --ws-rayon-md: 16px;   /* cartes */
    --ws-rayon-pill: 999px;

    --ws-ombre-sm: 0 1px 2px rgba(20, 23, 15, 0.05);
    --ws-ombre-md: 0 10px 24px rgba(20, 23, 15, 0.06);
    --ws-ombre-lg: 0 24px 60px rgba(20, 23, 15, 0.10);

    /* ── Mouvement ───────────────────────────────────────────────── */
    --ws-duree-1: 120ms;   /* survol */
    --ws-duree-2: 200ms;   /* changement d'état */
    --ws-duree-3: 320ms;   /* entrée */
    --ws-courbe:  cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ── Mesures ─────────────────────────────────────────────────── */
    --ws-contenu: 1280px;
    --ws-lecture: 68ch;
    --ws-cible:   44px;    /* cible tactile minimale */
}
/* ═══════════════════════════════════════════════════════════════════
   Webside Software — coquille du site : en-tête, hero, pied de page.
   Le style de chaque section de contenu reste dans sa page.
   ═══════════════════════════════════════════════════════════════════ */

/* Les anciens noms restent — ils sont utilisés partout dans ce fichier —
   mais ils ne portent plus de valeur : ils pointent sur les jetons.
   Le vert n'est plus une couleur de texte (1,94:1 sur blanc). */
:root {
  --wss-green:        var(--ws-vert-encre);
  --wss-green-dark:   var(--ws-accent-fort);
  --wss-menu:         var(--ws-encre);
  --wss-ink:          var(--ws-encre);
  --wss-ink-strong:   var(--ws-encre);
  --wss-muted:        var(--ws-texte);
  --wss-border:       var(--ws-trait);
  --wss-header-h:     80px;
  --wss-font-ui:      var(--ws-police);
  --wss-font-display: var(--ws-police);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: var(--wss-header-h);
  font-family: var(--wss-font-ui);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ws-texte);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--wss-green); }

/* Indicateur de focus clavier. Le site s'en remettait au contour par défaut
   du navigateur, quasi invisible sur les liens verts du menu. L'admin a déjà
   la règle équivalente dans son design system : on s'aligne dessus.
   :where() garde une spécificité nulle — n'importe quelle règle de page peut
   encore le personnaliser. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ws-info);
  outline-offset: 3px;
  border-radius: 3px;
}

.wss-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: #fff;
  color: var(--wss-ink-strong);
}
.wss-skip-link:focus { left: 0; }

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

.wss-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--wss-header-h);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}

.wss-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.wss-logo { display: flex; align-items: center; }
.wss-logo img { display: block; width: 177px; height: auto; }

.wss-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wss-menu > li { position: relative; }

.wss-menu a {
  font-size: 14px;
  font-weight: 600;
  color: var(--wss-menu);
  text-decoration: none;
  transition: color .2s ease;
}

.wss-menu a:hover,
.wss-menu a[aria-current="page"] { color: var(--ws-vert-encre); }

/* Seule surface colorée du menu (Von Restorff) : elle se repère sans
   être lue, précisément parce que rien d'autre ici n'est vert. */
.wss-menu a.wss-nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--ws-esp-4, 16px);
  border-radius: var(--ws-rayon-sm, 8px);
  background: var(--ws-accent);
  color: #14170f;
}

.wss-menu a.wss-nav-cta:hover,
.wss-menu a.wss-nav-cta[aria-current="page"] {
  background: var(--ws-accent-fort);
  color: #14170f;
}

@media (max-width: 980px) {
  .wss-menu a.wss-nav-cta {
    justify-content: center;
    margin-top: 10px;
  }
}

.wss-menu > li > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--wss-menu);
  cursor: pointer;
}

.wss-menu > li > button::after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease;
}

.wss-menu > li:hover > button::after,
.wss-menu > li:focus-within > button::after,
.wss-menu > li > button[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Sous-menus : ouverts au survol sur pointeur fin, au clic sinon.
   aria-expanded pilote l'état, le survol n'est qu'un raccourci. */
.wss-submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 10;
  min-width: 220px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid var(--wss-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}

.wss-menu > li:hover > .wss-submenu,
.wss-menu > li:focus-within > .wss-submenu,
.wss-submenu[data-open="true"] { opacity: 1; visibility: visible; }

.wss-submenu a {
  display: block;
  padding: 9px 20px;
  font-weight: 400;
  color: var(--wss-ink-strong);
  white-space: nowrap;
}

.wss-submenu li:first-child a { padding-top: 15px; }
.wss-submenu li:last-child a { padding-bottom: 15px; }

.wss-submenu a:hover { color: var(--wss-green); background: #f7f9f2; }

.wss-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.wss-burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: var(--wss-menu);
  transition: transform .2s ease, opacity .2s ease;
}

.wss-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wss-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wss-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .wss-burger { display: block; }

  .wss-nav {
    position: fixed;
    inset: var(--wss-header-h) 0 auto 0;
    max-height: calc(100vh - var(--wss-header-h));
    max-height: calc(100dvh - var(--wss-header-h));
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--wss-border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  .wss-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

  /* Le panneau occupe l'écran : la page dessous ne doit pas défiler. */
  body.wss-nav-open { overflow: hidden; }

  .wss-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 24px;
  }

  .wss-menu > li { border-bottom: 1px solid #f0f0ec; }
  .wss-menu > li > a,
  .wss-menu > li > button { display: flex; width: 100%; padding: 14px 0; }

  .wss-submenu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 10px 14px;
    transform: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }

  /* Cette remise à zéro annule l'ouverture au survol, inutile en mode
     panneau. Sans le :not(), elle gagnait aussi contre l'ouverture au clic —
     0,3,0 contre 0,2,0 — et sur écran tactile, où le survol reste collé après
     une tape, le sous-menu ne s'ouvrait jamais. */
  .wss-menu > li:hover > .wss-submenu:not([data-open="true"]) { display: none; }
  .wss-submenu[data-open="true"] { display: block; }
  .wss-submenu a { padding: 10px 0; }
}

/* ── Hero pleine page (accueil) ───────────────────────────────────── */

.wss-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 100vh ignore la barre d'adresse mobile : le hero dépasse au chargement
     puis saute quand elle se replie. 100dvh suit la fenêtre réelle ; la
     ligne en vh reste pour les navigateurs qui ne connaissent pas dvh. */
  min-height: calc(100vh - var(--wss-header-h));
  min-height: calc(100dvh - var(--wss-header-h));
  padding: 60px 20px;
  overflow: hidden;
  text-align: center;
}

.wss-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wss-hero-image, url("/images/hero-bg.webp"));
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.wss-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}

.wss-hero-content { position: relative; z-index: 1; }

.wss-hero-logo {
  width: 180px;
  height: auto;
  margin: 0 auto 24px;
}

.wss-hero h1 {
  margin: 0 0 16px;
  font-family: var(--wss-font-ui);
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
}

.wss-hero p {
  margin: 0;
  font-size: clamp(16px, 2vw, 18px);
  color: #fff;
}

.wss-hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  z-index: 1;
  width: 34px;
  height: 34px;
  transform: translateX(-50%);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  rotate: 45deg;
  animation: wss-bob 2s ease-in-out infinite;
}

@keyframes wss-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 8px; }
}

/* ── Page de texte simple (société, 404) ──────────────────────────── */

.wss-prose { padding: clamp(70px, 8vw, 110px) 20px; background: #f8f8f6; }

.wss-prose-inner {
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--wss-font-display);
}

.wss-prose h1 {
  margin: 0 0 32px;
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--wss-ink-strong);
}

.wss-prose p { margin: 0 0 18px; font-size: 16px; line-height: 1.8; color: #333; }
.wss-prose img { display: block; }

/* ── Pied de page ─────────────────────────────────────────────────── */

.wss-footer {
  padding: 60px 20px;
  border-top: 1px solid var(--wss-border);
  background: #fff;
}

.wss-footer-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.wss-footer p { margin: 0; font-size: 14px; line-height: 1.9; }
.wss-footer a { color: var(--wss-green); text-decoration: none; }
.wss-footer a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .wss-footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Retour du formulaire de contact ──────────────────────────────── */

.wss-flash {
  max-width: 1180px;
  margin: 0 auto 24px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 15px;
}

.wss-flash--ok  { border: 1px solid #cfe3a6; background: #f4f9e9; color: #46620f; }
.wss-flash--err { border: 1px solid #f0c3c3; background: #fdf1f1; color: #8f2c2c; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wss-hero::before { background-attachment: scroll; }
}