/*
Theme Name:   Resonastone (enfant de Divi)
Theme URI:    https://resonastone.com
Description:  Thème enfant minimal de Divi : charte graphique Resonastone (direction Onde), polices locales Jost et Instrument Serif.
Author:       Resonastone
Template:     Divi
Version:      1.0.1
Text Domain:  resonastone-enfant
*/

/* ==========================================================================
   Resonastone - CSS de la charte (direction Onde, palette Amethyste profonde)
   Mobile first. Compatible Divi (4 et 5) et WooCommerce.
   Polices locales (Jost, Instrument Serif), licence SIL OFL.
   ========================================================================== */

@font-face { font-family: 'Jost'; src: url('fonts/Jost-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --amethyste: #2F1F4B;
  --nuit: #1F1433;
  --lac: #3D5A73;
  --brume: #D6D0E2;
  --sable: #F2EDE5;
  --albatre: #FBF8F3;
  --lueur: #D9A55B;
  --laiton: #86602A;
  --releve: #3B2A5A;
  --trait: #4B3A6B;
  --chakra-racine: #9C3A30;
  --chakra-sacre: #A64B24;
  --chakra-plexus: #DDB543;
  --chakra-coeur: #426E4F;
  --chakra-gorge: #286F7F;
  --chakra-troisieme-oeil: #33407E;
  --chakra-couronne: #7656A6;
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 20px;
  --espace-5: 32px;
  --espace-6: 52px;
  --espace-7: 84px;
  --rayon-s: 4px;
  --rayon-m: 12px;
  --rayon-l: 24px;
  --rayon-galet: 999px;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: Jost, "Avenir Next", "Century Gothic", sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body,
body #page-container,
body #et-main-area {
  background-color: var(--sable);
  color: var(--amethyste);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.625;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body p { font-family: var(--font-sans); line-height: 1.625; padding-bottom: 1em; color: inherit; }
body h1, body h2, body h3, body h4, body h5, body h6,
body .et_pb_module h1, body .et_pb_module h2, body .et_pb_module h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--amethyste);
  letter-spacing: -0.005em;
  line-height: 1.1;
  padding-bottom: 0.4em;
}
body h1 { font-size: 40px; }
body h2 { font-size: 32px; }
body h3 { font-size: 26px; }
body h4, body h5, body h6 { font-size: 22px; }
@media (min-width: 768px) {
  body h1 { font-size: 56px; line-height: 1.05; }
  body h2 { font-size: 40px; line-height: 1.1; }
  body h3 { font-size: 28px; }
}
a { color: var(--amethyste); text-decoration-color: var(--laiton); text-underline-offset: 3px; }
a:hover { color: var(--laiton); }
::selection { background: var(--brume); color: var(--amethyste); }
img { max-width: 100%; height: auto; }
hr, .et_pb_divider:before { border-color: var(--brume); }

/* Focus visible et accessibilite */
:focus-visible { outline: 3px solid var(--laiton); outline-offset: 3px; border-radius: var(--rayon-s); }
.rs-sombre :focus-visible, #main-footer :focus-visible { outline-color: var(--lueur); }
.screen-reader-text:focus, .rs-skip:focus {
  background: var(--albatre); color: var(--amethyste); clip: auto !important; height: auto; width: auto;
  left: 8px; top: 8px; padding: 12px 20px; z-index: 100000; border-radius: var(--rayon-m);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Classes de contenu (pages Resonastone) ---------- */
.rs-surtitre {
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--laiton); padding-bottom: 12px; display: block;
}
.rs-sombre .rs-surtitre { color: var(--lueur); }
.rs-intention { font-family: var(--font-serif); font-style: italic; font-size: 24px; line-height: 32px; }
.rs-chapeau { font-size: 20px; line-height: 28px; letter-spacing: 0.01em; }
.rs-centre { text-align: center; }
.rs-mention { font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: var(--lac); }
.rs-sombre .rs-mention { color: var(--brume); }
.rs-inner > *:not(.rs-grille):not(.rs-table) { max-width: 720px; margin-left: auto; margin-right: auto; }
.rs-inner > .rs-grille, .rs-inner > .rs-table { max-width: 100%; }
.rs-inner .rs-grille { margin: var(--espace-4) 0; }
.rs-table table { width: 100%; font-size: 14px; border-collapse: collapse; }
.rs-table th, .rs-table td { border: 1px solid var(--brume); padding: 8px 10px; text-align: left; vertical-align: top; }
.rs-table th { font-weight: 500; background: var(--albatre); }
.rs-inner ul:not(.rs-grille), .rs-inner ol { padding: 0 0 1em 1.4em; list-style-position: outside; }
.rs-inner ul:not(.rs-grille) { list-style-type: disc; }
.rs-inner ol { list-style-type: decimal; }
.rs-inner li { padding-bottom: 0.4em; }
.rs-inner .rs-a-completer { background: var(--brume); padding: 0 4px; border-radius: var(--rayon-s); }
.rs-projet { border: 1px solid var(--laiton); border-radius: var(--rayon-m); padding: var(--espace-4); background: var(--albatre); font-size: 14px; }

/* Sections sombres (classe CSS de la section : rs-sombre) */
.rs-sombre {
  background-color: var(--amethyste) !important;
  background-image: url('images/ondes-sombre.svg');
  background-repeat: no-repeat; background-position: 110% 50%; background-size: 90vmin;
  color: var(--sable);
}
.rs-sombre h1, .rs-sombre h2, .rs-sombre h3, .rs-sombre h4, .rs-sombre p, .rs-sombre li, .rs-sombre .rs-intention { color: var(--sable); }
.rs-sombre a { color: var(--sable); text-decoration-color: var(--lueur); }
.rs-sombre a:hover { color: var(--lueur); }
.rs-albatre { background-color: var(--albatre) !important; }
.rs-onde {
  background-image: url('images/ondes-clair.svg'); background-repeat: no-repeat; background-position: -20% 120%; background-size: 90vmin;
}

/* Hero */
.rs-section--hero { padding-top: var(--espace-6); padding-bottom: var(--espace-5); }
.rs-hero { text-align: center; }
.rs-hero h1 { font-size: 44px; line-height: 1.02; max-width: 14ch; margin: 0 auto; }
@media (min-width: 768px) { .rs-section--hero { padding-top: var(--espace-7); padding-bottom: var(--espace-6); } .rs-hero h1 { font-size: 72px; } }
.rs-hero .rs-chapeau { max-width: 36ch; margin: 0 auto var(--espace-4); }

/* Boutons (liens de contenu et boutons Divi) */
.rs-bouton, .et_pb_button, .et_pb_module .et_pb_button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .wp-block-button__link, #et-boc .et_pb_button {
  display: inline-block;
  font-family: var(--font-sans) !important;
  font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  color: var(--sable) !important; background: var(--amethyste) !important;
  border: 1px solid var(--amethyste) !important; border-radius: var(--rayon-galet) !important;
  padding: 16px 32px !important; min-height: 48px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.rs-bouton:hover, .et_pb_button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
#et-boc .et_pb_button:hover {
  background: var(--releve) !important; color: var(--sable) !important; border-color: var(--laiton) !important; padding: 16px 32px !important;
}
.et_pb_button:after, .et_pb_button:before { display: none !important; }
.rs-bouton--clair, .rs-sombre .rs-bouton {
  background: transparent !important; color: var(--amethyste) !important; border-color: var(--amethyste) !important;
}
.rs-sombre .rs-bouton { color: var(--sable) !important; border-color: var(--lueur) !important; }
.rs-sombre .rs-bouton:hover { background: var(--lueur) !important; color: var(--amethyste) !important; }
.rs-bouton--clair:hover { background: var(--amethyste) !important; color: var(--sable) !important; }
.woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button.disabled { opacity: .5; }

/* Cartes et grilles */
.rs-grille { display: grid; grid-template-columns: 1fr; gap: var(--espace-4); padding: 0; margin: 0; list-style: none; }
@media (min-width: 640px) { .rs-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .rs-grille--3 { grid-template-columns: repeat(3, 1fr); } .rs-grille--5 { grid-template-columns: repeat(5, 1fr); } }
.rs-carte { background: var(--albatre); border: 1px solid var(--brume); border-radius: var(--rayon-l); padding: var(--espace-5) var(--espace-4); }
.rs-carte h3 { font-size: 26px; padding-bottom: 6px; }
.rs-carte p { padding-bottom: 0; font-size: 15px; }
.rs-etape { text-align: center; padding: var(--espace-4) var(--espace-3); }
.rs-etape img { width: 56px; height: 56px; margin: 0 auto var(--espace-3); display: block; }
.rs-etape .rs-surtitre { color: var(--laiton); }
.rs-etape h3 { font-size: 24px; }
.rs-etape p { font-size: 15px; padding-bottom: 0; }

/* FAQ (balises details/summary, accessibles sans JavaScript) */
.rs-faq details { border-bottom: 1px solid var(--brume); padding: var(--espace-3) 0; }
.rs-faq summary { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; cursor: pointer; list-style: none; padding: 8px 32px 8px 0; position: relative; min-height: 44px; }
.rs-faq summary::-webkit-details-marker { display: none; }
.rs-faq summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font-family: var(--font-sans); color: var(--laiton); }
.rs-faq details[open] summary::after { content: "\2212"; }
.rs-faq details p { padding: 8px 0 0; max-width: 68ch; }

/* ---------- En-tete Divi ---------- */
#top-header, #et-secondary-nav { background: var(--amethyste) !important; }
#top-header, #top-header a, #et-info-email, #et-info-phone { color: var(--sable) !important; font-size: 13px; }
#main-header, #main-header.et-fixed-header {
  background-color: var(--sable) !important; box-shadow: none !important; border-bottom: 1px solid var(--brume);
}
#main-header .container { width: 92%; }
#logo { max-height: 40px; height: auto; width: auto; }
@media (min-width: 981px) { #logo { max-height: 46px; } }
#top-menu li a, #main-header .et_mobile_menu li a {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amethyste);
}
#top-menu li a:hover, #top-menu li.current-menu-item > a, #top-menu li.current_page_item > a { color: var(--laiton) !important; opacity: 1; }
#top-menu li.current-menu-item > a { text-decoration: underline; text-decoration-color: var(--laiton); text-underline-offset: 8px; }
.et_mobile_menu { background: var(--albatre) !important; border-top: 2px solid var(--laiton); }
.et_mobile_menu li a { border-bottom: 1px solid var(--brume); padding: 14px 5%; min-height: 44px; }
.mobile_menu_bar:before, #et_search_icon:before, .et-cart-info { color: var(--amethyste) !important; }
.et_pb_menu .et_pb_menu__menu a, .et-menu-nav a { font-family: var(--font-sans); }
#et-top-navigation { padding-top: 0; }

/* ---------- Pied de page ---------- */
#main-footer { background: var(--nuit); color: var(--sable); }
#footer-widgets { padding: var(--espace-6) 0 var(--espace-4); }
#main-footer, #main-footer p, #main-footer li, #main-footer .widget_nav_menu li a, #main-footer .footer-widget li a { color: var(--sable) !important; font-size: 15px; }
#main-footer .footer-widget h4, #main-footer .widgettitle {
  font-family: var(--font-sans) !important; font-size: 12px !important; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lueur) !important; padding-bottom: 16px;
}
#main-footer a { color: var(--sable); text-decoration: none; }
#main-footer a:hover { color: var(--lueur) !important; text-decoration: underline; }
#footer-bottom { background: var(--nuit); border-top: 1px solid var(--trait); padding: var(--espace-4) 0; }
#footer-info, #footer-info a { color: var(--brume) !important; font-size: 13px; }
#footer-bottom .et-social-icon a { color: var(--sable) !important; }

/* ---------- WooCommerce ---------- */
.woocommerce .woocommerce-breadcrumb { font-size: 13px; color: var(--lac); }
.woocommerce .woocommerce-breadcrumb a { color: var(--lac); }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-3); margin: 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
@media (min-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--espace-4); } }
@media (min-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } }
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--albatre); border: 1px solid var(--brume); border-radius: var(--rayon-l); padding: var(--espace-3); text-align: center;
  transition: border-color .2s ease;
}
.woocommerce ul.products li.product:hover { border-color: var(--laiton); }
.woocommerce ul.products li.product a img { border-radius: var(--rayon-m); margin-bottom: var(--espace-3); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-serif); font-size: 22px; line-height: 1.15; color: var(--amethyste); padding: 4px 0;
}
.woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--font-sans); font-size: 14px; font-weight: 400; letter-spacing: 0.02em; color: var(--amethyste);
}
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 22px; }
.woocommerce span.onsale { background: var(--laiton); color: var(--albatre); border-radius: var(--rayon-galet); min-height: 0; min-width: 0; line-height: 1; padding: 8px 14px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.woocommerce div.product .product_title { font-size: 40px; }
.woocommerce div.product .woocommerce-product-details__short-description { font-size: 18px; }
.woocommerce div.product form.cart .quantity input.qty { border: 1px solid var(--amethyste); border-radius: var(--rayon-galet); min-height: 48px; width: 72px; font-family: var(--font-sans); color: var(--amethyste); background: var(--albatre); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border-radius: var(--rayon-galet) var(--rayon-galet) 0 0; border-color: var(--brume); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amethyste); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--albatre); }
.woocommerce-info, .woocommerce-message, .woocommerce-error { background: var(--albatre); border-top-color: var(--laiton); color: var(--amethyste); border-radius: var(--rayon-m); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--laiton); }
.rs-offre {
  background: var(--albatre); border: 1px solid var(--brume); border-radius: var(--rayon-m); padding: var(--espace-4); margin: var(--espace-4) 0; font-size: 15px;
}
.rs-offre ul { margin: 0; padding: 0 0 0 1.2em; list-style: disc; }
.rs-offre li { padding-bottom: 4px; }
.rs-offre p { padding-bottom: 0; }
/* Formulaires et tunnel d'achat */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.select2-container--default .select2-selection--single, input[type=text], input[type=email], input[type=tel], input[type=password], textarea, select {
  font-family: var(--font-sans); font-size: 16px; color: var(--amethyste); background: var(--albatre);
  border: 1px solid var(--trait); border-radius: var(--rayon-m); padding: 12px 14px; min-height: 48px;
}
.woocommerce form .form-row label { font-size: 14px; color: var(--amethyste); }
.woocommerce table.shop_table { border: 1px solid var(--brume); border-radius: var(--rayon-m); border-collapse: separate; background: var(--albatre); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top-color: var(--brume); }
.woocommerce-checkout #payment { background: var(--albatre); border-radius: var(--rayon-m); }
.woocommerce-checkout #payment div.payment_box { background: var(--sable); color: var(--amethyste); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--sable); }
.woocommerce-cart .cart_totals h2, .woocommerce-checkout h3 { font-size: 28px; }

/* Pastilles chakras et signes (classes utilisables dans les textes) */
.rs-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.rs-p-racine { background: var(--chakra-racine); } .rs-p-sacre { background: var(--chakra-sacre); }
.rs-p-plexus { background: var(--chakra-plexus); } .rs-p-coeur { background: var(--chakra-coeur); }
.rs-p-gorge { background: var(--chakra-gorge); } .rs-p-troisieme-oeil { background: var(--chakra-troisieme-oeil); }
.rs-p-couronne { background: var(--chakra-couronne); }

/* Page d'attente */
.rs-attente { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--espace-6) var(--espace-4); }
.rs-attente img.rs-logo-attente { width: min(320px, 70vw); margin: 0 auto var(--espace-5); display: block; }

/* Impression des pages juridiques */
@media print {
  #main-header, #top-header, #main-footer, .rs-bouton { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Structure des sections (corrections de mise en page 2026-10-11) : chaque section a un seul conteneur interne .rs-inner */
body.page:not(.woocommerce-page) #sidebar,
body.page:not(.woocommerce-page) .entry-title.main_title,
body.page:not(.woocommerce-page) .et_post_meta_wrapper h1 { display: none !important; }
body.page:not(.woocommerce-page) #left-area { width: 100% !important; float: none !important; padding: 0 !important; }
body.page:not(.woocommerce-page) #main-content .container { width: 100% !important; max-width: none !important; padding: 0 !important; }
body.page:not(.woocommerce-page) #main-content .container:before { display: none !important; }
body.page:not(.woocommerce-page) .rs-section { width: 100%; box-sizing: border-box; margin: 0; padding: 56px 0; clear: both; }
body.page:not(.woocommerce-page) .rs-section--hero { padding-top: var(--espace-6); padding-bottom: var(--espace-5); }
body.page:not(.woocommerce-page) .rs-inner { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
@media (min-width: 768px) { body.page:not(.woocommerce-page) .rs-section--hero { padding-top: var(--espace-7); padding-bottom: var(--espace-6); } }
body.page:not(.woocommerce-page) .rs-attente.rs-inner { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }