/* ========================================================================== oh-stages-shortcodes.css Styles pour les shortcodes stages (sans Divi) À placer dans : oh-site/assets/css/oh-stages-shortcodes.css ========================================================================== */ /* ── 1. PALETTE GLOBALE ET THÈMES ───────────────────────────────────────── */ :root { --oh-noir: #000000; --oh-blanc: #ffffff; --oh-gris: #888888; --oh-fond-gris: #f2f3f3; --oh-rouge: #cc0000; /* couleur "peu de places" */ /* Palette par page */ --oh-col-accueil: rgb(148, 21, 21); --oh-col-cours-adultes-huile-acrylique: rgb(30, 94, 85); --oh-col-cours-adultes-aquarelle: rgb(147, 146, 20); --oh-col-cours-enfants: #8a1555; --oh-col-cours-adolescent: #8a1555; --oh-col-cours-adolescents-bande-dessinee:#8a1555; --oh-col-stages: rgb(41, 120, 193); --oh-col-cheques-cadeaux: rgb(31, 28, 99); --oh-col-pedagogie: rgb(30, 94, 63); --oh-col-atelier-libre: rgb(238, 174, 0); /* Variable dynamique utilisée par le site (Fallback = Noir) */ --oh-theme: var(--oh-noir); } /* ── 2. MAPPING DES THEMES PAR SLUG BODY ───────────────────────────────── */ body.accueil { --oh-theme: var(--oh-col-accueil); } body.cours-adultes-huile-acrylique { --oh-theme: var(--oh-col-cours-adultes-huile-acrylique); } body.product_cat-cours_ad_huile { --oh-theme: var(--oh-col-cours-adultes-huile-acrylique); } body.cours-adultes-aquarelle { --oh-theme: var(--oh-col-cours-adultes-aquarelle); } body.product_cat-cours_ad_an_aquarelle { --oh-theme: var(--oh-col-cours-adultes-aquarelle); } body.product_cat-cours_essai { --oh-theme: var(--oh-col-cours-adultes-aquarelle); } body.cours-enfants { --oh-theme: var(--oh-col-cours-enfants); } body.product_cat-cours_enfant { --oh-theme: var(--oh-col-cours-enfants); } body.cours-adolescents-bande-dessinee { --oh-theme: var(--oh-col-cours-adolescents-bande-dessinee); } body.product_cat-cours_adolescent { --oh-theme: var(--oh-col-cours-adolescents-bande-dessinee); } body.cours-adolescent { --oh-theme: var(--oh-col-cours-adolescent); } body.stages { --oh-theme: var(--oh-col-stages); } body.cat-product-stage { --oh-theme: var(--oh-col-stages); } body.product_cat-solde { --oh-theme: var(--oh-col-stages); } body.cheques-cadeaux { --oh-theme: var(--oh-col-cheques-cadeaux); } body.pedagogie { --oh-theme: var(--oh-col-pedagogie); } body.atelier-libre { --oh-theme: var(--oh-col-atelier-libre); } /* ── 3. MAPPING DES IMAGES HERO PAR SLUG BODY ──────────────────────────── */ body.accueil { --oh-hero-img: url('https://ohlesbeauxjours.org/wp-content/uploads/2026/03/accueil-500x.jpg'); } body.cours-adultes-huile-acrylique { --oh-hero-img: url('https://ohlesbeauxjours.org/wp-content/uploads/2023/02/ohlesbeauxjours4-1920x1080-2.jpg'); } body.cours-adultes-aquarelle { --oh-hero-img: url('https://ohlesbeauxjours.org/wp-content/uploads/2026/03/4169c647-8e14-4a47-894a-90c179e03b51.jpg'); } body.cours-enfants { --oh-hero-img: url('https://ohlesbeauxjours.org/wp-content/uploads/2024/09/ohlesbeauxjours13-1920x1080-1.jpg'); } body.cours-adolescents-bande-dessinee { --oh-hero-img: url('https://ohlesbeauxjours.org/wp-content/uploads/2025/08/image7-horizontal.jpeg'); } body.stages { --oh-hero-img: url('https://ohlesbeauxjours.org/wp-content/uploads/2026/01/IMG_8547.jpeg'); } body.product_cat-solde { --oh-hero-img: url('https://ohlesbeauxjours.org/wp-content/uploads/2026/01/IMG_8547.jpeg'); } body.cheques-cadeaux { --oh-hero-img: url('https://ohlesbeauxjours.org/wp-content/uploads/2019/10/accueil2-1920x1280.jpg'); } body.pedagogie { --oh-hero-img: url('https://ohlesbeauxjours.org/wp-content/uploads/2026/03/Claire-Arnal-1280x1080px.jpg'); } body.atelier-libre { --oh-hero-img: url('https://ohlesbeauxjours.org/wp-content/uploads/2021/01/stage-huile-ete-21.jpeg'); } /* ── 4. BASE DES BOUTONS ────────────────────────────────────────────────── */ /* ========================================================================== NOTICE D'UTILISATION DU SYSTÈME DE BOUTONS & ICÔNES (OH LES BEAUX JOURS) ========================================================================== 1. SUR UN BLOC BOUTON GUTENBERG NATIF : ---------------------------------- Dans le panneau latéral droit > Avancé > Classes CSS additionnelles : - Bouton Plein (Thème) : oh-btn-primaire - Bouton Contour (Outline) : oh-btn-secondaire - Bouton Désactivé / Complet: oh-btn-complet * Note : Pour ajouter une icône dans un bloc Bouton WP natif, basculez le bloc en "Modifier en HTML" et ajoutez la balise avant le texte. 2. EN HTML PUR (BLOC HTML PERSONNALISÉ / PHP) : ------------------------------------------ Mon Texte 3. GESTION DES COULEURS PAR PAGE : ------------------------------ La couleur globale est pilotée par la variable `--oh-theme`. Le PHP ajoute le slug de page au (ex: body.cours-adultes-huile-acrylique). Chaque page remappe automatique sa couleur sans toucher au CSS des boutons. ========================================================================== */ /* ── 1. BASE UNIVERSELLE DES BOUTONS ────────────────────────────────────── */ .wp-block-button.oh-btn .wp-block-button__link, .oh-btn-primaire .wp-block-button__link, .oh-btn-secondaire .wp-block-button__link, .oh-btn-complet .wp-block-button__link, a.oh-btn, a.oh-btn-primaire, a.oh-btn-secondaire, a.oh-btn-complet { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-decoration: none !important; border-radius: 4px !important; box-shadow: none !important; cursor: pointer !important; transition: all 0.2s ease-in-out !important; } /* ── 2. VARIANTES DE BOUTONS ────────────────────────────────────────────── */ /* PRIMAIRE (Fond Thème -> Outline au survol) */ .wp-block-button.oh-btn-primaire .wp-block-button__link, .oh-btn-primaire .wp-block-button__link, a.oh-btn-primaire { background-color: var(--oh-theme) !important; background: var(--oh-theme) !important; color: var(--oh-blanc) !important; border: 1px solid var(--oh-theme) !important; } .wp-block-button.oh-btn-primaire .wp-block-button__link:hover, .oh-btn-primaire .wp-block-button__link:hover, a.oh-btn-primaire:hover { background-color: var(--oh-blanc) !important; background: var(--oh-blanc) !important; color: var(--oh-theme) !important; border-color: var(--oh-theme) !important; } /* SECONDAIRE (Outline -> Fond Thème au survol) */ .wp-block-button.oh-btn-secondaire .wp-block-button__link, .oh-btn-secondaire .wp-block-button__link, a.oh-btn-secondaire { background-color: var(--oh-blanc) !important; background: var(--oh-blanc) !important; color: var(--oh-theme) !important; border: 1px solid var(--oh-theme) !important; } .wp-block-button.oh-btn-secondaire .wp-block-button__link:hover, .oh-btn-secondaire .wp-block-button__link:hover, a.oh-btn-secondaire:hover { background-color: var(--oh-theme) !important; background: var(--oh-theme) !important; color: var(--oh-blanc) !important; border-color: var(--oh-theme) !important; } /* COMPLET / DÉSACTIVÉ (Grisé, non cliquable) */ .wp-block-button.oh-btn-complet .wp-block-button__link, .oh-btn-complet .wp-block-button__link, a.oh-btn-complet { background-color: var(--oh-blanc) !important; background: var(--oh-blanc) !important; color: var(--oh-gris) !important; border: 1px solid var(--oh-gris) !important; cursor: not-allowed !important; pointer-events: none !important; opacity: 0.65 !important; } .wp-block-button.oh-btn-complet .wp-block-button__link:hover, .oh-btn-complet .wp-block-button__link:hover, a.oh-btn-complet:hover { background-color: var(--oh-blanc) !important; color: var(--oh-gris) !important; border-color: var(--oh-gris) !important; } /* Neutralisation du wrapper WP parent */ .wp-block-button.oh-btn, .wp-block-button.oh-btn-primaire, .wp-block-button.oh-btn-secondaire, .wp-block-button.oh-btn-complet { background: transparent !important; border: none !important; } /* ── 3. ICÔNES LUCIDE EN SVG MASQUE (100% CSS) ──────────────────────────── */ .oh-icone { display: inline-block; width: 1.1em; height: 1.1em; background-color: currentColor; /* Hérite de la couleur du texte */ mask-size: cover; -webkit-mask-size: cover; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } /* Calendrier */ .oh-icone-calendar { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } /* ── 5. DIVERS (SPÉCIFIQUE) ────────────────────────────────────────────── */ /* Espace au-dessus du bouton uniquement sur tablette/mobile quand les colonnes s'empilent */ @media (max-width: 781px) { .oh-btn-mobile-top { margin-top: 35px !important; } } /* ========================================================================== NOTICE D'UTILISATION DU SYSTÈME DE BOUTONS, LIENS & ICÔNES ========================================================================== 1. SUR UN BLOC BOUTON GUTENBERG NATIF : ---------------------------------- Dans le panneau latéral droit > Avancé > Classes CSS additionnelles : - Bouton Plein (Thème) : oh-btn-primaire - Bouton Contour (Outline) : oh-btn-secondaire - Bouton Désactivé / Complet : oh-btn-complet * Note : Pour ajouter une icône dans un bloc Bouton WP natif, basculez le bloc en "Modifier en HTML" et ajoutez la balise avant le texte. 2. EN HTML PUR / SHORTCODES (BALISES ) : ------------------------------------- a) LIENS TEXTES SIMPLES (Format texte avec survol coloré/souligné) : - Lien Primaire (Couleur Thème) : class="oh-lien-primaire" - Lien Secondaire (Fine bordure) : class="oh-lien-secondaire" Exemple : Voir le programme b) VRAIS BOUTONS (Même style visuel que les blocs Gutenberg) : Ajoutez simplement la classe `oh-btn` en modificateur d'aspect ! - Bouton Plein (Thème) : class="oh-lien-primaire oh-btn" - Bouton Contour (Outline) : class="oh-lien-secondaire oh-btn" Exemple : S'inscrire au stage 3. GESTION DES COULEURS PAR PAGE : ------------------------------ La couleur principale est pilotée par la variable `--oh-theme`. Chaque page/section remappe cette variable et l'ensemble des boutons et liens (simples ou pavés) s'adaptent automatiquement. ========================================================================== */ /* ========================================================================== LIENS & BOUTONS UNIFIÉS (oh-lien-primaire, oh-lien-secondaire, oh-btn) ========================================================================== */ /* ── 1. SOCLE COMMUN (Texte & Liens simples) ───────────────────────────── */ a.oh-lien-primaire, a.oh-lien-secondaire { display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.2s ease-in-out !important; } /* Lien Simple Primaire : Couleur thème -> Souligné au survol */ a.oh-lien-primaire:not(.oh-btn) { color: var(--oh-theme) !important; border-bottom: 2px solid transparent !important; } a.oh-lien-primaire:not(.oh-btn):hover { color: var(--oh-theme) !important; border-bottom-color: var(--oh-theme) !important; } /* Lien Simple Secondaire : Souligné fin -> Opacité au survol */ a.oh-lien-secondaire:not(.oh-btn) { color: var(--oh-theme) !important; border-bottom: 1px solid var(--oh-theme) !important; } a.oh-lien-secondaire:not(.oh-btn):hover { color: var(--oh-theme) !important; opacity: 0.8 !important; } /* ── 2. MODIFICATEUR "BOUTON" (Transformer n'importe quel en vrai bouton) ── */ a.oh-btn { padding: 13.5px 20px !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 1px !important; border-radius: 4px !important; box-shadow: none !important; gap: 0.5rem !important; border-bottom: none !important; /* Annule le soulignement des liens */ line-height: 1; /* (avec padding 13.5, ça fait une hauteur de 43px, comme pour les boutons WP) */ } /* BOUTON PRIMAIRE (Plein -> Contour au survol) */ a.oh-btn.oh-lien-primaire { background-color: var(--oh-theme) !important; background: var(--oh-theme) !important; color: var(--oh-blanc) !important; border: 1px solid var(--oh-theme) !important; } a.oh-btn.oh-lien-primaire:hover { background-color: var(--oh-blanc) !important; background: var(--oh-blanc) !important; color: var(--oh-theme) !important; border-color: var(--oh-theme) !important; } /* BOUTON SECONDAIRE (Contour -> Plein au survol) */ a.oh-btn.oh-lien-secondaire { background-color: var(--oh-blanc) !important; background: var(--oh-blanc) !important; color: var(--oh-theme) !important; border: 1px solid var(--oh-theme) !important; } a.oh-btn.oh-lien-secondaire:hover { background-color: var(--oh-theme) !important; background: var(--oh-theme) !important; color: var(--oh-blanc) !important; border-color: var(--oh-theme) !important; } /* ========================================================================== NOTICE : BLOC LISTE DE CONTACT (oh-liste-contact) ========================================================================== 1. STRUCTURE DU HTML (Bloc HTML Personnalisé dans Gutenberg) : ---------------------------------------------------------
09 53 25 55 38
06 15 23 00 20
contact@ohlesbeauxjours.org
2. COMMENT RAJOUTER FACILE MENT UNE NOUVELLE ICÔNE LUCIDE : ------------------------------------------------------- 1. Récupère le code SVG sur lucide.dev 2. Remplace les guillemets double (") par des apostrophes (') dans le SVG 3. Copie le SVG dans la fonction mask-image : .oh-icone-nom { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } ========================================================================== */ /* ========================================================================== LISTE DE CONTACT AVEC ICÔNES (.oh-liste-contact) ========================================================================== */ /* ── 1. NOUVELLES ICÔNES LUCIDE SVG (100% CSS) ──────────────────────────── */ .oh-icone-phone { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } .oh-icone-mail { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } .oh-icone-map { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } /* ── 2. STRUCTURE ET ALIGNEMENTS ────────────────────────────────────────── */ .oh-liste-contact { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; } /* Ligne avec icône */ .oh-liste-contact .oh-ligne { display: inline-flex; align-items: center; gap: 0.5rem; } /* Ligne d'indentation (ex: 2e numéro sous le premier) */ .oh-liste-contact .oh-indent { padding-left: 1.6em; /* Alignement automatique au millimètre */ } /* ═══════════════════════════════════════════════════════════════════════════ /* /* GÉNÉRAL /* /* ═══════════════════════════════════════════════════════════════════════════ */ p { font-size: 19px; line-height: 1.7em; font-weight: 400; } sup { bottom: 0.5em!important; font-size: 0.7em!important; } strong { font-weight: 600; } .fond-gris { background-color: var(--oh-fond-gris)!important; } /* Template Fond Gris */ body.page-template-ap-standard-fond-gris main { background-color: var(--oh-fond-gris); } /* ═══════════════════════════════════════════════════════════════════════════ /* /* EN-TÊTE (MENU) /* /* ═══════════════════════════════════════════════════════════════════════════ */ /* ── COULEURS ───────────────────────────────────── */ /* Cibler uniquement les liens du menu au survol */ .wp-block-navigation a:hover, .wp-block-navigation a:focus, .wp-block-navigation-item a:hover, .wp-block-navigation-item a:focus { text-decoration: none !important; color: var(--oh-theme) !important; } /* Item du menu sélectionné */ .current-menu-item a, .current-menu-ancestor > a { color: var(--oh-theme)!important; } /* Empêcher le retour à la ligne dans les sous-menus Gutenberg */ .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-submenu a { white-space: nowrap !important; } /* Permettre au sous-menu (ul) d'agrandir sa largeur selon le contenu */ .wp-block-navigation .wp-block-navigation-submenu { width: auto !important; max-width: none !important; } /* ── SUPPRIME LA FLÈCHE DE 'COMPTE' AU CLIC ───────────────────────────────── */ .wc-block-customer-account__caret { display: none; } /* ── 'OH LES BEAUX JOURS' SUR 2 LIGNES SUR MOBILE ────────────────────────── */ /* Style de base pour le titre */ .site-title-custom { font-family: inherit; /* Récupère la police du thème */ font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.542), 1.2rem); font-weight: 600; text-decoration: none; color: inherit; line-height: 1.2; display: inline-block; } /* :root :where(.wp-block-site-title) { font-family: var(--wp--preset--font-family--body); font-size: clamp(0.875rem, 0.875rem +((1vw - 0.2rem) * 0.542), 1.2rem); font-style: normal; font-weight: 600; } */ /* Sur écran mobile (780px et moins) : passage sur 2 lignes */ @media (max-width: 781px) { .site-title-custom .break-mobile { display: block; /* Force "les Beaux Jours" à passer à la ligne */ } } /* Sur ordinateur (plus de 780px) : reste sur 1 seule ligne */ @media (min-width: 782px) { .site-title-custom .break-mobile { display: inline; } } /* ── GAP S/MENU WC ────────────────────────── */ @media (max-width: 781px) { .menu-header-wc { gap:0; } } /* ── OUTFIT ────────────────────────── */ .wp-block-navigation a:focus, .wp-block-navigation a:active, .wp-block-navigation li:focus, .wp-block-navigation li:active, .wp-block-navigation button:focus, .wp-block-navigation button:active { outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; /* Supprime le flash gris/bleu natif iOS/Android */ } /* ── ESPACE ÉLÈVES S/ORDI ────────────────────────── */ @media (min-width: 782px) { li.wp-block-navigation-item.has-child.sous-menu-espace-eleves > a { background-color: var(--wp--preset--color--contrast); border-radius: 4px; padding: 6px 12px; } li.wp-block-navigation-item.has-child.sous-menu-espace-eleves > a span.wp-block-navigation-item__label { color: var(--oh-blanc)!important; } li.wp-block-navigation-item.has-child.sous-menu-espace-eleves > button { display: none; } } /* ── ESPACE ÉLÈVES S/MOBILE ────────────────────────── */ @media (max-width: 781px) { li.wp-block-navigation-item.has-child.sous-menu-espace-eleves { background-color: var(--oh-fond-gris)!important; background-color:var(--wp--preset--color--black) !important; margin-top: 10px; padding: 1.5rem; /* border-radius: 4px; */ border-top:1px solid #e5e5e5; text-transform: uppercase; font-size:0.85rem; letter-spacing: 1px; } /* Titre de l'espace élèves */ li.wp-block-navigation-item.has-child.sous-menu-espace-eleves > a { color: #666; color: var(--oh-blanc); font-size: 0.85rem !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 10px; display: block; pointer-events: none } li.wp-block-navigation-item.has-child.sous-menu-espace-eleves > ul { padding: 0!important; } li.wp-block-navigation-item.has-child.sous-menu-espace-eleves > ul > li > a { color: var(--oh-blanc); text-transform: none; letter-spacing: normal; font-size: initial; } li.wp-block-navigation-item.has-child.sous-menu-espace-eleves > ul > li > a:hover { color: var(--oh-blanc) !important; } .menu-principal ul.wp-block-navigation__container { width:100%!important; align-items: stretch !important; /* Force les enfants à prendre 100% de large */ } /* Supprimer le cadre d'activation (focus/active) sur mobile */ .wp-block-navigation-responsive-container a:focus, .wp-block-navigation-responsive-container a:active, .wp-block-navigation-responsive-container li:focus, .wp-block-navigation-responsive-container li:active, .wp-block-navigation-responsive-container button:focus, .wp-block-navigation-responsive-container button:active { outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; /* Supprime le flash gris/bleu natif iOS/Android */ } } /* ═══════════════════════════════════════════════════════════════════════════ /* /* PIED DE PAGE /* /* ═══════════════════════════════════════════════════════════════════════════ */ footer { border-top: 1px solid var(--wc-secondary); margin-block-start:0; } /* ── LETTRE D'INFORMATION (FORMULAIRE) ───────────────────────────────────── */ /* Masque le paragraphe parasite contenant les inputs cachés de Brevo */ .sib_signup_form p:has(input[type="hidden"]) { display: none !important; } .sib_signup_form .sib-email-area { margin:0; } .sib_signup_form input[type=email] { font-size: 13px !important; padding: 5px; } .sib_signup_form input[type=submit] { border: 0; padding: 8px 10px; font-size: 13px; border-radius: 4px; cursor:pointer; background-color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--contrast); color: var(--wc-primary-text); } .sib_signup_form input[type=submit]:hover { background-color: var(--wp--primary-text); color: var(--wc-preset--color--contrast); } /* ═══════════════════════════════════════════════════════════════════════════ /* /* SECTIONS [TOUTES PAGES] /* /* ═══════════════════════════════════════════════════════════════════════════ */ /* ── RESPONSIVE UNIVERSEL TYPE DIVI (CIBLÉ SECTIONS) ───────────────────── */ section.is-layout-constrained > *, section > .wp-block-group { width: 80% !important; max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; } /* Ajustement respirant pour mobile/tablette sous 781px */ @media (max-width: 781px) { section.is-layout-constrained > *, section > .wp-block-group { width: 90% !important; /* Donne plus d'espace aux cartes et colonnes sur petit écran */ } } section.paire, section.impaire { margin:0; padding: 75px 0; } section.impaire { background-color: var(--oh-fond-gris)!important; } .creneaux { font-size: 24px; font-weight: 600; } section .titre-section { text-align: center; margin: 0 0 30px; } section .apres-titre-section { margin: 55px 0 0; } section .presentation-section { text-align: center; margin: 0 0 50px; } .tarif { font-size: 23px; color: var(--oh-theme); } /* ═══════════════════════════════════════════════════════════════════════════ /* /* BANDEAU HAUT DE PAGE (HERO) [TOUTES PAGES] /* /* ═══════════════════════════════════════════════════════════════════════════ */ /* ── HERO / BANDEAU : ÉLASTIQUE ET REMPLISSAGE MOBILES ─────────────────── */ /* 1. La section globale */ .oh-bandeau { min-height: 500px !important; display: flex !important; flex-direction: column !important; } /* 2. Le conteneur de colonnes (s'étire toujours sur toute la hauteur dispo) */ .oh-bandeau > .wp-block-columns { flex: 1 1 auto !important; /* Force les colonnes à remplir les 500px (ou plus) */ width: 100% !important; } /* 3. Ajustement spécifique mobile (≤ 781px) */ @media (max-width: 781px) { .oh-bandeau > .wp-block-columns { height: auto !important; } } .oh-bandeau p, .oh-bandeau h1 { color: var(--oh-blanc); } .oh-bandeau strong { font-weight: 600; } .oh-bandeau-col1 { background-image: var(--oh-hero-img); background-size: cover; background-position: 50%; background-repeat: no-repeat; } .oh-bandeau-col2 { display: flex; flex-direction: column; justify-content: space-between; padding-top: 40px; padding-right: 5%; padding-bottom: 40px; padding-left: 5%; background-color: var(--oh-theme); } .oh-bandeau-col2 p.olbj { font-weight: 600; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; } .oh-bandeau-col2 p.intro { font-weight: 300; font-size: 20px; line-height: 1.5em; } /*** Responsive Styles Smartphone Only ***/ @media all and (max-width: 767px) { .oh-bandeau-col2 p.intro { margin: 30px 0 40px; } } .oh-bandeau-col2 h1 { font-family: 'Inter',Helvetica,Arial,Lucida,sans-serif; font-weight: 700; font-size: 3vw; letter-spacing: 2px; text-transform: uppercase; line-height: 1.4em; } /*** Responsive Styles Smartphone Only ***/ @media all and (max-width: 767px) { .oh-bandeau-col2 h1 { font-size: 30px; } } /* ── DEGRADÉ + IMAGE SUR LA COLONNE 2 HERO [VERSION MOBILE (≤ 781PX) ] ────────────────────────── */ @media (max-width: 781px) { .oh-bandeau-col1 { display: none; } .oh-bandeau-col2 { background: linear-gradient( to left, color-mix(in srgb, var(--oh-theme) 25%, transparent) 0%, /* Vert semi-transparent à droite */ color-mix(in srgb, var(--oh-theme) 90%, transparent) 60%, /* Plus opaque au milieu */ var(--oh-theme) 100% /* Vert opaque à gauche */ ), var(--oh-hero-img) !important; /* Utilise l'image de la page */ background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; /* Garantit la lisibilité du texte au-dessus du fond */ position: relative !important; z-index: 1 !important; } } /* ========================================================================== HERO & DYNAMISATION DE L'IMAGE PRODUIT (--oh-hero-img) ========================================================================== FONCTIONNEMENT : - La variable CSS `--oh-hero-img` est injectée dynamiquement via PHP (hook 'wp_head' dans functions.php du thème enfant). - Sur les fiches produits (WooCommerce / Stages), PHP récupère l'URL de l'image mise en avant (Featured Image) et l'assigne sous la forme : --oh-hero-img: url('https://.../image.jpg'); DESKTOP (Desktop / > 781px) : - La colonne 1 (.oh-bandeau-col1) affiche l'image brute en fond. - La colonne 2 (.oh-bandeau-col2) contient les shortcodes et textes. MOBILE (≤ 781px) : - La colonne 1 (.oh-bandeau-col1) est masquée (display: none). - La colonne 2 (.oh-bandeau-col2) récupère l'image produit (--oh-hero-img) en la fusionnant avec un dégradé vert opaque à semi-transparent (linear-gradient + color-mix) pour garantir la lisibilité du texte. ========================================================================== */ /* ═══════════════════════════════════════════════════════════════════════════ /* /* ACCUEIL /* /* ═══════════════════════════════════════════════════════════════════════════ */ .accueil .current-menu-item a, .accueil .current-menu-ancestor > a { color: var(--oh-page-accueil)!important; } /* Animation fluide sur les images */ .oh-prod-image img { transition: transform 0.4s ease, box-shadow 0.4s ease; } /* Effet au survol du conteneur d'image */ .oh-prod-image:hover img { transform: scale(1.04); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } /* ── PROCHAIN STAGE ───────────────────────────────────── */ .accueil .prochain-stage { padding: 75px 0 0; } .accueil .prochain-stage-content { margin-top:0; } .accueil .oh-sc-stage-item { background-color: var(--oh-fond-gris); padding-top: 40px; } .accueil .stages-bouton { padding: 0 0 65px; } /* ── SECTIONS ALTERNÉES ───────────────────────────────────── */ /* NOTE IMPORTANTE : Toujours mettre la Colonne Texte en premier, puis la Colonne Image en second. */ /* --- SECTION PARENTE --- */ .oh-prod-section { padding: 60px 0; } /* --- RANGÉE / CONTENEUR INTERNE --- */ .oh-prod-row { /* width: 80% !important; max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; */ display: flex !important; align-items: center !important; gap: 40px !important; margin-bottom: 40px; /* Espace entre deux paires texte/image */ padding-top: 60px; } /* Annulation du margin-bottom sur la dernière rangée */ .oh-prod-row:last-child { margin-bottom: 0; } /* --- ALTERNANCE GAUCHE / DROITE --- */ /* NOTE IMPORTANTE : Toujours mettre la Colonne Texte en premier, puis la Colonne Image en second. */ /* L'image apparaît à DROITE (Texte 1er, Image 2e dans le DOM) */ .oh-prod-row.oh-prod-img-droite { flex-direction: row !important; } /* L'image apparaît à GAUCHE (Texte 1er, Image 2e dans le DOM) */ .oh-prod-row.oh-prod-img-gauche { flex-direction: row-reverse !important; } /* --- COLONNE IMAGE (40%) --- */ .oh-prod-row .oh-prod-image { flex: 0 0 40% !important; max-width: 40% !important; width: 40% !important; } /* Ratio & Recadrage forcé de l'image Gutenberg */ .oh-prod-image .wp-block-image, .oh-prod-image img { width: 100% !important; height: 100% !important; margin: 0 !important; } .oh-prod-image img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: 6px; display: block; } /* --- COLONNE TEXTE (60%) --- */ .oh-prod-row .oh-prod-texte { flex: 1 !important; max-width: 60% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } /* Alignement du texte & CTA pour les images à droite */ .oh-prod-row.oh-prod-img-droite .oh-prod-texte { text-align: right; align-items: flex-end; } .oh-prod-row.oh-prod-img-gauche .oh-prod-texte { text-align: left; align-items: flex-start; } /* --- RESPONSIVE MOBILE --- */ @media (max-width: 768px) { .oh-prod-row { /* width: 90% !important; */ flex-direction: column !important; gap: 20px !important; /* A voir */ } .oh-prod-row .oh-prod-image, .oh-prod-row .oh-prod-texte { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } /* Remise à gauche sur mobile */ .oh-prod-row.oh-prod-img-droite .oh-prod-texte, .oh-prod-row.oh-prod-img-gauche .oh-prod-texte { text-align: left !important; align-items: flex-start !important; } /* Force l'image en premier (au-dessus) */ .oh-prod-row .oh-prod-image { order: 1; } /* Force le texte en second (en-dessous) */ .oh-prod-row .oh-prod-texte { order: 2; } } /* FONDS COULEURS */ .accueil .prod-enfants, .accueil .prod-atp { background-color: var(--oh-fond-gris); } /* ── COORONNÉES ───────────────────────────────────── */ .accueil .coordonnees p { font-size: 15px; margin-top: 7px; } /* Métro & bus */ .logo-acces { padding-bottom: 0; } .metro { background: url(/wp-content/uploads/2023/01/metro.svg) no-repeat left center; background-size: 20px; padding-left: 30px; } .bus { background: url(/wp-content/uploads/2023/01/bus-logo.svg) no-repeat left center; background-size: 20px; padding-left: 30px; } .logos-lignes-metro, .logos-lignes-bus { margin-left: 10px; } .logos-lignes-metro { vertical-align: text-bottom; } .logos-lignes-bus { vertical-align: middle; } /* ═══════════════════════════════════════════════════════════════════════════ /* /* COURS HUILE/ACRYLIQUE /* /* ═══════════════════════════════════════════════════════════════════════════ */ /* ── CRÉNEAUX DE COURS ───────────────────────────────────── */ /* Desktop : tableau visible, blocs cachés */ .oh-planning-mobile { display: none; } .oh-planning-desktop { display: block; } .oh-planning-wrap { overflow-x: auto; /* scroll sur mobile */ } .oh-planning-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .oh-planning-th-vide { width: 100px; } .oh-planning-th-jour { text-align: center; font-weight: 700; padding: .6em .4em; /* background: #4f46e5; */ /* color: #fff; */ font-size: .9em; } .oh-planning-tranche { font-weight: 600; font-size: .85em; color: #555555; padding: .6em .8em; background: #f3f4f6; border: 1px solid #e5e7eb; white-space: nowrap; } .oh-planning-creneau { background: #666; border: 1px solid #e5e7eb; text-align: center; padding: 0.8em .4em!important; vertical-align: middle; } .oh-planning-vide { background: #f9f9f9; border: 1px solid #e5e7eb; } .oh-planning-horaire { display: block; font-weight: 700!important; font-size: .9em!important; color: #FFFFFF!important; } .oh-planning-medium { display: block; font-size: .75em; color: #2d6a7f; margin-top: .2em; } .oh-planning-age { display: block; font-size: .75em; color: #2d6a7f; } /* ── PLANNING RESPONSIVE MOBILE (blocs visibles, tableau caché) ─────────────────────────────────────────── */ @media (max-width: 781px) { .oh-planning-desktop { display: none !important; } .oh-planning-mobile { display: grid !important; grid-template-columns: repeat(2, 1fr); /* 2 colonnes par défaut sur tablette/grand mobile */ gap: 1em; } } /* Passage sur 1 seule colonne sur smartphone */ @media (max-width: 480px) { .oh-planning-mobile { grid-template-columns: 1fr !important; /* 1 colonne lisible et aérée */ } } @media (max-width: 700px) { .oh-planning-wrap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .oh-planning-wrap { grid-template-columns: 1fr; } } .oh-planning-jour-bloc { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; text-align: center; } .oh-planning-jour-titre { /* background: #4f46e5; color: #fff; */ font-weight: 700; font-size: .95em; padding: .5em 1em; } .oh-planning-ligne { background: var(--oh-theme); /* border-top: 1px solid #e5e7eb; */ padding: 1.1em 1em .5em; display: flex; flex-direction: column; gap: .1em; } .oh-planning-tranche { font-size: .72em; font-weight: 600; color: #555555!important; text-transform: uppercase; letter-spacing: .04em; } .oh-planning-horaire { font-weight: 700; font-size: .95em; color: #1e3a4a; } .oh-planning-medium, .oh-planning-age { font-size: .78em; color: #2d6a7f; } /* ── LES FORMULES ───────────────────────────────────── */ .formule { height: 100%; display: flex; flex-direction: column; background-color: #FFFFFF; border-radius: 8px 8px 8px 8px; overflow: hidden; padding: 40px 10%; } .formule ul { margin-left: 0!important; list-style-type: square; } /* ── ET AUSSI À L'ATELIER… [CARTES] ───────────────────────────────────── */ .cartes { display: grid; /* La magie responsive : chaque carte fait au moins 260px. Si 3 passent, il en met 3. Si seules 2 passent, il en met 2 et passe la 3e en dessous ! */ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 3rem; /* Écart fluide entre les cartes */ align-items: stretch; /* Hauteurs égales sur une même ligne */ } @media (max-width: 781px) { .cartes { row-gap: 2rem; } } .cartes .carte { display: flex; flex-direction: column; justify-content: space-between; /* Pousse le bouton CTA en bas */ height: 100%; /* margin-top: 0!important; à cause des margin-block-start auto de WP */ margin: 0 !important; /* Important pour virer les marges WP */ width: 100% !important; /* Important pour virer les marges WP */ background-color: var(--oh-fond-gris); padding: 40px 10%; } .cartes .carte p { text-align: center; font-size: 15px; } .cartes .carte .oh-btn a { font-size: 13px!important; } /* ═══════════════════════════════════════════════════════════════════════════ /* /* COURS AQUARELLE /* /* ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ /* /* COURS ENFANTS /* /* ═══════════════════════════════════════════════════════════════════════════ */ .oh-col-50-centre { width: 50% !important; margin-left: auto !important; margin-right: auto !important; flex-basis: 50% !important; /* Neutralise le flex-basis natif de Gutenberg */ flex-grow: 0 !important; /* Empêche la colonne de s'étirer pour remplir tout le rang */ } /* Bascule à 100 % sur mobile sous 781px */ @media (max-width: 781px) { .oh-col-50-centre { width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════════════════ /* /* COURS BANDE DESSINÉE /* /* ═══════════════════════════════════════════════════════════════════════════ */ .cours-adolescents-bande-dessinee .cartes .carte { justify-content: flex-start; background-color: var(--oh-blanc); } /* ═══════════════════════════════════════════════════════════════════════════ /* /* STAGES /* /* ═══════════════════════════════════════════════════════════════════════════ */ /* Container externe : fullwidth + fond alterné */ .oh-sc-stage-item { width: 100%; padding: 60px 0; background-color: #ffffff; } /* Fond gris une fois sur deux (images à droite) */ .oh-sc-stage-item.oh-sc-image-droite { background-color: #f8f9fa; } /* Container interne : centré à 80% (max 1080px) */ .oh-sc-stage-inner { width: 80%; max-width: 1080px; margin: 0 auto; display: flex; align-items: center; /* Aligne verticalement l'image et le texte au centre */ gap: 40px; } /* Alternance gauche / droite */ .oh-sc-stage-item.oh-sc-image-gauche .oh-sc-stage-inner { flex-direction: row; } .oh-sc-stage-item.oh-sc-image-droite .oh-sc-stage-inner { flex-direction: row-reverse; } /* Zone Image : 40% fixe */ .oh-sc-stage-image { flex: 0 0 40%; max-width: 40%; overflow: hidden; border-radius: 6px; /* Optionnel : arrondit légèrement les coins */ } /* Gestion du ratio et du recadrage automatique */ .oh-sc-stage-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; /* Ou 4 / 3 selon ta préférence visuelle */ /* aspect-ratio: 4 / 3; /* Ou 4 / 3 selon ta préférence visuelle */ object-fit: cover; /* Mords sur les bords et centre l'image si le format diffère */ object-position: center; display: block; } /* Zone Texte : 60% (prend tout le reste) */ .oh-sc-stage-texte { flex: 1; display: flex; flex-direction: column; justify-content: center; } /* Responsive mobile */ @media (max-width: 768px) { .oh-sc-stage-inner { width: 90%; flex-direction: column !important; gap: 20px; } .oh-sc-stage-image { flex: 0 0 100%; max-width: 100%; width: 100%; } /* Ferrage du texte à gauche sur mobile */ .oh-sc-stage-texte { width: 100%; align-items: flex-start !important; text-align: left !important; } } /* Alignement du texte à droite pour les items avec image à droite */ .oh-sc-stage-item.oh-sc-image-droite .oh-sc-stage-texte { text-align: right; align-items: flex-end; /* Pour coller aussi le bouton CTA vers la droite */ } @media (max-width: 768px) { .oh-sc-stage-item.oh-sc-image-droite .oh-sc-stage-texte { text-align: left; align-items: flex-start; } } /* Bloc texte */ .oh-sc-stage-texte { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; /* Espace régulier entre tous les éléments */ } /* Titre principal du stage */ .oh-sc-stage-titre { margin: 0 0 6px 0; font-size: 1.5rem; /* ~24px */ font-weight: 700; line-height: 1.25; color: #1a1a1a; } /* Deuxième ligne du titre (sous-titre) */ .oh-sc-stage-sous-titre { display: block; font-size: 0.85em; /* Un peu plus petit que le titre principal */ font-weight: 500; color: #4a5568; margin-top: 2px; } /* Bloc dates */ .oh-sc-stage-dates { margin: 0; font-size: 1.1rem; /* ~18px */ font-weight: 600; color: #2c3e50; } /* Mention spécifique vacances (style discret / secondaire) */ .oh-sc-stage-vacances { display: inline-block; font-size: 0.9em; font-weight: 400; color: #6c757d; font-style: italic; } /* Horaires */ .oh-sc-stage-horaires { margin: 0 0 12px 0; font-size: 0.95rem; color: #555555; } /* ── 1. CONTENEUR CTA (Produits simples et variables) ── */ .oh-sc-stage-cta { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 8px; } /* Version produit variable : empile les lignes Matin / Après-midi */ .oh-sc-stage-cta-variable { flex-direction: column; align-items: flex-start; } /* ── 2. LIGNES DE VARIATION & LABELS ── */ .oh-sc-variation-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .oh-sc-variation-label { font-size: 0.95rem; font-weight: 700; color: #2c3e50; min-width: 85px; /* Aligne verticalement les boutons entre Matin et Après-midi */ text-transform: uppercase; letter-spacing: 0.5px; } /* ── 3. ALIGNEMENT À DROITE (Si image à droite) ── */ .oh-sc-stage-item.oh-sc-image-droite .oh-sc-stage-cta, .oh-sc-stage-item.oh-sc-image-droite .oh-sc-variation-ligne { justify-content: flex-end; } .oh-sc-stage-item.oh-sc-image-droite .oh-sc-stage-cta-variable { align-items: flex-end; } /* ── 4. MENTIONS DE DISPONIBILITÉ ── */ .oh-sc-places-dispo { font-size: 0.9rem; font-weight: 600; } .oh-sc-peu-places { color: var(--oh-rouge); } /* ── 5. RESPONSIVE MOBILE ── */ @media (max-width: 768px) { .oh-sc-stage-cta, .oh-sc-variation-ligne { flex-direction: column; align-items: flex-start; gap: 8px; } .oh-sc-stage-item.oh-sc-image-droite .oh-sc-stage-cta, .oh-sc-stage-item.oh-sc-image-droite .oh-sc-stage-cta-variable, .oh-sc-stage-item.oh-sc-image-droite .oh-sc-variation-ligne { align-items: flex-start; justify-content: flex-start; } .oh-sc-variation-label { min-width: auto; } } /* Complet */ /* Surcharge pour le bouton complet : hérite de la forme mais passe en gris */ .oh-sc-stage-cta a.oh-btn.oh-lien-primaire.oh-sc-btn-complet { background-color: var(--oh-gris) !important; background: var(--oh-gris) !important; border-color: var(--oh-gris) !important; color: var(--oh-blanc) !important;} /* Optionnel : léger changement d'opacité au survol tout en restant gris */ .oh-sc-stage-cta a.oh-btn.oh-lien-primaire.oh-sc-btn-complet:hover { background-color: var(--oh-gris) !important; opacity: 0.85; } /* ═══════════════════════════════════════════════════════════════════════════ /* /* TEMPLATES STAGE & COURS (.cat-product-stage, .product_cat-cours_ad_huile) /* /* ═══════════════════════════════════════════════════════════════════════════ */ /* 1. Le conteneur parent (Pleine largeur) */ .oh-section-split { position: relative; overflow: hidden; /* Empêche le scroll horizontal dû au pseudo-élément */ } /* 2. La grille interne (Largeur fluide 80% limitée à 1080px max, centrée) */ .oh-section-split > .wp-block-columns { width: min(80%, 1080px) !important; margin-left: auto !important; margin-right: auto !important; } /* 3. La colonne de gauche (Tarifs / Infos) */ .oh-stage-infos { position: relative; background: var(--oh-fond-gris); padding: 75px 0; } /* 4. Le "prolongement" du fond vers le bord gauche de l'écran */ .oh-stage-infos::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; /* Démarre pile du bord gauche de la colonne */ width: 100vw; /* S'étire vers la gauche sur toute la largeur de l'écran */ background-color: inherit; /* Reprend automatiquement la couleur de .oh-stage-infos */ z-index: 0; } /* 5. Sécurité pour que le texte et les boutons restent au-dessus du fond */ .oh-stage-infos > * { position: relative; z-index: 1; } /* Remplit de gris toute la largeur */ @media (max-width: 781px) { .oh-section-split > .wp-block-columns { width: 100%!important; margin-right: 0!important; padding-left: 10%; } } /* Infos Sidebar */ .oh-stage-infos .oh-stage-tarif { margin-top: 30px; } .oh-stage-infos .oh-stage-acompte { margin: 10px 0 25px; } .oh-stage-infos .oh-stage-tarif-montant, .oh-stage-infos .oh-stage-acompte-montant { font-weight: 600; } /* Bouton "COMPLET" */ .oh-stage-infos .oh-sc-btn-complet { display: inline-block; padding: 12px 24px; background-color: var(--oh-gris, #6c757d); color: #ffffff !important; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; text-align: center; cursor: not-allowed; text-decoration: none; } /* Alerte "Panier rempli" */ .oh-stage-infos .alerte-panier-rempli { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px; border-left: 4px solid var(--oh-theme, #2c3e50); border-radius: 4px; font-size: 0.95rem; color: #333333; margin: 16px 0; } /* Lien "voir le panier" dans l'alerte */ .oh-stage-infos .alerte-panier-rempli a { color: var(--oh-theme, #2c3e50) !important; font-weight: 700; text-decoration: underline; transition: opacity 0.2s ease; } .oh-stage-infos .alerte-panier-rempli a:hover { opacity: 0.75; } /* Wrapper 2 boutons (produit variable) */ .oh-sc-variable-wrap { display: flex; flex-direction: column; gap: 16px; margin: 30px 0 40px; } .oh-sc-variable-wrap .oh-sc-btn { font-size: 12px; padding: 8px 15px; } .oh-sc-variable-wrap .oh-sc-complet { font-size: 12px; } /* Contact */ .oh-stage-infos .oh-liste-contact { font-size: 15px; } .oh-stage-infos .oh-liste-contact a { font-weight: normal!important; color: initial!important; } .oh-stage-infos .oh-liste-contact a:hover { color: var(--oh-theme) !important; } /* Présentation */ .oh-stage-presentation { padding: 75px 0; } /* ═══════════════════════════════════════════════════════════════════════════ /* /* TEMPLATE STAGE (.cat-product-stage) & TEMPLATE SOLDE (STAGE) (.cat-product-solde) /* /* ═══════════════════════════════════════════════════════════════════════════ */ /* "Bug" du Template Solde qui wrappe le main avec :