/*
* @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); }
/* ── 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); }
/* 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; }