/* CSS front-end — Raymotions Galerie, blocs Gutenberg
   Repris quasi verbatim du CSS du site d'origine. Changements :
   - Les 5 couleurs de charte graphique sont figées ici en :root plutôt qu'exposées
     comme réglage de bloc.
   - Règles .cart-icon/.cart-count retirées (intégration WooCommerce abandonnée).
   - Le bouton "add-to-cart-btn" devient "quote-btn" (ouvre la modale de devis).
   - Variables CSS ajoutées pour les images à taille réglable (--ray-logo-size,
     --ray-footer-logo-size), voir convention "toute image de bloc doit avoir un réglage
     de taille" dans bloc_Gutenberg.md.
*/
:root {
    --c-primary: #8A239B;
    --c-secondary: #FF2A85;
    --c-accent: #00D2FF;
    --c-bg: #0a0712;
    --c-text: #e0dce8;
}

/* Filet de sécurité "alignfull" (voir bloc_Gutenberg.md § Pleine largeur) : la classe
   .alignfull est bien posée sur le wrapper de chaque bloc (align:"full" dans block.json +
   pattern), mais la règle CSS qui la fait réellement sortir de la colonne de contenu vient
   normalement du theme.json du thème actif — un plugin de blocs ne peut pas garantir que le
   thème actif la fournit (invisible en test avec un thème par blocs qui la fournit déjà, réel
   avec d'autres thèmes). Scopé aux blocs de ce plugin uniquement, jamais posé globalement.
*/
[class*="wp-block-raymotions-"].alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; background-color: var(--c-bg); color: var(--c-text); line-height: 1.6; overflow-x: hidden; }
h1, h2, h3, h4, h5, .subtitle-top, .logo-link { font-family: 'Cinzel', serif; font-weight: 700; }
a { color: inherit; text-decoration: none; transition: all 0.3s ease; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; } .mt-4 { margin-top: 2rem; } .w-100 { width: 100%; }
.btn { display: inline-block; padding: 12px 28px; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; cursor: pointer; border: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; }
.btn-primary { background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)); color: #fff; box-shadow: 0 4px 15px rgba(255, 42, 133, 0.3); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 42, 133, 0.5); }
.btn-secondary { background: transparent; color: #fff; border: 2px solid var(--c-accent); }
.btn-secondary:hover { background: var(--c-accent); color: #000; }
.btn-outline { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--c-accent); }
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(10, 7, 18, 0.7); backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.3s ease; }
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.main-logo { width: auto; height: auto; max-width: 100%; max-height: var(--ray-logo-size, 50px); }
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a { font-size: 0.9rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.main-nav a:hover:not(.btn-outline) { color: var(--c-accent); }

/* Sous-menu « Demande de Partenariat » (Devenir Artiste / Devenir Membre Corporatif) — voir
   blocks/site-header/render.php et le toggle JS dans frontend.js. */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { font: inherit; font-size: 0.9rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; padding: 10px 22px; border-radius: 4px; cursor: pointer; }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 10px; min-width: 240px; background: rgba(10, 7, 18, 0.97); backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 0; z-index: 10; }
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 10px 20px; white-space: nowrap; font-size: 0.85rem; }
.nav-dropdown-menu a:hover { background: rgba(255,255,255,0.05); }
/* Bascule « Mon Espace » du compte connecté (voir blocks/site-header/render.php) — sélecteur par
   ID plutôt que .nav-dropdown-toggle seul, pour ne jamais affecter la bascule « Devenir
   Partenaire » voisine, qui garde son style .btn-outline distinct. */
#nav-account-dropdown .nav-dropdown-toggle { background: none; border: none; color: var(--c-text); }
#nav-account-dropdown .nav-dropdown-toggle:hover { color: var(--c-accent); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.mobile-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: transparent; border: none; padding: 0; cursor: pointer; }
.mobile-nav-toggle span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hero { position: relative; min-height: var(--ray-hero-min-height, 100vh); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 80px; }
.hero-logo { position: relative; z-index: 3; display: block; width: auto; height: auto; max-width: 100%; max-height: var(--ray-hero-logo-size, 150px); margin: 0 auto 24px; }
.hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; }
.hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, transparent 0%, var(--c-bg) 100%); z-index: 2; }
.hero-content { position: relative; z-index: 3; max-width: 800px; }
.hero-content.has-glass { background: var(--ray-hero-glass-bg, rgba(255, 255, 255, 0.15)); -webkit-backdrop-filter: blur(var(--ray-hero-glass-blur, 12px)); backdrop-filter: blur(var(--ray-hero-glass-blur, 12px)); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 24px; padding: 48px 40px; }
.subtitle-top { font-size: 1.2rem; color: var(--c-accent); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 20px; }
.hero-title { font-size: 4.5rem; line-height: 1.1; margin-bottom: 25px; background: linear-gradient(to right, #fff, #d3cce3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-desc { font-size: 1.2rem; font-family: 'Playfair Display', serif; font-style: italic; color: #a9a2b8; margin-bottom: 40px; }
.hero-actions { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.section { padding: 100px 0; position: relative; z-index: 4; }
.section-title { font-size: 2.5rem; margin-bottom: 20px; color: #fff; }
.section-subtitle { font-size: 1.1rem; color: #a9a2b8; margin-bottom: 60px; }
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feature-list { list-style: none; margin-top: 30px; }
.feature-list li { position: relative; padding-left: 30px; margin-bottom: 15px; font-size: 1.05rem; }
.feature-list li::before { content: '◈'; position: absolute; left: 0; top: 2px; color: var(--c-accent); font-size: 1.2rem; }
.interactive-color-wheel { position: relative; min-height: 450px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.chakra-orbs { display: flex; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center; }
.orb { width: 60px; height: 60px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: all 0.3s ease; border: 2px solid transparent; }
.orb:hover { transform: scale(1.1); box-shadow: 0 0 30px currentColor; }
.wheel-instruction { font-family: 'Playfair Display', serif; font-style: italic; color: #888; margin-bottom: 30px; text-align: center; }
.orb-reading { font-size: 1.4rem; font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 2px; min-height: 40px; color: #fff; transition: color 0.3s ease; text-align: center; }
.grid-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.product-card { background: rgba(25, 20, 30, 0.6); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s; }
.product-card:hover { transform: translateY(-10px); border-color: rgba(255, 42, 133, 0.4); }
.product-img { height: var(--ray-product-img-height, 350px); overflow: hidden; position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.product-card:hover .product-img img { transform: scale(1.05); }
.product-details { padding: 25px; text-align: center; }
.product-details h3 { font-size: 1.3rem; margin-bottom: 15px; color: #fff; }
.product-details p { font-size: 0.9rem; color: #aaa; margin-bottom: 20px; min-height: 60px; }
.wc-price-box { font-size: 1.25rem; font-weight: 600; color: var(--c-accent); margin-bottom: 20px; }
.corporate { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%230a0712"/><path d="M0 0 L100 100 M100 0 L0 100" stroke="%23ffffff" stroke-opacity="0.02" stroke-width="1"/></svg>'); }
.glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 60px; text-align: center; }
.corporate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 50px; }
.corp-item { background: rgba(0,0,0,0.3); padding: 30px; border-radius: 12px; text-align: left; }
.corp-item.highlight { border: 1px solid var(--ray-corp-highlight, var(--c-accent)); box-shadow: 0 0 20px var(--ray-corp-highlight-glow, rgba(0, 210, 255, 0.1)); }
.how-it-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 28px; margin-top: 50px; text-align: left; }
.how-it-works-item { background: rgba(0,0,0,0.3); padding: 34px 28px; border-radius: 12px; width: 100%; height: 100%; min-width: 0; box-sizing: border-box; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.how-it-works-item:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.how-it-works-num { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)); font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.2rem; color: #fff; margin-bottom: 20px; }
.how-it-works-item h4 { color: #fff; font-size: 1.15rem; margin-bottom: 10px; }
.how-it-works-item p { color: #a9a2b8; font-size: 0.95rem; margin: 0; }
.corp-item h4 { color: #fff; margin-bottom: 15px; font-size: 1.2rem; }
.accordion { max-width: 800px; margin: 0 auto; }
.accordion-item { border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 10px; }
.accordion-header { width: 100%; text-align: left; background: none; border: none; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 500; padding: 20px 0; cursor: pointer; position: relative; outline: none; }
.accordion-header::after { content: '+'; position: absolute; right: 0; font-size: 1.5rem; color: var(--c-accent); }
.accordion-header.active::after { content: '−'; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; color: #aaa; }
.accordion-content p { padding-bottom: 20px; }
.site-footer { background: #030206; padding: 80px 0 30px; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-content { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 60px; margin-bottom: 50px; }
.footer-col a { display: block; color: var(--c-text); text-decoration: none; margin-bottom: 10px; }
.footer-col a:hover { color: var(--c-accent); }
.footer-logo { width: auto; height: auto; max-width: 100%; max-height: var(--ray-footer-logo-size, 40px); margin-bottom: 20px; }
.footer-col h4 { color: #fff; margin-bottom: 20px; }
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.05); color: #666; font-size: 0.85rem; }
/* pointer-events:none (pas seulement opacity/visibility) : le CSS propre de WPForms remet
   explicitement visibility:visible sur .wpforms-container (reset défensif de WPForms, sans
   rapport avec ce bloc) — ça casse l'héritage de notre visibility:hidden sur les descendants,
   et le formulaire (labels, champs, textarea...) reste alors cliquable/intercepte les clics de
   toute la page, bien qu'invisible (l'opacité de l'ancêtre le rend quand même invisible à
   l'écran, mais n'empêche pas les clics par elle-même). Confirmé en conditions réelles :
   elementFromPoint() sur un élément de page situé sous la modale renvoyait un <label> WPForms
   au lieu de l'élément réellement visible. pointer-events n'a pas ce problème d'héritage cassé
   par WPForms. */
.order-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease; }
.order-modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.order-modal-content { background: #110c1a; width: 100%; max-width: 500px; padding: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); position: relative; transform: translateY(20px); transition: all 0.3s ease; max-height: 90vh; overflow-y: auto; }
.order-modal-overlay.active .order-modal-content { transform: translateY(0); }
.close-modal { position: absolute; top: 15px; right: 20px; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
.modal-title { font-size: 1.5rem; margin-bottom: 25px; text-align: center; }
.form-note { font-size: 0.8rem; text-align: center; margin-top: 15px; font-style: italic; }

/* Habillage du formulaire WPForms natif rendu dans la modale — même langage visuel que le
   reste du site.
   v1.1 : le markup "moderne" de WPForms expose ses propres variables CSS de thème
   (--wpforms-label-color, --wpforms-field-text-color, etc.), consommées par sa propre feuille
   de style (color:var(--wpforms-label-color), etc. — vérifié dans
   assets/css/frontend/modern/wpforms-full.min.css du plugin WPForms). Plutôt que dupliquer des
   couleurs en dur qui perdaient systématiquement (voir plus bas), on redéfinit ces mêmes
   variables en les faisant pointer vers les couleurs déjà définies pour le reste du site
   (--c-text, --c-bg...) : le formulaire suit alors automatiquement la charte graphique du site,
   sans double source de vérité.
   Piège rencontré : WPForms fixe CES MÊMES variables par formulaire via un bloc <style>
   scopé à l'ID du formulaire (ex. #wpforms-19{--wpforms-label-color:rgba(0,0,0,.85);...}),
   généré à partir des réglages de style du formulaire dans son propre éditeur — un sélecteur
   d'ID, plus spécifique que n'importe quel sélecteur de classe ici, donc gagnant quel que soit
   l'ordre des feuilles de style. Résultat observé avant correctif : labels et champs quasi
   invisibles (texte sombre par défaut de WPForms, pensé pour un fond clair, sur notre fond
   presque noir). `!important` est nécessaire pour regagner la priorité face à cet ID. */
.order-modal-content {
    --wpforms-label-color: var(--c-text) !important;
    --wpforms-label-sublabel-color: #aaa !important;
    --wpforms-field-text-color: var(--c-text) !important;
    --wpforms-field-background-color: rgba(255, 255, 255, 0.05) !important;
    --wpforms-field-border-color: rgba(255, 255, 255, 0.1) !important;
    --wpforms-field-border-color-spare: rgba(255, 255, 255, 0.1) !important;
    --wpforms-field-menu-color: var(--c-bg) !important;
    --wpforms-button-background-color: var(--c-secondary) !important;
    --wpforms-button-background-color-alt: var(--c-primary) !important;
    --wpforms-button-text-color: #fff !important;
    --wpforms-button-border-color: transparent !important;
}
.order-modal-content .wpforms-form { margin-top: 10px; }
.order-modal-content .wpforms-field { margin-bottom: 20px; }
.order-modal-content .wpforms-field-label { display: block; margin-bottom: 8px; font-size: 0.9rem; font-weight: normal; }
.order-modal-content .wpforms-form input[type="text"],
.order-modal-content .wpforms-form input[type="email"],
.order-modal-content .wpforms-form input[type="tel"],
.order-modal-content .wpforms-form textarea,
.order-modal-content .wpforms-form select {
    width: 100%; padding: 12px; border-radius: 4px; font-family: inherit;
}
.order-modal-content .wpforms-form input:focus,
.order-modal-content .wpforms-form textarea:focus,
.order-modal-content .wpforms-form select:focus { outline: none; border-color: var(--c-accent) !important; }
.order-modal-content .wpforms-submit-container { margin-top: 10px; }
.order-modal-content .wpforms-submit {
    width: 100%; padding: 14px; border: none; border-radius: 999px; cursor: pointer;
    background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)) !important;
    font-family: inherit; font-weight: 600; box-shadow: 0 4px 15px rgba(255, 42, 133, 0.3);
}
.order-modal-content .wpforms-confirmation-container { text-align: center; color: var(--c-text); padding: 10px 0; }
.quote-fallback-note { text-align: center; color: #aaa; font-size: 0.9rem; }
.quote-fallback-note a { color: var(--c-accent); text-decoration: underline; }

@media (max-width: 992px) { .grid-products { grid-template-columns: repeat(2, 1fr); } .split-layout { grid-template-columns: 1fr; } .hero-title { font-size: 3.5rem; } }

/* La nav est passée de 4 à 7 liens (portails/adhésion, voir blocks/site-header/render.php) — resserrée
   ici avant de basculer en menu hamburger, pour éviter le débordement sur les largeurs tablette. */
@media (max-width: 1200px) {
    .main-nav { gap: 16px; }
    .main-nav a { font-size: 0.8rem; }
}
@media (max-width: 1024px) {
    .mobile-nav-toggle { display: flex; }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        background: rgba(10, 7, 18, 0.97);
        backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(255,255,255,0.05);
        transition: max-height 0.3s ease;
    }
    .main-nav.open { max-height: 500px; overflow-y: auto; }
    .main-nav a { padding: 14px 24px; font-size: 0.9rem; border-top: 1px solid rgba(255,255,255,0.06); }

    /* Le sous-menu devient un accordéon en ligne plutôt qu'un panneau flottant (qui déborderait
       du menu mobile plein écran, voir .main-nav ci-dessus). */
    .nav-dropdown { border-top: 1px solid rgba(255,255,255,0.06); }
    .nav-dropdown-toggle { width: 100%; text-align: left; padding: 14px 24px; border-radius: 0; background: none; border: none; }
    .nav-dropdown-menu { position: static; display: none; margin-top: 0; background: rgba(255,255,255,0.03); border: none; border-radius: 0; padding: 0; }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
    .nav-dropdown-menu a { padding: 12px 24px 12px 36px; }
}
@media (max-width: 768px) {
    .grid-products { grid-template-columns: 1fr; }
    .hero-title { font-size: 2.5rem; }
    .footer-content { grid-template-columns: 1fr; gap: 30px; }
    .how-it-works-grid { grid-template-columns: 1fr; }
}

/* Champs de formulaire génériques — demandes d'adhésion (blocks/demande-artiste,
   blocks/demande-corporatif) ET tableaux de bord des portails (portal.css les réutilise). Sans
   ceci, un <input>/<textarea> brut reste blanc sur fond sombre (styles navigateur par défaut). */
.raym-input,
.raym-textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--c-text);
    font-family: inherit;
    font-size: 0.95rem;
}
.raym-input:focus,
.raym-textarea:focus {
    outline: none;
    border-color: var(--c-accent);
}
.raym-textarea { resize: vertical; }