/*
Theme Name:   L'Éther du Rôliste
Theme URI:    https://ether-du-roliste.fr
Description:  Thème enfant de Hello Elementor. Porte le Design Language System
              « Voie lactée onirique » : jetons de couleur, typographie,
              états d'interface et surcharges WooCommerce en mode sombre.
Author:       Laurelle Ponce
Author URI:   https://ether-du-roliste.fr
Template:     hello-elementor
Version:      1.1.0
Requires PHP: 7.4
Text Domain:  ether-du-roliste
*/

/* ==========================================================================
   1. JETONS DU DESIGN SYSTEM
   Source unique de vérité côté CSS. Les mêmes valeurs sont saisies dans
   Elementor → Variables Manager (voir le guide, étape 4) : le CSS couvre
   tout ce qu'Elementor ne pilote pas (WooCommerce, navigateur, e-mails).
   ========================================================================== */
:root {
  /* Fonds */
  --edr-void:        #0B0E14;  /* Le Vide Spatial      — fond principal      */
  --edr-nebula:      #151A28;  /* Les Nébuleuses       — cartes, modales     */
  --edr-nebula-2:    #1D2434;  /* Élévation +1         — survols, champs     */
  --edr-input:       #0E1220;  /* Fond des champs de saisie                  */

  /* Actions et accents */
  --edr-tyr:         #66023C;  /* Poudre de Tyr        — action primaire     */
  --edr-tyr-glow:    #8C0A57;  /* Lueur du CTA                               */
  --edr-copper:      #B67A58;  /* Cuivre Alchimique    — accent premium      */
  --edr-copper-lt:   #D9A886;  /* Cuivre clair         — anneau de focus     */

  /* Signaux */
  --edr-carmin:      #E63946;  /* Rouge Carmin         — liserés, icônes     */
  --edr-carmin-lt:   #EE5A66;  /* Carmin clair         — TEXTE d'erreur      */
  --edr-success:     #5FD3A0;

  /* Texte */
  --edr-t1:          #FFFFFF;  /* Titres, texte fort   — 19,3:1 sur le fond  */
  --edr-t2:          #C9D1E0;  /* Texte courant        — 12,6:1              */
  --edr-t3:          #9BA7BF;  /* Méta, légendes       —  8,0:1              */
  --edr-border:      #2A3145;  /* Liseré translucide                         */

  /* Typographie */
  --edr-serif:   "Adobe Garamond Pro", "Cormorant Garamond", Georgia, serif;
  --edr-display: "Origins Smooth", "Playfair Display", Georgia, serif;
  --edr-sans:    "Source Sans Pro", "Source Sans 3", Arial, sans-serif;

  /* Échelle spatiale (multiples de 8) et rayons */
  --edr-s1: 8px;  --edr-s2: 16px; --edr-s3: 24px; --edr-s4: 32px;
  --edr-s6: 48px; --edr-s8: 64px; --edr-s12: 96px;
  --edr-radius: 12px; --edr-radius-sm: 8px;
  --edr-touch: 48px;            /* cible tactile minimale                    */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
  background-color: var(--edr-void);
  color: var(--edr-t2);
  font-family: var(--edr-sans);
  font-size: 16px;              /* jamais moins pour le corps de texte       */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--edr-serif);
  color: var(--edr-t1);
  font-weight: 600;
  line-height: 1.15;
}

a { color: var(--edr-copper); }
a:hover { color: var(--edr-copper-lt); }

/* Élévation par la lumière : dans le mode sombre, les ombres noires sont
   invisibles. La profondeur se crée avec le fond Nébuleuse + un liseré. */
.edr-card,
.elementor-widget-container > .edr-card {
  background: linear-gradient(180deg, #1B2133, var(--edr-nebula));
  border: 1px solid var(--edr-border);
  border-radius: var(--edr-radius);
}

/* ==========================================================================
   3. ACCESSIBILITÉ (RGAA)
   ========================================================================== */

/* Anneau de sélection au clavier — obligatoire, jamais supprimé. */
:focus-visible {
  outline: 2px solid var(--edr-copper-lt);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Lien d'évitement, injecté par functions.php. */
.edr-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999999;
  background: var(--edr-copper);
  color: var(--edr-void);
  font-weight: 700;
  padding: 12px 20px;
  text-decoration: none;
}
.edr-skip-link:focus { left: 8px; top: 8px; }

/* Cibles tactiles : 48 px minimum sur tout ce qui se clique. */
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link {
  min-height: var(--edr-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Respect de la préférence système « animations réduites ». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* La zone qui reçoit le focus du lien d'évitement n'est pas un élément
   interactif : pas d'anneau autour de toute la page. */
#contenu:focus, main:focus { outline: none; }

/* ==========================================================================
   4. PERSONNALISATION DE L'INTERFACE SYSTÈME
   ========================================================================== */

::selection {
  background: var(--edr-copper);
  color: #FFFFFF;
}

/* Barre de défilement — moteur WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
  background: var(--edr-void);
}
::-webkit-scrollbar-thumb {
  background: var(--edr-tyr);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--edr-copper);
  box-shadow: 0 0 10px var(--edr-tyr-glow);
}

/* Barre de défilement — Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--edr-tyr) var(--edr-void);
}

/* ==========================================================================
   5. BOUTONS — les trois états du Design System
   ========================================================================== */
.edr-btn-primary,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button {
  background: var(--edr-tyr);
  color: #FFFFFF;
  border: 1.5px solid transparent;
  border-radius: 26px;
  padding: 12px 28px;
  font-family: var(--edr-sans);
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

/* Survol : inversion vers le Cuivre Alchimique + lueur (braise alchimique). */
.edr-btn-primary:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--edr-copper);
  color: var(--edr-void);
  box-shadow: 0 0 24px rgba(182, 122, 88, .45);
}

.edr-btn-ghost {
  background: none;
  color: var(--edr-copper);
  border: 1.5px solid var(--edr-copper);
  border-radius: 26px;
  padding: 12px 28px;
  font-weight: 600;
}
.edr-btn-ghost:hover {
  background: var(--edr-copper);
  color: var(--edr-void);
}

/* ==========================================================================
   6. FORMULAIRES — libellés au-dessus, états lisibles
   ========================================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--edr-input);
  color: var(--edr-t1);
  border: 1px solid var(--edr-border);
  border-radius: var(--edr-radius-sm);
  min-height: var(--edr-touch);
  padding: 12px 16px;
  font-size: 16px;              /* < 16 px déclenche un zoom sur iOS         */
  font-family: var(--edr-sans);
}

::placeholder { color: var(--edr-t3); opacity: 1; }

label,
.woocommerce form .form-row label {
  display: block;
  color: var(--edr-t2);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Erreur : le liseré utilise le Carmin, le TEXTE utilise le Carmin clair.
   Le Carmin d'origine plafonne à 4,16:1 sur Les Nébuleuses — insuffisant. */
input:invalid, .edr-field-error input, .woocommerce-invalid input.input-text {
  border-color: var(--edr-carmin);
  border-width: 1.5px;
}
.edr-field-error .edr-help,
.woocommerce-error, .woocommerce-error li {
  color: var(--edr-carmin-lt);
}

.woocommerce-message, .woocommerce-info {
  background: var(--edr-nebula);
  border-top-color: var(--edr-copper);
  color: var(--edr-t2);
}
.woocommerce-message::before, .woocommerce-info::before {
  color: var(--edr-copper);
}
.woocommerce-error {
  background: var(--edr-nebula);
  border-top-color: var(--edr-carmin);
}

/* — Formulaires Elementor.
     Elementor génère une feuille de style par widget, avec des sélecteurs
     plus spécifiques que les nôtres : sans !important, les règles ci-dessus
     sont écrasées. Le choix assumé est de garder la charte dans ce fichier
     plutôt que dispersée dans les panneaux de l'éditeur. — */
.elementor-field-group .elementor-field-textual,
.elementor-field-group select.elementor-field-textual,
.elementor-field-group textarea.elementor-field-textual {
  min-height: var(--edr-touch);
  padding: 12px 16px;
  border: 1px solid var(--edr-border) !important;
  border-radius: var(--edr-radius-sm) !important;
  background-color: var(--edr-input) !important;
  color: var(--edr-t1) !important;
  font-family: var(--edr-sans);
  font-size: 16px;
}
.elementor-field-group textarea.elementor-field-textual {
  min-height: 160px;
}
.elementor-field-group .elementor-field-textual::placeholder {
  color: var(--edr-t3) !important;
  opacity: 1;
}
.elementor-field-group > label.elementor-field-label {
  margin-bottom: 8px;
  color: var(--edr-t2) !important;
  font-family: var(--edr-sans);
  font-size: 14px;
  font-weight: 600;
}
.elementor-field-group .elementor-field-option label {
  color: var(--edr-t2) !important;
  font-family: var(--edr-sans);
  font-size: 15px;
}
.elementor-field-group .elementor-field.elementor-error {
  border-color: var(--edr-carmin) !important;
  border-width: 1.5px !important;
}
.elementor-form .elementor-message-danger {
  color: var(--edr-carmin-lt) !important;
}
.elementor-form .elementor-message-success {
  color: var(--edr-success) !important;
}

/* Bouton d'envoi : Elementor enveloppe le libellé dans un <span> qui porte
   sa propre couleur — sans la règle « inherit », le fond passe au cuivre
   mais le texte reste blanc. */
.elementor-form .elementor-button {
  padding: 12px 28px;
  border: 1.5px solid transparent;
  border-radius: 26px;
  background-color: var(--edr-tyr) !important;
  color: #FFFFFF !important;
  font-family: var(--edr-sans);
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.elementor-form .elementor-button .elementor-button-content-wrapper,
.elementor-form .elementor-button .elementor-button-text {
  color: inherit !important;
}
.elementor-form .elementor-button:hover,
.elementor-form .elementor-button:focus {
  background-color: var(--edr-copper) !important;
  color: var(--edr-void) !important;
  box-shadow: 0 0 24px rgba(182, 122, 88, .45);
}

/* ==========================================================================
   7. WOOCOMMERCE — surcharges du mode sombre
   PRO Elements maquette les gabarits ; ces règles rattrapent ce que
   WooCommerce rend lui-même (tableaux, badges, comptes, tunnel).
   ========================================================================== */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-cart table.cart td.actions {
  background: transparent;
  border-color: var(--edr-border);
  color: var(--edr-t2);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
  font-family: var(--edr-serif);
  color: var(--edr-t1);
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background: var(--edr-copper);
  color: var(--edr-void);
  font-weight: 600;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--edr-t1);
  font-weight: 700;
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--edr-copper); }

/* Étapes du tunnel (stepper) : voir le guide, étape 9. */
.edr-stepper { display: flex; justify-content: space-between; list-style: none;
  margin: 0 0 var(--edr-s4); padding: 0; counter-reset: edr; }
.edr-stepper li { flex: 1; text-align: center; font-size: 14px;
  color: var(--edr-t3); position: relative; }
.edr-stepper li::before { counter-increment: edr; content: counter(edr);
  display: grid; place-items: center; width: 38px; height: 38px;
  margin: 0 auto 10px; border-radius: 50%; border: 1.5px solid var(--edr-border);
  font-weight: 700; }
.edr-stepper li::after { content: ""; position: absolute; top: 19px;
  left: calc(-50% + 26px); right: calc(50% + 26px); height: 1.5px;
  background: var(--edr-border); }
.edr-stepper li:first-child::after { display: none; }
.edr-stepper li[aria-current] { color: var(--edr-t1); font-weight: 600; }
.edr-stepper li[aria-current]::before { background: var(--edr-tyr);
  border-color: var(--edr-copper); color: #fff; }
.edr-stepper li.is-done::before { background: var(--edr-copper);
  border-color: var(--edr-copper); color: var(--edr-void); }
.edr-stepper li.is-done::after { background: var(--edr-copper); }

/* ==========================================================================
   8. ESPACE CLIENT — « Mes fiches »
   Le gabarit natif de WooCommerce, rattrapé sur la mise en page, la
   navigation, les tableaux et les formulaires de compte. Champs de saisie,
   messages et boutons portant la classe .alt sont déjà couverts par les
   sections 5 à 7 : rien n'est redit ici.
   ========================================================================== */

/* — Cadre général de toutes les pages du compte — */
.woocommerce-account .woocommerce {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--edr-s6) var(--edr-s3) var(--edr-s12);
}

/* — Navigation du compte : des cartes, cible tactile pleine — */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 var(--edr-s4);
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0 0 var(--edr-s1);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: var(--edr-touch);
  padding: 0 var(--edr-s2);
  border: 1px solid var(--edr-border);
  border-radius: var(--edr-radius);
  background: transparent;
  color: var(--edr-t2);
  font-family: var(--edr-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  border-color: var(--edr-copper);
  color: var(--edr-t1);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--edr-tyr);
  border-color: var(--edr-tyr);
  color: #FFFFFF;
}

/* — Encadrés : connexion, inscription, adresses, détails — */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields,
.woocommerce-account .woocommerce-Address address {
  padding: var(--edr-s3);
  border: 1px solid var(--edr-border);
  border-radius: var(--edr-radius);
  background: var(--edr-nebula);
  color: var(--edr-t2);
  font-style: normal;
}
.woocommerce-account .woocommerce-Address {
  margin-bottom: var(--edr-s3);
}
.woocommerce-account .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: var(--edr-s1);
  margin: 0 0 var(--edr-s2);
  color: var(--edr-t2);
  font-size: 14px;
}
.woocommerce-account .woocommerce-LostPassword a {
  font-size: 14px;
}

/* — Boutons du compte : WooCommerce ne leur met pas la classe .alt,
     la section 5 ne les couvre donc pas. — */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button.button,
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account form button.button {
  min-height: var(--edr-touch);
  padding: 12px 28px;
  border: 1.5px solid transparent;
  border-radius: 26px;
  background: var(--edr-tyr);
  color: #FFFFFF;
  font-family: var(--edr-sans);
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-Button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account form button.button:hover {
  background: var(--edr-copper);
  color: var(--edr-void);
  box-shadow: 0 0 24px rgba(182, 122, 88, .45);
}

/* — Tableaux : commandes et téléchargements.
     La section 7 pose les couleurs, on ajoute le relief. — */
.woocommerce-account table.shop_table {
  width: 100%;
  margin: 0 0 var(--edr-s3);
  border: 1px solid var(--edr-border);
  border-radius: var(--edr-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
  padding: 14px var(--edr-s2);
  border-bottom: 1px solid var(--edr-border);
  font-family: var(--edr-sans);
  font-size: 15px;
  text-align: left;
  vertical-align: middle;
}
.woocommerce-account table.shop_table thead th {
  background: var(--edr-nebula);
  color: var(--edr-t1);
  font-weight: 600;
}
.woocommerce-account table.shop_table tbody tr:last-child td {
  border-bottom: 0;
}
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions,
.woocommerce-account table.shop_table td.download-actions {
  text-align: right;
}

/* — Messages : « aucun téléchargement pour l'instant », etc.
     Couleurs héritées de la section 7, on n'ajoute que la forme. — */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  border-radius: var(--edr-radius);
}

/* — Téléphone : les tableaux de WooCommerce s'empilent en blocs étiquetés.
     On rend ces étiquettes lisibles sur fond sombre. — */
@media (max-width: 767px) {
  .woocommerce-account table.shop_table tbody tr {
    display: block;
    margin-bottom: var(--edr-s2);
    border-bottom: 1px solid var(--edr-border);
  }
  .woocommerce-account table.shop_table td::before {
    color: var(--edr-t3);
    font-weight: 600;
  }
  .woocommerce-account table.shop_table td.download-actions,
  .woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions {
    text-align: left;
  }
}

/* — Deux colonnes à partir de la tablette. En deçà tout s'empile :
     le mobile est le comportement par défaut, l'ordinateur l'exception. — */
@media (min-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: left;
    width: 26%;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    float: right;
    width: 70%;
  }
  .woocommerce-account .u-columns.col2-set .col-1,
  .woocommerce-account .u-columns.col2-set .col-2 {
    float: left;
    width: 48%;
  }
  .woocommerce-account .u-columns.col2-set .col-2 {
    float: right;
  }
  /* Sans ce nettoyage, les colonnes flottantes débordent du conteneur
     et le pied de page remonte par-dessus. */
  .woocommerce-account .woocommerce::after,
  .woocommerce-account .u-columns.col2-set::after {
    content: "";
    display: block;
    clear: both;
  }
}

/* ==========================================================================
   9. IMPRESSION — le fond sombre ne part pas à l'imprimante
   ========================================================================== */
@media print {
  body { background: #FFFFFF !important; color: #000000 !important; }
  .site-header, .site-footer, .edr-skip-link { display: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 11pt; }
}

/* Espace client : les fichiers d'abord */
add_filter( 'woocommerce_account_menu_items', function ( $items ) {
	$reordonne = array();
	if ( isset( $items['downloads'] ) ) {
		$reordonne['downloads'] = 'Mes fiches';
		unset( $items['downloads'] );
	}
	return array_merge( $reordonne, $items );
}, 20 );


/* Lien d'évitement : trouve la zone de contenu sur toutes les pages,
   même quand aucun bloc ne porte l'identifiant « contenu ». */
add_action( 'wp_footer', function () { ?>
<script>
(function () {
	var lien = document.querySelector('.edr-skip-link');
	if (!lien || document.getElementById('contenu')) return;
	var cible = document.querySelector('main[id]') || document.getElementById('content');
	if (!cible) {
		cible = document.querySelector('main') ||
			document.querySelector('[data-elementor-type="wp-page"], [data-elementor-type="product"], [data-elementor-type="product-archive"]');
		if (cible) cible.id = 'contenu';
	}
	if (!cible) return;
	if (cible.id !== 'contenu') lien.setAttribute('href', '#' + cible.id);
	if (!cible.hasAttribute('tabindex')) cible.setAttribute('tabindex', '-1');
})();
</script>
<?php } );