/* Pod tenants — dedicated funnel layout (landing / upload / reveal). */
hr {
border-color: #ccc;
color: #ccc;
margin: 30px 0;
}
.text-tenant {
color: var(--accent);
}
.underline {
text-decoration: underline;
}
.old-price {
/* text-decoration: line-through; */
color: #818181;
font-size: 1.5rem;
font-weight: bold;
font-family: var(--px-font-display);
position: relative;
margin-left: 8px;
}
.old-price::before {
content: "";
width: 100%;
height: 3px;
border-radius: 2px;
background-color: rgba(144, 144, 144, 0.7);
position: absolute;
top: 48%;
}
.market-args {
/* margin-bottom: 48px; */
}
.pod-plp__reveal .market-args {
columns: 2;
}
.market-args ul {
list-style-type: none;
padding: 0;
}
.market-args ul li {
margin-bottom: 12px;
font-weight: bold;
display: flex;
align-items: center;
}
.market-args ul li::before {
content: "✓";
background: var(--tenant-accent);
color: white;
padding: 5px;
width: 20px;
height: 20px;
font-size: 12px;
border-radius: 100%;
margin-right: 8px;
font-weight: 900;
flex-shrink: 0;
align-items: center;
justify-content: center;
display: flex;
}
.pod-plp__buy-zone .small{
font-size: 0.7rem;
}
.pod-plp__buy-zone .pod-plp__reveal-secure {
max-width: 100%;
}
.pod-plp__buy-zone .cp-secure-landing {
width: 100%;
display: block;
}
.pod-plp__buy-zone .cp-secure-landing .cp-secure-landing__title {
font-size: 0.8rem;
margin-bottom: 5px;
text-align: center;
}
.pod-plp__buy-zone .cp-stripe-logo {
height: 16px;
}
.pod-plp__buy-zone .cp-secure-landing img {
margin: 0 auto;
}
.market-args-small ul {
list-style-type: none;
padding: 0;
}
.market-args-small ul li {
display: flex;
align-items: center;
font-size: 0.9rem;
}
.market-args-small ul li::before {
content: "✓";
color: var(--tenant-accent);
width: 20px;
height: 20px;
font-size: 12px;
border-radius: 100%;
margin-right: 5px;
font-weight: 900;
flex-shrink: 0;
align-items: center;
justify-content: center;
display: flex;
}
.pod-body {
background: var(--px-paper);
/* background: #fff; */
color: var(--px-ink-900);
font-family: var(--px-font-sans);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.pod-body.pod-landing-body, .pod-body.pod-landing-body .pod-main {
background: #fff;
}
.pod-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
}
.pod-nav__link {
color: var(--px-ink-600);
font-weight: 500;
text-decoration: none;
}
.pod-nav__link:hover {
color: var(--px-primary-500);
}
.pod-main {
flex: 1;
width: 100%;
max-width: 720px;
margin: 0 auto;
/* padding horizontale inconditionnelle (pas seulement sous 1200px, voir plus bas) : entre
1200 et 1320px de viewport, .pod-main--wide (max-width:1320) n'a pas encore atteint son
plafond ET n'a plus de padding conditionnelle → largeur = 100% du viewport, contenu collé
aux 2 bords. Symptôme observé "à taille tablette, aucune marge, contenu collé à gauche". */
padding: 48px 24px;
transition: max-width 0.2s ease;
background-color: var(--px-paper, white);
}
/* La boutique a besoin de bien plus d'air que le tunnel upload/inscription — voir
layouts/pod.html.erb (content_for :page_class) et pod/generations/show.html.erb. */
.pod-main.pod-main--wide {
max-width: 1320px;
padding: 24px;
}
/* ── Layout landing (layouts/pod_landing.html.erb) — header sans issue vers le reste du site ──
Le conteneur du logo reprend exactement la même logique de largeur que .pod-main (même
classe de page_class appliquée aux deux), pour que le logo s'aligne toujours avec le contenu
plutôt qu'avec le bord de la fenêtre. */
.pod-landing-header {
padding: 20px 0;
border-bottom: 1px solid #f1f1f1;
position: relative;
z-index: 99999999;
margin-bottom: 18px;
}
.pod-landing-header__inner {
width: 100%;
max-width: 720px;
margin: 0 auto;
/* N'avait jamais de padding horizontale (contrairement à .pod-main juste au-dessus, qui en a
eu une — incomplète — voir commentaire dessus) : le logo touchait le bord gauche à toute
largeur < 1320px tant que le conteneur n'a pas atteint son plafond. box-sizing:border-box
nécessaire pour que 100% + padding ne dépasse jamais le viewport (overflow-x). */
box-sizing: border-box;
padding: 0 24px;
transition: max-width 0.2s ease;
}
.pod-landing-header__inner.pod-main--wide {
max-width: 1320px;
}
@media (max-width: 860px) {
.pod-reveal__signin-hint {
margin-top: 28px !important;
}
.pod-plp__guest-picker-select {
justify-self: center;
}
.pod-landing-header {
padding: 10px 0;
}
.pod-landing-header__inner {
text-align: center;
}
}
.pod-footer {
display: flex;
flex-wrap: nowrap;
gap: 16px;
align-items: center;
justify-content: center;
padding: 20px;
border-top: 1px solid var(--px-ink-100);
font-size: var(--px-text-sm);
}
/* Ajoute de l'espace sous le footer quand une barre fixe (panier, bouton génération)
est présente — la barre couvre les ~72px du bas, on les compense ici. */
.pod-footer--above-bar {
padding-bottom: 140px;
}
.pod-footer__link {
color: var(--px-ink-500);
text-decoration: none;
}
.pod-footer__link:hover {
color: var(--px-primary-500);
}
.pod-footer__copyright {
color: var(--px-ink-300);
}
/* ── Landing — 2 colonnes pleine largeur : dropzone collante | sélecteur de style ────────
Même grammaire visuelle que la boutique (.pod-shop, voir pod/generations/show.html.erb) :
colonne gauche en mat blanc façon tirage encadré, colonne droite en grille de cartes. ──── */
.pod-home {
display: grid;
grid-template-columns: minmax(320px, 460px) 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 880px) {
.pod-home {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* top : 57px de header sticky (.px-topnav, users loggués) + ~28px d'air — sinon la colonne
collante passe sous la navbar au scroll. */
.pod-home__visual {
position: sticky;
top: 85px;
}
@media (max-width: 880px) {
.pod-home__visual {
position: static;
}
}
/* Cadre mat blanc — évoque le tirage encadré, cohérent avec .pod-shop__photo-wrap. */
.pod-home__frame {
background: var(--px-white);
padding: 16px;
border-radius: 22px;
box-shadow: var(--px-shadow-lg, 0 20px 40px -8px rgba(10, 15, 28, .14));
}
/* min-height : réserve la place pour 2 lignes de titre — évite que "1. Uploadez…" (colonne
étroite, retombe souvent sur 2 lignes) ne désaligne le haut de la dropzone par rapport au
haut de la grille de presets (colonne large, 1 ligne). */
.pod-home__rail-head {
margin-bottom: 18px;
min-height: 64px;
}
.pod-home__rail-title {
font-family: var(--px-font-display);
font-size: var(--px-text-2xl);
line-height: 1.3;
margin: 4px 0 0;
color: var(--px-ink-900);
}
/* ── Dropzone (self-contained — does not reuse the SaaS .upload-zone) ──── */
.pod-dropzone {
background: var(--px-ink-50);
border-radius: 14px;
text-align: center;
cursor: pointer;
transition: background 0.15s ease;
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
display: flex;
align-items: center;
justify-content: center;
}
.pod-dropzone:hover,
.pod-dropzone--dragover {
background: color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 8%, var(--px-ink-50));
}
.pod-dropzone--has-image {
background: #111;
}
.pod-dropzone__empty {
padding: 36px 24px;
display: flex;
flex-direction: column;
align-items: center;
}
.pod-dropzone__icon {
font-size: 1.75rem;
margin-bottom: 10px;
color: var(--px-ink-400);
}
.pod-dropzone__text {
font-size: var(--px-text-base);
color: var(--px-ink-900);
font-weight: 500;
}
.pod-dropzone__hint {
font-size: var(--px-text-sm);
color: var(--px-ink-500);
margin-top: 4px;
}
.pod-dropzone__loaded {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
}
.pod-dropzone--has-image .pod-dropzone__loaded {
display: flex;
}
.pod-dropzone--has-image .pod-dropzone__empty {
display: none;
}
.pod-dropzone__preview-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
opacity: 0.85;
}
.pod-dropzone__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.pod-dropzone__change-btn {
background: var(--px-white);
color: var(--px-ink-900);
font-size: var(--px-text-sm);
font-weight: 600;
padding: 7px 16px;
border-radius: 6px;
border: 1px solid var(--px-ink-200);
}
/* ── Option "nom de l'animal" — page intermédiaire dédiée (pod/generations/pet_name.html.erb) ── */
.pod-home__pet-name-input {
width: 100%;
margin-top: 8px;
padding: 10px 14px;
border: 1px solid var(--px-ink-200);
border-radius: var(--px-r-md, 10px);
font-size: var(--px-text-sm);
font-family: inherit;
}
.pod-home__pet-name-input:focus {
outline: none;
border-color: var(--tenant-accent, var(--px-primary-500));
}
.pod-pet-name-page {
text-align: center;
}
.pod-pet-name-page__title {
font-family: var(--px-font-display);
font-size: var(--px-text-2xl);
color: var(--px-ink-900);
margin: 0 0 8px;
}
.pod-pet-name-page__sub {
color: var(--px-ink-500);
margin: 0 0 28px;
}
.pod-pet-name-page__form {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 420px;
margin: 0 auto 18px;
}
.pod-pet-name-page__form .pod-home__pet-name-input {
margin-top: 0;
padding: 13px 16px;
font-size: var(--px-text-base);
text-align: center;
}
.pod-pet-name-page__skip-btn {
background: none;
border: none;
color: var(--px-ink-500);
font-size: var(--px-text-sm);
text-decoration: underline;
cursor: pointer;
padding: 8px;
}
.pod-pet-name-page__skip-btn:hover {
color: var(--px-ink-700);
}
.pod-address-form .pod-home__pet-name-input {
text-align: left;
}
.pod-address-form__row {
display: flex;
gap: 10px;
}
.pod-address-form__row .pod-home__pet-name-input {
width: 100%;
}
.pod-gift-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--px-text-secondary, #555);
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
}
.pod-gift-toggle input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--px-primary, #000);
}
.pod-gift-toggle__textarea {
margin-top: 8px;
resize: vertical;
width: 100%;
}
.pod-checkout-gift-badge {
background: #fff8e1;
border: 1px solid #ffe082;
border-radius: 8px;
padding: 10px 14px;
font-size: var(--px-text-sm);
margin-bottom: 16px;
color: #5d4037;
}
.pod-checkout-gift-badge em {
font-style: italic;
}
.pod-checkout-summary-page {
text-align: center;
max-width: 880px;
margin: 0 auto;
}
.pod-checkout-summary-page__title {
font-family: var(--px-font-display);
font-size: var(--px-text-2xl);
color: var(--px-ink-900);
margin: 0 0 8px;
}
.pod-checkout-summary-page__sub {
color: var(--px-ink-500);
margin: 0 0 28px;
}
.pod-checkout-summary-card {
background: var(--px-white);
border-radius: var(--px-radius-lg, 16px);
box-shadow: var(--px-shadow-lg, 0 20px 40px -8px rgba(10, 15, 28, .14));
padding: 8px;
margin-bottom: 28px;
text-align: left;
}
/* ── Liste de lignes de commande — pattern standard e-commerce (image | nom + quantité |
prix), une seule mise en page qui reste lisible à toutes les tailles d'écran, sans bascule
table→grille spécifique au mobile. ───────────────────────────────────────────────────── */
.pod-order-list {
list-style: none;
margin: 0;
padding: 0;
}
.pod-order-list__item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
border-bottom: 1px solid var(--px-ink-100);
}
.pod-order-list__item:last-child {
border-bottom: none;
}
.pod-order-list__media {
flex: 0 0 auto;
width: 64px;
}
.pod-order-list__media img,
.pod-order-list__media-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 80px;
object-fit: cover;
border-radius: 8px;
background: var(--px-ink-50);
color: var(--px-ink-300);
font-size: var(--px-text-lg, 1.125rem);
}
.pod-order-list__info {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.pod-order-list__name {
font-weight: 600;
font-size: var(--px-text-sm);
color: var(--px-ink-900);
/* Préfère le retour à la ligne à la troncature — un nom de produit coupé est plus
trompeur qu'un libellé sur 2 lignes. */
overflow-wrap: break-word;
}
.pod-order-list__qty {
font-size: var(--px-text-xs);
color: var(--px-ink-500);
}
.pod-order-list__price {
flex: 0 0 auto;
font-weight: 700;
font-size: var(--px-text-sm);
color: var(--px-ink-900);
white-space: nowrap;
text-align: right;
}
.pod-order-totals {
padding: 14px;
border-top: 2px solid var(--px-ink-100);
}
.pod-order-totals__row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 6px 0;
font-size: var(--px-text-sm);
color: var(--px-ink-500);
}
.pod-order-totals__row--total {
font-weight: 700;
font-size: var(--px-text-base);
color: var(--px-ink-900);
}
.pod-order-totals__delivery-estimate {
display: block;
font-size: var(--px-text-xs, 0.75rem);
color: var(--px-ink-400);
margin-top: 2px;
}
.pod-checkout-summary-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.pod-checkout-summary-actions__form {
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 30px;
}
.pod-checkout-cgv {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
margin-bottom: 7px;
}
.pod-checkout-cgv__input {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--tenant-accent, var(--px-primary-500));
cursor: pointer;
}
.pod-checkout-cgv__text {
/* font-size: var(--px-text-sm); */
font-weight: 600;
color: var(--px-ink-700);
line-height: 1.5;
}
.pod-checkout-cgv__link {
color: var(--tenant-accent, var(--px-primary-500));
text-decoration: underline;
}
.pod-checkout-summary-actions .pod-submit-btn {
width: 100%;
}
@media (max-width: 640px) {
.pod-checkout-summary-page__title {
font-size: var(--px-text-xl);
}
.pod-checkout-summary-card {
border-radius: 12px;
}
.pod-order-list__item {
padding: 12px;
gap: 10px;
}
.pod-order-list__media,
.pod-order-list__media img,
.pod-order-list__media-placeholder {
width: 52px;
height: 65px;
}
.pod-order-totals {
padding: 12px;
}
}
/* ── Preset grid — cartes façon boutique, 3 par ligne, vignettes 3:4 ────── */
.pod-preset-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 28px;
}
@media (max-width: 1100px) {
.pod-preset-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.pod-preset-grid {
gap: 10px;
}
}
.pod-preset-card {
background: var(--px-white);
cursor: pointer;
border: 1px solid var(--px-ink-100);
border-radius: var(--px-radius-lg, 16px);
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
text-align: left;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
animation: pod-card-in 0.5s cubic-bezier(.2, .8, .2, 1) both;
}
.pod-preset-card:hover {
box-shadow: var(--px-shadow-md);
transform: translateY(-2px);
}
.pod-preset-card--selected {
border-color: var(--tenant-accent, var(--px-primary-500));
background-color: var(--tenant-accent, var(--px-primary-500));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 16%, transparent);
border-width: 5px;
}
.pod-preset-card--selected .pod-preset-card__name {
background-color: var(--tenant-accent, var(--px-primary-500));
color: white;
/* padding-bottom: 6px; */
padding-top: 18px;
}
.pod-preset-card--selected .pod-preset-card__name::before {
content: "✓";
margin-right: 5px;
font-weight: bold;
}
@media (prefers-reduced-motion: reduce) {
.pod-preset-card {
animation: none;
}
}
.pod-preset-card__media {
position: relative;
display: block;
background: var(--px-ink-50);
overflow: hidden;
}
.pod-preset-card__thumb {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.pod-preset-card:hover .pod-preset-card__thumb {
transform: scale(1.05);
}
.pod-preset-card__thumb--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: var(--px-ink-50);
color: var(--px-ink-300);
font-size: var(--px-text-2xl);
}
.pod-preset-card__check {
position: absolute;
top: 10px;
right: 10px;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--tenant-accent, var(--px-primary-500));
color: var(--tenant-accent-fg, #fff);
font-size: var(--px-text-base);
opacity: 0;
transform: scale(0.6);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.pod-preset-card--selected .pod-preset-card__check {
opacity: 1;
transform: scale(1);
}
.pod-preset-card__name {
padding: 10px 12px 12px;
font-size: var(--px-text-sm);
font-weight: 600;
color: var(--px-ink-900);
}
/* ── Submit — barre fixe en bas de viewport (self-contained, pas le .btn-primary SaaS) ─── */
.pod-home {
padding-bottom: 90px;
}
/* laisse la place à la barre fixe, sinon elle cache la fin de la grille */
.pod-submit-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 150;
display: flex;
justify-content: center;
gap: 12px;
padding: 14px 20px;
background: var(--px-white);
border-top: 1px solid var(--px-ink-100);
box-shadow: 0 -8px 24px -4px rgba(10, 15, 28, .10);
}
.pod-submit-btn {
width: 100%;
max-width: 420px;
padding: 15px 28px;
border: none;
border-radius: var(--px-radius-lg, 12px);
background: var(--tenant-accent, var(--px-primary-500));
color: var(--tenant-accent-fg, #fff);
font-size: var(--px-text-base);
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.pod-submit-btn:hover:not(:disabled) {
opacity: 0.92;
transform: translateY(-1px);
}
.pod-submit-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* ── Attente — barre de progression + étapes factices (gen_progress_controller) ───────── */
.pod-progress {
width: 100%;
max-width: 360px;
margin: 0 auto;
}
.pod-progress__bar-track {
height: 8px;
border-radius: 999px;
background: var(--px-ink-100);
overflow: hidden;
}
.pod-progress__bar-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: var(--tenant-accent, var(--px-primary-500));
}
.pod-progress__meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
font-size: var(--px-text-sm);
}
.pod-progress__label {
color: var(--px-ink-500);
}
.pod-progress__pct {
font-weight: 700;
color: var(--px-ink-900);
font-variant-numeric: tabular-nums;
}
.pod-progress__steps {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
margin: 28px 0 0;
padding: 0;
text-align: left;
}
.pod-progress__step {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--px-text-sm);
color: var(--px-ink-300);
transition: color 0.2s ease;
}
.pod-progress__step-icon {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--px-ink-200);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, border-color 0.2s ease;
}
.pod-progress__step-icon-dot,
.pod-progress__step-icon-check {
display: none;
}
.pod-progress__step--active {
color: var(--px-ink-900);
font-weight: 600;
}
.pod-progress__step--active .pod-progress__step-icon {
border-color: var(--tenant-accent, var(--px-primary-500));
}
.pod-progress__step--active .pod-progress__step-icon-dot {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--tenant-accent, var(--px-primary-500));
animation: pod-shop-pulse 1.4s ease-out infinite;
}
.pod-progress__step--done {
color: var(--px-ink-500);
}
.pod-progress__step--done .pod-progress__step-icon {
background: var(--tenant-accent, var(--px-primary-500));
border-color: var(--tenant-accent, var(--px-primary-500));
}
.pod-progress__step--done .pod-progress__step-icon-check {
display: block;
font-size: 10px;
color: var(--tenant-accent-fg, #fff);
}
@media (prefers-reduced-motion: reduce) {
.pod-progress__step--active .pod-progress__step-icon-dot {
animation: none;
}
}
/* ── Reveal ──────────────────────────────────────────────────────── */
.pod-reveal {
text-align: center;
}
.pod-reveal__photo-wrap {
position: relative;
border-radius: var(--px-radius-lg, 16px);
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 8px 24px rgba(10, 15, 28, 0.12);
}
.pod-reveal__photo {
width: 100%;
display: block;
}
/* ── Reveal invité — photo mise en valeur (même cadre que le shop loggué) à gauche, grille
produits à droite, CTA "Acheter" par carte → inscription (remplace l'ancien aperçu flouté
2 colonnes ET le bloc d'inscription générique — voir commentaire dans show.html.erb). ──── */
.pod-reveal__guest-shop {
display: grid;
/* Colonne droite dimensionnée pile à 2 cards + 1 gap, PAS à 1fr (qui laisserait du vide à
droite). Dérivation : card_shop = (W - photo_max - gap_outer - 2*gap_inner) / 3 pour le
shop loggué à 3 cards/ligne (photo_max=440, gap_outer=48, gap_inner=16 — voir .pod-shop /
.pod-shop__grid). Colonne droite ici = 2*card_shop + gap_inner, exprimée en % de W :
(2W - 992) / 3. La colonne gauche prend le reste en 1fr, donc plus large que dans le shop
loggué — la photo profite de la place libérée par les 4 produits en 2x2 au lieu de 3+1. */
grid-template-columns: 1fr calc((200% - 992px) / 3);
gap: 56px;
/* stretch (défaut grid) : les 2 colonnes prennent la même hauteur — celle de la grille de
cards à droite, la plus haute des deux — pour que photo et cards finissent alignées en
bas, pas juste calées en haut. */
align-items: stretch;
text-align: left;
}
/* Entre 1080 et 1295px, la formule 200% laisse encore un peu de vide entre les deux colonnes —
on donne un peu plus à la colonne droite (250% au lieu de 200%) pour combler. Les cards ne
s'agrandissent pas pour autant : .pod-shop__grid passe en largeur fixe + centrage dans ce
même intervalle (voir plus bas). */
@media (max-width: 1295px) {
.pod-reveal__guest-shop {
grid-template-columns: 1fr calc((250% - 992px) / 3);
}
}
/* En dessous de 1080px, la colonne gauche (1fr) devient large par rapport à la photo, plafonnée
à 420px — l'espace entre les deux colonnes se creuse pour rien. On empile plus tôt : la photo
profite de toute la largeur pour respirer (toujours plafonnée, donc pas agrandie), et la
grille de produits redescend dessous avec sa propre largeur pleine à disposition. */
@media (max-width: 1080px) {
.pod-reveal__guest-shop {
grid-template-columns: 1fr;
gap: 40px;
}
}
.pod-reveal__hero {
animation: pod-card-in 0.5s cubic-bezier(.2, .8, .2, 1) both;
text-align: center;
}
.pod-reveal__hero-caption {
margin: 0 auto 24px;
max-width: 460px;
}
/* Sticky sur la photo elle-même (pas sur toute la colonne) : le texte défile normalement,
la photo reste visible pendant qu'on scrolle les cards — la colonne étirée par
align-items:stretch (voir .pod-reveal__guest-shop) donne la hauteur nécessaire pour que
ça ait de la place où "coller". Départ juste sous la légende, donc au même niveau que le
haut de la grille de cards à droite ("Sur quel support ?"). Photo volontairement plus
petite que la colonne (qui reste large pour équilibrer la grille 2x2) — cadrée, pas étirée. */
.pod-reveal__hero .pod-shop__photo-wrap {
position: sticky;
top: 85px;
width: 100%;
max-width: 420px;
margin: 0 auto;
}
@media (max-width: 1080px) {
.pod-reveal__hero .pod-shop__photo-wrap {
position: static;
}
}
/* .pod-shop__grid par défaut est repeat(3, 1fr) (shop loggué) — ici la colonne droite est
déjà dimensionnée exactement pour 2 cards (voir .pod-reveal__guest-shop plus haut), donc
2 colonnes, pas 3. */
.pod-reveal__guest-shop .pod-shop__grid {
grid-template-columns: repeat(2, 1fr);
}
/* En dessous de 1295px (colonne droite élargie à 250%, puis empilement sous 1080px — voir
.pod-reveal__guest-shop), la grille récupère plus de largeur que nécessaire pour 2 cards —
largeur fixe par card (≈ la taille du shop loggué) au lieu de colonnes 1fr, sinon les cards
s'étirent au-delà de la résolution du mockup source (pixelisation visible).
justify-content:center recentre la grille dans l'espace disponible plutôt que d'agrandir
les cards pour le remplir. */
@media (max-width: 1295px) {
.pod-reveal__guest-shop .pod-shop__grid {
grid-template-columns: repeat(2, minmax(0, 260px));
justify-content: center;
}
}
@media (max-width: 640px) {
.pod-reveal__guest-shop .pod-shop__grid {
grid-template-columns: minmax(0, 260px);
}
}
.pod-reveal__hero-title {
font-family: var(--px-font-display);
font-size: var(--px-text-3xl);
font-weight: 700;
line-height: 1.15;
margin: 12px 0 10px;
color: var(--px-ink-900);
}
.pod-reveal__hero-sub {
color: var(--px-ink-500);
font-size: var(--px-text-base);
margin: 0;
}
.pod-reveal__rail-title {
font-family: var(--px-font-display);
font-size: var(--px-text-2xl);
font-weight: 700;
margin: 0 0 20px;
color: var(--px-ink-900);
animation: pod-card-in 0.5s cubic-bezier(.2, .8, .2, 1) both;
}
/* La grille de cards se recentre déjà en dessous de 640px (voir .pod-shop__grid plus haut) —
le titre au-dessus doit suivre, sinon il reste planté à gauche au-dessus d'une grille centrée. */
@media (max-width: 640px) {
.pod-reveal__rail-title {
text-align: center;
}
}
.pod-reveal__buy-btn {
display: block;
text-align: center;
text-decoration: none;
}
.pod-reveal__signin-hint {
margin-top: 28px;
font-size: var(--px-text-sm);
color: var(--px-ink-500);
text-align: center;
}
/* Reveal invité (.pod-plp__reveal-text, colonne de gauche) uniquement — les autres usages de
.pod-reveal__signin-hint (état "aucune variante" dans .pod-plp__reveal-visual, checkout, etc.)
restent centrés tels quels, marge inchangée. */
@media (min-width: 861px) {
.pod-plp__reveal-text .pod-reveal__signin-hint {
margin-top: 40px;
text-align: left;
}
}
.pod-reveal__signin-hint a {
color: var(--px-primary-500);
}
/* Lien-wrapper sans aucun style d'interaction (couleur, soulignement) — le contenu à
l'intérieur (icône + texte) doit rester visuellement identique au repos et au survol. */
.pod-reveal__plain-link,
.pod-reveal__plain-link:hover,
.pod-reveal__plain-link:focus,
.pod-reveal__plain-link:active {
color: inherit;
text-decoration: none;
}
/* ── Boutique — reveal loggué : aperçu watermarké | grille produits ──── */
.pod-shop {
display: grid;
grid-template-columns: minmax(320px, 440px) 1fr;
gap: 48px;
align-items: start;
text-align: left;
}
@media (max-width: 880px) {
.pod-shop {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* top : 57px de header sticky (.px-topnav, users loggués) + ~28px d'air — sinon la colonne
collante passe sous la navbar au scroll. */
.pod-shop__visual {
position: sticky;
top: 85px;
}
@media (max-width: 880px) {
.pod-shop__visual {
position: static;
}
}
/* Le mat blanc + ombre profonde évoque un tirage encadré — cohérent avec les produits vendus
(poster / toile / tableau) plutôt qu'une simple vignette d'app. */
.pod-shop__photo-wrap {
background: var(--px-white);
padding: 20px;
border-radius: 22px;
box-shadow: var(--px-shadow-lg, 0 20px 40px -8px rgba(10, 15, 28, .14));
}
.pod-shop__photo-inner {
position: relative;
border-radius: 10px;
overflow: hidden;
}
.pod-shop__photo {
width: 100%;
display: block;
}
.pod-shop__watermark {
position: absolute;
inset: -20%;
display: flex;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-around;
overflow: hidden;
pointer-events: none;
transform: rotate(-28deg);
}
.pod-shop__watermark span {
font-size: 1rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.55);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
white-space: nowrap;
letter-spacing: 0.05em;
margin: 16px 20px;
}
.pod-shop__another-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
font-size: var(--px-text-sm);
font-weight: 500;
color: var(--px-ink-500);
text-decoration: none;
}
.pod-shop__another-link:hover {
color: var(--tenant-accent, var(--px-primary-500));
}
/* ── Intro boutique — pleine largeur, au-dessus des 2 colonnes alignées ─── */
.pod-shop__intro {
margin-bottom: 36px;
}
/* ── Rail boutique ───────────────────────────────────────────────────── */
.pod-shop__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--px-text-sm);
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--px-primary-600);
margin-bottom: 10px;
}
.pod-shop__eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--tenant-accent, var(--px-primary-500));
animation: pod-shop-pulse 1.8s ease-out infinite;
}
@keyframes pod-shop-pulse {
0% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 45%, transparent);
}
70% {
box-shadow: 0 0 0 7px color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 0%, transparent);
}
100% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 0%, transparent);
}
}
.pod-shop__title {
font-family: var(--px-font-display);
font-size: var(--px-text-4xl);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.08;
margin: 0 0 8px;
color: var(--px-ink-900);
}
.pod-shop__sub {
color: var(--px-ink-500);
font-size: var(--px-text-base);
margin: 0;
max-width: 480px;
}
.pod-shop__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 28px;
}
@media (max-width: 944px) {
.pod-shop__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Une carte par ligne sous 640px — 2 colonnes y laissaient les selects taille/couleur, le
prix et le bouton beaucoup trop à l'étroit pour rester lisibles et tapables confortablement. */
@media (max-width: 640px) {
.pod-shop__grid {
grid-template-columns: 1fr;
gap: 14px;
}
}
/* Reveal de landing produit (un seul produit, pas un catalogue) — une carte centrée plutôt
qu'étirée sur les 3 colonnes du shop générique. */
.pod-shop__grid--single {
grid-template-columns: minmax(260px, 380px);
justify-content: center;
}
.pod-shop__card {
display: flex;
flex-direction: column;
background: var(--px-white);
border: 1px solid var(--px-ink-100);
border-radius: var(--px-radius-lg, 16px);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
animation: pod-card-in 0.5s cubic-bezier(.2, .8, .2, 1) both;
}
.pod-shop__card:hover {
box-shadow: var(--px-shadow-md);
/* transform: translateY(-2px); */
}
@keyframes pod-card-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.pod-shop__card {
animation: none;
}
.pod-shop__eyebrow-dot {
animation: none;
}
}
.pod-shop__card-media {
margin-top: -16px;
position: relative;
aspect-ratio: 4 / 5;
background: var(--px-ink-50);
overflow: hidden;
}
.pod-shop__card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.pod-shop__card:hover .pod-shop__card-media img {
/* transform: scale(1.05); */
}
.pod-shop__card-media--placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--px-ink-300);
font-size: var(--px-text-3xl);
}
.pod-shop__card-body {
display: flex;
flex-direction: column;
/* La grid (.pod-shop__grid) étire déjà .pod-shop__card à la hauteur de la ligne la plus
haute (stretch par défaut) — flex: 1 ici fait remplir ce surplus par card-body, sinon
"margin-top: auto" sur .pod-shop__actions n'a aucun espace où pousser et le bouton ne
s'aligne pas entre cartes de hauteurs de contenu différentes. */
flex: 1;
gap: 4px;
padding: 14px 16px 16px;
border-top: 1px solid #eee;
}
/* Zone titre+sous-titre à hauteur fixe — sinon un titre sur 2 lignes ou l'absence de
sous-titre décale le prix (et tout ce qui suit) d'une carte à l'autre dans la même ligne. */
.pod-shop__card-title-zone {
min-height: 38px;
margin-bottom: 2px;
}
.pod-shop__card-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 800;
font-size: 15px;
line-height: 1.25;
color: var(--px-ink-900);
}
.pod-shop__card-subtitle {
display: block;
font-size: var(--px-text-xs, 0.75rem);
color: var(--px-ink-500, var(--px-ink-400));
margin-top: 2px;
}
/* Juste après le nom — hiérarchie standard e-commerce (nom → prix → options → ajout) */
.pod-shop__card-price-zone {
display: flex;
align-items: center;
/* gap: 2px; */
flex-wrap: wrap;
justify-content: space-between;
}
.pod-shop__card-price {
font-size: var(--px-text-lg);
font-weight: 700;
color: var(--tenant-accent, var(--px-primary-600, var(--px-primary-500)));
font-family: var(--px-font-display);
}
.pod-shop__card-size-detail {
font-size: var(--px-text-xs, 0.75rem);
color: black;
font-weight: 800;
white-space: nowrap;
}
/* ── Sélecteur de variante (taille/modèle) — visible seulement si >1 variante, tout en
boutons (pas de select/dropdown — voir échange du 2026-06-25) ────────────────────────── */
.pod-shop__variant-picker {
margin: 2px 0 8px;
}
.pod-shop__variant-select {
width: 100%;
padding: 8px 12px;
border: 1.5px solid var(--px-ink-200, #e2e8f0);
border-radius: 8px;
background: #fff;
font-size: 0.9rem;
color: var(--px-ink-800, #1a202c);
cursor: pointer;
margin: 2px 0 8px;
appearance: auto;
}
.pod-shop__variant-select:focus {
outline: none;
border-color: var(--tenant-accent, var(--px-primary-500));
}
.pod-shop__variant-picker--dual {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.pod-shop__axis-field {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.pod-shop__axis-label {
font-size: var(--px-text-xs, 0.75rem);
color: var(--px-ink-500);
white-space: nowrap;
}
/* Taille/modèle — pills texte */
.pod-shop__size-buttons {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.pod-shop__size-btn {
padding: 6px 12px;
border: 1px solid var(--px-ink-200);
border-radius: 999px;
background: var(--px-white);
color: var(--px-ink-700);
font-size: var(--px-text-xs, 0.75rem);
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pod-shop__size-btn:hover {
border-color: var(--tenant-accent, var(--px-primary-500));
}
.pod-shop__size-btn--selected {
/* border-width: 3px; */
border-color: var(--tenant-accent, var(--px-primary-500));
box-shadow: 0 0 0 2px var(--tenant-accent, var(--px-primary-500)) inset;
color: var(--tenant-accent, var(--px-primary-500));
font-weight: 800;
/* background: var(--tenant-accent, var(--px-primary-500));
color: var(--tenant-accent-fg, #fff); */
}
.pod-shop__size-btn--selected::before {
content: "✓";
}
.pod-shop__size-btn:disabled {
color: var(--px-ink-200);
border-color: var(--px-ink-100);
cursor: not-allowed;
}
/* Couleur — swatches ronds */
.pod-shop__color-buttons {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.pod-shop__color-btn {
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--px-ink-200);
cursor: pointer;
padding: 0;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pod-shop__color-btn:hover {
border-color: var(--tenant-accent, var(--px-primary-500));
}
.pod-shop__color-btn--selected {
border-color: var(--tenant-accent, var(--px-primary-500));
box-shadow: 0 0 0 2px var(--px-white), 0 0 0 3px var(--tenant-accent, var(--px-primary-500));
}
.pod-shop__color-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.pod-shop__actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
}
.pod-shop__stepper {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
border: 1px solid var(--px-ink-200);
border-radius: 999px;
padding: 4px;
font-size: 12px;
}
.pod-shop__stepper-btn {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 50%;
border: none;
background: transparent;
color: var(--px-ink-700);
font-size: var(--px-text-lg);
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.pod-shop__stepper-btn:hover {
background: var(--tenant-accent, var(--px-primary-500));
color: var(--tenant-accent-fg, #fff);
}
.pod-shop__stepper-value {
flex: 1;
text-align: center;
font-weight: 600;
}
.pod-shop__add-btn {
flex: 1;
padding: 7px;
font-size: .9rem;
font-weight: 600;
border: 1.5px solid var(--tenant-accent, var(--px-primary-500));
border-radius: 999px;
background: var(--tenant-accent, var(--px-primary-500));
color: white;
font-size: var(--px-text-sm);
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.pod-shop__add-btn:hover {
background: color-mix(in srgb, var(--tenant-accent, var(--accent)) 75%, #000);
}
a.pod-shop__add-btn:hover {
color: white;
}
/* ── Notice flottante "Article ajouté au panier" ───────────────────────────────────────── */
.pod-toast {
position: fixed;
top: 85px;
left: 50%;
transform: translateX(-50%) translateY(-12px);
z-index: 160;
background: var(--px-ink-900);
color: var(--px-white);
font-size: var(--px-text-sm);
font-weight: 600;
padding: 12px 20px;
border-radius: 999px;
box-shadow: var(--px-shadow-lg, 0 12px 28px -6px rgba(10, 15, 28, .25));
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.pod-toast--visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.pod-toast--error {
background: var(--px-danger, #c0392b);
}
@media (max-width: 480px) {
.pod-toast {
left: 16px;
right: 16px;
transform: translateY(-12px);
text-align: center;
}
.pod-toast--visible {
transform: translateY(0);
}
}
/* ── Récapitulatif / commande — barre fixe en bas de viewport ──────────────────────────── */
.pod-shop__rail {
padding-bottom: 100px;
}
/* laisse la place à la barre fixe sous la grille */
.pod-shop__summary {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 150;
background: var(--px-white);
border-top: 1px solid var(--px-ink-100);
box-shadow: 0 -8px 24px -4px rgba(10, 15, 28, .10);
padding: 14px 20px;
}
/* Total à gauche, bouton à droite (taille naturelle) — pas un bloc empilé pleine largeur,
sinon le bouton s'étire sur toute la largeur de page et écrase visuellement la barre. */
.pod-shop__summary-inner {
max-width: 1320px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 24px;
}
.pod-shop__total {
font-size: var(--px-text-base);
color: var(--px-ink-700);
}
.pod-shop__total span:first-child {
font-weight: 700;
font-size: var(--px-text-xl);
color: var(--px-ink-900);
margin-right: 4px;
}
.pod-shop__submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 200px;
padding: 12px 28px;
border: none;
border-radius: var(--px-radius-lg, 12px);
background: var(--tenant-accent, var(--px-primary-500));
color: var(--tenant-accent-fg, #fff);
font-size: var(--px-text-base);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.pod-shop__submit-btn:hover:not(:disabled) {
opacity: 0.92;
transform: translateY(-1px);
color: white;
}
.pod-shop__submit-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
@media (max-width: 480px) {
.pod-shop__submit-btn {
width: 100%;
}
}
.pod-shop__note {
width: 100%;
margin: 0;
font-size: var(--px-text-xs, 0.75rem);
color: var(--px-ink-500);
text-align: center;
}
@media (max-width: 640px) {
.pod-shop__title {
font-size: var(--px-text-3xl);
}
.pod-shop__sub {
font-size: var(--px-text-sm);
}
.pod-shop__note {
font-size: 11px;
}
/* Carte produit pleine largeur (1 colonne, voir .pod-shop__grid) — assez de place pour que
les boutons taille/couleur, le prix et le bouton restent confortables, au lieu d'être
écrasés dans une grille à 2 colonnes. */
.pod-shop__card-name {
font-size: var(--px-text-base);
}
.pod-shop__card-price {
font-size: var(--px-text-xl);
}
.pod-shop__variant-picker--dual {
gap: 10px;
}
.pod-shop__axis-label {
font-size: var(--px-text-sm);
}
.pod-shop__size-btn {
font-size: var(--px-text-sm);
min-height: 44px;
padding: 8px 14px;
}
.pod-shop__color-btn {
width: 36px;
height: 36px;
}
/* Stepper + bouton empilés, cibles tactiles ≥44px et espacement ≥8px entre elles. */
.pod-shop__actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.pod-shop__stepper {
align-self: flex-start;
padding: 6px;
}
.pod-shop__stepper-btn {
width: 40px;
height: 40px;
}
.pod-shop__add-btn {
width: 100%;
min-height: 44px;
}
.pod-shop__total {
font-size: var(--px-text-sm);
}
.pod-shop__total span:first-child {
font-size: var(--px-text-lg);
}
}
/* ── Page "Mon panier" ──────────────────────────────────────────────────────────────── */
.pod-cart__empty {
text-align: center;
padding: 48px 0;
color: var(--px-ink-500);
}
.pod-cart__empty p {
margin-bottom: 16px;
}
.pod-cart__list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 28px;
}
.pod-cart__row {
display: grid;
grid-template-columns: 72px 1fr auto auto auto;
align-items: center;
gap: 16px;
background: var(--px-white);
border: 1px solid var(--px-ink-100);
border-radius: var(--px-radius-lg, 14px);
padding: 12px 16px;
}
/* .pod-main a maintenant sa padding horizontale inconditionnelle (voir plus haut) — ne reste ici
que pour .px-topnav/.page-wrap, qui n'en ont pas de base. */
@media (max-width: 1200px) {
.px-topnav,
.page-wrap {
padding-left: 24px;
padding-right: 24px;
}
}
@media (max-width: 640px) {
.gallery-header__actions {
justify-content: center;
}
.pod-cart__row {
grid-template-columns: 56px 1fr auto;
grid-template-areas: "media body remove" "media qty subtotal";
row-gap: 8px;
}
.pod-cart__row-media {
grid-area: media;
}
.pod-cart__row-body {
grid-area: body;
}
.pod-cart__row-qty {
grid-area: qty;
}
.pod-cart__row-subtotal {
grid-area: subtotal;
justify-self: end;
}
.pod-cart__row-remove {
grid-area: remove;
}
}
.pod-cart__row-media {
width: 72px;
height: 72px;
border-radius: 10px;
overflow: hidden;
background: var(--px-ink-50);
flex-shrink: 0;
}
.pod-cart__row-media img,
.pod-cart__row-media .pod-shop__card-media--placeholder {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pod-cart__row-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.pod-cart__row-name {
font-weight: 600;
font-size: var(--px-text-sm);
color: var(--px-ink-900);
}
.pod-cart__row--oos {
opacity: 0.45;
grid-template-columns: 72px 1fr auto;
}
.pod-cart__row-oos-msg {
font-size: var(--px-text-xs, 0.75rem);
color: var(--px-ink-500);
font-style: italic;
}
.pod-cart__row-unit-price {
font-size: var(--px-text-xs, 0.75rem);
color: var(--px-ink-500);
}
.pod-cart__row-qty {
display: flex;
align-items: center;
gap: 4px;
border: 1px solid var(--px-ink-200);
border-radius: 999px;
padding: 4px;
}
.pod-cart__row-qty .pod-shop__stepper-value {
min-width: 20px;
text-align: center;
font-weight: 600;
font-size: var(--px-text-sm);
}
.pod-cart__row-subtotal {
font-weight: 700;
font-size: var(--px-text-base);
color: var(--px-ink-900);
white-space: nowrap;
}
.pod-cart__row-remove {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--px-ink-400);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.pod-cart__row-remove:hover {
background: var(--px-danger, #fee);
color: white;
}
.pod-cart__summary {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 16px 24px;
background: var(--px-ink-50);
border-radius: var(--px-radius-lg, 16px);
padding: 20px 24px;
}
.pod-cart__total {
font-size: var(--px-text-lg);
font-weight: 700;
margin-right: auto;
}
.pod-cart__total span:first-child {
font-weight: 500;
font-size: var(--px-text-sm);
color: var(--px-ink-500);
margin-right: 8px;
}
/* ── Landing page ─────────────────────────────────────────────────────────── */
.pod-body {
scroll-behavior: smooth;
}
/* ── Hero split ── */
.pod-landing__hero {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 48px;
padding: 64px 0 56px;
}
.pod-landing__hero-original {
display: block;
flex-shrink: 0;
}
@media (max-width: 1198px) and (min-width: 861px) {
.pod-landing__hero-original {
display: none;
}
.pod-landing__hero {
grid-template-columns: 1fr auto;
}
}
.pod-landing__hero-original-img {
display: block;
width: 315px;
height: auto;
border-radius: 16px;
}
@media (max-width: 860px) {
.pod-landing__hero {
grid-template-columns: 1fr;
text-align: center;
padding: 40px 0 32px;
gap: 32px;
}
.pod-landing__hero-original-img {
width: 255px;
margin: 0 auto;
}
.pod-landing__hero-visual {
width: 100%;
max-width: 340px;
margin: 0 auto;
}
.pod-landing__cta-hint {
text-align: center;
}
}
.pod-landing__eyebrow {
display: inline-block;
font-size: var(--px-text-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tenant-accent, var(--px-primary-500));
background: color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 25%, transparent);
border-radius: 999px;
padding: 4px 12px;
margin-bottom: 24px;
}
.pod-landing__eyebrow.pod-landing__eyebrow-reveal {
display: inline-flex;
width: auto;
border: 0;
margin-bottom: 15px;
}
.pod-plp__reveal .bg-light {
background-color: #f5ece6 !important;
/* background-color: var(--px-ink-50) !important; */
}
/* Icônes reveal invité — masque CSS plutôt que ![]()
: la couleur suit
`color` (currentColor) au lieu d'être figée dans le fichier SVG, comme
pour .icon--mingcute (voir mingcute.css). */
.icon--pod {
display: inline-block;
flex-shrink: 0;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon--pod-rounded-white-bg {
background-color: white;
color: var(--accent);
width: 65px;
height: 65px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.icon--pod--delivery {
--svg: url("data:image/svg+xml,%3Csvg fill=%22none%22 height=%2224%22 viewBox=%220 0 24 24%22 width=%2224%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22rgb(0,0,0)%22%3E%3Cpath clip-rule=%22evenodd%22 d=%22m1 5.25c-.414214 0-.75.33579-.75.75s.335786.75.75.75h13.25v9.5h-3.6035c-.3265-1.1543-1.38772-2-2.6465-2s-2.32002.8457-2.64648 2h-1.60352v-4.75c0-.4142-.33579-.75-.75-.75s-.75.3358-.75.75v5.5c0 .4142.33579.75.75.75h2.35352c.32646 1.1543 1.3877 2 2.64648 2s2.32-.8457 2.6465-2h4.707c.3265 1.1543 1.3877 2 2.6465 2s2.32-.8457 2.6465-2h2.3535c.4142 0 .75-.3358.75-.75v-3.5c0-.1049-.022-.2087-.0646-.3046l-2-4.5c-.1204-.27085-.389-.4454-.6854-.4454h-5.25v-2.25c0-.41421-.3358-.75-.75-.75zm15.75 11.7514c.0007.6897.5601 1.2486 1.25 1.2486.6904 0 1.25-.5596 1.25-1.25s-.5596-1.25-1.25-1.25-1.25.5596-1.25 1.25zm-1-1.5829v-5.6685h4.7626l1.7374 3.9092v2.5908h-1.6035c-.3265-1.1543-1.3877-2-2.6465-2-.9301 0-1.7523.4617-2.25 1.1685zm-7.75.3315c-.69036 0-1.25.5596-1.25 1.25s.55964 1.25 1.25 1.25 1.25-.5596 1.25-1.25-.55964-1.25-1.25-1.25z%22 fill-rule=%22evenodd%22/%3E%3Cpath d=%22m2 8.25c-.41421 0-.75.33579-.75.75s.33579.75.75.75h4c.41421 0 .75-.33579.75-.75s-.33579-.75-.75-.75z%22/%3E%3C/g%3E%3C/svg%3E");
}
.icon--pod--click {
--svg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512.147 512.147%22%3E%3Cg%3E%3Cpath style=%22fill:none%3Bstroke:%23000%3Bstroke-width:40%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:10%3B%22 d=%22M108.576,346.929L60,395.505c-15.621,15.621-15.621,40.948,0,56.569c15.621,15.621,40.948,15.621,56.569,0l48.576-48.576l27.834,64.45c1.946,4.507,4.76,8.728,8.443,12.41c15.621,15.621,40.948,15.621,56.569,0c5.313-5.313,8.819-11.749,10.518-18.545l56.569-226.274c3.296-13.183-0.21-27.716-10.518-38.024c-10.308-10.308-24.841-13.814-38.024-10.518L50.26,243.566c-6.795,1.699-13.231,5.205-18.545,10.518c-15.621,15.621-15.621,40.948,0,56.569c3.682,3.682,7.904,6.496,12.41,8.443L108.576,346.929z%22/%3E%3Cline style=%22fill:none%3Bstroke:%23000%3Bstroke-width:40%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:10%3B%22 x1=%22412.147%22 y1=%22209.579%22 x2=%22492.147%22 y2=%22209.579%22/%3E%3Cline style=%22fill:none%3Bstroke:%23000%3Bstroke-width:40%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:10%3B%22 x1=%22377%22 y1=%22294.431%22 x2=%22433.569%22 y2=%22351%22/%3E%3Cline style=%22fill:none%3Bstroke:%23000%3Bstroke-width:40%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:10%3B%22 x1=%22159.897%22 y1=%2278.652%22 x2=%22216.466%22 y2=%22135.221%22/%3E%3Cline style=%22fill:none%3Bstroke:%23000%3Bstroke-width:40%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:10%3B%22 x1=%22301.318%22 y1=%2220.074%22 x2=%22301.318%22 y2=%22100.074%22/%3E%3Cline style=%22fill:none%3Bstroke:%23000%3Bstroke-width:40%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:10%3B%22 x1=%22442.74%22 y1=%2278.652%22 x2=%22386.171%22 y2=%22135.221%22/%3E%3C/g%3E%3C/svg%3E");
}
.icon--pod--user-plus {
--svg: url("data:image/svg+xml,%3Csvg fill=%22none%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath clip-rule=%22evenodd%22 d=%22m9 5c-1.65685 0-3 1.34315-3 3s1.34315 3 3 3c1.6569 0 3-1.34315 3-3s-1.3431-3-3-3zm-5 3c0-2.76142 2.23858-5 5-5 2.7614 0 5 2.23858 5 5 0 2.7614-2.2386 5-5 5-2.76142 0-5-2.2386-5-5zm15 1c.5523 0 1 .44772 1 1v2h2c.5523 0 1 .4477 1 1s-.4477 1-1 1h-2v2c0 .5523-.4477 1-1 1s-1-.4477-1-1v-2h-2c-.5523 0-1-.4477-1-1s.4477-1 1-1h2v-2c0-.55228.4477-1 1-1zm-14.79734 6.3395c1.27156-.8477 2.9706-1.3395 4.79734-1.3395 1.8267 0 3.5258.4918 4.7973 1.3395 1.2646.8431 2.2027 2.1175 2.2027 3.6605 0 .5523-.4477 1-1 1s-1-.4477-1-1c0-.6662-.4051-1.3917-1.3121-1.9964-.9-.6-2.2009-1.0036-3.6879-1.0036-1.48697 0-2.78793.4036-3.68794 1.0036-.907.6047-1.31206 1.3302-1.31206 1.9964 0 .5523-.44772 1-1 1s-1-.4477-1-1c0-1.543.93809-2.8174 2.20266-3.6605z%22 fill=%22rgb(0,0,0)%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E");
}
.icon--pod--paw {
--svg: url("data:image/svg+xml,%3Csvg version=%221.1%22 id=%22Capa_1%22 xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 x=%220px%22 y=%220px%22 viewBox=%220 0 512 512%22 style=%22enable-background:new 0 0 512 512%3B%22 xml:space=%22preserve%22%3E%3Cg%3E%3Cg%3E%3Cpath d=%22M378.608,290.994C344.16,249.402,300.618,226.496,256,226.496s-88.161,22.906-122.607,64.498 c-30.963,37.385-49.448,84.501-49.448,126.035c0,20.176,6.168,35.544,18.332,45.679c12.006,10.004,27.857,13.388,45.541,13.387 c18.817,0,39.711-3.832,60.24-7.598c17.939-3.291,34.883-6.399,47.943-6.399c11.272,0,27.165,2.95,43.988,6.073 c39.317,7.3,83.881,15.572,109.624-5.832c12.238-10.175,18.443-25.42,18.443-45.31 C428.057,375.495,409.572,328.379,378.608,290.994z%22/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d=%22M382.13,65.146c-12.604-18.583-30.652-29.24-49.517-29.24c-18.866,0-36.913,10.658-49.517,29.24 c-11.578,17.071-17.955,39.489-17.955,63.125c0,23.636,6.376,46.054,17.955,63.125c12.604,18.582,30.652,29.24,49.517,29.24 c18.866,0,36.913-10.658,49.517-29.24c11.578-17.071,17.955-39.489,17.955-63.125C400.085,104.635,393.709,82.216,382.13,65.146z%22 /%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d=%22M228.905,65.145c-12.604-18.583-30.651-29.24-49.517-29.24s-36.914,10.658-49.517,29.24 c-11.578,17.071-17.955,39.489-17.955,63.125s6.376,46.054,17.955,63.125c12.604,18.583,30.651,29.241,49.517,29.241 s36.913-10.658,49.517-29.241c11.578-17.071,17.955-39.488,17.955-63.125C246.859,104.634,240.483,82.215,228.905,65.145z%22/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d=%22M509.019,210.133c-5.081-17.284-15.972-29.843-30.665-35.362c-11.824-4.441-25.171-3.688-37.583,2.121 c-17.105,8.004-31.086,24.532-38.356,45.345c-5.941,17.008-6.682,34.985-2.085,50.622c5.081,17.284,15.972,29.843,30.666,35.362 c5.085,1.91,10.45,2.859,15.902,2.859c7.227,0,14.607-1.669,21.682-4.98c17.105-8.004,31.086-24.532,38.356-45.344v-0.001 C512.876,243.748,513.617,225.77,509.019,210.133z%22/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d=%22M109.587,222.235c-7.271-20.813-21.252-37.34-38.356-45.344c-12.413-5.809-25.761-6.561-37.584-2.121 c-14.694,5.52-25.585,18.079-30.666,35.362c-4.597,15.637-3.856,33.615,2.085,50.622v0.001 c7.272,20.813,21.252,37.34,38.356,45.344c7.076,3.311,14.455,4.98,21.682,4.98c5.452,0,10.818-0.95,15.902-2.859 c14.696-5.52,25.586-18.079,30.667-35.362C116.268,257.222,115.527,239.244,109.587,222.235z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.pod-landing__title {
font-family: var(--px-font-display);
font-size: clamp(2.1rem, 4.5vw, 3rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--px-ink-900);
margin: 0;
}
.pod-landing__title-em {
font-style: normal;
color: var(--tenant-accent, var(--px-primary-500));
}
.pod-plp__hero-price {
font-family: var(--px-font-display);
font-size: 30px;
font-weight: 700;
color: var(--tenant-accent, var(--px-primary-500));
margin: 0 0 5px;
}
.pod-landing__sub {
font-size: var(--px-text-lg);
color: var(--px-ink-500);
/* max-width: 420px; */
margin: 0 0 24px;
line-height: 1.6;
}
@media (max-width: 860px) {
.pod-landing__sub {
max-width: 100%;
}
}
.pod-landing__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 32px;
border-radius: 999px;
background: var(--tenant-accent, var(--px-primary-500));
color: var(--tenant-accent-fg, #fff);
font-size: var(--px-text-base);
font-weight: 700;
text-decoration: none;
transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 50%, transparent);
}
.pod-landing__cta:hover {
opacity: 0.92;
transform: translateY(-2px);
color: var(--tenant-accent-fg, #fff);
box-shadow: 0 10px 28px -4px color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 55%, transparent);
}
.pod-landing__cta--lg {
padding: 18px 40px;
font-size: var(--px-text-lg);
animation: pod-landing-cta-pulse 2.4s ease-in-out infinite;
}
.pod-landing__cta--lg:hover {
animation-play-state: paused;
}
@keyframes pod-landing-cta-pulse {
0%,
100% {
box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 50%, transparent);
}
50% {
box-shadow: 0 10px 34px -2px color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 80%, transparent);
}
}
.pod-landing__cta-hint {
margin: 14px 0 0;
font-size: var(--px-text-sm);
color: var(--px-ink-400);
}
/* Hero visual */
.pod-landing__hero-visual {
position: relative;
width: 400px;
aspect-ratio: 4 / 5;
}
/* Carousel slides */
.pod-landing__carousel-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.9s ease;
pointer-events: none;
}
.pod-landing__carousel-slide.is-active {
opacity: 1;
pointer-events: auto;
}
.pod-landing__hero-frame {
position: relative;
width: 100%;
height: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 64px -12px rgba(10, 15, 28, .22);
}
.pod-landing__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pod-landing__hero-tag {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(10, 15, 28, .65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
font-size: var(--px-text-sm);
font-weight: 600;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .15);
}
/* ── Trust bar ── */
.pod-landing__trustbar {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
margin: 0 0 72px;
padding: 22px 0;
border-top: 1px solid var(--px-ink-100);
border-bottom: 1px solid var(--px-ink-100);
}
.pod-landing__trust-item {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 6px 22px;
}
/* Séparateurs verticaux entre colonnes (desktop) — bordure sur les items 2 et 3 seulement. */
.pod-landing__trust-item+.pod-landing__trust-item {
border-left: 1px solid var(--px-ink-100);
}
.pod-landing__trust-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 13px;
background: color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 12%, transparent);
color: var(--tenant-accent, var(--px-primary-500));
}
.pod-landing__trust-text {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.pod-landing__trust-label {
font-size: var(--px-text-base);
font-weight: 700;
color: var(--px-ink-900);
}
.pod-landing__trust-label sup {
font-weight: 600;
color: var(--px-ink-400);
}
.pod-landing__trust-sub {
font-size: var(--px-text-sm);
color: var(--px-ink-500);
}
/* Mobile : empilé sur une colonne, contenu aligné à gauche, séparateurs horizontaux. */
@media (max-width: 720px) {
.pod-landing__trustbar {
grid-template-columns: 1fr;
padding: 6px 0;
}
.pod-landing__trust-item {
justify-content: center;
padding: 15px 10px;
}
.pod-landing__trust-item+.pod-landing__trust-item {
border-left: none;
border-top: 1px solid var(--px-ink-100);
}
}
/* ── Steps ── */
.pod-landing__steps {
margin-bottom: 64px;
}
.pod-landing__steps-header {
text-align: center;
margin-bottom: 36px;
}
.pod-landing__steps-title {
font-family: var(--px-font-display);
font-size: 40px;
font-weight: 700;
color: var(--px-ink-900);
margin: 0 0 8px;
}
.pod-landing__steps-grid {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: start;
gap: 0 16px;
background: var(--px-white, #fff);
border-radius: 20px;
padding: 40px 36px;
border: 1px solid var(--px-ink-100);
box-shadow: 0 2px 12px rgba(10, 15, 28, .05);
}
@media (max-width: 640px) {
.pod-landing__steps-grid {
grid-template-columns: 1fr;
padding: 28px 20px;
gap: 28px 0;
}
.pod-landing__step-arrow {
display: none;
}
}
.pod-landing__step {
text-align: center;
padding: 8px 12px;
}
.pod-landing__step-arrow {
color: var(--px-ink-200);
font-size: 1.5rem;
padding-top: 48px;
align-self: start;
}
.pod-landing__step-num {
font-size: var(--px-text-xs);
font-weight: 800;
letter-spacing: 0.1em;
color: var(--tenant-accent, var(--px-primary-500));
margin: 0 0 10px;
}
.pod-landing__step-icon {
font-size: 2.4rem;
line-height: 1;
margin-bottom: 14px;
}
.pod-landing__step-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 16px;
background: color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 10%, transparent);
color: var(--tenant-accent, var(--px-primary-500));
margin: 0 auto 14px;
}
.pod-landing__step-title {
font-weight: 700;
font-size: var(--px-text-base);
color: var(--px-ink-900);
margin: 0 0 6px;
}
.pod-landing__step-desc {
font-size: var(--px-text-sm);
color: var(--px-ink-500);
line-height: 1.5;
margin: 0;
}
/* ── Styles showcase ── */
.pod-landing__styles,
.pod-landing__steps,
.pod-landing__products {
margin: 120px 0 !important;
}
.pod-landing__styles-header {
text-align: center;
margin-bottom: 28px;
}
.pod-landing__styles-title {
font-family: var(--px-font-display);
font-size: 40px;
font-weight: 700;
color: var(--px-ink-900);
margin: 0 0 8px;
}
.pod-landing__styles-sub {
font-size: var(--px-text-sm);
color: var(--px-ink-500);
margin: 0;
}
.pod-landing__styles-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.pod-landing__styles-more {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 28px;
}
.pod-landing__styles-more-text {
color: var(--px-ink-500);
font-size: var(--px-text-sm);
margin: 0;
}
@media (max-width: 1100px) {
.pod-landing__styles-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 640px) {
.pod-landing__styles-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
}
.pod-landing__style-card {
display: block;
text-decoration: none;
border-radius: 16px;
overflow: hidden;
position: relative;
aspect-ratio: 3 / 4;
background: var(--px-ink-50);
border: 1px solid var(--px-ink-100);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.pod-landing__style-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(10, 15, 28, .14);
}
.pod-landing__style-media {
position: absolute;
inset: 0;
}
.pod-landing__style-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.pod-landing__style-card:hover .pod-landing__style-img {
transform: scale(1.06);
}
.pod-landing__style-name {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 12px 12px;
font-size: var(--px-text-sm);
font-weight: 600;
color: #fff;
background: linear-gradient(to top, rgba(10, 15, 28, .75) 0%, transparent 100%);
text-align: center;
}
/* ── Exemples produits ── */
.pod-landing__products {
margin-bottom: 64px;
}
.pod-landing__products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.pod-landing__product-card {
display: block;
border-radius: 16px;
overflow: hidden;
position: relative;
aspect-ratio: 4 / 5;
text-decoration: none;
background: var(--px-ink-50);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pod-landing__product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px -8px rgba(10, 15, 28, .18);
}
.pod-landing__product-media {
position: absolute;
inset: 0;
}
.pod-landing__product-card:hover .pod-landing__style-img {
transform: scale(1.04);
}
/* ── CTA final ── */
.pod-landing__final {
position: relative;
overflow: hidden;
text-align: center;
padding: 80px 24px;
/* Dégradé sur la couleur du tenant (plus premium/on-brand qu'un aplat sombre). Fallback aplat
accent si color-mix indisponible. */
background: var(--tenant-accent, var(--px-primary-500));
background: linear-gradient(135deg,
color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 92%, #000) 0%,
var(--tenant-accent, var(--px-primary-500)) 55%,
color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 80%, #fff) 100%);
border-radius: 28px;
margin-bottom: 64px;
}
/* Halo décoratif diffus en haut à droite — profondeur, sans image. */
.pod-landing__final::before {
content: "";
position: absolute;
top: -40%;
right: -10%;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 60%);
pointer-events: none;
}
.pod-landing__final-title {
position: relative;
font-family: var(--px-font-display);
font-size: clamp(1.7rem, 3.8vw, 2.6rem);
font-weight: 800;
color: var(--tenant-accent-fg, #fff);
margin: 0 0 12px;
letter-spacing: -0.02em;
}
.pod-landing__final-sub {
position: relative;
font-size: var(--px-text-lg);
color: color-mix(in srgb, var(--tenant-accent-fg, #fff) 82%, transparent);
margin: 0 0 32px;
}
.pod-landing__final .pod-landing__cta {
position: relative;
background: #fff;
color: var(--px-ink-900);
box-shadow: 0 10px 30px -6px rgba(10, 15, 28, .35);
animation: none;
}
.pod-landing__final .pod-landing__cta:hover {
background: #fff;
color: var(--px-ink-900);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 16px 40px -8px rgba(10, 15, 28, .4);
}
/* Ligne de réassurance sous le bouton. display:flex (bloc pleine largeur) + justify-content
center → toujours sur sa propre ligne SOUS le bouton (en inline-flex elle se plaçait à côté
du CTA, même contexte inline). */
.pod-landing__final-note {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 20px 0 0;
font-size: var(--px-text-sm);
font-weight: 600;
color: color-mix(in srgb, var(--tenant-accent-fg, #fff) 80%, transparent);
}
.pod-landing__final-note svg {
flex-shrink: 0;
}
.pod-landing__final .pod-landing__cta:hover {
color: var(--px-ink-900);
opacity: 0.95;
}
/* ── Landing produit dédiée (Pod::LandingsController — /p/:slug) ──────────
Namespace distinct de .pod-landing__* (home générique) pour la structure de hero, qui diffère
(pas de cutout "hero-original", carousel alimenté par LandingShowcase). Le reste (titre,
sous-titre, CTA, trustbar, steps, final) réutilise .pod-landing__* tel quel — voir
docs/landing_plan_implementation.md Étape 4. */
.pod-plp__hero {
/* margin-top: -48px; */
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
padding: 0 0 56px;
}
@media (max-width: 860px) {
.pod-plp__hero {
grid-template-columns: 1fr;
text-align: center;
padding: 4px 0 32px;
gap: 20px;
}
/* Image inline par défaut — centrer nécessite display:block + margin auto, le text-align du
parent ne suffit pas seul de façon fiable selon la largeur intrinsèque de l'image. */
.cp-secure-landing__payment-logos {
display: block;
margin: 0 auto;
}
}
.pod-plp__hero-secure {
margin-top: 50px;
/* max-width: 380px; */
}
@media (max-width: 860px) {
.pod-plp__hero-secure {
margin: 28px auto 0;
}
}
.pod-plp__reveal-secure {
margin-top: 20px;
max-width: 380px;
}
@media (max-width: 860px) {
.pod-plp__reveal-secure {
margin: 20px auto 0;
}
}
/* "Autres produits disponibles" — bandeau pleine largeur sous les 2 colonnes du reveal
(voir reveal.html.erb), pas cantonné à la colonne visuelle. Mockups composités avec le
design de l'invité — voir Pod::LandingsController#reveal. */
.pod-plp__other-products {
width: 100%;
margin-top: 0px;
}
.pod-plp__other-products-title {
font-size: 0.7rem !important;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--px-ink-400);
margin: 0 0 12px;
}
.pod-plp__other-products-grid {
display: flex;
gap: 16px;
}
.pod-plp__other-product-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
flex: 1 1 0;
min-width: 0;
text-align: left;
border: 1px solid var(--px-ink-100);
border-radius: 14px;
padding: 10px;
}
.pod-plp__other-product-media {
aspect-ratio: 4 / 5;
width: 100%;
max-width: 92px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
background: var(--px-ink-50);
display: flex;
align-items: center;
justify-content: center;
}
.pod-plp__other-product-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pod-plp__other-product-placeholder {
color: var(--px-ink-300);
font-size: 20px;
}
.pod-plp__other-product-details {
min-width: 0;
}
.pod-plp__other-product-name {
font-size: 12.5px;
font-weight: 600;
color: var(--px-ink-900);
margin: 0 0 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.pod-plp__other-product-price {
margin: 0;
color: var(--tenant-accent, var(--px-primary-500));
}
.pod-plp__other-product-price-label {
display: block;
font-size: .7rem;
font-weight: 500;
}
.pod-plp__other-product-price-value {
font-size: 1.2rem;
font-weight: 700;
font-family: var(--px-font-display);
}
@media (max-width: 860px) {
.pod-plp__other-products-grid {
flex-wrap: wrap;
}
.pod-plp__other-product-card {
flex-direction: column;
text-align: center;
flex: 1 1 calc(50% - 8px);
}
.pod-plp__other-product-media {
max-width: 130px;
}
}
/* Un seul palier desktop (≥861px, photo "avant" à gauche du mockup, rangée horizontale — voir
.pod-plp__carousel-slide) : plus de palier intermédiaire "empilé verticalement" entre 861 et
1439px. Largeur calée sur le contenu réel de la rangée (170 polaroid + 16 gap + 64 flèche +
16 gap + 340 mockup = 606px + marge de respiration) plutôt qu'un chiffre arbitraire plus
large — ça évite la marge morte à droite du mockup tout en garantissant
.pod-plp__hero-text ≥ 50% du conteneur (1320px de large, gap de 24px :
1320 - 630 - 24 = 666px = 50,5%). Les slides sont en position absolute/inset:0 pour le
crossfade du carousel, donc le conteneur doit avoir une taille fixe plutôt que de suivre le
contenu. */
.pod-plp__hero-visual {
position: relative;
width: 630px;
height: 620px;
}
@media (max-width: 860px) {
/* Mobile : carousel avant/après sur une ligne. aspect-ratio (plutôt qu'une hauteur fixe en
px) pour que le bloc reste fluide sur toute la plage 320-860px au lieu d'être calé sur une
seule largeur de référence — voir tailles en clamp() de .pod-plp__original-card,
.pod-plp__arrow et .pod-plp__hero-frame plus bas, qui scalent avec le viewport pour éviter
le débordement à droite sur petit écran et le contenu "riquiqui" sur grand mobile/tablette. */
.pod-plp__hero-visual {
width: 100%;
max-width: 560px;
aspect-ratio: 340 / 250;
height: auto;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
}
/* Colonne droite du hero : le visuel (carousel) + la légende explicative sous celui-ci. Gap
resserré pour que la bulle reste visuellement rattachée à la photo qu'elle annonce. */
.pod-plp__hero-right {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* Remonte uniquement la colonne droite du hero, sans affecter .pod-plp__hero-text — align-self
surcharge le align-items: center du grid parent (.pod-plp__hero) pour cet item seul. */
@media (min-width: 861px) {
.pod-plp__hero-right {
align-self: start;
margin-top: -72px;
}
}
/* La bulle mobile (dans le visuel) est masquée par défaut ; la bulle desktop est en flux. */
.pod-plp__hero-explain--mobile {
display: none;
}
/* Bulle de BD — fond blanc, contour épais, ombre "dure" (sans flou, décalée), flèche
triangulaire vers le bas pointant sur la photo "avant". Actuellement commentée dans le HTML
(voir show.html.erb) — règles conservées pour une réactivation future. La version desktop
(--desktop) est DANS .pod-plp__hero-visual (position:relative), positionnée en absolute,
ancrée par bottom:100% sur ce conteneur (et non par align-self, qui ne s'applique qu'aux
enfants flex : elle ne ferait rien ici puisque la bulle n'est plus un enfant direct de
.pod-plp__hero-right). Ajuster `bottom`/`left` pour resserrer/écarter la bulle de la photo. */
.pod-plp__hero-explain {
position: relative;
max-width: 340px;
margin: 0;
text-align: center;
font-size: var(--px-text-sm);
font-weight: 600;
color: var(--px-ink-900);
line-height: 1.5;
background: var(--px-white, #fff);
border: 2.5px solid var(--px-ink-900);
border-radius: 18px;
padding: 14px 20px;
box-shadow: 5px 5px 0 var(--px-ink-900);
}
.pod-plp__hero-explain--desktop {
position: absolute;
left: 97px;
bottom: calc(100% - 158px);
transform: translateX(-50%);
z-index: 2;
}
/* Flèche de la bulle — deux triangles superposés (bordure derrière, fond devant, plus petit)
pour simuler un contour de 2.5px sur la pointe, comme sur le corps de la bulle. */
.pod-plp__hero-explain::after,
.pod-plp__hero-explain::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
}
.pod-plp__hero-explain::after {
bottom: -15px;
border-top: 15px solid var(--px-ink-900);
z-index: 1;
}
.pod-plp__hero-explain::before {
bottom: -11px;
border-left-width: 10px;
border-right-width: 10px;
border-top: 11px solid var(--px-white, #fff);
z-index: 2;
}
/* Flèche "photo → produit" — couleur du tenant via currentColor (fill de l'inline SVG).
Horizontale par défaut (desktop, photo "avant" à gauche du mockup) ; repasse à la verticale
en mobile (voir override ≤860px plus bas, disposition empilée). */
.pod-plp__arrow {
flex-shrink: 0;
width: 64px;
color: var(--tenant-accent, var(--px-primary-500));
transform: none;
display: flex;
}
.pod-plp__arrow svg {
width: 100%;
height: auto;
display: block;
}
.pod-plp__carousel-slide {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 16px;
opacity: 0;
transition: opacity 0.9s ease;
pointer-events: none;
}
.pod-plp__carousel-slide.is-active {
opacity: 1;
pointer-events: auto;
}
/* Effet Polaroid — cadre blanc épais (plus large en bas), légère rotation et ombre portée pour
un rendu "photo posée à la main", cohérent avec l'ambiance chaleureuse/DIY du avant/après. */
.pod-plp__original-card {
flex-shrink: 0;
width: 170px;
background: #fff;
padding: 10px 10px 26px;
border-radius: 3px;
box-shadow: 0 8px 20px rgba(10, 15, 28, .18);
transform: rotate(-6deg);
z-index: 1;
}
@media (max-width: 860px) {
/* clamp() plutôt qu'une largeur fixe : scale avec le viewport sur toute la plage mobile
(320-860px) au lieu d'être calé sur une seule largeur de référence (~375px), ce qui
provoquait un débordement à droite du carousel sur petit écran et un rendu "riquiqui" sur
grand mobile/tablette. */
.pod-plp__original-card {
width: clamp(80px, 22vw, 130px);
padding: 5px 5px 14px;
}
}
.pod-plp__original-img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
border-radius: 1px;
}
.pod-plp__hero-frame {
position: relative;
z-index: 1;
flex: none;
width: 340px;
height: 100%;
min-height: 0;
border-radius: 20px;
overflow: hidden;
}
@media (max-width: 860px) {
/* La largeur ne doit JAMAIS venir d'un flex-grow ou d'un vw imprévisible : le rapport
largeur/hauteur du cadre doit rester structurellement plus étroit que celui de l'image
servie (520×650 = 0,8) pour que object-fit:cover recadre UNIQUEMENT en largeur (marges
blanches gauche/droite du composite source, voir .pod-plp__hero-img plus bas) et ne rogne
jamais en hauteur — donc jamais le téléphone lui-même (haut/bas). height:100% (hérité de la
règle de base) reste la valeur pilote ; width se déduit de aspect-ratio. flex:none annule
tout flex-grow hérité — l'espace restant dans la rangée est réparti par
.pod-plp__carousel-slide (justify-content:center) plutôt qu'absorbé ici. */
.pod-plp__hero-frame {
flex: none;
aspect-ratio: 0.72;
width: auto;
min-width: 130px;
max-width: 300px;
}
}
.pod-plp__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pod-plp__hero-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--px-ink-50, #f4f4f5);
color: var(--px-ink-200);
font-size: 2.5rem;
}
/* ── Mobile (≤860px) — réorganisation du hero pour prioriser le tunnel d'achat dans le fold :
carousel avant/après (sur une ligne) → titre → sous-titre → CTA → prix → paiement sécurisé,
puis sous le fold description/arguments marketing → avis. Réordonné via `order` (aucun
changement de HTML). Bloc placé en fin de section pour l'emporter, à spécificité égale, sur
les règles mobiles single-class définies plus haut. */
@media (max-width: 860px) {
/* Le visuel (colonne droite de la grille) passe en tête. */
.pod-plp__hero-right {
order: -1;
gap: 10px;
}
/* Bulle desktop masquée ; bulle mobile positionnée en absolu DANS le visuel (contexte
position:relative), dans la même colonne que la photo "avant" : ancrée en haut à gauche,
au-dessus de la vignette "avant" qui, elle, descend en bas de la colonne. */
.pod-plp__hero-explain--desktop {
display: none;
}
.pod-plp__hero-explain--mobile {
display: block;
position: absolute;
bottom: 100px;
/* juste au-dessus de la vignette "avant" (88px de haut, en bas de colonne) */
left: 0;
z-index: 3;
max-width: 150px;
margin: 0;
font-size: 11.5px;
line-height: 1.4;
padding: 8px 11px;
text-align: left;
}
/* .pod-plp__hero-text passe en display:contents : ses enfants (titre, sous-titre, CTA...)
deviennent des items directs de la grille .pod-plp__hero (colonne unique en mobile), ce qui
permet d'intercaler .pod-landing__title AVANT .pod-plp__hero-right (order -2 < -1) — donc
au-dessus du carousel — sans dupliquer le ni changer le HTML. `gap` vient alors de
.pod-plp__hero (20px) plutôt que de cet ex-conteneur flex. justify-self:center sur le CTA
évite qu'il ne s'étire en pleine largeur (comportement par défaut des items de grille). */
.pod-plp__hero-text {
display: contents;
}
.pod-plp__hero-text>* {
margin: 0;
}
.pod-plp__hero-text .pod-landing__title {
order: -2;
}
.pod-plp__hero-text .pod-landing__sub {
order: 2;
}
.pod-plp__hero-text .pod-landing__cta {
order: 3;
justify-self: center;
}
.pod-plp__hero-text .pod-plp__hero-price {
order: 4;
}
.pod-plp__hero-text .pod-plp__hero-secure {
order: 5;
}
/* Groupe "sous le fold" — léger espace supplémentaire pour marquer la rupture. */
.pod-plp__hero-text .market-args {
order: 6;
margin-top: 16px;
}
.pod-plp__hero-text .pod-plp__rating-badge {
order: 7;
}
/* Carousel avant/après sur une même ligne, calée à droite (flex-end) : le mockup a maintenant
une largeur déduite de aspect-ratio, pas un flex-grow (voir .pod-plp__hero-frame), donc il
ne peut plus absorber l'espace restant dans la rangée — flex-end colle le cadre au bord
droit du visuel pour supprimer sa marge morte, l'espace restant éventuel se reporte à
gauche (avant la vignette "avant"). Gap resserré (6px, vs 16px desktop) pour laisser un peu
plus de marge aux tailles en clamp() ci-dessus/dessous et éviter le débordement sur les
très petits écrans (~320px). */
.pod-plp__carousel-slide {
flex-direction: row;
justify-content: flex-end;
gap: 6px;
}
/* margin-bottom retiré : il désaxait la flèche par rapport au centrage vertical de
.pod-plp__carousel-slide (align-items:center). margin-right négatif : la pointe déborde
légèrement sur .pod-plp__hero-img — sans risque visuel, cette zone correspond à la marge
blanche du composite source (voir .pod-plp__hero-frame, aspect-ratio 0.72). position +
z-index : .pod-plp__hero-frame a son propre z-index:1, sans ça le débordement passerait
DERRIÈRE le cadre au lieu de déborder dessus. */
.pod-plp__arrow {
width: clamp(34px, 10vw, 58px);
margin-right: -8px;
position: relative;
z-index: 2;
}
}
/* ── Reveal (Pod::LandingsController#reveal) — 2 colonnes fixes 50/50, gauche texte / droite
visuel, structure identique du pending au done (seul le contenu de chaque colonne change) ──
voir retour utilisateur du 2026-07-05 et docs/landing_plan.md §6. */
.pod-plp__reveal {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 48px;
/* padding: 48px 0; */
}
@media (max-width: 860px) {
.pod-plp__reveal {
grid-template-columns: 1fr;
gap: 8px;
padding: 0;
}
.pod-main.pod-main--wide {
padding-top: 0;
}
.pod-plp__other-products-title {
margin-top: 24px;
text-align: center;
}
/* Aperçu (mockup) avant tout le reste sur mobile — .pod-plp__reveal-text vient toujours en
premier dans le DOM (prix/variantes/achat y vivent, voir .pod-plp__buy-zone), order:-1
inverse juste l'ordre visuel sans toucher au HTML. */
.pod-plp__reveal-visual {
order: -1;
margin-top: 0;
}
}
.pod-plp__reveal-text {
text-align: left;
}
.pod-plp__reveal-text h2 {
font-family: var(--px-font-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
color: var(--px-ink-900);
margin: 0 0 12px;
}
.pod-plp__reveal-text p {
color: var(--px-ink-500);
font-size: var(--px-text-base);
margin: 0 0 16px;
}
/* État "done" : titre .pod-landing__title (composant partagé avec le hero) — margin propre à ce
contexte, plus resserré que dans le hero. .pod-landing__sub (2 classes) l'emporte sur la règle
générique "p" ci-dessus (1 classe + 1 tag) grâce à la sélectivité, pas besoin d'utilitaire
Bootstrap (mt-3) pour l'espacement : les marges title/sub se collapsent proprement. */
.pod-plp__reveal-text .pod-landing__title {
margin: 0 0 12px;
}
.pod-plp__reveal-text .pod-landing__sub {
font-size: var(--px-text-lg);
margin: 0 0 20px;
}
/* Contenu HTML libre saisi en superadmin (Landing#marketing_arguments) — styles de base pour
des listes/paragraphes basiques, l'admin reste libre de la structure exacte. */
.pod-plp__marketing-arguments {
margin: 0 0 20px;
color: var(--px-ink-700, var(--px-ink-900));
font-size: var(--px-text-base);
line-height: 1.6;
}
.pod-plp__marketing-arguments ul,
.pod-plp__marketing-arguments ol {
margin: 0;
padding-left: 1.3em;
}
.pod-plp__marketing-arguments li {
margin-bottom: 6px;
}
/* Le composant .gen-pending (pixhome_components.css) a un min-height: 50vh + centrage pleine
page par défaut — surchargé ici pour rester dans la moitié gauche de la grille. */
.pod-plp__reveal-text .gen-pending {
min-height: 0;
text-align: left;
}
.pod-plp__reveal-visual {
display: flex;
flex-direction: column;
/* align-items: center; */
gap: 16px;
/* margin-top: -35px; */
}
/* Mockup vierge + overlay loader — reste affiché à la même place tout au long du chargement,
remplacé par le mockup avec design une fois @generation.done? (voir vue). */
.pod-plp__loading-frame {
position: relative;
width: 100%;
max-width: 380px;
aspect-ratio: 4 / 5;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 64px -12px rgba(10, 15, 28, .22);
}
/* Aperçu final (état done) — cadre agrandi (vs .pod-plp__loading-frame) : c'est le rendu
produit réel, à afficher en grand. Rendu source en haute résolution (ProductMockupsController
?hq=1, voir product_mockup_tag(..., hq: true)) pour rester net à cette taille — sans ça,
l'image 300×400 par défaut (pensée pour les vignettes boutique) devient floue une fois
étirée. */
.pod-plp__mockup-frame {
position: relative;
width: 100%;
max-width: 480px;
aspect-ratio: 4 / 5;
border-radius: 20px;
overflow: hidden;
/* box-shadow: 0 24px 64px -12px rgba(10, 15, 28, .22); */
}
.pod-plp__loading-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(0.3) brightness(0.9);
}
.pod-plp__loading-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
/* background: rgba(10, 15, 28, .38); */
color: #000;
text-align: center;
}
.pod-plp__loading-overlay p {
font-size: 13px;
font-weight: 600;
margin: 0;
text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.pod-plp__loading-spinner {
font-size: 40px;
animation: spin 0.9s linear infinite;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4));
}
/* Bloc achat (prix + variantes + quantité/CTA) déplacé sous .market-args dans la colonne texte
— voir retour utilisateur du 2026-07-09. .pod-shop__actions a un margin-top: auto pensé pour
la grille générique (aligne le bouton entre cartes de hauteurs différentes) — ici il n'y a
pas de grille, le bouton doit rester juste après le sélecteur de variante. */
.pod-plp__buy-zone {
margin: 14px 0;
}
/* .pod-shop__card-price-zone a justify-content: space-between par défaut (pensé pour une carte
boutique étroite, où le badge de taille doit se coller à droite) — dans .pod-plp__buy-zone la
zone fait toute la largeur de la colonne texte, space-between écarterait le badge très loin du
prix. flex-start + le gap existant suffisent à les tenir groupés. */
.pod-plp__buy-zone .pod-shop__card-price-zone {
justify-content: flex-start;
margin-bottom: 14px;
}
/* Prix mis en avant — bien plus gros que dans une carte boutique standard, même traitement
(police display) que .pod-plp__hero-price ailleurs sur la landing, pour rester cohérent que
la génération vienne du parcours connecté ou invité. */
.pod-plp__buy-zone .pod-shop__card-price {
font-family: var(--px-font-display);
font-size: var(--px-text-3xl);
}
/* Zone bouton + quantité : largeur bridée (ne s'étire pas sur toute la colonne texte) et
sélecteur de quantité calé à la même hauteur que le bouton "Acheter" (padding/taille des
cercles augmentés en conséquence — valeurs choisies pour matcher la hauteur du bouton
ci-dessous, à réajuster ensemble si l'un des deux change). */
.pod-plp__buy-zone .pod-shop__actions {
margin-top: 16px;
/* max-width: 370px; */
}
.pod-plp__buy-zone .pod-shop__stepper {
padding: 8px 10px;
font-size: 14px;
}
.pod-plp__buy-zone .pod-shop__stepper-btn {
width: 34px;
height: 34px;
}
/* Bouton d'achat agrandi dans ce contexte (plus grand que le standard .pod-shop__add-btn de la
grille boutique générique, qui reste inchangé ailleurs). */
.pod-plp__buy-zone .pod-shop__add-btn {
padding: 14px 22px;
font-size: var(--px-text-base);
}
/* Même largeur que la zone bouton + quantité juste en dessous (.pod-shop__actions, 370px max). */
.pod-plp__buy-zone .pod-shop__variant-select {
max-width: 370px;
}
/* Mobile : tout ce qui est sous la photo (titre, texte, market-args, bloc achat) centré — la
photo passe avant via order:-1 (voir .pod-plp__reveal-visual), le reste suit en colonne
centrée plutôt qu'alignée à gauche comme en desktop. text-align centre le texte/les listes ;
les rangées flex (prix, sélecteurs de variante, bouton+quantité) et les blocs à largeur
bridée ont besoin de leurs propres règles pour se centrer en tant que groupe. */
@media (max-width: 860px) {
.pod-plp__reveal-text {
text-align: center;
}
/* .gen-pending fige text-align:left en dur (desktop, colonne gauche) sans override mobile —
résistait donc au centrage ci-dessus : titre/texte restaient collés à gauche sous la photo
déjà centrée. La barre de progression elle-même (.pod-progress) reste correctement centrée
dans les deux cas via son propre margin:0 auto, indépendant du text-align hérité. */
.pod-plp__reveal-text .gen-pending {
text-align: center;
}
.pod-plp__buy-zone .pod-shop__card-price-zone,
.pod-plp__buy-zone .pod-shop__variant-picker--dual,
.pod-plp__buy-zone .pod-shop__size-buttons,
.pod-plp__buy-zone .pod-shop__color-buttons,
.pod-plp__buy-zone .pod-shop__actions {
/* justify-content: center; */
}
.pod-shop__card-price-zone .small {
text-align: left;
}
.market-args-small ul li {
text-align: left;
line-height: 16px;
margin-top: 5px;
}
.market-args-small {
text-align: left;
}
.pod-plp__buy-zone .pod-shop__actions,
.pod-plp__buy-zone .pod-shop__variant-select {
margin-left: auto;
margin-right: auto;
}
}
.pod-plp__buy-hint {
margin: 10px 0 0;
font-size: var(--px-text-sm);
color: var(--px-ink-400);
text-align: center;
}
@media (min-width: 861px) {
.pod-plp__buy-hint {
text-align: left;
}
}
.pod-plp__buy-hint a {
color: var(--tenant-accent, var(--px-primary-500));
font-weight: 600;
}
/* Sélecteur de variante — visiteur non connecté (Pod::LandingsController#reveal, branche
invité). Style volontairement plus sobre/compact que .pod-shop__size-btn (sélecteur connecté,
piloté par pod-cart) : simples pastilles texte, pas de contexte panier ici. */
.pod-plp__guest-picker-select {
display: block;
width: 100%;
/* max-width: 50%; */
padding: 8px 12px;
border: 1.5px solid var(--px-ink-200, #e2e8f0);
border-radius: 8px;
background: var(--px-white, #fff);
color: var(--px-ink-800, #1a202c);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
appearance: auto;
margin: 4px 0 12px;
}
.pod-plp__guest-picker-select:focus {
outline: none;
border-color: var(--tenant-accent, var(--px-primary-500));
}
/* ── Note + avis (Landing#average_rating/reviews_count, LandingReview) ── */
.pod-plp__stars {
display: inline-flex;
gap: 2px;
}
.pod-plp__star {
font-size: 16px;
color: var(--px-ink-200, #e2e8f0);
}
.pod-plp__star--filled {
color: #f5b400;
}
.pod-plp__rating-badge {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 36px;
}
@media (max-width: 860px) {
.pod-plp__rating-badge {
justify-content: center;
}
}
.pod-plp__rating-badge--center {
justify-content: center;
margin: 10px 0 0;
}
.pod-plp__rating-text {
font-size: var(--px-text-sm);
font-weight: 600;
color: var(--px-ink-600, var(--px-ink-500));
}
.pod-plp__reviews {
margin-bottom: 64px;
}
.pod-plp__reviews-carousel {
position: relative;
max-width: 1080px;
margin: 32px auto 0;
min-height: 300px;
}
/* Rangée de 3 avis (une "page" du carousel — voir reviews.each_slice(3) dans la vue). */
.pod-plp__review-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: 100%;
}
/* Flèches de navigation (grands chevrons fins) de chaque côté du carousel d'avis. En dehors de
la carte en desktop (offset négatif dans la marge de la section), rapprochées des bords en
mobile. */
.pod-plp__review-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
background: none;
border: none;
cursor: pointer;
color: var(--px-ink-300, var(--px-ink-200));
transition: color 0.15s ease, transform 0.15s ease;
}
.pod-plp__review-nav:hover {
color: var(--tenant-accent, var(--px-primary-500));
}
.pod-plp__review-nav--prev {
left: -60px;
}
.pod-plp__review-nav--next {
right: -60px;
}
.pod-plp__review-nav--prev:hover {
transform: translateY(-50%) translateX(-2px);
}
.pod-plp__review-nav--next:hover {
transform: translateY(-50%) translateX(2px);
}
@media (max-width: 760px) {
.pod-plp__review-nav--prev {
left: -8px;
}
.pod-plp__review-nav--next {
right: -8px;
}
.pod-plp__review-nav svg {
width: 42px;
height: 42px;
}
}
.pod-plp__review-slide {
position: absolute;
inset: 0;
/* Carte centrée verticalement dans le conteneur (min-height 260px) — sinon une carte plus
courte reste calée en haut et les flèches (centrées à 50 % du conteneur) semblent décalées
par rapport à elle. */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
}
.pod-plp__review-slide.is-active {
opacity: 1;
pointer-events: auto;
}
/* Mobile : 1 seul avis visible à la fois. display:contents aplatit les "pages de 3" (slide + row)
pour que les cartes deviennent des enfants directs du carousel, transformé en piste à
défilement horizontal (scroll-snap) — on swipe carte par carte. Les flèches (pensées pour le
crossfade desktop) sont masquées ; le geste tactile suffit. Aucun changement d'ERB ni de JS. */
@media (max-width: 860px) {
.pod-plp__reviews-carousel {
min-height: 0;
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.pod-plp__reviews-carousel::-webkit-scrollbar {
display: none;
}
.pod-plp__review-slide,
.pod-plp__review-row {
display: contents;
}
.pod-plp__review-card {
flex: 0 0 86%;
width: auto;
scroll-snap-align: center;
}
.pod-plp__review-nav {
display: none;
}
}
.pod-plp__review-card {
position: relative;
width: 100%;
background: var(--px-white, #fff);
border: 1px solid var(--px-ink-100);
border-radius: 20px;
padding: 40px 36px 30px;
text-align: center;
box-shadow: 0 12px 36px -14px rgba(10, 15, 28, .16);
}
/* Grand guillemet décoratif en filigrane, dans la couleur du tenant. */
.pod-plp__review-card::before {
content: "\201C";
position: absolute;
top: 6px;
left: 24px;
font-family: Georgia, "Times New Roman", serif;
font-size: 84px;
line-height: 1;
color: color-mix(in srgb, var(--tenant-accent, var(--px-primary-500)) 18%, transparent);
pointer-events: none;
}
.pod-plp__review-body {
position: relative;
font-size: var(--px-text-lg);
color: var(--px-ink-700, var(--px-ink-900));
line-height: 1.65;
margin: 14px 0 18px;
/* Hauteur de carte cohérente d'un avis à l'autre — les slides sont superposées en absolute
pour le crossfade (voir .pod-plp__review-slide), une longueur trop variable ferait
déborder les avis courts hors du conteneur dimensionné pour le plus long. */
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pod-plp__review-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: var(--px-text-sm);
}
.pod-plp__review-author {
font-weight: 700;
color: var(--px-ink-900);
}
.pod-plp__review-date {
color: var(--px-ink-400);
}
/* ── Showcase produit : [vidéo] [image specs] [texte] sur UNE ligne. ─────────────────────────
POUR RÉGLER LA MISE EN PAGE : une seule ligne à modifier → grid-template-columns ci-dessous
(largeur vidéo | largeur image | "1fr" = tout le reste pour le texte). Le passage en colonne
unique se fait au @media (max-width: 980px) plus bas. */
.pod-plp__showcase {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: 44px;
margin: 96px 0;
}
/* Colonne 1 — vidéo portrait : cadre à ratio fixe, la vidéo le remplit (object-fit cover). */
.pod-plp__showcase-video {
aspect-ratio: 746 / 1000;
border-radius: 20px;
overflow: hidden;
background: var(--px-ink-100);
box-shadow: 0 20px 50px -16px rgba(10, 15, 28, .3);
}
.pod-plp__showcase-video video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Colonne 2 — image specs : remplit sa colonne, hauteur auto (garde son ratio). */
.pod-plp__showcase-img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
/* Colonne 3 — texte marketing. */
.pod-plp__showcase-text h2 {
font-family: var(--px-font-display);
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
font-weight: 800;
color: var(--px-ink-900);
margin: 0 0 12px;
}
.pod-plp__showcase-text h2:not(:first-child) {
margin-top: 26px;
}
.pod-plp__showcase-text p {
font-size: var(--px-text-base);
color: var(--px-ink-600, var(--px-ink-500));
line-height: 1.7;
margin: 0 0 12px;
}
/* Empile en 1 colonne sous 980px (change cette largeur pour régler le point de bascule). */
@media (max-width: 980px) {
.pod-plp__showcase {
grid-template-columns: 1fr;
justify-items: center;
gap: 32px;
margin: 64px 0;
}
.pod-plp__showcase-video,
.pod-plp__showcase-img {
width: 100%;
max-width: 340px;
}
.pod-plp__showcase-text {
max-width: 560px;
text-align: center;
}
}
/* ── Achat direct (Pod::QuickCheckoutController) ── */
.pod-plp__checkout {
max-width: 420px;
margin: 48px auto;
text-align: center;
}
.pod-plp__checkout-title {
font-family: var(--px-font-display);
font-size: clamp(1.5rem, 3vw, 1.9rem);
font-weight: 800;
color: var(--px-ink-900);
margin: 0 0 24px;
}
.pod-plp__checkout-recap {
display: flex;
align-items: center;
gap: 14px;
text-align: left;
background: var(--px-white, #fff);
border: 1px solid var(--px-ink-100);
border-radius: 12px;
padding: 14px;
margin-bottom: 28px;
}
.pod-plp__checkout-recap-media {
width: 64px;
height: 64px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: var(--px-ink-50, #f4f4f5);
}
.pod-plp__checkout-recap-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pod-plp__checkout-recap-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.pod-plp__checkout-recap-name {
font-weight: 700;
color: var(--px-ink-900);
}
.pod-plp__checkout-recap-variant {
font-size: var(--px-text-sm);
color: var(--px-ink-500);
}
.pod-plp__checkout-recap-price {
font-weight: 700;
color: var(--tenant-accent, var(--px-primary-500));
margin-top: 4px;
}