:root{ --color-sage:#9BB7A2; --color-peach:#F6AA80; --color-plum:#914C93; --color-lavender:#A586B6; --color-wine:#550527; --color-blush:#F1E2E5; --color-cream:#FEF6F3; --color-white:#FFFFFF; --color-ink:#341421; --color-ink-soft:#6E4657; --surface-page:var(--color-cream); --surface-card:var(--color-white); --surface-tint:var(--color-blush); --surface-tint-strong:color-mix(in oklch, var(--color-blush) 60%, var(--color-peach) 40%); --surface-inverse:var(--color-wine); --surface-inverse-soft:color-mix(in oklch, var(--color-wine) 82%, var(--color-plum) 18%); --text-primary:var(--color-ink); --text-secondary:var(--color-ink-soft); --text-muted:color-mix(in oklch, var(--color-ink-soft) 60%, var(--color-cream) 40%); --text-inverse:var(--color-cream); --text-on-accent:var(--color-cream); --accent-plum:var(--color-plum); --accent-sage:var(--color-sage); --accent-peach:var(--color-peach); --accent-lavender:var(--color-lavender); --accent-wine:var(--color-wine); --accent-primary:var(--color-plum); --accent-primary-hover:color-mix(in oklch, var(--color-plum) 85%, var(--color-wine) 15%); --accent-primary-active:color-mix(in oklch, var(--color-plum) 70%, var(--color-wine) 30%); --accent-secondary-a:var(--color-sage); --accent-secondary-b:var(--color-peach); --accent-rare-a:var(--color-lavender); --accent-rare-b:var(--color-wine); --border-subtle:color-mix(in oklch, var(--color-wine) 12%, var(--color-cream) 88%); --border-default:color-mix(in oklch, var(--color-wine) 24%, var(--color-cream) 76%); --border-strong:color-mix(in oklch, var(--color-wine) 45%, var(--color-cream) 55%); --focus-ring:var(--color-plum); --state-success:var(--color-sage); --state-warning:var(--color-peach); --state-error:#A5334A; } @font-face{font-family:'Ivy Ora Text';src:url('../fonts/ivy-ora/IvyOraText-Thin.woff2') format('woff2');font-weight:100;font-style:normal;font-display:swap} @font-face{font-family:'Ivy Ora Text';src:url('../fonts/ivy-ora/IvyOraText-ThinItalic.woff2') format('woff2');font-weight:100;font-style:italic;font-display:swap} @font-face{font-family:'Ivy Ora Text';src:url('../fonts/ivy-ora/IvyOraText-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Ivy Ora Text';src:url('../fonts/ivy-ora/IvyOraText-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:'Ivy Ora Text';src:url('../fonts/ivy-ora/IvyOraText-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Ivy Ora Text';src:url('../fonts/ivy-ora/IvyOraText-RegularItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Ivy Ora Text';src:url('../fonts/ivy-ora/IvyOraText-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Ivy Ora Text';src:url('../fonts/ivy-ora/IvyOraText-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:'Ivy Ora Text';src:url('../fonts/ivy-ora/IvyOraText-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Ivy Ora Text';src:url('../fonts/ivy-ora/IvyOraText-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap} :root{ --font-display:'Ivy Ora Text', 'Georgia', serif; --font-body:'Urbanist', 'Segoe UI', sans-serif; --text-display-xl:4.25rem; --text-display-lg:3rem; --text-display-md:2.125rem; --text-display-sm:1.5rem; --text-body-lg:1.25rem; --text-body-md:1.0625rem; --text-body-sm:0.9375rem; --text-caption:0.8125rem; --text-eyebrow:0.8125rem; --lh-display:1.12; /* @kind other */ --lh-heading:1.25; /* @kind other */ --lh-body:1.65; /* @kind other */ --lh-tight:1.35; /* @kind other */ --ls-eyebrow:0.14em; --ls-display:0.005em; } :root{ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px; --radius-sm:8px; --radius-md:14px; --radius-lg:24px; --radius-xl:36px; --radius-full:999px; --shadow-sm:0 2px 8px color-mix(in oklch, var(--color-wine) 10%, transparent); --shadow-md:0 8px 24px color-mix(in oklch, var(--color-wine) 14%, transparent); --shadow-lg:0 20px 48px color-mix(in oklch, var(--color-wine) 18%, transparent); --ease-standard:cubic-bezier(.4,0,.2,1); --duration-fast:150ms; --duration-base:250ms; --duration-slow:420ms; } :root{ --gradient-peach-cta:linear-gradient(112deg,#F9C39B,#F3A878); --gradient-sage-mauve:linear-gradient(122deg,#B7CCB8 0%,#9BB7A2 38%,#D5B1C8 100%); --gradient-peach-plum:linear-gradient(114deg,#EF9D70 0%,#F4AE7D 46%,#C879A9 100%); --gradient-cream-mauve:linear-gradient(118deg,#FFF9F3 0%,#F7EEE8 59%,#EEE2EF 100%); --gradient-warm-cream:linear-gradient(116deg,#FFF0DF 0%,#F9E5E0 46%,#E4D1E2 100%); --gradient-violet-gris:linear-gradient(160deg,#8E6FA3 0%,#A79FA6 100%); --gradient-corail-lilas:linear-gradient(150deg,#C7A6D9 0%,#E8B497 55%,#F3A878 100%); } *{box-sizing:border-box} body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body-md);line-height:var(--lh-body)} h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:var(--lh-heading);margin:0;color:var(--text-primary)} h1{font-size:var(--text-display-lg);line-height:var(--lh-display)} h2{font-size:var(--text-display-md)} h3{font-size:var(--text-display-sm)} p{margin:0} a{color:var(--accent-primary)} a:hover{color:var(--accent-primary-hover)} @media (max-width:640px){ h1{font-size:40px; line-height:1.02; letter-spacing:-.03em} } /* Reveal des titres au scroll (H1/H2) — glissement masqué, la première fois que le titre entre dans l'écran (cf. glyphic.bio). Le script title-reveal.js enveloppe le contenu du titre dans .mb-reveal__inner puis ajoute .is-visible via IntersectionObserver. ".js-reveal" est posée très tôt sur par mb_reveal_head_script (functions.php), seulement si JS est actif et que l'utilisateur n'a pas demandé de réduire les animations — c'est elle qui masque le titre AVANT que le script ne l'enveloppe, pour éviter un flash "visible → caché → animé" au chargement. Sans JS (ou avec ces préférences), le titre reste toujours affiché normalement : rien de tout ceci ne s'applique. */ .js-reveal main h1:not(.mb-reveal), .js-reveal main h2:not(.mb-reveal){ opacity:0; } .mb-reveal{ overflow:hidden; } .mb-reveal__inner{ display:block; /* Distance fixe (pas un %, relatif à la hauteur propre de CHAQUE titre — donnait un mouvement énorme sur un H1 de 3 lignes et presque invisible sur un H2 d'une ligne) : même amplitude perçue, quelle que soit la hauteur du titre. */ transform:translateY(28px); opacity:0; /* Courbe "ease-out" prononcée (plutôt que --ease-standard, pensée pour de courtes micro-interactions) : une décélération plus douce en fin de course, moins mécanique sur un mouvement de cette amplitude. */ transition:transform 550ms cubic-bezier(.16,1,.3,1), opacity 550ms ease-out; } .mb-reveal.is-visible .mb-reveal__inner{ transform:translateY(0); opacity:1; } /* Boutons — variantes du design system (composant Button.jsx : angles droits, pas de pilule) */ .wp-block-button__link{ display:inline-flex; align-items:center; gap:8px; border-radius:0; font-family:var(--font-body); font-weight:500; letter-spacing:.01em; font-size:var(--text-body-md); padding:12px 26px; border:1px solid transparent; transition:background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .mb-btn-chevron{ font-size:1.1em; line-height:1; } .wp-block-button__link:active{ transform:scale(.97); } /* Tailles — à poser en style inline sur l'instance quand la maquette demande sm/lg (défaut = md) */ .mb-btn-sm .wp-block-button__link{ padding:8px 20px; font-size:var(--text-body-sm); } .mb-btn-lg .wp-block-button__link{ padding:16px 34px; } .wp-block-button.is-style-plum .wp-block-button__link{ background-color:var(--accent-plum); color:var(--text-on-accent); } .wp-block-button.is-style-plum .wp-block-button__link:hover{ background-color:var(--accent-primary-hover); } .wp-block-button.is-style-sage .wp-block-button__link{ background-color:var(--accent-secondary-a); color:var(--text-primary); } .wp-block-button.is-style-sage .wp-block-button__link:hover{ background-color:color-mix(in oklch, var(--accent-secondary-a) 88%, white 12%); } .wp-block-button.is-style-outline-wine .wp-block-button__link{ background:transparent; border-color:var(--border-strong); color:var(--accent-wine); } .wp-block-button.is-style-outline-wine .wp-block-button__link:hover{ background:var(--surface-tint); } /* Navigation principale — angles droits (pas de pilule, cf. maquette) */ .mb-header{ position:sticky; top:16px; z-index:50; padding:0 24px; } .mb-nav{ display:flex; align-items:center; justify-content:space-between; width:min(920px,100%); margin:0 auto 40px; padding:14px 26px; border:1px solid var(--border-subtle); border-radius:0; background:color-mix(in oklch, var(--color-cream) 85%, transparent); backdrop-filter:blur(14px); box-shadow:var(--shadow-md); } .mb-nav__logo img{ height:34px; width:auto; display:block; } .mb-nav__menu{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; } .mb-nav__menu a{ font-size:13px; color:var(--text-primary); text-decoration:none; display:inline-flex; align-items:center; gap:4px; } .mb-nav__menu a:hover{ text-decoration:underline; } .mb-nav__menu li{ position:relative; } /* Chevron des sous-menus : automatique dès qu'un item a des enfants (menu WordPress ou de secours) */ .mb-nav__menu li.menu-item-has-children > a::after{ content:"⌄"; font-size:.65em; color:var(--text-secondary); margin-left:2px; } .mb-nav__menu .sub-menu{ position:absolute; top:28px; left:50%; transform:translateX(-50%); min-width:220px; margin:0; padding:10px; list-style:none; background:var(--color-cream); border:1px solid var(--border-subtle); box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity var(--duration-fast) var(--ease-standard); } .mb-nav__menu li:hover > .sub-menu, .mb-nav__menu li:focus-within > .sub-menu{ opacity:1; pointer-events:auto; } .mb-nav__menu .sub-menu a{ display:block; padding:8px 10px; font-size:12px; } /* Bouton "Prendre RDV" : le dernier item du menu est toujours stylé comme un bouton, quelle que soit son URL (modifiable librement dans Apparence > Menus). */ .mb-nav__menu > li:last-child > a{ background-color:var(--accent-plum); color:var(--text-on-accent); border-radius:0; padding:8px 20px; font-size:13px; text-decoration:none; display:inline-flex; } .mb-nav__menu > li:last-child > a:hover{ background-color:var(--accent-primary-hover); text-decoration:none; } .mb-nav__toggle{ display:none; } .mb-nav__mobile-actions{ display:none; } @media (max-width:900px){ /* Empêche la page de fond de défiler pendant que le panneau du menu, lui-même scrollable, est ouvert par-dessus. */ body.mb-nav-open{ overflow:hidden; } .mb-header{ top:0; padding:0; background:color-mix(in oklch, var(--color-cream) 96%, transparent); } .mb-nav{ flex-wrap:wrap; width:100%; margin:0; padding:14px 20px; border:none; border-radius:0; background:transparent; backdrop-filter:none; box-shadow:none; } .mb-nav__logo img{ height:30px; } .mb-nav__mobile-actions{ display:flex; align-items:center; gap:10px; order:2; } .mb-nav__cta-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border-subtle); border-radius:var(--radius-full); background:var(--accent-plum); color:#fff; } .mb-nav__menu{ display:none; flex-direction:column; align-items:stretch; gap:0; width:100%; order:3; margin:0; padding:8px 20px 24px; border-top:none; position:fixed; /* #mb-nav-menu est imbriqué DANS .mb-header (position:sticky + z-index), qui crée son propre contexte d'empilement : le z-index ci-dessous ne se compare donc qu'aux autres enfants du header (logo, bouton — tous deux z-index:auto), jamais au header lui-même. Un top:0 couvrirait donc le logo/bouton au lieu de rester dessous. Seul un "top" qui évite tout chevauchement géométrique avec le header fonctionne ici. Recalculé en JS (nav.js) selon la hauteur réelle du header, qui varie selon que la bannière d'info est affichée ou non. */ top:var(--mb-nav-offset,72px); left:0; right:0; bottom:0; z-index:40; background:var(--color-cream); overflow-y:auto; } .mb-nav__menu.is-open{ display:flex; } .mb-nav__menu li{ width:100%; } .mb-nav__menu > li > a{ display:flex; align-items:center; justify-content:space-between; padding:16px 4px; border-bottom:1px solid var(--border-subtle); font-size:17px; } .mb-nav__menu .sub-menu{ position:static; transform:none; opacity:1; pointer-events:auto; box-shadow:none; border:none; padding:4px 0 12px 16px; display:none; } .mb-nav__menu li.is-expanded > .sub-menu{ display:block; } .mb-nav__menu .sub-menu a{ display:block; padding:10px 0; font-size:15px; } .mb-nav__menu > li:last-child{ margin-top:auto; padding-top:24px; } .mb-nav__menu > li:last-child > a{ width:100%; justify-content:center; padding:12px; font-size:15px; border-bottom:none; } .mb-nav__toggle{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid var(--border-subtle); border-radius:var(--radius-full); background:color-mix(in oklch, var(--color-cream) 85%, transparent); color:var(--accent-wine); cursor:pointer; } .mb-nav__toggle-icon-close{ display:none; } .mb-nav__toggle.is-active .mb-nav__toggle-icon-open{ display:none; } .mb-nav__toggle.is-active .mb-nav__toggle-icon-close{ display:block; } } @media (min-width:901px){ .mb-nav__toggle{ display:none; } .mb-nav__mobile-actions{ display:none; } } /* Filigrane décoratif pétale — purement décoratif, jamais inséré comme image de contenu */ .mb-petal{ position:relative; overflow:hidden; } .mb-petal::before{ content:""; position:absolute; width:560px; height:560px; background:url('../images/petale-filigrane.svg') no-repeat center / contain; pointer-events:none; z-index:0; } .mb-petal > *{ position:relative; z-index:1; } .mb-petal--tr::before{ right:-140px; top:-160px; opacity:.13; transform:rotate(13deg); } .mb-petal--br-strong::before{ right:-220px; bottom:-260px; width:600px; height:600px; opacity:.4; transform:rotate(26deg); } .mb-petal--tl::before{ left:-220px; top:-230px; width:540px; height:540px; opacity:.34; transform:rotate(29deg); } .mb-petal--tr-soft::before{ right:-160px; top:-190px; width:520px; height:520px; opacity:.22; transform:rotate(20deg); } .mb-petal--br-soft::before{ right:-240px; bottom:-320px; width:600px; height:600px; opacity:.29; transform:rotate(-15deg); } .mb-petal--bl::before{ left:-140px; bottom:-180px; width:480px; height:480px; opacity:.2; transform:rotate(-21deg); } .mb-petal--tr-xl::before{ right:-200px; top:-150px; width:540px; height:540px; opacity:.2; transform:rotate(21deg); } .mb-petal--ph::before{ left:-80px; bottom:-110px; width:320px; height:320px; opacity:.28; transform:rotate(-16deg); } .mb-petal--br-xs::before{ right:-70px; bottom:-90px; width:290px; height:290px; opacity:.22; transform:rotate(17deg); } .mb-petal--quote-ap::before{ right:-260px; bottom:-350px; width:610px; height:610px; opacity:.29; transform:rotate(-15deg); } .mb-petal--final-cta-ap::before{ left:-140px; bottom:-180px; width:480px; height:480px; opacity:.2; transform:rotate(-21deg); } .mb-petal--tl-soft::before{ left:-150px; top:-190px; width:520px; height:520px; opacity:.18; transform:rotate(-19deg); } /* Page À propos — filigranes visibles aussi en mobile (contrairement aux autres pages) : maquette dédiée avec tailles réduites par section, donc modificateurs propres plutôt que réutilisation des .mb-petal--* masqués en mobile ailleurs. */ @media (max-width:640px){ .mb-petal--tr-xl::before{ right:-140px; top:-100px; width:340px; height:340px; } .mb-petal--ph::before{ left:-60px; bottom:-80px; width:220px; height:220px; } .mb-petal--br-xs::before{ right:-50px; bottom:-70px; width:220px; height:220px; } .mb-petal--tl-soft::before{ left:-100px; top:-130px; width:320px; height:320px; } } /* Liste numérotée (prestations) */ .mb-num-list{ list-style:none; margin:36px 0 0; padding:0; border-top:1px solid color-mix(in oklch, var(--accent-wine) 55%, transparent); } .mb-num-row{ display:grid; grid-template-columns:64px 1fr 1fr; gap:24px; align-items:start; padding:32px 0; border-bottom:1px solid color-mix(in oklch, var(--accent-wine) 55%, transparent); } .mb-num-row__n{ font-family:var(--font-display); font-size:34px; color:var(--accent-wine); margin:0; align-self:center; transition:transform var(--duration-base) var(--ease-standard); } .mb-num-row__title{ margin:0; align-self:center; transition:transform var(--duration-base) var(--ease-standard); } .mb-num-row__body{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; align-self:start; transition:transform var(--duration-base) var(--ease-standard); } .mb-num-row:hover .mb-num-row__title, .mb-num-row:focus-within .mb-num-row__title{ transform:translateX(24px); } .mb-num-row:hover .mb-num-row__body, .mb-num-row:focus-within .mb-num-row__body{ transform:translateX(16px); } .mb-num-row:hover .mb-num-row__n, .mb-num-row:focus-within .mb-num-row__n{ transform:translateX(-4px); } /* Liens "petites capitales" à soulignement révélé au survol (Explorer, EN SAVOIR PLUS, Réserver…). Marche que la classe soit posée directement sur le (patterns du thème) ou sur un bloc paragraphe qui contient le lien (cas de l'éditeur : le champ "Classe(s) CSS supplémentaire(s)" du panneau Avancé cible le bloc, donc le

, pas le texte du lien) — sinon le style de lien par défaut de WordPress (couleur + soulignement) l'emporte sur le dans ce second cas. */ a.mb-link-caps, .mb-link-caps a{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-wine); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:4px; transition:border-color var(--duration-fast) var(--ease-standard); width:fit-content; } a.mb-link-caps:hover, .mb-link-caps a:hover{ border-bottom-color:currentColor; } /* Lien avec flèche (Lire les témoignages, Demander un devis…) */ .mb-link-arrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--accent-wine); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:4px; transition:border-color var(--duration-fast) var(--ease-standard); } .mb-link-arrow:hover{ border-bottom-color:currentColor; } /* Grille de dates (ateliers) */ .mb-date-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid color-mix(in oklch, var(--accent-wine) 55%, transparent); margin:0; } .mb-date-cell{ margin:0 0 0 -1px; padding:20px 16px 8px; border-right:1px solid color-mix(in oklch, var(--accent-wine) 55%, transparent); border-left:1px solid color-mix(in oklch, var(--accent-wine) 55%, transparent); align-self:start; } .mb-date-cell__month{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-wine); } .mb-date-cell__day{ font-family:var(--font-display); font-size:44px; color:var(--accent-wine); margin:8px 0; } .mb-date-cell__place{ font-size:14px; color:var(--accent-wine); display:block; } .mb-date-cell__link{ display:block; margin-top:12px; width:fit-content; } @media (max-width:768px){ .mb-date-grid{ grid-template-columns:repeat(2,1fr); } .mb-num-row{ grid-template-columns:1fr; gap:8px; } } /* Cartes témoignages */ .mb-testimonial{ height:280px; padding:32px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; overflow:hidden; border:1px solid color-mix(in oklch, var(--accent-wine) 27%, transparent); background:color-mix(in oklch, var(--color-cream) 66%, transparent); transition:background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); } .mb-testimonial__mark{ margin:0 0 8px; } .mb-testimonial__quote{ margin:0 0 16px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; } .mb-testimonial:hover{ background:var(--accent-plum); border-color:var(--accent-plum); color:#fff; } .mb-testimonial:hover .mb-testimonial__quote, .mb-testimonial:hover .mb-testimonial__author{ color:#fff; } /* Témoignage tronqué (5 lignes) : bouton pour lire le texte complet dans une fenêtre */ .mb-testimonial__more{ appearance:none; background:none; border:none; cursor:pointer; margin-top:8px; padding:0; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-wine); } .mb-testimonial:hover .mb-testimonial__more{ color:#fff; } .mb-testimonial__more:hover{ text-decoration:underline; } .mb-testimonial-modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; } .mb-testimonial-modal[hidden]{ display:none; } .mb-testimonial-modal__backdrop{ position:absolute; inset:0; background:color-mix(in oklch, var(--color-ink) 55%, transparent); } .mb-testimonial-modal__box{ position:relative; z-index:1; max-width:520px; width:100%; max-height:calc(100vh - 48px); overflow-y:auto; background:var(--color-cream); border-radius:4px; padding:40px; box-shadow:0 20px 60px color-mix(in oklch, var(--color-ink) 30%, transparent); } @media (max-width:640px){ .mb-testimonial-modal{ padding:16px; } .mb-testimonial-modal__box{ max-height:calc(100vh - 32px); padding:28px 24px; } .mb-testimonial-modal__mark{ font-size:36px; } } .mb-testimonial-modal__close{ position:absolute; top:12px; right:16px; appearance:none; background:none; border:none; cursor:pointer; font-size:24px; line-height:1; color:var(--text-secondary); } .mb-testimonial-modal__mark{ margin:0 0 8px; font:44px/.7 Georgia,serif; color:var(--accent-peach); } .mb-testimonial-modal__quote{ margin:0 0 16px; font-size:1.05rem; line-height:1.6; } .mb-testimonial-modal__author{ margin:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-wine); } .mb-testimonial__mark{ font:44px/.7 Georgia,serif; color:var(--accent-peach); } .mb-testimonial__author{ margin:0; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-wine); } /* Carrousel de témoignages */ .mb-testimonials-carousel{ position:relative; } .mb-testimonials-viewport{ overflow:hidden; } .mb-testimonials-track{ display:flex; gap:16px; transition:transform .45s cubic-bezier(.4,0,.2,1); } .mb-testimonials-track > .mb-testimonial{ flex:0 0 calc(33.333% - 11px); min-width:0; margin:0; } /* Dans l'éditeur, le script du carrousel (qui fait glisser les avis) ne tourne pas — sans cette règle, les avis au-delà des 3 premiers sont présents mais invisibles (hors champ). On les affiche tous, les uns sous les autres, pour pouvoir les modifier sans passer par la Vue de la liste. Le site public garde le vrai carrousel, inchangé. */ .editor-styles-wrapper .mb-testimonials-viewport{ overflow:visible; } .editor-styles-wrapper .mb-testimonials-track{ flex-wrap:wrap; transform:none !important; } .editor-styles-wrapper .mb-testimonials-track > .mb-testimonial{ flex-basis:calc(33.333% - 11px); margin-bottom:16px; } .mb-testimonials-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; padding:0; margin:0; border-radius:var(--radius-full); border:1px solid var(--border-strong); background:var(--color-cream); color:var(--accent-wine); font-size:18px; line-height:1; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); z-index:2; } .mb-testimonials-nav:disabled{ opacity:.35; cursor:default; } .mb-testimonials-prev{ left:-20px; } .mb-testimonials-next{ right:-20px; } .mb-testimonials-dots{ display:flex; justify-content:center; gap:8px; margin-top:32px; } .mb-testimonials-dot{ width:7px; height:7px; border-radius:50%; cursor:pointer; background:var(--border-strong); padding:0; border:none; } .mb-testimonials-dot.is-active{ background:var(--accent-wine); } @media (max-width:1024px){ .mb-testimonials-track > .mb-testimonial{ flex-basis:calc(50% - 8px); } } @media (max-width:640px){ .mb-testimonial{ height:260px; } .mb-testimonial__mark{ font-size:40px; } .mb-testimonials-track > .mb-testimonial{ flex-basis:100%; } .mb-testimonials-carousel{ display:grid; grid-template-columns:1fr auto auto auto 1fr; align-items:center; column-gap:24px; row-gap:20px; } .mb-testimonials-viewport{ grid-column:1/-1; } .mb-testimonials-prev{ grid-column:2; position:static; transform:none; } .mb-testimonials-dots{ grid-column:3; margin-top:0; } .mb-testimonials-next{ grid-column:4; position:static; transform:none; } } /* Carte (offre entreprise, etc.) */ .mb-card{ background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:24px; } .mb-card .mb-card__media{ height:140px; background:var(--surface-tint); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:12px; margin-bottom:16px; border-radius:var(--radius-md); overflow:hidden; } .mb-card .mb-card__media img{ width:100%; height:100%; object-fit:cover; } .mb-entreprise-cols.wp-block-columns{ gap:20px; } /* Utilitaires de mise en page — sections page d'accueil */ .mb-text-center{ text-align:center; } /* Masquer un élément sans le supprimer : - dans le contenu d'une page : onglet "Styles" du bloc → "Masqué" - dans un menu (Apparence > Menus) : champ "Classe CSS" → mb-hidden Le retrait réel du site public se fait côté PHP (voir mb_strip_masked_blocks dans functions.php), pas ici — pour que le bloc reste visible (grisé) dans l'éditeur et rester lisible/modifiable même une fois "masqué". */ .mb-hidden{ display:none !important; } .editor-styles-wrapper .is-style-masque{ opacity:.35; outline:1px dashed var(--accent-wine); outline-offset:4px; } /* Lien inactif : même apparence qu'un lien (Explorer, Réserver…) mais en texte simple — pour un statut du type "À venir". À utiliser après avoir retiré le lien (bouton "dissocier" dans la barre d'outils) : le style s'applique directement au texte, sans dépendre d'un , donc rien ne reste cliquable/crawlable dans le code. */ .is-style-lien-inactif{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-wine); } /* Filet de sécurité si un est resté malgré tout : au moins désactiver l'interaction visuelle. */ .is-style-lien-inactif a{ pointer-events:none; cursor:default; border-bottom-color:transparent; } .mb-eyebrow{ font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-wine); display:inline-block; } .mb-eyebrow--plum{ color:var(--accent-plum); } .mb-body{ font-size:1rem; line-height:1.55; } .mb-hero__grid{ display:grid; grid-template-columns:1fr .82fr; gap:56px; align-items:center; } .mb-hero__content{ display:flex; flex-direction:column; gap:24px; } .mb-hero__content > *{ margin:0; } .mb-hero__portrait{ width:100%; aspect-ratio:4/5; max-width:340px; margin:0 auto; overflow:hidden; border-radius:var(--radius-lg); } .mb-hero__portrait img{ width:100%; height:100%; object-fit:cover; display:block; } .mb-split{ display:grid; grid-template-columns:520px 1fr; gap:48px; align-items:center; } /* Le texte (H2) précède la photo (H3) dans le code pour une hiérarchie de titres correcte, mais l'image doit rester affichée à gauche visuellement. */ .mb-split__text{ order:2; } .mb-split .mb-media-caption{ order:1; max-width:520px; } .mb-approche-grid{ display:grid; grid-template-columns:150px 1fr; gap:40px; } .mb-approche-grid > *{ margin:0; } .mb-media-caption{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius-lg); color:#fff; background:var(--surface-tint); } .mb-media-caption img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .mb-media-caption::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(45,37,48,0) 37%,rgba(45,37,48,.74) 100%); z-index:1; } .mb-media-caption__text{ position:absolute; bottom:26px; left:28px; right:28px; z-index:2; display:flex; flex-direction:column; gap:14px; } .mb-media-caption__text > *{ margin:0; } .mb-media-caption__text .mb-eyebrow{ display:block; } .mb-media-caption__text h3{ line-height:1.2; } @media (max-width:900px){ .mb-hero__grid, .mb-split, .mb-approche-grid{ grid-template-columns:1fr; } .mb-hero__grid .mb-hero__portrait{ order:-1; } } /* Gabarit mobile (390px) — cf. maquette "Version responsive mobile" */ @media (max-width:640px){ /* Padding de section : la maquette mobile utilise des marges bien plus resserrées. Les valeurs desktop sont posées en style inline (contrainte de validation Gutenberg), d'où le !important pour les surcharger ici. */ .mb-petal--tr{ padding:16px 20px 32px !important; } .mb-petal--br-strong{ padding:40px 20px !important; } .mb-section-approche{ padding:40px 20px !important; } .mb-section-parcours{ padding:40px 20px 80px !important; } .mb-petal--tl{ padding:48px 20px !important; } .mb-petal--bl{ padding:48px 20px !important; } .mb-section-temoignages{ padding:40px 20px !important; } .mb-section-entreprise{ padding:40px 20px 48px !important; } .mb-petal--br-soft{ padding:56px 24px !important; } /* Filigranes pétale : absents des sections mobile de la maquette (sauf le héros, réduit). Un filigrane utilise un décalage négatif (ex. top:-230px) — Safari/WebKit peut ne pas le découper correctement avec overflow:hidden, provoquant un débordement visuel du fond de section suivante. On les retire donc à cette largeur, en plus d'être fidèle à la maquette. */ .mb-petal--tr::before{ right:-120px; top:-100px; width:280px; height:280px; opacity:.13; transform:rotate(13deg); } .mb-petal--br-strong::before, .mb-petal--tl::before, .mb-petal--tr-soft::before, .mb-petal--bl::before{ display:none; } /* Héros : l'image se glisse entre le H1 et le paragraphe (au lieu d'être toute en haut) */ .mb-hero__grid{ display:flex; flex-direction:column; align-items:stretch; gap:20px; } .mb-hero__grid .mb-hero__portrait{ order:3; margin:0; max-width:none; aspect-ratio:4/5; } .mb-hero__content{ display:contents; } .mb-hero__content .mb-eyebrow{ order:1; } .mb-hero__content h1{ order:2; } .mb-hero__content .mb-hero__lead{ order:4; } .mb-hero__content .wp-block-buttons{ order:5; align-self:flex-start; } /* Prestations : numéro → titre → description → lien (le lien n'est plus collé au titre) */ .mb-num-row{ display:flex; flex-direction:column; gap:10px; padding:24px 0; } .mb-num-row__n{ align-self:flex-start; font-size:28px; } .mb-num-row__title{ align-self:flex-start; font-size:22px; } /* Ateliers : liste de lignes plutôt qu'une grille de cartes */ .mb-date-grid{ display:block; border-top:1px solid color-mix(in oklch, var(--accent-wine) 55%, transparent); } .mb-date-cell{ position:relative; display:block; margin:0; padding:18px 90px 18px 0; border:none; border-bottom:1px solid color-mix(in oklch, var(--accent-wine) 55%, transparent); } .mb-date-cell__month{ font-size:12px; margin:0; } .mb-date-cell__day{ margin:0; font-size:32px; line-height:1.15; } .mb-date-cell__place{ margin:0; } .mb-date-cell__link{ position:absolute; top:50%; right:0; transform:translateY(-50%); margin-top:0; } /* Accompagnement personnalisé : espace resserré entre la photo et le sur-titre suivant, CTA pleine largeur */ .mb-split > *{ margin:0; } .mb-section-parcours .wp-block-buttons{ margin-bottom:24px; } /* Citation */ .mb-citation__quote{ font-size:26px !important; line-height:1.2; } .mb-petal--br-soft::before{ display:none; } /* Pied de page */ .mb-footer{ padding:40px 20px 20px !important; } .mb-footer__row{ flex-direction:column; gap:32px; } .mb-footer__cols{ flex-direction:column; gap:32px; } } /* Pied de page */ .mb-footer{ background:var(--surface-inverse); color:var(--text-inverse); } .mb-footer a{ color:color-mix(in oklch, var(--text-inverse) 78%, transparent); text-decoration:none; } .mb-footer a:hover{ text-decoration:underline; } /* Les vrais menus WordPress (Apparence > Menus) génèrent des

  • même sans