/*
Theme Name:   Astra Child – Emmaüs Var
Description:  Thème enfant d'Astra pour Emmaüs Var. Tout le CSS personnalisé du site est dans ce fichier (voir CLAUDE.md) ; le CSS additionnel du Customizer reste vide.
Author:       Emmaüs Var
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* Les blocs ci-dessous reprennent tel quel l'ancien CSS additionnel (article custom_css 14 d'Astra, sauvegarde :
   backups/css-additionnel-20261004-1512.css), dans le même ordre. */

/* ==========================================================================
   1. Divers (repris de l'ancien CSS additionnel)
   ========================================================================== */

/* Titres H2 en blanc dans le conteneur de classe « 2806 ».
   NB : un nom de classe commençant par un chiffre n'est pas un sélecteur CSS valide,
   cette règle est donc ignorée par les navigateurs (conservée telle quelle, sans effet). */
.2806 h2{
    color: #FFFFFF !important;
}

/* Footer : pas de marge haute */
.ast-hfb-header .site-footer{
	padding-top:0;
}

/* ==========================================================================
   2. Formulaires WPForms
   ========================================================================== */

.wpforms-form .wpforms-field-label {
  font-family: 'gabarito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.wpforms-form input[type=text],
.wpforms-form input[type=email],
.wpforms-form textarea {
  border-radius: 16px !important;
  border: 1px solid #ccc !important;
}

/* Bouton d'envoi façon pilule bleu marine */
.wpforms-form button[type=submit],
.wpforms-form .wpforms-submit {
  background-color: #022d72 !important;   /* bleu marine, à ajuster */
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;          /* forme pilule */
  padding: 14px 18px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.wpforms-form button[type=submit]:hover,
.wpforms-form .wpforms-submit:hover {
  background-color: white !important;
	color: #022d72 !important;
}

/* Flèche du bouton d'envoi (SVG en masque) */
.wpforms-form button[type=submit]::after,
.wpforms-form .wpforms-submit::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.025 15.6834C11.8667 15.6834 11.7083 15.6251 11.5833 15.5001C11.3417 15.2584 11.3417 14.8584 11.5833 14.6168L16.2 10.0001L11.5833 5.38343C11.3417 5.14176 11.3417 4.74176 11.5833 4.5001C11.825 4.25843 12.225 4.25843 12.4667 4.5001L17.525 9.55843C17.7667 9.8001 17.7667 10.2001 17.525 10.4418L12.4667 15.5001C12.3417 15.6251 12.1833 15.6834 12.025 15.6834Z' fill='white'/%3E%3Cpath d='M16.9417 10.625H2.91666C2.57499 10.625 2.29166 10.3417 2.29166 10C2.29166 9.65833 2.57499 9.375 2.91666 9.375H16.9417C17.2833 9.375 17.5667 9.65833 17.5667 10C17.5667 10.3417 17.2833 10.625 16.9417 10.625Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.025 15.6834C11.8667 15.6834 11.7083 15.6251 11.5833 15.5001C11.3417 15.2584 11.3417 14.8584 11.5833 14.6168L16.2 10.0001L11.5833 5.38343C11.3417 5.14176 11.3417 4.74176 11.5833 4.5001C11.825 4.25843 12.225 4.25843 12.4667 4.5001L17.525 9.55843C17.7667 9.8001 17.7667 10.2001 17.525 10.4418L12.4667 15.5001C12.3417 15.6251 12.1833 15.6834 12.025 15.6834Z' fill='white'/%3E%3Cpath d='M16.9417 10.625H2.91666C2.57499 10.625 2.29166 10.3417 2.29166 10C2.29166 9.65833 2.57499 9.375 2.91666 9.375H16.9417C17.2833 9.375 17.5667 9.65833 17.5667 10C17.5667 10.3417 17.2833 10.625 16.9417 10.625Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.wpforms-form button[type=submit]:hover::after,
.wpforms-form .wpforms-submit:hover::after {
  transform: translateX(4px);
  background-color: #022d72;
}

/* ==========================================================================
   3. Boutons Elementor : flèche animée au survol
   ========================================================================== */

/* Transition douce sur l'icône de tous les boutons Elementor */
.elementor-button .elementor-button-icon svg,
.elementor-button .elementor-button-icon i {
  transition: transform 0.25s ease-in-out !important;
}

/* Au survol du bouton, l'icône se décale vers la droite */
.elementor-button:hover .elementor-button-icon svg,
.elementor-button:hover .elementor-button-icon i {
  transform: translateX(5px);
}

/* Change la couleur de l'icône SVG au survol du bouton */
.elementor-button:hover .elementor-button-icon svg,
.elementor-button:hover .elementor-button-icon svg path,
.elementor-button:hover .elementor-button-icon svg line,
.elementor-button:hover .elementor-button-icon svg polyline,
.elementor-button:hover .elementor-button-icon svg circle {
  stroke: #022d72 !important;
  fill: #022d72 !important;
}

/* ==========================================================================
   4. Header : sous-menus (menu déroulant desktop)
   ========================================================================== */

/* Réduit la taille du texte des sous-menus */
.main-header-menu .sub-menu .menu-link,
.ast-header-navigation .sub-menu a {
  font-size: 12px !important;
}

.sub-menu .menu-item {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* ==========================================================================
   5. Pastilles (sur-titres) – voir CLAUDE.md
   ========================================================================== */

/* Largeur au contenu (le contrôle Largeur d'Elementor n'a pas d'option « auto ») */
.e-con.pastille { --width: auto; width: auto; }
/* L'icône ne doit pas hériter de l'interligne du body (40,86 px) */
.pastille .elementor-icon-wrapper { display: flex; }
/* Texte en span : bloc (même raison) et capitales */
.pastille .elementor-heading-title { display: block; text-transform: uppercase; }
/* Même animation que l'icône des boutons Elementor */
.pastille .elementor-icon i,
.pastille .elementor-icon svg { transition: transform 0.25s ease-in-out; }
.pastille:hover .elementor-icon i,
.pastille:hover .elementor-icon svg { transform: translateX(5px); }

/* Variante bleue (voir CLAUDE.md) : fond #D8DFEE, texte et icône en couleur globale accent */
.e-con.pastille.pastille--bleue { background-color: #D8DFEE; }
.pastille--bleue .elementor-icon,
.pastille--bleue .elementor-icon i { color: var(--e-global-color-accent); }
.pastille--bleue .elementor-icon svg { fill: var(--e-global-color-accent); }
.pastille--bleue .elementor-heading-title { color: var(--e-global-color-accent); }

/* ==========================================================================
   6. Header mobile (≤ 921 px, panneau latéral Astra) – voir CLAUDE.md « Responsive »
   ========================================================================== */

/* Bouton « Ramassage gratuit » en pleine largeur en bas du panneau, zone tactile ≥ 48 px */
.ast-mobile-popup-content .ast-header-button-1 { width: 100%; padding: 24px; }
.ast-mobile-popup-content .ast-header-button-1 .ast-builder-button-wrap,
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button-link { display: block; width: 100%; }
.ast-mobile-popup-content .ast-header-button-1 .ast-custom-button { display: flex; align-items: center; justify-content: center; min-height: 48px; text-align: center; }

/* Liens du sous-menu dans le panneau : 15 px (le bloc 4 les réduit à 12 px pour le menu déroulant desktop) */
@media (max-width: 921px) {
	.ast-mobile-popup-content .main-header-menu .sub-menu .menu-link { font-size: 15px !important; }
}

/* Chevron du sous-menu (« Lieux ») : centré sur la ligne du lien. Astra le place à top:14px avec l'interligne
   du body (3 × la taille du texte), ce qui le décalait vers le bas. Même hauteur que le lien : 14 px + 1,2em + 14 px
   (espacement réglé dans Astra : header-mobile-menu-menu-spacing). */
.ast-mobile-popup-content .ast-builder-menu-mobile .main-navigation .menu-item.menu-item-has-children > .ast-menu-toggle {
	top: 0; height: calc(28px + 1.2em); padding-top: 0; padding-bottom: 0; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   7. Header desktop entre 922 et 1100 px : menu sur une seule ligne
   (Astra affiche le header desktop dès 922 px ; à 1024 px le menu passait sur 2 lignes.
   Aucun effet au-dessus de 1100 px.)
   ========================================================================== */
@media (min-width: 922px) and (max-width: 1100px) {
	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link { padding-left: 10px; padding-right: 10px; }
	#ast-desktop-header .ast-header-button-1 .ast-custom-button { white-space: nowrap; }
}

/* ==========================================================================
   8. Tablette et mobile : formulaires – voir CLAUDE.md « Responsive »
   ========================================================================== */

/* Champs WPForms (accueil, Contact) : zone tactile ≥ 44 px en tablette et mobile (38 px en desktop, inchangé). */
@media (max-width: 1024px) {
	.wpforms-form input[type=text],
	.wpforms-form input[type=email] { min-height: 44px; }
}

/* ==========================================================================
   9. Footer entre 922 et 1024 px : zones tactiles ≥ 44 px
   (Astra y affiche le footer desktop : liens de 32 px, icônes de 40 px. Aucun effet à 1025 px et au-delà.)
   ========================================================================== */
@media (min-width: 922px) and (max-width: 1024px) {
	/* Liens du menu : 32 → 44 px de haut (6 px au-dessus et au-dessous), 44 px de large au minimum (« Dons », « Lieux ») ;
	   sélecteur avec l’id du menu pour passer devant la règle Astra « #astra-footer-menu .menu-item > a { padding: 0 } » */
	.site-footer #astra-footer-menu .menu-item > .menu-link { padding-top: 6px; padding-bottom: 6px; min-width: 44px; }
	/* Icônes sociales : 20 px + 2 × 12 px = 44 px (au lieu de 2 × 10 px) */
	.site-footer .ast-footer-social-1-wrap .ast-builder-social-element { padding: 12px; }
}

/* ==========================================================================
   10. Contenus provisoires : repère « [À FOURNIR — …] » bien visible
   (Contact, 2026-10-04 : à retirer au fur et à mesure que les contenus réels arrivent.)
   ========================================================================== */
.a-fournir {
	display: inline-block;
	padding: 2px 8px;
	border: 2px dashed #B00020;
	border-radius: 4px;
	background-color: #FFE8EC;
	color: #B00020;
	font-weight: 700;
	line-height: 1.4;
}

/* ==========================================================================
   11. Liens téléphone (tel:) dans les textes : zone tactile ≥ 44 px
   (13 px ajoutés au-dessus et au-dessous, compensés par une marge négative : la mise en page ne bouge pas.)
   ========================================================================== */
.elementor-widget-text-editor a[href^="tel:"] { display: inline-block; padding: 13px 0; margin: -13px 0; }