/* Theme Name: MAP - Mission Affaires du Père Theme URI: https://affairesdupere.fr Description: Thème bloc (FSE) sur-mesure pour l'association Mission Affaires du Père (MAP). Entièrement développé à la main, sans ACF ni plugins : champs, réglages, dons (Stripe) et formulaires sont intégrés au thème. Author: Web-Wave Author URI: https://www.web-wave.fr Version: 0.1.0 Requires at least: 6.5 Requires PHP: 7.4 Text Domain: affairesdupere */ /* Reset léger - le gros du style vit dans theme.json et dans les blocs. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; } /* --------------------------------------------------------------------------- Gouttière horizontale commune à tout le site. Les blocs PHP (header, footer, événements, archives, contact, dons) ont toujours eu une gouttière de 40px, mais les sections des pages en blocs natifs n'en avaient aucune : sur mobile le texte touchait les deux bords. Une seule valeur fluide, utilisée partout : 24px sur téléphone, puis 40px dès 800px de large, ce qui préserve le rendu des maquettes sur grand écran. --------------------------------------------------------------------------- */ :root { --map-gouttiere: clamp(24px, 5vw, 40px); } /* Sections de premier niveau des pages en blocs natifs (Accueil, Vision, Qui sommes-nous, Actions). Le fond reste pleine largeur : seul le contenu est rentré par rapport aux bords. */ .entry-content > section.wp-block-group.alignfull { padding-left: var(--map-gouttiere); padding-right: var(--map-gouttiere); } /* Héros de l'accueil : sa gouttière vient d'un style inline du bloc core/cover, d'où le !important pour l'aligner sur la gouttière commune. */ .home .wp-block-cover.alignfull { padding-left: var(--map-gouttiere) !important; padding-right: var(--map-gouttiere) !important; } /* Gabarits sans section de premier niveau : pages de détail des CPT (single-evenement, single-ressource), articles, recherche, 404. Leur
contraint le contenu mais ne porte que du padding vertical, d'où un texte collé aux bords sur mobile. Vaut aussi pour tout gabarit ajouté plus tard. */ .single main.wp-block-group, .search main.wp-block-group, .error404 main.wp-block-group, .archive main.wp-block-group { padding-left: var(--map-gouttiere); padding-right: var(--map-gouttiere); } img { max-width: 100%; height: auto; } /* Effet de survol commun a tous les boutons */ .map-btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; } .map-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(22,49,79,0.28) !important; filter: brightness(0.92); } /* Effet de survol commun a TOUTES les cartes du site (leger soulevement + ombre + bordure) */ .alt-cards4 > div, .pg-values > div, .pg-programs > div, .pg-pov > div, .pg-ways > div, .pg-ways > a, .map-evcard, .map-ev, .map-res > a { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .alt-cards4 > div:hover, .pg-values > div:hover, .pg-programs > div:hover, .pg-pov > div:hover, .pg-ways > div:hover, .pg-ways > a:hover, .map-evcard:hover, .map-ev:hover, .map-res > a:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(22,49,79,0.13) !important; border-color: #e0d4b8 !important; } /* Cartes en blocs natifs (pages converties en Gutenberg) : meme survol. Cible toute carte bordee dans une colonne (fond blanc ou creme). */ .wp-block-column > .wp-block-group.has-border-color { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .wp-block-column > .wp-block-group.has-border-color:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(22,49,79,0.13) !important; border-color: #e0d4b8 !important; } /* Heros de l'accueil (core/cover) : restaure les deux degrades de la maquette (creme depuis la gauche cote texte + or chaud par le bas) par-dessus l'image. Scope a la page d'accueil ; le bloc reste un core/cover editable. */ .home .wp-block-cover__background { background: linear-gradient(100deg,#f8f2e6 0%,rgba(248,242,230,0.9) 22%,rgba(248,242,230,0.5) 42%,rgba(248,242,230,0.08) 64%,rgba(248,242,230,0) 80%), linear-gradient(0deg,rgba(214,148,66,0.42) 0%,rgba(243,200,120,0.3) 45%,rgba(243,205,128,0.12) 100%) !important; opacity: 1 !important; } /* Le contenu du heros (texte) doit s'aligner sur le conteneur centre de la page (1200px), pas etre colle au bord gauche du viewport, tout en gardant l'image pleine largeur. */ .home .wp-block-cover__inner-container { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; } /* Effet de survol discret pour les liens-texte (ex. "En savoir plus") */ .map-link { transition: color .15s ease; } .map-link:hover { color: #5c7a4d !important; } /* En blocs natifs, map-link est sur le

et le lien est un a l'interieur : on style l' et on recree la fleche animee en ::after. */ .map-link a { color: inherit; text-decoration: none; } .map-link a::after { content: "\2192"; display: inline-block; margin-left: 9px; transition: transform .2s ease; } .map-link:hover a { color: #5c7a4d; } .map-link:hover a::after { transform: translateX(4px); } .map-link svg { transition: transform .2s ease; } .map-link:hover svg { transform: translateX(4px); } /* Bandeau CTA : le groupe flex occupe toute la largeur, le texte est borne (sinon il deborde et tout passe a la ligne), et le groupe d'actions (items + bouton) est pousse tout a droite. */ .map-cta-inner { width: 100%; } .map-cta-text { max-width: 400px; } .map-cta-actions { margin-left: auto; } /* Survol des liens du footer (liens rapides + e-mail) : passage en dore */ .map-footer-link { transition: color .2s ease; } .map-footer-link:hover { color: #e8c75a !important; } /* Apparition au scroll (commune a tout le site) */ .map-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; } .map-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .map-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }