sibling du header fixe : aucun sélecteur de l'offset générique (l. ~677) ne le couvre, le titre passait SOUS le header (bug 2026-07-13). Même recette que les articles FOCUS : clearance mesurée par sticky-cta.js. Sélecteur par ID obligatoire : TEC pose `#tribe-events-pg-template { padding-top: 40px }` qui bat toute pile de classes. */ body.mdb-needs-header-offset #tribe-events-pg-template { padding-top: var(--mdb-header-clearance, 172px); } .single-tribe_events #tribe-events-pg-template, .single-tribe_events .tribe-events-single { max-width: 760px; margin-inline: auto; padding-inline: var(--mdb-gutter); } .single-tribe_events #tribe-events-content.tribe-events-single { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); color: var(--mdb-navy); font-family: var(--mdb-font-body); } /* Dropdown d'abonnement iCal/Google : masqué (hors charte). */ .single-tribe_events .tribe-events-c-subscribe-dropdown__container, .single-tribe_events .tribe-events-cal-links, .single-tribe_events .tribe-events-schedule .tribe-events-cal-links { display: none !important; } /* Image vedette native du single : doublon du bandeau .mdb-event-hero, coupée côté PHP (filtre tribe_event_featured_image) — ceinture CSS. */ .single-tribe_events .tribe-events-event-image { display: none; } /* Nav précédent/suivant du HAUT (#tribe-events-header) : la paire du bas suffit — avant lecture, deux titres voisins n'apportent rien. */ .single-tribe_events #tribe-events-header .tribe-events-nav-pagination { display: none; } /* Bandeau image vedette injecté en PHP. */ .mdb-event-hero { margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); } .mdb-event-hero__frame { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--mdb-cream-warm); } .mdb-event-hero__img { width: 100%; height: 100%; object-fit: cover; /* Bandeau 16/9 sur des affiches souvent portrait : cadrage haut, le cover centré décapitait les artistes. */ object-position: 50% 20%; display: block; } .mdb-event-hero__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.2rem; margin-top: 1.1rem; } /* Depuis 0.9.255 le bandeau ne porte plus que le lieu : la date/heure vit uniquement dans la ligne native .tribe-events-schedule sous le H1. */ .mdb-event-hero__venue { font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step--1, 0.78rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mdb-gold-deep); } /* Fil d'Ariane (retour agenda). */ .mdb-event-back, .single-tribe_events .tribe-events-back { margin: 0 0 1.4rem; font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step--1, 0.8rem); letter-spacing: 0.08em; text-transform: uppercase; } .mdb-event-back a, .single-tribe_events .tribe-events-back a { color: var(--mdb-gold-deep); text-decoration: none; transition: color 0.3s var(--mdb-ease); } .mdb-event-back a:hover, .single-tribe_events .tribe-events-back a:hover { color: var(--mdb-navy); } /* Le « Tous les Évènements » natif de TEC fait doublon avec notre fil d'Ariane. */ .single-tribe_events .tribe-events-back { display: none; } /* Titre de l'événement. Les titres saisis par l'éditrice sont longs (phrase complète) : text-wrap balance équilibre le drapeau sur 3-5 lignes dans la colonne 760px. */ .single-tribe_events .tribe-events-single-event-title { font-family: var(--mdb-font-display); font-weight: 500; font-size: var(--mdb-step-4, 2.8rem); line-height: 1.08; letter-spacing: 0.005em; color: var(--mdb-navy); text-wrap: balance; text-transform: none; margin: 0 0 0.7rem; } /* Ligne de programmation (date · heure). */ .single-tribe_events .tribe-events-schedule { margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem); padding-bottom: clamp(1.4rem, 3vw, 2rem); border-bottom: 1px solid var(--mdb-rule); font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step-0, 1rem); letter-spacing: 0.04em; color: var(--mdb-gold-deep); } .single-tribe_events .tribe-events-schedule h2, .single-tribe_events .tribe-events-schedule .tribe-events-schedule__datetime { margin: 0; } /* Corps éditorial. */ .single-tribe_events .tribe-events-single-event-description { font-family: var(--mdb-font-body); font-size: var(--mdb-step-0, 1.05rem); line-height: 1.75; color: var(--mdb-ink); } .single-tribe_events .tribe-events-single-event-description p { margin: 0 0 1.2rem; } .single-tribe_events .tribe-events-single-event-description ul, .single-tribe_events .tribe-events-single-event-description ol { margin: 0 0 1.2rem 1.2rem; } .single-tribe_events .tribe-events-single-event-description a { color: var(--mdb-gold-deep); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } .single-tribe_events .tribe-events-single-event-description a:hover { color: var(--mdb-coral-deep); } .single-tribe_events .tribe-events-single-event-description strong { color: var(--mdb-navy); } /* Liste « Au programme » — reconstruite depuis les puces emoji de l'éditrice (filtre the_content, functions.php), filets or en guise de puces. Préfixe #tribe-events-pg-template OBLIGATOIRE : TEC pose `#tribe-events-pg-template .tribe-events-content ul { list-style: disc }` (poids id) qui bat toute pile de classes. */ #tribe-events-pg-template .tribe-events-content .mdb-event-programme { list-style: none; margin: 0 0 1.2rem; padding: 0; } #tribe-events-pg-template .tribe-events-content .mdb-event-programme li { position: relative; padding-left: 2rem; margin: 0 0 0.5rem; line-height: 1.75; } #tribe-events-pg-template .tribe-events-content .mdb-event-programme li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 1.2rem; height: 1px; background: var(--mdb-gold-deep); } /* Navigation prev/next entre événements. Le border-top natif de #tribe-events-footer doublonnerait notre filet (et, tant que la carte méta était flottée par TEC, il passait SOUS elle en fausse rayure pleine largeur) : retiré. */ .single-tribe_events #tribe-events-footer { border-top: 0; } .single-tribe_events .tribe-events-nav-pagination { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--mdb-rule); } .single-tribe_events .tribe-events-sub-nav { display: flex; justify-content: space-between; gap: 1rem; list-style: none; margin: 0; padding: 0; } .single-tribe_events .tribe-events-sub-nav li { background: none; min-width: 0; } .single-tribe_events .tribe-events-sub-nav a { display: inline-flex; flex-direction: column; gap: 0.4rem; max-width: 34ch; font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step--1, 0.82rem); letter-spacing: 0.06em; color: var(--mdb-navy); text-decoration: none; transition: color 0.3s var(--mdb-ease); } .single-tribe_events .tribe-events-sub-nav a:hover { color: var(--mdb-gold-deep); } .single-tribe_events .tribe-events-nav-next { text-align: right; } .single-tribe_events .tribe-events-nav-next a { align-items: flex-end; } /* Flèches image de TEC (pseudo-éléments de tribe-events-single-full.css) : avec l'ancre passée en colonne, elles décrochaient sur leur propre ligne. */ .single-tribe_events .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a::before, .single-tribe_events .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a::after, .single-tribe_events .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a::before, .single-tribe_events .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a::after { content: none; background: none; } /* Libellé + titre injectés par mdb_event_nav_link() (functions.php). Le `display` est posé explicitement : TEC masque tous les des ancres de sub-nav (règle chevrons de tribe-events-single-skeleton.css). */ .single-tribe_events .tribe-events-sub-nav a .mdb-event-nav__label { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mdb-gold-deep); } .single-tribe_events .tribe-events-sub-nav a .mdb-event-nav__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.55; } /* Méta — carte « informations pratiques » réduite au groupe Lieu (nom, adresse, téléphone, plan). Les groupes Détails (date/heure/catégorie, déjà sous le titre via .tribe-events-schedule) et Organisateur (même nom que le lieu + « Voir le site Organisateur » qui bouclait sur le site lui-même) sont masqués ; le téléphone vit sur le LIEU (_VenuePhone). PIÈGE spécificité : tribe-events-single-full.css pose `.single-tribe_events .tribe-events-single .tribe-events-event-meta` (background: initial + largeur réduite) — il faut le même sélecteur à 3 classes, gagné par ordre de source, sinon fond transparent et carte à 62 % de la colonne. */ .single-tribe_events .tribe-events-single .tribe-events-event-meta { width: 100%; float: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: clamp(1.6rem, 3.5vw, 2.4rem); background: var(--mdb-cream-warm); border: 1px solid var(--mdb-rule-soft); border-radius: 4px; display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); color: var(--mdb-navy); font-family: var(--mdb-font-body); } .single-tribe_events .tribe-events-meta-group-details, .single-tribe_events .tribe-events-meta-group-organizer { display: none; } .single-tribe_events .tribe-events-meta-group { width: auto; float: none; padding: 0; margin: 0; } .single-tribe_events .tribe-events-single-section-title { font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step--1, 0.8rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mdb-gold-deep); margin: 0 0 0.9rem; padding: 0; border: 0; } .single-tribe_events .tribe-events-meta-list, .single-tribe_events .tribe-events-meta-group ul { list-style: none; margin: 0; padding: 0; } .single-tribe_events .tribe-events-meta-item { margin: 0 0 0.55rem; background: none; } .single-tribe_events .tribe-events-meta-label, .single-tribe_events .tribe-events-meta-label span { display: inline; font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step--1, 0.78rem); letter-spacing: 0.05em; color: rgba(9, 26, 45, 0.55); } .single-tribe_events .tribe-events-meta-value, .single-tribe_events .tribe-events-meta-value abbr, .single-tribe_events .tribe-events-meta-value div { font-size: var(--mdb-step-0, 1rem); color: var(--mdb-navy); border: 0; text-decoration: none; } /* Liens de la carte : variante AA du laiton — gold-deep ne fait que 4.0:1 sur le fond crème-warm de la carte (ok sur blanc, pas ici). */ .single-tribe_events .tribe-events-meta-value a, .single-tribe_events .tribe-venue-location a { color: var(--mdb-gold-deep-aa); } /* « + Google Map » : insécable, sur sa propre ligne sous l'adresse (il s'enroulait après « France », laissant un « + » orphelin). */ .single-tribe_events .tribe-events-gmap { display: inline-block; white-space: nowrap; margin-top: 0.4rem; } .single-tribe_events .tribe-events-address, .single-tribe_events .tribe-street-address, .single-tribe_events .tribe-locality { font-style: normal; line-height: 1.5; } .single-tribe_events .tribe-events-meta-item.tribe-venue { font-family: var(--mdb-font-display); font-size: var(--mdb-step-1, 1.2rem); color: var(--mdb-navy); margin-bottom: 0.4rem; } /* Carte Google embarquée : masquée (coupée aussi côté PHP). */ .single-tribe_events .tribe-events-meta-group-gmap, .single-tribe_events .tribe-events-venue-map { display: none !important; } /* CTA Réserver injecté en PHP (soirées Roof Top). */ .mdb-event-cta { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; } .mdb-event-cta__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 2.6rem; background: var(--mdb-gold); color: var(--mdb-navy-deep); border: 1px solid var(--mdb-gold); font-family: var(--mdb-font-eyebrow); font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: background 0.3s var(--mdb-ease), color 0.3s var(--mdb-ease); } .mdb-event-cta__btn:hover { background: var(--mdb-gold-bright); border-color: var(--mdb-gold-bright); } @media (max-width: 640px) { .mdb-event-hero__frame { aspect-ratio: 4 / 3; } } /* ========================================================================= PAGE « VOS ÉVÉNEMENTS » (106209) — contenu porté de la prod /event-2 (staff), redesigné dans la charte MdB. TEXTE INCHANGÉ. Devis = BookingShake (boutons .bs-booking-button .mdb-devis-cta). Structure (après suppression de la section « Nos Univers » inline, remplacée par la section GLOBALE « Nos espaces ») : 167c86ed HERO (bg vidéo Vimeo + fallback 105895) > 57e6219 [H1, CTA devis] ac96c4f « Organisez votre événement… » [heading + texte + CTA devis] Scellé à .page-id-106209 (ID immuable) — pas aux classes de section. ========================================================================= */ /* --- HERO : photo/vidéo + scrim navy + bloc centré (eyebrow / H1 / CTA) ---- Bloc de contenu centré verticalement (pas collé en bas), titre maîtrisé sur ~2 lignes, scrim renforcé + halo radial derrière le texte pour la lisibilité sur la photo « soirée » chargée (image conservée à la demande du client). */ .page-id-106209 .elementor-element-167c86ed { position: relative; min-height: 78svh !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; background-color: var(--mdb-navy-deep) !important; } .page-id-106209 .elementor-element-167c86ed::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* scrim vertical renforcé + halo central : assied le texte quelle que soit la zone de la photo (chemises blanches, visages clairs). */ background: radial-gradient(ellipse 60% 55% at 50% 52%, rgba(9, 26, 45, 0.55) 0%, rgba(9, 26, 45, 0) 70%), linear-gradient(180deg, rgba(9, 26, 45, 0.58) 0%, rgba(9, 26, 45, 0.34) 42%, rgba(9, 26, 45, 0.78) 100%); } /* Le conteneur hero 57e6219 est e-con-BOXED : le contenu vit dans .e-con-inner. On rend l'extérieur pleine largeur et on centre la colonne de contenu DANS .e-con-inner (sinon le bloc était calé à gauche, pas au centre de la page). */ .page-id-106209 .elementor-element-57e6219 { position: relative !important; z-index: 2 !important; background: transparent !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: clamp(120px, 16vh, 180px) var(--mdb-gutter) clamp(3rem, 8vh, 5rem) !important; display: flex !important; justify-content: center !important; } .page-id-106209 .elementor-element-57e6219 > .e-con-inner { width: 100% !important; max-width: var(--mdb-wrap-max) !important; margin-inline: auto !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: clamp(1.5rem, 3.2vh, 2.4rem) !important; text-align: center !important; } /* Titre (H1 id 11022c82 UNIQUEMENT) : Cormorant crème, ~2 lignes, centré. Scellé à l'ID du H1 pour NE PAS toucher le sous-titre mdb-evt-hero__sub (qui est aussi un widget heading) — celui-ci est piloté dans l'éditeur. */ .page-id-106209 .elementor-element-11022c82 .elementor-heading-title { font-family: var(--mdb-font-display) !important; font-weight: 500 !important; font-size: clamp(2.6rem, 5.2vw, 4.6rem) !important; line-height: 1.06 !important; color: var(--mdb-cream) !important; letter-spacing: 0.005em; text-shadow: 0 2px 30px rgba(9, 26, 45, 0.6); text-wrap: balance; text-align: center !important; margin: 0 auto !important; max-width: 20ch; } /* Le widget TITRE (H1, id 11022c82) centré. NB : on ne touche PAS au sous-titre mdb-evt-hero__sub (piloté dans l'éditeur Elementor — cf. plus bas). */ .page-id-106209 .elementor-element-11022c82 { text-align: center !important; width: 100% !important; } /* CTA devis du hero (BookingShake) : on RÉAFFIRME le gold pill ici (le rendu par défaut Elementor / link-blue l'emportait par moments en contexte hero). Le scrim ::after (z-index:1) repassait DEVANT le bouton (le conteneur BookingShake créait son propre contexte d'empilement) → la pastille paraissait sombre. On force le conteneur CTA + le bouton AU-DESSUS du scrim. */ .page-id-106209 .elementor-element-2da504d { background: transparent !important; position: relative !important; z-index: 5 !important; } .page-id-106209 .elementor-element-167c86ed .mdb-devis-cta, .page-id-106209 .elementor-element-167c86ed .mdb-devis-cta .elementor-button, .page-id-106209 .elementor-element-167c86ed .mdb-devis-cta a.elementor-button { position: relative !important; z-index: 5 !important; } .page-id-106209 .elementor-element-167c86ed .mdb-devis-cta .elementor-button, .page-id-106209 .elementor-element-167c86ed .mdb-devis-cta a.elementor-button { /* Or VIF et 100% opaque (le brass mat #b18954 paraissait terne sur la photo). background-image:none neutralise tout dégradé hérité ; opacity:1 garanti. */ background: #c9a371 !important; background-image: none !important; opacity: 1 !important; color: var(--mdb-navy-deep) !important; font-family: var(--mdb-font-eyebrow) !important; font-size: var(--mdb-step-0) !important; font-weight: 500 !important; letter-spacing: 0.16em; text-transform: uppercase; padding: 1.05rem 2.6rem !important; border-radius: 999px !important; border: 1px solid #d8b27e !important; box-shadow: 0 8px 22px rgba(9, 26, 45, 0.3); } .page-id-106209 .elementor-element-167c86ed .mdb-devis-cta .elementor-button:hover, .page-id-106209 .elementor-element-167c86ed .mdb-devis-cta a.elementor-button:hover { background: #d6b585 !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(9, 26, 45, 0.36); } /* --- SECTION « Organisez votre événement… » : bandeau crème éditorial ------ */ .page-id-106209 .elementor-element-ac96c4f { background: var(--mdb-cream) !important; padding: clamp(3.5rem, 8vw, 6.5rem) var(--mdb-gutter) !important; text-align: center; } .page-id-106209 .elementor-element-ac96c4f > .e-con-inner { max-width: 60rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; } .page-id-106209 .elementor-element-ac96c4f .elementor-heading-title { font-family: var(--mdb-font-display) !important; font-weight: 500 !important; font-size: var(--mdb-step-3) !important; line-height: 1.1 !important; color: var(--mdb-navy) !important; margin: 0 !important; position: relative; padding-bottom: 1rem; } .page-id-106209 .elementor-element-ac96c4f .elementor-heading-title::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 3rem; height: 2px; background: var(--mdb-gold); } .page-id-106209 .elementor-element-ac96c4f .elementor-widget-text-editor { font-family: var(--mdb-font-body) !important; font-size: var(--mdb-step-0) !important; line-height: 1.75 !important; color: var(--mdb-ink) !important; } @media (max-width: 880px) { .page-id-106209 .elementor-element-11022c82 .elementor-heading-title { font-size: var(--mdb-step-4) !important; } } /* --- /vos-evenements : sous-titre hero (mdb-evt-hero__sub) ------------------ Overrides CSS RETIRÉS à la demande du client (2026-06-18) : le widget est désormais piloté dans l'éditeur Elementor (typo, alignement, espacement). Ne pas réintroduire de règles ici sans accord. */ /* --- /vos-evenements : sections venue (3 lignes texte ↔ image alternées) -- Widgets natifs : heading (eyebrow/titre), text-editor, icon-list, image. IMPORTANT : Elementor STRIPPE le `_css_classes` des conteneurs e-con (mdb-evt-spaces / mdb-evt-row / mdb-evt__txtcol / __imgcol disparaissent du rendu). On cible donc les CONTENEURS par leur ID stable (b8d91f0 = section « espaces », 4a7e080 = bandeau « accompagnement ») et par la STRUCTURE (lignes = enfants e-con directs de la section ; colonnes = leurs 2 enfants e-con). Les classes de WIDGETS (__eyebrow/__title/__body/__ideal/__img) survivent. */ .page-id-106209 .elementor-element-b8d91f0 { background: #fff !important; padding: clamp(3.5rem, 8vw, 6.5rem) var(--mdb-gutter) clamp(2rem, 5vw, 3.5rem) !important; } .page-id-106209 .mdb-evt-spaces__hd .elementor-heading-title { font-family: var(--mdb-font-display) !important; font-weight: 500 !important; font-size: var(--mdb-step-3) !important; line-height: 1.1 !important; color: var(--mdb-navy) !important; text-align: center; max-width: 22ch; margin: 0 auto clamp(2.5rem, 6vw, 4rem) !important; position: relative; padding-bottom: 1rem; } .page-id-106209 .mdb-evt-spaces__hd .elementor-heading-title::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 3rem; height: 2px; background: var(--mdb-gold); } /* Une ligne venue = enfant e-con direct de la section espaces b8d91f0. Grille 2 colonnes (déjà flex_direction:row en données), centrée. */ .page-id-106209 .elementor-element-b8d91f0 > .e-con-inner > .elementor-element.e-con, .page-id-106209 .elementor-element-b8d91f0 > .elementor-element.e-con { max-width: var(--mdb-wrap-max); margin-inline: auto !important; padding-block: clamp(2rem, 5vw, 3.5rem) !important; } .page-id-106209 .mdb-evt__eyebrow .elementor-heading-title { font-family: var(--mdb-font-eyebrow) !important; font-size: var(--mdb-step--1) !important; font-weight: 400 !important; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mdb-gold-deep) !important; margin: 0 0 0.7rem 0 !important; } .page-id-106209 .mdb-evt__title .elementor-heading-title { font-family: var(--mdb-font-display) !important; font-weight: 500 !important; font-size: var(--mdb-step-2) !important; line-height: 1.12 !important; color: var(--mdb-navy) !important; margin: 0 0 1rem 0 !important; } .page-id-106209 .mdb-evt__body, .page-id-106209 .mdb-evt__body p { font-family: var(--mdb-font-body) !important; font-size: var(--mdb-step-0) !important; line-height: 1.7 !important; color: var(--mdb-ink) !important; margin: 0 0 1.4rem 0 !important; } .page-id-106209 .mdb-evt__idealhd .elementor-heading-title { font-family: var(--mdb-font-eyebrow) !important; font-size: var(--mdb-step--1) !important; font-weight: 400 !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mdb-navy) !important; opacity: 0.7; margin: 0 0 0.6rem 0 !important; } /* Icon-list « Idéal pour » : puces or discrètes, texte encre. */ .page-id-106209 .mdb-evt__ideal .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1.5rem; } /* Puce alignée sur la 1re ligne du libellé : on cale la hauteur de la colonne icône sur le line-height du texte (1.5em) et on centre la pastille dedans. flex-start => si un libellé passe sur 2 lignes, la puce reste en haut. */ .page-id-106209 .mdb-evt__ideal .elementor-icon-list-item { align-items: flex-start; } .page-id-106209 .mdb-evt__ideal .elementor-icon-list-icon { padding-top: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 1.5em !important; /* = line-height de .elementor-icon-list-text */ width: 14px !important; /* gouttière icône : pastille 6px + marge → pas de clip */ min-width: 14px !important; flex: 0 0 14px !important; } .page-id-106209 .mdb-evt__ideal .elementor-icon-list-icon svg { width: 6px !important; height: 6px !important; min-width: 6px !important; max-width: 6px !important; flex: 0 0 auto !important; fill: var(--mdb-gold) !important; overflow: visible !important; /* pastille ronde entière, jamais rognée */ } .page-id-106209 .mdb-evt__ideal .elementor-icon-list-text { font-family: var(--mdb-font-body) !important; font-size: var(--mdb-step--1) !important; line-height: 1.5 !important; color: var(--mdb-ink) !important; letter-spacing: 0.01em; } /* Image venue : ratio éditorial, coins nets, ombre douce. */ .page-id-106209 .mdb-evt__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 18px 44px rgba(14, 37, 63, 0.18); } /* --- « Un accompagnement sur mesure » : bandeau navy, CTA devis ----------- Conteneur ciblé par ID (4a7e080) : son `_css_classes` mdb-evt-accompagne est strippé par Elementor → la règle de fond navy ne matchait pas et le texte crème s'affichait sur crème (illisible). */ .page-id-106209 .elementor-element-4a7e080 { background: var(--mdb-navy) !important; padding: clamp(3.5rem, 8vw, 6rem) var(--mdb-gutter) !important; text-align: center; gap: 1.4rem !important; } .page-id-106209 .elementor-element-4a7e080 > .e-con-inner { max-width: 52rem; margin-inline: auto; align-items: center; } .page-id-106209 .mdb-evt-accompagne__hd .elementor-heading-title { font-family: var(--mdb-font-display) !important; font-weight: 500 !important; font-size: var(--mdb-step-3) !important; line-height: 1.1 !important; color: var(--mdb-cream) !important; margin: 0 !important; } .page-id-106209 .mdb-evt-accompagne__body, .page-id-106209 .mdb-evt-accompagne__body p { font-family: var(--mdb-font-body) !important; font-size: var(--mdb-step-0) !important; line-height: 1.75 !important; color: rgba(244, 236, 220, 0.86) !important; margin: 0 0 0.6rem 0 !important; } /* Empilement mobile : image au-dessus du texte, liste « Idéal pour » 1 col. Colonnes ciblées par structure (les 2 enfants e-con de chaque ligne) car mdb-evt__txtcol / __imgcol sont strippés. La colonne IMAGE contient .mdb-evt__img → on la remonte (order:-1) via :has(); fallback : empilement simple sinon. */ @media (max-width: 880px) { .page-id-106209 .elementor-element-b8d91f0 > .e-con-inner > .e-con, .page-id-106209 .elementor-element-b8d91f0 > .e-con { flex-wrap: wrap !important; } .page-id-106209 .elementor-element-b8d91f0 .e-con > .e-con-inner > .e-con, .page-id-106209 .elementor-element-b8d91f0 .e-con > .e-con { width: 100% !important; } .page-id-106209 .elementor-element-b8d91f0 .e-con:has(.mdb-evt__img) { order: -1; } .page-id-106209 .mdb-evt__ideal .elementor-icon-list-items { grid-template-columns: 1fr; } } /* --- /le-roof-top (106766) : « Privatiser le Roof Top » (BookingShake) ------ Refonte 2026-07-02 : reprend le contenu du bloc Roof Top de /vos-evenements (« Le coucher de soleil sur le Cap d'Antibes », intro, « Idéal pour » en 2 colonnes) en palette RT, sur bande blanche entre le lavis doré du Concept et le clay des Rendez-vous. « Privatiser le Roof Top » devient l'eyebrow (même hiérarchie que la source : kicker + grand titre). NB : la classe custom d'un CONTENEUR n'est pas émise par Elementor → la section est ciblée par .elementor-element-rtprivsec (cf. gotcha mdbtradbox) ; les classes des WIDGETS (mdb-rt-privatise-*) sortent normalement. */ .mdb-rt .elementor-element-rtprivsec { background: #fff; padding: clamp(3.5rem, 8vw, 6rem) var(--mdb-gutter); text-align: center; } .mdb-rt .mdb-rt-privatise-head .elementor-heading-title { font-family: var(--mdb-font-eyebrow) !important; font-size: var(--mdb-step--1) !important; font-weight: 400 !important; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rt-terracotta, #d9531e) !important; margin: 0 0 0.8rem !important; } .mdb-rt .mdb-rt-privatise-sun .elementor-heading-title { font-family: var(--mdb-font-display) !important; font-weight: 500 !important; font-size: clamp(1.9rem, 3.6vw, 2.8rem) !important; line-height: 1.12 !important; color: var(--rt-ink) !important; margin: 0 0 1.1rem !important; } .mdb-rt .mdb-rt-privatise-txt, .mdb-rt .mdb-rt-privatise-txt p { font-family: var(--mdb-font-body) !important; font-size: var(--mdb-step-0) !important; line-height: 1.7 !important; color: var(--rt-ink) !important; max-width: 46rem; margin: 0 auto !important; } .mdb-rt .mdb-rt-privatise-idealhd .elementor-heading-title { font-family: var(--mdb-font-eyebrow) !important; font-size: var(--mdb-step--1) !important; font-weight: 400 !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rt-ink) !important; opacity: 0.65; margin: clamp(1.8rem, 4vw, 2.6rem) 0 1rem !important; } /* Icon-list « Idéal pour » : grille 2 colonnes centrée, items alignés à gauche, pastilles terracotta (anatomie reprise de mdb-evt__ideal). */ .mdb-rt .mdb-rt-privatise-ideal .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 2.4rem; max-width: 34rem; margin: 0 auto; text-align: left; } .mdb-rt .mdb-rt-privatise-ideal .elementor-icon-list-item { align-items: flex-start; } .mdb-rt .mdb-rt-privatise-ideal .elementor-icon-list-icon { padding-top: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 1.5em !important; width: 14px !important; min-width: 14px !important; flex: 0 0 14px !important; } .mdb-rt .mdb-rt-privatise-ideal .elementor-icon-list-icon svg { width: 6px !important; height: 6px !important; min-width: 6px !important; max-width: 6px !important; flex: 0 0 auto !important; fill: var(--rt-terracotta, #d9531e) !important; overflow: visible !important; } .mdb-rt .mdb-rt-privatise-ideal .elementor-icon-list-text { font-family: var(--mdb-font-body) !important; font-size: var(--mdb-step-0) !important; line-height: 1.5 !important; color: var(--rt-ink) !important; letter-spacing: 0.01em; } .mdb-rt .mdb-rt-privatise-cta { margin-top: clamp(2rem, 4.5vw, 3rem) !important; } /* CTA terracotta plein (sur-écrit le gold pill global .mdb-devis-cta). */ .mdb-rt .mdb-rt-privatise-cta .elementor-button { background: var(--rt-terracotta, #d9531e) !important; color: #fff !important; border-color: var(--rt-terracotta-bright, #e26a3a) !important; } .mdb-rt .mdb-rt-privatise-cta .elementor-button:hover { background: var(--rt-terracotta-deep, #b54115) !important; } @media (max-width: 600px) { .mdb-rt .mdb-rt-privatise-ideal .elementor-icon-list-items { grid-template-columns: 1fr; } } /* ============================================================ Roof Top — Prochains rendez-vous (bloc events, rendu par le thème) Section .rt-events injectée par functions.php sur /le-roof-top/, juste après « Privatiser le Roof Top » et avant le pré-footer Nos Espaces (get_footer prio 9). Rangée date / vignette / titre : la vignette TEC (image mise en avant) est rendue quand elle existe (consigne 2026-07-13). Hors arbre Elementor (donc pas de .elementor-106766), mais scellée au contexte RT via body.mdb-rt. Palette terracotta/sable. ============================================================ */ body.mdb-rt .rt-events { background: var(--rt-clay, #7a2810); padding: clamp(3.5rem, 7vw, 6rem) clamp(1.2rem, 5vw, 3rem); } body.mdb-rt .rt-events__inner { max-width: 1100px; margin: 0 auto; text-align: center; } body.mdb-rt .rt-events__eyebrow { font-family: var(--mdb-font-eyebrow, sans-serif); font-size: var(--mdb-step--1, 0.82rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--rt-terracotta-bright, #e26a3a); margin: 0 0 0.6rem; } body.mdb-rt .rt-events__title { font-family: var(--mdb-font-display, serif); font-weight: 300; font-size: var(--mdb-step-3, 2.2rem); color: var(--rt-sand, #f4e6d2); margin: 0 0 clamp(2rem, 4vw, 3rem); line-height: 1.1; } /* Liste verticale calquée sur l'agenda de l'accueil (ectbe 337ce1e restylé, cf. ~l.1330) : rangée flex alignée baseline, grand jour Cormorant italique, mois/année Tenor empilés, titre = lien souligné + flèche, heure discrète. Même anatomie, palette RT (terracotta/sable sur clay). */ body.mdb-rt .rt-events__list { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; text-align: left; } body.mdb-rt .rt-events__row { display: flex; align-items: baseline; gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.5rem, 3.5vw, 2.4rem) 0; border-bottom: 1px solid var(--rt-rule, rgba(199, 136, 76, 0.32)); } body.mdb-rt .rt-events__row:first-child { border-top: 1px solid var(--rt-rule, rgba(199, 136, 76, 0.32)); } body.mdb-rt .rt-events__date { flex: 0 0 auto; width: clamp(64px, 8vw, 96px); text-align: center; line-height: 1; } body.mdb-rt .rt-events__day { display: block; font-family: var(--mdb-font-display, serif); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 4.5vw, 3.2rem); color: var(--rt-terracotta-bright, #e26a3a); letter-spacing: -0.01em; } body.mdb-rt .rt-events__mon, body.mdb-rt .rt-events__yr { display: block; font-family: var(--mdb-font-eyebrow, sans-serif); font-size: var(--mdb-step--1, 0.82rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--rt-sand, #f4e6d2); opacity: 0.7; margin-top: 0.35rem; } body.mdb-rt .rt-events__yr { opacity: 0.5; } /* Vignette de l'event (image mise en avant TEC), entre date et titre — même cadre 3/2 que l'agenda de l'accueil et /rendez-vous. */ body.mdb-rt .rt-events__frame { flex: 0 0 auto; align-self: center; display: block; width: clamp(6rem, 11vw, 9rem); aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; } body.mdb-rt .rt-events__img { width: 100%; height: 100%; object-fit: cover; /* Affiches portrait : cadrage haut pour garder les visages (cf. accueil). */ object-position: 50% 20%; display: block; transition: transform 0.8s ease; } body.mdb-rt .rt-events__frame:hover .rt-events__img { transform: scale(1.04); } body.mdb-rt .rt-events__body { flex: 1 1 auto; } body.mdb-rt .rt-events__name { margin: 0 0 0.5rem; font-weight: 400; line-height: 1.2; } body.mdb-rt .rt-events__name a { font-family: var(--mdb-font-display, serif); font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.2; color: var(--rt-sand, #f4e6d2); text-decoration: none; background-image: linear-gradient(var(--rt-terracotta-bright, #e26a3a), var(--rt-terracotta-bright, #e26a3a)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; padding-bottom: 0.1em; transition: color 0.3s ease, background-size 0.4s ease; } body.mdb-rt .rt-events__name a::after { content: " \2192"; display: inline-block; font-family: var(--mdb-font-eyebrow, sans-serif); font-size: 0.6em; vertical-align: middle; margin-left: 0.4em; transition: transform 0.3s ease; } body.mdb-rt .rt-events__name a:hover { color: #fff; background-image: linear-gradient(#fff, #fff); } body.mdb-rt .rt-events__name a:hover::after { transform: translateX(0.25em); } body.mdb-rt .rt-events__time { font-family: var(--mdb-font-eyebrow, sans-serif); font-size: var(--mdb-step--1, 0.82rem); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244, 230, 210, 0.6); } body.mdb-rt .rt-events__reserve { display: inline-block; margin-top: clamp(2rem, 4vw, 3rem); padding: 0.85rem 2.4rem; background: var(--rt-terracotta, #d9531e); color: var(--rt-sand, #f4e6d2); font-family: var(--mdb-font-eyebrow, sans-serif); font-size: var(--mdb-step--1, 0.82rem); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--rt-terracotta-bright, #e26a3a); border-radius: 2px; transition: background 0.3s ease; } body.mdb-rt .rt-events__reserve:hover { background: var(--rt-terracotta-deep, #b54115); } /* Mobile : même compactage que l'agenda de l'accueil — date sur UNE ligne (jour + mois + année en baseline), titre dessous, rythme resserré. */ @media (max-width: 600px) { body.mdb-rt .rt-events__row { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 1.4rem 0; } body.mdb-rt .rt-events__date { width: auto; display: flex; align-items: baseline; gap: 0.45rem; text-align: left; } body.mdb-rt .rt-events__day { font-size: 1.9rem; } body.mdb-rt .rt-events__mon, body.mdb-rt .rt-events__yr { margin-top: 0; font-size: 0.7rem; } /* Vignette VISIBLE aussi sur mobile (consigne 2026-07-13, remplace le repli) : bandeau pleine largeur 16/9 entre la ligne date et le titre. */ body.mdb-rt .rt-events__frame { width: 100%; aspect-ratio: 16 / 9; } body.mdb-rt .rt-events__name a { font-size: 1.15rem; } } /* ============================================================ Page Chef — Nicolas Davouze (106198) Article restructuré en widgets natifs Heading + Text Editor. La typo vit ICI (pas d'override par-widget) pour que Nicole édite le texte sans toucher au style. ============================================================ */ /* Section éditoriale Chef — MÊME recette que l'intro crème de la home (élément 7bacf566) : papier crème, titres Cormorant navy, corps Inter encre navy douce, emphase or. Cohérence sitewide. STRUCTURE 100 % NATIVE Elementor : chaque section image est un conteneur ligne (flex row) avec 2 colonnes (image + texte), alternées, éditables par Nicole dans l'éditeur. PAS de float/grid CSS — juste la typo + la déco. On cible la section par .elementor-element-fdad9d0 et la colonne de lecture par .elementor-element-76a75f9 (classes d'ID stables ; les classes custom des conteneurs e-con sont strippées par Elementor). */ body.page-id-106198 .elementor-element-fdad9d0 { background-color: var(--mdb-cream) !important; color: var(--mdb-navy); } /* Largeur de lecture éditoriale + rythme vertical entre sections. */ body.page-id-106198 .elementor-element-76a75f9 { max-width: 820px !important; margin: 0 auto !important; gap: clamp(1.8rem, 4vw, 2.6rem) !important; } /* Titres de section : Cormorant navy (comme la home). */ body.page-id-106198 .mdb-chef-prose__h .elementor-heading-title { font-family: var(--mdb-font-display); font-weight: 400; font-size: var(--mdb-step-3); line-height: 1.05; letter-spacing: -0.012em; color: var(--mdb-navy) !important; margin: 0 0 0.4em 0; } /* Corps : Inter Tight, encre navy douce (identique à l'intro home). */ body.page-id-106198 .mdb-chef-prose__body, body.page-id-106198 .mdb-chef-prose__body .elementor-widget-container, body.page-id-106198 .mdb-chef-prose__body p { font-family: var(--mdb-font-body); font-size: var(--mdb-step-1); line-height: 1.7; color: rgba(20, 32, 44, 0.86) !important; } body.page-id-106198 .mdb-chef-prose__body p { margin: 0 0 1.1em 0; } body.page-id-106198 .mdb-chef-prose__body p:last-child { margin-bottom: 0; } /* Emphase or, comme sur la home (pas de gras navy). */ body.page-id-106198 .mdb-chef-prose__body strong { color: var(--mdb-gold-deep) !important; font-weight: 600; } body.page-id-106198 .mdb-chef-prose__body a { color: var(--mdb-gold-deep) !important; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(138, 103, 54, 0.5); transition: text-decoration-color 0.3s ease; } body.page-id-106198 .mdb-chef-prose__body a:hover { text-decoration-color: var(--mdb-gold-deep); } /* Pull-quote : filets dorés, italique display, accent du chef. */ body.page-id-106198 .mdb-chef-prose__pull .elementor-heading-title { font-family: var(--mdb-font-display); font-weight: 500; font-style: italic; font-size: var(--mdb-step-2); line-height: 1.3; letter-spacing: 0.01em; color: var(--mdb-gold-deep) !important; text-align: center; margin: 0.4em auto; padding: 1.4rem 0; border-top: 1px solid rgba(177, 137, 84, 0.4); border-bottom: 1px solid rgba(177, 137, 84, 0.4); max-width: 32ch; } /* Bouton LinkedIn natif, contour laiton sur crème. */ body.page-id-106198 .mdb-chef-prose__btn .elementor-button { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mdb-font-eyebrow); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mdb-navy-deep) !important; background: transparent !important; border: 1px solid var(--mdb-gold) !important; border-radius: 0 !important; padding: 0.95rem 2rem !important; margin-top: 0.6rem; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } body.page-id-106198 .mdb-chef-prose__btn .elementor-button:hover { background: var(--mdb-navy-deep) !important; border-color: var(--mdb-navy-deep) !important; color: var(--mdb-cream) !important; } /* Image de colonne (conteneur ligne natif) : remplit sa colonne, ratio portrait propre, bords nets. La mise en page vient des colonnes Elementor, pas du CSS. */ body.page-id-106198 .mdb-chef-colimg img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; } body.page-id-106198 .mdb-chef-colimg .elementor-widget-container { height: 100%; } /* Mobile : les colonnes natives Elementor passent en pile (flex-wrap) ; on force la largeur pleine, l'image au-dessus du texte, et on resserre la typo. */ @media (max-width: 767px) { body.page-id-106198 .mdb-chef-row { flex-wrap: wrap; } body.page-id-106198 .mdb-chef-row__img, body.page-id-106198 .mdb-chef-row__txt { width: 100% !important; } body.page-id-106198 .mdb-chef-row__img { order: -1; } body.page-id-106198 .mdb-chef-colimg img { aspect-ratio: 3 / 2; } body.page-id-106198 .mdb-chef-prose__pull .elementor-heading-title { font-size: var(--mdb-step-1); padding: 1.1rem 0; } } /* ========================================================================= RECRUTEMENT — refonte façon concept (page recrutement, SANS hero). Structure (rebuild-recrutement.php) — tout sur papier crème, éditorial : 7168cd1 intro éditoriale (1re section, sous le header fixe) b4c0a01 « Postes ouverts » (#postes) — job-board en LIGNES (cartes ElementsKit converties en lignes : titre | lien) b4c0a02 « Candidature spontanée » (#candidature) — CTA mailto Les widgets ne portent que le contenu ; tout le look vit ici, scellé aux IDs Elementor (les classes custom des containers ne sortent pas toujours dans le DOM — celles des widgets si). ========================================================================= */ /* Page sans hero : le wrapper wp-page reçoit le padding de compensation du header fixe (body.mdb-needs-header-offset) — on le peint en crème pour que la bande sous le header soit du même papier que la 1re section. :has() (tous navigateurs modernes) évite de coupler au page-id, qui diffèrera en prod ; fallback : bande blanche, acceptable. */ body.mdb-needs-header-offset div[data-elementor-type="wp-page"]:has(.elementor-element-b4c0a01) { background: var(--mdb-cream); } /* --- Helpers partagés de la page ----------------------------------------- */ /* Eyebrow Tenor or au-dessus des titres de section (widget réel, donc éditable et traduisible — contrairement aux ::before de la home). */ .mdb-rec-eyebrow .elementor-heading-title { font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step--1); letter-spacing: 0.34em; text-transform: uppercase; font-weight: 400; color: var(--mdb-gold-deep); } .mdb-rec-eyebrow { margin-bottom: 1.1rem !important; } /* Titre de section : Cormorant éditorial. */ .mdb-rec-title .elementor-heading-title { font-family: var(--mdb-font-display); font-weight: 400; font-size: var(--mdb-step-4); line-height: 1.02; letter-spacing: -0.012em; color: var(--mdb-navy); } .mdb-rec-title { margin-bottom: 2.2rem !important; } /* --- INTRO (7168cd1) : crème éditoriale ----------------------------------- */ .elementor-element-7168cd1 { background: var(--mdb-cream) !important; padding-top: clamp(2.5rem, 5vw, 4rem) !important; padding-bottom: clamp(2rem, 4vw, 3.5rem) !important; } .elementor-element-7168cd1 .mdb-rec-title .elementor-heading-title { max-width: 22ch; margin-inline: auto; } .mdb-rec-intro { max-width: 62ch; font-family: var(--mdb-font-body); font-size: var(--mdb-step-0); line-height: 1.65; color: rgba(20, 32, 44, 0.86); } .mdb-rec-intro p { margin: 0 0 1.1rem; } .mdb-rec-intro p:last-child { margin-bottom: 0; } .mdb-rec-intro strong { color: var(--mdb-gold-deep); font-weight: 500; } /* Exergue : les deux questions en Cormorant italique, filet or au-dessus. */ .mdb-rec-intro .mdb-rec-pull { font-family: var(--mdb-font-display); font-style: italic; font-size: var(--mdb-step-2); line-height: 1.4; color: var(--mdb-navy); text-align: center; margin: 2.4rem auto; padding-top: 2rem; position: relative; } .mdb-rec-intro .mdb-rec-pull::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 1px; background: var(--mdb-gold); } /* --- POSTES OUVERTS (b4c0a01) : crème, job-board en lignes ----------------- */ .elementor-element-b4c0a01 { background: var(--mdb-cream) !important; padding-block: clamp(2rem, 5vw, 4rem) !important; } .elementor-element-b4c0a01 .mdb-rec-eyebrow, .elementor-element-b4c0a01 .mdb-rec-title { text-align: center; } .elementor-element-b4c0a01 .mdb-rec-title { margin-bottom: 1.2rem !important; } /* Intitulé de groupe (À l'accueil / En cuisine / En salle) : Tenor or espacé + filet qui court jusqu'au bord droit. */ .mdb-rec-group { margin-top: 2.4rem !important; } .mdb-rec-group .elementor-heading-title { display: flex; align-items: center; gap: 1.2rem; font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step--1); font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mdb-gold-deep); } .mdb-rec-group .elementor-heading-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--mdb-rule); } /* Les cartes ElementsKit deviennent des LIGNES : une offre par ligne, titre à gauche, lien « Voir le poste » à droite, filet fin entre deux. */ .elementor-element-b4c0a01 .post-items { display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 !important; } .elementor-element-b4c0a01 .post-items > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-element-b4c0a01 .elementskit-post-image-card { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--mdb-rule-soft) !important; } /* L'en-tête de carte (vignette) est vide — les offres n'ont pas d'image. */ .elementor-element-b4c0a01 .elementskit-entry-header { display: none !important; } .elementor-element-b4c0a01 .elementskit-post-body { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 1.5rem !important; padding: 1.3rem 0.25rem !important; transition: padding-left 0.35s var(--mdb-ease); } /* Affordance : la ligne s'indente doucement au survol. */ .elementor-element-b4c0a01 .elementskit-post-image-card:hover .elementskit-post-body { padding-left: 1rem !important; } .elementor-element-b4c0a01 .entry-title { margin: 0 !important; } .elementor-element-b4c0a01 .entry-title a { font-family: var(--mdb-font-display) !important; font-weight: 400 !important; font-size: clamp(1.3rem, 2vw, 1.7rem) !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mdb-navy) !important; transition: color 0.3s var(--mdb-ease); } .elementor-element-b4c0a01 .entry-title a:hover { color: var(--mdb-gold-deep) !important; } /* Lien « Voir le poste » : or souligné + flèche (pattern cartes home). */ .elementor-element-b4c0a01 .btn-wraper { margin: 0 !important; flex-shrink: 0; } .elementor-element-b4c0a01 .elementskit-btn { display: inline-block !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0.25rem 0 !important; color: var(--mdb-gold-deep) !important; font-family: var(--mdb-font-eyebrow) !important; font-size: var(--mdb-step--1) !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; white-space: nowrap !important; border-bottom: 1px solid var(--mdb-rule) !important; transition: color 0.3s var(--mdb-ease), border-color 0.3s var(--mdb-ease); } .elementor-element-b4c0a01 .elementskit-btn::after { content: " \2192"; display: inline-block; transition: transform 0.3s var(--mdb-ease); } .elementor-element-b4c0a01 .elementskit-btn:hover { color: var(--mdb-navy) !important; border-color: var(--mdb-navy) !important; background: transparent !important; } .elementor-element-b4c0a01 .elementskit-btn:hover::after { transform: translateX(0.25em); } /* --- CANDIDATURE SPONTANÉE (b4c0a02) : crème, centré ----------------------- */ .elementor-element-b4c0a02 { background: var(--mdb-cream) !important; padding-top: clamp(2.5rem, 5vw, 4rem) !important; padding-bottom: clamp(3.5rem, 8vw, 6rem) !important; } .mdb-rec-spont__title .elementor-heading-title { font-family: var(--mdb-font-display); font-weight: 400; font-size: var(--mdb-step-3); line-height: 1.05; color: var(--mdb-navy); padding-top: 1.8rem; position: relative; } /* Court filet héraldique au-dessus du titre. */ .mdb-rec-spont__title .elementor-heading-title::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 1px; background: var(--mdb-gold); } .mdb-rec-spont__title { margin-bottom: 1.4rem !important; } .mdb-rec-spont__text { max-width: 50ch; font-family: var(--mdb-font-body); font-size: var(--mdb-step-0); line-height: 1.65; color: rgba(20, 32, 44, 0.86); margin-bottom: 2rem !important; } .mdb-rec-spont__text a { color: var(--mdb-gold-deep); border-bottom: 1px solid var(--mdb-rule); transition: color 0.3s var(--mdb-ease), border-color 0.3s var(--mdb-ease); } .mdb-rec-spont__text a:hover { color: var(--mdb-navy); border-color: var(--mdb-navy); } .mdb-rec-spont__cta .elementor-button { display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.2rem; background: var(--mdb-gold); color: var(--mdb-navy-deep); border-radius: 0; font-family: var(--mdb-font-eyebrow); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 400; transition: background 0.4s var(--mdb-ease), transform 0.4s var(--mdb-ease); } .mdb-rec-spont__cta .elementor-button:hover { background: var(--mdb-gold-bright); transform: translateY(-2px); } .mdb-rec-spont__cta .elementor-button-text::after { content: "→"; margin-left: 0.9rem; font-family: var(--mdb-font-body); } /* --- Mobile ---------------------------------------------------------------- */ @media (max-width: 767px) { /* La ligne d'offre s'empile : titre au-dessus, lien dessous. */ .elementor-element-b4c0a01 .elementskit-post-body { flex-direction: column !important; align-items: flex-start !important; gap: 0.55rem !important; padding: 1.1rem 0 !important; } .elementor-element-b4c0a01 .elementskit-post-image-card:hover .elementskit-post-body { padding-left: 0 !important; } .mdb-rec-group .elementor-heading-title { letter-spacing: 0.22em; } .mdb-rec-intro .mdb-rec-pull { font-size: var(--mdb-step-1); } } /* ============================================================ ÉDITORIAUX — articles de la catégorie FOCUS (ex. /lengagement-rs-…). Rendu par le template Elementor « Article unique » (theme-post-title + theme-post-content) : le contenu vient de l'éditeur classique WP, tout le look vit ici. Scellé à .category-focus (slug de catégorie, identique staging/prod — PAS de postid-…, qui diffèrera en prod). MÊME recette que la page Chef : papier crème, titres Cormorant navy, corps Inter encre douce, emphase or, filets héraldiques. ============================================================ */ /* Le wrapper single est sibling du header fixe mais n'est pas .e-con : l'offset générique (l. 535) ne le couvre pas — on le pose ici. */ body.mdb-needs-header-offset .elementor-location-single.category-focus { padding-top: var(--mdb-header-clearance, 172px); } /* Papier crème sur le wrapper ; les conteneurs du template portent un fond hérité de l'ancien thème (taupe sombre), on les neutralise. */ .elementor-location-single.category-focus { background: var(--mdb-cream); padding-bottom: clamp(3.5rem, 8vw, 6rem); } .elementor-location-single.category-focus > .e-con { background: transparent !important; } /* Conteneur d'en-tête vide du template (spacer hérité) : sans objet ici. */ .elementor-location-single.category-focus > .e-con:not(:has(.elementor-widget)) { display: none; } /* Garde-fou : le contenu hérité de l'ancien thème (fond sombre) est truffé de spans blancs inline — invisibles sur crème, on force l'encre courante. */ .elementor-location-single.category-focus [style*="#ffffff"] { color: inherit !important; } /* --- Titre de l'article (theme-post-title) -------------------------------- */ .elementor-location-single.category-focus .elementor-widget-theme-post-title .elementor-heading-title { font-family: var(--mdb-font-display); font-weight: 400; font-size: var(--mdb-step-3); line-height: 1.12; letter-spacing: 0.04em; color: var(--mdb-navy) !important; text-align: center; max-width: 24ch; margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.2rem) 0 1.7rem; position: relative; } /* Court filet héraldique sous le titre (même motif que recrutement). */ .elementor-location-single.category-focus .elementor-widget-theme-post-title .elementor-heading-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 1px; background: var(--mdb-gold); } /* Eyebrow au-dessus du titre : label de rubrique (comme les pages construites à la main). Rendu en CSS pour rester éditeur-safe (aucun markup à saisir). FR/EN piloté par [lang] : la page bascule en lang="en" sous TranslatePress. */ .elementor-location-single.category-focus .elementor-widget-theme-post-title .elementor-heading-title::before { content: "Engagement"; display: block; font-family: var(--mdb-font-eyebrow); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--mdb-gold-deep); margin-bottom: 0.9rem; } [lang="en"] .elementor-location-single.category-focus .elementor-widget-theme-post-title .elementor-heading-title::before, html[lang^="en"] .elementor-location-single.category-focus .elementor-widget-theme-post-title .elementor-heading-title::before { content: "Commitment"; } /* --- Colonne de lecture (theme-post-content) ------------------------------- Le CSS du template (post-107243.css, chargé APRÈS overrides.css) pose sur le widget : fond or, color #FFFFFF, padding 150px, text-align center. On bat tout ça en !important. */ .elementor-location-single.category-focus .elementor-widget-theme-post-content { width: 100%; max-width: 820px !important; margin: 0 auto; padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 4vw, 2rem) 0 !important; background: transparent !important; text-align: left !important; font-family: var(--mdb-font-body) !important; font-size: var(--mdb-step-1); line-height: 1.7; color: rgba(20, 32, 44, 0.86) !important; } .elementor-location-single.category-focus .elementor-widget-theme-post-content p { margin: 0 0 1.15em; } /* Figure vedette (injectée par le filtre the_content) : document encadré, tissé dans le texte façon magazine. Flotte à droite sur desktop, le corps l'enveloppe. */ .elementor-location-single.category-focus .mdb-edito-figure { float: right; width: min(300px, 42%); margin: 0.35rem 0 1.4rem 2rem; padding: 0; } .elementor-location-single.category-focus .mdb-edito-figure__img { display: block; width: 100%; height: auto; border: 1px solid var(--mdb-rule); background: #fff; padding: 0.55rem; box-shadow: 0 18px 40px -28px rgba(14, 37, 63, 0.5); } .elementor-location-single.category-focus .mdb-edito-figure__cap { margin-top: 0.7rem; font-family: var(--mdb-font-eyebrow); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mdb-gold-deep); text-align: center; } /* Le float ne doit pas déborder sous les

/titres suivants : on clear après la 1re section (par sécurité, un clear doux sur les h2 qui suivraient la figure n'est pas souhaitable — on laisse le texte envelopper, mais on garantit que le pied de colonne clear). */ .elementor-location-single.category-focus .elementor-widget-theme-post-content::after { content: ""; display: block; clear: both; } /* Chapô : le 1er paragraphe du corps sert d'accroche (Cormorant, un cran plus grand, encre plus dense) — masthead éditorial comme /nicolas-davouze. */ .elementor-location-single.category-focus .elementor-widget-theme-post-content > p:first-of-type { font-family: var(--mdb-font-display); font-size: var(--mdb-step-2); line-height: 1.4; font-weight: 400; color: var(--mdb-navy); margin-bottom: 1.4em; } .elementor-location-single.category-focus .elementor-widget-theme-post-content > p:first-of-type strong { color: var(--mdb-gold-deep); font-weight: 500; } /* Titres de section : Cormorant navy, un cran sous le titre d'article. */ .elementor-location-single.category-focus .elementor-widget-theme-post-content h2 { font-family: var(--mdb-font-display); font-weight: 400; font-size: var(--mdb-step-2); line-height: 1.15; letter-spacing: -0.008em; color: var(--mdb-navy); margin: 1.6em 0 0.6em; } /* Sous-titres (résultats) : eyebrow Tenor or, comme les rubriques du site. */ .elementor-location-single.category-focus .elementor-widget-theme-post-content h3 { font-family: var(--mdb-font-eyebrow); font-weight: 400; font-size: var(--mdb-step-0); letter-spacing: 0.24em; text-transform: uppercase; color: var(--mdb-gold-deep); margin: 1.8em 0 0.7em; } /* Emphase or, liens soulignés or — recette Davouze. */ .elementor-location-single.category-focus .elementor-widget-theme-post-content strong { color: var(--mdb-gold-deep); font-weight: 600; } .elementor-location-single.category-focus .elementor-widget-theme-post-content a { color: var(--mdb-gold-deep); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(138, 103, 54, 0.5); transition: text-decoration-color 0.3s ease; } .elementor-location-single.category-focus .elementor-widget-theme-post-content a:hover { text-decoration-color: var(--mdb-gold-deep); } /* Listes : puces or, retrait doux. */ .elementor-location-single.category-focus .elementor-widget-theme-post-content ul { margin: 0 0 1.15em; padding-left: 1.3em; } .elementor-location-single.category-focus .elementor-widget-theme-post-content li { margin-bottom: 0.45em; } .elementor-location-single.category-focus .elementor-widget-theme-post-content li::marker { color: var(--mdb-gold); } /* Séparateurs

: court filet héraldique centré, pas de trait pleine largeur. */ .elementor-location-single.category-focus .elementor-widget-theme-post-content hr { border: 0; width: 64px; height: 1px; background: var(--mdb-gold); margin: clamp(2rem, 4vw, 3rem) auto; } /* Images de contenu (infographie bilan) : centrées, cadrées d'un filet. */ .elementor-location-single.category-focus .elementor-widget-theme-post-content img.aligncenter { display: block; margin: 2rem auto; width: 100%; max-width: 540px; height: auto; border: 1px solid var(--mdb-rule); background: #fff; padding: 0.6rem; } /* Exergue de clôture : Cormorant italique or, filet au-dessus (motif .mdb-rec-pull). Posée en classe dans le contenu (rejouable par l'éditrice). p.… pour battre la règle de marge des

du widget (plus spécifique). */ .elementor-location-single.category-focus .elementor-widget-theme-post-content p.mdb-edito-pull { font-family: var(--mdb-font-display); font-style: italic; font-weight: 500; font-size: var(--mdb-step-2); line-height: 1.35; color: var(--mdb-gold-deep); text-align: center; max-width: 26ch; margin: 2.6rem auto 0; padding-top: 2rem; position: relative; } .elementor-location-single.category-focus .elementor-widget-theme-post-content p.mdb-edito-pull::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 1px; background: var(--mdb-gold); } .elementor-location-single.category-focus .elementor-widget-theme-post-content p.mdb-edito-pull strong { color: inherit; font-weight: inherit; } /* --- Mobile ---------------------------------------------------------------- */ @media (max-width: 767px) { /* Header mobile (bandeau 28px + logo empilé) ≈ 170px : l'offset générique de 100px laisse la 1re ligne du titre sous le header — on compense. */ body.mdb-needs-header-offset .elementor-location-single.category-focus { padding-top: 185px; } .elementor-location-single.category-focus .elementor-widget-theme-post-content h3 { letter-spacing: 0.18em; } .elementor-location-single.category-focus .elementor-widget-theme-post-content p.mdb-edito-pull { font-size: var(--mdb-step-1); } /* Figure : plein cadre centré, plus de float, largeur bornée pour un doc portrait. */ .elementor-location-single.category-focus .mdb-edito-figure { float: none; width: min(300px, 78%); margin: 0 auto 1.8rem; } .elementor-location-single.category-focus .elementor-widget-theme-post-title .elementor-heading-title::before { letter-spacing: 0.24em; } /* Chapô : un cran plus petit sur mobile. */ .elementor-location-single.category-focus .elementor-widget-theme-post-content > p:first-of-type { font-size: var(--mdb-step-1); } } /* ========================================================================= OFFRES D'EMPLOI — pages single des posts (ex. /chef-patissier). Données par offre : rebuild-job-posts.php (lien retour / description / « Postuler » / formulaire CF7 CANDIDATURE via shortcode). Le chrome vient du template single Elementor 107243 (« Article unique »), partagé par TOUS les posts : on le repeint ici en crème, scellé à body.single-post pour ne toucher ni les pages ni le Roof Top. ========================================================================= */ /* Wrapper du template : papier crème (la bande d'offset du header est déjà crème via la règle padding-top globale + ce fond). */ body.single-post div[data-elementor-type="single-post"] { background: var(--mdb-cream); } /* --- Template 107243 : neutraliser le look or hérité --------------------- */ /* 1er container : strip or vide -> masqué. */ body.single-post .elementor-element-ad654b1 { display: none !important; } /* Bande titre : crème, titre éditorial Cormorant + court filet or dessous. */ body.single-post .elementor-element-a8776d3 { background: var(--mdb-cream) !important; padding-top: clamp(2rem, 4vw, 3rem) !important; padding-bottom: 0 !important; } body.single-post .elementor-element-a8776d3 .elementor-heading-title { font-family: var(--mdb-font-display); font-weight: 400; font-size: var(--mdb-step-4); line-height: 1.02; letter-spacing: -0.012em; color: var(--mdb-navy); text-align: center; padding-bottom: 1.6rem; position: relative; } body.single-post .elementor-element-a8776d3 .elementor-heading-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 1px; background: var(--mdb-gold); } /* Zone contenu : crème, et reset complet du widget post-content (l'ancien réglage portait un mask "flower", width 9% et padding 150px). Le conteneur porte un fond blanc + padding 150px hérités : on neutralise en crème pour TOUS les single-post (offres ET FOCUS). */ body.single-post .elementor-element-d1fa1b7 { background: var(--mdb-cream) !important; padding-block: clamp(2rem, 4vw, 3.5rem) !important; } /* Reset pleine largeur du widget : réservé aux offres d'emploi. Les articles FOCUS partagent ce template (107243) mais gèrent leur propre colonne de lecture (820px, plus haut) — `:not(.mdb-focus)` les en exclut. La classe body `mdb-focus` est posée par le filtre body_class du thème. */ body.single-post:not(.mdb-focus) .elementor-element-d1fa1b7 .elementor-widget-theme-post-content { width: 100% !important; max-width: 100% !important; padding: 0 !important; background: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; color: inherit !important; } /* Pour FOCUS : on garde le reset visuel (fond, mask, padding) SANS écraser la largeur de colonne définie plus haut. */ body.single-post.mdb-focus .elementor-element-d1fa1b7 .elementor-widget-theme-post-content { background: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } /* --- Lien retour « Toutes nos offres » ------------------------------------ */ .mdb-job-back { margin-bottom: 2.2rem !important; } .mdb-job-back .elementor-button, .mdb-job-back a.elementor-button { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0; background: transparent; border: 0; border-radius: 0; color: var(--mdb-gold-deep); font-family: var(--mdb-font-eyebrow); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; } .mdb-job-back .elementor-button-text::before { content: "← "; font-family: var(--mdb-font-body); } .mdb-job-back .elementor-button-text { border-bottom: 1px solid var(--mdb-rule); padding-bottom: 4px; transition: color 0.3s var(--mdb-ease), border-color 0.3s var(--mdb-ease); } .mdb-job-back .elementor-button:hover .elementor-button-text { color: var(--mdb-navy); border-color: var(--mdb-navy); } /* --- Description de l'offre ----------------------------------------------- */ .mdb-job-desc { font-family: var(--mdb-font-body); font-size: var(--mdb-step-0); line-height: 1.7; color: rgba(20, 32, 44, 0.86); max-width: 62ch; } .mdb-job-desc p { margin: 0 0 1rem; } .mdb-job-desc strong { color: var(--mdb-gold-deep); font-weight: 500; } .mdb-job-desc ul { margin: 0 0 1rem; padding-left: 1.2rem; } .mdb-job-desc li { margin-bottom: 0.35rem; } .mdb-job-desc li::marker { color: var(--mdb-gold-deep); } /* --- Section « Postuler » -------------------------------------------------- */ .mdb-job-apply { margin-top: 2.6rem !important; padding-top: 2.4rem !important; border-top: 1px solid var(--mdb-rule-soft); } .mdb-job-apply .elementor-heading-title { font-family: var(--mdb-font-display); font-weight: 400; font-size: var(--mdb-step-3); line-height: 1.05; color: var(--mdb-navy); } .mdb-job-form-intro { font-family: var(--mdb-font-body); font-size: var(--mdb-step-0); line-height: 1.65; color: rgba(20, 32, 44, 0.86); max-width: 62ch; margin-top: 0.9rem !important; margin-bottom: 1.8rem !important; } .mdb-job-form-intro a { color: var(--mdb-gold-deep); border-bottom: 1px solid var(--mdb-rule); transition: color 0.3s var(--mdb-ease), border-color 0.3s var(--mdb-ease); } .mdb-job-form-intro a:hover { color: var(--mdb-navy); border-color: var(--mdb-navy); } /* --- Formulaire CANDIDATURE (CF7) ------------------------------------------ Champs éditoriaux : fond translucide, filet or, focus net. */ .mdb-job-form .wpcf7 { max-width: 620px; } .mdb-job-form .wpcf7 p { margin: 0 0 1rem; font-family: var(--mdb-font-body); font-size: var(--mdb-step-0); color: rgba(20, 32, 44, 0.86); } .mdb-job-form input[type="text"], .mdb-job-form input[type="email"], .mdb-job-form input[type="tel"], .mdb-job-form textarea { width: 100%; background: rgba(255, 255, 255, 0.45); border: 1px solid var(--mdb-rule); border-radius: 0; padding: 0.85rem 1rem; font-family: var(--mdb-font-body); font-size: var(--mdb-step-0); color: var(--mdb-ink); transition: border-color 0.3s var(--mdb-ease), background 0.3s var(--mdb-ease); } .mdb-job-form input:focus, .mdb-job-form textarea:focus { outline: none; border-color: var(--mdb-gold-deep); background: rgba(255, 255, 255, 0.75); } .mdb-job-form ::placeholder { color: rgba(20, 32, 44, 0.45); opacity: 1; } .mdb-job-form textarea { min-height: 140px; resize: vertical; } /* Préfixe téléphonique : champ court. */ .mdb-job-form input[name="Prefixe"] { width: 110px; } /* Upload CV : libellé + champ fichier discrets. */ .mdb-job-form input[type="file"] { font-family: var(--mdb-font-body); font-size: var(--mdb-step--1); color: rgba(20, 32, 44, 0.7); } /* Bouton envoyer : CTA or maison. */ .mdb-job-form input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.2rem; background: var(--mdb-gold); color: var(--mdb-navy-deep); border: 0; border-radius: 0; font-family: var(--mdb-font-eyebrow); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 400; cursor: pointer; transition: background 0.4s var(--mdb-ease), transform 0.4s var(--mdb-ease); } .mdb-job-form input[type="submit"]:hover { background: var(--mdb-gold-bright); transform: translateY(-2px); } /* Messages de validation CF7 sobres. */ .mdb-job-form .wpcf7-not-valid-tip { font-family: var(--mdb-font-body); font-size: var(--mdb-step--1); color: var(--mdb-coral); margin-top: 0.3rem; } .mdb-job-form .wpcf7-response-output { border: 1px solid var(--mdb-rule) !important; font-family: var(--mdb-font-body); font-size: var(--mdb-step-0); color: var(--mdb-ink); margin: 1.2rem 0 0 !important; padding: 0.8rem 1rem !important; } /* ========================================================================= CARTES LE ROOF TOP — /le-roof-top/cocktails/ + /le-roof-top/vins-champagnes/ + /le-roof-top/le-menu-food-du-roof-top/ (rejouée depuis le PDF food MAJ juillet 2026, cf. site-backup/rt-carte-food-rebuild.php). Skin des cartes papier RT (fond blanc, orange vif, filets tan) posé sur le SYSTÈME carte MdB existant (mdb-menu-title / mdb-carte-section / mdb-pricelist / mdb-carte-note) : mêmes widgets natifs, recolorés. Nouveautés propres aux cartes RT : - .mdb-rtcarte-meta : prix de section affiché UNE fois (« 24 € »), comme sur la carte papier. - .mdb-rtcarte-sub : sous-intitulé script (« Vins Blancs ») avec format en ligne (.mdb-rtcarte-fmt, « 12cl - 75cl »). - .mdb-rtcarte-subcaps : sous-intitulé capitales souligné (spiritueux). - --rtwine / --rtcktl / --rtspirit : variantes du price-list. Scope : body.mdb-rt-carte (posée par functions.php via mdb_is_rt_page()). Le chrome RT (header terracotta, footer, brandswitch) suit body.mdb-rt. ========================================================================= */ body.mdb-rt-carte { --rtc-orange: #dd6f16; /* orange vif des cartes papier RT */ --rtc-orange-deep: #b45a10; /* déclinaison foncée : prix, hover */ --rtc-bronze: #a5622a; /* sous-lignes italiques lisibles sur blanc */ --rtc-tan: #c49a6c; /* filets + libellés de format */ --rtc-taupe: #6e5844; /* noms (cocktails, flacons) */ --rtc-rule: rgba(196, 154, 108, 0.45); } /* Racine des trois pages : respiration sous le header fixe + avant Nos Espaces */ body.mdb-rt-carte .elementor-element-rtccroot, body.mdb-rt-carte .elementor-element-rtcvroot, body.mdb-rt-carte .elementor-element-rtcfroot { padding: clamp(2.2rem, 5vw, 4rem) var(--mdb-gutter, 1.5rem) clamp(3rem, 7vw, 5rem); } /* En-tête de carte : eyebrow tan + grand titre Cormorant italique orange */ body.mdb-rt-carte .mdb-menu-eyebrow .elementor-heading-title { color: var(--rtc-tan); } body.mdb-rt-carte .mdb-menu-title .elementor-heading-title { color: var(--rtc-orange); } body.mdb-rt-carte .mdb-rtcarte-intro p { font-family: var(--mdb-font-display); font-style: italic; font-size: var(--mdb-step-1); line-height: 1.5; color: var(--rtc-bronze); max-width: 44ch; margin: 0 auto; text-align: center; } /* Intitulés de section : mêmes filets latéraux que MdB, passés en orange/tan */ body.mdb-rt-carte .mdb-carte-section .elementor-heading-title { color: var(--rtc-orange); letter-spacing: 0.22em; } body.mdb-rt-carte .mdb-carte-section .elementor-heading-title::before, body.mdb-rt-carte .mdb-carte-section .elementor-heading-title::after { background: var(--rtc-tan); } /* Prix de section unique (« 24 € ») : geste signature des cartes papier RT. Collé sous l'intitulé (dont le h2 porte 1.4rem de marge basse). */ body.mdb-rt-carte .mdb-rtcarte-meta { text-align: center; margin-top: -1.1rem; } body.mdb-rt-carte .mdb-rtcarte-meta .elementor-heading-title { font-family: var(--mdb-font-display); font-style: italic; font-weight: 600; font-size: var(--mdb-step-2); color: var(--rtc-orange); margin: 0 0 0.4rem; } /* Sous-intitulé script (« Vins Blancs » + format « 12cl - 75cl ») */ body.mdb-rt-carte .mdb-rtcarte-sub { max-width: 52rem; margin: clamp(1.6rem, 4vw, 2.6rem) auto 0; } body.mdb-rt-carte .mdb-rtcarte-sub .elementor-heading-title { font-family: var(--mdb-font-display); font-style: italic; font-weight: 600; font-size: var(--mdb-step-2); color: var(--rtc-orange); display: flex; align-items: baseline; gap: 1.2rem; border-bottom: 1px solid var(--rtc-rule); padding-bottom: 0.3em; margin: 0; text-align: left; } body.mdb-rt-carte .mdb-rtcarte-fmt { font-family: var(--mdb-font-eyebrow); font-style: normal; font-weight: 400; font-size: var(--mdb-step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rtc-tan); white-space: nowrap; } /* Sous-intitulé capitales souligné (familles de spiritueux) */ body.mdb-rt-carte .mdb-rtcarte-subcaps { margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; } body.mdb-rt-carte .mdb-rtcarte-subcaps .elementor-heading-title { font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step-0); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rtc-orange); border-bottom: 1px solid var(--rtc-rule); padding-bottom: 0.45em; margin: 0; text-align: left; } /* Price-list : recolorisation RT (la typo/les tailles restent celles du système carte ; même chaîne de sélecteur pour gagner en spécificité). */ body.mdb-rt-carte .mdb-pricelist .elementor-price-list .elementor-price-list-item .elementor-price-list-title { color: var(--rtc-taupe); } body.mdb-rt-carte .mdb-pricelist .elementor-price-list .elementor-price-list-item .elementor-price-list-price { color: var(--rtc-orange-deep); } body.mdb-rt-carte .mdb-pricelist .elementor-price-list .elementor-price-list-item p.elementor-price-list-description { color: var(--rtc-bronze); } /* Variante VINS : noms de flacons en casse phrase (pas de capitales), sous-ligne cuvée plus courte donc un cran plus discrète. */ body.mdb-rt-carte .mdb-pricelist--rtwine .elementor-price-list .elementor-price-list-item .elementor-price-list-title { text-transform: none; letter-spacing: 0.03em; } body.mdb-rt-carte .mdb-pricelist--rtwine .elementor-price-list .elementor-price-list-item p.elementor-price-list-description { font-size: var(--mdb-step-1) !important; } /* Variante COCKTAILS : compositions longues → step-1 avec interligne aéré (step-2 des cartes plats est pensé pour des sous-lignes d'UNE ligne). */ body.mdb-rt-carte .mdb-pricelist--rtcktl .elementor-price-list .elementor-price-list-item p.elementor-price-list-description { font-size: var(--mdb-step-1) !important; line-height: 1.45; max-width: 56ch; } /* Variante SPIRITUEUX : rangées compactes nom + prix */ body.mdb-rt-carte .mdb-pricelist--rtspirit .elementor-price-list-item { padding: 0.35rem 0; } body.mdb-rt-carte .mdb-pricelist--rtspirit .elementor-price-list .elementor-price-list-item .elementor-price-list-title { font-size: var(--mdb-step-0) !important; letter-spacing: 0.08em; } body.mdb-rt-carte .mdb-pricelist--rtspirit .elementor-price-list .elementor-price-list-item .elementor-price-list-price { font-size: var(--mdb-step-1) !important; } /* Grille 2 colonnes des spiritueux (conteneur e-con-full → cibler l'ID, cf. mémoire elementor-econ-full-vs-boxed : pas de .e-con-inner ici). */ body.mdb-rt-carte .elementor-element-rtccspirits { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem clamp(2.5rem, 6vw, 5rem); max-width: 52rem; width: 100%; margin: 0 auto; align-items: start; } /* Sections encadrées RT (Signatures / Côté Asie) : cadre tan façon carte papier. Elementor n'émet pas la classe custom d'un conteneur → IDs. */ body.mdb-rt-carte .elementor-element-rtccsignbox, body.mdb-rt-carte .elementor-element-rtcvasiebox { max-width: 52rem; margin: 1.8rem auto 0; border: 1px solid var(--rtc-tan); box-shadow: 0 0 0 4px rgba(221, 111, 22, 0.06), inset 0 0 0 1px var(--rtc-rule); padding: 0.2rem clamp(1.2rem, 4vw, 2.6rem) 1.6rem; } body.mdb-rt-carte .elementor-element-rtccsignbox > .e-con-inner, body.mdb-rt-carte .elementor-element-rtcvasiebox > .e-con-inner { width: 100%; } body.mdb-rt-carte .elementor-element-rtccsignbox .mdb-carte-section .elementor-heading-title, body.mdb-rt-carte .elementor-element-rtcvasiebox .mdb-carte-section .elementor-heading-title { margin-top: 1.6rem; } /* Notes bas de carte */ body.mdb-rt-carte .mdb-carte-fr-note { color: var(--rtc-taupe); } body.mdb-rt-carte .mdb-carte-en-note { color: var(--rtc-bronze); } @media (max-width: 767px) { /* Le header RT mobile empile toggle + logo (~178px avec le brandswitch), plus haut que l'offset générique (100px) : sans ce complément, l'eyebrow passe SOUS le header fixe. */ body.mdb-rt-carte .elementor-element-rtccroot, body.mdb-rt-carte .elementor-element-rtcvroot, body.mdb-rt-carte .elementor-element-rtcfroot { padding-top: 7rem; } } @media (max-width: 700px) { body.mdb-rt-carte .elementor-element-rtccspirits { grid-template-columns: 1fr; } } @media (max-width: 600px) { body.mdb-rt-carte .mdb-rtcarte-sub .elementor-heading-title { flex-direction: column; align-items: flex-start; gap: 0.15rem; } } /* ========================================================================= BANDE « NOS CARTES » — /le-roof-top, juste sous le hero. Deux liens (La Carte des Cocktails / Vins & Champagnes) vers les pages cartes RT. Widgets natifs posés par site-backup/rt-cartesnav-insert.php ; conteneurs ciblés par ID (classes custom non émises, cf. carte-styling). Bande blanche entre le hero sombre et le lavis doré du Concept, boutons filet terracotta → inversion terracotta/sable au survol. ========================================================================= */ body.mdb-rt .elementor-element-rtcartesnav { background: #fff; padding: clamp(2.6rem, 6vw, 4rem) var(--mdb-gutter, 1.5rem); text-align: center; } body.mdb-rt .mdb-rt-cartesnav-head .elementor-heading-title { font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step-0); letter-spacing: 0.28em; text-transform: uppercase; color: var(--rt-terracotta); margin: 0 0 1.8rem; } body.mdb-rt .elementor-element-rtcarterow { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; width: 100%; } body.mdb-rt .elementor-element-rtcarterow .elementor-widget-button { width: auto; } body.mdb-rt .mdb-rt-cartesnav-btn .elementor-button { background: transparent; border: 1px solid var(--rt-terracotta); border-radius: 0; color: var(--rt-terracotta-deep); font-family: var(--mdb-font-eyebrow); font-size: var(--mdb-step--1); letter-spacing: 0.14em; text-transform: uppercase; padding: 1.05rem 2.4rem; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } body.mdb-rt .mdb-rt-cartesnav-btn .elementor-button:hover, body.mdb-rt .mdb-rt-cartesnav-btn .elementor-button:focus { background: var(--rt-terracotta); border-color: var(--rt-terracotta); color: var(--rt-sand); } @media (max-width: 600px) { body.mdb-rt .elementor-element-rtcarterow { flex-direction: column; } body.mdb-rt .elementor-element-rtcarterow .elementor-widget-button { width: 100%; max-width: 22rem; } body.mdb-rt .mdb-rt-cartesnav-btn .elementor-button { display: block; width: 100%; } }