@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap"); /* les 4 guides chargent client.css mais pas les polices d'index.html */
/* Espace client — grammaire visuelle de swiss-piscine.com : fond sable, cartes blanches,
   titres en Cormorant Garamond, sur-titres à petite vague, chiffres en serif, boutons pastille.
   Mobile d'abord (tout tient à 390 px). Ce fichier est chargé APRÈS /css/app.css, qui reste
   partagé avec l'espace pro : toutes les surcharges de l'espace client vivent ici. */

:root {
  /* jetons repris du site (website/src/css/main.css) */
  --sable: #f5f1e8;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sh-w: 0 10px 40px rgba(7,33,46,.10);
  /* vague de séparation du héros — remplie de la couleur du fond de page (sable) */
  --wavesep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26 V14 Q150 0 300 14 T600 14 T900 14 T1200 14 V26 Z' fill='%23f5f1e8'/%3E%3C/svg%3E");
}

body.cl { background: var(--sable); min-height: 100vh; display: flex; flex-direction: column; }
.cl-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--navy); color: #fff; }
.cl-brand { display: flex; align-items: center; gap: 10px; font: 700 1.05rem var(--display); }
.cl-brand em { font: 500 .78rem var(--sans); color: var(--aqua-300); font-style: normal; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.25); }
.cl-top .btn-ghost { color: #dbe9ec; }
.cl-foot { text-align: center; font-size: .78rem; color: var(--muted); padding: 18px; }
.cl-foot a { color: inherit; }
.cl-loading { color: var(--muted); text-align: center; padding: 60px 0; }

/* ---------- grille de widgets : 1 colonne < 640, 2 < 1000, 3 au-delà ---------- */
.cl-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 16px 16px 40px;
  display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; align-content: start; }
/* par défaut un bloc occupe toute la largeur ; seules les cartes se rangent en colonnes */
.cl-main > * { grid-column: 1 / -1; min-width: 0; }
.cl-main > .msg:empty { display: none; }
/* un bouton d'action posé directement dans la grille garde sa largeur naturelle (pleine sur mobile) */
.cl-main > .btn { justify-self: stretch; width: 100%; }
@media (min-width: 640px) { .cl-main > .btn { justify-self: start; width: auto; } }
@media (min-width: 640px) {
  .cl-main { grid-template-columns: repeat(2, 1fr); }
  .cl-main > .cl-sec { grid-column: span 1; }
  .cl-main > .cl-sec.w-2, .cl-main > .cl-sec.w-full { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .cl-main { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cl-main > .cl-sec.w-2 { grid-column: span 2; }
}
/* les guides sont des pages de texte : pas de grille, une largeur de lecture */
.cl-main.cl-guide { display: block; max-width: 720px; }

/* ---------- sur-titre du site : majuscules espacées + petite vague ---------- */
.eyebrow { display: flex; align-items: center; gap: 8px; font: 600 .72rem/1.35 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--aqua-dark); margin: 0 0 12px; }
.eyebrow .vg { width: 22px; height: 8px; stroke: var(--aqua); fill: none; stroke-width: 1.6; flex: 0 0 auto; }
.eyebrow .r { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); font-size: .78rem; }

/* ---------- héros : photo du chantier ou dégradé navy, voile, vague de séparation ---------- */
/* bas carré : la vague de séparation remplit les angles et le héros se fond dans le fond sable */
.cl-hero { position: relative; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; color: #fff;
  min-height: 260px; display: flex; align-items: flex-end;
  background-color: var(--navy);
  background-image: radial-gradient(ellipse 90% 60% at 15% 0%, rgba(31,169,184,.22), transparent 60%), var(--grad-navy); }
.cl-hero.compact { min-height: 190px; }
.cl-hero .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La vidéo se pose par-dessus la photo ; si elle ne charge pas, ou si le visiteur a demandé
   moins d'animations, c'est la photo qui reste — une eau qui bouge peut gêner. */
/* La vidéo a exactement les proportions du bandeau : « cover » n'a donc rien à rogner et on
   voit la maison en haut du plan. On lui donne une boîte plus haute, calée en bas, pour ne
   garder que l'eau — c'est le clapot qu'on veut montrer, pas le bâtiment. */
.cl-hero video.film { border: 0; top: auto; bottom: 0; height: 165%; }
@media (prefers-reduced-motion: reduce) { .cl-hero video.film { display: none; } }
/* Le bandeau est assez haut pour que le texte tienne dans sa moitié basse : au-dessus on voit
   l'eau presque nue, en dessous le voile se densifie là où le texte se pose. Un voile uniforme
   assez dense pour un chantier en plein soleil rendait la photo — et la vidéo — méconnaissables. */
.cl-hero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,33,46,.14) 0%, rgba(7,33,46,.30) 38%, rgba(7,33,46,.74) 68%, rgba(7,33,46,.92) 100%); }
/* Second voile, local au bloc de texte : c'est lui qui garantit le contraste, quoi qu'il y ait
   derrière — reflet de soleil sur l'eau, neige, béton clair. */
.cl-hero .in::before { content: ''; position: absolute; inset: -34px -24px -24px -24px; background: linear-gradient(180deg, transparent 0%, rgba(7,33,46,.70) 26%, rgba(7,33,46,.80) 100%); pointer-events: none; }
.cl-hero .tx, .cl-hero .etat { position: relative; }
.cl-hero .in { position: relative; width: 100%; padding: 22px 20px 36px; display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.cl-hero .tx { min-width: 0; }
.cl-hero .eyebrow { color: #c4eff4; margin-bottom: 6px; }
.cl-hero .eyebrow .vg { stroke: #8ae0ea; }  /* la vague est décorative, elle peut rester plus saturée */
.cl-hero h1 { font: 500 clamp(1.7rem, 6vw, 2.6rem)/1.06 var(--serif); letter-spacing: -.005em; color: #fff; margin: 0 0 5px; }
.cl-hero .adr { color: rgba(255,255,255,.85); font-size: .92rem; margin: 0; }
.cl-hero .etat { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: 8px 14px; border-radius: var(--pill); font: 600 .78rem var(--sans); }
/* la vague est étirée sur toute la largeur (preserveAspectRatio='none') : même dessin à 390 et à 1100 px */
.cl-hero .wavesep { position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; background: var(--wavesep) no-repeat bottom / 100% 22px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.dot.jaune { background: #e0a422; } .dot.gris { background: #b9c7cc; }
@media (max-width: 639px) {
  .cl-hero .etat { margin-left: 0; font-size: .74rem; padding: 6px 12px; white-space: normal; }
  .cl-hero .in { padding: 18px 16px 32px; }
}

/* ---------- cartes ---------- */
.cl-sec { background: var(--surface); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--sh-w); display: flex; flex-direction: column; }
.cl-sec > h2.eyebrow { font-family: var(--sans); }
/* pousse un bloc (bouton d'action) en bas de carte, comme les widgets de la maquette */
.mt { margin-top: auto; padding-top: 14px; }
/* la carte est une colonne flex : un bouton posé directement dedans garderait la pleine largeur */
.cl-sec > .btn { align-self: flex-start; margin-top: 12px; }

/* bande navy de bas de page */
.cl-band { background: var(--navy); background-image: radial-gradient(ellipse 90% 45% at 15% 0%, rgba(31,169,184,.16), transparent 60%); color: #cddbe1; box-shadow: none; padding: 22px 24px; }
.cl-band > h2.eyebrow { color: #7fd6df; }
.cl-band .eyebrow .vg { stroke: #7fd6df; }
.cl-band h3 { font: 500 clamp(1.35rem, 4.5vw, 1.6rem)/1.1 var(--serif); color: #fff; margin: 0 0 8px; letter-spacing: -.005em; }
.cl-band p, .cl-band .cl-help { color: #cddbe1; max-width: 62ch; }
.cl-band .empty { color: rgba(255,255,255,.72); }
.cl-band .cl-row { border-top-color: rgba(255,255,255,.14); }
.cl-band .cl-row b { color: #fff; } .cl-band .cl-row small { color: rgba(255,255,255,.65); }
.cl-band .checklist li { color: #cddbe1; }

/* chiffres en serif */
.big { font: 500 clamp(2rem, 6vw, 3rem)/1 var(--serif); color: var(--navy); letter-spacing: -.01em; margin: 0 0 12px; }
.big.aqua { color: var(--aqua-dark); }
.big small { display: block; font: 500 .84rem var(--sans); color: var(--muted); margin-top: 8px; letter-spacing: 0; }

/* bande de statistiques : filets verticaux, jamais des cartes distinctes */
.statband { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 2px; }
.statband.n2 { grid-template-columns: repeat(2, 1fr); }
.statband .stat { text-align: center; padding: .4rem .5rem; border-left: 1px solid var(--line); min-width: 0; }
.statband .stat:first-child { border-left: 0; }
.statband strong { display: block; font: 500 clamp(1.7rem, 5.5vw, 2.1rem)/1 var(--serif); color: var(--aqua-dark); }
.statband span { font-size: .76rem; color: var(--muted); line-height: 1.3; display: block; }

/* frise d'avancement */
.steps { display: flex; gap: 4px; margin: 14px 0 2px; }
.steps i { flex: 1; height: 6px; background: var(--line); border-radius: 3px; }
.steps i.done { background: var(--aqua-dark); } .steps i.now { background: var(--aqua); }

/* coches turquoise */
.checklist { list-style: none; margin: 6px 0 0; padding: 0; }
.checklist li { position: relative; padding-left: 1.7rem; margin: .5rem 0; font-size: .92rem; line-height: 1.5; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--aqua); font-weight: 700; }

/* note de bas de carte */
.src { font-size: .74rem; color: #93a6ad; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- boutons pastille (sans brillance ni ombre colorée) ---------- */
body.cl .btn { border-radius: var(--pill); font: 600 .9rem var(--sans); padding: .72em 1.4em; border-width: 2px; }
body.cl .btn:hover { transform: none; }
body.cl .btn-sm { font-size: .82rem; padding: .48em 1em; }
body.cl .btn-primary { background: var(--aqua); color: #fff; box-shadow: none; }
body.cl .btn-primary:hover { background: var(--aqua-dark); box-shadow: none; }
body.cl .btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
body.cl .btn-outline:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
body.cl .btn-ghost { border-color: transparent; }
.cl-band .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.cl-band .btn-outline:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* ---------- connexion ---------- */
.cl-login { max-width: 440px; margin: 20px auto; background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-w); padding: 26px 24px 22px; }
.cl-login h1 { font: 500 clamp(1.9rem, 7vw, 2.4rem)/1.06 var(--serif); color: var(--navy); letter-spacing: -.005em; margin: 6px 0 8px; }
.cl-login .lead-p { color: var(--ink-soft); margin: 0 0 20px; line-height: 1.5; }
.cl-code input { font: 600 1.25rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.cl-otp input { font: 700 2rem var(--display); letter-spacing: .35em; text-align: center; }
.cl-help { font-size: .84rem; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.cl-help a { color: var(--aqua-dark); }
.msg { min-height: 0; }
.msg.err { background: #fdecec; color: #a12d2d; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: .9rem; }
.msg.ok { background: var(--ok-050); color: var(--ok); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: .9rem; }

/* ---------- listes à filets fins ---------- */
.cl-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.cl-row:first-of-type { border-top: 0; padding-top: 2px; }
.cl-row .ic { color: var(--aqua-dark); }
.cl-row b { display: block; font-size: .94rem; color: var(--navy); }
.cl-row small { color: var(--muted); font-size: .82rem; }
.cl-row .r { margin-left: auto; text-align: right; font-size: .84rem; color: var(--muted); white-space: nowrap; }
.pill { display: inline-block; font: 600 .72rem var(--sans); padding: 4px 11px; border-radius: var(--pill); background: var(--aqua-050); color: var(--aqua-dark); }
.pill.ok { background: var(--ok-050); color: var(--ok); } .pill.warn { background: #fdf3e1; color: #b7791f; } .pill.err { background: #fdecec; color: #a12d2d; } .pill.grey { background: #f2f5f6; color: var(--muted); }
/* état vide : le cadre pointillé d'app.css, mais compact — un pavé de 54 px de padding
   dans une carte de widget faisait un trou plus grand que la carte elle-même. */
.empty { color: var(--muted); font-size: .9rem; margin: 0; padding: 24px 16px; text-align: center;
  background: transparent; border: 1px dashed var(--line); border-radius: var(--r-sm); }

/* liens de téléchargement : mêmes filets que les lignes, sans fond gris */
.cl-doc { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.cl-doc:first-child { border-top: 0; }
.cl-doc .ic { width: 20px; height: 20px; color: var(--aqua-dark); flex: 0 0 auto; }
.cl-doc b { display: block; font-size: .94rem; color: var(--navy); }
.cl-doc small { display: block; color: var(--muted); font-size: .8rem; }
.cl-doc span { min-width: 0; }
.cl-doc .go { margin-left: auto; color: var(--faint); }
.cl-doc.absent { opacity: .6; pointer-events: none; }
.cl-notice { border-top: 1px solid var(--line); padding: 9px 0; }
.cl-notice:first-of-type { border-top: 0; }
.cl-notice summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; color: var(--navy); }
.cl-notice summary .ic { color: var(--aqua-dark); }
.cl-notice summary .pill { margin-left: auto; }
.cl-notice[open] summary { margin-bottom: 4px; }
.cl-notice .cl-doc { padding-left: 30px; }

/* ---------- accueil : tuiles d'accès rapide ---------- */
.cl-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 640px) { .cl-quick { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.cl-quick button { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--surface); border: 0;
  border-radius: var(--r); padding: 16px; font: 600 .9rem var(--sans); color: var(--navy); cursor: pointer; text-align: left; box-shadow: var(--sh-w); }
.cl-quick button:hover { color: var(--aqua-dark); }
.cl-quick .ic { color: var(--aqua-dark); width: 24px; height: 24px; }
/* une tuile orpheline sur la dernière rangée prend toute la largeur (mobile, 2 colonnes) */
@media (max-width: 639px) { .cl-quick button:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- onglets du bas (mobile d'abord) ---------- */
.cl-tabs { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--line); padding: 8px 4px calc(10px + env(safe-area-inset-bottom)); }
.cl-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; font: 500 .66rem var(--sans); color: var(--muted); cursor: pointer; padding: 2px 6px; }
.cl-tabs button.on { color: var(--aqua-dark); }
.cl-tabs .ic { width: 22px; height: 22px; }
@media (min-width: 720px) {
  /* body.cl est une colonne flex : l'ordre visuel remonte la barre sous l'en-tête (le DOM, lui,
     ne bouge pas — la navigation reste la même, mêmes onglets, même ordre). */
  .cl-top { order: 0; } .cl-beta { order: 1; } .cl-tabs { order: 2; } .cl-main { order: 3; } .cl-foot { order: 4; }
  .cl-tabs { position: sticky; top: 0; justify-content: center; gap: 10px; border-top: 0; border-bottom: 1px solid var(--line); padding: 0 8px; }
  .cl-tabs button { flex-direction: row; gap: 8px; font-size: .88rem; padding: 13px 15px; border-bottom: 2px solid transparent; }
  .cl-tabs button.on { color: var(--navy); font-weight: 600; border-bottom-color: var(--aqua); }
  .cl-tabs button.on .ic { color: var(--aqua-dark); }
}

/* ---------- chantier : frise, photos ---------- */
.tl { list-style: none; margin: 0; padding: 0 0 0 4px; }
.tl li { position: relative; padding: 0 0 14px 24px; font-size: .9rem; }
.tl li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.tl li::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: -2px; width: 2px; background: var(--line); }
.tl li:last-child::after { display: none; }
.tl li.fait::before { background: var(--aqua-dark); border-color: var(--aqua-dark); } .tl li.fait { color: var(--muted); }
.tl li.en_cours::before { background: var(--aqua); border-color: var(--aqua); box-shadow: 0 0 0 4px var(--aqua-050); } .tl li.en_cours b { color: var(--aqua-dark); }
.tl b { font-weight: 600; color: var(--navy); }
.tl li.fait b { color: var(--muted); font-weight: 500; }
.tl small { display: block; color: var(--faint); font-size: .76rem; }
.cl-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cl-photos a { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--aqua-050); }
.cl-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
#sav-apercus:not(:empty) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: -4px 0 14px; }
#sav-apercus img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }

/* ---------- garanties ---------- */
.gar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 7px; }
.gar i { display: block; height: 100%; background: var(--aqua); border-radius: 3px; }
.gar.bientot i { background: #b7791f; } .gar.expiree i { background: #a12d2d; }

/* ---------- formulaires : largeur de lecture dans une carte large ---------- */
.cl-sec form, .cl-sec .lisible { max-width: 640px; }
.cl-sec > p, .cl-sec .cl-help { max-width: 68ch; }
.cl-q textarea { width: 100%; min-height: 96px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font: 400 .95rem var(--sans); resize: vertical; }
.cl-q .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
#f-sav textarea { min-height: 110px; }

/* ---------- offre & factures ---------- */
.cl-facture { align-items: flex-start; }
.cl-fact-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; text-align: right; }
/* dès qu'il y a la place, montant, état et PDF tiennent sur une ligne : des lignes de facture hautes
   comme des cartes se lisent mal quand il y en a cinq d'affilée */
@media (min-width: 640px) { .cl-fact-droite { flex-direction: row; align-items: center; gap: 12px; } }
.cl-fact-droite b { color: var(--navy); font-size: .94rem; white-space: nowrap; }
.cl-total { font-size: .95rem; }
.cl-total .r { color: var(--navy); font-size: 1rem; }

/* ---------- commander ---------- */
.cl-produit .r { font-weight: 600; color: var(--navy); }
.cl-qte { display: flex; align-items: center; gap: 8px; margin: 0 10px; }
/* à 390 px le nom du produit, les boutons de quantité et le prix ne tiennent pas sur une ligne :
   le nom prend la première, quantité et prix la seconde */
.cl-produit .nom { flex: 1; min-width: 0; }
@media (max-width: 639px) {
  .cl-produit { flex-wrap: wrap; }
  .cl-produit .nom { flex: 1 1 100%; }
  .cl-produit .cl-qte { margin: 8px 0 0; }
}
.cl-qte-btn { width: 30px; height: 30px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--navy); font: 700 1rem var(--sans); line-height: 1; cursor: pointer; }
.cl-qte-btn:hover:not(:disabled) { border-color: var(--aqua); color: var(--aqua-dark); }
.cl-qte-btn:disabled { opacity: .4; cursor: default; }
.cl-qte-val { min-width: 1.4em; text-align: center; font: 600 .92rem var(--sans); color: var(--navy); }
.cl-remises-champ label:first-child { display: block; font: 600 .86rem var(--sans); color: var(--ink); margin-bottom: 8px; }
.cl-remises { display: flex; flex-direction: column; gap: 8px; }
.cl-remise { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--pill); font-size: .92rem; color: var(--ink); cursor: pointer; }
.cl-remise:has(input:checked) { border-color: var(--aqua); background: var(--aqua-050); }
.cl-remise input { accent-color: var(--aqua-dark); width: auto; }
#cmd-note { width: 100%; min-height: 64px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font: 400 .92rem var(--sans); resize: vertical; }

/* ---------- mes finitions : pastilles de gamme, grille de vignettes ---------- */
.cl-gammes { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.cl-gamme { border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 .78rem var(--sans); padding: 6px 14px; border-radius: var(--pill); cursor: pointer; }
.cl-gamme.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cl-gamme-note { margin: 0 0 10px; }
.cl-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
/* gamme sans visuel : le libellé porte seul l'information, on lui laisse des colonnes larges */
.cl-vignettes.texte { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cl-vignette { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left;
  background: var(--surface); border: 2px solid transparent; border-radius: 11px; box-shadow: 0 2px 10px rgba(7,33,46,.08); cursor: pointer; }
/* l'image vient d'un autre domaine : le conteneur porte le format, la vignette garde sa place même si elle ne charge pas */
.cl-vignette .im { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--line-soft); overflow: hidden; }
.cl-vignette .im img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* aplat neutre quand l'option n'a pas de visuel (plage) : surtout pas une teinte, qui se choisit sur échantillon */
.cl-vignette .im.vide { background: linear-gradient(135deg, #e7e2d6, #cfc9bb); }
.cl-vignette .lb { display: block; padding: 8px 9px; line-height: 1.25; }
.cl-vignette b { display: block; font: 600 .82rem var(--sans); color: var(--navy); }
.cl-vignette small { display: block; color: var(--muted); font-size: .74rem; }
.cl-vignette.on { border-color: var(--aqua); box-shadow: 0 0 0 4px var(--aqua-050); }
.cl-vignette.on::after { content: "✓"; position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--aqua); color: #fff; font: 700 .76rem var(--sans); display: flex; align-items: center; justify-content: center; }

/* ---------- guides (pages statiques /client/guides/*.html) ---------- */
.cl-guide { max-width: 720px; }
.cl-guide h1 { font: 500 clamp(1.9rem, 6vw, 2.5rem)/1.06 var(--serif); color: var(--navy); letter-spacing: -.005em; margin: 14px 0 16px; }
.cl-guide h2 { font: 500 1.55rem/1.1 var(--serif); color: var(--navy); letter-spacing: -.005em; margin: 28px 0 8px; }
.cl-guide p, .cl-guide li { color: var(--ink-soft); line-height: 1.65; font-size: .95rem; max-width: 640px; }
.cl-guide ul, .cl-guide ol { padding-left: 1.3em; margin: 6px 0 16px; }
.cl-guide li { margin: 4px 0; }
.cl-guide .cl-contact { background: var(--surface); border: 0; box-shadow: var(--sh-w); border-radius: var(--r); padding: 16px 18px; margin-top: 28px; font-size: .92rem; max-width: 640px; }
.cl-guide .cl-contact a { color: var(--aqua-dark); font-weight: 600; }

/* bandeau de phase de test (affiché tant que CLIENT_TESTEURS est renseigné côté serveur) */
.cl-beta { background: #fdf3e1; color: #7a5a00; border-bottom: 1px solid #f1dfa5; font: 600 .8rem var(--sans); text-align: center; padding: 8px 14px; }

/* logo officiel du site (web/images/logo-sp.png) — même marque que swiss-piscine.com */
.cl-logo { height: 34px; width: auto; display: block; }

/* les boutons .btn sont en inline-flex : l'attribut hidden doit gagner */
[hidden] { display: none !important; }

/* Cormorant Garamond sort des chiffres bas-de-casse par défaut : « 10 » se lit « IO ».
   Les titres et les chiffres du portail sont presque tous numériques → chiffres alignés partout. */
.cl-hero h1, .cl-login h1, .cl-band h3, .cl-guide h1, .cl-guide h2, .big, .statband strong {
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
}