/* =========================================================== Vive le Célibat — système « clair-obscur » (brand book v2) Deux thèmes togglables : sombre (défaut) + clair (le négatif). ⚠️ CETTE FEUILLE SERT LES DEUX CÔTÉS, et c'est la raison de sa forme. Le prototype et le thème compilé ont le MÊME balisage et les MÊMES classes, parce que `bin/site compiler` « ne transporte ni attribut ni imbrication » : il nomme chaque bloc d'après son CHAMP — `data-sb-field="chapo"` donne `sb-c-chapo` — et aplatit la section. Une feuille qui viserait `.hero`, `.sec`, `.card` n'aurait donc aucune prise sur le site servi : mesuré le 28.10.2026, le site compilé sortait en texte empilé, sans une seule règle appliquée, pendant que le prototype était intact. Conséquence pratique : LE NOM D'UN CHAMP EST UN NOM DE STYLE. Le renommer déshabille la section. La charte de la marque fait foi, et elle vit sur kDrive : 02_BRANDS/CLIENTES/VCEL_Vive_le_Celibat — décision #51, l'identité ne se versionne pas. Les valeurs ci-dessous en sont la transcription, pas la source. =========================================================== */ /* ---- POLICES ---- Sous-ensemble `latin` seul. Montserrat et Inter sont VARIABLES. Licences SIL OFL 1.1, déposées à côté des fichiers. Le thème REPRODUIT l'arborescence du prototype (`css/`, `js/`, `assets/` à la racine) : c'est ce qui fait tomber juste les `url('../assets/…')` ci-dessous, qui sont les mêmes des deux côtés. Une profondeur de dossier est une dépendance silencieuse. */ @font-face{ font-family:'Allura'; src:url('../assets/fonts/Allura-400-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Montserrat'; src:url('../assets/fonts/Montserrat-600-900-latin.woff2') format('woff2'); font-weight:600 900; font-style:normal; font-display:swap; } @font-face{ font-family:'Inter'; src:url('../assets/fonts/Inter-400-500-latin.woff2') format('woff2'); font-weight:400 500; font-style:normal; font-display:swap; } *,*::before,*::after { box-sizing: border-box; } body,h1,h2,h3,p,figure,ul,ol { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--barre); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: 2px; } /* Les jetons vivent sur `:root`, et PAS sur un conteneur de page : le compilateur ne reprend que les SECTIONS, un conteneur de page n'existe pas dans le thème, et les patterns sortiraient sans aucune couleur. */ :root{ --bg:#1A1614; --bg-alt:#221d1a; --fg:#FAFAFA; --fg-soft:rgba(250,250,250,0.86); --wm:#FAFAFA; --eyebrow:#F4C2D7; --slogan:#F4C2D7; --chip-accent:#F4C2D7; --link-cur:#F4C2D7; --card-bg:rgba(255,255,255,0.05); --hairline:rgba(255,255,255,0.14); --sec-border:#FAFAFA; --sec-color:#FAFAFA; --rose:#E91E63; --rose-cta:#c4174f; --or:#C9A24B; --chip-bg:#26201d; /* LA CARTE DE LA SOIRÉE RESTE SOMBRE DANS LES DEUX THÈMES — c'est une pièce d'affiche, pas une surface de page, et elle doit tenir le même contraste jour et nuit. Ses valeurs sont donc des JETONS DE MARQUE déclarés ici, et non des couleurs écrites dans une règle : le rail `design-tokens` refuse une couleur en dur, et il a raison — « la faute n'était pas d'avoir pris la mauvaise couleur, c'était d'avoir pu en écrire une ». */ --carte-bg:#291721; --carte-voile-1:rgba(18,14,12,0.94); --carte-voile-2:rgba(40,16,28,0.9); --carte-fg:#FAFAFA; --carte-fg-soft:rgba(250,250,250,0.82); --carte-hairline:rgba(255,255,255,0.16); --carte-accent:#F4C2D7; --sur-rose:#FFFFFF; --page:1180px; /* La hauteur de la barre collante : une ancre doit s'arrêter SOUS elle, et c'est la seule mesure que deux propriétés doivent partager. */ --barre:5.5rem; } :root[data-theme="light"]{ --bg:#F5EFE6; --bg-alt:#ECE3D0; --fg:#2B2622; --fg-soft:rgba(43,38,34,0.86); --wm:#2B2622; --eyebrow:#b3123f; --slogan:#b3123f; --chip-accent:#b3123f; --link-cur:#b3123f; --card-bg:#FFFFFF; --hairline:rgba(43,38,34,0.16); --sec-border:#2B2622; --sec-color:#2B2622; --or:#7c5f14; --chip-bg:#FFFFFF; } body{ font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased; } body, body *{ transition: background-color .4s ease, color .4s ease, border-color .4s ease; } /* ═══ NAVIGATION ET PIED — dessinés à la main des deux côtés ═══ Ici, et dans `parts/header.html` / `parts/footer.html` du thème, en bloc `wp:html` pour que le balisage soit identique. */ /* LA BARRE COLLE EN HAUT, ET IL FAUT DEUX CIBLES POUR UNE SEULE FEUILLE. Dans le prototype, `.vlc-nav` est enfant du `body` : y poser `sticky` suffit. Dans le thème, WordPress enveloppe la part d'en-tête dans `
` — un `sticky` calé sur ce parent-là sort du cadre AVEC lui, puisque le parent a exactement la hauteur de la barre. C'est donc au parent de coller. Mesuré le 29.10.2026 : la règle ci-dessous seule laissait la barre défiler. */ .vlc-nav, .wp-site-blocks > header{position:sticky;top:0;z-index:100;} .vlc-nav{background:var(--bg);border-bottom:1px solid var(--hairline);} .vlc-nav-in{position:relative;max-width:var(--page);margin:0 auto;padding:0.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;} .nav-toggle{display:none;background:none;border:none;color:var(--fg);font-size:1.55rem;line-height:1;padding:0.15rem 0.4rem;} .vlc-brand{font-family:'Allura',cursive;font-size:1.95rem;line-height:1;display:inline-flex;align-items:center;gap:0.5rem;} .vlc-brand .creme{color:var(--wm);} .vlc-brand .rosew{color:var(--rose);border-bottom:2px solid var(--rose);padding-bottom:1px;} .vlc-nav-right{display:flex;align-items:center;gap:1.1rem;} .vlc-links{display:flex;gap:1.2rem;align-items:center;} .vlc-links a{font-size:0.875rem;font-weight:500;color:var(--fg-soft);} .vlc-links a:hover{color:var(--fg);} .theme-btn{width:42px;height:42px;border-radius:999px;border:1px solid var(--hairline);background:var(--card-bg);color:var(--fg);display:inline-flex;align-items:center;justify-content:center;transition:background .4s ease,color .4s ease,border-color .25s ease,transform .3s ease;} .theme-btn:hover{border-color:var(--rose);transform:rotate(-18deg);} .theme-btn svg{width:20px;height:20px;display:block;} .theme-btn .icon-sun{display:none;} :root[data-theme="light"] .theme-btn .icon-sun{display:block;} :root[data-theme="light"] .theme-btn .icon-moon{display:none;} .nav-cta{padding:0.65rem 1.25rem;font-size:0.72rem;} .vlc-foot{background:var(--bg);padding:3rem 1.5rem 2rem;border-top:1px solid var(--hairline);} .foot-in{max-width:var(--page);margin:0 auto;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-end;} .foot-word{font-family:'Allura',cursive;font-size:2.6rem;line-height:1;} .foot-word .creme{color:var(--wm);} .foot-word .rosew{color:var(--rose);} .foot-slogan{font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;font-size:0.72rem;letter-spacing:0.08em;line-height:1.7;margin:0.75rem 0 0;color:var(--fg-soft);} .foot-slogan .s{color:var(--slogan);} .foot-sig{text-align:right;} .sig-name{font-family:'Allura',cursive;font-size:1.5rem;color:var(--or);} .sig-role{font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:0.12em;font-size:0.66rem;color:var(--fg-soft);display:block;} .foot-heart{color:var(--rose);font-size:1.5rem;line-height:1;display:inline-block;} .foot-bottom{max-width:var(--page);margin:2rem auto 0;padding-top:1.25rem;border-top:1px solid var(--hairline);font-size:0.75rem;color:var(--fg-soft);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;} .foot-bottom a:hover{color:var(--fg);} /* ═══ BOUTONS ═══ Un champ `data-sb-type="link"` sort du compilateur en BLOC BOUTON : `div.wp-block-buttons.sb-c-X > div.wp-block-button > a.wp-block-button__link`. LE PROTOTYPE PORTE LA MÊME STRUCTURE, à dessein : un seul sélecteur, et deux rendus identiques. C'est le conteneur qui est le champ, et le lien qui est dedans. */ .btn, [class*="sb-c-cta"] .wp-block-button__link, .sb-c-billetterie-lien .wp-block-button__link, .sb-c-blog-lien .wp-block-button__link{ font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.82rem;text-transform:uppercase; letter-spacing:0.12em;padding:0.95rem 1.8rem;border-radius:6px;cursor:pointer; border:2px solid transparent;display:inline-block;text-align:center; transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s ease; } .btn-primary, .sb-c-cta-1 .wp-block-button__link, .sb-c-cta .wp-block-button__link, .sb-c-billetterie-lien .wp-block-button__link{ background:var(--rose-cta);color:var(--sur-rose); } .btn-secondary, .sb-c-cta-2 .wp-block-button__link, .sb-c-cta-mail .wp-block-button__link, .sb-c-blog-lien .wp-block-button__link{ background:transparent;color:var(--sec-color);border-color:var(--sec-border); } .btn-primary:hover, .sb-c-cta-1 .wp-block-button__link:hover{ transform:translateY(-1px); } .btn-secondary:hover, .sb-c-cta-2 .wp-block-button__link:hover, .sb-c-cta-mail .wp-block-button__link:hover, .sb-c-blog-lien .wp-block-button__link:hover{ background:var(--sec-color);color:var(--bg); } /* ═══ LA SECTION COMPILÉE ═══ Toute section porte `sb-s-`. Le fond est sur `body` : une section ne peint pas son propre fond, puisqu'elle est centrée et non pleine largeur. */ [class*="sb-s-accueil-"], [class*="sb-s-legal-"]{ position:relative; max-width:var(--page); margin:0 auto; padding:4.25rem 1.5rem; } /* LE LAYOUT « CONTRAINT » DE WORDPRESS, NEUTRALISÉ EN ENTIER. Il pose sur chaque enfant d'un groupe `max-width:contentSize` ET `margin-left:auto; margin-right:auto`. Ne neutraliser que la largeur laissait les marges : tout le site servi sortait CENTRÉ, et les cartes se disloquaient — chaque cellule, centrée dans sa cellule de grille, cessait de toucher ses voisines. Mesuré le 28.10.2026 en comparant la capture du prototype et celle du WordPress local. La mise en page est ici, pas dans theme.json. */ [class*="sb-s-accueil-"] > *, [class*="sb-s-legal-"] > *{ max-width:none;width:100%;margin-block-start:0;margin-block-end:0; } /* Le filet qui sépare deux sections — il remplace les vagues SVG, qui vivaient ENTRE les sections, donc hors des patterns, donc n'existaient pas dans le thème. Dessiné en CSS, il existe des deux côtés. */ [class*="sb-s-accueil-"]::before{ content:'';position:absolute;left:1.5rem;right:1.5rem;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--rose),var(--or),transparent); opacity:0.5; } .sb-s-accueil-hero::before{ display:none; } /* ---- Typographie commune des champs ---- */ h2.sb-c-titre{font-family:'Montserrat',sans-serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.18;margin:0.6rem 0 0.9rem;color:var(--fg);} .sb-c-chapo{font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.6;color:var(--fg-soft);} /* ═══ HÉROS ═══ Grille de douze colonnes, placement explicite. */ .sb-s-accueil-hero{ display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:1rem;row-gap:0;align-items:start; padding-top:4.5rem;padding-bottom:4.5rem; } .sb-s-accueil-hero > .sb-c-titre{grid-column:1 / -1;grid-row:1;} .sb-s-accueil-hero > .sb-c-slogan{grid-column:1 / span 7;grid-row:2;} .sb-s-accueil-hero > .sb-c-slogan-appui{grid-column:1 / span 7;grid-row:3;} .sb-s-accueil-hero > .sb-c-chapo{grid-column:1 / span 7;grid-row:4;} .sb-s-accueil-hero > .sb-c-cta-1{grid-column:1 / span 4;grid-row:5;justify-self:start;} .sb-s-accueil-hero > .sb-c-cta-2{grid-column:5 / span 6;grid-row:5;justify-self:start;} h1.sb-c-titre{ font-family:'Allura',cursive;font-weight:400;line-height:1; font-size:clamp(3.4rem,8vw,6.2rem);color:var(--wm); margin:0.5rem 0 0;position:relative;display:block; } /* Le souligné au pinceau. Le lockup d'origine portait « célibat » en rose dans un `` ; le compilateur ne transporte pas l'imbrication, donc le wordmark est d'un seul ton et le pinceau vient du CSS. Arbitrage du 28.10.2026 : un `

` ÉDITABLE et présent sur le site servi vaut mieux qu'un lockup à deux tons qui disparaît à la compilation. */ h1.sb-c-titre::after{ content:'';position:absolute;left:0;bottom:0.1em;width:min(42%,320px);height:0.055em; background:var(--rose);border-radius:0.1em;transform:rotate(-1deg); } .sb-c-slogan{font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;line-height:1.45;font-size:clamp(1rem,1.5vw,1.3rem);color:var(--fg);margin-top:1.6rem;} .sb-c-slogan-appui{font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;font-size:clamp(0.9rem,1.2vw,1.05rem);color:var(--slogan);} .sb-s-accueil-hero > .sb-c-chapo{grid-column:1 / span 6;margin-top:1.3rem;} .sb-s-accueil-hero > .sb-c-cta-1, .sb-s-accueil-hero > .sb-c-cta-2{margin-top:1.9rem;} .sb-s-accueil-hero > [class*="sb-c-fait-"]{ grid-row:6;margin-top:2.6rem; font-family:'Montserrat',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.04em; text-transform:uppercase;color:var(--fg-soft); border-top:1px solid var(--hairline);padding:0.85rem 0 0; } .sb-s-accueil-hero > .sb-c-fait-1{grid-column:1 / span 3;} .sb-s-accueil-hero > .sb-c-fait-2{grid-column:4 / span 3;} .sb-s-accueil-hero > .sb-c-fait-3{grid-column:7 / span 3;} .sb-s-accueil-hero > .sb-c-fait-4{grid-column:10 / span 3;color:var(--chip-accent);border-top-color:var(--rose);} /* ═══ TROIS CARTES ═══ (vous repartez avec · pour qui) Neuf champs à plat forment trois colonnes. Chaque carte est composée de trois cellules empilées qui partagent le même fond : ensemble elles se lisent comme un seul bloc. C'est la réponse à une structure qui n'a plus de conteneur par carte. */ .sb-s-accueil-reparts{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:1.1rem;row-gap:0;align-items:stretch; } .sb-s-accueil-pourqui{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:2.4rem;row-gap:0;align-items:start; } .sb-s-accueil-reparts > .sb-c-titre, .sb-s-accueil-pourqui > .sb-c-titre{ grid-column:1 / -1; } .sb-s-accueil-reparts > .sb-c-titre, .sb-s-accueil-pourqui > .sb-c-titre{ margin-bottom:1.9rem; } .sb-s-accueil-reparts > .sb-c-titre, .sb-s-accueil-pourqui > .sb-c-titre{ grid-column:1 / span 2; } [class*="sb-c-gain-"]{ background:var(--card-bg);border-left:1px solid var(--hairline);border-right:1px solid var(--hairline);padding:0 1.4rem; } [class*="sb-c-profil-"]{ padding:0; } /* UNE CARTE PORTE UN TITRE ET UN PARAGRAPHE. Arbitrage de l'Owner du 29.10.2026 : l'étiquette en capitales au-dessus du titre disparaît, et c'est elle qui devient le titre. Le bord qui ouvrait la carte passe donc au titre — sans quoi la carte s'ouvrirait sur rien. */ [class*="-titre"][class*="sb-c-gain-"]{ border-top:1px solid var(--hairline);border-radius:12px 12px 0 0;padding-top:1.5rem; } [class*="-titre"][class*="sb-c-gain-"], [class*="-titre"][class*="sb-c-profil-"]{ font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.12rem;color:var(--fg); padding-bottom:0.5rem; } [class*="-texte"][class*="sb-c-gain-"]{ border-bottom:1px solid var(--hairline);border-radius:0 0 12px 12px;padding-bottom:1.5rem; font-size:0.92rem;line-height:1.55;color:var(--fg-soft); } .sb-c-gain-1-titre, .sb-c-profil-1-titre{grid-column:1;grid-row:2;} .sb-c-gain-1-texte, .sb-c-profil-1-texte{grid-column:1;grid-row:3;} .sb-c-gain-2-titre, .sb-c-profil-2-titre{grid-column:2;grid-row:2;} .sb-c-gain-2-texte, .sb-c-profil-2-texte{grid-column:2;grid-row:3;} .sb-c-gain-3-titre, .sb-c-profil-3-titre{grid-column:3;grid-row:2;} .sb-c-gain-3-texte, .sb-c-profil-3-texte{grid-column:3;grid-row:3;} /* « Pour qui » : des colonnes NUES, un filet d'accent en tête. Trois régimes de carte à la suite donnaient une page en damier — l'Owner l'a dit le 28.10.2026 : « trop de blocs ». Les boîtes ne restent que là où elles portent quelque chose : les trois gains, et la carte de la soirée. */ [class*="-titre"][class*="sb-c-profil-"]{ border-top:2px solid var(--rose);padding-top:1rem; } [class*="-texte"][class*="sb-c-profil-"]{font-size:0.95rem;line-height:1.6;color:var(--fg-soft);padding-bottom:0;} /* ═══ LE CADRE ═══ quatre phrases, et le contraste tient dans l'incise. La section opposait deux colonnes, « C'est » contre « Ce n'est pas ». La charte verbale du 07.06.2026 l'interdit — « affirmation avant négation » — et l'Owner l'a tranché le 29.10.2026. La discrimination reste, elle a changé de forme : `X — plutôt que Y`, qui est la figure de signature de la marque. */ .sb-s-accueil-cadre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem;row-gap:0;} .sb-s-accueil-cadre > .sb-c-titre, .sb-s-accueil-cadre > .sb-c-chapo{grid-column:1 / -1;} .sb-s-accueil-cadre > .sb-c-titre{grid-column:1;} .sb-s-accueil-cadre > .sb-c-chapo{margin-bottom:2.2rem;} [class*="sb-c-cadre-"]{ border-top:1px solid var(--hairline);padding:1.1rem 0 1.3rem; font-size:1rem;line-height:1.55;color:var(--fg-soft); } .sb-c-cadre-1{grid-column:1;grid-row:3;} .sb-c-cadre-2{grid-column:2;grid-row:3;} .sb-c-cadre-3{grid-column:1;grid-row:4;} .sb-c-cadre-4{grid-column:2;grid-row:4;} /* ═══ BANDE PHOTO ═══ La respiration de la page. Trois images côte à côte, rien d'autre. UN CHAMP `image` SORT DU COMPILATEUR SANS FICHIER — « le média vit dans la médiathèque, pas dans le thème », et le client choisit le sien à l'insertion. Le cadre serait donc vide sur le site servi. La feuille pose l'image de repli EN FOND : le cadre est juste des deux côtés, et dès qu'une vraie photo est téléversée elle se peint par-dessus. */ .sb-s-accueil-soirees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:0;} .sb-s-accueil-soirees > .sb-c-titre, .sb-s-accueil-soirees > .sb-c-legende{grid-column:1 / -1;} .sb-s-accueil-soirees > .sb-c-titre{grid-column:1 / span 2;margin-bottom:1.9rem;} [class*="sb-c-photo-"]{ grid-row:2;aspect-ratio:4/3;border-radius:12px;overflow:hidden; border:1px solid var(--hairline);background-color:var(--card-bg); background-position:center;background-size:cover;background-repeat:no-repeat; } img[class*="sb-c-photo-"]{width:100%;height:100%;object-fit:cover;} [class*="sb-c-photo-"] img{width:100%;height:100%;object-fit:cover;display:block;} [class*="sb-c-photo-"] img[src=""]{opacity:0;} .sb-c-photo-1{grid-column:1;background-image:url('../assets/photos/soiree-1.jpg');} .sb-c-photo-2{grid-column:2;background-image:url('../assets/photos/soiree-2.jpg');} .sb-c-photo-3{grid-column:3;background-image:url('../assets/photos/soiree-3.jpg');} .sb-c-legende{grid-row:3;margin-top:1.2rem;font-size:0.88rem;color:var(--fg-soft);} /* ═══ DÉROULEMENT ═══ heure | texte, trois lignes. */ .sb-s-accueil-deroulement{display:grid;grid-template-columns:110px minmax(0,780px);column-gap:1.5rem;row-gap:0;justify-content:start;} .sb-s-accueil-deroulement > .sb-c-titre, .sb-s-accueil-deroulement > .sb-c-chapo{grid-column:1 / -1;} .sb-s-accueil-deroulement > .sb-c-chapo{margin-bottom:1.6rem;} [class*="sb-c-etape-"]{padding:0.95rem 0;border-bottom:1px solid var(--hairline);} [class*="-heure"][class*="sb-c-etape-"]{grid-column:1;font-family:'Montserrat',sans-serif;font-weight:700;color:var(--slogan);font-size:0.95rem;} [class*="-texte"][class*="sb-c-etape-"]{grid-column:2;color:var(--fg-soft);} .sb-c-etape-1-heure,.sb-c-etape-1-texte{grid-row:3;} .sb-c-etape-2-heure,.sb-c-etape-2-texte{grid-row:4;} .sb-c-etape-3-heure,.sb-c-etape-3-texte{grid-row:5;border-bottom:none;} /* ═══ RÉSERVER ═══ le texte à gauche, la carte de la soirée à droite. */ /* `align-items:start` fendait la carte : les cellules ne remplissaient plus la hauteur de leur rangée, et le fond de page passait entre elles. La carte doit s'étirer ; c'est la colonne de TEXTE qui s'aligne en haut. */ .sb-s-accueil-reserver{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);column-gap:3rem;row-gap:0;align-items:stretch;} .sb-s-accueil-reserver > .sb-c-titre, .sb-s-accueil-reserver > .sb-c-chapo, .sb-s-accueil-reserver > .sb-c-billetterie-lien, .sb-s-accueil-reserver > .sb-c-reserve{align-self:start;} .sb-s-accueil-reserver > .sb-c-titre{grid-column:1;grid-row:1;} .sb-s-accueil-reserver > .sb-c-chapo{grid-column:1;grid-row:2;} .sb-s-accueil-reserver > .sb-c-billetterie-lien{grid-column:1;grid-row:3;justify-self:start;margin-top:1.7rem;} .sb-s-accueil-reserver > .sb-c-reserve{grid-column:1;grid-row:4;margin-top:0.9rem;font-size:0.85rem;color:var(--fg-soft);} /* La carte : sept champs empilés qui partagent un même fond sombre. */ [class*="sb-c-carte-"]{grid-column:2;background:linear-gradient(160deg,var(--carte-voile-1) 0%,var(--carte-voile-2) 100%),var(--carte-bg);color:var(--carte-fg);border-left:1px solid var(--carte-hairline);border-right:1px solid var(--carte-hairline);padding:0 2.1rem;} /* La carte s'ouvre sur sa date. L'étiquette en capitales qui la coiffait est partie avec les autres — arbitrage de l'Owner du 29.10.2026 — et le bord qui ouvrait la carte est passé au champ suivant. */ .sb-c-carte-date{grid-row:1;border-top:1px solid var(--carte-hairline);border-radius:18px 18px 0 0;padding-top:2rem;font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.04;padding-top:0.7rem;} .sb-c-carte-horaire{grid-row:2;font-family:'Montserrat',sans-serif;font-weight:600;letter-spacing:0.05em;font-size:0.88rem;color:var(--carte-accent);padding-top:0.8rem;} .sb-c-carte-lieu{grid-row:3;font-size:0.9rem;color:var(--carte-fg-soft);padding-top:0.35rem;} .sb-c-carte-jauge{grid-row:4;padding-top:1.4rem;font-family:'Montserrat',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--carte-accent);} .sb-c-carte-format{grid-row:5;font-family:'Montserrat',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--carte-fg-soft);padding-top:0.3rem;} .sb-c-carte-prix{grid-row:6;border-bottom:1px solid var(--carte-hairline);border-radius:0 0 18px 18px;padding-top:1.1rem;padding-bottom:2rem;font-family:'Montserrat',sans-serif;font-weight:900;font-size:2rem;color:var(--carte-fg);} /* ═══ LINA ═══ le portrait tient toute la colonne de gauche. */ .sb-s-accueil-lina{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);column-gap:2.8rem;row-gap:0;align-items:start;} .sb-s-accueil-lina > *{grid-column:2;} .sb-c-portrait{ grid-column:1;grid-row:1 / span 5;align-self:start; aspect-ratio:4/5;border-radius:16px;overflow:hidden; border:1px solid var(--hairline);background-color:var(--card-bg); background-image:url('../assets/photos/portrait-biz.jpg'); background-position:center;background-size:cover;background-repeat:no-repeat; } img.sb-c-portrait{width:100%;height:100%;object-fit:cover;} .sb-c-portrait img{width:100%;height:100%;object-fit:cover;display:block;} .sb-c-portrait img[src=""]{opacity:0;} .sb-c-citation{font-family:'Allura',cursive;color:var(--or);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.2;margin:0.4rem 0 1.4rem;} .sb-c-texte-1,.sb-c-texte-2{color:var(--fg-soft);margin-bottom:1rem;} /* ═══ LE BLOG ═══ trois textes sur l'accueil, la liste sur sa page. DEUX FAMILLES DE CLASSES, ET CE N'EST PAS UNE INCOHÉRENCE. La section est compilée depuis le prototype : elle porte donc `sb-s-` et `sb-c-`, comme les neuf autres. Les cartes, elles, ne viennent pas du prototype — c'est `functions.php` qui les rend à chaque chargement, parce que les trois derniers textes changent sans qu'on touche au code. Elles portent donc des classes de marque, `vlc-`, comme la barre et le pied, qui sont eux aussi dessinés à la main des deux côtés. LES CARTES SONT DU CONTENU DE PHRASE. Le champ est un paragraphe, et un `div` dans un `p` ferme le paragraphe : la grille ci-dessous est donc posée sur des `span`, qui ne ferment rien. */ .sb-s-accueil-blog{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0;} .sb-s-accueil-blog > .sb-c-titre{margin-bottom:0.3rem;} .sb-s-accueil-blog > .sb-c-chapo{margin-bottom:2.1rem;} .sb-s-accueil-blog > .sb-c-blog-lien{justify-self:start;margin-top:1.9rem;} .vlc-une{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.4rem;row-gap:1.9rem;} .vlc-une__art{display:grid;row-gap:0.5rem;align-content:start;border-top:2px solid var(--rose);padding-top:1rem;} .vlc-une__date{font-family:'Montserrat',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-soft);} .vlc-une__titre{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.12rem;line-height:1.25;color:var(--fg);} .vlc-une__art:hover .vlc-une__titre{color:var(--link-cur);} .vlc-une__chapo{font-size:0.95rem;line-height:1.6;color:var(--fg-soft);} /* ---- LA PAGE DU BLOG ET LA PAGE D'UN ARTICLE ---- Elles ne viennent pas du prototype : leur corps est une BOUCLE, et une boucle ne se dessine pas en HTML statique. Elles vivent donc dans `templates/index.html` et `templates/single.html`, et c'est ici qu'elles s'habillent — dans la même feuille, pour qu'il n'y en ait qu'une. */ .vlc-blog,.vlc-article{max-width:var(--page);margin:0 auto;padding:4.25rem 1.5rem;} .vlc-blog > *,.vlc-article > *{max-width:none;width:100%;} .vlc-blog h1,.vlc-article h1{font-family:'Montserrat',sans-serif;font-weight:700;font-size:clamp(1.9rem,4.2vw,2.7rem);line-height:1.14;color:var(--fg);margin:0 0 0.9rem;} .vlc-blog__chapo{font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.6;color:var(--fg-soft);margin-bottom:2.6rem;} .vlc-blog__liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.4rem;row-gap:2.4rem;} .vlc-blog__liste > li{display:grid;row-gap:0.5rem;align-content:start;border-top:2px solid var(--rose);padding-top:1rem;} .vlc-blog__liste .wp-block-post-date{font-family:'Montserrat',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-soft);} .vlc-blog__liste .wp-block-post-title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.12rem;line-height:1.25;color:var(--fg);margin:0;} .vlc-blog__liste .wp-block-post-title a:hover{color:var(--link-cur);} .vlc-blog__liste .wp-block-post-excerpt{margin:0;} .vlc-blog__liste .wp-block-post-excerpt__excerpt{font-size:0.95rem;line-height:1.6;color:var(--fg-soft);} .vlc-blog .wp-block-query-pagination{margin-top:2.8rem;display:flex;gap:1rem;font-size:0.85rem;color:var(--fg-soft);} .vlc-article{max-width:820px;} .vlc-article .wp-block-post-date{font-family:'Montserrat',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:0.6rem;} .vlc-article h2{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.3rem;line-height:1.25;color:var(--fg);margin:2rem 0 0.7rem;} .vlc-article p{color:var(--fg-soft);margin-bottom:1.1rem;} .vlc-article__retour{margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--hairline);} .vlc-article__retour a{color:var(--slogan);} /* ═══ QUESTIONS ═══ */ .sb-s-accueil-faq{display:grid;grid-template-columns:minmax(0,860px);row-gap:0;justify-content:start;} .sb-s-accueil-faq > .sb-c-titre{margin-bottom:1.2rem;} [class*="sb-c-q-"]{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.05rem;color:var(--fg);margin-top:1.3rem;padding-left:1.15rem;position:relative;} [class*="sb-c-q-"]::before{content:'';position:absolute;left:0;top:0.55em;width:0.5rem;height:0.5rem;border-radius:999px;background:var(--rose);} [class*="sb-c-r-"]{color:var(--fg-soft);padding:0.35rem 0 1.25rem 1.15rem;border-bottom:1px solid var(--hairline);} /* ═══ APPEL FINAL ═══ */ .sb-s-accueil-cta{display:flex;flex-wrap:wrap;column-gap:0.85rem;row-gap:0;justify-content:center;text-align:center;} .sb-s-accueil-cta > *{flex:0 0 100%;} .sb-s-accueil-cta > .sb-c-titre{margin-left:auto;margin-right:auto;} .sb-s-accueil-cta > .sb-c-cta, .sb-s-accueil-cta > .sb-c-cta-mail{flex:0 0 auto;margin-top:1.7rem;} .sb-c-delai{margin-top:1.1rem;font-size:0.85rem;color:var(--fg-soft);} /* ═══ PAGES LÉGALES ═══ Le corps est un champ `html` : le compilateur en fait UN paragraphe, à remplacer dans l'éditeur. La prose structurée ne se transporte pas par un champ annoté — c'est écrit dans `compiler.mjs`, et noté au retex. Ces pages n'ont de toute façon aucune valeur juridique avant relecture. */ [class*="sb-s-legal-"]{max-width:820px;} [class*="sb-s-legal-"] h1.sb-c-titre{font-family:'Montserrat',sans-serif;font-size:clamp(1.9rem,4.2vw,2.7rem);line-height:1.14;color:var(--fg);margin:0.7rem 0 1rem;} [class*="sb-s-legal-"] h1.sb-c-titre::after{display:none;} .sb-c-corps{color:var(--fg-soft);} .sb-c-corps a{color:var(--slogan);border-bottom:1px solid var(--hairline);} @media (max-width:860px){ .sb-s-accueil-reparts,.sb-s-accueil-pourqui,.sb-s-accueil-cadre, .sb-s-accueil-reserver{grid-template-columns:minmax(0,1fr);} [class*="sb-c-gain-"],[class*="sb-c-profil-"], [class*="sb-c-cadre-"],[class*="sb-c-carte-"]{grid-column:1;grid-row:auto;} .sb-s-accueil-reserver > *{grid-column:1;grid-row:auto;} [class*="sb-c-carte-"]{margin-top:0;} .sb-c-carte-date{margin-top:2.2rem;} .sb-s-accueil-soirees{grid-template-columns:minmax(0,1fr);} [class*="sb-c-photo-"]{grid-column:1;grid-row:auto;margin-bottom:1rem;} .sb-s-accueil-lina{grid-template-columns:minmax(0,1fr);} .sb-s-accueil-lina > *{grid-column:1;} .sb-c-portrait{grid-column:1;grid-row:auto;max-width:320px;margin-bottom:1.6rem;} .sb-s-accueil-deroulement{grid-template-columns:80px minmax(0,1fr);} [class*="sb-c-etape-"]{grid-row:auto;} .vlc-une,.vlc-blog__liste{grid-template-columns:minmax(0,1fr);} } @media (max-width:760px){ .nav-toggle{display:block;} .vlc-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;padding:1.25rem 1.5rem;gap:1.1rem;align-items:flex-start;border-bottom:1px solid var(--hairline);box-shadow:0 20px 40px rgba(0,0,0,0.3);} .vlc-links.open{display:flex;} .foot-in{flex-direction:column;align-items:flex-start;} .foot-sig{text-align:left;} .sb-s-accueil-hero > [class*="sb-c-fait-"]{flex:1 1 140px;} } /* =========================================================== L'ÉCHAPPATOIRE AU MOUVEMENT — en dernier, et c'est voulu. À spécificité égale, l'ordre source tranche : ce bloc doit venir APRÈS tous les survols qu'il annule. =========================================================== */ /* LA BARRE NE DOIT PAS ÉLARGIR LA PAGE SUR UN TÉLÉPHONE ÉTROIT. Mesuré le 30.10.2026, sur le site EN SERVICE autant qu'en local : à 390 px de large, le document s'étendait à 429 px et la page se scrollait horizontalement. Les coupables : `.vlc-nav-right` et le bouton « Réserver », qui gardaient leurs mesures de bureau alors que la marque et le bouton de menu occupent déjà la moitié de la barre. Un débordement horizontal ne se voit pas en réduisant la fenêtre d'un poste de travail : il se mesure. Les liens, eux, sont déjà dans le menu déroulant sous 760 px — ce n'est donc pas le lien du blog qui a créé le défaut. */ @media (max-width:430px){ .vlc-nav-in{padding-left:1rem;padding-right:1rem;gap:0.6rem;} .vlc-brand{font-size:1.6rem;} .vlc-nav-right{gap:0.6rem;} .theme-btn{width:36px;height:36px;} .theme-btn svg{width:17px;height:17px;} .nav-cta{padding:0.72rem 0.85rem;font-size:0.68rem;letter-spacing:0.08em;} } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } body, body *{ transition:none; animation:none; } .theme-btn, .theme-btn:hover{ transform:none; } .btn, .btn:hover, [class*="sb-c-cta"] .wp-block-button__link:hover{ transform:none; } }