/*
Theme Name: Blocksy Child
Template: blocksy
Version: 1.0.1
Text Domain: blocksy-child
*/

/* ================================================
   FOOTER BLOCKSY — MASQUÉ (remplacé par footer custom)
   ================================================ */

#footer.ct-footer { display: none !important; }

/* ================================================
   FOOTER CUSTOM ANNESO&CO
   ================================================ */

.anneso-footer {
    background-color: #160e08;
    border-top: 1px solid rgba(200, 184, 168, 0.1);
    padding-top: 64px;
}

.anneso-footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
}

/* Colonne marque */
.anneso-footer-logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--as-cream);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.anneso-footer-logo span { color: var(--as-terra-h); }

.anneso-footer-desc {
    font-size: 0.9rem;
    color: var(--as-muted);
    line-height: 1.75;
    margin: 0;
    max-width: 280px;
}

/* Colonnes nav & contact */
.anneso-footer-heading {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--as-cream);
    margin: 0 0 20px;
}

.anneso-footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.anneso-footer-nav a,
.anneso-footer-contact a {
    font-size: 0.92rem;
    color: var(--as-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.anneso-footer-nav a:hover,
.anneso-footer-contact a:hover { color: var(--as-cream); }

.anneso-footer-contact p {
    font-size: 0.92rem;
    color: var(--as-muted);
    margin: 0 0 10px;
    line-height: 1.6;
}

.anneso-footer-contact p:last-child { margin-bottom: 0; }

/* Barre de bas */
.anneso-footer-bottom {
    border-top: 1px solid rgba(200, 184, 168, 0.08);
    padding: 20px 0;
    text-align: center;
}

.anneso-footer-bottom p {
    font-size: 0.82rem;
    color: rgba(200, 184, 168, 0.4);
    margin: 0;
}

.anneso-footer-bottom span { color: var(--as-terra-h); }

.anneso-footer-legal {
    margin-top: 8px !important;
}
.anneso-footer-legal a {
    color: rgba(200, 184, 168, 0.4);
    text-decoration: none;
    transition: color 0.2s;
}
.anneso-footer-legal a:hover {
    color: var(--as-cream);
}

/* Responsive footer — tablette */
@media (max-width: 1024px) {
    .anneso-footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
    .anneso-footer-brand { grid-column: 1 / -1; }
}

/* Responsive footer — mobile */
@media (max-width: 767px) {
    .anneso-footer-inner { grid-template-columns: 1fr; gap: 32px; }
    .anneso-footer-brand { grid-column: auto; }
    .anneso-footer-desc { max-width: 100%; }
}

/* ================================================
   ANIMATION HERO — FADE IN UP (pages custom)
   ================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Réalisations */
.real-header-inner .section-label {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.05s;
}
.real-header-inner .real-title {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.2s;
}
.real-header-inner .real-subtitle {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.35s;
}
.real-header-inner .btn-cta-anneso {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.5s;
}

/* Créations */
.creations-page-header .section-label {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.05s;
}
.creations-page-header .creations-title {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.2s;
}
.creations-page-header .creations-subtitle {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.35s;
}

/* Comment ça marche */
.ccm-header-inner .section-label {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.05s;
}
.ccm-header-inner .ccm-title {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.2s;
}
.ccm-header-inner .ccm-subtitle {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.35s;
}

/* Accueil — Hero Elementor */
.hero-text-wrap .hero-title {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.1s;
}
.hero-text-wrap .hero-accent {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.25s;
}
.hero-text-wrap .hero-subtitle {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.4s;
}
.hero-text-wrap .hero-buttons {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.55s;
}

/* Faire une demande */
.fad-header-inner .section-label {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.05s;
}
.fad-header-inner .fad-title {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.2s;
}
.fad-header-inner .fad-subtitle {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.35s;
}

/* ================================================
   HEADER — STICKY + TRANSPARENCE AU SCROLL
   ================================================ */

#header.ct-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    transition: background-color 0.3s ease !important;
}

/* position:fixed sort le header du flux du document (nécessaire pour la
   transparence sur l'accueil : le hero doit s'étendre jusqu'en haut du
   viewport, SOUS le header). Conséquence : sur toutes les autres pages
   (et implicitement partout ailleurs), il faut compenser avec un
   padding-top égal à la hauteur du header, sinon il recouvre le début
   du contenu. Ciblé sur #main (pas .ct-container-full, qui a déjà des
   !important remettant son padding à 0 sur les pages 15/792/796/17).
   Rien sur l'accueil (body.home) : c'est l'effet recherché. */
body:not(.home) #main {
    padding-top: 121px;
}

@media (max-width: 999.98px) {
    body:not(.home) #main {
        padding-top: 71px;
    }
}

.admin-bar body:not(.home) #main {
    padding-top: 153px; /* 121 + 32 (barre admin desktop) */
}

@media screen and (max-width: 782px) {
    .admin-bar body:not(.home) #main {
        padding-top: 117px; /* 71 + 46 (barre admin mobile) */
    }
}

/* Fond de #header lui-même (distinct de [data-row="middle"] ci-dessous) :
   Blocksy le met en blanc par défaut (--theme-palette-color-8). Sombre
   partout, SAUF l'état initial (avant scroll) de l'accueil, où il doit
   rester transparent pour laisser voir le hero à travers la ligne du
   milieu elle-même transparente. Le sélecteur composé body.home ...
   .anneso-header-scrolled est plus spécifique que le simple
   #header.ct-header ci-dessus et l'emporte une fois la classe posée. */
body:not(.home) #header.ct-header,
body.home #header.ct-header.anneso-header-scrolled {
    background-color: #1a1008 !important;
}

/* Spécificité maximale pour forcer explicitement la transparence de l'état
   initial (au lieu de compter sur l'absence de règle) — voir commentaire
   ci-dessus si le fond blanc Blocksy persiste malgré le !important simple. */
html body.home #header.ct-header:not(.anneso-header-scrolled) {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.home #header.ct-header:not(.anneso-header-scrolled) [data-row="middle"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Le background Blocksy est sur [data-row="middle"], pas sur #header */
[data-header*="type-1"] .ct-header [data-row*="middle"] {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease !important;
}

[data-header*="type-1"] .ct-header.anneso-header-scrolled [data-row*="middle"] {
    background-color: rgba(31, 23, 18, 0.55) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(200, 184, 168, 0.07) !important;
}

/* Liens du menu : --theme-text-color (Blocksy) résout en bleu-gris foncé
   (#3A4F66), illisible sur un header sombre — dans tous les états
   (transparent sur hero, ou fond #1a1008/verre dépoli une fois scrollé). */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
    color: #f5ede0 !important;
    transition: color 0.3s ease !important;
}

/* Décalage quand la barre admin WordPress est visible */
.admin-bar #header.ct-header { top: 32px !important; }

@media screen and (max-width: 782px) {
    .admin-bar #header.ct-header { top: 46px !important; }
}

/* ================================================
   HEADER — MASQUER LE NOM DU SITE SOUS LE LOGO
   ================================================ */

.site-title-container { display: none !important; }

/* ================================================
   BOUTON CTA HEADER
   ================================================ */

.header-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    background: #9b451d;
    color: #fff4e8 !important;
    border: 1.5px solid #9b451d;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
    margin-left: 16px;
    flex-shrink: 0;
}

.header-cta-btn:hover {
    background: #b7653f;
    border-color: #b7653f;
    color: #fff4e8 !important;
}

/* ================================================
   HERO ANNESO&CO
   ================================================ */

.hero-anneso {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 740px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
}

.hero-text-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 660px;
    padding: 80px 0 80px 7%;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto;
}

.hero-title,
.hero-title .elementor-heading-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 4.2vw, 3.8rem);
    font-weight: 700;
    color: #f4eadc;
    line-height: 1;
    margin: 0 0 0.15em;
    text-align: center !important;
}

.hero-accent,
.hero-accent .elementor-heading-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 4.2vw, 3.8rem);
    font-style: italic;
    font-weight: 700;
    /* Beige doré : l'ancien terracotta (#d38364, imposé par Elementor) se
       confondait avec le brun chaud de la photo de fond (contraste 3,3:1).
       Le beige monte à 6,1:1 tout en restant distinct du titre crème.
       !important nécessaire : Elementor cible .elementor .e-bc9dbc8-30003f3,
       plus spécifique que cette classe. */
    color: #e8c9a0 !important;
    line-height: 0.95;
    margin: 0 0 1.1em;
    text-align: center !important;
}

/* Sous-titre italique « et des merveilles pour la vie » : Elementor le rend à
   70px (desktop) / 60px (tablette) via `.elementor .e-bc9dbc8-30003f3`, soit PLUS
   gros que le titre (60/48px). On le réduit nettement (~60% du titre) pour
   rétablir la hiérarchie visuelle. `!important` nécessaire pour battre Elementor
   (sélecteur plus spécifique). Ciblé `min-width:768px` uniquement : le mobile
   (≤767px) conserve sa propre règle `!important`, déjà correcte. */
@media (min-width: 768px) {
    .hero-accent,
    .hero-accent .elementor-heading-title {
        font-size: clamp(1.7rem, 3vw, 2.3rem) !important;
        line-height: 1.15 !important;
    }
}

.hero-subtitle,
.hero-subtitle p {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: #c8b8a8;
    line-height: 1.75;
    margin: 0 0 2rem;
    max-width: 440px;
}

/* --- Container boutons --- */
.hero-buttons {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    width: auto;
    box-sizing: border-box;
    transform: none;
}

/* --- Bouton principal --- */
.hero-buttons a.hero-btn-primary.e-button-base {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 0 28px !important;
    background-color: #9b451d !important;
    background: #9b451d !important;
    color: #fff4e8 !important;
    border: 1.5px solid #9b451d !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: auto !important;
}

/* --- Hover bouton principal --- */
.hero-buttons a.hero-btn-primary.e-button-base:hover {
    background-color: #b7653f !important;
    background: #b7653f !important;
    color: #fff4e8 !important;
    border-color: #b7653f !important;
}

/* --- Bouton secondaire --- */
.hero-buttons a.hero-btn-secondary.e-button-base {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 0 28px !important;
    background-color: rgba(185, 145, 72, 0.72) !important;
    background: rgba(185, 145, 72, 0.72) !important;
    color: #f4eadc !important;
    border: 1.5px solid rgba(185, 145, 72, 0.9) !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: auto !important;
}

/* --- Hover bouton secondaire --- */
.hero-buttons a.hero-btn-secondary.e-button-base:hover {
    background-color: rgba(244, 234, 220, 0.12) !important;
    background: rgba(244, 234, 220, 0.12) !important;
    color: #fff4e8 !important;
    border-color: #fff4e8 !important;
}

/* TABLETTE */
@media (max-width: 1024px) {
    .hero-anneso {
        min-height: 680px;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center right !important;
    }

    .hero-text-wrap {
        max-width: 560px;
        padding: 60px 5% 60px 42px;
    }
}

/* ================================================
   SECTIONS HOMEPAGE — ANNESO&CO
   ================================================ */

/* --- Variables --- */
:root {
    --as-dark:         #1f1712;
    --as-darker:       #160e0a;
    --as-terra:        #9b451d;
    --as-terra-h:      #b7653f;
    --as-cream:        #f4eadc;
    --as-cream-l:      #fff4e8;
    --as-muted:        #c8b8a8;
    --as-card:         #2a1d14;
    --as-card-border:  rgba(200,160,120,0.13);
}

/* --- Base commune --- */
.anneso-section {
    padding: 100px 0;
    width: 100%;
    box-sizing: border-box;
}

.anneso-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 48px;
    width: 100%;
    box-sizing: border-box;
}

.section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--as-terra);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.2;
    margin: 0 0 48px;
}

.section-header {
    text-align: center;
    margin-bottom: 56px;
}
.section-header .section-label { margin-bottom: 14px; }
.section-header .section-title { margin-bottom: 0; }

/* ================================================
   SECTION — LA CRÉATRICE
   ================================================ */

.section-creatrice {
    background-color: #1e1611;
}

.creatrice-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.creatrice-image-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.55);
}

.creatrice-img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.creatrice-image-wrap:hover .creatrice-img {
    transform: scale(1.03);
}

.creatrice-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.creatrice-content .section-title {
    font-size: clamp(1.75rem, 2.6vw, 2.4rem);
    margin: 12px 0 24px;
}

.section-text {
    font-size: 1rem;
    color: var(--as-muted);
    line-height: 1.85;
    margin: 0 0 16px;
    max-width: 460px;
}

.btn-outline-anneso {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 13px 28px;
    background: transparent;
    color: var(--as-cream);
    border: 1.5px solid rgba(244,234,220,0.32);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: border-color 0.26s ease, background 0.26s ease, color 0.26s ease;
}

.btn-outline-anneso:hover {
    border-color: rgba(244,234,220,0.9);
    background: rgba(244,234,220,0.06);
    color: var(--as-cream-l);
}

/* ================================================
   SECTION — UN APERÇU DE L'ATELIER
   ================================================ */

.section-atelier {
    background-color: #1a110a;
}

.atelier-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.atelier-item {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--as-card);
    transition: transform 0.32s ease, box-shadow 0.32s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.atelier-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}

.atelier-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.atelier-item:hover img {
    transform: scale(1.05);
}

/* ================================================
   SECTION — COMMENT ÇA MARCHE ?
   ================================================ */

.section-process {
    background-color: #221710;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-icon-wrap {
    width: 66px;
    height: 66px;
    background: rgba(155,69,29,0.16);
    border: 1px solid rgba(155,69,29,0.22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    flex-shrink: 0;
    transition: background 0.28s ease, border-color 0.28s ease;
}

.process-step:hover .step-icon-wrap {
    background: rgba(155,69,29,0.28);
    border-color: rgba(155,69,29,0.45);
}

.step-icon-wrap svg {
    width: 26px;
    height: 26px;
    stroke: var(--as-terra);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.step-number {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--as-terra);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.step-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--as-cream);
    margin: 0 0 12px;
    line-height: 1.35;
}

.step-desc {
    font-size: 0.9rem;
    color: var(--as-muted);
    line-height: 1.75;
    margin: 0;
    max-width: 200px;
}

/* ================================================
   SECTION — ILS TÉMOIGNENT
   ================================================ */

.section-temoignages {
    background-color: #1a110a;
}

.temoignages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.temoignage-card {
    background: var(--as-card);
    border: 1px solid var(--as-card-border);
    border-radius: 16px;
    padding: 38px 34px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.28s ease, transform 0.28s ease;
}

.temoignage-card:hover {
    border-color: rgba(155,69,29,0.32);
    transform: translateY(-4px);
}

.temoignage-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 22px;
}

.temoignage-stars svg {
    width: 18px;
    height: 18px;
    fill: var(--as-terra);
    stroke: none;
}

.temoignage-card blockquote {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.97rem;
    font-style: italic;
    color: var(--as-cream);
    line-height: 1.8;
    margin: 0 0 26px;
    padding: 0;
    border: none;
    flex: 1;
}

.temoignage-card cite {
    font-size: 0.83rem;
    font-weight: 600;
    font-style: normal;
    color: var(--as-muted);
    letter-spacing: 0.05em;
}

/* ================================================
   SECTION — CTA FINALE
   ================================================ */

.section-cta {
    background-color: #160e08;
    padding: 130px 0;
}

.cta-inner {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3.4vw, 3.1rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.15;
    margin: 0 0 28px;
    text-align: center;
}

.cta-accent {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.2rem, 3.8vw, 3.5rem);
    font-style: italic;
    font-weight: 700;
    color: var(--as-terra-h);
    line-height: 1.05;
    margin-top: 6px;
}

.cta-text {
    font-size: 1rem;
    color: var(--as-muted);
    line-height: 1.85;
    margin: 0 0 42px;
    max-width: 520px;
    text-align: center;
}

.btn-cta-anneso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 42px;
    background: var(--as-terra);
    color: var(--as-cream-l);
    border: 1.5px solid var(--as-terra);
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.26s ease, border-color 0.26s ease, transform 0.26s ease, box-shadow 0.26s ease;
}

.btn-cta-anneso:hover {
    background: var(--as-terra-h);
    border-color: var(--as-terra-h);
    color: var(--as-cream-l);
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(155,69,29,0.32);
}

/* ================================================
   RESPONSIVE — TABLETTE (max-width: 1024px)
   ================================================ */

@media (max-width: 1024px) {
    .anneso-section { padding: 80px 0; }
    .anneso-container { padding: 0 32px; }
    .creatrice-inner { gap: 48px; }

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

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 32px;
    }

    .temoignages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .temoignages-grid .temoignage-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 520px;
        margin: 0 auto;
    }
}

/* ================================================ */
/* MOBILE */
@media (max-width: 767px) {
    .hero-anneso {
        min-height: 620px !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        /* Centré : l'ancien 20% 88% cadrait sur le coin de table en bas à
           gauche, ce qui coupait le reste de la scène sur écran étroit. */
        background-position: center center !important;
    }

    .hero-text-wrap {
        max-width: calc(100vw - 40px) !important;
        padding: 52px 20px !important;
        text-align: center !important;
        align-items: center !important;
        margin: 0 auto !important;
    }

    .hero-title,
    .hero-title .elementor-heading-title,
    .hero-accent,
    .hero-accent .elementor-heading-title {
        font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
        line-height: 1.05 !important;
        text-align: center !important;
        hyphens: none !important;
        word-break: normal !important;
    }

    .hero-subtitle,
    .hero-subtitle p {
        max-width: 300px !important;
        text-align: center !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        transform: none !important;
    }

    .hero-buttons a.hero-btn-primary.e-button-base,
    .hero-buttons a.hero-btn-secondary.e-button-base {
        width: 86% !important;
        max-width: 330px !important;
        align-self: center !important;
    }

    /* --- Sections homepage mobile --- */
    .anneso-section { padding: 64px 0 !important; }
    .anneso-container { padding: 0 20px !important; }

    .section-title {
        font-size: clamp(1.6rem, 6.5vw, 2.1rem) !important;
        margin-bottom: 32px !important;
    }

    /* Créatrice : colonne unique, image d'abord */
    .creatrice-inner {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .creatrice-img { aspect-ratio: 4 / 3 !important; }
    .creatrice-content .section-title {
        font-size: clamp(1.6rem, 6.5vw, 2.1rem) !important;
    }
    .section-text { max-width: 100% !important; }

    /* Atelier : 1 colonne */
    .atelier-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .atelier-item { aspect-ratio: 4 / 3 !important; }

    /* Process : 1 colonne */
    .process-grid {
        grid-template-columns: 1fr !important;
        gap: 44px !important;
    }
    .step-desc { max-width: 100% !important; }

    /* Témoignages : 1 colonne */
    .temoignages-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .temoignages-grid .temoignage-card:nth-child(3) {
        grid-column: unset !important;
        max-width: unset !important;
    }

    /* CTA */
    .section-cta { padding: 80px 0 !important; }
    .cta-title {
        font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important;
    }
    .cta-accent {
        font-size: clamp(2rem, 8vw, 2.6rem) !important;
    }
    .cta-text { max-width: 100% !important; }
}

/* ================================================
   PAGE CRÉATIONS — /creations/
   ================================================ */

/* Pages pleine largeur : Créations (15) + Réalisations (792) */

/* 1. Container Blocksy : annuler padding vertical (data-vertical-spacing) + pleine largeur */
.page-id-15 #main > .ct-container-full,
.page-id-792 #main > .ct-container-full {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Masquer le hero Blocksy (titre de page) */
.page-id-15 .hero-section,
.page-id-792 .hero-section,
.page-id-796 .hero-section,
.page-id-17 .hero-section {
    display: none !important;
}

/* 3. Article : annulation de --theme-block-width: min(100%, 90vw) */
.page-id-15 article#post-15,
.page-id-792 article#post-792 {
    --theme-block-width: 100% !important;
    --theme-container-width: 100% !important;
    --theme-block-max-width: 100% !important;
    --theme-boxed-content-max-width: 100% !important;
    --wp--style--global--content-size: 100% !important;
    --wp--style--global--wide-size: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--as-dark) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* 4. entry-content pleine largeur */
.page-id-15 .entry-content,
.page-id-792 .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--as-dark) !important;
}

.page-id-15 .entry-content > *,
.page-id-792 .entry-content > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    margin-block: 0 !important;
}

/* --- Header page --- */
.creations-page-header {
    background-color: #1a110a;
    padding: 88px 0 64px;
    text-align: center;
}

.creations-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.1;
    margin: 12px 0 22px;
}

.creations-subtitle {
    font-size: 1rem;
    color: var(--as-muted);
    line-height: 1.85;
    max-width: 600px;
    margin: 0 auto;
}

/* --- Bannière personnalisable --- */
.creations-banner {
    background: #1f1510;
    border-top: 1px solid rgba(200,160,120,0.1);
    border-bottom: 1px solid rgba(200,160,120,0.1);
    padding: 18px 0;
}

.creations-banner p {
    font-size: 0.92rem;
    color: var(--as-muted);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

.creations-banner strong {
    color: var(--as-cream);
    font-weight: 600;
}

.banner-icon {
    color: var(--as-terra);
    margin-right: 4px;
}

/* --- Catégories --- */
.creations-categories {
    background-color: #1a110a;
}

.creation-item {
    padding: 88px 0;
    border-bottom: 1px solid rgba(200,160,120,0.06);
}

.creation-item:last-child {
    border-bottom: none;
}

.creation-item-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Image à droite = texte en premier dans le flux */
.creation-item--reverse .creation-content {
    order: -1;
}

/* Image container */
.creation-img-wrap {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--as-card);
    box-shadow: 0 24px 64px rgba(0,0,0,0.45);
    flex-shrink: 0;
}

.creation-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}

.creation-img-wrap:hover .creation-img {
    transform: scale(1.04);
}

/* Contenu texte */
.creation-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.creation-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.65rem, 2.3vw, 2.15rem);
    font-weight: 700;
    color: var(--as-cream);
    margin: 0 0 16px;
    line-height: 1.25;
}

.creation-desc {
    font-size: 0.97rem;
    color: var(--as-muted);
    line-height: 1.82;
    margin: 0 0 28px;
    max-width: 420px;
}

/* Tags / chips */
.creation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.creation-tag {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid rgba(200,160,120,0.26);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--as-cream);
    letter-spacing: 0.02em;
    transition: border-color 0.24s ease, background 0.24s ease;
}

.creation-tag:hover {
    border-color: rgba(155,69,29,0.55);
    background: rgba(155,69,29,0.08);
}

/* Bouton devis */
.btn-devis {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: var(--as-terra);
    color: var(--as-cream-l);
    border: 1.5px solid var(--as-terra);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background 0.26s ease, border-color 0.26s ease, transform 0.24s ease;
}

.btn-devis:hover {
    background: var(--as-terra-h);
    border-color: var(--as-terra-h);
    color: var(--as-cream-l);
    transform: translateY(-1px);
}

/* --- CTA finale créations --- */
.creations-cta-section {
    background-color: #160e08;
    padding: 120px 0;
}

.creations-cta-inner {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.creations-cta-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.2;
    margin: 0 0 20px;
}

.creations-cta-text {
    font-size: 1rem;
    color: var(--as-muted);
    line-height: 1.85;
    margin: 0 0 40px;
    max-width: 480px;
}

/* ================================================
   RESPONSIVE CRÉATIONS — TABLETTE (max-width: 1024px)
   ================================================ */

@media (max-width: 1024px) {
    .creations-page-header { padding: 64px 0 48px; }
    .creation-item { padding: 68px 0; }
    .creation-item-inner {
        padding: 0 32px;
        gap: 48px;
    }
    .creation-item--reverse .creation-content { order: unset; }
    .creation-item--reverse .creation-img-wrap { order: -1; }
}

/* ================================================
   RESPONSIVE CRÉATIONS — MOBILE (max-width: 767px)
   ================================================ */

@media (max-width: 767px) {
    .creations-page-header { padding: 52px 0 40px !important; }
    .creations-title {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }
    .creations-subtitle { max-width: 100% !important; }

    .creations-banner p {
        text-align: left !important;
        font-size: 0.88rem !important;
    }

    .creation-item { padding: 56px 0 !important; }
    .creation-item-inner {
        padding: 0 20px !important;
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    /* Toujours image en premier sur mobile */
    .creation-item--reverse .creation-content { order: unset !important; }
    .creation-item--reverse .creation-img-wrap { order: -1 !important; }

    .creation-img-wrap { aspect-ratio: 4 / 3 !important; }
    .creation-desc { max-width: 100% !important; }

    .creations-cta-section { padding: 80px 0 !important; }
    .creations-cta-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    }
    .creations-cta-text { max-width: 100% !important; }
}

/* ================================================
   PAGE RÉALISATIONS (/realisations/)
   ================================================ */

/* --- Header --- */
.real-header {
    background-color: var(--as-dark);
    padding: 88px 0 72px;
    text-align: center;
    border-bottom: 1px solid rgba(200, 184, 168, 0.1);
}

.real-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.real-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.15;
    margin: 12px 0 24px;
}

.real-subtitle {
    font-size: 1.05rem;
    color: var(--as-muted);
    line-height: 1.7;
    margin: 0 0 40px;
    max-width: 540px;
}

/* --- Bannière --- */
.real-banner {
    background-color: rgba(155, 69, 29, 0.08);
    border-top: 1px solid rgba(155, 69, 29, 0.18);
    border-bottom: 1px solid rgba(155, 69, 29, 0.18);
    padding: 18px 0;
    text-align: center;
}

.real-banner p {
    font-size: 0.92rem;
    color: var(--as-muted);
    margin: 0;
    line-height: 1.6;
}

.real-banner-icon {
    color: var(--as-terra);
    margin-right: 6px;
}

/* --- Section grille --- */
.real-grid-section {
    background-color: var(--as-dark);
    padding: 56px 0 80px;
}

/* --- Filtres --- */
.real-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 48px;
}

.real-filter {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--as-muted);
    background: transparent;
    border: 1px solid rgba(200, 184, 168, 0.25);
    border-radius: 999px;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: inherit;
}

.real-filter:hover {
    color: var(--as-cream);
    border-color: rgba(200, 184, 168, 0.5);
}

.real-filter--active {
    background: var(--as-terra);
    color: var(--as-cream-l);
    border-color: var(--as-terra);
}

/* --- Grille produits --- */
.real-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* --- Carte produit --- */
.real-card {
    background: var(--as-card);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.real-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.real-card-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.real-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.real-card:hover .real-card-img {
    transform: scale(1.04);
}

/* Badge */
.real-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(30, 18, 10, 0.82);
    color: var(--as-cream);
    font-size: 0.76rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    white-space: nowrap;
    z-index: 2;
}

/* Corps de la carte */
.real-card-body {
    padding: 20px 22px 24px;
}

.real-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.real-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--as-cream);
    margin: 0;
    line-height: 1.35;
    flex: 1;
}

.real-card-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--as-terra-h);
    white-space: nowrap;
    flex-shrink: 0;
}

.real-card-desc {
    font-size: 0.88rem;
    color: var(--as-muted);
    line-height: 1.65;
    margin: 0 0 14px;
}

.real-card-perso {
    font-size: 0.8rem;
    color: var(--as-terra-h);
    font-weight: 500;
}

/* --- CTA intermédiaire --- */
.real-cta-mid {
    background-color: var(--as-dark);
    border-top: 1px solid rgba(200, 184, 168, 0.08);
    padding: 100px 0;
    text-align: center;
}

.real-cta-mid-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.real-cta-mid-icon {
    color: var(--as-terra);
    margin-bottom: 24px;
    opacity: 0.9;
}

.real-cta-mid-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.25;
    margin: 0 0 20px;
    max-width: 640px;
}

.real-cta-mid-text {
    font-size: 1rem;
    color: var(--as-muted);
    line-height: 1.8;
    margin: 0 0 40px;
    max-width: 520px;
}

/* --- 3 atouts --- */
.real-features {
    background-color: rgba(155, 69, 29, 0.06);
    border-top: 1px solid rgba(200, 184, 168, 0.08);
    border-bottom: 1px solid rgba(200, 184, 168, 0.08);
    padding: 80px 0;
}

.real-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    text-align: center;
}

.real-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(155, 69, 29, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--as-terra-h);
}

.real-feature-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--as-cream);
    margin: 0 0 10px;
}

.real-feature-desc {
    font-size: 0.9rem;
    color: var(--as-muted);
    line-height: 1.65;
    margin: 0;
}

/* --- CTA finale --- */
.real-cta-final {
    background-color: var(--as-dark);
    padding: 100px 0 120px;
    text-align: center;
}

.real-cta-final-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.real-cta-final-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.2;
    margin: 0 0 20px;
}

.real-cta-final-text {
    font-size: 1rem;
    color: var(--as-muted);
    line-height: 1.8;
    margin: 0 0 40px;
    max-width: 480px;
}

/* ================================================
   RESPONSIVE RÉALISATIONS — TABLETTE
   ================================================ */
@media (max-width: 1024px) {
    .real-title { font-size: clamp(2rem, 5vw, 3rem); }
    .real-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .real-features-grid { gap: 32px; }
}

/* ================================================
   RESPONSIVE RÉALISATIONS — MOBILE
   ================================================ */
@media (max-width: 767px) {
    .real-header { padding: 64px 0 52px; }
    .real-grid { grid-template-columns: 1fr; gap: 20px; }
    .real-filters { gap: 8px; }
    .real-filter { font-size: 0.82rem; padding: 7px 14px; }
    .real-features-grid { grid-template-columns: 1fr; gap: 40px; }
    .real-cta-mid, .real-cta-final { padding: 72px 0; }
}

/* ================================================
   FICHE PRODUIT (/realisations/{slug}/)
   ================================================ */

/* --- Breadcrumb --- */
.prod-breadcrumb {
    background-color: var(--as-dark);
    border-bottom: 1px solid rgba(200, 184, 168, 0.1);
    padding: 18px 0;
}

.prod-breadcrumb-link {
    color: var(--as-terra-h);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.2s;
}

.prod-breadcrumb-link:hover { color: var(--as-cream); }

.prod-breadcrumb-sep {
    color: rgba(200, 184, 168, 0.35);
    margin: 0 10px;
    font-size: 0.88rem;
}

.prod-breadcrumb-current {
    font-size: 0.88rem;
    color: var(--as-muted);
}

/* --- Conteneur fiche --- */
.prod-detail {
    background-color: var(--as-dark);
    padding: 72px 0 100px;
}

.prod-detail-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}

/* --- Galerie --- */
.prod-gallery { position: sticky; top: 100px; }

.prod-gallery-main {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--as-card);
}

.prod-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}

.prod-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.prod-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prod-thumb--active { border-color: var(--as-terra); }
.prod-thumb:hover   { border-color: rgba(155, 69, 29, 0.5); }

/* --- Info produit --- */
.prod-info { padding-top: 8px; }

.prod-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.2;
    margin: 12px 0 18px;
}

.prod-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--as-terra-h);
    margin: 0 0 32px;
    letter-spacing: -0.01em;
}

.prod-desc {
    font-size: 0.96rem;
    color: var(--as-muted);
    line-height: 1.85;
    margin: 0 0 32px;
    white-space: pre-line;
}

.prod-perso-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(155, 69, 29, 0.1);
    border: 1px solid rgba(155, 69, 29, 0.2);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 36px;
    color: var(--as-terra-h);
    font-size: 0.9rem;
    font-weight: 500;
}

.prod-cta {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.prod-back-link {
    display: block;
    text-align: center;
    font-size: 0.88rem;
    color: var(--as-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.prod-back-link:hover { color: var(--as-cream); }

/* ================================================
   RESPONSIVE FICHE PRODUIT — TABLETTE
   ================================================ */
@media (max-width: 1024px) {
    .prod-detail-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .prod-gallery { position: static; }
    .prod-gallery-main { aspect-ratio: 4 / 3; }
}

/* ================================================
   RESPONSIVE FICHE PRODUIT — MOBILE
   ================================================ */
@media (max-width: 767px) {
    .prod-detail { padding: 48px 0 80px; }
    .prod-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .prod-thumb { width: 60px; height: 60px; }
}

/* ================================================
   PAGE COMMENT ÇA MARCHE (/comment-ca-marche/)
   ================================================ */

/* Pleine largeur */
.page-id-796 #main > .ct-container-full {
    max-width: 100% !important; width: 100% !important;
    padding: 0 !important; margin: 0 !important;
}

.page-id-796 article#post-796 {
    --theme-block-width: 100% !important;
    --wp--style--global--content-size: 100% !important;
    max-width: 100% !important; width: 100% !important;
    padding: 0 !important; margin: 0 !important;
    background: var(--as-dark) !important;
    box-shadow: none !important; border: none !important; border-radius: 0 !important;
}

.page-id-796 .entry-content {
    max-width: 100% !important; width: 100% !important;
    padding: 0 !important; margin: 0 !important;
    background: var(--as-dark) !important;
}

.page-id-796 .entry-content > * {
    width: 100% !important; max-width: 100% !important;
    margin-inline: 0 !important; margin-block: 0 !important;
}

/* --- Header --- */
.ccm-header {
    background-color: var(--as-dark);
    padding: 88px 0 72px;
    text-align: center;
    border-bottom: 1px solid rgba(200, 184, 168, 0.08);
}

.ccm-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ccm-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.15;
    margin: 12px 0 24px;
}

.ccm-subtitle {
    font-size: 1.05rem;
    color: var(--as-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 560px;
}

/* --- Section étapes --- */
.ccm-steps-section {
    background-color: var(--as-dark);
    padding: 80px 0 96px;
}

.ccm-steps-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* --- Étape individuelle --- */
.ccm-step {
    display: grid;
    grid-template-columns: 52px 2px 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 24px;
    padding-bottom: 56px;
}

.ccm-step--last { padding-bottom: 0; }

.ccm-step-icon {
    grid-column: 1;
    grid-row: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(155, 69, 29, 0.4);
    background: rgba(155, 69, 29, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--as-terra-h);
    flex-shrink: 0;
}

.ccm-step-line {
    grid-column: 1;
    grid-row: 2;
    width: 2px;
    background: rgba(155, 69, 29, 0.2);
    justify-self: center;
    margin-top: 12px;
}

.ccm-step-body {
    grid-column: 3;
    grid-row: 1 / 3;
    padding-top: 10px;
}

.ccm-step-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--as-cream);
    margin: 0 0 12px;
    line-height: 1.3;
}

.ccm-step-num {
    color: var(--as-terra-h);
    font-family: 'Playfair Display', Georgia, serif;
}

.ccm-step-desc {
    font-size: 0.96rem;
    color: var(--as-muted);
    line-height: 1.8;
    margin: 0 0 10px;
}

.ccm-step-note {
    font-size: 0.88rem;
    color: var(--as-terra-h);
    font-weight: 500;
    margin: 0;
    font-style: italic;
}

/* --- Section confiance --- */
.ccm-trust {
    background-color: rgba(155, 69, 29, 0.06);
    border-top: 1px solid rgba(200, 184, 168, 0.08);
    border-bottom: 1px solid rgba(200, 184, 168, 0.08);
    padding: 88px 0;
    text-align: center;
}

.ccm-trust-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.25;
    margin: 0 0 56px;
}

.ccm-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.ccm-trust-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(155, 69, 29, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--as-terra-h);
}

.ccm-trust-item-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--as-cream);
    margin: 0 0 10px;
}

.ccm-trust-item-desc {
    font-size: 0.9rem;
    color: var(--as-muted);
    line-height: 1.65;
    margin: 0;
}

/* --- CTA final --- */
.ccm-cta {
    background-color: var(--as-dark);
    padding: 100px 0 120px;
    text-align: center;
}

.ccm-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ccm-cta-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.2;
    margin: 0 0 20px;
    max-width: 640px;
}

.ccm-cta-text {
    font-size: 1rem;
    color: var(--as-muted);
    line-height: 1.8;
    margin: 0 0 40px;
}

/* ================================================
   RESPONSIVE CCM — TABLETTE
   ================================================ */
@media (max-width: 1024px) {
    .ccm-title { font-size: clamp(2rem, 5vw, 3rem); }
    .ccm-trust-grid { gap: 32px; }
    .ccm-steps-inner { max-width: 600px; }
}

/* ================================================
   RESPONSIVE CCM — MOBILE
   ================================================ */
@media (max-width: 767px) {
    .ccm-header { padding: 64px 0 52px; }
    .ccm-steps-section { padding: 56px 0 72px; }
    .ccm-step { grid-template-columns: 44px 2px 1fr; gap: 0 16px; }
    .ccm-step-icon { width: 44px; height: 44px; }
    .ccm-trust-grid { grid-template-columns: 1fr; gap: 40px; }
    .ccm-cta { padding: 72px 0 88px; }
    .ccm-cta-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* ================================================
   PAGE FAIRE UNE DEMANDE — FORMULAIRE DYNAMIQUE
   ================================================ */

/* Pleine largeur */
.page-id-17 #main > .ct-container-full {
    max-width: 100% !important; width: 100% !important;
    padding: 0 !important; margin: 0 !important;
}

.page-id-17 article#post-17 {
    --theme-block-width: 100% !important;
    --wp--style--global--content-size: 100% !important;
    max-width: 100% !important; width: 100% !important;
    padding: 0 !important; margin: 0 !important;
    background: var(--as-dark) !important;
    box-shadow: none !important; border: none !important; border-radius: 0 !important;
}

.page-id-17 .entry-content {
    max-width: 100% !important; width: 100% !important;
    padding: 0 !important; margin: 0 !important;
    background: var(--as-dark) !important;
}

.page-id-17 .entry-content > * {
    width: 100% !important; max-width: 100% !important;
    margin-inline: 0 !important; margin-block: 0 !important;
}

/* --- Header --- */
.fad-header {
    background-color: var(--as-dark);
    padding: 80px 0 64px;
    text-align: center;
    border-bottom: 1px solid rgba(200, 184, 168, 0.08);
}

.fad-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fad-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.15;
    margin: 12px 0 20px;
}

.fad-subtitle {
    font-size: 1.05rem;
    color: var(--as-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 540px;
}

/* --- Corps --- */
.fad-body {
    background-color: var(--as-dark);
    padding: 48px 0 100px;
}

.fad-body .anneso-container {
    max-width: 720px;
}

/* Inputs de base */
.fad-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.fad-field { display: flex; flex-direction: column; gap: 8px; }
.fad-fields { display: flex; flex-direction: column; gap: 24px; }

.fad-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--as-cream);
}

.fad-req { color: var(--as-terra-h); }
.fad-opt { font-weight: 400; color: var(--as-muted); font-size: 0.85rem; }

.fad-input {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(200,184,168,0.2);
    border-radius: 10px;
    color: var(--as-cream);
    font-size: 0.95rem;
    font-family: inherit;
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.fad-input::placeholder { color: rgba(200,184,168,0.4); }

.fad-input:focus {
    border-color: rgba(155,69,29,0.6);
    background: rgba(255,255,255,0.07);
}

/* Texte réellement saisi : forcer la couleur claire sur les <input>.
   Blocksy colore les champs via un sélecteur input:is([type=text]…) de
   spécificité (0,1,1) — supérieure à la simple classe .fad-input (0,1,0) —
   qui rendait le texte tapé en bleu-gris #3A4F66. Les textarea/select
   n'étaient pas touchés (sélecteur Blocksy = simple élément, moins spécifique).
   !important pour couvrir aussi l'état :focus (Blocksy le re-colore pendant
   la saisie via textarea:focus / input:is(…):focus, spécificité > .fad-input)
   et l'autofill navigateur. Cible TOUS les champs (input, textarea, select)
   pour que la textarea reste crème pendant la saisie. Le ::placeholder reste
   discret (règle .fad-input::placeholder plus bas). */
.fad-input,
.fad-input:focus {
    color: var(--as-cream) !important;
    -webkit-text-fill-color: var(--as-cream) !important;
}
/* Autofill Chrome : le navigateur force un fond clair (blanc/lavande) via son
   style interne qu'on ne peut pas outrepasser proprement. Plutôt que de lutter
   (hack box-shadow inset, fragile), on accepte ce fond clair et on rend le texte
   SOMBRE pour qu'il reste lisible — uniquement dans l'état :-webkit-autofill.
   Les champs non-autofillés gardent le texte crème sur fond sombre (règle ci-dessus). */
input.fad-input:-webkit-autofill {
    -webkit-text-fill-color: #1a1a1a !important;
}
/* Placeholder discret : Blocksy le force en color:inherit;opacity:.7 (spécificité
   (0,1,2) qui battait .fad-input::placeholder), donc après le fix ci-dessus il
   devenait crème. On rétablit la teinte beige atténuée voulue. */
input.fad-input::placeholder {
    color: rgba(200,184,168,0.45) !important;
    -webkit-text-fill-color: rgba(200,184,168,0.45) !important;
    opacity: 1 !important;
}

/* Icône du sélecteur de date : rendue sombre par défaut par le navigateur,
   donc invisible sur le fond sombre du thème. invert(1) la passe en clair. */
.fad-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}
.fad-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.fad-textarea { resize: vertical; min-height: 140px; line-height: 1.65; }

.fad-select-wrap { position: relative; }
/* height:auto + line-height : Blocksy impose height:40px aux select, or avec
   le padding vertical de .fad-input (12px) + un line-height hérité (~1.65) le
   texte de la valeur (« Choisir ») était rogné. On laisse la hauteur s'adapter. */
.fad-select { cursor: pointer; padding-right: 40px; color: var(--as-cream); height: auto; line-height: 1.4; }
.fad-select option { background: #2a1d14; color: var(--as-cream); }
.fad-select-arrow {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--as-muted);
}

.fad-file { cursor: pointer; }

/* Bouton natif du champ fichier : par défaut il s'affiche en clair (blanc sur
   blanc, invisible sur le thème sombre). On le repeint aux couleurs de la marque.
   ::file-selector-button = standard ; ::-webkit-file-upload-button = ancien WebKit. */
.fad-file::file-selector-button,
.fad-file::-webkit-file-upload-button {
    margin-right: 14px;
    padding: 8px 16px;
    background: var(--as-terra);
    color: var(--as-cream-l);
    -webkit-text-fill-color: var(--as-cream-l);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.fad-file::file-selector-button:hover,
.fad-file::-webkit-file-upload-button:hover {
    background: var(--as-terra-h);
}

/* Succès / Erreur globale */
.fad-success {
    display: flex; align-items: flex-start; gap: 16px;
    background: rgba(155,69,29,0.1); border: 1px solid rgba(155,69,29,0.3);
    border-radius: 14px; padding: 28px; color: var(--as-terra-h);
}
.fad-success strong { display: block; font-size: 1rem; margin-bottom: 6px; color: var(--as-cream); }
.fad-success p { margin: 0; font-size: 0.92rem; color: var(--as-muted); }

.fad-error {
    background: rgba(180,60,40,0.12); border: 1px solid rgba(180,60,40,0.3);
    border-radius: 10px; padding: 14px 18px; color: #e07a6a; font-size: 0.9rem; margin: 0;
}

/* ── BARRE DE PROGRESSION ── */
.fad-progress-wrap {
    margin-bottom: 48px;
}

.fad-progress-track {
    height: 3px;
    background: rgba(200,184,168,0.12);
    border-radius: 999px;
    margin-bottom: 16px;
    position: relative;
}

.fad-progress-fill {
    height: 100%;
    background: var(--as-terra);
    border-radius: 999px;
    width: 0%;
    transition: width 0.4s ease;
}

.fad-step-dots {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fad-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(200,184,168,0.2);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}

.fad-dot-num { font-size: 0.72rem; font-weight: 600; color: var(--as-muted); }

.fad-dot.active {
    border-color: var(--as-terra);
    background: var(--as-terra);
}
.fad-dot.active .fad-dot-num { color: white; }

.fad-dot.done {
    border-color: var(--as-terra);
    background: rgba(155,69,29,0.15);
}
.fad-dot.done .fad-dot-num { color: var(--as-terra-h); }

.fad-step-label {
    font-size: 0.8rem;
    color: var(--as-muted);
    margin: 10px 0 0;
    text-align: center;
}

/* ── ÉTAPES ── */
.fad-step { display: none; animation: fadIn 0.3s ease; }
.fad-step.active { display: block; }

@keyframes fadIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fad-step-header { margin-bottom: 32px; }

.fad-step-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--as-cream);
    margin: 0 0 10px;
}

.fad-step-desc {
    font-size: 0.97rem;
    color: var(--as-muted);
    margin: 0;
    line-height: 1.6;
}

/* ── CARTES TYPE DEMANDE (Étape 2) ── */
.fad-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.fad-type-card { cursor: pointer; }
.fad-type-card input { position: absolute; opacity: 0; pointer-events: none; }

.fad-type-card-inner {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 28px 20px;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(200,184,168,0.15);
    border-radius: 16px;
    text-align: center;
    transition: all 0.25s;
}

.fad-type-card:hover .fad-type-card-inner {
    border-color: rgba(155,69,29,0.4);
    background: rgba(155,69,29,0.05);
}

.fad-type-card.selected .fad-type-card-inner {
    border-color: var(--as-terra);
    background: rgba(155,69,29,0.1);
}

.fad-type-icon {
    width: 40px; height: 40px;
    color: var(--as-terra-h);
    flex-shrink: 0;
}

.fad-type-label {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--as-cream);
    line-height: 1.3;
}

.fad-type-desc {
    font-size: 0.82rem;
    color: var(--as-muted);
    line-height: 1.5;
}

/* ── RADIO GROUPES ── */
.fad-radio-group {
    display: flex; flex-direction: column; gap: 10px;
}

.fad-radio-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.93rem; color: var(--as-muted);
    cursor: pointer; transition: color 0.2s;
}

.fad-radio-label input[type=radio] { accent-color: var(--as-terra); width: 16px; height: 16px; }
.fad-radio-label:hover { color: var(--as-cream); }

/* ── CARTES LIVRAISON (Étape 5) ── */
.fad-livraison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.fad-livraison-card { cursor: pointer; }
.fad-livraison-card input { position: absolute; opacity: 0; pointer-events: none; }

.fad-livraison-inner {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 24px 16px;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(200,184,168,0.15);
    border-radius: 14px; text-align: center;
    transition: all 0.25s;
}

.fad-livraison-inner svg { width: 32px; height: 32px; color: var(--as-terra-h); }
.fad-livraison-label { font-size: 0.93rem; font-weight: 700; color: var(--as-cream); }
.fad-livraison-desc  { font-size: 0.8rem; color: var(--as-muted); line-height: 1.4; }

.fad-livraison-card:hover .fad-livraison-inner,
.fad-livraison-card.selected .fad-livraison-inner {
    border-color: var(--as-terra);
    background: rgba(155,69,29,0.08);
}

/* ── RÉSUMÉ (Étape 7) ── */
.fad-summary {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(200,184,168,0.12);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex; flex-direction: column; gap: 0;
}

.fad-summary-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; padding: 10px 0;
    border-bottom: 1px solid rgba(200,184,168,0.07);
}
.fad-summary-row:last-child { border-bottom: none; }

.fad-summary-key {
    font-size: 0.85rem; color: var(--as-muted); flex-shrink: 0; min-width: 120px;
}
.fad-summary-val {
    font-size: 0.93rem; color: var(--as-cream); text-align: right;
    font-weight: 500;
}

.fad-send-note {
    font-size: 0.9rem; color: var(--as-muted); margin: 0 0 32px;
    font-style: italic;
}

/* ── NAVIGATION ── */
.fad-nav {
    display: flex; align-items: center; gap: 16px; margin-top: 40px;
    flex-wrap: wrap;
}

.fad-btn-prev, .fad-btn-next, .fad-btn-submit {
    display: inline-flex; align-items: center; gap: 8px;
    height: 50px; padding: 0 28px;
    border-radius: 999px; border: none;
    font-size: 0.97rem; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all 0.2s;
}

.fad-btn-prev {
    background: transparent;
    border: 1.5px solid rgba(200,184,168,0.25);
    color: var(--as-muted);
}
.fad-btn-prev:hover { border-color: var(--as-cream); color: var(--as-cream); }

.fad-btn-next {
    background: var(--as-terra);
    color: var(--as-cream-l);
}
.fad-btn-next:hover { background: var(--as-terra-h); transform: translateY(-1px); }

.fad-btn-submit {
    background: var(--as-terra);
    color: var(--as-cream-l);
}
.fad-btn-submit:hover { background: var(--as-terra-h); transform: translateY(-1px); }

.fad-nav-error {
    width: 100%; font-size: 0.88rem; color: #e07a6a; margin: 0;
}

/* ================================================
   RESPONSIVE FAD — TABLETTE
   ================================================ */
@media (max-width: 1024px) {
    .fad-type-grid    { grid-template-columns: 1fr; gap: 12px; }
    .fad-livraison-grid { grid-template-columns: 1fr; gap: 12px; }
    .fad-type-card-inner    { flex-direction: row; text-align: left; padding: 18px 20px; }
    .fad-livraison-inner    { flex-direction: row; text-align: left; padding: 18px 20px; }
    .fad-title { font-size: clamp(2rem, 5vw, 3rem); }
}

/* ================================================
   RESPONSIVE FAD — MOBILE
   ================================================ */
@media (max-width: 767px) {
    .fad-header { padding: 60px 0 48px; }
    .fad-body   { padding: 40px 0 80px; }
    .fad-row-2  { grid-template-columns: 1fr; }
    .fad-title  { font-size: clamp(1.8rem, 7vw, 2.4rem); }
    .fad-btn-next, .fad-btn-submit { flex: 1; justify-content: center; }
    .fad-step-dots { gap: 4px; }
    .fad-dot { width: 22px; height: 22px; }
    .fad-dot-num { font-size: 0.65rem; }
}

/* ================================================
   FIX MOBILE — Elementor background-attachment
   backdrop-filter non supporté sur vrais mobiles
   ================================================ */
@media (max-width: 1024px) {
    .elementor-section,
    .elementor-section > .elementor-background-overlay,
    .e-con,
    .e-con > .e-con-inner {
        background-attachment: scroll !important;
    }

    [data-header*="type-1"] .ct-header [data-row*="middle"] {
        background-color: rgba(31, 23, 18, 0.92) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ================================================
   PAGES LÉGALES — MENTIONS LÉGALES (23) + CONFIDENTIALITÉ (25)
   ================================================ */

body.page-id-23,
body.page-id-25 {
    background-color: var(--as-dark) !important;
}

body.page-id-23 .page-title,
body.page-id-25 .page-title,
body.page-id-23 .entry-content h2,
body.page-id-25 .entry-content h2,
body.page-id-23 .entry-content strong,
body.page-id-25 .entry-content strong {
    color: var(--as-cream) !important;
}

body.page-id-23 .entry-content p,
body.page-id-25 .entry-content p,
body.page-id-23 .entry-content li,
body.page-id-25 .entry-content li {
    color: var(--as-muted) !important;
}

body.page-id-23 .entry-content a,
body.page-id-25 .entry-content a {
    color: var(--as-terra-h) !important;
}

body.page-id-23 .entry-content hr,
body.page-id-25 .entry-content hr {
    border-color: rgba(200, 184, 168, 0.15) !important;
}

/* ================================================
   MENU MOBILE — PANEL CENTRÉ + FOND FLOUTÉ
   Remplace le tiroir blanc plein écran par défaut de
   Blocksy par un panneau translucide flouté (le site
   reste visible derrière, flou), avec les liens centrés
   au milieu de l'écran et une transition fondu + zoom.
   Cible uniquement #offcanvas (le menu de nav mobile),
   pas #search-modal (modale de recherche, non concernée).
   ================================================ */

#offcanvas.ct-panel {
    background: rgba(31, 23, 18, 0.72) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

#offcanvas .ct-panel-inner {
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
}

/* Centre le contenu (liens) au milieu de l'écran, horizontalement
   et verticalement, via la variable native de Blocksy plutôt que
   de forcer un flex maison en concurrence avec le sien. */
#offcanvas .ct-panel-content[data-device="mobile"] {
    --vertical-alignment: center;
    align-items: center;
    padding: 24px;
}

#offcanvas .ct-panel-content-inner {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Transition d'ouverture : fondu + léger zoom, même courbe
   d'easing que le reste du site (voir fadeInUp plus haut). */
@keyframes anneso-panel-fade-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

#offcanvas:not([inert]) .ct-panel-content-inner {
    animation: anneso-panel-fade-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.05s;
}

/* Liens de navigation : centrés, grands, palette de marque
   au lieu du bleu/blanc par défaut de Blocksy. */
#offcanvas .mobile-menu.menu-container {
    width: 100%;
}

#offcanvas .mobile-menu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#offcanvas .mobile-menu .menu-item {
    width: 100%;
    text-align: center;
}

#offcanvas .mobile-menu .ct-menu-link {
    display: inline-block;
    padding: 16px 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--as-cream) !important;
    text-decoration: none !important;
    transition: color 0.22s ease, transform 0.22s ease;
}

#offcanvas .mobile-menu .ct-menu-link:hover,
#offcanvas .mobile-menu .ct-menu-link:focus-visible {
    color: var(--as-terra-h) !important;
    transform: translateY(-2px);
}

#offcanvas .mobile-menu .menu-item.current-menu-item > .ct-menu-link {
    color: var(--as-terra-h) !important;
}

/* Bouton fermer : lisible sur le fond sombre flouté, repositionné
   en cercle discret plutôt que l'icône brute par défaut. */
#offcanvas .ct-panel-actions {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
}

#offcanvas .ct-toggle-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(244, 234, 220, 0.1) !important;
    color: var(--as-cream) !important;
    transition: background 0.22s ease, transform 0.3s ease;
}

#offcanvas .ct-toggle-close:hover {
    background: rgba(244, 234, 220, 0.18) !important;
    transform: rotate(90deg);
}

#offcanvas .ct-toggle-close .ct-icon {
    fill: currentColor;
}

/* Mobile étroit : légèrement moins de blur (coût de perf moindre
   sur bas de gamme) et texte un cran plus petit. */
@media (max-width: 480px) {
    #offcanvas.ct-panel {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    #offcanvas .mobile-menu .ct-menu-link {
        font-size: 1.45rem !important;
    }
}

/* ================================================
   SÉLECTEUR PRODUIT VISUEL (Étape 3A — Faire une demande)
   <select> masqué (source de vérité) + déclencheur + popup grille
   ================================================ */

/* Le vrai champ soumis reste dans le DOM mais invisible. */
.fad-produit-hidden { display: none; }

/* ── Déclencheur (champ lecture seule qui ouvre la popup) ── */
.fad-product-trigger {
    display: flex; align-items: center; gap: 12px;
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(200,184,168,0.2);
    border-radius: 10px;
    color: var(--as-cream);
    font-family: inherit; font-size: 0.95rem;
    padding: 9px 14px; min-height: 52px;
    text-align: left; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.fad-product-trigger:hover:not(:disabled),
.fad-product-trigger:focus-visible {
    border-color: rgba(155,69,29,0.6);
    background: rgba(255,255,255,0.07);
    outline: none;
}
.fad-product-trigger:disabled { opacity: 0.55; cursor: not-allowed; }

.fad-product-trigger-media {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden; background: var(--as-card);
}
.fad-product-trigger-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fad-product-trigger-label { flex: 1; min-width: 0; }
.fad-product-trigger-label.is-placeholder { color: rgba(200,184,168,0.6); }
.fad-product-trigger-arrow { color: var(--as-muted); flex-shrink: 0; }

/* ── Popup / modal ── */
.fad-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.fad-modal[hidden] { display: none; }

.fad-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(15,10,7,0.74);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

.fad-modal-panel {
    position: relative; z-index: 1;
    width: 100%; max-width: 880px; max-height: 88vh;
    display: flex; flex-direction: column;
    background: var(--as-dark);
    border: 1px solid var(--as-card-border);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    animation: fadModalIn 0.25s ease;
}
@keyframes fadModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.fad-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--as-card-border);
    flex-shrink: 0;
}
.fad-modal-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem; font-weight: 700; color: var(--as-cream); margin: 0;
}
.fad-modal-close {
    display: flex; padding: 6px; border: none; border-radius: 8px;
    background: transparent; color: var(--as-muted); cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.fad-modal-close:hover { color: var(--as-cream); background: rgba(255,255,255,0.06); }

.fad-modal-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 16px 24px; border-bottom: 1px solid var(--as-card-border);
    flex-shrink: 0;
}
.fad-tab {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(200,184,168,0.18);
    color: var(--as-muted);
    border-radius: 999px; padding: 7px 16px;
    font-family: inherit; font-size: 0.85rem; white-space: nowrap;
    cursor: pointer; transition: all 0.2s;
}
.fad-tab:hover { color: var(--as-cream); border-color: rgba(155,69,29,0.4); }
.fad-tab.active { background: var(--as-terra); border-color: var(--as-terra); color: var(--as-cream-l); }
/* Focus clavier thématisé (remplace l'anneau bleu par défaut, cohérent avec le déclencheur/cartes). */
.fad-tab:focus-visible,
.fad-modal-close:focus-visible { outline: 2px solid var(--as-terra-h); outline-offset: 2px; }

.fad-modal-body { overflow-y: auto; padding: 24px; }

.fad-product-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}

.fad-product-card {
    display: flex; flex-direction: column; text-align: left;
    padding: 0; overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(200,184,168,0.15);
    border-radius: 14px; cursor: pointer; font-family: inherit;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.fad-product-card:hover,
.fad-product-card:focus-visible {
    border-color: var(--as-terra);
    background: rgba(155,69,29,0.08);
    transform: translateY(-2px); outline: none;
}
.fad-product-card.is-selected {
    border-color: var(--as-terra);
    box-shadow: inset 0 0 0 1px var(--as-terra);
}

.fad-product-card-media {
    display: block; width: 100%; aspect-ratio: 4 / 3;
    background: var(--as-card); overflow: hidden;
}
.fad-product-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fad-product-card-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(200,184,168,0.28);
}

.fad-product-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.fad-product-card-title { font-size: 0.92rem; font-weight: 700; color: var(--as-cream); line-height: 1.3; }
.fad-product-card-price { font-size: 0.85rem; font-weight: 600; color: var(--as-terra-h); }
.fad-product-card-desc {
    font-size: 0.8rem; color: var(--as-muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Lien discret « Autre » sous la grille (pas de carte, choix éditorial). */
.fad-product-other { text-align: center; margin: 24px 0 4px; font-size: 0.88rem; color: var(--as-muted); }
.fad-product-other-link {
    background: none; border: none; padding: 0;
    color: var(--as-terra-h); font-family: inherit; font-size: 0.88rem; font-weight: 600;
    text-decoration: underline; cursor: pointer;
}
.fad-product-other-link:hover { color: var(--as-cream); }

/* ── Responsive popup ── */
@media (max-width: 1024px) {
    .fad-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    /* Plein écran sur mobile : plus confortable pour parcourir les cartes. */
    .fad-modal { padding: 0; }
    .fad-modal-panel { max-width: none; max-height: 100vh; height: 100%; border: none; border-radius: 0; }
    .fad-modal-head, .fad-modal-tabs, .fad-modal-body { padding-left: 16px; padding-right: 16px; }
    .fad-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fad-modal-title { font-size: 1.25rem; }
}