/*
* @subsection ToTop
* @license MIT license - http://opensource.org/licenses/MIT
* @version 1.0.0
*/
.ui-to-top {
position: fixed;
right: 15px;
bottom: 15px;
width: 58px;
height: 58px;
border-radius: 100%;
font-size: 24px;
line-height: 58px;
overflow: hidden;
text-align: center;
text-decoration: none;
z-index: 20;
-webkit-transition: .3s all ease;
transition: .3s all ease;
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
}
.ui-to-top::before {
/*
content: '\e941';
font-family: 'Linearicons';
*/
}
.ui-to-top, .ui-to-top:active, .ui-to-top:focus {
color: #fff;
background: rgba(112, 112, 112, 0.71);
}
.ui-to-top:hover {
color: #fff;
background: #000;
}
.ui-to-top:focus {
outline: 0;
}
.ui-to-top.active {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.mobile .ui-to-top,
.tablet .ui-to-top {
display: none !important;
}
@media (min-width: 480px) {
.ui-to-top {
right: 40px;
bottom: 40px;
}
}
/* ----- contrat prix promo (markup émis par Product::price()) -----
price() rend : NEUF
…
ORIGINE
Barré/discret centralisé ici (common.css est chargé par TOUS les thèmes webshop)
→ le prix d'origine s'affiche barré à côté du prix neuf sur toutes les surfaces
(carte, fiche, panier, favoris, quickview, modal variante), sans re-styler
chaque thème. Les thèmes peuvent surcharger l'esthétique localement. */
.originprice { display: none; }
.linethrough { margin-inline-start: .4rem; font-size: .82em; font-weight: 400; opacity: .8; }
.linethrough .oldprice { text-decoration: line-through; }
/* ═══════════════════════════════════════════════════════════════════════════
SWS Theme-Studio — filet CORE partagé pour les blocs de section (.sws-block__*)
---------------------------------------------------------------------------
Le fallback CORE (_common/blocks/section*.tpl) émet ces classes ; seul carat
les stylait. Ici on les style UNE FOIS pour tous les thèmes SANS override.
Règles STRICTES (non-régression carat/funnel) :
- common.css est chargé AVANT le bundle du thème → à spécificité ÉGALE le thème
gagne. Donc : single-class UNIQUEMENT, JAMAIS !important, JAMAIS de spécificité
augmentée. Les head-fallbacks passent par :where() (spécificité 0).
- Tokens : seul le JEU GARANTI partout est utilisé nu (--color-*, --font-*,
--border-radius*, --section-spacing…). Tout le reste via var(--x, fallback).
JAMAIS --space-* (absent de la plupart, famous le redéfinit à une autre échelle).
- Texte sur média = #fff fixe + scrim (--color-on-primary manque sur 6 thèmes).
═══════════════════════════════════════════════════════════════════════════ */
/* Échelle locale scellée (préfixe --swsb-, jamais surchargée par un thème). */
.sws-block {
--swsb-gap: 1.5rem;
--swsb-radius: var(--border-radius, var(--radius, 0));
--swsb-surface-alt: var(--color-surface-alt, var(--color-surface, #f4f4f5));
/* Repli #64748b (4.76 sur blanc = AA) plutôt que currentColor : avec
currentColor le texte « secondaire » a exactement la couleur du texte
principal, donc aucune hiérarchie visuelle sur un thème qui ne définit
pas le token — ce qui est le cas du thème `sws`. */
--swsb-muted: var(--color-text-muted, #64748b);
--swsb-on-media: #fff;
}
@media (min-width: 768px) { .sws-block { --swsb-gap: 2rem; } }
/* Head de bloc — fallback à spécificité 0 (aide sws-base/clean/famous, perd
toujours face à un thème qui style ces classes). */
:where(.sws-block) .sws-section__head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
:where(.sws-block) .sws-eyebrow { display: inline-block; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent, inherit); }
/* ── ÉCHELLE TYPOGRAPHIQUE ────────────────────────────────────────────────────
5 paliers réguliers au lieu de tailles choisies bloc par bloc :
hero 36 › section 30 › lead 17 › body 16 › small 15 (px, bornes hautes)
⚠️ EN PIXELS, PAS EN REM. Bootstrap 3 pose `html { font-size: 10px }` (voir
bootstrap.min.css) : `1rem` y vaut 10px et non 16px. Des tokens en rem sont
donc rendus ~37 % trop petits sur tous les thèmes qui chargent Bootstrap —
c'est ce qui donnait un texte tassé et illisible. Le px est ici la seule unité
fiable tant que la base html n'est pas normalisée à l'échelle du site.
NB : cela ne casse PAS le zoom navigateur, qui met à l'échelle les px aussi ;
seul le réglage « taille de police » du navigateur est ignoré — compromis
assumé, la lisibilité par défaut prime. */
/* Calé sur les pages vitrine : `.fp-group-title` (sws-landing.css) vaut
clamp(22px, 2.6vw, 30px) — le titre de section reprend exactement cette
valeur, le hero monte d'un cran au-dessus. Cohérence avec /features et
/pricing plutôt qu'une échelle inventée pour les seules pages CMS. */
.sws-block {
--swsb-fs-hero: clamp(26px, 3.4vw, 36px);
--swsb-fs-title: clamp(22px, 2.6vw, 30px);
--swsb-fs-lead: clamp(16px, 1.2vw, 17px);
--swsb-fs-body: 16px;
--swsb-fs-small: 15px;
}
:where(.sws-block) .sws-section__title { margin: .25rem 0; font-family: var(--font-family-heading); font-weight: var(--font-weight-heading, 700); line-height: 1.2; font-size: var(--swsb-fs-title); }
:where(.sws-block) .sws-section__sub { color: var(--swsb-muted); line-height: var(--line-height-base, 1.6); max-width: 60ch; font-size: var(--swsb-fs-lead); }
/* ⚠️ Les templates émettent .sws-text-center / .sws-text-start mais la classe
n'était définie NULLE PART : seul le sous-titre se centrait (via margin auto),
pas le texte — d'où un titre aligné à gauche et un sous-titre centré dans le
même bloc. Utilitaires logiques (start/end) pour rester justes en RTL. */
.sws-text-center { text-align: center; }
.sws-text-start { text-align: start; }
:where(.sws-block) .sws-text-center .sws-section__sub { margin-inline: auto; }
/* ── HERO (layout vedette, rendu par _common/blocks/section-hero.tpl) ── */
.sws-block__hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: clamp(30rem, calc(70 * var(--sws-vh, 1vh)), 46rem); background: var(--color-primary, #1c2329) center/cover no-repeat; color: var(--swsb-on-media); }
.sws-block__hero-slide { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity .9s ease; }
.sws-block__hero-slide.is-active { opacity: 1; }
.sws-block__hero-video, .sws-block__hero-slide-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }
.sws-block__hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.12) 100%); }
.sws-block__hero-inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(2rem, 6vw, 4rem); }
.sws-block__hero-title { margin: 0 0 1rem; max-width: 20ch; color: inherit; font-family: var(--font-family-heading); font-weight: var(--font-weight-heading, 700); line-height: 1.1; font-size: clamp(2.4rem, 6vw, 5rem); }
.sws-block__hero-text { max-width: 52ch; margin: 0 0 1.5rem; font-size: clamp(1rem, 2.2vw, 1.25rem); opacity: .95; }
.sws-block__hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sws-block__hero-dots { position: absolute; z-index: 3; bottom: 1.25rem; inset-inline-end: 1.5rem; display: flex; gap: .5rem; }
.sws-block__hero-dot { width: 8px; height: 8px; padding: 0; border: 1px solid #fff; background: transparent; cursor: pointer; }
.sws-block__hero-dot.is-active { background: #fff; }
/* ── BANNER (le tpl générique émet .sws-block__banner + variante --video) ── */
.sws-block__banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(22rem, calc(48 * var(--sws-vh, 1vh)), 38rem); background: var(--swsb-surface-alt) center/cover no-repeat; color: var(--swsb-on-media); overflow: hidden; text-align: center; }
.sws-block__banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.42); }
.sws-block__banner-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }
.sws-block__banner-inner { position: relative; z-index: 2; width: 100%; padding: 2rem 1.25rem; }
/* ── SPLIT (image + texte) ── */
.sws-block__split { display: grid; grid-template-columns: 1fr; gap: var(--swsb-gap); align-items: center; }
@media (min-width: 768px) { .sws-block__split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .sws-block__split--reverse .sws-block__media { order: -1; } }
.sws-block__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--swsb-radius); display: block; }
.sws-block__body h3 { margin: 0 0 .5rem; font-family: var(--font-family-heading); font-weight: var(--font-weight-heading, 700); }
/* ── GRID (steps/reviews/items sans slider) ── */
/* ⚠️ `auto-fill` remplit la ligne autant que la largeur le permet et IGNORE le
nombre d'items : 6 items donnaient 5 colonnes + 1 orpheline seule sur la ligne
suivante. `columns` de la config n'est pas émis par feature_grid.tpl, il n'y a
donc aucune classe pour le lire — on borne à 3 colonnes, ce qui divise
proprement 3 et 6 items (les cas courants) et laisse chaque carte respirer. */
.sws-block__grid { display: grid; grid-template-columns: 1fr; gap: var(--swsb-gap); }
@media (min-width: 600px) { .sws-block__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sws-block__grid { grid-template-columns: repeat(3, 1fr); } }
/* ── RAIL (scroll-snap horizontal + flèches optionnelles) ── */
.sws-block__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--swsb-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) { .sws-block__rail { grid-auto-columns: clamp(20rem, 30vw, 26rem); } }
.sws-block__rail::-webkit-scrollbar { display: none; }
.sws-block__rail > * { scroll-snap-align: start; }
.sws-block__rail-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .75rem; }
.sws-block__rail-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border, #ddd); background: var(--color-surface, #fff); color: var(--color-text, inherit); cursor: pointer; }
/* ── ITEM card (partagé grid + rail) ── */
.sws-block__item { display: flex; flex-direction: column; }
.sws-block__item-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--swsb-surface-alt); border-radius: var(--swsb-radius); }
.sws-block__item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sws-block__item-title { margin: .75rem 0 .25rem; font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.sws-block__item-text { font-size: 15px; color: var(--swsb-muted); line-height: 1.6; }
/* Cartes d'une grille SANS média (feature_grid) : le titre en capitales collait
au texte et les colonnes se touchaient. On aère et on sépare par un filet, en
ne visant QUE les items sans média — les grilles produit gardent leur rendu. */
:where(.sws-block--feature-grid) .sws-block__item {
padding-block-start: 1.25rem;
border-block-start: 2px solid var(--color-border, rgba(0,0,0,.12));
}
/* Le titre d'item était à .9rem comme son texte : aucune hiérarchie. On le passe
au palier body et on retire les capitales — sur 4 mots (« Boutique en arabe et
en français ») elles nuisent à la lecture plus qu'elles ne structurent. */
:where(.sws-block--feature-grid) .sws-block__item-title {
margin-block: 0 .5rem; line-height: 1.35;
font-size: var(--swsb-fs-body); text-transform: none; letter-spacing: 0;
color: var(--color-text, inherit);
}
:where(.sws-block--feature-grid) .sws-block__item-text { margin: 0; font-size: var(--swsb-fs-small); }
/* Respiration verticale entre les rangées, au-delà du gap horizontal. */
:where(.sws-block--feature-grid) .sws-block__grid { row-gap: calc(var(--swsb-gap) + .5rem); }
/* ── Alternance de fonds (damier) sur une page CMS ──
Les sections se suivaient toutes sur fond blanc : rien ne les separait
visuellement une fois l'espacement pose. On teinte une section sur deux.
Deux precautions :
- `hero` et `cta` portent DEJA leur propre fond gris. Une alternance
mecanique produirait deux gris consecutifs (hero + section 2) ou
ecraserait leur identite : on les exclut du calcul.
- Le fond doit deborder la gouttiere du conteneur, sinon la bande
s'arrete au texte et donne un rectangle flottant. D'ou le padding
negatif compense. */
.sws-cms-sections > .sws-cms-section:nth-of-type(even):not(:has(.sws-block--hero)):not(:has(.sws-block--cta)) {
background: var(--swsb-surface-alt, #f5f6f8);
padding-block: clamp(2.5rem, 5vw, 4rem);
/* BANDE PLEINE LARGEUR — le header et le footer du site vont bord a
bord (fond pleine largeur, contenu centre a l'interieur). Une bande
bornee a la largeur du conteneur (1240px) donnait un rectangle
flottant, en rupture avec le reste de la page.
La technique : sortir du conteneur avec 50vw de chaque cote, puis
rentrer le CONTENU a sa largeur d'origine. `100vw` seul provoquerait
un debordement horizontal quand la barre de defilement est visible. */
margin-inline: calc(50% - 50vw);
padding-inline: calc(50vw - 50% + 20px);
}
/* Le hero et le CTA portent DEJA leur propre fond gris, borne a la largeur
du conteneur. Sur une page CMS on porte ce fond sur la bande pleine
largeur et on le retire du bloc, sinon deux gris se superposent et le
bloc reste un rectangle visible au milieu de la bande. */
.sws-cms-sections > .sws-cms-section:has(.sws-block--hero),
.sws-cms-sections > .sws-cms-section:has(.sws-block--cta) {
background: var(--swsb-surface-alt, #f5f6f8);
margin-inline: calc(50% - 50vw);
padding-inline: calc(50vw - 50% + 20px);
}
.sws-cms-sections .sws-block--hero,
.sws-cms-sections .sws-block--cta {
background: transparent;
}
/* ── Espacement des sections d'une page CMS ──
single.tpl pose `margin-bottom:28px` en style INLINE sur chaque
`.sws-cms-section` : trop serré dès que les blocs portent un média ou
une grille, les sections se touchent. On ne peut pas le surcharger
depuis une feuille externe sans `!important` (style inline = spécificité
maximale), donc on l'annule et on gère l'espacement par le conteneur,
qui lui n'a pas de style inline concurrent. */
.sws-cms-sections { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.sws-cms-sections > .sws-cms-section { margin-bottom: 0 !important; }
/* Un badge ou un logo ne doit pas occuper toute la colonne : sur une
grille 2 colonnes il devient plus haut que le texte qu'il accompagne
et écrase la section. On borne les médias « portrait/carré » et on les
centre. `--rauto` couvre les visuels sans ratio déclaré (badges). */
:where(.sws-block--text-media) .sws-block__media--r1x1,
:where(.sws-block--text-media) .sws-block__media--rauto {
max-inline-size: 230px;
margin-inline: auto;
}
/* Un badge/logo doit s'afficher ENTIER. La regle generale impose
`aspect-ratio: 4/5` + `object-fit: cover`, qui recadre : le blason
AI Ready (420x505, ratio 5/6) se retrouvait coupe en haut et en bas.
`contain` + ratio libre le laissent intact ; pas de fond ni de rayon,
l'image est detouree. */
:where(.sws-block--text-media) .sws-block__media--r1x1 img,
:where(.sws-block--text-media) .sws-block__media--rauto img {
aspect-ratio: auto;
object-fit: contain;
height: auto;
border-radius: 0;
}
/* Filigrane de tuile (3e champ optionnel de `items_text`).
Décoratif : aria-hidden côté template. Les pictos de la bibliothèque
ont des ratios incompatibles (300x178, 168x300, 114x122) — en
vignette ils ne s'alignent pas ; en fond ils deviennent une texture
et une tuile sans picto ne paraît plus incomplète. */
:where(.sws-block--feature-grid) .sws-block__item--has-icon { position: relative; }
:where(.sws-block--feature-grid) .sws-block__item-watermark {
position: absolute;
inset-block-start: .5rem;
inset-inline-end: 0;
inline-size: 92px; block-size: 92px;
object-fit: contain; object-position: top right;
opacity: .10;
pointer-events: none;
z-index: 0;
}
/* Le texte repasse au-dessus du filigrane. */
:where(.sws-block--feature-grid) .sws-block__item > :not(.sws-block__item-watermark) {
position: relative; z-index: 1;
}
/* Le titre ne doit pas courir sous le filigrane. */
:where(.sws-block--feature-grid) .sws-block__item--has-icon .sws-block__item-title {
padding-inline-end: 3rem;
}
/* ── STATS ── */
.sws-block__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--swsb-gap); margin: 0; }
@media (min-width: 768px) { .sws-block__stats { grid-template-columns: repeat(4, 1fr); } }
.sws-block__stat-value { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading, 700); font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.sws-block__stat-label { margin: .35rem 0 0; color: var(--swsb-muted); font-size: .85rem; }
/* ── LOGOS ── */
.sws-block__logos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3rem); }
.sws-block__logos--rail { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sws-block__logo img { max-height: 2.5rem; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: opacity .2s, filter .2s; }
.sws-block__logo:hover img { filter: none; opacity: 1; }
.sws-block__logo-text { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading, 700); opacity: .6; }
/* ── TEXT & MEDIA (blocs de page — 5 compositions d'un même type) ──
Réutilise __split / __banner / __media déjà définis plus haut : ici on ne
pose que le rythme vertical, le média pleine largeur et les ratios. */
/* Wrapper interne d'un bloc de page.
Volontairement NEUTRE : le bloc est déjà rendu dans le conteneur du thème,
y remettre un `.sws-container` réappliquait une largeur max + un padding et
les blocs se retrouvaient étriqués (686px au lieu de la pleine largeur).
Aucune marge non plus : les blocs se suivent sans écart, l'espacement sera
un réglage du bloc. */
/* ⚠️ Les blocs sont rendus DANS le .container Bootstrap, plafonné à 1170px :
sur un large écran la page paraissait étroite et le texte tassé au centre.
On élargit ICI seulement (marge négative compensée par le padding), sans
toucher au .container global — le reste du site garde sa largeur.
Le calc() ne dépasse jamais la largeur disponible, donc pas de scroll
horizontal ; sous 1170px la règle est neutre (marge 0). */
.sws-block__inner { width: 100%; max-width: none; margin: 0; padding: 0; }
/* Cible = 1240px, la largeur de `.fp-wrap` (sws-landing.css) : les pages CMS
s'alignent ainsi sur les pages vitrine du site au lieu d'une valeur arbitraire.
1240 - 1170 = 70, soit 35px de débordement de chaque côté. */
/* ⚠️ PAS de débordement (`margin-inline` négatif) ici : la largeur des pages CMS
est fixée par `PageLayoutRegistry::width()`, émise en STYLE INLINE sur
`.sws-cms-page` par annonce/page/single.tpl — un style inline qu'aucune règle
CSS ne peut surcharger. Une page trop étroite se corrige en changeant son
`layout_code` (single-col 920px / toc 1180px / wide 1240px), pas ici.
Un débordement ajouté par-dessus s'additionnerait à cette largeur et ferait
déborder la page. */
/* ⚠️ common.css est chargé AVANT le bundle du thème : à spécificité ÉGALE le
thème gagne. Ces deux règles doivent battre `.opt-prose` et
`.opt-cms__section` — on double donc la classe (spécificité 0-2-0) plutôt que
de recourir à !important, interdit dans ce fichier. */
/* Largeur de lecture (`.opt-prose { max-width: 68ch }` et équivalents) :
pertinente pour un document rédigé, elle bride les blocs visuels à ~686px. */
.sws-page-blocks.sws-page-blocks { max-width: none; }
/* Les blocs se suivent sans écart ; l'espacement deviendra un réglage du bloc. */
.sws-page-flush.sws-page-flush { margin-bottom: 0; }
[data-type] > .sws-block { margin: 0; padding: 0; }
/* Un emplacement média VIDE ne réserve aucune place côté boutique : il n'existe
que pour l'éditeur, qui le rend cliquable. Sans ça, un bloc dont l'image
n'est pas encore choisie laisse un grand vide sur la page publiée. */
.sws-block--text-media .sws-block__media:empty { display: none; }
/* Même logique pour un bouton sans libellé : présent pour l'éditeur, invisible
sur la page publiée. */
.sws-block__cta-label:empty { display: none; }
/* Vidéo de contenu : mêmes dimensions qu'une image dans le même emplacement. */
.sws-block__video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 0; }
.sws-block__media--full .sws-block__video { aspect-ratio: 16 / 9; }
.sws-block__media--r16x9 .sws-block__video { aspect-ratio: 16 / 9; }
.sws-block__media--r4x3 .sws-block__video { aspect-ratio: 4 / 3; }
.sws-block__media--r1x1 .sws-block__video { aspect-ratio: 1 / 1; }
/* La composition de ces blocs est portée par l'ORDRE DU DOM, pas par une
classe : `order: -1` de `__split--reverse` (pensé pour Theme Studio) la
réinverserait. Neutralisé DANS la même media query — sinon la règle à
768px+ l'emporte et l'inversion revient sur desktop. */
@media (min-width: 768px) {
.sws-block--text-media .sws-block__split .sws-block__media { order: 0; }
}
.sws-block--text-media .sws-block__body > * { margin-block: 0 .75rem; }
.sws-block--text-media .sws-block__body > :last-child { margin-block-end: 0; }
.sws-block__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.25rem 0; }
.sws-block__richtext { line-height: var(--line-height-base, 1.6); }
.sws-block__richtext > :first-child { margin-block-start: 0; }
/* Liens éditoriaux : soulignés, donc identifiables SANS dépendre de la couleur
(WCAG 1.4.1 — la couleur ne doit pas être le seul vecteur d'information).
Sans cela, les liens du bloc « 4 étapes » se confondaient avec le texte. */
:where(.sws-block__richtext) a {
color: inherit; text-decoration: underline; text-underline-offset: .18em;
text-decoration-thickness: 1px; text-decoration-color: var(--color-text-muted, #64748b);
}
.sws-block__richtext a:hover,
.sws-block__richtext a:focus-visible { text-decoration-color: currentColor; }
.sws-block__richtext a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Liste d'étapes numérotées (bloc « 4 étapes ») : la puce chiffrée porte la
progression, chaque item respire pour rester scannable. */
.sws-steps { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: sws-step; text-align: start; }
.sws-steps > li {
position: relative; counter-increment: sws-step;
padding-inline-start: 3rem; padding-block: 1rem 1.25rem;
border-block-start: 1px solid var(--color-border, rgba(0,0,0,.1));
}
.sws-steps > li:first-child { border-block-start: 0; padding-block-start: 0; }
.sws-steps > li::before {
content: counter(sws-step);
position: absolute; inset-inline-start: 0; inset-block-start: 1rem;
display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem;
background: var(--swsb-surface-alt); color: var(--color-text, inherit);
font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
border-radius: var(--swsb-radius);
}
.sws-steps > li:first-child::before { inset-block-start: 0; }
/* Média pleine largeur : sort de la grille __split, garde l'objet couvrant. */
.sws-block__media--full img { width: 100%; height: auto; aspect-ratio: auto; }
/* Ratios explicites — sinon .sws-block__media img impose 4/5. */
.sws-block__media--r16x9 img { aspect-ratio: 16 / 9; }
.sws-block__media--r4x3 img { aspect-ratio: 4 / 3; }
.sws-block__media--r1x1 img { aspect-ratio: 1 / 1; }
/* Sur un bandeau photo, .sws-section__sub imposait --swsb-muted (gris #64748b) :
illisible sur une image sombre alors que __banner force déjà color:#fff.
On rétablit l'héritage pour le sous-titre ET le richtext du bandeau. */
:where(.sws-block__banner-inner) .sws-section__sub,
:where(.sws-block__banner-inner) .sws-block__richtext { color: inherit; }
/* Liens éditoriaux sur média : le soulignement gris disparaîtrait sur la photo. */
:where(.sws-block__banner-inner) .sws-block__richtext a { text-decoration-color: currentColor; }
/* Texte sur média : hérite du scrim de __banner, le texte reste lisible. */
.sws-block--text-over-media .sws-block__banner-inner { max-width: 46rem; margin-inline: auto; }
/* ── BOUTONS DE BLOC ──────────────────────────────────────────────────────────
Les templates de sections (cta / hero / text_media) émettent .sws-btn +
.sws-btn-primary | .sws-btn-outline. Sans ces règles, les CTA rendaient en
LIENS TEXTE bleus : une page CMS ressemblait à un document, pas à une landing.
Style plat (radius hérité du thème, 0 par défaut), pas d'ombre ni de dégradé. */
.sws-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 13px 26px;
font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2;
text-align: center; text-decoration: none; white-space: nowrap;
border: 1px solid transparent; border-radius: var(--swsb-radius);
cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sws-btn:hover, .sws-btn:focus-visible { text-decoration: none; }
/* Accent = #1D8DBA, la couleur des CTA du site (var --ac dans _plan_grid.tpl) :
les boutons de bloc doivent être les mêmes que ceux des pages vitrine.
`--ac` est repris en priorité pour rester synchronisé si le thème le change. */
.sws-btn-primary {
background: var(--color-accent, var(--ac, #1D8DBA)); color: var(--color-on-accent, #fff);
border-color: var(--color-accent, var(--ac, #1D8DBA));
}
.sws-btn-primary:hover, .sws-btn-primary:focus-visible {
background: var(--color-accent-hover, #17739a);
border-color: var(--color-accent-hover, #17739a);
color: var(--color-on-accent, #fff);
}
/* Focus clavier visible sur TOUS les boutons — obligation d'accessibilité :
sans cela, un utilisateur au clavier ne sait pas où il se trouve. */
.sws-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sws-btn-outline {
background: transparent; color: var(--color-text, inherit);
border-color: var(--color-border, rgba(0,0,0,.28));
}
.sws-btn-outline:hover, .sws-btn-outline:focus-visible {
background: var(--color-text, #111); border-color: var(--color-text, #111); color: #fff;
}
/* Sur média sombre (hero avec image de fond) le contour doit rester lisible. */
.sws-block__hero-actions .sws-btn-outline,
.sws-block__banner-inner .sws-btn-outline { color: #fff; border-color: rgba(255,255,255,.7); }
.sws-block__hero-actions .sws-btn-outline:hover,
.sws-block__banner-inner .sws-btn-outline:hover { background: #fff; border-color: #fff; color: #111; }
@media (max-width: 599px) {
/* Pleine largeur sur mobile : la cible de tap doit être atteignable au pouce. */
.sws-block__actions, .sws-block__hero-actions { flex-direction: column; align-items: stretch; }
.sws-block__actions .sws-btn, .sws-block__hero-actions .sws-btn { width: 100%; }
}
/* ── HERO de Page Builder ──
hero.tpl (annonce/page/sections) n'émet ni image ni scrim, seulement
.sws-block--hero : sans traitement il rendait comme un paragraphe ordinaire.
On lui donne le poids d'une ouverture de page — surface, respiration, titre
large — sans dépendre d'un média que ce bloc ne porte pas. */
.sws-block--hero { background: var(--swsb-surface-alt); padding-block: clamp(3rem, 8vw, 5.5rem); }
/* Le padding ci-dessus est calibre pour un hero de landing (sur-titre +
titre long + sous-titre + 2 CTA). Sur un hero compact — pas de
sur-titre, titre court — il laisse un vide sous les boutons. On le
resserre quand le sur-titre est absent du DOM. */
.sws-block--hero:not(:has(.sws-eyebrow)) { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
/* Titre de hero : un cran sous l'échelle --swsb-fs-hero et en gris ardoise
plutôt qu'en encre pleine. Le de la page reste au-dessus dans la
hiérarchie visuelle — le hero l'accompagne, il ne le concurrence pas.
#334155 sur le fond gris clair du hero = 9.42 de contraste, très au-dessus
du seuil AA : plus doux ne veut pas dire moins lisible. */
:where(.sws-block--hero) .sws-section__title {
font-size: clamp(22px, 2.6vw, 29px);
line-height: 1.25;
color: var(--color-text-soft, #334155);
margin-block: 0 1rem;
}
:where(.sws-block--hero) .sws-section__sub { max-width: 46rem; font-size: var(--swsb-fs-lead); line-height: 1.6; margin-block: 0; }
:where(.sws-block--hero .sws-text-center) .sws-section__sub { margin-inline: auto; }
:where(.sws-block--hero .sws-text-center) .sws-block__actions { justify-content: center; }
/* Contraste : #64748b sur blanc = 4.76 (AA atteint). Ne PAS utiliser un bleu
clair type #1d8dba (3.77) — sous le seuil AA de 4.5 pour du texte. */
.sws-eyebrow {
display: inline-block; margin-block-end: .75rem;
font-size: var(--swsb-fs-small, 16px); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
color: var(--color-text-muted, #64748b);
}
/* ── CTA : bloc d'appel à l'action ──
NB : cta.tpl n'émet PAS de classe pour `config.theme` — inutile de styler une
variante `--theme-accent`, elle n'existe pas dans le rendu. Le bloc se
distingue par sa surface et son centrage. */
.sws-block--cta { background: var(--swsb-surface-alt); padding-block: clamp(2.5rem, 6vw, 4rem); text-align: center; }
:where(.sws-block--cta) .sws-section__head { max-width: 46rem; margin-inline: auto; }
:where(.sws-block--cta) .sws-block__actions { justify-content: center; }
/* La note (« sans carte bancaire ») réutilise .sws-block__item-text : on la
discrète sous le bouton plutôt que de la laisser au même poids que le corps. */
:where(.sws-block--cta) .sws-block__item-text { margin-block-start: .75rem; font-size: 16px; }
/* FAQ en natifs — pas de JS, focus visible au clavier. */
.sws-block__faq-item { border-block-end: 1px solid var(--color-border, rgba(0,0,0,.12)); padding-block: 1rem; }
.sws-block__faq-item summary { cursor: pointer; list-style: none; }
.sws-block__faq-item summary::-webkit-details-marker { display: none; }
/* ── INDICE DE FORMULAIRE (regle de mot de passe, etc.) ──────────────────────
Dans common.css et non dans le CSS d un theme : le champ password existe
aussi dans le checkout, servi par TOUS les themes marchands. Defini une
seule fois ici, il est stylé partout. */
.form-hint{display:block;margin-top:6px;font-size:13px;color:var(--color-text-muted,#64748b);line-height:1.4;}
/* L etat d erreur ne repose PAS que sur la couleur de bordure (WCAG 1.4.1) :
le texte de l indice change aussi. */
.form-hint.is-invalid{color:#b91c1c;}
input.is-invalid,input.form-modal.is-invalid{border:1px solid #b91c1c;}
input.is-valid,input.form-modal.is-valid{border:1px solid #15803d;}