/**
 * DJ — formulaire de capture des audios offerts
 * @version 1.2.2 — cache-buster : DJ_OFFERT_VERSION (includes/dj-offert.php), à bumper à CHAQUE retouche.
 *
 * Deux rendus : la page de capture (.dj-offert, deux cartes entières) et le rendu COMPACT
 * (.dj-offert-compact) pour l'accueil et le bas des articles ; l'encart « audio offert »
 * (.dj-offert-encart) des articles et du tableau de bord mon-compte.
 * La pastille dorée « Offert » n'est PAS habillée ici : ses classes .dj-badge-offert et
 * .dj-etiquette-qualite vivent dans css/dj-header.css, feuille enfilée sur tout le front.
 * .off-lbl-cache : les étiquettes sortent de l'écran sans sortir de l'arbre d'accessibilité.
 *
 * ⚠️ style.css impose à TOUS les <label> du site « uppercase · 11px · 700 · couleur délavée
 * !important », et la déclinaison Divi de la règle sort avec le préfixe à ID
 * .et-db #et-boc .et-l — or chaque carte de volet EST un label. Parade : même préfixe
 * + nos classes + !important (même combat que dj-panier-checkout.css).
 *
 * Deux familles de classes :
 *   .dj-offert …  : le bloc rendu par le shortcode [dj_offert_form]
 * .off-… : les classes d'appoint posées sur les modules Divi de la page
 * (eyebrow, H1, intro, étapes, pied).
 *
 * Tokens : ceux du :root de style.css. Le doré reprend le dégradé « PRIX — DORÉ GLOBAL »
 * de style.css (mêmes littéraux, par cohérence).
 */

/* ==========================================================================
   Le bloc du shortcode
   ========================================================================== */

.dj-offert {
    margin: 0 0 20px;
}

/* wpautop glisse des <p> vides autour des shortcodes dans les modules Divi. */
.dj-offert p:empty {
    display: none;
}

/* --- Choix des volets ----------------------------------------------------- */

.dj-offert .off-volets {
    display: flex;
    gap: 20px;
    margin-bottom: 34px;
}

/* La carte est un <label> : rendre casse, taille et graisse que la règle
   globale des labels écrase (voir l'en-tête, point 1). Les enfants en em
   se recalculent sur ces 16px. */
html body .dj-offert .off-volet,
.et-db #et-boc .et-l .dj-offert .off-volet {
    font-size: 16px !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.dj-offert .off-volet {
    flex: 1 1 0;
    display: block;
    padding: 26px 24px 22px;
    background: linear-gradient(135deg, var(--dj-fond-clair) 0%, #ffffff 100%);
    border: 1px solid var(--dj-bordure);
    cursor: pointer;
    transition: var(--dj-transition);
    position: relative;
}

.dj-offert .off-volet:hover {
    box-shadow: 0 15px 40px rgba(216, 153, 153, 0.15);
    transform: translateY(-2px);
}

.dj-offert .off-volet.choisi {
    border-color: var(--dj-rose-vif);
    box-shadow: 0 8px 25px rgba(216, 153, 153, 0.22);
}

/* La vraie case radio est retirée de l'écran, la carte entière la pilote. */
.dj-offert .off-volet-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Clavier : l'anneau de focus se pose sur la carte, pas sur la case invisible. */
.dj-offert .off-volet:has(.off-volet-radio:focus-visible) {
    outline: 2px solid var(--dj-rose-vif);
    outline-offset: 2px;
}

/* La coche reprend la case à cocher dorée du site (« Doré Luxe »,
   style.css:765-836) : 22px, angles vifs, cochée = dégradé doré + ✓ blanc. */
.dj-offert .off-volet .coche {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 22px;
    height: 22px;
    background: #ffffff;
    border: 2px solid var(--dj-bordure);
    border-radius: 0;
    transition: var(--dj-transition);
}

.dj-offert .off-volet:hover .coche {
    border-color: #C9A87C;
    box-shadow: 0 3px 10px rgba(201, 168, 124, 0.3);
}

.dj-offert .off-volet.choisi .coche {
    background: linear-gradient(135deg, #C9A87C 0%, #B8956A 50%, #D4A574 100%);
    border-color: #C9A87C;
    box-shadow: 0 3px 10px rgba(201, 168, 124, 0.4);
}

.dj-offert .off-volet.choisi .coche::before {
    content: '✓';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    font-family: sans-serif;
    line-height: 1;
}

.dj-offert .off-volet-titre {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.28em;
    margin: 0 0 10px;
    color: var(--dj-rose-principal);
    padding-right: 30px;
}

.dj-offert .off-volet-texte {
    display: block;
    margin: 0 0 18px;
    font-size: 0.95em;
    color: var(--dj-texte-moyen);
}

.dj-offert .off-extrait {
    display: block;
}

/* --- Rendu compact : accueil et bas d'article ------------------------------
   Le bloc se suffit à lui-même. Les volets tiennent sur une ligne, sans texte
   de description, et un seul lecteur est visible à la fois.
   -------------------------------------------------------------------------- */

/* La ligne d'ouverture : la pastille dorée, puis la durée. Seules règles
   nouvelles du lot — la pastille tient tout son style de dj-header.css. */
.dj-offert-compact .off-compact-kicker {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.dj-offert-compact .off-compact-kicker .off-duree {
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dj-texte-clair);
}

/* Titre en <p> et non en <h2> : le bloc s'imprime au bas de CHAQUE article,
   un h2 identique 18 fois entrerait dans le plan de chaque page. */
.dj-offert-compact .off-compact-titre {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.95em;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--dj-rose-principal);
}

.dj-offert-compact .off-compact-intro {
    margin: 0 0 26px;
    font-size: 1em;
    max-width: 62ch;
}

.dj-offert-compact .off-volets {
    gap: 14px;
    margin-bottom: 18px;
}

.dj-offert-compact .off-volet {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
}

/* 🔴 La coche repasse dans le flux, à gauche. Elle DOIT garder un position
   non-static : son ✓ est un ::before en position absolue qui se cale sur
   elle. En position:static, il se calerait sur la carte entière et sortirait
   du carré doré. */
.dj-offert-compact .off-volet .coche {
    position: relative;
    top: auto;
    right: auto;
    flex: 0 0 22px;
}

.dj-offert-compact .off-volet-titre {
    margin: 0;
    padding-right: 0;
    font-size: 1.12em;
}

.dj-offert-compact .off-extraits {
    margin: 0 0 30px;
}

/* L'extrait du volet non coché est retiré par l'attribut hidden (js). */
.dj-offert-compact .off-extraits .off-extrait[hidden] {
    display: none;
}


/* --- Formulaire ------------------------------------------------------------ */

.dj-offert .off-form {
    background: var(--dj-fond-secondaire);
    padding: 32px 28px;
    text-align: center;
    margin: 0;
}

.dj-offert .off-form label {
    display: block;
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dj-texte-moyen);
    margin-bottom: 10px;
}

.dj-offert .off-form .champs {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}

.dj-offert .off-form input[type="email"],
.dj-offert .off-form input[type="text"]:not(.off-hp) {
    padding: 14px 16px;
    border: 1px solid var(--dj-bordure);
    background: #ffffff;
    font-family: 'Lora', Georgia, serif;
    font-size: 1em;
    color: var(--dj-texte-fonce);
    border-radius: 0;
    min-width: 0;
}

/* Les trois éléments GRANDISSENT, avec des poids différents : la ligne est
   toujours remplie, quelle que soit la largeur du bloc, et l'email reste le
   champ le plus large. Quand la place manque, le bouton passe à la ligne et
   prend toute la largeur au lieu de laisser un vide à droite.
   ⛔ Ne pas remettre de max-width ni de justify-content:center ici : c'est
 exactement ce que l'exploitante a fait retirer. */
.dj-offert .off-form input[type="text"]:not(.off-hp) {
    flex: 1 1 160px;
}

.dj-offert .off-form input[type="email"] {
    flex: 2 1 200px;
}

.dj-offert .off-form input[type="email"]:focus,
.dj-offert .off-form input[type="text"]:not(.off-hp):focus {
    outline: 2px solid var(--dj-rose-vif);
    outline-offset: 1px;
}

/* Étiquettes hors écran : lues par les lecteurs d'écran, jamais affichées.
   ⛔ Jamais display:none ni visibility:hidden — elles disparaîtraient aussi
   de l'arbre d'accessibilité, et les trois champs n'auraient plus de nom. */
.dj-offert .off-lbl-cache {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    margin: 0;
}

/* Même dégradé que les prix et boutons dorés du site (style.css). */
.dj-offert .off-cta {
    display: inline-block;
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 14px 34px;
    background: linear-gradient(135deg, #C9A87C 0%, #B8956A 50%, #D4A574 100%);
    color: #ffffff;
    border: 0;
    border-radius: 0;
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: 1.02em;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--dj-transition);
}

.dj-offert .off-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(184, 149, 106, 0.4);
}

.dj-offert .off-cta:focus-visible {
    outline: 2px solid #B8956A;
    outline-offset: 2px;
}

.dj-offert .off-cta[disabled] {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Champ leurre : hors écran, jamais display:none (les robots le testent). */
.dj-offert .off-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.dj-offert .off-form .reassurance {
    margin: 14px 0 0;
    font-size: 0.86em;
    color: var(--dj-texte-clair);
}

.dj-offert .off-message {
    margin: 14px 0 0;
    font-size: 0.98em;
    display: none;
}

.dj-offert .off-message.visible {
    display: block;
}

.dj-offert .off-message.succes {
    color: var(--dj-rose-principal);
    font-weight: 600;
}

.dj-offert .off-message.erreur {
    color: #A05252;
}

/* L'inscription faite, le formulaire s'efface au profit du message. */
.dj-offert .off-form.envoye .champs,
.dj-offert .off-form.envoye label,
.dj-offert .off-form.envoye .reassurance {
    display: none;
}

/* ==========================================================================
 Classes d'appoint pour les modules Divi de la page (maquette)
   ========================================================================== */

.off-eyebrow {
    font-size: 0.78em;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #B8956A;
    text-align: center;
}

.off-h1 h1,
h1.off-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    line-height: 1.18;
    text-align: center;
    background: linear-gradient(135deg, var(--dj-rose-vif) 0%, var(--dj-rose-principal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.off-intro {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.06em;
    color: var(--dj-texte-moyen);
}

.off-titre-section h2,
h2.off-titre-section {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.4em;
    color: var(--dj-rose-principal);
}

.off-etapes {
    display: flex;
    gap: 20px;
}

.off-etape {
    flex: 1 1 0;
}

/* Tailles en px + !important : dans un module texte Divi, les em se calculent
   sur la taille du module et les réglages Divi arbitrent avec un préfixe à ID.
 Valeurs demandées en test. */
.off-etape .numero {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 34px !important;
    color: #B8956A;
    margin-bottom: 6px;
}

.off-etape h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 18px !important;
    margin: 0 0 6px;
    color: var(--dj-texte-fonce);
}

.off-etape p {
    margin: 0;
    font-size: 15px !important;
    color: var(--dj-texte-moyen);
}

/* Le filet court sur toute la rangée ; seul le TEXTE est bridé à 70ch
. */
.off-pied {
    border-top: 1px solid var(--dj-bordure);
    padding-top: 22px;
    font-size: 0.88em;
    color: var(--dj-texte-clair);
}

.off-pied p {
    max-width: 70ch;
    margin: 0;
}

/* ==========================================================================
   L'encart « audio offert » (guides drains + tableau de bord mon-compte)
 Maquette validée : patron benefit-item, signé DORÉ.
   ========================================================================== */

.dj-offert-encart {
    margin: 34px 0;
    padding: 26px 28px;
    background: linear-gradient(135deg, var(--dj-fond-clair) 0%, #ffffff 100%);
    border: 1px solid var(--dj-bordure);
    border-left: 2px solid #C9A87C;
    box-shadow: 0 8px 25px rgba(201, 168, 124, 0.10);
    transition: var(--dj-transition);
}

.dj-offert-encart:hover {
    box-shadow: 0 15px 40px rgba(201, 168, 124, 0.20);
    transform: translateY(-2px);
}

.dj-offert-encart .encart-eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #B8956A;
}

/* Couleurs du titre et du CTA en double sélecteur + !important : dans le
   corps d'un article, les styles Divi des textes et des liens sortent avec
   le préfixe à ID .et-db #et-boc .et-l (même parade que les cartes). */
html body .dj-offert-encart .encart-titre,
.et-db #et-boc .et-l .dj-offert-encart .encart-titre {
    margin: 0 0 10px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px !important;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dj-rose-principal) !important;
}

.dj-offert-encart .encart-texte {
    margin: 0 0 18px;
    font-family: 'Lora', Georgia, serif;
    font-size: 15px;
    color: var(--dj-texte-moyen);
}

html body .dj-offert-encart .encart-cta,
.et-db #et-boc .et-l .dj-offert-encart .encart-cta {
    display: inline-block;
    padding: 13px 30px;
    background: linear-gradient(135deg, #C9A87C 0%, #B8956A 50%, #D4A574 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: var(--dj-transition);
}

.dj-offert-encart .encart-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(184, 149, 106, 0.4);
}

.dj-offert-encart .encart-cta:focus-visible {
    outline: 2px solid #B8956A;
    outline-offset: 2px;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {
    .dj-offert .off-volets {
        flex-direction: column;
    }

    .dj-offert .off-form {
        padding: 26px 18px;
    }

    /* Les trois éléments s'empilent, chacun sur toute la largeur. */
    .dj-offert .off-form input[type="email"],
    .dj-offert .off-form input[type="text"]:not(.off-hp),
    .dj-offert .off-cta {
        flex: 1 1 100%;
        width: 100%;
    }

    .off-etapes {
        flex-direction: column;
        gap: 26px;
    }

    .dj-offert-encart {
        padding: 22px 18px;
    }

    html body .dj-offert-encart .encart-cta,
    .et-db #et-boc .et-l .dj-offert-encart .encart-cta {
        display: block;
        text-align: center;
    }
}