/*
  Projet : Site 15A
  Fichier : css/caisse.css (feuille propre à la page « La caisse 3.0 »)
  Version : 0.27.10 — 2026-07-18 15:22
  Objectif : Mise en page responsive des 6 sections de la page Caisse, fidèle au
             design officiel (fond vert texturé, titres blancs Montserrat 900,
             alternance visuel / texte). Contient AUSSI le ré-affichage du chrome
             ordinateur (colonne de menu, boutons de défilement, titre latéral) —
             OBLIGATOIRE : header.css masque #pc-nav par défaut et ne le réaffiche
             jamais lui-même (cf. docs/CHROME_MUTUALISE.md).
             Accent de la page : vert padel #12693e (pied de page + flèches).
*/

/* ================================================================== *
 *  Fond + couleur de la page
 * ================================================================== */
/* Les photos en bandeau plein écran débordent volontairement de 12px à
   droite (marge de sécurité demandée par Cédrik pour absorber un écart
   résiduel constaté chez lui malgré la correction de barre de défilement).
   Sans ce réglage, ce débordement rendrait la page réellement défilable
   horizontalement de 12px (vérifié : poser `overflow-x:hidden` sur body
   SEUL ne suffit pas, la page restait défilable — la propagation body→html
   n'est pas fiable partout). `hidden` posé sur html ET body (jamais sur
   main.caisse, où ce même réglage avait déjà causé un double ascenseur
   vertical — voir son commentaire) : html/body sont le « scroller racine »
   de la page, pas un conteneur imbriqué, donc pas le même risque. */
html {
  overflow-x: hidden;
}
body {
  background-color: #12693e; /* repli si l'image ne charge pas */
  overflow-x: hidden;
}

/* Le site pose son fond commun (bleu) via body::before (couche fixe, z-index -1)
   dans base.css. On le remplace ici par le fond vert texturé de la page Caisse —
   même mécanisme, donc il passe bien AU-DESSUS de la couleur du body. */
body::before {
  background-image: url(../images/caisse/fond-vert.jpg);
  background-image: image-set(
    url(../images/caisse/fond-vert.webp) type("image/webp"),
    url(../images/caisse/fond-vert.jpg) type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

main.caisse {
  color: #fff;
  /* PAS de overflow-x:hidden ici : dès qu'un axe est contraint, la règle CSS
     fait calculer l'autre axe ("visible") en "auto" — un 2e ascenseur interne
     apparaissait sur <main> (en plus de celui de la page), à cause de contenus
     internes (marges négatives du pied de page, éléments en position absolue)
     qui dépassent légèrement sans que ce soit un vrai débordement horizontal.
     Le garde-fou anti-débordement se fait maintenant à la source (tailles de
     titre calculées pour ne jamais dépasser), vérifié sans régression sur
     toute la plage 992-1920px + mobile. */
}

main.caisse img {
  max-width: 100%;
  height: auto;
}

/* Contenu réservé aux lecteurs d'écran / moteurs de recherche : présent dans le
   DOM (hiérarchie des titres, SEO) mais invisible à l'œil. Motif standard. */
.cs-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================== *
 *  Échelle typographique — UNE TAILLE PAR LIGNE, mesurée précisément sur
 *  le design officiel (PDF Illustrator rendu à sa résolution native
 *  1920 px, Datas/Page Caisse/page-caisse-officiel.pdf). Pour chaque
 *  ligne : cap-height mesurée en % de la largeur de page → taille de
 *  police ≈ cap-height / 0.72 (Montserrat 900) → vw + plafond calculé
 *  pour un gabarit de référence de 1920 px (plafond = vw × 1920/100/16).
 *  Le design est volontairement démonstratif (poster plein écran) : les
 *  titres sont grands, c'est fidèle à l'original, pas un excès.
 * ================================================================== */
.cs-line {
  display: block;
  margin: 0;
  /* Les gros titres du PDF officiel ne sont PAS en Montserrat : comparaison
     lettre par lettre (S/A/C/3/0/point carré) confirmée avec Nulshock, la
     police déjà utilisée pour les titres ailleurs sur le site (fonts.css). */
  font-family: "Nulshock", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
}
/* Chaque ligne de titre est conçue comme une ligne UNIQUE (comme le design
   officiel) : elle rétrécit via clamp() plutôt que de se couper en deux sur
   les écrans plus étroits — sinon un titre à 4 lignes en devient 5-6 et perd
   sa hiérarchie visuelle. */
@media (min-width: 992px) {
  .cs-line { white-space: nowrap; }
}

/* Hero : « LA CAISSE » (8.9 % de la largeur) / « 3.0 » (21.8 %, la plus
   grande ligne de toute la page) */
/* Valeurs recalées sur mesure réelle du PDF officiel (hauteur des lettres en
   pixels à 1920px, script de contrôle) : « LA CAISSE » ne fait que 26 % de la
   hauteur de « 3.0 » dans le design (86px/331px), pas 41 % comme avant. */
/* Recalé une 2e fois pour Nulshock : cap-height/em de Nulshock ≈ 0.67 (mesuré),
   pas 0.72 (Montserrat) — mêmes cibles PDF (86px / 331px), tailles adaptées. */
.cs-fs-hero-sub { font-size: clamp(0.91rem, 6.68vw, 8.02rem); }
.cs-fs-hero-big { font-size: clamp(3.05rem, 25.70vw, 30.87rem); }

/* Les 4 atouts : les 4 titres sont à la MÊME taille — nettement plus petits
   que les autres titres de la page (à peine plus gros que le texte courant),
   1.67 % de cap-height mesurée précisément (les mesures à zone large étaient
   polluées par la vague blanche décorative qui traverse toute la section). */
/* Recalé sur le PDF officiel : « SIMPLICITÉ » y mesure 252px de large sur un
   gabarit 1920px ; à 2.5vw il en faisait 322 (+28 %). 1.95vw redonne 252. */
.cs-fs-feat { font-size: clamp(1.14rem, 1.95vw, 2.34rem); }

/* Gérez tout : GÉREZ (6.6 %) / TOUT (12.2 %, presque aussi grand que le
   « 3.0 » du hero) / en un coup d'œil (5 %, poids réduit) */
/* Recalculées sur mesure réelle du PDF officiel (hauteur des lettres à
   1920px) : les 3 lignes étaient toutes trop grandes par rapport à l'image
   de la timeline, « TOUT » en particulier (60 % trop gros). */
.cs-fs-gestion-1 { font-size: clamp(1.49rem, 5.94vw, 7.13rem); }
/* Recalés sur le PDF officiel (largeurs d'encre mesurées sur 1920) :
   « TOUT » y fait 554px (rendu : 497, 10 % trop petit) et « EN UN COUP D'ŒIL. »
   729px (rendu : 949, 30 % trop grand — il passait sous la timeline). */
.cs-fs-gestion-2 { font-size: clamp(1.87rem, 8.5vw, 10.2rem); }
.cs-fs-gestion-3 { font-size: clamp(1.04rem, 3.18vw, 3.82rem); font-weight: 700; }

/* Des paiements fluides : 4 lignes alternées 5.4 % / 7.5 % / 6 % / 10.3 % */
.cs-fs-pay-1 { font-size: clamp(1.2rem, 3.3vw, 4rem); }
.cs-fs-pay-2 { font-size: clamp(1.5rem, 4.6vw, 5.5rem); }
.cs-fs-pay-3 { font-size: clamp(1.25rem, 3.7vw, 4.4rem); }
/* Pente calc() (pas un simple vw) : au-delà de 1800px la colonne de menu
   fixe (100px + 20px) grignote une part quasi constante de la marge, donc
   un vw pur redevient trop grand sous ~1600px. Coefficients dérivés d'une
   mesure réelle (script Playwright, bord droit du texte vs bord gauche du
   menu à billes) à 992/1280/1366/1600/1920px, avec ~15px de marge.
   Recalculés une 2e fois après le passage à la police Nulshock (plus large
   que Montserrat à taille égale — le passage de police avait fait revenir
   le chevauchement avec le menu, masqué jusqu'ici par un correctif à côté). */
.cs-fs-pay-4 { font-size: clamp(1.8rem, calc(-1.09rem + 5.45vw), 5.45rem); }

/* Et demain : ET DEMAIN, (7.9 %) / encore plus / de possibilités. (6.1 %) */
/* Recalculées : les 3 lignes débordaient largement sur la photo (jusqu'à
   273px de chevauchement pour « de possibilités. ») — jamais vérifiées
   avec le vrai texte avant ce passage. Mesuré/corrigé pour tenir dans la
   colonne de texte avec marge de sécurité avant la photo. */
/* Recalées sur les largeurs d'encre du PDF officiel (converties dans le repère
   de la photo) : 815 / 529 / 570 px. Les 3 lignes n'ont PAS la même taille dans
   le design (hauteur de capitale mesurée : 90 / 43 / 38), d'où une classe par
   ligne — « de possibilités. » est légèrement plus petit que « encore plus ». */
.cs-fs-demain-1 { font-size: clamp(1.2rem, 5.84vw, 7.01rem); }
.cs-fs-demain-2 { font-size: clamp(0.78rem, 3.15vw, 3.78rem); }
/* Min relevé à 0.78rem (12.5px) : à 0.72rem cette ligne tombait à 11,5px sur
   mobile 390px, sous le seuil de lisibilité de 12px. */
.cs-fs-demain-3 { font-size: clamp(0.78rem, 2.79vw, 3.35rem); }

/* Passez à la caisse : PASSEZ À LA CAISSE (6.65 %) / NOUVELLE + GÉNÉRATION
   (9.5 %, quasi identiques). Même correctif calc() que cs-fs-pay-4 ci-dessus,
   recalculé pour Nulshock. */
.cs-fs-final-1 { font-size: clamp(1.35rem, calc(-0.744rem + 3.72vw), 3.73rem); }
.cs-fs-final-2 { font-size: clamp(1.85rem, calc(-1.19rem + 5.96vw), 5.96rem); }

.cs-fs-body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  text-transform: none;
  /* Le plafond de 1.15rem (18.4px) bridait tout le texte courant des sections
     3 à 6 : le PDF officiel le rend à ~29.7px (encre de 27-29px de haut,
     mesurée sur plusieurs lignes). Interligne du PDF : 36px entre deux lignes,
     soit 1.21 — pas 1.5. */
  font-size: clamp(0.95rem, 1.55vw, 1.86rem);
  line-height: 1.21;
  max-width: 48ch;
}

h1, h2 { margin: 0; }

/* ================================================================== *
 *  Trame commune d'une section (toutes SAUF « Les atouts », qui a son
 *  propre système plein-largeur — voir plus bas)
 * ================================================================== */
.cs-section {
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}

.cs-section > div {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 100%;
}

.cs-text-right { text-align: right; }
.cs-text-right .cs-fs-body { margin-left: auto; }

.cs-text-center { text-align: center; }
.cs-text-center .cs-fs-body { margin-left: auto; margin-right: auto; }

/* ================================================================== *
 *  1. Hero — texte à gauche (LA CAISSE, petit / 3.0, énorme), image à droite
 * ================================================================== */
.cs-hero { padding-top: clamp(1rem, 4vw, 3rem); }
/* Le design laisse 156px de respiration entre le bas du « 3.0 » et le haut de
   la photo des atouts ; il n'y en avait que 20 — la page était étouffée à cet
   endroit. Le complément est posé ici (deux classes pour passer devant la
   marge « 0 auto » de .cs-section). */
.cs-section.cs-hero { margin-bottom: 7.08vw; }
/* Espacement entre sections, demandé par Cédrik pour aérer la page (au-delà de
   la compacité du poster PDF). Chaque marge n'agit que sur la jonction juste
   au-dessus d'elle (les sections suivantes descendent solidairement).
   - atouts -> gestion : n'avait que 30px, on l'amène à ~224 comme hero->atouts.
   - gestion -> paiements et paiements -> demain : un cran de plus, page respirée. */
.cs-section.cs-gestion { margin-top: 10.1vw; }
.cs-section.cs-paiements { margin-top: 2.35vw; }
.cs-section.cs-demain { margin-top: 2.45vw; }
.cs-hero-text { flex: 1 1 320px; text-align: left; }
.cs-hero-img { flex: 0 1 clamp(300px, 44vw, 620px); }
.cs-hero-img img { display: block; width: 100%; }

/* ================================================================== *
 *  2. Les atouts — photo BORD À BORD (comme le design officiel), liste
 *  des 4 atouts SUPERPOSÉE sur sa moitié droite, alignée à droite.
 * ================================================================== */
.cs-features {
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
}

/* La photo doit toucher les deux bords de l'ÉCRAN (comme dans le design
   officiel), pas s'arrêter au cadre de 1800px qui limite le bloc de texte :
   au-delà de 1800px de large, un bandeau vert uni serait sinon visible de
   chaque côté à la place de la photo. Technique « full-bleed » standard :
   la photo casse le cadre parent et s'étire sur 100% de l'écran, tandis que
   le bloc de texte (frère, positionné en absolu par rapport à .cs-features)
   reste lui bien calé dans le cadre de 1800px, comme avant. */
/* --vw-true = largeur visible RÉELLE de l'écran (posée par le script en fin de
   page : document.documentElement.clientWidth, mesurée en JS, jamais en CSS).
   Historique : on avait d'abord essayé de corriger `100vw` (qui inclut la
   barre de défilement Windows classique) en soustrayant sa largeur mesurée
   à part (--sbw). Ça a fini par casser : en forçant la barre à être toujours
   affichée pour fiabiliser CETTE mesure, on a découvert que `100vw` se met
   ALORS à valoir directement la largeur visible dans ce navigateur — rendant
   la soustraction fausse (elle enlevait la barre une deuxième fois). Plutôt
   que de rafistoler encore un calcul qui dépend de ce que `100vw` veut dire
   exactement selon le navigateur/réglage, on mesure la largeur visible
   directement et on s'en sert telle quelle : aucune arithmétique de barre de
   défilement, aucune ambiguïté possible. `100vw` reste la valeur de repli
   avant que le script ait tourné (premières millisecondes de la page). */
/* +12px de marge de sécurité à droite : chez Cédrik (Windows, résolution/zoom
   propres à son écran) restait un léger écart malgré une mesure exacte dans
   nos tests. Il a demandé explicitement d'élargir encore de 8px minimum
   plutôt que de chercher la valeur exacte de son environnement — on élargit
   seulement à DROITE (le bord gauche, déjà bon, ne bouge pas). */
.cs-features-photo {
  width: calc(var(--vw-true, 100vw) + 12px);
  margin-left: calc(50% - var(--vw-true, 100vw) / 2);
}
.cs-features-photo img { display: block; width: 100%; height: auto; }

.cs-features-list {
  list-style: none;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 4vw, 3rem);
  /* La photo (s2-features-photo.png) contient déjà la vague en dur : son canal
     alpha n'est plus opaque au-delà de ~28,9 % de sa hauteur (mesuré : 223px
     sur 772px). Le padding-top doit rester sous cette même proportion de la
     hauteur affichée de la photo, sinon le premier titre passe SOUS la vague. */
  /* Caté sur le PDF : le 1er titre y démarre à 282px sous le haut de la photo
     (mesuré par recalage de la photo, qui est la même image des deux côtés).
     À 13.6vw le bloc entier descendait 56px trop bas. */
  padding-top: clamp(2rem, 10.66vw, 30rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(0.25rem, 0.45vw, 0.32rem);
}

/* La vague de la photo n'est pas une simple diagonale : elle replonge une 2e
   fois plus creux vers la gauche (mesuré dans le canal alpha de l'image :
   jusqu'à 283px de profondeur sous « Simplicité », pas 223px). Seul le tout
   premier item est concerné (les 3 suivants démarrent déjà assez bas) — on ne
   pousse donc que lui, pas toute la liste (qui gâcherait l'espace du bas). */
.cs-feature:first-child { margin-top: clamp(0rem, 2.87vw, 6rem); }

/* ------------------------------------------------------------------ *
 *  Photos recadrées sous 992px — Cédrik a repéré (capture à l'appui) que
 *  les photos « atouts » et « passez à la caisse » laissaient un trou de
 *  fond de page visible sur mobile/tablette : leur fichier DESKTOP a une
 *  grande zone TRANSPARENTE (46 % / 33 % de sa largeur) réservée au texte
 *  superposé en grand écran. Sans superposition (mobile empilé), cette
 *  zone ne montre rien — d'où le trou. En dessous de 992px on sert une
 *  image recadrée sur la photo réelle (voir <picture> dans le HTML), qui
 *  remplit 100 % de la largeur avec du vrai contenu photo.
 *
 *  Le recadrage change le RAPPORT largeur/hauteur affiché (la photo réelle
 *  est plus étroite que le fichier desktop), donc deux choses à recaler
 *  UNIQUEMENT pour ce mode :
 *  1) l'aspect-ratio déclaré, pour que le navigateur réserve la bonne
 *     hauteur dès le début (évite un saut de mise en page) ;
 *  2) l'espacement qui évite que le 1er titre passe sous la vague de la
 *     photo (calculé sur le nouveau rapport, la vague étant au même %
 *     de hauteur qu'avant — seule la largeur a changé).
 * ------------------------------------------------------------------ */
@media (max-width: 991px) {
  .cs-features-photo img { aspect-ratio: 831 / 772; }
  .cs-final-img img { aspect-ratio: 599 / 807; }

  .cs-features-list { padding-top: clamp(2rem, 26.84vw, 30rem); }
  .cs-feature:first-child { margin-top: clamp(0rem, 6.22vw, 10rem); }
}

.cs-feature {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 1.94rem = 31px sur 1920 : cale le bord droit des titres sur les 1540px
     du PDF officiel (à 24px d'écart ils tombaient 7px trop à droite). */
  gap: clamp(0.7rem, 1.94vw, 1.94rem);
  text-align: right;
}

.cs-feature-text { min-width: 0; }
.cs-feature-text h3 {
  margin: 0 0 0.1rem;
  font-family: "Nulshock", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}
/* Taille propre (pas cs-fs-body générique) : ce paragraphe doit rétrécir en
   phase avec la photo (qui, elle, rétrécit en continu avec la largeur) sur
   toute la plage 992-1920px, sinon il prend disproportionnellement plus de
   place qu'elle sur les écrans intermédiaires et le bloc déborde de la photo. */
/* Recalé sur le PDF officiel : la ligne « Plus besoin de logiciels externes. »
   y fait 485px de large et 29px de haut ; à 0.96vw elle n'en faisait que 297
   et 18 (1,62x trop petit — les deux mesures concordent). 1.55vw redonne la
   taille du PDF ; max-width réduit à 26ch pour retrouver ses coupures de ligne
   (la valeur en ch continue de suivre la taille de police, donc la photo). */
.cs-feature-text .cs-fs-body {
  /* La plus longue ligne du PDF fait 559px (« idéale pour tous types de
     restaurants. ») : en dessous, elle se recasse en 3 lignes au lieu de 2.
     29ch ≈ 571px et continue de suivre la taille de police, donc la photo. */
  max-width: 29ch;
  margin-left: auto;
  font-size: clamp(0.84rem, 1.55vw, 1.86rem);
  /* Interligne mesuré sur le PDF : 35px entre deux lignes pour une encre de
     29px, soit 1.18 — et non le 1.5 générique, qui gonflait chaque bloc de
     ~19px et faisait déborder le 4e sous la photo. */
  line-height: 1.18;
}

/* Chaque pictogramme a sa propre largeur naturelle, qui est EXACTEMENT celle
   du PDF officiel (viewBox du fichier : 156.76 / 143.4 / 172.45 / 205.98 px
   sur un gabarit 1920px). Une largeur unique de 4.75rem les rabotait tous à
   76px (moitié trop petits) et leur imposait un gabarit carré qu'ils n'ont
   pas. On rend donc chacun à sa taille propre, qui suit la largeur d'écran. */
/* --pw = largeur naturelle du picto ; --mw = marge de chaque côté pour que les
   4 occupent le MÊME emplacement (celui du plus large, 205.98) : sans ça, les
   titres se terminent en drapeau alors que le PDF les aligne tous sur 1540. */
.cs-feature:nth-child(1) { --pw: 156.76; --mw: 24.61; }
.cs-feature:nth-child(2) { --pw: 143.4;  --mw: 31.29; }
.cs-feature:nth-child(3) { --pw: 172.45; --mw: 16.77; }
.cs-feature:nth-child(4) { --pw: 205.98; --mw: 0; }

.cs-feature > img {
  flex: none;
  width: clamp(
    calc(var(--pw) * 0.28px),
    calc(var(--pw) / 19.2 * 1vw),
    calc(var(--pw) * 1px)
  );
  /* même loi d'échelle que la largeur, pour que l'emplacement reste centré */
  margin-inline: clamp(
    calc(var(--mw) * 0.28px),
    calc(var(--mw) / 19.2 * 1vw),
    calc(var(--mw) * 1px)
  );
  height: auto;
}

@media (min-width: 992px) {
  /* Espacement vertical relevé bloc par bloc sur le PDF officiel : il est
     VOLONTAIREMENT inégal (4.9 / 45.3 / 32 px sur 1920), un écart uniforme ne
     peut donc pas le reproduire. Exprimé en vw pour suivre la photo. */
  .cs-features-list { gap: 0; }
  .cs-feature:nth-child(2) { margin-top: 0.26vw; }
  .cs-feature:nth-child(3) { margin-top: 2.36vw; }
  .cs-feature:nth-child(4) { margin-top: 1.67vw; }

  .cs-features-list {
    position: absolute;
    inset: 0;
    width: 50%;
    margin-left: auto;
    /* Le PDF pousse les pictos jusqu'à 1777px (sur 1920). 8rem de dégagement
       les arrêtait à 1732 et décalait tout le bloc vers l'intérieur. 5.2rem
       redonne le cadrage du PDF tout en laissant la colonne de menu (qui
       commence à 1800) libre de 23px. */
    padding-right: 5.2rem;
  }
}

/* ================================================================== *
 *  3. Gérez tout — texte à gauche, timeline à droite
 * ================================================================== */
.cs-gestion .cs-text { text-align: left; flex: 1 1 340px; }
/* Le paragraphe passait SOUS le titre (8px de recouvrement) alors que le design
   laisse 50px d'air entre « EN UN COUP D'ŒIL. » et sa première ligne. */
.cs-gestion .cs-fs-body { margin-top: 3.02vw; }
/* Spécificité : `.cs-section > div { flex:1 1 340px }` (1 classe + 1 type)
   passait devant `.cs-gestion-img` seul (1 classe) et empêchait ce
   flex-basis de s'appliquer — d'où une image bien plus petite que dans le
   PDF officiel. Qualifié par la section pour gagner (2 classes). */
/* Le fichier source avait une énorme marge transparente (le dessin n'occupait
   que 55 % de sa largeur) : élargir le cadre CSS ne pouvait pas compenser, la
   place disponible n'y suffisait pas, et le dessin restait 2x trop petit. Le
   fichier est désormais recadré sur son dessin (882x534), donc le cadre CSS
   = la taille réelle du dessin. 1040px = la mesure du PDF officiel (obtenue en
   retrouvant le dessin dans la page par recalage). */
.cs-gestion .cs-gestion-img { flex: 0 1 clamp(320px, 54.2vw, 1040px); }
.cs-gestion-img img { display: block; width: 100%; }

/* ================================================================== *
 *  4. Des paiements fluides — icônes à gauche, titre à droite (4 lignes
 *  de tailles alternées, comme le design officiel)
 * ================================================================== */
/* La colonne d'icônes garde une largeur mesurée (ne grandit pas) pour laisser
   toute la place disponible au titre à côté — sinon les deux colonnes se
   partagent l'espace à parts égales et le titre se met à retourner à la ligne
   sur les écrans plus étroits. */
/* Même correctif de spécificité que .cs-gestion-img ci-dessus. */
/* Largeur mesurée sur le PDF officiel (≈810px sur un gabarit 1920px, pas
   320px) : même correctif que le montage de « Gérez tout ». */
.cs-paiements .cs-paiements-img {
  flex: 0 1 clamp(200px, 42vw, 810px);
  display: flex;
  justify-content: center;
}
.cs-paiements-img img { display: block; width: 100%; }
/* Dans le PDF, la colonne de texte CHEVAUCHE le montage d'icônes (le texte
   commence à 832 alors que le montage va jusqu'à 900) : c'est une composition
   d'affiche, pas deux colonnes côte à côte. Sans ce recouvrement, le texte
   n'a que 794px au lieu des 915 du PDF et « ... depuis leur application. »
   se coupe en deux lignes. Le chevauchement tombe sur la zone vide (ombre)
   du montage, et s'annule sous 1200px de large où la place manque. */
.cs-paiements .cs-text-right { flex: 1 1 340px; }
@media (min-width: 1200px) {
  .cs-paiements .cs-text-right { margin-left: clamp(-9.2rem, -7.65vw, 0rem); }
}

/* ================================================================== *
 *  5. Et demain — texte à gauche (titre + feuille de route + paragraphe),
 *  photo qui déborde à droite
 * ================================================================== */
/* La photo colle en haut de la section (elle démarre juste après la vague de
   la section précédente, comme dans le design officiel) au lieu d'être
   centrée verticalement — sinon un grand vide apparaît sous le texte, plus
   court que la photo. */
@media (min-width: 992px) {
  .cs-demain { align-items: flex-start; padding-bottom: clamp(1rem, 2vw, 2rem); }
}
/* Le titre est au-dessus de la photo (z-index) : sur les écrans où il
   déborde très légèrement de sa colonne (nowrap), il reste visible par-dessus
   la photo au lieu d'être caché dessous — cohérent avec le design officiel où
   le titre empiète volontairement sur le début de la photo. */
.cs-demain .cs-text { text-align: left; flex: 1 1 340px; position: relative; z-index: 2; }
/* PAS de z-index sur la photo : elle était posée sur le MÊME plan que le
   bandeau latéral « CAISSE » (plan 1) et, venant après dans la page, elle
   passait DEVANT lui — le bandeau disparaissait dès le début de la section.
   Sans plan imposé, la photo reste sous le bandeau, et le texte (plan 2)
   reste au-dessus de la photo comme voulu. */
.cs-demain-photo { position: relative; }
.cs-demain-roadmap {
  margin: clamp(1rem, 2.5vw, 1.6rem) 0;
  max-width: 260px;
}
.cs-demain-roadmap img { display: block; width: 100%; }
/* Photo en bandeau PLEINE LARGEUR à toutes les tailles (mobile/tablette
   compris), comme la photo de la section des atouts — Cédrik la voulait bord à
   bord partout, pas réduite au centre sur petit écran. On annule le padding
   horizontal de la section (plus bas) pour qu'elle touche les deux bords. */
.cs-demain .cs-demain-photo { flex: none; width: 100%; }
.cs-demain-photo img { display: block; width: 100%; }

/* ------------------------------------------------------------------ *
 *  Composition d'affiche (grand écran) — le design officiel ne met PAS
 *  le texte À CÔTÉ de la photo : la photo est un bandeau pleine largeur
 *  et le titre, la feuille de route et le paragraphe sont POSÉS DESSUS.
 *  Positions relevées sur le PDF puis converties dans le repère de la
 *  photo (carte du PDF : 1980x723 posée à y=72 ; ici : 1920x701).
 *  Tout est en vw, donc l'ensemble reste solidaire de la photo.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
  /* `.cs-section` reçoit ses marges latérales plus bas dans ce fichier : on
     qualifie par les DEUX classes pour gagner, sinon la photo n'est pas en
     pleine largeur (la règle suivante l'emporterait). */
  .cs-section.cs-demain {
    position: relative;
    display: block;
    max-width: none;
    padding: 0;
  }
  .cs-demain .cs-demain-photo {
    flex: none;
    /* --vw-true : voir le commentaire sur .cs-features-photo plus haut, même principe. */
    width: var(--vw-true, 100vw);
    margin-left: calc(50% - var(--vw-true, 100vw) / 2);
  }
  .cs-demain .cs-text {
    position: absolute;
    inset: 0;
    flex: none;
    padding: 0;
    z-index: 2;
  }
  /* Les 3 lignes sont posées une par une dans le design (indentations et
     tailles différentes) : on reproduit ce placement plutôt qu'un bloc aligné. */
  .cs-demain .cs-text h2 { position: absolute; inset: 0; margin: 0; }
  .cs-demain .cs-line { position: absolute; }
  .cs-demain .cs-fs-demain-1 { left: 17.88vw; top: 8.33vw; }
  .cs-demain .cs-fs-demain-2 { left: 25.05vw; top: 13.93vw; }
  .cs-demain .cs-fs-demain-3 { left: 23.64vw; top: 17.90vw; }
  .cs-demain .cs-text .cs-fs-body { position: absolute; left: 9.7vw; top: 22.46vw; width: 46vw; }
  .cs-demain .cs-demain-roadmap {
    position: absolute;
    left: 8.08vw;
    top: 6.46vw;
    width: 15.2vw;
    max-width: none;
    margin: 0;
    z-index: -1; /* derrière le titre, comme dans le PDF */
  }
}

/* ================================================================== *
 *  6. Passez à la caisse — photo à gauche, titre + paragraphe CENTRÉS à
 *  droite (pas alignés à droite), bouton centré sous toute la section
 * ================================================================== */
/* Même correctif de spécificité que .cs-gestion-img (voir plus haut), + la
   photo touche le bord gauche de l'écran dans le PDF officiel (comme la
   bande CAISSE qui passe par-dessus) : marge négative pour annuler le
   padding-left de la section réservé au titre latéral, et largeur mesurée
   sur le PDF (~600px sur un gabarit 1920px, pas 520px). */
/* L'accent du « É » de GÉNÉRATION remontait dans la ligne « NOUVELLE » et la
   touchait (2px de recouvrement mesuré) : l'interligne des titres (0.92) est
   trop serré pour laisser passer un accent capital. Le PDF laisse 38px d'air
   après « PASSEZ À LA CAISSE » et 23px au-dessus de l'accent — on les rend. */
.cs-final .cs-line:nth-of-type(2) { margin-top: 0.89vw; }
.cs-final .cs-line:nth-of-type(3) { margin-top: 1.30vw; }

/* Pas de margin négatif ici : sous 992px (mobile/tablette) la section s'empile
   normalement et ce -8.5rem tirait la photo hors de l'écran à gauche (-13px à
   390px, -116px à 768px — la moitié de la photo était coupée). Le cadrage
   pleine largeur du mode desktop est posé plus bas, dans la media query. */
/* Montage en bandeau PLEINE LARGEUR à toutes les tailles (voir « Et demain »). */
.cs-final .cs-final-img { flex: none; width: 100%; }
.cs-final-img img { display: block; width: 100%; }

/* Pour que la photo/montage de ces deux sections touche les deux bords sur
   mobile/tablette, on retire le padding LATÉRAL de la section (le padding
   vertical, qui aère entre sections, est conservé) et on le redonne au seul
   TEXTE pour qu'il ne colle pas aux bords. En desktop (≥992px) ces sections
   passent en composition posée (padding 0, texte en absolu) — non concerné. */
.cs-section.cs-demain,
.cs-section.cs-final {
  padding-left: 0;
  padding-right: 0;
}
.cs-demain .cs-text,
.cs-final .cs-text-center {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.cs-final .cs-text-center { flex: 1 1 340px; }

/* ------------------------------------------------------------------ *
 *  Composition d'affiche (grand écran) — comme « Et demain », le design
 *  officiel ne pose PAS le montage à côté du texte : c'est un bandeau
 *  quasi pleine largeur (mesuré : 1860x834 sur 1920, soit 96.9vw) avec le
 *  titre et le paragraphe POSÉS DESSUS, à droite. Le cadre était plafonné
 *  à 600px — 3x trop petit.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
  /* deux classes : `.cs-section` reçoit ses marges plus bas dans le fichier */
  .cs-section.cs-final {
    position: relative;
    display: block;
    max-width: none;
    padding: 0;
  }
  .cs-final .cs-final-img {
    flex: none;
    /* Pleine largeur d'écran (comme la photo de « Et demain ») : à 96.9vw il
       restait un liseré de vert à droite que Cédrik a repéré sur sa capture.
       --vw-true : voir le commentaire sur .cs-features-photo plus haut, même principe.
       +12px de marge de sécurité à droite : même ajustement que .cs-features-photo,
       demandé explicitement par Cédrik pour absorber l'écart résiduel chez lui. */
    /* max-width:none impératif : la règle générique `.cs-section > div`
       (cs-final PORTE la classe cs-section) pose `max-width:100%` sur tout
       div enfant direct — elle plafonnait la largeur ci-dessus à 1425px
       quoi qu'on mette dans `width`, quelle que soit sa valeur. */
    max-width: none;
    width: calc(var(--vw-true, 100vw) + 12px);
    margin-left: calc(50% - var(--vw-true, 100vw) / 2);
  }
  .cs-final .cs-text-center {
    position: absolute;
    inset: 0;
    flex: none;
    padding: 0;
    z-index: 2;
    text-align: right;
  }
  .cs-final .cs-text-center h2 { position: absolute; right: 12vw; top: 9.5vw; margin: 0; }
  .cs-final .cs-text-center .cs-fs-body {
    position: absolute;
    right: 12vw;
    top: 25vw;
    width: 34vw;
    margin-left: auto;
  }
}

/* (Le bouton « Demandez une démo » a été retiré à la demande de Cédrik — il
   figurait dans le PDF officiel mais ne servait à rien sur la page ; son CSS
   .cs-cta-wrapper / .cs-cta a été supprimé avec lui.) */

/* ================================================================== *
 *  Adaptation téléphone / petite tablette — tout se recentre et
 *  s'empile, la superposition photo/liste de la section 2 redevient
 *  un empilement normal
 * ================================================================== */
@media (max-width: 991px) {
  .cs-hero-text,
  .cs-gestion .cs-text,
  .cs-demain .cs-text,
  .cs-text-right {
    text-align: center;
  }
  .cs-text-right .cs-fs-body { margin-left: auto; margin-right: auto; }

  .cs-feature {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cs-feature-text .cs-fs-body { margin-left: auto; margin-right: auto; }
  .cs-features-list { align-items: center; text-align: center; }

  .cs-demain-roadmap { margin-left: auto; margin-right: auto; }
}

/* ================================================================== *
 *  Ré-affichage du chrome ordinateur (OBLIGATOIRE) + accent vert
 *  (bloc repris de _modele-page.css — header.css masque #pc-nav par
 *   défaut et ne le réaffiche jamais lui-même)
 * ================================================================== */
@media (min-width: 992px) {
  .mobile-images { display: none; }
  #pc-nav { display: block; }
  .pc-images {
    position: fixed;
    top: 400px;
    padding: 0;
    right: 20px;
    transform: translateY(-50%);
    z-index: 100;
    transition: right 0.3s ease;
    gap: 0;
    display: grid;
    border-radius: 45px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@media (min-width: 1200px) {
  .pc-images { top: 388px; }
}

/* Réserve à gauche la place de la bande « CAISSE » et à droite celle de la
   colonne de boules du menu (toutes deux fixées aux bords de l'écran), pour
   que les grands titres ne passent jamais dessous. */
@media (min-width: 992px) {
  .cs-section { padding-left: 8.5rem; padding-right: 8rem; }
  .cs-features-list { padding-left: 1.5rem; }
}

/* Boutons de défilement : à l'horizontale, décalés de la colonne de menu,
   couleur d'accent officielle de la page (vert padel, même que le pied de page) */
@media (min-width: 992px) {
  .scroll-buttons {
    right: 140px;
    flex-direction: row;
  }
}
.scroll-buttons button { background-color: #12693e; }
.scroll-buttons button:hover {
  background-color: #12693e99;
  transform: scale(1.1);
}

/* Titre latéral vertical « CAISSE » — fixé en haut à gauche, visible ≥992px */
.tournois-titre-gauche { display: none; }
@media (min-width: 992px) {
  .tournois-titre-gauche {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 6rem;
    height: auto;
    z-index: 1;
  }
}