/*
Theme Name: Hello Elementor Child — Pixel-Web
Theme URI: https://pixel-web.be/
Description: Thème enfant de Hello Elementor. Centralise tout le CSS écrit à la main du site Pixel-Web (aucun CSS dans les pages, les modèles Elementor ou le CSS additionnel).
Author: Pixel-Web
Author URI: https://pixel-web.be/
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* =====================================================================
   SOMMAIRE
   1. Header (modèle Theme Builder 14537)
   2. Footer (modèle Theme Builder 14538)
   3. Formulaire Contact Form 7 « Contact Pixel-Web » (page Contact)
   4. Liens sur fond sombre : survol (footer, fil d'Ariane, logos)
   5. Liens dans les textes (paragraphes)
   6. Pages légales (texte .pw-legal) + FAQ
   Les couleurs et polices viennent des variables globales Elementor (--pw-*).
   ===================================================================== */


/* 1. HEADER */
/* =====================================================================
   PW Header (Theme Builder, modèle 14537).
   Seulement ce que les réglages natifs ne savent pas faire :
   position fixe, état au défilement (classe .is-scrolled posée par pw-front.js),
   flou, survols et habillage du widget Menu (classique).
   ===================================================================== */

/* Header fixe, superposé au hero (la maquette a un header fixed de 84 px) */
.elementor-location-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
/* Décalage sous la barre d'administration WordPress (visiteurs connectés uniquement) */
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }

/* Transitions de l'état au défilement */
#pw-header { transition: background-color .35s ease, box-shadow .35s ease, color .35s ease; }
/* État au défilement : fond papier translucide + flou + filet bas, texte encre */
#pw-header.is-scrolled {
  background-color: rgba(243, 241, 236, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--pw-ink);
  box-shadow: 0 1px 0 var(--pw-line);
}
/* Bouton d'appel : passe en variante sombre au défilement */
#pw-header.is-scrolled #pw-header-cta .pw-btn { background-color: var(--pw-ink); color: var(--pw-white); }
#pw-header.is-scrolled #pw-header-cta .pw-arrow { background-color: var(--pw-cream); color: var(--pw-ink); }
/* Rotation de la flèche au survol du bouton entier (survol parent → enfant) */
#pw-header-cta .pw-btn:hover .pw-arrow { transform: rotate(-45deg); }
/* Bouton du header : version compacte de la maquette (14 px, flèche 32 px), libellé sur une ligne */
#pw-header-cta .pw-btn { white-space: nowrap; font-size: 14px; padding: 6px 6px 6px 18px; }
#pw-header-cta .pw-arrow { width: 32px; height: 32px; min-width: 32px; }

/* --- Menu principal (ordinateur) --- */
#pw-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 999px;
  font-family: var(--pw-font-body), sans-serif; font-size: 14px; font-weight: 600; line-height: 1.6;
  color: inherit; transition: background-color .25s ease;
}
#pw-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
#pw-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus-visible { background-color: rgba(255, 255, 255, .14); color: inherit; }
#pw-header.is-scrolled .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
#pw-header.is-scrolled .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus-visible { background-color: rgba(11, 13, 16, .06); }
#pw-header .elementor-nav-menu--main { --e-nav-menu-horizontal-menu-item-margin: 0; }
#pw-header .elementor-nav-menu--main .elementor-nav-menu { gap: 6px; }
/* Flèche du sous-menu : petite et alignée, comme le chevron de la maquette */
#pw-header .elementor-nav-menu--main .sub-arrow { margin: 0; padding: 0; font-size: 10px; line-height: 1; }

/* Sous-menu : carte blanche arrondie avec ombre */
#pw-header .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown {
  min-width: 240px !important; margin-top: 8px !important; padding: 8px;
  background-color: var(--pw-white); border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
}
#pw-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
  padding: 12px 14px; border-radius: 12px; border: 0;
  font-family: var(--pw-font-body), sans-serif; font-size: 14px; font-weight: 600; line-height: 1.6;
  color: var(--pw-ink); background-color: transparent;
}
#pw-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
#pw-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus-visible { background-color: var(--pw-paper); color: var(--pw-blue); }
#pw-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item::after { content: "→"; margin-left: auto; padding-left: 16px; }

/* --- Bouton du menu mobile (≤ 1100 px) : cercle bordé de 46 px --- */
#pw-header .elementor-menu-toggle {
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: 1.5px solid currentColor; background-color: transparent; color: inherit; font-size: 20px;
}
#pw-header .elementor-menu-toggle:focus-visible { outline: 2px solid var(--pw-cream); outline-offset: 3px; }

/* --- Menu mobile ouvert : panneau encre plein écran sous le header --- */
#pw-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  position: fixed !important; top: 84px !important; left: 0 !important; right: 0; width: 100% !important;
  height: calc(100vh - 84px); overflow-y: auto; margin: 0 !important; padding: 24px 16px;
  background-color: var(--pw-ink); color: var(--pw-white);
}
#pw-header nav.elementor-nav-menu--dropdown a.elementor-item {
  padding: 4px 0; background-color: transparent; color: var(--pw-white); border: 0;
  font-family: var(--pw-font-display), sans-serif; font-size: 46px; line-height: 1.15; text-transform: uppercase;
}
#pw-header nav.elementor-nav-menu--dropdown a.elementor-sub-item {
  padding: 4px 0 4px 4px; background-color: transparent; color: rgba(255, 255, 255, .75); border: 0;
  font-family: var(--pw-font-body), sans-serif; font-size: 17px; font-weight: 600;
}
#pw-header nav.elementor-nav-menu--dropdown a.elementor-sub-item::before { content: "→"; margin-right: 8px; }
#pw-header nav.elementor-nav-menu--dropdown a:hover,
#pw-header nav.elementor-nav-menu--dropdown a:focus-visible { background-color: transparent; color: var(--pw-cream); }
#pw-header nav.elementor-nav-menu--dropdown .sub-menu { padding-bottom: 14px; }
#pw-header nav.elementor-nav-menu--dropdown .sub-arrow { display: none; }
/* Sous-menu toujours déplié dans le panneau (comme la maquette) ; liens principaux sans marge interne */
#pw-header nav.elementor-nav-menu--dropdown .sub-menu { display: block !important; position: static !important; width: auto !important; margin: 0 !important; transform: none !important; }
/* Le <ul> du sous-menu porte aussi .elementor-nav-menu--dropdown : Elementor Pro lui met un fond blanc par défaut → liens blancs invisibles */
#pw-header nav.elementor-nav-menu--dropdown .sub-menu.elementor-nav-menu--dropdown { background-color: transparent; }
#pw-header nav.elementor-nav-menu--dropdown a.elementor-item { padding: 0; }
/* Header encre pendant que le menu mobile est ouvert */
#pw-header:has(.elementor-menu-toggle.elementor-active) { background-color: var(--pw-ink); color: var(--pw-white); }
/* Flèche du sous-menu (ordinateur) : même encombrement que le chevron de 10 px de la maquette */
#pw-header .elementor-nav-menu--main .sub-arrow { display: inline-flex; justify-content: center; width: 10px; }
/* Décalage du panneau sous la barre d'administration */
.admin-bar #pw-header .elementor-nav-menu--dropdown.elementor-nav-menu__container { top: 116px !important; height: calc(100vh - 116px); }

/* Mouvement réduit : pas de transitions */
@media (prefers-reduced-motion: reduce) {
  #pw-header, #pw-header * { transition: none !important; }
}


/* 2. FOOTER */
/* =====================================================================
   PW Footer (Theme Builder, modèle 14538).
   Seulement ce que les réglages natifs ne savent pas faire : mot géant en
   dégradé (background-clip: text), texte sur une ligne, bouton « retour en
   haut » fixe et masqué tant que pw-front.js n'a pas posé .is-visible.
   ===================================================================== */

/* Mot géant « Pixel-Web » : une seule ligne, dégradé blanc → transparent découpé dans le texte */
#pw-footer > .e-paragraph-base {
  white-space: nowrap;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .08));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Bouton retour en haut : fixe en bas à droite, apparaît en fondu */
#pw-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background-color .3s ease, color .3s ease;
}
#pw-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#pw-to-top:focus-visible { outline: 2px solid var(--pw-blue); outline-offset: 3px; }
#pw-to-top svg { transition: transform .3s ease; }
#pw-to-top:hover svg { transform: translateY(-3px); }
@media (max-width: 520px) { #pw-to-top { right: 16px; bottom: 16px; } }

/* Libellé du bouton réservé aux lecteurs d'écran */
#pw-to-top .e-paragraph-base {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  #pw-to-top, #pw-to-top svg { transition: none; }
}


/* 3. FORMULAIRE CONTACT FORM 7 */
/* =====================================================================
   Contact Form 7 « Contact Pixel-Web » — habillage limité au formulaire.
   Règles limitées à #pw-contact-form.
   Reproduit la carte formulaire de la maquette : 2 colonnes, pastilles radio,
   champs arrondis, bouton sombre à flèche, états focus / erreur / envoi / réponse.
   ===================================================================== */

/* Grille 2 colonnes ; les champs « pleine largeur » occupent toute la ligne */
#pw-contact-form .pw-cf7 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#pw-contact-form .pw-cf7 br { display: none; } /* retours à la ligne ajoutés par l'auto-paragraphe de CF7 */
#pw-contact-form .pw-cf7 p { margin: 0; } /* paragraphes ajoutés par l'auto-paragraphe de CF7 (marge du thème) */
#pw-contact-form .pw-cf7 .wpcf7-form-control-wrap { display: block; }
#pw-contact-form .pw-cf7 textarea { display: block; } /* pas d'espace de ligne de base sous le champ */
#pw-contact-form .pw-cf7 { margin-bottom: 16px; } /* rangée réservée au message d'état, comme la maquette */
#pw-contact-form .pw-cf7-field { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
#pw-contact-form .pw-cf7-full, #pw-contact-form .pw-cf7-foot { grid-column: 1 / -1; }

/* Libellés */
#pw-contact-form .pw-cf7 label, #pw-contact-form .pw-cf7 legend { font-family: var(--pw-font-body), sans-serif; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--pw-ink); }

/* Champs texte, e-mail et message */
#pw-contact-form .pw-cf7 input[type="text"],
#pw-contact-form .pw-cf7 input[type="email"],
#pw-contact-form .pw-cf7 textarea {
  width: 100%; box-sizing: border-box; margin: 0;
  padding: 15px 16px; border: 1.5px solid transparent; border-radius: 14px;
  background-color: var(--pw-paper); color: var(--pw-ink);
  font-family: var(--pw-font-body), sans-serif; font-size: 15px; line-height: 1.6;
  outline: none; transition: border-color .25s ease, background-color .25s ease;
}
#pw-contact-form .pw-cf7 textarea { min-height: 150px; height: 150px; resize: vertical; }
#pw-contact-form .pw-cf7 input:focus, #pw-contact-form .pw-cf7 textarea:focus { border-color: var(--pw-blue); background-color: var(--pw-white); }

/* Pastilles radio « Votre projet » : bouton natif masqué visuellement mais focusable */
#pw-contact-form .pw-cf7-choice { border: 0; padding: 0; margin: 0; }
#pw-contact-form .pw-cf7-choice legend { padding: 0; margin-bottom: 8px; }
#pw-contact-form .pw-cf7 .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; }
#pw-contact-form .pw-cf7 .wpcf7-list-item { margin: 0; }
#pw-contact-form .pw-cf7 .wpcf7-list-item label { position: relative; display: inline-block; cursor: pointer; }
#pw-contact-form .pw-cf7 .wpcf7-list-item input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
#pw-contact-form .pw-cf7 .wpcf7-list-item-label {
  display: inline-block; margin: 0; padding: 10px 16px; border: 1.5px solid var(--pw-line); border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--pw-ink); transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#pw-contact-form .pw-cf7 .wpcf7-list-item input:checked + .wpcf7-list-item-label { background-color: var(--pw-ink); color: var(--pw-white); border-color: var(--pw-ink); }
#pw-contact-form .pw-cf7 .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--pw-blue); outline-offset: 2px; }

/* Pied : mention + bouton d'envoi sombre avec flèche crème (comme .btn-dark) */
#pw-contact-form .pw-cf7-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
#pw-contact-form .pw-cf7-foot p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pw-muted); }
#pw-contact-form .pw-cf7 .wpcf7-submit {
  margin: 0; padding: 8px 60px 8px 22px; min-height: 54px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--pw-font-body), sans-serif; font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--pw-white);
  background-color: var(--pw-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38'%3E%3Ccircle cx='19' cy='19' r='19' fill='%23FFF4D6'/%3E%3Cpath d='M13 19h12M20 14l5 5-5 5' fill='none' stroke='%230B0D10' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 38px 38px;
  transition: background-color .3s ease;
}
#pw-contact-form .pw-cf7 .wpcf7-submit:hover { background-color: var(--pw-blue); }
#pw-contact-form .pw-cf7 .wpcf7-submit:focus-visible { outline: 2px solid var(--pw-blue); outline-offset: 3px; }
#pw-contact-form .pw-cf7 .wpcf7-spinner { margin: 0 0 0 8px; }

/* États : champ invalide, messages d'erreur, réponse (envoi réussi / échec) */
#pw-contact-form .pw-cf7 input.wpcf7-not-valid,
#pw-contact-form .pw-cf7 textarea.wpcf7-not-valid { border-color: #B3261E; }
#pw-contact-form .wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; font-weight: 600; color: #B3261E; }
#pw-contact-form .wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border: 1.5px solid var(--pw-blue); border-radius: 14px; font-size: 14px; font-weight: 600; color: var(--pw-blue); }
#pw-contact-form .wpcf7 form.invalid .wpcf7-response-output,
#pw-contact-form .wpcf7 form.failed .wpcf7-response-output,
#pw-contact-form .wpcf7 form.spam .wpcf7-response-output { border-color: #B3261E; color: #B3261E; }
#pw-contact-form .wpcf7 form.sent .wpcf7-response-output { border-color: #1E7B4E; color: #1E7B4E; }

/* Mobile : une seule colonne */
@media (max-width: 860px) {
  #pw-contact-form .pw-cf7 { grid-template-columns: 1fr; }
}
/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  #pw-contact-form .pw-cf7 * { transition: none !important; }
}


/* 4. LIENS SUR FOND SOMBRE */
/* =====================================================================
   Le kit Elementor met tous les liens en bleu foncé (#003C4F) au survol :
   illisible sur les fonds sombres. Survols repris de la maquette.
   (Les liens sont à l'intérieur des paragraphes : une classe globale
   Elementor ne peut pas les cibler.)
   ===================================================================== */

/* Footer : liens en blanc plein au survol */
#pw-footer .pw-footer-link a { transition: color .2s ease; }
#pw-footer .pw-footer-link a:hover,
#pw-footer .pw-footer-link a:focus-visible { color: var(--pw-white); }

/* Fil d'Ariane du hero des pages : couleur conservée, souligné au survol */
.pw-breadcrumb-link a:hover,
.pw-breadcrumb-link a:focus-visible { color: inherit; text-decoration: underline; }

/* Logos (header et footer) : pas de changement de couleur au survol */
#pw-header .pw-logo:hover, #pw-header .pw-logo:focus-visible,
#pw-footer .pw-logo:hover, #pw-footer .pw-logo:focus-visible { color: inherit; }


/* 5. LIENS DANS LES TEXTES */
/* Liens insérés dans un paragraphe (pas les éléments-liens d'Elementor, qui ont une classe) :
   soulignés pour être reconnus comme liens, soulignement plus marqué au survol. */
.e-paragraph-base a:not([class]) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-thickness .2s ease;
}
.e-paragraph-base a:not([class]):hover,
.e-paragraph-base a:not([class]):focus-visible { text-decoration-thickness: 2px; }

/* =====================================================================
   FAQ (accordéon atomique .pw-faq-item) — pages Sites vitrines / e-commerce
   ===================================================================== */
/* Le SVG du « + » est inline : posé sur la ligne de base, il descendait de 4 px dans la bulle → bloc centré */
.pw-faq-icon svg { display: block; }
/* Ouvert : le « + » pivote de 45° pour former un « × », comme la maquette (Elementor tourne de 180° par défaut) */
.pw-faq-item { --e-accordion-icon-rotation: 45deg; }
.pw-faq-icon svg { transition: transform .3s ease; }

/* =====================================================================
   6. PAGES LÉGALES (Mentions légales 15011, Confidentialité 3, Cookies 15015)
   Texte dans un widget « Éditeur de texte » à la classe .pw-legal
   ===================================================================== */
/* Hero : espace entre le titre et la date de mise à jour (même écart de 44 px que la grille du hero Contact) */
#pw-legal-date { margin-top: 44px; }
.pw-legal { max-width: 820px; color: var(--pw-muted); font-family: var(--pw-font-body), sans-serif; font-size: 17px; line-height: 1.7; }
.pw-legal > :first-child { margin-top: 0; }
.pw-legal h2 {
  margin: 56px 0 16px; color: var(--pw-ink);
  font-family: var(--pw-font-display), sans-serif; font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; text-transform: uppercase;
}
.pw-legal h3 { margin: 32px 0 8px; color: var(--pw-ink); font-family: var(--pw-font-body), sans-serif; font-size: 19px; font-weight: 700; line-height: 1.35; }
.pw-legal p { margin: 0 0 16px; }
.pw-legal strong { color: var(--pw-ink); font-weight: 700; }
.pw-legal ul { margin: 0 0 20px; padding: 0; list-style: none; }
.pw-legal li { position: relative; margin: 0 0 8px; padding-left: 22px; }
.pw-legal li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 8px; height: 8px; border-radius: 50%; background-color: var(--pw-blue); }
.pw-legal a { color: var(--pw-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pw-legal a:hover, .pw-legal a:focus-visible { text-decoration-thickness: 2px; }
/* Bouton « Modifier mes préférences cookies » (ouvre le panneau CookieYes) */
.pw-legal a.pw-legal-btn {
  display: inline-flex; align-items: center; margin-top: 8px; padding: 14px 24px; border-radius: 999px;
  background-color: var(--pw-ink); color: var(--pw-white); font-size: 15px; font-weight: 700; text-decoration: none; transition: background-color .2s ease;
}
.pw-legal a.pw-legal-btn:hover, .pw-legal a.pw-legal-btn:focus-visible { background-color: var(--pw-blue); color: var(--pw-white); }
.pw-legal a.pw-legal-btn:focus-visible { outline: 2px solid var(--pw-blue); outline-offset: 3px; }
/* Tableau des cookies injecté par CookieYes : défilement horizontal sur mobile */
.pw-legal .cky-audit-table-element { margin: 8px 0 24px; overflow-x: auto; }
.pw-legal table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.pw-legal th, .pw-legal td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--pw-line); text-align: left; vertical-align: top; background: transparent; }
.pw-legal th { color: var(--pw-ink); font-weight: 700; }
@media (max-width: 767px) {
  .pw-legal { font-size: 16px; }
  .pw-legal h2 { margin-top: 44px; }
}
/* Footer bas : liens vers les pages légales (à la place de la signature) */
#pw-legal-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 22px; width: auto; padding: 0; }
#pw-legal-links a { color: inherit; transition: color .2s ease; }
#pw-legal-links a:hover, #pw-legal-links a:focus-visible { color: var(--pw-white); }

/* COOKIEYES */
.cky-revisit-bottom-left {
	background-color: #003C4F !important;
}
.cky-btn.cky-btn-accept {
	background-color: #003C4F !important;
	border-color: #003C4F!important;
}
.cky-btn.cky-btn-reject, .cky-btn.cky-btn-preferences, .cky-btn.cky-btn-customize {
	color: #003C4F !important;
    border-color: #003C4F!important;
	background-color: #fff !important;
}
a.cky-policy {
	color:#003C4F !important;
}