/* ═══════════════════════════════════════════════════════════════════
   Harmonisation des pages intérieures.

   L'accueil a été redessiné ; les autres pages sont restées telles que
   WordPress les avait laissées : police « Inter » jamais chargée, deux
   verts concurrents, des puces violettes, des titres en capitales et
   aucune respiration commune.

   Cette feuille est chargée APRÈS le style propre à chaque page : elle
   ne réécrit pas leur structure, elle impose la grammaire de l'accueil
   aux classes héritées. Rien ici ne vise les classes .ws-* : l'accueil
   n'est pas touché.

   Les jetons portent le préfixe --wsp- pour ne pas écraser les --ws-
   déclarés par l'accueil, qui est chargé sur la même page.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --wsp-vert: var(--ws-accent);
    --wsp-vert-fonce: var(--ws-accent-fort);
    --wsp-vert-tres-doux: var(--ws-accent-doux);
    --wsp-encre: var(--ws-encre);
    --wsp-texte: var(--ws-texte);
    --wsp-doux: var(--ws-doux);
    --wsp-surface: var(--ws-papier);
    --wsp-bord: var(--ws-trait);
    --wsp-bord-fort: var(--ws-trait-fort);
    --wsp-fond: var(--ws-sol);
    --wsp-rayon: var(--ws-rayon-md);
    --wsp-transition: var(--ws-duree-1) ease;
}

/* ── Police ────────────────────────────────────────────────────────
   Les blocs demandaient « Inter », qui n'est chargée nulle part : les
   pages tombaient sur la police système pendant que l'accueil était en
   Manrope. Deux sites en un. */
body {
    font-family: var(--ws-police);
}

/* ── Rythme des sections ───────────────────────────────────────────
   Chaque page avait son propre padding (100, 110, 120px, puis 80px en
   mobile). Une seule cadence, fluide. */
.section,
.modules,
.hero,
.history-section,
.downloads-section {
    padding: clamp(72px, 8vw, 112px) 20px;
}

/* Le héros de « la solution » réservait 90vh à trois paragraphes. */
.hero {
    min-height: 0;
}

/* ── Largeur ───────────────────────────────────────────────────────
   980, 1100, 1200 selon les pages, quand l'accueil travaille à 1280 :
   le contenu occupait une colonne au milieu de l'écran, avec du vide
   des deux côtés. Une seule largeur, celle de l'accueil. */
.container,
.history-container,
.downloads-container {
    max-width: 1280px;
    /* Les pages d'origine centraient via un `margin: auto` déclaré dans
       leur propre style — cette règle-ci ne le répète pas. Les pages
       écrites depuis (entreprises, modules, references, demo) n'ont pas
       ce filet et restaient collées à gauche sur un grand écran. */
    margin-left: auto;
    margin-right: auto;
}

/* ── Titres de page ────────────────────────────────────────────────
   L'accueil pose ses titres en encre sombre avec une barre verte ;
   les pages intérieures les écrivaient en vert, parfois en capitales.
   La taille est fluide : les règles mobiles des pages, déclarées plus
   haut, n'ont plus rien à corriger. */
.title,
.history-title,
.downloads-title {
    position: relative;
    margin: 0 0 clamp(28px, 4vw, 44px);
    padding-left: 22px;
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--wsp-encre);
    text-transform: none;
}

.title::before,
.history-title::before,
.downloads-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 999px;
    background: var(--wsp-vert);
}

/* Le titre d'« Aspects techniques » était écrit en capitales dans le
   HTML : la casse se corrige ici, le contenu reste éditable tel quel. */
.section .title {
    text-transform: none;
}

/* ── Texte courant ─────────────────────────────────────────────────
   15 et 16px selon les pages, sur des lignes de 1100px : illisible.
   17px, interligne large, ligne bornée. */
.text p,
.desc,
.downloads-text,
.history-text,
.history-note,
.download-note {
    font-size: 17px;
    line-height: 1.75;
    color: var(--wsp-texte);
}

/* Le texte d'introduction s'aligne sur le titre, pas sur la barre verte
   qui vit dans la gouttière de 22px. */
.text,
.desc,
.downloads-text {
    max-width: 68ch;
    padding-left: 22px;
}

/* ── Fil d'Ariane ───────────────────────────────────────────────────
   Le site a maintenant trois niveaux (Solution/Pour qui/Preuves/À propos
   › page) : sans repère, une page ouverte depuis un lien externe ne dit
   plus d'où elle vient. Les segments intermédiaires n'ont pas de page à
   eux — seul le dernier segment est la position courante. */
.wss-fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 28px 20px 0;
    font-size: 13px;
    color: var(--wsp-doux);
}

.wss-fil a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--wsp-doux);
    text-decoration: none;
}

.wss-fil a:hover { color: var(--wsp-vert-fonce); text-decoration: underline; }

.wss-fil span + span::before,
.wss-fil a + span::before {
    content: "›";
    margin-right: 8px;
    color: var(--wsp-bord-fort);
}

.wss-fil [aria-current="page"] {
    color: var(--wsp-encre);
    font-weight: 600;
}

@media (min-width: 900px) {
    .wss-fil { margin-left: max(20px, calc((100% - var(--ws-contenu, 1280px)) / 2 + 20px)); }
}

/* ── Chapeau ───────────────────────────────────────────────────────
   Trois pages ouvraient sur un titre puis, aussitôt, une liste. */
.lead {
    max-width: 68ch;
    margin: calc(-1 * clamp(14px, 2vw, 24px)) 0 clamp(32px, 4vw, 48px);
    padding-left: 22px;
    font-size: 18px;
    line-height: 1.75;
    color: var(--wsp-texte);
}

/* ── Bandeau de fin de page ────────────────────────────────────────
   Chaque page intérieure se terminait sur du vide : aucune suite
   proposée au visiteur qui vient de lire. */
.page-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    margin-top: clamp(48px, 7vw, 80px);
    padding: 26px 30px;
    border: 1px solid var(--wsp-bord);
    border-radius: var(--wsp-rayon);
    background: var(--wsp-surface);
}

.page-cta p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--wsp-encre);
}

.page-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    background: var(--wsp-vert);
    /* #ffffff sur ce vert = 1,94:1 (mesuré). Encre sombre = 9,3:1. */
    color: #14170f;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--wsp-transition);
}

.page-cta a:hover {
    background: var(--wsp-vert-fonce);
}

/* ── Puces ─────────────────────────────────────────────────────────
   Le violet #726CFD venait du gabarit WordPress. Un point vert, aligné
   sur la première ligne. */
.list li::before,
.module li::before,
.card li::before {
    content: "";
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wsp-vert);
}

.module li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--wsp-texte);
}

/* La liste de bénéfices de « la solution » : les mêmes cartes que la page
   Aspects techniques, pour que les deux pages se ressemblent. */
.list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: clamp(28px, 4vw, 40px);
}

.list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--wsp-bord);
    border-radius: var(--wsp-rayon);
    background: var(--wsp-surface);
    font-size: 15px;
    line-height: 1.55;
    color: #333333;
}

.list li::before {
    position: static;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wsp-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

@media (max-width: 720px) {
    .list {
        grid-template-columns: 1fr;
    }
}

/* « La solution » n'était qu'une colonne de prose : la moitié droite de
   l'écran restait vide. Les bénéfices s'y installent. */
@media (min-width: 1000px) {
    .hero .container {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 0 60px;
        align-items: start;
    }

    .hero .title,
    .hero .page-cta {
        grid-column: 1 / -1;
    }

    .hero .list {
        grid-template-columns: 1fr;
        margin-top: 6px;
    }
}

/* ── Aspects techniques : neuf lignes de texte nu ──────────────────
   Les mêmes phrases, posées sur des cartes : la page cesse d'être une
   liste à puces sur fond gris. */
.grid {
    gap: 16px;
}

/* À 1280px, deux colonnes laissaient des cartes de 640px pour une ligne
   de texte. */
@media (min-width: 1100px) {
    .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.grid .item {
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--wsp-bord);
    border-radius: var(--wsp-rayon);
    background: var(--wsp-surface);
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    transition: border-color var(--wsp-transition), box-shadow var(--wsp-transition);
}

.grid .item:hover {
    border-color: var(--wsp-bord-fort);
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.05);
}

.grid .item::before {
    content: "";
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--wsp-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ── Versions : la frise ───────────────────────────────────────────
   Les pastilles étaient violettes, la version courante verte : plus de
   distinction par la couleur seule, l'écart se fait sur la taille et
   l'anneau. */
.timeline::before {
    background: #e4e4e0;
}

.item::before {
    background: var(--wsp-vert-fonce);
}

.item.current::before {
    background: var(--wsp-vert);
    box-shadow: 0 0 0 5px var(--wsp-vert-tres-doux);
}

.card {
    border: 1px solid var(--wsp-bord);
    border-radius: var(--wsp-rayon);
    padding: 24px 26px 22px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03);
    transition: border-color var(--wsp-transition), box-shadow var(--wsp-transition);
}

.card:hover {
    border-color: var(--wsp-bord-fort);
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.05);
}

/* h2 : chaque version est un titre de plein droit (lot 6). */
.card h2 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wsp-encre);
}

.card li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--wsp-texte);
}

/* Les fonctionnalités d'une version tenaient sur une colonne au milieu
   d'une carte large de plus de mille pixels. */
@media (min-width: 1000px) {
    .card ul {
        columns: 2;
        column-gap: 48px;
    }

    .card li {
        break-inside: avoid;
    }
}

.item.current .card {
    border-color: var(--wsp-bord-fort);
}

.item.current .card h2 {
    color: var(--wsp-vert-fonce);
}

/* ── Historique ────────────────────────────────────────────────────
   L'année était de la même taille que le texte : la frise se lisait
   comme un paragraphe. */
.history-item::before {
    background: var(--wsp-vert);
    box-shadow: 0 0 0 6px var(--wsp-fond);
}

.history-year {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wsp-encre);
}

.history-note {
    max-width: none;
    border: 1px solid var(--wsp-bord);
    border-radius: var(--wsp-rayon);
}

.history-note a {
    color: var(--wsp-vert-fonce);
}

/* ── Téléchargements ───────────────────────────────────────────────
   Deux verts cohabitaient (#8bc000 et #6f9800) : un seul reste. */
.download-badge {
    background: var(--wsp-vert-tres-doux);
    color: var(--wsp-vert-fonce);
}

.download-btn {
    border-radius: 12px;
    background: var(--wsp-vert);
    font-weight: 700;
}

.download-btn:hover {
    background: var(--wsp-vert-fonce);
}

/* h2 : chaque carte de telechargement est un titre de plein droit. */
.download-card h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wsp-encre);
}

.download-note {
    border: 1px solid var(--wsp-bord);
    border-radius: var(--wsp-rayon);
}

/* ── Education ─────────────────────────────────────────────────────
   L'illustration débordait volontairement de sa colonne (width: 120%
   et une translation de 40px) : elle mordait sur le texte dès que la
   fenêtre se resserrait. */
.visual img {
    width: 100%;
    max-width: 100%;
    transform: none;
    border-radius: var(--wsp-rayon);
}

.visual img:hover {
    transform: none;
}

.module h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wsp-encre);
}

/* ── Pages « Pour qui » ─────────────────────────────────────────────
   Partagées par /education et /entreprises : trois douleurs nommées
   dans le vocabulaire du métier, puis les modules qui les résolvent.
   Un seul jeu de règles pour les deux pages — miroir l'une de l'autre. */
.douleurs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: clamp(28px, 4vw, 40px) 0 clamp(48px, 6vw, 72px);
}

.douleur {
    padding: 22px 24px;
    border: 1px solid var(--wsp-bord);
    border-radius: var(--wsp-rayon);
    background: var(--wsp-surface);
}

/* h2 : chaque douleur est un titre de plein droit. */
.douleur h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--wsp-encre);
}

.douleur p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--wsp-texte);
}

.sous-titre {
    margin: 0 0 clamp(24px, 3vw, 32px);
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--wsp-encre);
}

.modules-colonnes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 40px);
    margin-bottom: clamp(48px, 6vw, 72px);
}

.temoignage-espace {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 24px;
    margin-bottom: clamp(48px, 6vw, 72px);
    border: 1px dashed var(--wsp-bord-fort);
    border-radius: var(--wsp-rayon);
    background: var(--wsp-fond);
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--wsp-doux);
}

/* Note sur mesure : /education et /entreprises, avant le bandeau d'appel. */
.note-sur-mesure {
    margin: 0 0 clamp(32px, 4vw, 48px);
    font-size: 15px;
    line-height: 1.6;
    color: var(--wsp-texte);
}

.note-sur-mesure a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-weight: 600;
    color: var(--wsp-vert-fonce);
}

/* ── Mobile ────────────────────────────────────────────────────────
   Les pages avaient chacune leur point de rupture (768 ou 900px). */
@media (max-width: 768px) {
    .section,
    .modules,
    .hero,
    .history-section,
    .downloads-section {
        padding: clamp(56px, 12vw, 72px) 18px;
    }

    .title,
    .history-title,
    .downloads-title,
    .lead,
    .text,
    .desc,
    .downloads-text {
        padding-left: 16px;
    }

    .grid .item {
        padding: 16px 18px;
        font-size: 15px;
    }

    .douleurs,
    .modules-colonnes {
        grid-template-columns: 1fr;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   Corrections responsive communes à toutes les pages.

   Les blocs de contenu viennent du WordPress : chacun porte son propre
   <style> dans le <head>, avec des tailles et des largeurs fixes. Cette
   feuille est chargée APRÈS ces styles pour pouvoir les corriger sans
   toucher aux blocs un par un — un seul endroit à maintenir.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Titres de page ───────────────────────────────────────────────────
   Les blocs fixent 38 à 42px. « TÉLÉCHARGEMENTS » à 42px mesure 323px :
   sur un écran de 320px le mot, insécable, poussait le document à 339px
   et créait un défilement horizontal. Une taille fluide règle le cas à
   la source plutôt que de masquer le débordement. */
.title,
.downloads-title,
.history-title,
.ws-contact-info h1,
.wss-prose h1 {
  font-size: clamp(1.75rem, 7vw, 2.625rem);
}

/* Un mot plus long que l'écran doit céder, quel que soit le titre. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
}

/* Une URL ou une adresse e-mail collée ne doit pas élargir la page. */
a, p, li, td, dd {
  overflow-wrap: break-word;
}

/* ── Images ───────────────────────────────────────────────────────────
   Garde-fou général : aucune image ne dépasse son conteneur. */
img {
  max-width: 100%;
  height: auto;
}

/* Le graphique de la page Education déborde volontairement vers la droite
   (width: 120% + décalage de 40px). La marge du navigateur l'absorbe au
   delà de ~1384px ; en dessous il sortait de l'écran (+57px à 1024px,
   +23px à 1280px). On ne garde le débordement que là où il tient. */
@media (max-width: 1400px) {
  .visual img {
    width: 100%;
    max-width: 100%;
    transform: none;
  }
  .visual img:hover {
    transform: scale(1.02);
  }
}

/* ── Cibles tactiles ──────────────────────────────────────────────────
   Les liens du pied de page et des blocs de contenu faisaient 16 à 26px
   de haut : impossible à viser au doigt. On les épaissit sur écran étroit
   et sur pointeur grossier — la seule condition « pointer: coarse » laissait
   le cas invérifiable au navigateur de test, et rate les petits écrans
   tactiles mal détectés. */
@media (max-width: 720px), (pointer: coarse) {
  .wss-footer a,
  .ws-contact-details a,
  .wss-prose-body a,
  .history-text a,
  .history-note a,
  .downloads-text a {
    display: inline-block;
    min-height: 44px;
    padding: 11px 2px;
    line-height: 22px;
  }

  /* Le pied de page empile trois blocs de liens : sans cet ajustement les
     zones tactiles se toucheraient. */
  .wss-footer p {
    line-height: 1.4;
  }

  /* Le logo est le lien de retour à l'accueil, et le plus visé du site : son
     image fait 40px de haut, la zone cliquable aussi. Relevée à 44px sans
     agrandir l'image. Repéré seulement en émulant un vrai appareil tactile —
     à la souris la règle « pointer: coarse » ne s'applique pas. */
  .wss-logo {
    min-height: 44px;
    padding: 2px 0;
  }
}

/* ── Zoom automatique d'iOS ───────────────────────────────────────────
   Safari sur iPhone zoome la page quand un champ sous 16px reçoit le
   focus, et n'en revient pas. Le formulaire de contact est à 15px. */
@media (max-width: 720px), (pointer: coarse) {
  .ws-input,
  .ws-textarea,
  input,
  textarea,
  select {
    font-size: 1rem;
  }
}

/* ── Écrans courts (téléphone en paysage) ─────────────────────────────
   À 320px de haut, le hero réservait tout l'écran pour un logo de 180px
   et son titre : plus rien d'autre n'était visible sans défiler. */
@media (max-height: 480px) and (orientation: landscape) {
  .wss-hero {
    min-height: auto;
    padding: 40px 20px;
  }

  .wss-hero-logo {
    width: 96px;
    margin-bottom: 12px;
  }

  /* La flèche de défilement chevauchait le titre sur un hero raccourci. */
  .wss-hero-scroll {
    display: none;
  }

  /* Le panneau de menu doit défiler : il ne tient pas en hauteur. */
  .wss-nav {
    max-height: calc(100dvh - var(--wss-header-h));
    overflow-y: auto;
  }
}