/* ==========================================================================
Elementor add-on : cards flow widget 1.4.0
Variables surchargeables (à déclarer dans Atomic si besoin d'un réglage par marque) :
--btw-cf-card-bg-default fond des cards sans couleur choisie
--btw-cf-radius arrondi des cards (réglable dans Style)
--btw-cf-padding marges internes des cards
--btw-cf-s échelle des pointes (1,5 par défaut ; réglable dans Style ; ne dépend JAMAIS de l'espace entre cards)
--btw-cf-min-contrast contraste minimal du texte « Automatique » (4.5 par défaut)
--btw-cf-fg-light / -dark couleurs de repli du texte « Automatique » (blanc / noir)
--btw-cf-arrow-bg / -color / -bg-hover / -color-hover flèches du slider
--btw-cf-bar-track / -fill barre du slider
========================================================================== */
.btw-cf {
--btw-cf-gap: 20px;
--btw-cf-visible: 3.2;
--btw-cf-radius: 10px;
--btw-cf-padding: 1.875rem;
--btw-cf-card-bg-default: var(--group-color-grey-6, #f4f6f8);
/* Pointe : dimensions FIXES (issues du dessin d'origine), multipliées par l'échelle. */
--btw-cf-s: 1.5;
--btw-cf-notch-w: calc(25.409px * var(--btw-cf-s)); /* profondeur + recouvrement */
--btw-cf-notch-h: calc(65.415px * var(--btw-cf-s)); /* largeur de la base */
--btw-cf-notch-ov: calc(1px * var(--btw-cf-s)); /* recouvrement dans la card */
--btw-cf-hole-w: calc(29.409px * var(--btw-cf-s)); /* profondeur de l'encoche (pointe + marge) */
--btw-cf-hole-h: calc(84.909px * var(--btw-cf-s)); /* hauteur de l'embouchure */
/* Encoche « en négatif » dans la card qui reçoit la pointe : toujours dessinée en entier, à profondeur fixe,
quel que soit l'espace entre cards (la pointe s'en approche ou non). Aucune position négative : Chrome
redessine à tort une image de masque décalée entièrement hors de la card. */
--btw-cf-hole-on-left: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29.409 84.909'%3E%3Cpath transform='translate(0 9.747)' d='M0 -9.747A6 6 0 0 0 2.5 -4.873A6 6 0 0 1 5 0A15 15 0 0 0 10.12 11.288L25.995 25.184A10 10 0 0 1 25.995 40.231L10.12 54.127A15 15 0 0 0 5 65.415A6 6 0 0 1 2.5 70.288A6 6 0 0 0 0 75.162Z'/%3E%3C/svg%3E") 0 50% / var(--btw-cf-hole-w) var(--btw-cf-hole-h) no-repeat;
--btw-cf-hole-on-right: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29.409 84.909'%3E%3Cpath transform='matrix(-1 0 0 1 29.409 9.747)' d='M0 -9.747A6 6 0 0 0 2.5 -4.873A6 6 0 0 1 5 0A15 15 0 0 0 10.12 11.288L25.995 25.184A10 10 0 0 1 25.995 40.231L10.12 54.127A15 15 0 0 0 5 65.415A6 6 0 0 1 2.5 70.288A6 6 0 0 0 0 75.162Z'/%3E%3C/svg%3E") 100% 50% / var(--btw-cf-hole-w) var(--btw-cf-hole-h) no-repeat;
--btw-cf-hole-on-top: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84.909 29.409'%3E%3Cpath transform='matrix(0 1 -1 0 75.162 0)' d='M0 -9.747A6 6 0 0 0 2.5 -4.873A6 6 0 0 1 5 0A15 15 0 0 0 10.12 11.288L25.995 25.184A10 10 0 0 1 25.995 40.231L10.12 54.127A15 15 0 0 0 5 65.415A6 6 0 0 1 2.5 70.288A6 6 0 0 0 0 75.162Z'/%3E%3C/svg%3E") 50% 0 / var(--btw-cf-hole-h) var(--btw-cf-hole-w) no-repeat;
/* Couleur des textes « Automatique » : lisibilité minimale (WCAG AA = 4.5) et couleurs de repli. */
--btw-cf-min-contrast: 4.5;
--btw-cf-fg-light: #fff;
--btw-cf-fg-dark: #000;
/* Couche de masque « aucun creux » (Firefox traite mal « mask: none » : il masque toute la card). */
--btw-cf-hole-off: linear-gradient(#0000 0 0);
--btw-cf-arrow-bg: #1a1a1a;
--btw-cf-arrow-color: #fff;
--btw-cf-bar-track: rgb(0 0 0 / 0.15);
--btw-cf-bar-fill: #1a1a1a;
box-sizing: border-box;
}
.btw-cf *,
.btw-cf *::before,
.btw-cf *::after {
box-sizing: border-box;
}
.btw-cf .btw-cf__list {
margin: 0;
padding: 0;
list-style: none;
}
/* ---------- Card ---------- */
.btw-cf .btw-cf__card {
/* Fond résolu : couleur choisie pour la card, sinon gris par défaut du site. */
--btw-cf-bg: var(--btw-card-bg, var(--btw-cf-card-bg-default));
position: relative;
/* Les cards précédentes passent au-dessus des suivantes. */
z-index: calc(var(--btw-cf-total, 1) - var(--btw-cf-i, 1) + 1);
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0;
padding: var(--btw-cf-padding);
}
/* Le fond est porté par un pseudo-élément pour pouvoir y creuser l'empreinte de la pointe précédente
sans découper la pointe de cette card (qui déborde) ni son contenu. */
.btw-cf__card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--btw-cf-radius);
background: var(--btw-cf-bg);
mask: var(--btw-cf-hole, var(--btw-cf-hole-off)), linear-gradient(#000 0 0);
mask-composite: exclude;
}
/* ---------- Couleurs des textes ----------
« Par défaut » : aucune règle, le thème garde la main.
Sélecteurs volontairement plus spécifiques que ceux des thèmes / du kit (h3, p…), sinon ils gagnent. */
/* Automatique : la couleur par défaut du site si elle est assez lisible sur le fond, sinon noir ou blanc.
- Avec JavaScript (.is-ready) : le script mesure le contraste réel et pose data-btw-fg="light|dark" seulement si nécessaire.
- Sans JavaScript, ou avant son chargement : repli noir / blanc selon la luminosité du fond
(1. syntaxe de couleur relative, 2. contrast-color() si le navigateur le connaît). */
.btw-cf .btw-cf__card--auto {
--btw-cf-threshold: 0.623;
--btw-cf-l: max(0, sign(var(--btw-cf-threshold) - l));
}
@supports (color: oklch(from red l c h)) {
.btw-cf:not(.is-ready) .btw-cf__card--auto {
color: oklch(from var(--btw-cf-bg) var(--btw-cf-l) 0 h);
}
}
@supports (color: contrast-color(red)) {
.btw-cf:not(.is-ready) .btw-cf__card--auto {
color: contrast-color(var(--btw-cf-bg));
}
}
/* Couleur par défaut : on neutralise la couleur que le thème pourrait donner aux . */
.btw-cf.is-ready .btw-cf__card--auto {
color: inherit;
}
.btw-cf.is-ready .btw-cf__card--auto[data-btw-fg="light"] {
color: var(--btw-cf-fg-light);
}
.btw-cf.is-ready .btw-cf__card--auto[data-btw-fg="dark"] {
color: var(--btw-cf-fg-dark);
}
.btw-cf .btw-cf__card--auto .btw-cf__title,
.btw-cf .btw-cf__card--auto .btw-cf__num,
.btw-cf .btw-cf__card--auto .btw-cf__icon,
.btw-cf .btw-cf__card--auto .btw-cf__text,
.btw-cf .btw-cf__card--auto .btw-cf__text * {
color: inherit;
}
/* Je choisis : couleurs définies dans le widget pour cette card. */
.btw-cf .btw-cf__card--custom .btw-cf__title,
.btw-cf .btw-cf__card--custom .btw-cf__num,
.btw-cf .btw-cf__card--custom .btw-cf__icon {
color: var(--btw-card-title, currentcolor);
}
.btw-cf .btw-cf__card--custom .btw-cf__text,
.btw-cf .btw-cf__card--custom .btw-cf__text * {
color: var(--btw-card-text, var(--btw-card-title, currentcolor));
}
.btw-cf__head {
display: flex;
align-items: center;
gap: 1rem;
margin-block-end: 0.25rem;
}
.btw-cf__num {
font-size: 2.25rem;
font-weight: 700;
line-height: 1;
}
.btw-cf__icon {
display: inline-flex;
font-size: 2.5rem;
line-height: 1;
}
.btw-cf__icon svg,
.btw-cf__icon i,
.btw-cf__icon img {
inline-size: 1em;
block-size: 1em;
}
.btw-cf__icon .e-font-icon-svg {
fill: currentcolor;
}
.btw-cf .btw-cf__title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
}
.btw-cf__text {
font-size: 0.9375rem;
line-height: 1.5;
}
/* Mise en forme du texte saisi dans l'éditeur (gras, listes, liens…).
Préfixe .btw-cf pour l'emporter sur les marges de paragraphes / listes du thème. */
.btw-cf .btw-cf__text > :first-child {
margin-block-start: 0;
}
.btw-cf .btw-cf__text > :last-child {
margin-block-end: 0;
}
.btw-cf .btw-cf__text :is(p, ul, ol, blockquote) {
margin-block: 0 0.75em;
}
.btw-cf .btw-cf__text :is(ul, ol) {
padding-inline-start: 1.25em;
}
/* La card est un : sans ceci, le navigateur affiche des puces « imbriquées » (cercles). */
.btw-cf .btw-cf__text ul {
list-style: disc;
}
.btw-cf .btw-cf__text ol {
list-style: decimal;
}
.btw-cf .btw-cf__text a {
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* ---------- Mode Schéma ---------- */
.btw-cf--schema .btw-cf__list {
display: grid;
gap: var(--btw-cf-gap);
/* Repli avant que le CSS par breakpoint (généré par le widget) ne prenne le relais. */
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* ---------- Mode Slider ---------- */
.btw-cf--slider {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.btw-cf--slider.btw-cf--nav-above .btw-cf__nav {
order: -1;
}
.btw-cf__viewport {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.btw-cf__viewport::-webkit-scrollbar {
display: none;
}
.btw-cf__viewport:focus-visible {
outline: 2px solid currentcolor;
outline-offset: 4px;
}
.btw-cf--slider .btw-cf__list {
display: flex;
gap: var(--btw-cf-gap);
}
/* Largeur d'une card = (largeur visible − espaces) / nombre de cards visibles.
Avec une valeur décimale (3.2) le calcul est approché, sans conséquence. */
.btw-cf--slider .btw-cf__card {
flex: 0 0 calc((100% - var(--btw-cf-gap) * (var(--btw-cf-visible) - 1)) / var(--btw-cf-visible));
scroll-snap-align: start;
}
/* Slider : chaque card (sauf la première) reçoit le creux de la pointe de la précédente, à sa gauche. */
.btw-cf--pointer.btw-cf--slider .btw-cf__card + .btw-cf__card {
--btw-cf-hole: var(--btw-cf-hole-on-left);
}
/* ---------- Navigation ---------- */
.btw-cf__nav {
display: flex;
align-items: center;
gap: 1rem;
}
.btw-cf--arrows-after .btw-cf__nav {
flex-direction: row-reverse;
}
/* Rien à faire défiler (toutes les cards tiennent) : navigation masquée par le JS. */
.btw-cf.is-static .btw-cf__nav {
display: none;
}
.btw-cf__arrows {
display: flex;
gap: 0.5rem;
}
.btw-cf__btn {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.25rem;
block-size: 2.25rem;
padding: 0;
border: 0;
border-radius: 0.5rem;
background: var(--btw-cf-arrow-bg);
color: var(--btw-cf-arrow-color);
cursor: pointer;
}
.btw-cf__btn--prev svg {
transform: rotate(180deg);
}
.btw-cf__btn:hover:not(:disabled) {
background: var(--btw-cf-arrow-bg-hover, var(--btw-cf-arrow-bg));
color: var(--btw-cf-arrow-color-hover, var(--btw-cf-arrow-color));
}
.btw-cf__btn:focus-visible {
outline: 2px solid currentcolor;
outline-offset: 2px;
}
.btw-cf__btn:disabled {
opacity: 0.35;
cursor: default;
}
.btw-cf__bar {
position: relative;
flex: 1 1 auto;
block-size: 2px;
border-radius: 2px;
background: var(--btw-cf-bar-track);
}
.btw-cf__bar-fill {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: calc(var(--btw-cf-progress, 0.2) * 100%);
border-radius: inherit;
background: var(--btw-cf-bar-fill);
}
@media (prefers-reduced-motion: no-preference) {
.btw-cf__bar-fill {
transition: inline-size 0.25s ease-out;
}
}
/* ---------- Pointes ----------
Chaque card contient 3 pointes (droite / bas / gauche), masquées par défaut.
- Slider : la pointe de droite est affichée (la dernière card n'en a pas).
- Schéma : le widget génère le CSS qui affiche la bonne direction selon la colonne et le breakpoint.
La pointe prend TOUJOURS la couleur de sa card (--btw-cf-bg). Sa taille est fixe. */
.btw-cf__notch {
display: none;
position: absolute;
z-index: 1;
pointer-events: none;
background: var(--btw-cf-bg);
mask-repeat: no-repeat;
mask-size: 100% 100%;
}
.btw-cf--slider .btw-cf__notch--right {
display: block;
}
.btw-cf__notch--right {
top: 50%;
left: calc(100% - var(--btw-cf-notch-ov));
width: var(--btw-cf-notch-w);
height: var(--btw-cf-notch-h);
transform: translateY(-50%);
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 25.409 65.415' preserveAspectRatio='none'%3E%3Cpath d='M-1 0H0A20 20 0 0 0 6.827 15.05L22.702 28.946A5 5 0 0 1 22.702 36.47L6.827 50.366A20 20 0 0 0 0 65.415H-1Z'/%3E%3C/svg%3E");
}
.btw-cf__notch--left {
top: 50%;
right: calc(100% - var(--btw-cf-notch-ov));
width: var(--btw-cf-notch-w);
height: var(--btw-cf-notch-h);
transform: translateY(-50%);
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.409 65.415' preserveAspectRatio='none'%3E%3Cpath transform='matrix(-1 0 0 1 24.409 0)' d='M-1 0H0A20 20 0 0 0 6.827 15.05L22.702 28.946A5 5 0 0 1 22.702 36.47L6.827 50.366A20 20 0 0 0 0 65.415H-1Z'/%3E%3C/svg%3E");
}
.btw-cf__notch--down {
left: 50%;
top: calc(100% - var(--btw-cf-notch-ov));
width: var(--btw-cf-notch-h);
height: var(--btw-cf-notch-w);
transform: translateX(-50%);
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.415 25.409' preserveAspectRatio='none'%3E%3Cpath transform='matrix(0 1 -1 0 65.415 1)' d='M-1 0H0A20 20 0 0 0 6.827 15.05L22.702 28.946A5 5 0 0 1 22.702 36.47L6.827 50.366A20 20 0 0 0 0 65.415H-1Z'/%3E%3C/svg%3E");
}
/* Éditeur : message si le widget est vide */
.btw-cf__empty {
padding: 1rem;
border: 1px dashed currentcolor;
border-radius: 0.5rem;
text-align: center;
}