/* ═══════════════════════════════════════════════════════════
   EZ Sales LP — feuille de style autonome.

   Palette : pêche + noir chaud, reprise de la charte de la cliente.
   Les couleurs viennent des variables générées par le template
   depuis la clé 'theme' du fichier de configuration.

   Règle des boutons : un bouton est toujours l'inverse de son fond.
   Fond clair  -> bouton noir, texte pêche.
   Fond sombre -> bouton pêche, texte noir.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Palette de repli. Le template redéclare ces variables après wp_head()
       à partir du fichier de configuration, et l'emporte donc sur ces valeurs.
       Elles garantissent qu'une feuille de style et un HTML désynchronisés
       (cache navigateur, config incomplète) ne produisent jamais de fond
       transparent ni de bouton de la couleur de son fond. */
    --ez-deep: #1a1614;
    --ez-deep-2: #0e0c0b;
    --ez-blush: #fcd8c9;
    --ez-blush-soft: #fdeade;
    --ez-cream: #fbf6f2;
    --ez-ink: #131110;
    --ez-accent: #845414;

    --ez-font-display: Georgia, 'Times New Roman', serif;
    --ez-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --ez-text: #33291f;
    --ez-muted: #6d6155;
    --ez-line: rgba(19, 17, 16, .1);
    --ez-white: #fff;

    --ez-radius: 16px;
    --ez-radius-lg: 26px;
    --ez-shadow: 0 10px 30px rgba(19, 17, 16, .07);
    --ez-shadow-lg: 0 24px 64px rgba(19, 17, 16, .16);

    --ez-wrap: 1160px;

    /* Rythme vertical : une seule source pour tous les espacements. */
    --ez-section-y: 104px;
    --ez-block-gap: 44px;   /* titre -> contenu */
    --ez-cta-gap: 56px;     /* contenu -> bouton */
}

/* ── Reset minimal ─────────────────────────────────────── */
.ez-lp *,
.ez-lp *::before,
.ez-lp *::after { box-sizing: border-box; }

html.ez-lp-html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html.ez-lp-html { scroll-behavior: auto; }
}

body.ez-lp {
    margin: 0;
    background: var(--ez-cream);
    color: var(--ez-text);
    font-family: var(--ez-font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Réglages de base enveloppés dans :where() — spécificité nulle.
   Sans ça, un sélecteur comme « .ez-lp a » l'emporterait sur « .ez-btn »
   et écraserait couleurs et marges des composants. */
:where(.ez-lp) :where(h1, h2, h3) { margin: 0; line-height: 1.15; font-weight: 600; }
:where(.ez-lp) :where(p) { margin: 0 0 1em; }
:where(.ez-lp) :where(p:last-child) { margin-bottom: 0; }
:where(.ez-lp) :where(ul) { margin: 0; padding: 0; list-style: none; }
:where(.ez-lp) :where(img) { max-width: 100%; height: auto; display: block; }
:where(.ez-lp) :where(a) { color: inherit; }

.ez-lp :focus-visible {
    outline: 3px solid var(--ez-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Les ancres ne collent pas au bord haut de l'écran. */
.ez-lp [id] { scroll-margin-top: 24px; }

.ez-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ez-ink);
    color: var(--ez-blush);
    padding: 12px 20px;
    z-index: 999;
}
.ez-skip:focus { left: 0; }

/* ── Structure ─────────────────────────────────────────── */
.ez-wrap {
    width: 100%;
    max-width: var(--ez-wrap);
    margin: 0 auto;
    padding: 0 28px;
}
.ez-wrap--narrow { max-width: 820px; }

.ez-section { padding: var(--ez-section-y) 0; position: relative; }
.ez-section--cream { background: var(--ez-cream); }
.ez-section--blush { background: var(--ez-blush); }
.ez-section--blush-soft { background: var(--ez-blush-soft); }
.ez-section--dark {
    background: var(--ez-deep);
    color: #efe6df;
}

/* Deux sections claires qui se suivent ne doivent pas creuser un trou :
   la seconde reprend juste après la première. */
.ez-section--cream + .ez-section--cream { padding-top: 0; }

.ez-center { text-align: center; margin-top: var(--ez-cta-gap); }

/* ── Typographie ───────────────────────────────────────── */
.ez-eyebrow {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ez-blush);
    margin: 0 0 20px;
}

.ez-kicker {
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ez-accent);
    margin: 0 0 12px;
}
.ez-kicker--light { color: var(--ez-blush); }

.ez-h2 {
    font-family: var(--ez-font-display);
    font-size: clamp(31px, 4.3vw, 46px);
    letter-spacing: -.015em;
    color: var(--ez-ink);
    margin: 0 0 20px;
    max-width: 26ch;
    text-wrap: balance;
}
.ez-h2 em { font-style: italic; color: var(--ez-accent); }
.ez-h2--light { color: #fff; }
.ez-h2--light em { color: var(--ez-blush); }
.ez-h2.ez-center { max-width: none; margin: 0 auto 20px; }

/* Un titre seul (sans chapô) garde l'écart complet avant le contenu. */
.ez-h2 + .ez-grid,
.ez-h2 + .ez-faq__list,
.ez-h2 + .ez-testimonials__list { margin-top: var(--ez-block-gap); }

.ez-lead {
    font-size: 18px;
    color: var(--ez-muted);
    max-width: 62ch;
}
.ez-lead + .ez-lead { margin-top: -.2em; }
.ez-lead--light { color: #c8bcb1; }
.ez-lead + .ez-grid { margin-top: var(--ez-block-gap); }

.ez-note {
    margin: 32px 0 0;
    padding: 20px 24px;
    background: rgba(132, 84, 20, .07);
    border-left: 3px solid var(--ez-accent);
    border-radius: 0 12px 12px 0;
    font-size: 16px;
    color: #6b5940;
}

.ez-link-quiet {
    color: #cdbfb4;
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid rgba(205, 191, 180, .4);
    padding-bottom: 2px;
}
.ez-link-quiet:hover { color: #fff; border-color: #fff; }

/* ── Boutons ───────────────────────────────────────────── */
.ez-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: var(--ez-ink);
    color: var(--ez-blush);
    text-decoration: none;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(19, 17, 16, .22);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    text-align: center;
}
.ez-btn:hover {
    transform: translateY(-2px);
    background: #2a2320;
    box-shadow: 0 14px 30px rgba(19, 17, 16, .3);
}
.ez-btn:active { transform: translateY(0); }

/* Sur fond sombre : l'inverse. */
.ez-btn--light {
    background: var(--ez-blush);
    color: var(--ez-ink);
    box-shadow: 0 8px 26px rgba(252, 216, 201, .22);
}
.ez-btn--light:hover {
    background: #fff0e7;
    box-shadow: 0 14px 34px rgba(252, 216, 201, .3);
}

.ez-btn__label { font-size: 17px; letter-spacing: .01em; }
.ez-btn__note { font-size: 12.5px; font-weight: 500; opacity: .72; letter-spacing: .02em; }

.ez-btn--lg { padding: 19px 48px; }
.ez-btn--lg .ez-btn__label { font-size: 19px; }
.ez-btn--sm { padding: 11px 24px; box-shadow: none; }
.ez-btn--sm .ez-btn__label { font-size: 15px; }
.ez-btn--block { display: flex; width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .ez-btn, .ez-btn:hover { transform: none; transition: none; }
}

/* ── Hero ──────────────────────────────────────────────── */
.ez-hero {
    position: relative;
    background: var(--ez-deep-2);
    color: #fff;
    padding: 0 0 32px;
    overflow: hidden;
}
.ez-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ez-hero__bg picture, .ez-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Le voile laisse respirer la photo à droite tout en gardant
   un contraste suffisant sur le texte, à gauche. */
.ez-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(14, 12, 11, .95) 16%, rgba(14, 12, 11, .72) 55%, rgba(14, 12, 11, .38) 100%),
        linear-gradient(180deg, rgba(14, 12, 11, .5) 0%, rgba(14, 12, 11, .2) 40%, rgba(14, 12, 11, .85) 100%);
}

.ez-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
    padding-top: 92px;
    padding-bottom: 64px;
}

.ez-hero__title {
    font-family: var(--ez-font-display);
    font-size: clamp(40px, 6.2vw, 72px);
    line-height: 1.03;
    letter-spacing: -.025em;
    margin: 0 0 22px;
    text-wrap: balance;
}
.ez-hero__title em { display: block; font-style: italic; color: var(--ez-blush); }

.ez-hero__sub {
    font-size: 19px;
    color: #d3c8bf;
    max-width: 52ch;
    margin-bottom: 36px;
}

.ez-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.ez-hero__portrait { position: relative; align-self: end; }
.ez-hero__portrait picture { display: block; }
.ez-hero__portrait-img {
    width: 100%;
    max-width: 320px;
    margin: 0 0 0 auto;
    filter: drop-shadow(0 20px 44px rgba(0, 0, 0, .5));
    /* Le détourage est coupé net en bas : on le fond dans le fond. */
    -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 66%, transparent 96%);
}

.ez-bubble {
    position: absolute;
    left: 0;
    bottom: 40px;
    max-width: 292px;
    margin: 0;
    background: var(--ez-blush);
    color: var(--ez-ink);
    padding: 20px 22px;
    border-radius: 22px 22px 22px 4px;
    box-shadow: var(--ez-shadow-lg);
}
.ez-bubble blockquote { margin: 0 0 8px; font-size: 15px; line-height: 1.5; font-weight: 600; }
.ez-bubble figcaption { font-size: 12.5px; font-weight: 500; opacity: .65; }

/* Bandeau de réassurance */
.ez-trust {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 24px 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(252, 216, 201, .18);
    border-radius: var(--ez-radius);
    backdrop-filter: blur(6px);
}
.ez-trust li { text-align: center; padding: 4px 8px; }
.ez-trust strong {
    display: block;
    font-family: var(--ez-font-display);
    font-size: 25px;
    color: var(--ez-blush);
    line-height: 1.2;
}
.ez-trust span { display: block; font-size: 13px; color: #b9ada3; margin-top: 4px; line-height: 1.35; }

/* ── Grilles et cartes ─────────────────────────────────── */
.ez-grid { display: grid; gap: 20px; }
.ez-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ez-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ez-grid--4 { grid-template-columns: repeat(4, 1fr); }

.ez-card {
    background: var(--ez-white);
    border: 1px solid var(--ez-line);
    border-radius: var(--ez-radius);
    padding: 28px 26px;
    box-shadow: var(--ez-shadow);
}
.ez-card h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ez-ink);
    line-height: 1.35;
}
.ez-card p { margin: 0; font-size: 15px; color: var(--ez-muted); }

.ez-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--ez-blush);
    color: var(--ez-ink);
    margin-bottom: 18px;
}
.ez-card__icon svg { width: 22px; height: 22px; }

/* Cartes « programme » */
.ez-card--check { display: flex; gap: 16px; align-items: flex-start; }

.ez-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ez-ink);
    color: var(--ez-blush);
}
.ez-check svg { width: 15px; height: 15px; }
.ez-check--round { margin-bottom: 16px; }

/* ── Recadrage ─────────────────────────────────────────── */
.ez-reframe .ez-lead { font-size: 18.5px; color: #574b3f; }

/* ── Méthode (grand aplat pêche, signature de la marque) ── */
.ez-method .ez-h2, .ez-method .ez-lead { color: var(--ez-ink); }
.ez-method .ez-lead { color: #6b5a49; }
.ez-method__list { margin-top: var(--ez-block-gap); }

.ez-pillar {
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(19, 17, 16, .09);
    border-radius: var(--ez-radius);
    padding: 30px 28px;
    transition: background .2s ease, transform .2s ease;
}
.ez-pillar:hover { background: rgba(255, 255, 255, .85); transform: translateY(-3px); }
.ez-pillar__num {
    display: block;
    font-family: var(--ez-font-display);
    font-size: 40px;
    line-height: 1;
    color: rgba(19, 17, 16, .22);
    margin-bottom: 14px;
}
.ez-pillar h3 {
    font-family: var(--ez-font-display);
    font-size: 22px;
    color: var(--ez-ink);
    margin: 0 0 10px;
}
.ez-pillar p { margin: 0; font-size: 15.5px; color: #6b5a49; }

@media (prefers-reduced-motion: reduce) {
    .ez-pillar:hover { transform: none; }
}

/* ── Sections vidéo ────────────────────────────────────── */
.ez-videosec__inner {
    display: grid;
    grid-template-columns: 1fr minmax(0, 300px);
    gap: 64px;
    align-items: center;
}
.ez-videosec--reverse .ez-videosec__inner { grid-template-columns: minmax(0, 300px) 1fr; }
.ez-videosec--reverse .ez-videosec__text { order: 2; }

.ez-videosec__text .ez-h2 { margin-bottom: 16px; }

.ez-video {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ez-video-ratio, 9/16);
    max-height: 440px;
    margin: 0 auto;
    border-radius: var(--ez-radius-lg);
    overflow: hidden;
    background: var(--ez-deep-2);
    box-shadow: var(--ez-shadow-lg);
}
.ez-video img,
.ez-video video,
.ez-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
}
.ez-video picture { display: block; width: 100%; height: 100%; }

.ez-video__facade {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
}
.ez-video__facade { background: var(--ez-deep-2); }
.ez-video__facade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 12, 11, .08), rgba(14, 12, 11, .42));
    transition: background .2s ease;
}
.ez-video__facade:hover::after { background: linear-gradient(180deg, rgba(14, 12, 11, .04), rgba(14, 12, 11, .28)); }

.ez-video__play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--ez-blush);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
    transition: transform .2s ease;
}
.ez-video__play::before {
    content: '';
    position: absolute;
    left: 54%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent var(--ez-ink);
}
.ez-video__facade:hover .ez-video__play { transform: translate(-50%, -50%) scale(1.07); }

.ez-video--empty {
    display: grid;
    place-items: center;
    border: 2px dashed rgba(19, 17, 16, .25);
    background: rgba(19, 17, 16, .04);
    box-shadow: none;
}
.ez-video__placeholder {
    text-align: center;
    padding: 24px;
    color: var(--ez-muted);
    display: grid;
    gap: 12px;
    font-size: 14px;
}
.ez-video__placeholder strong { color: var(--ez-ink); font-size: 16px; }
.ez-video__placeholder a {
    font-size: 13px;
    font-weight: 600;
    color: var(--ez-ink);
    background: var(--ez-blush);
    padding: 9px 16px;
    border-radius: 999px;
    text-decoration: none;
    justify-self: center;
}
.ez-video__placeholder a:hover { background: #fff0e7; }

/* ── Pour qui ──────────────────────────────────────────── */
.ez-audience .ez-card h3 { font-size: 16.5px; }

.ez-notfor {
    margin-top: 28px;
    background: rgba(19, 17, 16, .05);
    border-radius: var(--ez-radius);
    padding: 26px 30px;
}
.ez-notfor h3 { font-size: 16px; margin: 0 0 12px; color: var(--ez-ink); }
.ez-notfor ul { display: grid; gap: 8px; }
.ez-notfor li { position: relative; padding-left: 26px; font-size: 15.5px; color: var(--ez-muted); }
.ez-notfor li::before {
    content: '✕';
    position: absolute;
    left: 0;
    top: 0;
    color: #b3502f;
    font-size: 13px;
    font-weight: 700;
}

/* ── Témoignages ───────────────────────────────────────── */
.ez-testimonials__list { display: grid; gap: 22px; }

.ez-quote {
    position: relative;
    margin: 0;
    background: var(--ez-white);
    border-radius: var(--ez-radius);
    padding: 40px 38px 32px;
    box-shadow: var(--ez-shadow);
    border-left: 4px solid var(--ez-blush);
}
.ez-quote__mark {
    position: absolute;
    top: 4px;
    left: 26px;
    font-family: var(--ez-font-display);
    font-size: 72px;
    line-height: 1;
    color: rgba(252, 216, 201, .9);
}
.ez-quote blockquote {
    position: relative;
    margin: 0 0 16px;
    font-family: var(--ez-font-display);
    font-size: 20px;
    font-style: italic;
    line-height: 1.55;
    color: var(--ez-ink);
}
.ez-quote figcaption { font-size: 14px; color: var(--ez-muted); font-weight: 600; }

/* ── À propos ──────────────────────────────────────────── */
.ez-about__inner {
    display: grid;
    grid-template-columns: .8fr 1fr;
    gap: 64px;
    align-items: center;
}
.ez-about__media { position: relative; }
.ez-about__photo { border-radius: var(--ez-radius-lg); box-shadow: var(--ez-shadow-lg); width: 100%; }
.ez-about__side {
    position: absolute;
    right: -24px;
    bottom: 36px;
    width: 45%;
    border-radius: var(--ez-radius);
    overflow: hidden;
    border: 5px solid var(--ez-cream);
    box-shadow: var(--ez-shadow);
}
.ez-credit { margin: 12px 0 0; font-size: 12px; color: var(--ez-muted); opacity: .75; }

.ez-about__text .ez-h2 { margin-bottom: 18px; }

.ez-highlight {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 26px 0 0;
    padding: 20px 24px;
    background: var(--ez-blush);
    border-radius: var(--ez-radius);
    font-weight: 600;
    font-size: 16px;
    color: var(--ez-ink);
}
.ez-highlight span { flex: 0 0 auto; color: #b3502f; }
.ez-highlight svg { width: 22px; height: 22px; }

/* ── Offre ─────────────────────────────────────────────── */
.ez-offer .ez-kicker { text-align: center; }

.ez-paynotice {
    max-width: 560px;
    margin: 0 auto 24px;
    padding: 16px 22px;
    border-radius: var(--ez-radius);
    font-size: 15.5px;
    text-align: center;
}
.ez-paynotice--ok { background: #1f4d36; color: #d8f0e3; }
.ez-paynotice--error { background: #542420; color: #f7d9d4; }

.ez-pricecard {
    max-width: 470px;
    margin: var(--ez-block-gap) auto 0;
    background: var(--ez-white);
    color: var(--ez-text);
    border-radius: var(--ez-radius-lg);
    padding: 40px 38px;
    box-shadow: var(--ez-shadow-lg);
    text-align: center;
}
.ez-pricecard__label {
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ez-muted);
    margin: 0 0 12px;
}
.ez-pricecard__price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    margin: 0;
    line-height: 1;
}
.ez-pricecard__amount {
    font-family: var(--ez-font-display);
    font-size: 74px;
    color: var(--ez-ink);
    line-height: 1;
}
.ez-pricecard__currency {
    font-family: var(--ez-font-display);
    font-size: 30px;
    color: var(--ez-ink);
    margin-top: 8px;
}
.ez-pricecard__note { margin: 12px 0 0; font-size: 14px; color: var(--ez-muted); }

.ez-pricecard__includes {
    display: grid;
    gap: 12px;
    text-align: left;
    margin: 26px 0 28px;
    padding-top: 26px;
    border-top: 1px solid var(--ez-line);
}
.ez-pricecard__includes li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; }
.ez-pricecard__includes span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--ez-ink);
    color: var(--ez-blush);
}
.ez-pricecard__includes svg { width: 12px; height: 12px; }

.ez-reassurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--ez-muted);
}
.ez-reassurance li { position: relative; padding-left: 15px; }
.ez-reassurance li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3f9a6d;
}

.ez-guarantee {
    margin-top: 24px;
    padding: 20px;
    background: var(--ez-cream);
    border-radius: var(--ez-radius);
    text-align: left;
}
.ez-guarantee strong { display: block; margin-bottom: 6px; color: var(--ez-ink); }
.ez-guarantee p { margin: 0; font-size: 14.5px; color: var(--ez-muted); }

.ez-adminwarn {
    max-width: 470px;
    margin: 20px auto 0;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .08);
    border: 1px dashed rgba(252, 216, 201, .45);
    border-radius: 12px;
    font-size: 13.5px;
    color: var(--ez-blush);
    text-align: center;
}
.ez-adminwarn a { color: #fff; font-weight: 600; }

/* ── FAQ ───────────────────────────────────────────────── */
.ez-faq__list { display: grid; gap: 10px; }

.ez-faq__item {
    background: var(--ez-white);
    border: 1px solid var(--ez-line);
    border-radius: var(--ez-radius);
    overflow: hidden;
}
.ez-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16.5px;
    color: var(--ez-ink);
    list-style: none;
}
.ez-faq__item summary::-webkit-details-marker { display: none; }
.ez-faq__item[open] summary { padding-bottom: 12px; }

.ez-faq__sign { flex: 0 0 auto; position: relative; width: 20px; height: 20px; }
.ez-faq__sign::before,
.ez-faq__sign::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--ez-accent);
    transform: translate(-50%, -50%);
    transition: opacity .2s ease;
}
.ez-faq__sign::before { width: 14px; height: 2px; }
.ez-faq__sign::after { width: 2px; height: 14px; }
.ez-faq__item[open] .ez-faq__sign::after { opacity: 0; }

.ez-faq__answer { padding: 0 24px 22px; }
.ez-faq__answer p { margin: 0; color: var(--ez-muted); font-size: 16px; }

/* ── Pied de page ──────────────────────────────────────── */
.ez-footer {
    background: var(--ez-deep-2);
    color: #9b8f85;
    padding: 44px 0;
    text-align: center;
    font-size: 14px;
}
.ez-footer__brand { color: #fff; font-weight: 600; margin: 0 0 12px; }
.ez-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-bottom: 14px;
}
.ez-footer__links a { text-decoration: none; opacity: .85; }
.ez-footer__links a:hover { opacity: 1; text-decoration: underline; }
.ez-footer__copy { margin: 0; opacity: .6; font-size: 13px; }

/* ── Barre CTA collante ────────────────────────────────── */
.ez-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: rgba(14, 12, 11, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(252, 216, 201, .16);
    padding: 12px 0;
    transform: translateY(110%);
    transition: transform .3s ease;
}
.ez-sticky[hidden] { display: block; }
.ez-sticky.is-visible { transform: translateY(0); }

.ez-sticky__inner {
    max-width: var(--ez-wrap);
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.ez-sticky__text { color: #fff; line-height: 1.3; min-width: 0; }
.ez-sticky__text strong { display: block; font-size: 15px; }
.ez-sticky__meta { font-size: 13px; color: #b3a79d; }
.ez-sticky__price { font-weight: inherit; }

/* La mascotte et le bouton forment un bloc : la barre les garde ensemble à
   droite au lieu de les écarter, et la mascotte reste « à côté du bouton »
   quelle que soit la largeur de l'écran. */
.ez-sticky__action {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* Elle a les pieds posés sur le plancher de la barre, et le corps qui monte.
   S'aligner sur le bas (et non sur le haut) est ce qui compte : la barre
   grandit dès que son titre passe à deux lignes, et une mascotte accrochée au
   haut se retrouvait alors suspendue au-dessus de vingt pixels de barre vide,
   le texte de la page visible derrière elle. Accrochée au bas, elle reste
   posée quelle que soit la hauteur.

   La marge haute négative vaut presque toute sa hauteur : sa boîte ne mesure
   plus que quelques pixels, la barre garde donc exactement la même hauteur
   qu'avant — sinon toute la page se décalerait pour un canard. */
.ez-sticky__mascot {
    flex: 0 0 auto;
    align-self: flex-end;
    height: var(--ez-mascotte, 84px);
    margin-top: calc(8px - var(--ez-mascotte, 84px));
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}
.ez-sticky__mascot,
.ez-sticky__mascot picture,
.ez-sticky__mascot img {
    display: block;
    height: 100%;
    width: auto;
}
.ez-sticky__mascot { height: var(--ez-mascotte, 84px); }

/* Elle arrive avec la barre — un petit saut — puis se balance doucement. */
.ez-sticky.is-visible .ez-sticky__mascot {
    animation: ez-mascotte-arrive .55s cubic-bezier(.34, 1.56, .64, 1) both,
               ez-mascotte-balance 3.4s ease-in-out .55s infinite;
}
@keyframes ez-mascotte-arrive {
    from { transform: translateY(26px) scale(.82); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes ez-mascotte-balance {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-4px) rotate(-2.5deg); }
}

body.ez-lp--has-sticky .ez-footer { padding-bottom: 92px; }

/* ── Apparition au scroll ──────────────────────────────── */
.ez-js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--ez-delay, 0ms);
}
.ez-js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ez-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
    :root { --ez-section-y: 88px; --ez-cta-gap: 48px; }

    .ez-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .ez-hero__inner { grid-template-columns: 1.15fr .85fr; gap: 32px; }
    .ez-bubble { max-width: 244px; bottom: 24px; }
    .ez-videosec__inner { gap: 44px; }
    .ez-about__inner { gap: 44px; }
}

@media (max-width: 880px) {
    :root { --ez-section-y: 72px; --ez-block-gap: 36px; --ez-cta-gap: 44px; }

    body.ez-lp { font-size: 16px; }

    .ez-hero__inner { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 44px; }
    .ez-hero__portrait { display: flex; align-items: flex-end; gap: 18px; }
    .ez-hero__portrait-img { max-width: 168px; margin: 0; }
    .ez-bubble { position: static; max-width: none; flex: 1; }

    .ez-trust { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }

    .ez-grid--2, .ez-grid--3 { grid-template-columns: 1fr; }

    .ez-videosec__inner,
    .ez-videosec--reverse .ez-videosec__inner { grid-template-columns: 1fr; gap: 32px; }
    .ez-videosec--reverse .ez-videosec__text { order: 0; }
    .ez-video { max-width: 320px; }

    .ez-about__inner { grid-template-columns: 1fr; gap: 36px; }
    .ez-about__media { max-width: 400px; }
    .ez-about__side { right: -10px; width: 42%; }
}

@media (max-width: 560px) {
    :root { --ez-section-y: 60px; --ez-block-gap: 30px; --ez-cta-gap: 38px; }

    .ez-wrap { padding: 0 20px; }

    .ez-hero__title { font-size: clamp(34px, 10vw, 46px); }
    .ez-hero__sub { font-size: 17px; margin-bottom: 30px; }
    .ez-hero__actions { flex-direction: column; align-items: stretch; }
    .ez-hero__actions .ez-btn { width: 100%; }
    .ez-link-quiet { text-align: center; }

    .ez-hero__portrait { flex-direction: column; align-items: center; gap: 12px; }
    .ez-hero__portrait-img { max-width: 148px; }

    .ez-grid--4 { grid-template-columns: 1fr; }
    /* Avec un nombre impair d'éléments, deux colonnes laissent le dernier
       tout seul : on empile pour rester équilibré quel que soit le compte. */
    .ez-trust { grid-template-columns: 1fr; padding: 18px 14px; gap: 14px; }
    .ez-trust strong { font-size: 21px; }

    .ez-card { padding: 24px 22px; }
    .ez-pricecard { padding: 32px 24px; }
    .ez-pricecard__amount { font-size: 62px; }

    .ez-quote { padding: 34px 24px 26px; }
    .ez-quote blockquote { font-size: 18px; }

    .ez-notfor { padding: 22px 22px; }
    .ez-about__side { position: static; width: 100%; margin-top: 14px; border-width: 0; }

    /* Sur un téléphone, la barre ne peut pas tout dire. Le titre du produit
       part le premier : le visiteur est sur la page de ce produit, son nom ne
       lui apprend rien. Le prix, lui, reste — et sur une seule ligne, quelle
       que soit la largeur, ce qui fixe une bonne fois la hauteur de la barre.
       Sans cela, la mascotte prenait assez de place pour faire passer le titre
       à trois lignes, et la barre mangeait cent pixels d'écran. */
    .ez-sticky__text strong { display: none; }
    .ez-sticky__extra { display: none; }
    .ez-sticky__meta { font-size: 17px; font-weight: 700; color: #fff; }
    .ez-sticky__inner { padding: 0 18px; gap: 12px; }
    .ez-sticky__action { gap: 8px; }
    .ez-sticky__mascot { --ez-mascotte: 68px; }
}

/* ── Galerie produit ───────────────────────────────────── */
.ez-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: var(--ez-block-gap);
}
.ez-gallery__grid li { margin: 0; }
.ez-gallery__grid picture {
    display: block;
    border-radius: var(--ez-radius);
    overflow: hidden;
    box-shadow: var(--ez-shadow);
    background: var(--ez-blush-soft);
}
.ez-gallery__grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.ez-gallery__grid p {
    margin: 10px 2px 0;
    font-size: 14px;
    color: var(--ez-muted);
    text-align: center;
}

@media (max-width: 880px) {
    .ez-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
    .ez-gallery__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ── Option payante dans la carte prix ─────────────────── */
.ez-upsell { margin: 0 0 4px; }

.ez-upsell__box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--ez-line);
    border-radius: var(--ez-radius);
    background: var(--ez-cream);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.ez-upsell__box:hover { border-color: var(--ez-accent); }
.ez-upsell__box:has(input:checked) {
    border-color: var(--ez-ink);
    background: var(--ez-blush-soft);
}

.ez-upsell__box input {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin: 2px 0 0;
    accent-color: var(--ez-ink);
    cursor: pointer;
}

.ez-upsell__text { flex: 1; display: block; }
.ez-upsell__text strong {
    display: block;
    font-size: 15.5px;
    color: var(--ez-ink);
    line-height: 1.35;
}
.ez-upsell__text span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--ez-muted);
    line-height: 1.45;
}

.ez-upsell__price {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 15.5px;
    color: var(--ez-accent);
    white-space: nowrap;
}

/* Le bouton du formulaire est un <button> : on neutralise le style natif. */
.ez-upsell .ez-btn {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
}

@media (max-width: 560px) {
    .ez-upsell__box { padding: 14px; gap: 10px; }
    .ez-upsell__text strong { font-size: 15px; }
}

/* ── Acceptation des CGV ─────────────────────────────────────────── */
.ez-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    margin-bottom: 18px;
    cursor: pointer;
}

.ez-consent input {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin: 1px 0 0;
    accent-color: var(--ez-ink);
    cursor: pointer;
}

.ez-consent__text {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ez-muted);
}
.ez-consent__text a {
    color: var(--ez-ink);
    text-decoration: underline;
}
.ez-consent__text strong { color: var(--ez-ink); }

/* ═══════════ APERÇU DU PRODUIT (sous le hero) ═══════════ */
/* Des photos posées de travers, pas une grille : la page vend un livre de
   jeux pour enfants, et l'alignement au cordeau n'en dit rien. */
.ez-peek { padding-top: 72px; padding-bottom: 72px; }

.ez-peek__title {
    margin: 0 0 32px;
    text-align: center;
    font-family: var(--ez-font-display);
    font-weight: 600;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.25;
}

.ez-peek__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 3vw, 34px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ez-peek__row--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.ez-peek__row--2 { grid-template-columns: repeat(2, 1fr); }
.ez-peek__row--4 { grid-template-columns: repeat(4, 1fr); }

.ez-peek__item { margin: 0; }

/* Le cadre porte l'inclinaison et la dérive ; l'élément de liste garde son
   transform d'apparition, sinon l'un écraserait l'autre. */
.ez-peek__frame {
    display: block;
    padding: 10px 10px 14px;
    background: var(--ez-white);
    border-radius: 14px;
    box-shadow: var(--ez-shadow);
    transform: translateY(var(--ez-shift, 0px)) rotate(var(--ez-tilt, 0deg));
    transition: transform .35s ease, box-shadow .35s ease;
    will-change: transform;
}
.ez-peek__frame img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background: var(--ez-blush-soft);
}
.ez-peek__item:hover .ez-peek__frame {
    transform: translateY(calc(var(--ez-shift, 0px) - 6px)) rotate(0deg) scale(1.02);
    box-shadow: var(--ez-shadow-lg);
}

.ez-peek__note {
    margin: 30px 0 0;
    text-align: center;
    font-size: 15px;
    color: var(--ez-muted);
}
.ez-peek__note a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ez-peek__note a:hover { color: var(--ez-accent); }

@media (max-width: 640px) {
    .ez-peek { padding-top: 52px; padding-bottom: 52px; }
    /* Trois vignettes côte à côte deviennent illisibles : la première passe
       en grand, les deux autres restent dessous. */
    .ez-peek__row--3 { grid-template-columns: repeat(2, 1fr); }
    .ez-peek__row--3 .ez-peek__item:first-child { grid-column: 1 / -1; }
    .ez-peek__row--3 .ez-peek__item:first-child .ez-peek__frame img { aspect-ratio: 4 / 3; }
    .ez-peek__row--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════ IMAGES BALADEUSES ═══════════ */
/* Elles vivent dans les marges et dérivent au défilement. Le conteneur couvre
   toute la hauteur du document et masque ce qui dépasse : aucune barre de
   défilement horizontale ne peut apparaître à cause d'elles. */
.ez-floaters {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.ez-floater {
    position: absolute;
    top: var(--ez-top, 30%);
    /* Jamais plus large que la marge disponible : au-delà, l'image mordrait
       sur la colonne de texte. C'est la largeur voulue qui cède, pas la
       lisibilité. */
    width: min(var(--ez-size, 130px), calc((100vw - var(--ez-wrap)) / 2 + 28px));
    transform: translateY(var(--ez-shift, 0px));
    will-change: transform;
}
.ez-floater--left  { left: 0; }
.ez-floater--right { right: 0; }

.ez-floater__inner {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--ez-shadow-lg);
    transform: rotate(var(--ez-tilt, -6deg));
    animation: ez-bob 9s ease-in-out infinite;
}
.ez-floater--left .ez-floater__inner { animation-delay: -4.5s; }
.ez-floater__inner img { display: block; width: 100%; height: auto; }

@keyframes ez-bob {
    0%, 100% { transform: rotate(var(--ez-tilt, -6deg)) translateY(0); }
    50%      { transform: rotate(calc(var(--ez-tilt, -6deg) * .45)) translateY(-12px); }
}

/* Sous 1240 px, la marge restante ne ferait plus qu'une vignette de 68 px :
   il n'y a plus rien à y montrer. On les retire, et l'aperçu et la galerie
   portent seuls le mouvement. */
@media (max-width: 1239px) {
    .ez-floaters { display: none; }
}

/* Le mouvement au défilement est un agrément, jamais une condition de
   lecture : qui demande moins d'animations n'en reçoit aucune. */
@media (prefers-reduced-motion: reduce) {
    .ez-peek__frame,
    .ez-floater { transform: rotate(var(--ez-tilt, 0deg)); transition: none; }
    .ez-floater { transform: none; }
    .ez-floater__inner { animation: none; }
    .ez-peek__item:hover .ez-peek__frame { transform: rotate(var(--ez-tilt, 0deg)); }

    /* La mascotte reste là, simplement immobile : la faire disparaître
       priverait le visiteur d'une image, alors qu'il n'a demandé qu'à ne pas
       être remué. */
    .ez-sticky.is-visible .ez-sticky__mascot { animation: none; }
}

/* ── La visionneuse ────────────────────────────────────
   Les photos du produit s'ouvrent en grand. La vignette est un vrai lien
   vers le fichier : sans JavaScript le clic ouvre l'image, ce qui reste
   utile. Tout ce qui suit n'habille que le cas où le script est là. */

.ez-zoom {
    display: block;
    position: relative;
    cursor: zoom-in;
    /* Le lien ne doit rien ajouter à la mise en page : il occupe exactement
       la place que l'image occupait avant qu'on l'entoure. La hauteur de ligne
       nulle supprime l'espace que le navigateur réserve sous une image en
       ligne — deux pixels qui décaleraient tout ce qui suit. */
    line-height: 0;
}
/* Pas de découpe sur le lien : les photos portent une ombre portée, et un
   overflow:hidden l'aurait rognée. Ce sont les images qui reprennent l'arrondi
   du lien. */
.ez-zoom > img,
.ez-zoom > picture,
.ez-zoom > picture > img { display: block; width: 100%; height: auto; border-radius: inherit; }

.ez-zoom__loupe {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(14, 12, 11, .62);
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .18s ease, transform .18s ease;
}
.ez-zoom__loupe svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; }
.ez-zoom:hover .ez-zoom__loupe,
.ez-zoom:focus-visible .ez-zoom__loupe { opacity: 1; transform: scale(1); }
/* Sur un écran tactile il n'y a pas de survol : la loupe reste visible,
   sinon rien n'indique que la photo s'ouvre. */
@media (hover: none) {
    .ez-zoom__loupe { opacity: 1; transform: scale(1); }
}
.ez-zoom:focus-visible { outline: 3px solid var(--ez-blush); outline-offset: 3px; }

.ez-vision {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 56px 16px 72px;
}
.ez-vision[hidden] { display: none; }
.ez-vision__fond { position: absolute; inset: 0; background: rgba(10, 9, 8, .965); }

.ez-vision__cadre {
    position: relative;
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: ez-vision-entree .22s ease-out;
}
.ez-vision--sans-mouvement .ez-vision__cadre { animation: none; }
@keyframes ez-vision-entree {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}
.ez-vision__img {
    max-width: 100%;
    /* Le cadre laisse la place aux boutons du haut et au compteur du bas :
       sans cette borne, une photo verticale les recouvre. */
    max-height: calc(100vh - 160px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
}
.ez-vision__legende {
    color: #e8dcd3;
    font-size: 15px;
    text-align: center;
    max-width: 70ch;
    margin: 0;
}
.ez-vision__legende[hidden] { display: none; }

.ez-vision__btn {
    position: absolute;
    z-index: 1;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.ez-vision__btn[hidden] { display: none; }
.ez-vision__btn:hover { background: rgba(255, 255, 255, .22); }
.ez-vision__btn:focus-visible { outline: 3px solid var(--ez-blush); outline-offset: 2px; }
.ez-vision__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ez-vision__btn--fermer { top: 12px; right: 12px; }
.ez-vision__btn--prec { left: 12px; top: 50%; margin-top: -23px; }
.ez-vision__btn--suiv { right: 12px; top: 50%; margin-top: -23px; }

.ez-vision__compte {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: #b3a79d;
    font-size: 14px;
    letter-spacing: .08em;
}

/* La page ne défile plus derrière la visionneuse : sur un téléphone, faire
   glisser la photo emmenait la page avec elle. */
html.ez-vision-ouverte,
html.ez-vision-ouverte body { overflow: hidden; }

@media (max-width: 767px) {
    .ez-vision { padding: 52px 10px 64px; }
    .ez-vision__img { max-height: calc(100vh - 140px); }
    .ez-vision__btn { width: 42px; height: 42px; }
    .ez-vision__btn--prec { left: 6px; }
    .ez-vision__btn--suiv { right: 6px; }
}

/* ── Bandes produit ────────────────────────────────────
   Elles se glissent entre deux sections pour qu'on ne traverse jamais la
   page sans revoir l'objet qu'on vend. */
.ez-showcase {
    background: var(--ez-cream);
    padding: 8px 0 var(--ez-section-y);
}
/* Deux bandes de suite, ou une bande juste après une section de même fond :
   on ne veut pas d'un double espacement qui ferait croire à un trou. */
.ez-section--cream + .ez-showcase { padding-top: 0; }
.ez-showcase + .ez-section--cream { padding-top: 0; }

.ez-showcase__titre {
    margin: 0 0 20px;
    text-align: center;
    font-family: var(--ez-font-display);
    font-size: 26px;
    color: var(--ez-ink);
}
.ez-showcase__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(var(--ez-showcase-n, 3), 1fr);
}
.ez-showcase--1 { --ez-showcase-n: 1; }
.ez-showcase--2 { --ez-showcase-n: 2; }
.ez-showcase--3 { --ez-showcase-n: 3; }
.ez-showcase--1 .ez-showcase__row { max-width: 720px; margin: 0 auto; }

.ez-showcase__row .ez-zoom {
    border-radius: var(--ez-radius);
    box-shadow: var(--ez-shadow);
}
.ez-showcase__row .ez-zoom > img,
.ez-showcase__row .ez-zoom > picture > img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.ez-showcase--1 .ez-zoom > img,
.ez-showcase--1 .ez-zoom > picture > img { aspect-ratio: 16 / 10; }

.ez-showcase__legende {
    margin: 10px 2px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ez-muted);
}

@media (max-width: 767px) {
    /* Sur un téléphone, trois photos côte à côte ne montrent plus rien. La
       première passe en grand — c'est elle qu'on regarde — et les suivantes
       restent côte à côte dessous, comme dans l'aperçu du haut de page. */
    .ez-showcase__row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ez-showcase--3 .ez-showcase__row > li:first-child,
    .ez-showcase--1 .ez-showcase__row > li:first-child { grid-column: 1 / -1; }
    .ez-showcase__titre { font-size: 22px; }
    .ez-showcase__legende { font-size: 13px; }
}

/* ── Suppléments : la vignette d'un article, pas une case à cocher ──
   Un supplément se propose comme on présente un produit — une image, un nom,
   une phrase. Une ligne de texte à cocher se lit comme une formalité ; une
   vignette se regarde. */
.ez-bump__titre {
    margin: 22px 0 10px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ez-muted);
}

.ez-bump {
    align-items: center;
    /* Le trait discontinu distingue le supplément de l'article principal :
       on voit d'un coup d'œil que c'est un ajout, pas ce qu'on est venu
       acheter. */
    border-style: dashed;
}
.ez-bump:has(input:checked) { border-style: solid; }

.ez-bump__visuel {
    position: relative;
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}
.ez-bump__img {
    display: block;
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--ez-cream);
}

/* La loupe reste visible en permanence, sans attendre le survol : sur cette
   vignette le survol veut déjà dire « je vais cocher », et deux intentions
   pour un même geste ne s'apprennent pas. */
.ez-bump__loupe {
    right: 4px;
    bottom: 4px;
    width: 26px;
    height: 26px;
    opacity: 1;
    transform: none;
}
.ez-bump__loupe svg { width: 14px; height: 14px; }
.ez-bump__loupe:hover { background: rgba(14, 12, 11, .82); }
.ez-bump__loupe:focus-visible { outline: 3px solid var(--ez-accent); outline-offset: 2px; }

@media (max-width: 767px) {
    /* L'image passe en bandeau : à 74 px de côté plus une description, il ne
       reste pas assez de largeur pour que la phrase reste lisible. */
    .ez-bump { flex-wrap: wrap; row-gap: 12px; align-items: flex-start; }
    .ez-bump__visuel { width: 100%; order: -1; }
    .ez-bump__img { width: 100%; height: 132px; }
    .ez-bump__loupe { right: 8px; bottom: 8px; width: 32px; height: 32px; }
    .ez-bump__loupe svg { width: 16px; height: 16px; }
    .ez-bump .ez-upsell__text { flex: 1 1 60%; }
}

/* ═══════════ CANDIDATURE ═══════════ */
/* Le formulaire qui remplace le bouton d'achat quand on veut parler avant de
   vendre. Il est long — c'est voulu, il trie — donc il doit rester lisible :
   une question par ligne, beaucoup d'air, et jamais deux colonnes. */
.ez-apply__intro {
    margin: 0 auto var(--ez-block-gap);
    max-width: 640px;
    text-align: center;
    color: var(--ez-text);
}
.ez-apply__intro p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; }
.ez-apply__intro p:last-child { margin-bottom: 0; }

/* Les trois temps de l'appel : ce n'est pas un encadré d'avertissement, mais
   ce n'est pas non plus du texte courant — c'est une promesse en trois
   points, et on doit pouvoir la parcourir sans la lire. */
.ez-apply__steps {
    margin: 0 auto 32px;
    max-width: 640px;
    color: var(--ez-text);
}
.ez-apply__steps-title {
    margin: 0 0 12px;
    font-weight: 600;
    font-size: 16px;
    color: var(--ez-ink);
}
.ez-apply__steps ul { margin: 0; padding: 0; list-style: none; }
.ez-apply__steps li {
    position: relative;
    margin: 0 0 12px;
    padding-left: 22px;
    font-size: 15.5px;
    line-height: 1.6;
}
.ez-apply__steps li:last-child { margin-bottom: 0; }
.ez-apply__steps li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ez-accent);
}
.ez-apply__steps strong { color: var(--ez-ink); }

.ez-apply__notice {
    margin: 0 auto 36px;
    max-width: 640px;
    padding: 20px 24px;
    background: var(--ez-blush-soft);
    border-left: 4px solid var(--ez-accent);
    border-radius: var(--ez-radius);
    color: var(--ez-text);
}
.ez-apply__notice p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; }
.ez-apply__notice p:last-child { margin-bottom: 0; }

.ez-apply__form {
    margin: 0 auto;
    max-width: 640px;
    padding: 32px;
    background: var(--ez-white);
    border-radius: var(--ez-radius-lg);
    box-shadow: var(--ez-shadow);
}

/* Le piège à robots. Hors de l'écran, mais toujours dans le document : un
   automate qui lit le HTML le remplit, un humain ne le rencontre jamais —
   ni à l'œil, ni à la tabulation, ni au lecteur d'écran. */
.ez-apply__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ez-field {
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    text-align: left;
}
.ez-field:last-of-type { margin-bottom: 20px; }

.ez-field__label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.45;
    color: var(--ez-ink);
}
.ez-field__req { color: var(--ez-accent); }

.ez-field__help {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ez-muted);
}

.ez-field__input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;   /* sous 16px, Safari iOS zoome à la mise au point */
    color: var(--ez-ink);
    background: var(--ez-cream);
    border: 1px solid var(--ez-line);
    border-radius: var(--ez-radius);
}
.ez-field__input:focus-visible {
    outline: 2px solid var(--ez-accent);
    outline-offset: 1px;
    background: var(--ez-white);
}
textarea.ez-field__input { resize: vertical; min-height: 110px; }

.ez-field__choices { display: grid; gap: 8px; }

.ez-choice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 14px;
    background: var(--ez-cream);
    border: 1px solid var(--ez-line);
    border-radius: var(--ez-radius);
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--ez-text);
    cursor: pointer;
}
.ez-choice input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--ez-accent);
    cursor: pointer;
}
.ez-choice:has(input:checked) {
    border-color: var(--ez-accent);
    background: var(--ez-blush-soft);
}

.ez-field--error .ez-field__input,
.ez-field--error .ez-choice { border-color: #b3261e; }

.ez-field__err {
    margin: 7px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: #8c1d18;
}

/* La case de consentement vit aussi dans la carte prix, sur fond sombre.
   Ici elle est sur fond blanc : on rétablit une couleur lisible sans
   toucher à l'autre emploi. */
.ez-apply__form .ez-consent__text { color: var(--ez-text); }

.ez-apply__note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ez-muted);
}

.ez-apply__done {
    margin: 0 auto;
    max-width: 640px;
    padding: 32px;
    background: var(--ez-white);
    border-radius: var(--ez-radius-lg);
    box-shadow: var(--ez-shadow);
    text-align: center;
    color: var(--ez-text);
}
.ez-apply__done p { margin: 0 0 12px; font-size: 17px; line-height: 1.65; }
.ez-apply__done p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .ez-apply__form,
    .ez-apply__done { padding: 24px 18px; }
    .ez-apply__notice { padding: 18px; }
}