/*
Theme Name:   Hello Elementor Child
Theme URI:    https://agence-bethauv.fr
Description:  Theme enfant de Hello Elementor pour le site de Lucie Roudaut, naturopathe. Polices auto-hebergees, charte par roles (WCAG AA), en-tete onepage, images et formulaire de contact.
Author:       Agence Bethauv
Author URI:   https://agence-bethauv.fr
Template:     hello-elementor
Version: 2.7.1
Text Domain:  hello-elementor-child
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ===== CHARTE GLOBALE - Site Lucie Roudaut (WCAG AA) - v10/09/2026 =====
   Depuis la v1.7.0, la charte est reglee NATIVEMENT dans Elementor :
   Reglages du site > Couleurs globales / Polices globales / Typographie
   (corps, liens, H1-H4, tailles mobiles) / Boutons / Arriere-plan.
   "Couleurs et polices par defaut" d'Elementor desactivees (Elementor > Reglages)
   pour que chaque widget herite de ces reglages.
   Ci-dessous : UNIQUEMENT ce qu'Elementor ne propose pas. */
:root {
  --terre:  #95714F; --mousse: #8C916C; --sauge: #ACB087; --sable: #C7AF94; --amande: #EADED0;
  --terre-fonce:  #8A683F; --mousse-fonce: #75795A; --sauge-fonce: #757950; --sable-fonce: #91704C;
  --encre: #1A1A1A; --texte-secondaire: #5C5C5C; --blanc: #FFFFFF; --creme: #F5EFE3; --cremecarte: #FCFAF4; --fond-logo: #F6F0EF;
}
/* Espacement des titres hors widgets Elementor (pages legales) */
h1, h2, h3, h4 { margin: 0 0 0.5em; }
small { font-size: 1rem; color: var(--texte-secondaire); }

/* Bouton "contour" : classe a saisir dans Avance > Classes CSS du widget Bouton.
   Bordure et survol viennent du reglage global des boutons (texte encre = contraste AA sur tout fond clair). */
.elementor-widget.btn--outline .elementor-button { background-color: transparent; color: var(--e-global-color-text); fill: currentColor; }
.elementor-widget.btn--outline .elementor-button svg { fill: currentColor; }
.elementor-widget.btn--outline .elementor-button:hover,
.elementor-widget.btn--outline .elementor-button:focus { background-color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); color: var(--e-global-color-blanc); }

/* Focus visible (navigation clavier, WCAG 2.4.7) - pas de reglage natif */
a:focus-visible, .elementor-button:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--terre-fonce); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* ===== FORMULAIRE DE CONTACT - presentation de la maquette HTML (v10/09/2026) =====
   Le formulaire est un shortcode du theme enfant : pas de reglage Elementor possible.
   Bordure des champs en sable fonce (et non #D9CCB4 de la maquette) : contraste 3:1 exige pour les champs. */
.lucie-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
.lucie-form p { margin: 0; grid-column: 1 / -1; }
.lucie-form p:nth-of-type(2), .lucie-form p:nth-of-type(3) { grid-column: auto; }
.lucie-form label { display: block; font-weight: 700; font-size: 1rem; margin-bottom: .4375rem; color: var(--e-global-color-inksoft); }
.lucie-form input[type=text], .lucie-form input[type=email], .lucie-form textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--e-global-color-ink);
  background: var(--e-global-color-cremecarte); border: 1.5px solid var(--sable-fonce); border-radius: 1rem; padding: .8125rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lucie-form input[type=text]:focus, .lucie-form input[type=email]:focus, .lucie-form textarea:focus { border-color: var(--e-global-color-mousse); box-shadow: 0 0 0 4px rgba(140,145,108,.3); }
.lucie-form textarea { resize: vertical; }
.lucie-form .lf-consent label { font-weight: 400; display: block; position: relative; padding-left: 2rem; line-height: 1.5;}
.lucie-form .lf-consent input { position: absolute; left: 0; top: .35rem; margin: 0;}
.lucie-form button[type=submit] { width: 100%; padding: 1.0625rem 2.125rem; }
.lucie-form .lf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) {
  .lucie-form { grid-template-columns: 1fr; }
  .lucie-form p:nth-of-type(2), .lucie-form p:nth-of-type(3) { grid-column: 1 / -1; }
}
.form-notice { padding: .8rem 1rem; border-radius: 10px; font-weight: 600; margin-bottom: 1rem; }
.form-ok { background: #E6F0E0; color: #2F5D1E; }
.form-err { background: #F6E2DC; color: #8A3D2A; }

/* ===== EN-TETE ONEPAGE (Hello Elementor) - v10/09/2026 =====
   Regle nativement dans Elementor > Reglages du site > En-tete Hello :
   taille du logo (ordinateur / mobile), slogan masque (deja dans l'accueil),
   largeur du contenu, fond, couleurs et typos du menu (globales du kit),
   bouton burger, marges laterales.
   Ci-dessous : UNIQUEMENT ce que ces reglages ne proposent pas. */
html { scroll-behavior: smooth; }
/* Decalage des ancres = hauteur de l'en-tete collant + marge.
   A ajuster si la taille du logo change (logo 130px de large = en-tete ~163px). */
[id] { scroll-margin-top: 11rem; }
@media (max-width: 767px) { [id] { scroll-margin-top: 7rem; } }

/* En-tete collant en haut de l'ecran + legere ombre */
#site-header.site-header {
  position: sticky; top: 0; z-index: 100;
  padding-block: .5rem;
  box-shadow: 0 1px 6px rgba(26, 26, 26, .06);
}

/* Effet "verre" de l'en-tete (03/10/2026) : fond blanc a 85 % + flou du contenu
   qui defile dessous. Le fond blanc du reglage Elementor reste le repli.
   - opacite elevee volontairement : le menu garde un contraste AA (mesure 4,96:1) ;
   - desactive si la personne demande moins de transparence ou si le navigateur
     ne gere pas backdrop-filter (fond blanc opaque alors). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (prefers-reduced-transparency: no-preference) {
    #site-header.site-header {
      background-color: rgba(255, 255, 255, .85);
      -webkit-backdrop-filter: blur(12px) saturate(1.05);
      backdrop-filter: blur(12px) saturate(1.05);
    }
  }
}
#site-header .header-inner { align-items: center; justify-content: flex-start; gap: .75rem; }
#site-header .site-branding { margin-inline-end: auto; } /* logo a gauche, menu + telephone a droite */
#site-header .site-logo img { height: auto; }

/* Menu ordinateur : zone cliquable, survol et focus (contraste AA) */
#site-header .site-navigation ul.menu { align-items: center; gap: .2rem .5rem; margin: 0; }
#site-header .site-navigation ul.menu > li > a {
  font-size: 1.125rem; text-decoration: none;
  padding: .5rem .55rem; border-radius: .5rem;
}
#site-header .site-navigation ul.menu > li > a:hover,
#site-header .site-navigation ul.menu > li > a:focus-visible {
  color: var(--e-global-color-text); background-color: var(--e-global-color-amande);
}

/* Bouton burger : cible tactile de 44px minimum */
#site-header .site-navigation-toggle { min-width: 2.75rem; min-height: 2.75rem; }

/* Telephone cliquable : canal de contact principal, visible en permanence
   (ajoute par template-parts/dynamic-header.php du theme enfant) */
#site-header .header-tel {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: .35rem 1rem;
  font-family: var(--e-global-typography-secondary-font-family), Georgia, serif;
  font-weight: var(--e-global-typography-secondary-font-weight);
  font-size: 1.125rem; line-height: 1.2; white-space: nowrap; text-decoration: none;
  color: var(--e-global-color-primary);
  border: 2px solid var(--e-global-color-primary); border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
#site-header .header-tel svg { width: 1.1em; height: 1.1em; flex: none; }
#site-header .header-tel:hover,
#site-header .header-tel:focus-visible {
  color: var(--e-global-color-blanc); background-color: var(--e-global-color-primary);
}

/* Bloc contact de l'en-tete (17/09/2026) : telephone, puis icones Facebook et
   Instagram en dessous (template-parts/dynamic-header.php + inc/reseaux-sociaux.php).
   Fonds blancs : le texte et les icones restent lisibles par-dessus la spirale
   de fond de l'en-tete. */
#site-header .header-contact { display: flex; flex-direction: column; align-items: center; gap: .125rem; flex: none; }
#site-header .header-tel { background-color: var(--e-global-color-blanc); }
#site-header .header-reseaux { display: flex; justify-content: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
#site-header .header-reseaux .reseau {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; /* cible tactile de 44px */
  color: var(--e-global-color-primary); background-color: var(--e-global-color-blanc);
  text-decoration: none; transition: background-color .2s ease, color .2s ease;
}
#site-header .header-reseaux .reseau svg { width: 1.375rem; height: 1.375rem; }
#site-header .header-reseaux .reseau:hover,
#site-header .header-reseaux .reseau:focus-visible {
  color: var(--e-global-color-text); background-color: var(--e-global-color-amande);
}

/* Ordinateur etroit (993 a 1199px : menu encore affiche, burger a partir de 992px).
   On resserre les espacements du menu pour que tout tienne sur une ligne. */
@media (min-width: 993px) and (max-width: 1199px) {
  #site-header .header-inner { gap: .5rem; }
  #site-header .site-navigation ul.menu { gap: .2rem .25rem; }
  /* Menu a 1rem (16px, minimum de la charte) : sinon l'en-tete passe sur deux lignes. */
  #site-header .site-navigation ul.menu > li > a { font-size: 1rem; padding-inline: .35rem; }
}

/* Mobile : logo, bloc contact (telephone + reseaux) et burger sur une ligne */
@media (max-width: 767px) {
  #site-header .header-inner { flex-wrap: nowrap; gap: .5rem; }
  #site-header .site-navigation-toggle-holder { padding-inline: 0; }
  #site-header .header-contact { gap: 0; }
}
@media (max-width: 359px) {
  #site-header .header-tel { font-size: 1rem; padding-inline: .7rem; gap: .35rem; }
}

/* Section Contact de l'accueil : icones des reseaux (code court [reseaux_lucie]),
   meme style que les pastilles d'informations (sauge 100, icone mousse profond). */
.contact-reseaux { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.contact-reseaux .reseau {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 1rem;
  color: var(--e-global-color-mossdeep); background-color: var(--e-global-color-sage100);
  text-decoration: none; transition: background-color .2s ease, color .2s ease;
}
.contact-reseaux .reseau svg { width: 1.25rem; height: 1.25rem; }
.contact-reseaux .reseau:hover,
.contact-reseaux .reseau:focus-visible {
  color: var(--e-global-color-blanc); background-color: var(--e-global-color-mossdeep);
}

/* Menu deroulant mobile/tablette : aux couleurs de la charte */
#site-header .site-navigation-dropdown ul.menu {
  background-color: var(--e-global-color-blanc); /* meme fond que l'en-tete (reglage natif) */
  box-shadow: 0 6px 12px rgba(26, 26, 26, .08);
}
#site-header .site-navigation-dropdown ul.menu li a {
  background-color: transparent;
  color: var(--e-global-color-primary);
  font-family: var(--e-global-typography-secondary-font-family), Georgia, serif;
  font-weight: var(--e-global-typography-secondary-font-weight);
  font-size: 1.125rem; text-decoration: none;
  padding: 1rem 1.25rem;
  box-shadow: inset 0 -1px 0 var(--e-global-color-amande);
}
#site-header .site-navigation-dropdown ul.menu li a:hover,
#site-header .site-navigation-dropdown ul.menu li a:focus-visible {
  color: var(--e-global-color-text); background-color: var(--e-global-color-amande);
}
#site-header .site-navigation-dropdown ul.menu li a:focus-visible { outline-offset: -2px; }

/* ===== SPIRALE DE FOND DE L'ACCUEIL : grandit au fil du defilement (17/09/2026) =====
   Spirale de la carte de visite, vectorisee (assets/img/spirale-lucie.svg, 15 Ko,
   nette a toute taille). Fixe au centre de l'ecran, derriere le contenu :
   - en haut de page : invisible ; elle apparait, grandit et tourne doucement
     pendant le defilement, jusqu'a occuper toute la largeur en bas de page ;
   - opacite 10 % : toile de fond, sans gener la lecture ;
   - animation CSS pilotee par le defilement, sans JavaScript ;
   - navigateur sans support, ou animations limitees par la personne :
     spirale fixe, a 60 % de la largeur ;
   - aucun clic capte (pointer-events: none). */
body.home::after {
  content: ""; position: fixed; z-index: 0; left: 50%; top: 50%;
  width: 100vw; aspect-ratio: 360 / 319; translate: -50% -50%;
  background: url("assets/img/spirale-lucie.svg") center / contain no-repeat;
  opacity: .1; scale: .6; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body.home::after { animation: bethauv-spirale-fond linear both; animation-timeline: scroll(root block); }
    @keyframes bethauv-spirale-fond {
      0%   { opacity: 0;   scale: .06; rotate: -180deg; }
      12%  { opacity: .1; }
      100% { opacity: .1;  scale: .2;   rotate: 0deg; }
    }
  }
}
/* La spirale passe au-dessus des fonds de sections (couleurs inchangees),
   mais sous leur contenu : textes, cartes, photos et pied de page restent devant. */
body.home #content .e-con.e-parent > :not(.elementor-absolute) { position: relative; z-index: 1; }
body.home #site-footer { position: relative; z-index: 1; }

/* ===== PAGES DE CONTENU CLASSIQUE (mentions legales, politique de confidentialite) =====
   Pages sans Elementor : on aere sous l'en-tete et on limite la longueur de ligne
   (une ligne de 1140 px est trop longue a lire). Ne touche pas les pages Elementor. */
body:not(.elementor-page) .site-main { padding-block: 3rem 4.5rem; padding-inline: 1.25rem; }
body:not(.elementor-page) .site-main > * { max-width: 46rem; }
/* adresses e-mail et liens longs : autoriser la coupure sur les petits ecrans */
body:not(.elementor-page) .site-main { overflow-wrap: anywhere; }

/* ===== PIED DE PAGE : mention « Site realise par Agence Bethauv » (17/09/2026) =====
   Ligne centree sous le logo, le menu et les mentions du pied de page
   (template-parts/dynamic-footer.php). Couleurs et police globales du kit. */
#site-footer .footer-credit {
  display: flex; justify-content: center;
  margin-block-start: 1.5rem; padding: 1.25rem 1.25rem 0;
  border-block-start: 1px solid var(--e-global-color-amande);
}
#site-footer .footer-credit__lien {
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 2.75rem; padding: .25rem .5rem; border-radius: .5rem;
  font-size: .8rem; color: var(--e-global-color-text);
}
#site-footer .footer-credit__lien img { width: auto; height: 3rem; flex: none; }
#site-footer .footer-credit__lien:hover,
#site-footer .footer-credit__lien:focus-visible { background-color: var(--e-global-color-amande); }

/* ===== ANIMATIONS D'ENTREE ELEMENTOR : respect de la preference systeme (21/09/2026) =====
   Elementor gratuit n'honore pas "Reduire les animations" du systeme : les conteneurs
   restent masques (elementor-invisible) puis s'animent quand meme.
   Ici, pour les personnes qui ont demande a limiter les animations : contenu affiche
   immediatement, sans mouvement. Aucune ligne de JavaScript. */
@media (prefers-reduced-motion: reduce) {
  .elementor-invisible { visibility: visible !important; animation: none !important; }
  .animated { animation: none !important; }
}

/* Pastille ronde autour du logo du site (en-tete et pied de page).
   Un seul fichier de logo, affiche aux deux endroits.
   Le logo est plus haut que large : reduit a 62 % pour que le nom ne soit pas rogne. */
#site-header .site-logo a,
#site-footer .site-logo a {
  display: grid; place-items: center;
  aspect-ratio: 1;
  background-color: var(--fond-logo);
  border-radius: 50%;
}
#site-header .site-logo a { width: 9rem; }
#site-footer .site-logo a { width: 7.5rem; }
#site-header .site-logo a img,
#site-footer .site-logo a img { width: 62%; height: auto; }

/* Tailles selon la largeur d'ecran. A placer APRES la regle de base :
   une media query n'ajoute pas de specificite, c'est l'ordre qui tranche. */
@media (min-width: 993px) and (max-width: 1199px) {
  #site-header .site-logo a { width: 7rem; }
}
@media (max-width: 767px) {
  #site-header .site-logo a { width: 5rem; }
}