/*
Theme Name:  Vitame Manche - Child
Theme URI:   https://vitame-manche.fr
Description: Thème enfant Astra du site Vitame Manche. Réalisé par MATRYS.
Author:      MATRYS
Author URI:  https://matrys.fr
Template:    astra
Version:     1.2.2
Text Domain: vitame-manche-child
*/

/* ================================================================================
   Squelette de thème enfant MATRYS (Astra + Spectra 3). Issu du chantier Indiya Charms
   (septembre 2026), généralisé. Contient UNIQUEMENT ce que les attributs de blocs ne
   savent pas faire : structure, pseudo-éléments, états, responsive fin, contournements
   Astra et Spectra. Couleurs, tailles, paddings du contenu = attributs de blocs
   (data-color, data-size, data-pad du convertisseur), jamais ici.

   Thème du site Vitame Manche. La DA propre au site vit dans assets/css/vitame.css,
   chargé après ce socle.
   Préfixe des classes du thème : mx-. Les classes m-* sont celles de la convention
   de templates (m-card, m-band, m-h2), posées par le convertisseur.
   ================================================================================ */

/* ---------------------------------------------------------------- jetons
   Un seul endroit où la palette Astra (9 slots, convention astra.md) est nommée.
   Si un projet dévie de la convention, on remappe ici, pas dans les règles. */
:root {
	--mx-accent:   var(--ast-global-color-0);   /* marque */
	--mx-accent-2: var(--ast-global-color-1);   /* marque foncée, survols */
	--mx-titre:    var(--ast-global-color-2);
	--mx-texte:    var(--ast-global-color-3);
	--mx-fond:     var(--ast-global-color-4);   /* blanc */
	--mx-fond-2:   var(--ast-global-color-5);   /* teinte très claire */
	--mx-sombre:   var(--ast-global-color-6);   /* fond alternatif sombre */
	--mx-filet:    var(--ast-global-color-7);
	--mx-appoint:  var(--ast-global-color-8);

	--mx-r: 24px;        /* rayon des cartes et encadrés */
	--mx-r-s: 16px;      /* rayon secondaire */
	--mx-ombre: 0 20px 50px -30px rgba(0, 0, 0, .35);
	--mx-ease: cubic-bezier(.2, .7, .2, 1);

	/* Largeur de contenu Astra ; --mx-gauche = marge qui aligne un enfant à max-width
	   sur le bord gauche du contenu dans une section constrained (voir « mise en page »). */
	--mx-contenu: 1200px;
	--mx-gauche: max(0px, calc((100% - var(--mx-contenu)) / 2));
}

/* ================================================================ mise en page globale */

/* Astra pose une marge verticale de 4em sur #primary en contenu pleine largeur et
   1.5em sous l'article en conteneur séparé : le rythme est porté par les sections. */
#primary, .ast-separate-container #primary, .ast-plain-container #primary { margin-top: 0 !important; margin-bottom: 0 !important; }
.ast-plain-container #primary { padding-top: 0; padding-bottom: 0; }
.ast-separate-container .ast-article-single { margin-bottom: 0; }

/* Astra pose 20 px de padding sur l'article des pages « page builder », à toutes les
   largeurs : les sections alignfull ne le sont pas vraiment (gouttières blanches). */
.ast-page-builder-template .site-main > article { padding-left: 0 !important; padding-right: 0 !important; }

/* Un alignfull en 100vw déborde de la largeur de la barre de défilement : 8 px de
   défilement horizontal fantôme. clip (pas hidden) garde les positions sticky. */
html, body { overflow-x: clip; }

/* Dans une section constrained, tout enfant à max-width reçoit des marges auto et se
   centre. Pour le caler à gauche du contenu, on ne met pas 0 (il partirait au bord de
   l'écran) mais la même marge que le centrage. Poser la classe sur la section. */
.mx-gauche > .wp-block-spectra-content,
.mx-gauche > .wp-block-list,
.mx-gauche > .wp-block-table { margin-left: var(--mx-gauche) !important; }
.mx-gauche > h1, .mx-gauche > .m-lead { max-width: 60ch; }
.mx-gauche > p, .mx-gauche > .wp-block-list { max-width: 75ch; }

/* Confort de lecture : un paragraphe seul dans une section ne dépasse pas 70 caractères. */
.spectra-is-root-container > .wp-block-spectra-content:where(p) { max-width: 70ch; }

/* ================================================================ patterns de la convention */

/* Carte cliquable qui contient déjà un lien : stretched link, à la place de htmlTag a. */
.m-card-link { position: relative; }
.m-card-link a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.m-card-link a { position: static; }

/* Ligne texte + image dont le texte doit rester premier sur mobile (orientationReverse
   n'est pas responsive dans Spectra 1.0.x). */
@media (max-width: 767px) {
	.m-row-text-first { flex-direction: column !important; }
	.m-row-text-first > *:first-child { order: 1; }
	.m-row-text-first > *:last-child { order: 2; }
}

/* Onglets verticaux : restent en ligne sous 480 px malgré la surcharge responsive. */
@media (max-width: 480px) {
	.m-tabs-vertical { flex-direction: column !important; }
	.m-tabs-vertical .wp-block-spectra-tabs-child-tab-wrapper { flex: 1 1 auto !important; width: 100% !important; }
}

/* Ratios homogènes dans les grilles de photos. */
.m-ratio-43 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.m-ratio-11 img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.wp-block-image img { width: 100%; object-fit: cover; }

/* Placeholder MATRYS : entier et lisible, jamais rogné. */
.wp-block-image img[src*="placeholder"], .wp-block-image img[srcset*="placeholder"] { object-fit: contain; background: var(--mx-fond-2); }

/* Étapes numérotées : le numéro est un cercle fixe. */
.wp-block-spectra-container.m-step .m-step-num {
	width: 40px; height: 40px; min-width: 40px; display: flex !important; align-items: center; justify-content: center;
	border-radius: 999px; padding: 0 !important; margin-bottom: .4em;
}
.wp-block-spectra-container.m-step .m-step-num span { line-height: 1; }

/* Encadré (m-band) : chapô centré et borné. */
.wp-block-spectra-container.m-band .m-lead { max-width: 60ch; margin-left: auto; margin-right: auto; }
.wp-block-spectra-container.m-band h2 { max-width: 24ch; margin-left: auto; margin-right: auto; }

/* Blocs sombres (data-color="#fff" sur le conteneur) : la couleur des textes est en
   attribut, mais la règle générique des liens de contenu (0,3,1) battrait celle du bloc ;
   liens et survols restent donc ici, blancs soulignés. Poser mx-sombre sur le bloc. */
:is(.entry-content, [class*="astra-advanced-hook-"]) .mx-sombre :is(p, li) a:not(.wp-block-spectra-button) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mx-sombre a.wp-block-spectra-button.has-background:hover { background: rgba(255, 255, 255, .12) !important; border-color: #fff !important; }

/* Liens dans le contenu : marque foncée (contraste sur fond clair). */
:is(.entry-content, [class*="astra-advanced-hook-"]) p a:not(.wp-block-spectra-button), :is(.entry-content, [class*="astra-advanced-hook-"]) li a, .forminator-ui .forminator-consent a { color: var(--mx-accent-2); }

/* ================================================================ tableaux (core/table) */
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table { margin: 8px 0 0 var(--mx-gauche) !important; max-width: var(--mx-contenu); width: 100%; }
:is(.entry-content, [class*="astra-advanced-hook-"]) table { border-collapse: collapse; width: 100%; background: var(--mx-fond); border-radius: var(--mx-r-s); overflow: hidden; }
:is(.entry-content, [class*="astra-advanced-hook-"]) th, :is(.entry-content, [class*="astra-advanced-hook-"]) td { padding: 14px 18px; border-bottom: 1px solid var(--mx-filet); text-align: left; vertical-align: top; }
:is(.entry-content, [class*="astra-advanced-hook-"]) th { font-size: 13px; font-weight: 500; background: var(--mx-fond-2); }
:is(.entry-content, [class*="astra-advanced-hook-"]) td a { color: var(--mx-titre); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
	/* Plus large que l'écran : défile dans sa boîte (display block sur table garde
	   thead et tbody dans une même table anonyme, donc alignés). */
	:is(.entry-content, [class*="astra-advanced-hook-"]) table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	:is(.entry-content, [class*="astra-advanced-hook-"]) table th, :is(.entry-content, [class*="astra-advanced-hook-"]) table td { min-width: 130px; }
}

/* ================================================================ FAQ (spectra/accordion)
   Valeurs par défaut du bloc : barres grises, bordure gris 210, question en 300.
   Les !important sont nécessaires : Spectra pose fond et couleurs par bloc. */
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion { gap: 12px; background: none !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-item { background: var(--mx-fond-2) !important; border: 1px solid var(--mx-filet) !important; border-radius: var(--mx-r-s) !important; overflow: hidden; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 18px 22px !important; background: transparent !important; border: 0; text-align: left; cursor: pointer;
}
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header-content { font-size: 20px !important; font-weight: 500 !important; line-height: 1.3; color: var(--mx-titre) !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header.is-active .wp-block-spectra-accordion-child-header-content { color: var(--mx-accent-2) !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header-icon {
	flex: 0 0 32px; width: 32px !important; height: 32px !important; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; background: var(--mx-fond); color: var(--mx-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header-icon svg { width: 14px; height: 14px; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-details { padding: 0 22px 20px !important; font-size: 16px; line-height: 1.65; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-details p { margin: 0 0 10px; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-details p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
	:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header { padding: 14px 16px !important; }
	:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header-content { font-size: 17px !important; }
	:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-details { padding: 0 16px 16px !important; }
}
/* FAQ en H3 (plan Hn imposé) : réponse rapprochée de sa question. */
.m-faq h3 { margin-top: 1.5em; }
.m-faq h3 + p { margin-top: .4em; }

/* ================================================================ formulaires Forminator dans une carte */
.mx-form .forminator-ui .forminator-input,
.mx-form .forminator-ui .forminator-textarea,
.mx-form .forminator-ui .forminator-select .selection .select2-selection { background: var(--mx-fond) !important; border: 1px solid var(--mx-filet) !important; border-radius: 12px !important; }
.mx-form .forminator-ui .forminator-input:focus,
.mx-form .forminator-ui .forminator-textarea:focus { border-color: var(--mx-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-accent) 15%, transparent) !important; }
.mx-form .forminator-ui .forminator-button-submit { border-radius: 999px !important; background: var(--mx-accent) !important; padding: 14px 28px !important; }
.mx-form .forminator-ui .forminator-button-submit:hover { background: var(--mx-accent-2) !important; }
.mx-form-note { font-size: 13px; color: var(--mx-texte); opacity: .8; }

/* ================================================================ modale Spectra en Custom Layout (site-wide)
   Le déclencheur natif est masqué : l'ouverture se fait depuis les liens du site
   (assets/js/modal-trigger.js). Trois pièges réglés ici :
   1. le wrapper du Custom Layout (container Spectra) reste static à hauteur nulle : en
      absolute il allonge le document (bande blanche sous le footer), en fixed il crée un
      contexte d'empilement et Spectra force z-index:auto !important sur les containers
      quand la modale est active, la modale passe sous l'en-tête ;
   2. le déclencheur natif sort en fixed hors écran (en absolute, il allonge le document) ;
   3. line-height 0 du wrapper (évite le strut) rétabli dans le popup. */
.mx-modale-wrap { position: static !important; height: 0 !important; min-height: 0 !important; width: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible; }
div[class*="astra-advanced-hook"]:has(> .mx-modale-wrap) { height: 0; line-height: 0; overflow: visible; }
.mx-modale .spectra-modal-popup { line-height: 1.6; }
.mx-modale .spectra-modal-trigger { position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mx-modale .spectra-modal-popup { position: fixed; inset: 0; align-items: center !important; justify-content: center !important; padding: 24px 20px !important; }
.mx-modale .spectra-modal-popup-wrap { position: relative; max-width: 640px; width: 100%; max-height: none; overflow: visible; border-radius: var(--mx-r); }
.mx-modale .wp-block-spectra-modal-popup-content {
	width: 100% !important; max-width: none !important; max-height: calc(100vh - 128px); overflow-y: auto;
	padding: 36px 32px !important; background: var(--mx-fond); border-radius: var(--mx-r); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5);
}
/* Croix hors de la boîte (le wrap ne doit pas la couper : pas d'overflow sur le wrap). */
.mx-modale .spectra-modal-popup-close {
	position: absolute; top: -48px; right: 0; bottom: auto; left: auto; width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center; background: var(--mx-fond); border-radius: 999px; color: var(--mx-titre); cursor: pointer;
}
.mx-modale .spectra-modal-popup-close svg, .mx-modale .spectra-modal-popup-close svg path { width: 16px; height: 16px; fill: var(--mx-titre) !important; }
@media (max-width: 767px) {
	.mx-modale .spectra-modal-popup { padding: 64px 12px 16px !important; }
	.mx-modale .wp-block-spectra-modal-popup-content { max-height: calc(100vh - 80px); padding: 28px 20px !important; }
	.mx-modale h2 { font-size: 24px; }
	.mx-modale .forminator-ui .forminator-row { flex-direction: column; }
	.mx-modale .forminator-ui .forminator-row .forminator-col { max-width: 100%; flex: 0 0 100%; }
}

/* ================================================================ pied de page
   Sous 1200 px les colonnes s'empilent : tout centré. Les réglages footer-widget-* d'Astra
   sont sans effet sur les widgets de blocs, d'où les !important. */
@media (max-width: 1200px) {
	.site-footer .site-footer-section, .site-footer .footer-widget-area, .site-footer .widget,
	.site-footer .ast-builder-layout-element, .site-footer .footer-nav-wrap { text-align: center !important; justify-content: center !important; align-items: center !important; }
	.site-footer .widget .wp-block-image, .site-footer .widget figure { margin-left: auto; margin-right: auto; }
	.site-footer .widget .wp-block-buttons, .site-footer .widget .wp-block-social-links, .site-footer .widget .is-layout-flex { justify-content: center !important; }
	.site-footer .footer-nav-wrap .astra-footer-horizontal-menu, .site-footer .footer-nav-wrap .astra-footer-vertical-menu { justify-content: center; align-items: center; }
	.site-footer .wp-block-list li { text-align: center; }
}
.site-footer .ast-builder-html-element img { display: inline-block; }

/* ================================================================ en-tête transparent (méta de page Astra)
   La première section recule de la hauteur réelle de l'en-tête, mesurée par header.js
   (--mx-header-h), pour que le fond de page passe derrière la pilule sans cassure. */
:root { --mx-header-h: 190px; }
@media (max-width: 1200px) { :root { --mx-header-h: 110px; } }
.ast-theme-transparent-header .entry-content > .spectra-is-root-container:first-child { padding-top: calc(var(--mx-header-h) + 32px) !important; }

/* ================================================================ page 404 (Custom Layout type 404-page) */
.mx-404__code { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mx-accent-2); }
.mx-404 h1 { font-size: clamp(30px, 3.4vw, 44px); margin: 0; }

/* ================================================================ bloc collant Spectra (stickyContainer)
   Spectra pose le collant en position: fixed avec un z-index INLINE de 9999 : en fin de parent, le bloc
   remonte avec la page et passe par-dessus l'en-tête collant d'Astra (masthead, z-index 99). Seul
   !important surcharge un style inline. Sous 480 px (colonnes empilées), le collant est neutralisé. */
.spectra-sticky-container.spectra-sticky--active { z-index: 2 !important; }
@media (max-width: 480px) {
	.spectra-sticky-container { position: static !important; inset: auto !important; width: auto !important; }
}

/* ================================================================ pictos (blocs HTML, voir theme-enfant.md)
   <span class="mx-ico"><svg …Lucide, stroke currentColor, width/height 26…></span> dans un bloc core/html.
   Pastille carrée couleur marque sur fond clair, au trait sur fond sombre. */
.mx-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: flex-start; width: 52px; height: 52px; line-height: 0; background: var(--mx-accent); color: var(--mx-titre); border-radius: var(--mx-r-s); transition: transform .5s var(--mx-ease), background-color .3s ease, color .3s ease; }
.mx-ico svg { display: block; width: 26px; height: 26px; }
.mx-sombre .mx-ico { background: transparent; color: var(--mx-accent); box-shadow: inset 0 0 0 1px currentColor; }
.mx-ico--nu, .mx-sombre .mx-ico--nu { width: auto; height: auto; background: none; box-shadow: none; color: var(--mx-accent); }

/* ================================================================ apparitions au scroll (assets/js/reveal.js)
   Classes posées par le script sur les seuls éléments sous la ligne de flottaison au chargement :
   rien ne disparaît sans JS, rien ne clignote au-dessus de la ligne de flottaison. */
.mx-rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--mx-ease), transform .9s var(--mx-ease); transition-delay: calc(var(--mx-rv-i, 0) * 90ms); }
.mx-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mx-rv { opacity: 1; transform: none; transition: none; } }

/* ================================================================ identité visuelle du client
   Tout ce qui est propre à la DA (halos, pastilles, filets sous les titres, piles
   d'images...) vient ici, avec le préfixe du projet. Rien au-dessus de cette ligne
   ne doit dépendre du client. */