/*
Theme Name: Oh My Art
Theme URI: https://ohmyart.paris
Author: Studio Saint Germain
Description: Thème bloc sur mesure pour Oh My Art — expériences d'art privées à Paris. Port fidèle des maquettes de référence. Sans dépendance, polices auto-hébergées.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ohmyart
Tags: block-theme, full-site-editing, one-page
*/
/* =======================================================================
1. TOKENS
Les valeurs vivent dans theme.json (palette + custom). On ré-expose ici
les noms courts de la maquette pour que le CSS porté reste 1:1.
======================================================================= */
:root{
--bg: var(--wp--preset--color--bg);
--bg-deep: var(--wp--preset--color--bg-deep);
--surface: var(--wp--preset--color--surface);
--fg: var(--wp--preset--color--fg);
--body: var(--wp--preset--color--body);
--muted: var(--wp--preset--color--muted);
--faint: var(--wp--preset--color--faint);
--hair: var(--wp--preset--color--hair);
--hair-soft: var(--wp--preset--color--hair-soft);
--accent: var(--wp--preset--color--accent);
--accent-lo: var(--wp--preset--color--accent-lo);
--ink: var(--wp--preset--color--ink);
--ink-2: var(--wp--preset--color--ink-2);
--ink-fg: var(--wp--preset--color--ink-fg);
--ink-muted: var(--wp--preset--color--ink-muted);
--ink-hair: var(--wp--preset--color--ink-hair);
--gold-ink: var(--wp--preset--color--gold-ink);
/* Échec d'envoi de formulaire. Hors palette de theme.json à dessein : ce
n'est pas une couleur que la cliente doit pouvoir appliquer à un bloc.
Deux valeurs parce que le formulaire hôtels est sur fond encre. */
--warn: oklch(.52 .14 32);
--warn-ink: oklch(.78 .10 32);
/* Instrument Serif est sortie du thème (octobre 2026) : Bodoni Moda porte
tout le romain. Le nom court reste, pour que les règles qui l’appellent
n’aient rien à savoir de ce changement. */
--serif: var(--wp--preset--font-family--display);
--sans: var(--wp--preset--font-family--sans);
/* Titrage. Une didone à graisse variable (400-700) : une seule ligne à
repointer pour essayer autre chose sans toucher aux 25 règles.
C'est aussi ce que porte --serif depuis qu'Instrument Serif est sortie. */
--display: var(--wp--preset--font-family--display);
--pad: var(--wp--custom--pad);
--wrap: var(--wp--custom--wrap);
--s-xl: var(--wp--preset--spacing--xl);
--s-lg: var(--wp--preset--spacing--lg);
--s-md: var(--wp--preset--spacing--md);
--s-sm: var(--wp--preset--spacing--sm);
--ease: var(--wp--custom--ease);
/* flèche des boutons, en masque pour rester recolorable */
--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}
/* =======================================================================
2. RESET + BASE
======================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;
scroll-padding-top:calc(76px + var(--oma-adminbar, 0px))}
body{
margin:0; background:var(--bg); color:var(--body);
font-family:var(--sans); font-size:17px; line-height:1.68;
font-weight:400; -webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
/* Les titres portent l’encre pleine. Toute boîte marquée `.on-ink` pose sa
propre couleur de texte : ses titres la suivent au lieu de virer au noir.
Une classe plutôt qu'une liste de sections — la prochaine boîte sombre n'a
rien à ajouter ici. */
h1,h2,h3,h4{color:var(--fg)}
.on-ink :is(h1,h2,h3,h4){color:inherit}
ul,ol{padding:0; list-style:none}
button,input,textarea,select{font:inherit; color:inherit}
/* Le surlignage de sélection n'habille que l'accueil : ailleurs — page du
tour, billets du journal — le réglage du navigateur est plus prévisible,
et c'est ce qu'on attend d'un texte qu'on copie.
Fond ET couleur, et un bleu plein : le fond translucide à 30 % se voyait à
peine derrière le serif des témoignages, qui est presque noir. */
.home::selection{background:var(--accent); color:var(--ink-fg)}
.home ::selection{background:var(--accent); color:var(--ink-fg)}
/* le rayon de bordure est à 0 partout, par brief. Ne pas ajouter. */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.wrap-tight{max-width:var(--wp--custom--wrap-tight); margin-inline:auto; padding-inline:var(--pad)}
/* WordPress pose ses propres marges de bloc : on neutralise dans nos grilles */
.wrap > *, .wrap-tight > *{margin-block:0}
.oma-section{margin-block:0 !important}
/* =======================================================================
3. PRIMITIVES TYPO
======================================================================= */
.eyebrow{
font-size:11px; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
color:var(--accent); display:flex; align-items:center; gap:14px;
font-family:var(--sans);
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent); flex:none}
.eyebrow.is-center{justify-content:center}
.eyebrow.is-center::after{content:""; width:26px; height:1px; background:var(--accent); flex:none}
/* La maquette mobile raccourcit certaines accroches. Le mot est deux fois
dans le markup, mais rien ne bouge au redimensionnement et rien ne
dépend du JS. */
.on-narrow{display:none}
@media (max-width:640px){
.on-wide{display:none}
.on-narrow{display:inline}
}
/* Justification, demandée par la cliente pour le texte courant. Le réglage
tient dans deux jetons, pas dans une liste de sélecteurs recopiée : la
bascule de 768px n'a qu'un endroit à changer d'avis.
Sous 768px on revient au fer à gauche — une colonne étroite justifiée
ouvre des lézardes que la césure seule ne referme pas. */
:root{--oma-align:justify; --oma-hyphens:auto}
@media (max-width:768px){:root{--oma-align:left; --oma-hyphens:manual}}
/* Le texte courant, et lui seul. Les surtitres, libellés, prix, chiffres
d'étape et citations au corps d'affichage restent au fer à gauche :
justifier trois mots les écartèle. `.final .lede` garde son centrage,
sa spécificité passe devant. */
.is-justified,
.manifesto-p,
.prose,
.lede,
.xp-desc,
.step p,
.gz p,
.testi-rest,
.stop-body > p:not(.stop-label),
.block-note,
.faq .a,
.faq details > p:not(:first-child),
.hotels p:not(.eyebrow, .meta){text-align:var(--oma-align); hyphens:var(--oma-hyphens)}
.meta{
font-family:var(--sans);
font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
color:var(--faint); font-variant-numeric:tabular-nums;
}
/* 57px à 1440, 31px à 390 : les deux valeurs de la maquette. Pas de
`text-wrap:balance` — la maquette coupe au plus long, et une ligne courte
en fin de titre fait partie du dessin. */
.h-sec{
font-family:var(--display); font-weight:400;
font-size:clamp(31px, 4vw, 57px); line-height:1.08; letter-spacing:-.028em;
}
.h-sub{
font-family:var(--display); font-weight:400;
font-size:clamp(20px,2.1vw,27px); line-height:1.16; letter-spacing:-.018em;
}
.lede{
font-size:clamp(18px,1.35vw,20px); line-height:1.62; color:var(--muted);
max-width:62ch; text-wrap:pretty;
}
.prose{max-width:64ch; color:var(--muted); text-wrap:pretty}
.prose + .prose{margin-top:1.15em}
.rule{height:1px; background:var(--hair); border:0; margin:0}
.gap-top{margin-top:24px}
/* =======================================================================
4. BOUTONS ET LIENS
Blocs core/button + classe .btn : le core garde le contenu éditable,
le CSS garde la maquette.
======================================================================= */
.wp-block-button.btn-wrap{margin:0}
.wp-block-buttons{gap:clamp(20px,3vw,40px)}
a.btn, .wp-block-button__link.btn, button.btn{
display:inline-flex; align-items:center; gap:12px;
padding:16px 30px; min-height:48px; border-radius:0;
font-family:var(--sans);
font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
line-height:1.2;
border:1px solid var(--fg); background:var(--fg); color:var(--bg);
cursor:pointer; text-decoration:none;
transition:background .45s var(--ease), color .45s var(--ease),
border-color .45s var(--ease);
}
a.btn:hover, .wp-block-button__link.btn:hover, button.btn:hover{
background:var(--accent); border-color:var(--accent); color:var(--bg);
}
.btn::after{
content:""; width:14px; height:8px; flex:none; background:currentColor;
-webkit-mask:var(--arrow) no-repeat center/contain;
mask:var(--arrow) no-repeat center/contain;
transition:transform .45s var(--ease);
}
.btn:hover::after{transform:translateX(5px)}
.btn.no-arrow::after{display:none}
/* Sur fond d’encre le bouton plein s’inverse : clair sur sombre. La règle
suit la classe `.on-ink`, comme la couleur des titres. */
.on-ink .btn, .on-ink .wp-block-button__link.btn{
background:var(--ink-fg); border-color:var(--ink-fg); color:var(--ink);
}
.on-ink .btn:hover, .on-ink .wp-block-button__link.btn:hover{
background:var(--gold-ink); border-color:var(--gold-ink); color:var(--ink);
}
.btn-ghost, .wp-block-button__link.btn-ghost{background:transparent; color:var(--fg); border-color:var(--fg)}
.btn-ghost:hover, .wp-block-button__link.btn-ghost:hover{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn-block, .wp-block-button.is-block, .wp-block-button.is-block .wp-block-button__link{width:100%}
.btn-block{justify-content:space-between}
/* lien texte avec soulignement bronze qui se trace au survol */
.tlink{
display:inline-block; position:relative; color:var(--fg);
font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
padding-bottom:5px;
}
.tlink::after{
content:""; position:absolute; inset-inline-start:0; bottom:0;
width:100%; height:1px; background:var(--accent);
transform:scaleX(0); transform-origin:inline-start;
transition:transform .5s var(--ease);
}
.tlink:hover::after{transform:scaleX(1)}
.tlink.has-arrow{display:inline-flex; align-items:center; gap:10px}
.tlink.has-arrow::before{
content:""; order:1; width:14px; height:8px; flex:none; background:currentColor;
-webkit-mask:var(--arrow) no-repeat center/contain;
mask:var(--arrow) no-repeat center/contain;
transition:transform .45s var(--ease);
}
.tlink.has-arrow:hover::before{transform:translateX(5px)}
/* Sur la photo du hero il n’y a pas de survol à attendre : le trait est posé. */
.hero .tlink{color:var(--ink-fg)}
.hero .tlink::after{background:var(--gold-ink); transform:scaleX(1)}
/* =======================================================================
5. PHOTOGRAPHIE — les sources gardent leurs couleurs (bleu nuit, oct. 2026)
======================================================================= */
.ph{
position:relative; overflow:hidden; margin:0;
background:linear-gradient(150deg, oklch(88% 0.012 95), oklch(78% 0.020 260));
}
.ph img{
width:100%; height:100%; object-fit:cover;
filter:contrast(1.03);
transition:transform 1.4s var(--ease), filter .8s var(--ease);
}
/* Le portrait de Caroline est un vrai noir et blanc. L'étalonnage ci-dessus
est fait pour des sources couleur : saturate() n'a rien à mordre et sepia
.11 le réchauffe à peine, si bien qu'un monochrome tombe plus froid que la
crème alentour et se lit comme collé. Monochrome chaud délibéré : assez
pour appartenir à la page, en deçà du brun qui en ferait une épreuve d'époque. */
.ph.is-bw img{filter:sepia(.22) contrast(1.05) brightness(1.02)}
.ph.wp-block-image, .ph .wp-block-image{margin:0}
/* =======================================================================
6. NAV
Deux variantes : transparente au-dessus du hero (accueil), opaque dès le
premier pixel ailleurs.
======================================================================= */
.nav{
position:sticky; inset-block-start:0; z-index:60;
height:72px; display:flex; align-items:center;
background:oklch(96.1% 0.005 95 / .94); backdrop-filter:blur(14px) saturate(1.2);
border-bottom:1px solid var(--hair);
transition:background .5s var(--ease), border-color .5s var(--ease),
color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.home .nav{
position:fixed; inset-inline:0;
background:transparent; backdrop-filter:none;
border-bottom-color:transparent; color:var(--ink-fg);
}
.home .nav.is-stuck{
background:oklch(96.1% 0.005 95 / .94); backdrop-filter:blur(14px) saturate(1.2);
border-bottom-color:var(--hair); color:var(--fg);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.nav{--logo-h:44px}
/* La marque est posée en masque, pas en ![]()
.
`background-color:currentColor` la fait suivre le basculement de couleur de
la nav — claire au-dessus du hero, sombre une fois collée — et la transition
de `color` l'emporte avec elle, gratuitement. Un ![]()
aurait demandé deux
fichiers, ou un filtre qui ne sait pas s'animer proprement.
Le rapport 506/575 est la boîte d'encre réelle du fichier, mesurée : le
`viewBox` a été recadré dessus pour que la hauteur demandée soit la hauteur
vue, sans marge fantôme. */
.brand{display:inline-flex; align-items:center; line-height:1}
.brand-mark{
display:block;
height:var(--logo-h); width:calc(var(--logo-h) * 506 / 575);
background-color:currentColor;
-webkit-mask:url(assets/images/logo.svg) no-repeat center/contain;
mask:url(assets/images/logo.svg) no-repeat center/contain;
-webkit-mask-mode:alpha; mask-mode:alpha;
transition:background-color .5s var(--ease);
}
/* Tout ce qui n'est pas la marque. Les liens, le panier et le bouton de menu
forment un seul groupe à droite : sans ce conteneur, `space-between` les
écarterait les uns des autres au lieu de les tenir ensemble. */
.nav-end{display:flex; align-items:center; gap:clamp(16px,2.2vw,30px)}
.nav-links{display:flex; align-items:center; gap:clamp(18px,2.6vw,40px); margin:0}
.nav-links a{
font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
position:relative; padding-block:6px; opacity:.86;
transition:opacity .35s var(--ease);
}
.nav-links a:hover{opacity:1}
.nav-links a::after{
content:""; position:absolute; inset-inline-start:0; bottom:0;
width:100%; height:1px; background:currentColor;
transform:scaleX(0); transform-origin:inline-start;
transition:transform .45s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
/* Le CTA vit hors de `.nav-links`, et c'est ce qui le garde visible quand le
tiroir est fermé : six entrées passent au burger sous 1200px, « Book » non.
Il porte donc sa propre typographie — celle des liens de la nav ne lui
descend plus dessus. */
.nav-cta{
font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
border:1px solid currentColor; padding:11px 20px; opacity:1;
transition:background .4s var(--ease), color .4s var(--ease);
}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--fg); color:var(--bg)}
.home .nav:not(.is-stuck) .nav-cta:hover{background:var(--ink-fg); color:var(--ink)}
/* En-tête du paiement.
WooCommerce sert le paiement par son propre gabarit, qui épingle son propre
en-tête : titre du site en texte et chariot par défaut. On surcharge le
gabarit — le panier, lui, prend déjà l'en-tête du thème — mais on garde son
parti « sans distraction » : la marque, et rien d'autre. Pas de navigation
sur une page à mille euros, et pas de lien panier puisque le tunnel le saute. */
.co-head{
--logo-h:44px;
height:72px; display:flex; align-items:center;
background:var(--bg); color:var(--fg); border-bottom:1px solid var(--hair);
}
/* `width:100%` n'est pas décoratif : `.wrap` est ici un enfant flex, donc il se
réduit à son contenu et son `margin-inline:auto` centrerait la marque au lieu
de la caler à gauche. `.nav .wrap` porte la même correction. */
.co-head .wrap{display:flex; align-items:center; width:100%}
.nav-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:1px; background:currentColor; margin:5px 0}
/* Le panier. Un filet de 1px comme le reste de la nav — le cartable de
WooCommerce, plein et arrondi, jure avec une charte qui n'a que des traits.
Le compte ne s'affiche qu'à partir d'un article : un zéro permanent est du
bruit, et il n'y a de toute façon qu'une ligne par réservation. */
.nav-cart{
position:relative; display:inline-flex; align-items:center; gap:8px;
padding-block:6px; opacity:.86; transition:opacity .35s var(--ease);
}
.nav-cart:hover{opacity:1}
.nav-cart svg{
display:block; width:20px; height:22px;
fill:none; stroke:currentColor; stroke-width:1;
stroke-linejoin:miter;
}
.nav-cart-count{
font-size:10px; font-weight:500; letter-spacing:.12em; line-height:1;
font-variant-numeric:tabular-nums;
}
/* Barre d'administration : WordPress pousse le document de 32px (46px en
dessous de 782px) mais ne connaît pas nos éléments en position fixe. Sans
ce décalage, la nav de l'accueil passe sous la barre pour toute personne
connectée — c'est-à-dire pour la cliente à chaque visite. */
body.admin-bar.home .nav{inset-block-start:32px}
body.admin-bar .nav-links{inset-block-start:104px}
html:has(body.admin-bar){--oma-adminbar:32px}
@media screen and (max-width:782px){
body.admin-bar.home .nav{inset-block-start:46px}
body.admin-bar .nav-links{inset-block-start:118px}
html:has(body.admin-bar){--oma-adminbar:46px}
}
@media screen and (max-width:600px){
/* en dessous de 600px WordPress rend la barre non collante : plus de décalage */
body.admin-bar.home .nav{inset-block-start:0}
body.admin-bar .nav-links{inset-block-start:72px}
html:has(body.admin-bar){--oma-adminbar:0px}
}
/* =======================================================================
7. HERO — l'unique geste décisif de la page
======================================================================= */
.hero{
position:relative; min-height:100svh; display:flex; align-items:flex-end;
color:var(--ink-fg); overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0; margin:0}
/* Video du hero, en amelioration progressive : elle se pose au-dessus de
l'image, qui reste le repli. Fichier absent, codec refuse ou mouvement
reduit — dans les trois cas l'image d'origine s'affiche, inchangee. */
.hero-video{
position:absolute; inset:0; z-index:0;
width:100%; height:100%; object-fit:cover;
filter:saturate(.58) sepia(.26) contrast(1.02) brightness(.94);
}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
/* Étalonné vers l'or plutôt que le sang de bœuf, pour que le hero appartienne
à la palette crème qui le suit au lieu de se lire comme un autre site.
Valeurs revues avec la photo de la cliente (octobre 2026) : le réglage
d'avant — `saturate(.58) sepia(.26)` — avait été posé sur un salon rouge
sombre, et il virait au brun une salle blanche accrochée d'œuvres colorées.
Sur un site d'art, c'est la couleur des œuvres qu'on éteignait. */
.hero-bg img{
width:100%; height:100%; object-fit:cover;
filter:saturate(.85) sepia(.08) contrast(1.02) brightness(.96);
transform:scale(1.06);
animation:heroDrift 2.4s var(--ease) forwards;
}
/* voile : lesté vers le bas pour que la typo pose sur l'encre, clair en haut
pour la nav */
/* Deux voiles, et chacun a sa raison.
Le vertical leste le bas pour que la typo pose sur l'encre et garde le haut
clair pour la nav. Le latéral est arrivé avec la photo de la cliente : une
salle blanche accrochée d'œuvres colorées, où le titre tombait en plein
milieu d'un tableau. Il ne fonce que la colonne de gauche, celle du texte,
et laisse la salle lumineuse à droite, là où il n'y a rien à lire. */
.hero::after{
content:""; position:absolute; inset:0;
background:
linear-gradient(to right, oklch(13% 0.030 260 / .58) 0%,
oklch(13% 0.030 260 / .30) 44%,
transparent 74%),
linear-gradient(to top, oklch(13% 0.030 260 / .90) 0%,
oklch(13% 0.030 260 / .58) 34%,
oklch(13% 0.030 260 / .18) 66%,
oklch(13% 0.030 260 / .34) 100%);
}
.hero-inner{position:relative; z-index:2; width:100%; padding-block:clamp(56px,9vh,110px)}
.hero-grid{display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,64px)}
.hero-eyebrow{
font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
color:var(--gold-ink); display:flex; align-items:center; gap:12px; margin-bottom:26px;
}
.hero-eyebrow::before{content:""; width:34px; height:1px; background:var(--gold-ink); flex:none}
/* Les quatre lignes du titre sont posées au
dans le markup, comme la
maquette les coupe : c'est aussi ce que le script découpe pour la
révélation ligne à ligne. */
.hero-h{
font-family:var(--display); font-weight:400;
font-size:clamp(41px, 5.1vw, 84px); line-height:.92; letter-spacing:-.036em;
margin-bottom:clamp(22px,2.6vw,34px);
}
/* Révélation par masque de ligne.
L'état masqué est conditionné à .oma-js, posée par un script en ligne dans
le . Sans JS — panne de chargement, ou éditeur de blocs, où aucun
script de front ne tourne — le contenu s'affiche simplement dans son état
final au lieu de rester à opacity:0. */
/* Le masque coupe au ras de la boîte de ligne, et `line-height:.95` la ferme
au-dessus du jambage : le « g » de Building y perdait sa descendante. On
ouvre le bas du masque et on reprend la même valeur en marge négative, pour
que l'interligne du titre ne bouge pas d'un pixel. La translation passe de
112 % à 125 % : l'état masqué doit rester sous le bas du masque, qui vient
de descendre. */
.ln{display:block; overflow:hidden; padding-block:.02em .16em; margin-block-end:-.14em}
.oma-js .ln > span{display:block; transform:translateY(125%); will-change:transform}
/* Le corps du hero, un cran sous le sous-titre : le brief donne les deux, et
deux blocs au même corps se liraient comme un seul paragraphe coupé. */
.hero-text{
font-size:clamp(15px,1.15vw,17px); line-height:1.7; color:var(--ink-fg);
max-width:43ch; text-wrap:pretty;
}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3vw,40px)}
/* fondu pour tout ce qui suit le titre — même conditionnement */
.oma-js .hero .fx{opacity:0; transform:translateY(16px)}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fadeUp{to{opacity:1; transform:none}}
@keyframes heroDrift{to{transform:scale(1)}}
body.ready .ln > span{animation:rise 1.05s var(--ease) forwards; animation-delay:var(--d,0ms)}
body.ready .hero .fx{animation:fadeUp .9s var(--ease) forwards; animation-delay:var(--d,0ms)}
/* =======================================================================
7b. BANDEAU DES FOIRES — le réseau en une ligne
Sept noms et rien d'autre, juste sous le hero : la preuve avant le discours.
======================================================================= */
.creds{background:var(--surface); padding-block:clamp(32px,3.2vw,44px)}
.creds-label{
font-size:11px; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
color:var(--muted); text-align:center; margin-bottom:26px;
}
.creds-list{
display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
column-gap:clamp(16px,2.4vw,34px); row-gap:10px;
font-family:var(--serif); font-size:clamp(19px,2.1vw,30px);
line-height:1.15; color:var(--fg);
}
.creds-list li{display:flex; align-items:baseline; gap:inherit}
.creds-list li + li::before{content:"·"; color:var(--accent)}
/* =======================================================================
8. RÉVÉLATION AU SCROLL (sobre)
======================================================================= */
.oma-js .rv{opacity:0; transform:translateY(22px)}
.rv{transition:opacity .95s var(--ease), transform .95s var(--ease)}
.oma-js .rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.09s} .rv-d2{transition-delay:.18s}
.rv-d3{transition-delay:.27s} .rv-d4{transition-delay:.36s}
/* =======================================================================
9. MANIFESTE
======================================================================= */
.manifesto{padding-block:var(--s-xl); text-align:center; background:#fff}
.manifesto .eyebrow{margin-bottom:clamp(34px,4vw,54px)}
.manifesto-h{
font-family:var(--display); font-weight:400;
font-size:clamp(24px,3.2vw,42px); line-height:1.2; letter-spacing:-.02em;
max-width:26ch; margin-inline:auto; text-wrap:balance;
}
.manifesto-p{
margin-top:clamp(30px,3.6vw,46px); font-size:clamp(17px,1.3vw,19px);
line-height:1.7; color:var(--muted); max-width:56ch; margin-inline:auto; text-wrap:pretty;
}
.manifesto-line{
margin-top:clamp(44px,5vw,72px); font-family:var(--display); font-style:italic;
font-weight:400; font-size:clamp(20px,2.1vw,28px); line-height:1.34;
letter-spacing:-.008em; color:var(--accent); max-width:26ch; margin-inline:auto;
text-wrap:balance;
}
/* =======================================================================
10. WHY (contraste)
======================================================================= */
.why{padding-block:var(--s-lg); background:var(--bg-deep); border-block:1px solid var(--hair)}
.why-head{max-width:56ch; margin-bottom:clamp(48px,6vw,86px)}
.why-head .eyebrow{margin-bottom:24px}
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0}
.why-col{padding:clamp(30px,3.4vw,48px) 0}
.why-col:first-child{padding-inline-end:clamp(30px,4vw,72px); border-inline-end:1px solid var(--hair)}
.why-col:last-child{padding-inline-start:clamp(30px,4vw,72px)}
.why-label{margin-bottom:22px}
.why-col:last-child .why-label{color:var(--accent)}
.why-col h3{
font-family:var(--display); font-weight:400; font-size:clamp(22px,2.4vw,32px);
line-height:1.16; letter-spacing:-.022em; margin-bottom:20px; text-wrap:balance;
}
.why-close{
margin-top:clamp(48px,5.5vw,80px); padding-top:clamp(30px,3.4vw,44px);
border-top:1px solid var(--hair);
font-family:var(--display); font-weight:400; font-size:clamp(20px,2.2vw,30px);
line-height:1.26; letter-spacing:-.02em; text-wrap:balance;
}
/* =======================================================================
11. FOR WHO
======================================================================= */
.forwho{padding-block:var(--s-xl)}
.sec-head{margin-bottom:clamp(46px,5.5vw,80px)}
.sec-head .eyebrow{margin-bottom:24px}
.sec-head .lede{margin-top:24px}
.sec-head-split{display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end}
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,36px)}
.profile{display:flex; flex-direction:column; border-top:1px solid var(--fg)}
.profile .ph{aspect-ratio:1/1; margin-top:0}
.profile:hover .ph img{transform:scale(1.045)}
.profile-body{padding-top:26px}
.profile h3{
font-family:var(--display); font-weight:400; font-size:clamp(23px,2.3vw,32px);
line-height:1.14; letter-spacing:-.022em; margin-bottom:16px;
}
.profile p{color:var(--muted); font-size:17px; line-height:1.7; text-wrap:pretty}
/* =======================================================================
12. BENEFITS
Cellules fermées : la grille trace le haut (pleine force, filet d'ouverture
de section), le bord de début et le bas ; chaque .ben trace sa propre fin,
si bien que la dernière scelle le cadre.
======================================================================= */
.benefits{padding-block:var(--s-lg); background:var(--bg-deep); border-block:1px solid var(--hair)}
.ben-grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:0;
border-top:1px solid var(--fg);
border-inline-start:1px solid var(--hair);
border-bottom:1px solid var(--hair);
}
.ben{
padding:clamp(28px,2.8vw,40px) clamp(22px,2.2vw,32px) clamp(30px,3vw,42px);
border-inline-end:1px solid var(--hair); position:relative;
}
.ben-n{
font-family:var(--serif); font-size:20px; font-style:italic; color:var(--accent);
margin-bottom:18px; letter-spacing:.02em;
font-variant-numeric:lining-nums tabular-nums;
}
.ben h3{
font-family:var(--display); font-weight:400; font-size:clamp(20px,1.8vw,25px);
line-height:1.16; letter-spacing:-.018em; margin-bottom:14px; text-wrap:balance;
}
.ben p{color:var(--muted); font-size:15.5px; line-height:1.64; text-wrap:pretty}
/* =======================================================================
13. HOW IT WORKS
======================================================================= */
.how{padding-block:var(--s-xl)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,58px)}
.step{position:relative; padding-top:34px; border-top:1px solid var(--hair)}
.step::before{
content:""; position:absolute; inset-block-start:-1px; inset-inline-start:0;
width:56px; height:1px; background:var(--accent);
}
.step-i{
font-family:var(--serif); font-style:italic; font-weight:400;
font-size:clamp(36px,4vw,58px); line-height:1; color:var(--accent-lo);
margin-bottom:18px; font-variant-numeric:tabular-nums;
}
.step h3{
font-family:var(--display); font-weight:400; font-size:clamp(20px,1.9vw,27px);
line-height:1.14; letter-spacing:-.018em; margin-bottom:14px;
}
.step p{color:var(--muted); font-size:16px; line-height:1.66; text-wrap:pretty}
/* =======================================================================
13b. ART ADVISORY & COLLECTION BUILDING
Deux cartes de même hauteur : le lien de bas de carte est poussé par
`margin-top:auto`, pour qu'il s'aligne même quand l'autre carte est plus
longue. Les quatre points sont des paires h4 + p : filet en haut de la
liste, filet sous chaque point.
======================================================================= */
.advisory{background:var(--bg-deep); padding-block:clamp(56px,8.3vw,120px)}
.adv-stack{display:grid; gap:clamp(24px,4.4vw,64px)}
.adv-head{display:grid; grid-template-columns:1fr 460px; gap:96px; align-items:end}
.adv-aside{display:grid; justify-items:start; gap:28px}
.adv-cards{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.2vw,32px)}
.adv-card{background:var(--surface); display:flex; flex-direction:column}
.adv-shot{height:clamp(240px,26.4vw,380px)}
.adv-body{
flex:1; display:flex; flex-direction:column;
gap:clamp(16px,1.7vw,24px); padding:clamp(24px,3.3vw,48px);
}
.adv-num{color:var(--accent)}
.adv-h{
font-family:var(--display); font-weight:400;
font-size:clamp(26px,2.5vw,36px); line-height:1.12; letter-spacing:-.022em;
}
.adv-lede{font-size:16px; line-height:1.62; color:var(--body)}
.adv-points{border-top:1px solid var(--hair)}
.adv-points > h4{
font-family:var(--serif); font-weight:400;
font-size:clamp(19px,1.4vw,20px); line-height:1.3;
padding-top:15px;
}
.adv-points > p{
font-size:15px; line-height:1.58; color:var(--body);
padding:4px 0 15px; border-bottom:1px solid var(--hair);
}
.adv-more{margin-top:auto; padding-top:4px}
.adv-quote{
font-family:var(--display); font-style:italic; font-weight:400;
font-size:clamp(19px,1.67vw,24px); line-height:1.4; letter-spacing:-.012em;
color:var(--accent); max-width:720px; text-wrap:pretty;
}
/* =======================================================================
14. LES EXPÉRIENCES PRIVÉES
Trois cartes de même hauteur. La première est sur fond d'encre — c'est le
seul produit qui se réserve en ligne, et la maquette le détache ainsi.
Le pied de carte est poussé en bas par `margin-top:auto`.
======================================================================= */
.experiences{background:var(--bg); padding-block:clamp(56px,8.3vw,120px)}
.xp-stack{display:grid; gap:clamp(24px,4.4vw,64px)}
.xp-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.2vw,32px)}
.xp-card{background:var(--surface); display:flex; flex-direction:column}
.xp-card.is-ink{background:var(--ink); color:var(--ink-fg)}
.xp-shot{aspect-ratio:4/3}
.xp-shot img{width:100%; height:100%; object-fit:cover}
.xp-body{flex:1; display:flex; flex-direction:column; gap:14px; padding:clamp(22px,2.4vw,34px)}
.xp-kind{color:var(--accent)}
.xp-card.is-ink .xp-kind{color:var(--gold-ink)}
.xp-h{
font-family:var(--display); font-weight:400;
font-size:clamp(23px,2vw,29px); line-height:1.12; letter-spacing:-.02em;
}
.xp-text{font-size:16px; line-height:1.6; color:var(--body)}
.xp-card.is-ink .xp-text{color:var(--ink-muted)}
.xp-foot{
margin-top:auto; padding-top:16px; border-top:1px solid var(--hair);
display:flex; justify-content:space-between; align-items:baseline; gap:16px;
}
.xp-card.is-ink .xp-foot{border-top-color:var(--ink-hair)}
.xp-price{font-family:var(--serif); font-size:19px; white-space:nowrap}
.xp-more{margin-top:14px}
.xp-card.is-ink .tlink{color:var(--ink-fg)}
.xp-card.is-ink .tlink::after{background:var(--gold-ink); transform:scaleX(1)}
/* le bandeau des villes */
.xp-where{background:var(--bg-deep); padding:clamp(24px,3.3vw,48px)}
.xp-where-cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,48px)}
.xp-where-cols > :last-child{
border-inline-start:1px solid var(--hair); padding-inline-start:clamp(24px,3vw,48px);
}
.xp-cities{
font-family:var(--display); font-weight:400;
font-size:clamp(21px,1.9vw,28px); line-height:1.2; letter-spacing:-.016em;
margin-top:10px;
}
.xp-where-note{margin-top:clamp(20px,2.4vw,34px); color:var(--body)}
/* =======================================================================
15. FORMULAIRES
======================================================================= */
.bespoke-form{background:var(--surface); padding-block:clamp(56px,8.3vw,120px)}
.form-split{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,5vw,88px); align-items:start}
.form-split h2{margin-block:22px 18px}
/* Six colonnes pour n’avoir qu’une grille : deux champs par rangée en
demi, trois en tiers, un seul en pleine largeur. */
.fgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(18px,2vw,26px)}
.fgrid .full{grid-column:1/-1}
.fgrid .f-half{grid-column:span 3}
.fgrid .f-third{grid-column:span 2}
/* Le choix du service : quatre vraies cases à cocher, habillées. */
.svc{border:0; padding:0; margin:0; min-width:0}
.svc legend{padding:0; margin-bottom:12px}
.svc-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.svc-pick{position:relative; display:block}
.svc-pick input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.svc-pick span{
display:flex; align-items:center; justify-content:center; min-height:52px;
text-align:center; padding:12px 8px;
border:1px solid var(--hair); background:var(--bg); font-size:14px; line-height:1.2;
transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.svc-pick:hover span{border-color:var(--muted)}
.svc-pick input:checked + span{background:var(--ink); border-color:var(--ink); color:var(--ink-fg)}
.svc-pick input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
/* Dates, lieu et nombre d'invités ne concernent qu'une expérience privée :
les trois champs ne s'ouvrent que pour elle. Pas de script — c'est l'état
du bouton radio qui décide, et un navigateur sans `:has()` les montre tous,
ce qui reste un formulaire juste. */
.fgrid:not(:has(#svc-experience:checked)) .f-when{display:none}
.enq-contact{margin-top:clamp(32px,4vw,56px)}
.enq-mail{margin-top:8px}
label.f{display:block}
label.f > span{
display:block; margin-bottom:9px;
font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
label.f input, label.f textarea, label.f select{
width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair);
padding:11px 0; font-size:15.5px; outline:0; border-radius:0;
transition:border-color .35s var(--ease);
}
label.f input:focus, label.f textarea:focus, label.f select:focus{border-bottom-color:var(--accent)}
label.f textarea{resize:vertical; min-height:88px; line-height:1.6}
.form-actions{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px; margin-top:8px}
.form-actions .meta{max-width:34ch; text-transform:none; letter-spacing:.01em; font-size:12.5px; line-height:1.5}
.oma-ok{margin-top:16px; color:var(--accent); letter-spacing:.14em}
.fgrid .oma-ok{grid-column:1/-1}
.oma-err{color:var(--warn); text-transform:none; letter-spacing:.01em; font-size:12.5px; line-height:1.5}
.hotels .oma-err{color:var(--warn-ink)}
/* Le pot de miel : hors de l'écran plutôt que display:none, qu'un robot
attentif sauterait. Jamais atteignable au clavier (tabindex="-1"). */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* =======================================================================
16. CAROLINE
======================================================================= */
.caroline{background:var(--surface); padding-block:clamp(56px,8.3vw,120px)}
.car-grid{display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(36px,5.5vw,96px); align-items:start}
/* Plafonné à la largeur native du fichier fourni (400px) : la colonne fait
~460px au wrap de 1280, et y agrandir une source de 400px est visiblement
mou. Le mou tombe dans la gouttière en blanc supplémentaire, ce qui sert la
section. Relever le plafond dès qu'un original pleine résolution arrive. */
.car-photo{position:relative; max-width:400px; margin:0}
/* 2:3, le ratio propre de la photographie — un cadre 4:5 coupait le haut des cheveux */
.car-photo .ph{aspect-ratio:2/3}
.car-cap{margin-top:14px; display:flex; justify-content:space-between; gap:16px}
/* La biographie a doublé de longueur avec le lot 3 : le portrait, deux fois
plus court que la colonne de texte, sortait du champ dès le deuxième
paragraphe. Il suit donc la lecture — légende comprise, elle fait partie de
la figure.
Deux conditions, et aucune n'est décorative. Sous 901px la grille est déjà
en une colonne, où coller le portrait le planterait au-dessus du texte.
Sous 760px de hauteur, la figure (600px de photo, plus la légende, plus le
décalage de la nav) ne tient pas dans la fenêtre : elle collerait en perdant
sa légende par le bas, c'est-à-dire précisément ce qu'on voulait garder.
`align-items:start` sur `.car-grid` est ce qui rend tout ceci possible :
un élément étiré sur toute la hauteur de sa rangée n'a nulle part où
coller. */
@media (min-width:901px) and (min-height:760px){
.car-photo{position:sticky; inset-block-start:calc(92px + var(--oma-adminbar, 0px))}
}
.car-body .eyebrow{margin-bottom:24px}
.car-body h2{margin-bottom:30px}
/* Les quatre repères du parcours, deux par deux, chacun sous son filet. */
.car-points{margin-top:clamp(28px,3vw,44px); display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(24px,3vw,48px)}
.car-pt{border-top:1px solid var(--hair); padding:22px 0}
.car-pt h4{
font-family:var(--serif); font-weight:400;
font-size:clamp(19px,1.5vw,22px); line-height:1.25;
}
.car-pt p{margin-top:6px; font-size:15px; line-height:1.58; color:var(--body)}
.pullquote{
margin-block:clamp(40px,4.6vw,64px);
padding-inline-start:clamp(22px,2.4vw,34px);
border-inline-start:1px solid var(--accent);
font-family:var(--serif); font-weight:400; font-style:italic;
font-size:clamp(20px,1.9vw,27px); line-height:1.3; letter-spacing:-.01em;
text-wrap:pretty;
}
.car-sign{
margin-top:clamp(32px,3.4vw,44px); padding-top:24px; border-top:1px solid var(--hair);
display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline;
}
/* =======================================================================
17. PAST MOMENTS
Piloté par la hauteur de rangée et non par le ratio : les images remplissent
la rangée pour que les spans pavent exactement (3+3 / 3+3 / 2+2+2) sans trou.
======================================================================= */
.moments{padding-block:var(--s-lg); background:var(--bg-deep); border-block:1px solid var(--hair)}
.mo-grid{
display:grid; grid-template-columns:repeat(6,1fr);
grid-auto-rows:clamp(180px,19vw,290px);
gap:clamp(14px,1.6vw,24px);
}
.mo{display:flex; flex-direction:column; grid-column:span 2; margin:0}
.mo .ph{flex:1; min-height:0}
.mo .ph img{height:100%}
.mo.feature{grid-column:span 3; grid-row:span 2}
.mo.half{grid-column:span 3}
.mo:hover .ph img{transform:scale(1.045)}
.mo figcaption{
margin-top:12px; flex:none;
display:flex; justify-content:space-between; gap:14px; align-items:baseline;
}
/* =======================================================================
18. TESTIMONIALS — une citation à la fois
Cinq citations de 73 à 98 mots. Le rail de cartes qui précédait les
montrait toutes, au prix d'un corps de 17px : illisible comme preuve
sociale et sans aucun impact. Ici la citation courante prend toute la
largeur au corps d'affichage, et la première phrase seule le porte — la
suite retombe en corps de lecture, sans quoi les citations de plus de
400 signes feraient un mur.
Toujours aucune minuterie : la rotation automatique emporte le texte sous
les yeux de qui le lit et exige un contrôle pause (WCAG 2.2.2). Ce que
cette décision refusait, c'est l'automatisme, pas le défilement — on
avance au clic ou aux flèches, et la citation reste tant qu'on la lit.
======================================================================= */
.testi{
/* Le fond de la section tient dans ces cinq jetons. La maquette validée
était encre ; repassée en clair le 2 septembre 2026 parce que la section
Collaborations qui suit est déjà sombre, et deux blocs foncés d'affilée
alourdissent la fin de page. Les valeurs encre, pour y revenir :
--ink / --ink-fg / --ink-muted / --ink-hair / --gold-ink.
Blanc franc et non `--surface` (98,6 %), qui est indistinguable de `--bg` :
même valeur et même raison que le manifeste. */
--testi-ground:#fff;
--testi-fg:var(--fg);
--testi-muted:var(--muted);
--testi-hair:var(--hair);
--testi-gold:var(--accent);
padding-block:clamp(56px,8.3vw,120px);
background:var(--testi-ground); color:var(--testi-fg);
}
/* L'accroche et les flèches partagent une ligne ; les flèches y sont posées
par le script. La hauteur minimale la réserve, pour que le titre ne saute
pas quand elles arrivent. */
.testi-head{
display:flex; align-items:center; justify-content:space-between;
gap:20px; min-height:52px;
}
.testi .eyebrow{color:var(--testi-gold)}
.testi .eyebrow::before,
.testi .eyebrow::after{background:var(--testi-gold)}
/* La citation part du bord gauche, sur toute la largeur : la maquette a
retiré le guillemet décoratif qui la décalait d'une colonne. */
.testi-stage{margin-top:clamp(28px,3.2vw,44px)}
/* `is-live` n'est posée que par le JS. Sans lui, les cinq citations restent
empilées et lisibles : c'est l'état de repli voulu, et c'est aussi ce que
voit l'éditrice de blocs, où aucun script du front ne tourne. */
.testi-panels{min-width:0}
/* Les cinq panneaux occupent la même cellule : la plus haute fixe la rangée,
donc la hauteur de la section est constante et ne saute pas d'un témoignage
à l'autre — sans aucune mesure en JS.
`start` et non l'étirement : une citation courte s'arrête là où elle
s'arrête, et le blanc qu'elle laisse tombe sous la signature, où il se
confond avec le rembourrage de section. Étirés, les panneaux repoussaient
la signature en bas et creusaient 240 px au milieu du bloc.
Les anciennes cartes épinglaient la signature (`margin-top:auto`) pour que
les cinq s'alignent ; ici on n'en voit qu'une à la fois, l'alignement d'une
carte à l'autre ne se voit pas — l'argument ne tient plus. */
.testi-panels.is-live{display:grid; align-items:start}
.testi-panels.is-live > .testi-panel{
/* Superposées dans la même cellule : la citation la plus longue fixe la
hauteur, et la section ne saute plus d'un témoignage à l'autre. */
grid-area:1/1;
transition:opacity .34s var(--ease);
}
.testi-panels.is-live > .testi-panel[inert]{opacity:0}
.testi-panels.is-live > .testi-panel + .testi-panel{margin-top:0}
.testi-panel{margin:0; display:flex; flex-direction:column}
.testi-panel + .testi-panel{margin-top:clamp(40px,5vw,72px)}
/* L'écart minimal au-dessus du filet est porté par la citation et non par une
marge de `.testi-by`, dont le `margin-top:auto` l'écraserait. Le bloc
citation du core pose sinon son propre filet et son retrait. */
.testi-quote{margin:0; border:0; padding:0 0 clamp(28px,3.2vw,44px)}
.testi-lead{
margin:0; font-family:var(--display); font-weight:400;
font-size:clamp(25px,3.6vw,50px); line-height:1.1; letter-spacing:-.03em;
color:var(--testi-fg); text-wrap:pretty;
}
/* La suite retombe en corps de lecture. Sans ce décrochage, les citations de
Lana et Marina — plus de 400 signes — feraient un mur au corps d'affichage. */
.testi-rest{
margin:clamp(20px,2.3vw,30px) 0 0; max-width:58ch;
color:var(--testi-muted); font-size:15.5px; line-height:1.62; text-wrap:pretty;
}
.testi-by{
padding-top:22px;
border-top:1px solid var(--testi-hair);
display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
}
.testi-name{
font-family:var(--display); font-size:clamp(22px,2.5vw,32px); font-weight:500;
letter-spacing:-.022em; line-height:1;
}
/* Les commandes sont posées par le JS : sans lui elles n'auraient rien à
commander, et une flèche qui ne fait rien est pire que pas de flèche. */
/* Cinq segments plutôt que cinq pastilles : la barre dit d'un coup d'œil
combien il en reste, la pastille ne le dit qu'après comptage. Elle vit au
bout de la ligne de signature, où le script la range. */
.testi-bars{display:flex; gap:5px; width:160px; margin-inline-start:auto; align-self:center}
.testi-bars button{
flex:1; height:2px; padding:0; border:0; cursor:pointer;
background:var(--testi-hair); transition:background .35s var(--ease);
}
.testi-bars button[aria-current="true"]{background:var(--testi-gold)}
.testi-bars button:hover{background:var(--testi-muted)}
.testi-arrows{display:flex; gap:10px}
.testi-arrow{
width:52px; height:52px; display:grid; place-items:center;
background:none; cursor:pointer; color:var(--testi-fg);
border:1px solid var(--testi-hair); border-radius:999px;
transition:border-color .3s var(--ease), color .3s var(--ease);
}
.testi-arrow:hover{border-color:var(--testi-gold); color:var(--testi-gold)}
.testi-arrow svg{width:17px; height:17px; display:block}
/* =======================================================================
19. PARTENARIATS (inversé, B2B, sobre)
Plus de formulaire ici : la demande de partenariat passe par le formulaire
unique de la page, dont le bouton présélectionne « Partnership ».
======================================================================= */
.hotels{background:var(--ink); color:var(--ink-fg); padding-block:clamp(56px,8.3vw,120px)}
.pt-stack{display:grid; gap:clamp(32px,4.4vw,64px)}
.pt-head{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,5vw,88px); align-items:start}
.pt-intro{display:grid; justify-items:start}
.pt-text{color:var(--ink-muted); max-width:46ch; text-wrap:pretty}
.pt-intro .wp-block-buttons{margin-top:clamp(24px,3vw,40px)}
.pt-note{margin-top:14px; font-size:14px; color:var(--ink-muted)}
/* Les quatre publics : un filet au-dessus de chacun, titre puis description. */
.pt-who > h3{
border-top:1px solid var(--ink-hair); padding-top:clamp(20px,2.2vw,30px);
font-family:var(--serif); font-weight:400;
font-size:clamp(21px,1.8vw,26px); line-height:1.2;
}
.pt-who > p{
margin-top:8px; padding-bottom:clamp(20px,2.2vw,30px);
color:var(--ink-muted); max-width:62ch; text-wrap:pretty;
}
.pt-partners{
display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,5vw,88px);
align-items:start; border-top:1px solid var(--ink-hair); padding-top:clamp(32px,4vw,56px);
}
.pt-label{color:var(--gold-ink)}
/* Le fichier fourni fait 141px de large : on l'affiche à sa taille et on
dessine le cadre autour, plutôt que de l'étirer. */
.pt-logo{
width:200px; height:94px; margin:0; border:1px solid var(--ink-hair);
display:grid; place-items:center;
}
.pt-logo img{width:141px; height:auto}
.pt-how{
display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px);
border-top:1px solid var(--ink-hair); padding-top:clamp(28px,3vw,44px);
}
.pt-how p:not(.meta){margin-top:10px}
/* =======================================================================
19b. LE JOURNAL
Les billets sont des articles WordPress, rendus par [oma_journal]. La
première carte visible porte `.is-lead` : plus grande, avec son extrait et
sa date. Le script la repose après chaque filtrage, pour qu'il y ait
toujours une tête de grille — sans JS, c'est la première du markup.
======================================================================= */
.journal{background:var(--bg); padding-block:clamp(56px,8.3vw,120px) clamp(40px,4vw,64px)}
.jr-stack{display:grid; gap:clamp(32px,4.4vw,64px)}
.jr-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); align-items:end; gap:clamp(24px,3vw,48px)}
.jr-voice{display:flex; align-items:center; gap:20px}
.jr-face{flex:none; width:72px; height:72px; margin:0; border-radius:50%; overflow:hidden}
.jr-face img{width:100%; height:100%; object-fit:cover}
.jr-say{
font-family:var(--display); font-style:italic; font-weight:400;
font-size:clamp(17px,1.45vw,21px); line-height:1.34; letter-spacing:-.012em;
text-wrap:pretty;
}
.jr-voice .meta{margin-top:8px}
/* les filtres */
.jr-pills{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(28px,3vw,44px)}
.jr-pill{
padding:11px 22px; border:1px solid var(--hair); border-radius:999px;
background:transparent; color:var(--body); font-family:var(--sans);
font-size:15px; line-height:1.2; cursor:pointer;
transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.jr-pill:hover{border-color:var(--muted)}
.jr-pill.is-on{background:var(--ink); border-color:var(--ink); color:var(--ink-fg)}
/* la grille : la tête tient la colonne de gauche sur deux rangées */
.jr-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(20px,2.2vw,32px) clamp(20px,2.4vw,36px); align-items:start}
.jr-card[hidden]{display:none}
.jr-card.is-lead{grid-column:1; grid-row:span 2}
.jr-card:not(.is-lead) .jr-ex, .jr-card:not(.is-lead) .jr-date{display:none}
.jr-shot{display:block; position:relative; margin-bottom:18px; aspect-ratio:5/4}
.jr-card.is-lead .jr-shot{aspect-ratio:3/2}
.jr-shot img{width:100%; height:100%; object-fit:cover}
.jr-cat{color:var(--accent)}
.jr-h{
font-family:var(--display); font-weight:400;
font-size:clamp(20px,1.74vw,25px); line-height:1.16; letter-spacing:-.018em;
margin-top:10px;
}
.jr-card.is-lead .jr-h{font-size:clamp(24px,2.15vw,31px); line-height:1.14}
.jr-h a{transition:color .35s var(--ease)}
.jr-h a:hover{color:var(--accent)}
.jr-ex{margin-top:14px; font-size:16px; line-height:1.62; color:var(--body); max-width:52ch}
.jr-by{margin-top:14px}
/* les expositions du mois */
.jr-list{display:grid; grid-template-columns:1fr 2fr; gap:clamp(24px,3vw,48px); padding-top:clamp(28px,3vw,44px); border-top:1px solid var(--fg)}
.jr-shows{display:grid}
.jr-show{
display:grid; grid-template-columns:1fr 130px 1.4fr auto;
align-items:baseline; gap:20px; padding:18px 0; border-bottom:1px solid var(--hair);
}
.jr-shows li:last-child{border-bottom:0}
.jr-venue{font-family:var(--serif); font-size:clamp(19px,1.6vw,23px); line-height:1.2}
.jr-city{color:var(--accent)}
.jr-what{font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.25vw,18px); color:var(--body)}
.jr-until{text-align:end; white-space:nowrap}
/* le podcast */
.pod{
display:flex; align-items:center; gap:clamp(24px,3.9vw,56px);
background:var(--ink); color:var(--ink-fg); padding:clamp(24px,3.3vw,48px);
}
.pod-cover{
position:relative; flex:none; width:260px; height:260px; overflow:hidden;
display:flex; flex-direction:column; justify-content:space-between;
padding:24px; --logo-h:104px;
}
.pod-bg{position:absolute; inset:0; margin:0; z-index:0}
.pod-bg img{width:100%; height:100%; object-fit:cover}
.pod-cover::after{content:""; position:absolute; inset:0; z-index:1; background:oklch(17.8% 0.034 260 / .70)}
.pod-cover > :not(.pod-bg){position:relative; z-index:2}
.pod-kicker{
font-family:var(--sans); font-size:10px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink);
}
.pod-mark{color:var(--ink-fg)}
.pod-body{display:grid; gap:18px}
.pod-h{
font-family:var(--display); font-weight:400;
font-size:clamp(22px,2.2vw,32px); line-height:1.16; letter-spacing:-.018em;
}
.pod-text{font-size:16px; line-height:1.62; color:var(--ink-muted); max-width:70ch}
.pod-actions{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2vw,32px)}
.pod .tlink{color:var(--ink-fg)}
.pod .tlink::after{background:var(--gold-ink); transform:scaleX(1)}
.pod-where{
font-family:var(--sans); font-size:10px; font-weight:500;
letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted);
}
/* =======================================================================
20. NEWSLETTER
======================================================================= */
/* Un panneau sable posé dans la crème du journal : deux phrases à gauche, le
champ à droite. Le reste de la rubrique est parti dans le journal. */
.news{background:var(--bg); padding-block:0 clamp(56px,8.3vw,120px)}
.news-panel{
background:var(--bg-deep); padding:clamp(24px,3.3vw,48px);
display:flex; flex-wrap:wrap; justify-content:space-between;
align-items:center; gap:clamp(24px,3vw,48px);
}
.news-note{margin-top:12px; color:var(--body); max-width:46ch; text-wrap:pretty}
.news-panel form{flex:1 1 380px; max-width:517px}
/* Le champ de l'infolettre n'est plus un trait sous le texte mais une boîte
claire et son bouton d'encre, collés l'un à l'autre. */
/* Le champ et son bouton sont collés et poussés à droite, jusqu'au bord de
la marge intérieure du panneau : relevé sur la maquette, 517px de large à
1440, dont 137 pour le bouton. Le champ n'a pas de bordure — c'est son fond
clair qui le dessine sur le sable. */
.news-panel .field{display:flex; align-items:stretch; background:var(--surface)}
.news-panel .field input{
flex:1; min-width:0; border:0; outline:0; border-radius:0;
background:transparent; padding:0 22px; height:56px;
font-size:15px; color:var(--fg);
}
.news-panel .field input::placeholder{color:var(--faint)}
.news-panel .field input:focus{box-shadow:inset 0 -2px 0 var(--accent)}
.news-panel .field button{
flex:none; border:0; border-radius:0; cursor:pointer;
height:56px; padding:0 clamp(20px,2.2vw,30px);
background:var(--ink); color:var(--ink-fg);
font-family:var(--sans); font-size:11px; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
transition:background .45s var(--ease);
}
.news-panel .field button:hover{background:var(--accent)}
/* =======================================================================
20 bis. MEMBERSHIP
Composition jamais insérée dans une page : la section n'existe que dans
l'inserteur de l'éditrice. Les filets reprennent `.hot-list`, en palette
crème — celle-là est écrite pour le fond encre de la section B2B.
======================================================================= */
.membership{padding-block:var(--s-xl); background:#fff}
.mb-list{list-style:none; padding:0; margin:0; border-top:1px solid var(--hair)}
.mb-list li{
padding:17px 0; border-bottom:1px solid var(--hair);
display:flex; gap:18px; align-items:baseline;
font-size:15.5px; line-height:1.6; color:var(--muted);
}
.mb-list li::before{content:""; width:14px; height:1px; background:var(--accent); flex:none; transform:translateY(-6px)}
/* =======================================================================
21. CTA FINAL
======================================================================= */
/* Blanc franc, comme le manifeste et les témoignages : la clôture est le
troisième moment de respiration de la page, pas un fond de plus. */
.final{padding-block:var(--s-xl); text-align:center; background:#fff}
.final h2{
font-family:var(--display); font-weight:400;
font-size:clamp(34px,5.6vw,84px); line-height:.98; letter-spacing:-.034em;
max-width:15ch; margin-inline:auto; text-wrap:balance;
}
.final .eyebrow{margin-bottom:34px}
.final .lede{margin:clamp(26px,3vw,40px) auto clamp(34px,4vw,52px); text-align:center}
.final .wp-block-buttons{justify-content:center}
/* =======================================================================
22. PIED DE PAGE
Le teaser « Oh My Art Book » a été retiré à la demande de la cliente.
Ne pas le réintroduire dans parts/footer.
======================================================================= */
.foot{background:var(--ink); color:var(--ink-fg); padding-block:clamp(56px,6vw,88px) 34px}
.foot-top{
display:grid; grid-template-columns:1.4fr 1.7fr 1fr .9fr; gap:clamp(28px,3.4vw,48px);
padding-bottom:clamp(40px,4.4vw,60px); border-bottom:1px solid var(--ink-hair);
}
.foot .brand{--logo-h:62px; margin-bottom:20px}
.foot-tag{color:var(--ink-muted); font-size:14.5px; max-width:28ch}
.foot h4{
font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
color:var(--gold-ink); margin-bottom:20px; font-family:var(--sans);
}
.foot ul li{margin-bottom:11px; color:var(--ink-muted); font-size:14.5px}
/* Les ancres de la page tiennent sur deux colonnes, comme la maquette. */
.foot-page ul{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(16px,2vw,28px)}
.foot ul a{color:inherit; transition:color .35s var(--ease)}
.foot ul a:hover{color:var(--ink-fg)}
/* Le teaser portait le filet entre les colonnes de liens et la ligne légale.
Sans lui, c'est la bordure basse de .foot-top qui fait ce travail — donc
.foot-bot a besoin de la respiration que fournissait le padding du teaser,
sinon le copyright vient serrer le filet. */
.foot-bot{
margin-top:clamp(30px,3.2vw,44px); display:flex; flex-wrap:wrap; gap:12px 28px;
justify-content:space-between; align-items:center;
}
.foot-bot .meta{color:var(--muted)}
/* Le crédit d'atelier se range avec le copyright, à gauche : `space-between` ne
sépare ainsi que deux groupes, la mention légale d'un côté et les liens
légaux de l'autre. En troisième enfant direct, il se serait retrouvé centré
entre les deux. */
.foot-bot-credit{display:flex; flex-wrap:wrap; align-items:center; gap:6px 26px}
.foot-bot-credit a{color:var(--ink-muted); transition:color .35s var(--ease)}
.foot-bot-credit a:hover{color:var(--ink-fg)}
.foot-bot-links{display:flex; gap:26px; flex-wrap:wrap}
/* =======================================================================
23. PAGE EXPÉRIENCE — fil d'Ariane
======================================================================= */
.crumb{border-bottom:1px solid var(--hair)}
.crumb .wrap{display:flex; align-items:center; gap:12px; padding-block:16px; flex-wrap:wrap}
.crumb a{color:var(--faint); transition:color .3s var(--ease)}
.crumb a:hover{color:var(--accent)}
/* un point de 2px, pas un filet de 12px : une courte ligne horizontale à
cette taille se lit comme un tiret cadratin. Même séparateur que .xp-meta .dot */
.crumb .sep{width:2px; height:2px; background:var(--faint); flex:none}
.crumb .here{color:var(--fg)}
/* =======================================================================
24. PAGE EXPÉRIENCE — en-tête produit
======================================================================= */
.pdp-head{padding-block:clamp(48px,6vw,88px) clamp(34px,4vw,54px)}
.pdp-kicker{
font-size:11px; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
color:var(--accent); margin-bottom:20px;
}
.pdp-h1{
font-family:var(--display); font-weight:400;
font-size:clamp(42px,7vw,102px); line-height:.94; letter-spacing:-.036em;
margin-bottom:clamp(22px,2.6vw,32px);
}
.pdp-deck{
font-size:clamp(18px,1.5vw,22px); line-height:1.56; color:var(--muted);
max-width:56ch; text-wrap:pretty;
}
/* rangée méta : cellules fermées, même logique de cadre que .ben-grid */
.pdp-meta{
display:grid; grid-template-columns:repeat(5,1fr); gap:0;
margin-top:clamp(38px,4.4vw,60px);
border-top:1px solid var(--fg);
border-inline-start:1px solid var(--hair);
border-bottom:1px solid var(--hair);
}
.pdp-meta > div{
padding:clamp(20px,2vw,26px) clamp(16px,1.6vw,24px);
border-inline-end:1px solid var(--hair);
}
.pdp-meta dt, .pdp-meta .meta{margin-bottom:10px}
.pdp-meta dd, .pdp-meta .val{
margin:0; font-family:var(--display); font-size:clamp(18px,1.5vw,21px);
font-weight:500; line-height:1.2; letter-spacing:-.012em;
font-variant-numeric:lining-nums tabular-nums;
}
.pdp-meta .is-price dd, .pdp-meta .is-price .val{color:var(--accent)}
/* image d'ouverture */
.lead{padding-inline:var(--pad); margin:0}
.lead .ph{aspect-ratio:21/9; max-width:1600px; margin-inline:auto}
.lead figcaption{
max-width:1600px; margin:12px auto 0;
display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
/* =======================================================================
25. PAGE EXPÉRIENCE — intro
======================================================================= */
.intro{padding-block:clamp(56px,7vw,110px)}
.intro-grid{display:grid; grid-template-columns:auto 1fr; gap:clamp(30px,6vw,110px); align-items:start}
.intro-grid h2{white-space:nowrap}
.intro p{font-size:clamp(17px,1.3vw,19px); line-height:1.7; color:var(--muted); max-width:62ch}
.intro p + p{margin-top:1.2em}
.intro p strong{font-weight:400; color:var(--fg)}
/* =======================================================================
26. PAGE EXPÉRIENCE — colonne contenu + colonne réservation collante
======================================================================= */
.split{
display:grid; grid-template-columns:1fr 372px;
gap:clamp(40px,5vw,88px); align-items:start;
padding-bottom:var(--s-lg);
}
.pdp-aside{position:sticky; top:100px}
/* ---- carte de réservation ---------------------------------------------
Colonne flex plafonnée à la fenêtre : total, CTA et réassurance sont
épinglés, seule la zone des étapes défile. À plat la carte faisait ~900px,
et dans une colonne collante le CTA restait sous la ligne de flottaison
sans pouvoir être atteint. L'accordéon garde une étape ouverte à la fois ;
le plafond est la garantie pour les fenêtres courtes. Les deux portent.
----------------------------------------------------------------------- */
.book{
border:1px solid var(--fg); background:var(--surface);
display:flex; flex-direction:column;
max-height:calc(100svh - 116px);
}
/* Pas d'en-tête de prix : 1 000 € figure déjà dans la rangée méta de la page
et dans le Total épinglé plus bas. Le répéter coûtait 132px de chrome fixe,
pris directement sur le budget de la zone des étapes. */
.book-label{display:block; margin-bottom:14px}
/* ---- l'étape « vous », en mode demande ----------------------------------
Même trait que les formulaires du site — un filet sous le champ, pas une
boîte : le panneau est déjà cloisonné par ses étapes, une seconde bordure
par champ le ferait ressembler à un tunnel d'achat, ce qu'il n'est plus.
------------------------------------------------------------------------- */
.book-in{
width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair);
padding:11px 0; margin-bottom:22px; font-size:15.5px; outline:0; border-radius:0;
transition:border-color .35s var(--ease);
}
.book-in:focus{border-bottom-color:var(--accent)}
.book-in:last-of-type{margin-bottom:16px}
textarea.book-in{resize:vertical; min-height:72px; line-height:1.6}
/* La demande est partie : il ne reste que le message. Les étapes et le pavé
de prix s'en vont ensemble — un prix seul, sous un bouton disparu, n'est
plus qu'un chiffre qui traîne. */
.book.is-sent .book-steps,
.book.is-sent .book-close{display:none}
/* Le message de retour est une phrase adressée à quelqu'un, pas un libellé :
il quitte la casse et l'interlettrage des méta que `.oma-ok` hérite des
quatre autres formulaires. */
.book .oma-ok{
margin:0; padding:22px; font-size:15px; line-height:1.55;
text-transform:none; letter-spacing:.005em;
}
/* ---- messages du panier -------------------------------------------------
`flex:none` : le message ne défile pas avec les étapes. Il annonce que la
réservation a échoué, il doit rester lisible pendant qu'on en choisit une
autre. Il prend sa place sur le budget de hauteur de la zone d'étapes, ce
qui est le bon arbitrage pour un état transitoire.
------------------------------------------------------------------------- */
.book-notices{flex:none; padding:16px 22px; border-bottom:1px solid var(--fg)}
.book-notices ul{margin:0; padding:0; list-style:none}
.book-notices li{font-size:13px; line-height:1.5}
.book-notices li + li{margin-top:8px}
.book-notices .woocommerce-error li,
.book-notices li.woocommerce-error{color:var(--accent)}
.book-notices a{color:inherit}
/* ---- étapes en accordéon ----------------------------------------------
Une barre de défilement filaire visible plutôt que celle en surimpression
de macOS : quand la coupe tombe dans une rangée repliée, seul son padding
dépasse, et la rangée partielle seule n'est pas un repère lisible.
----------------------------------------------------------------------- */
.book-steps{
flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
scrollbar-width:thin; scrollbar-color:var(--hair) transparent;
}
.book-steps::-webkit-scrollbar{width:4px}
.book-steps::-webkit-scrollbar-track{background:transparent}
.book-steps::-webkit-scrollbar-thumb{background:var(--hair)}
.book-steps:hover::-webkit-scrollbar-thumb{background:var(--faint)}
.stepb{border-bottom:1px solid var(--hair)}
.stepb-h{
width:100%; background:none; border:0; cursor:pointer; text-align:start;
display:grid; grid-template-columns:24px 1fr auto 11px; align-items:center;
gap:12px; padding:14px clamp(20px,1.8vw,26px);
transition:background .3s var(--ease);
}
.stepb-h:hover{background:var(--bg)}
/* Sans, pas serif : le zéro italique de Cormorant est un chiffre elzévirien
qui rend « ()1 » à cette taille. `lining-nums` ne le sauve pas — la famille
n'a pas de fonctionnalité lnum vers laquelle basculer. */
.stepb-n{
font-family:var(--sans); font-weight:500; font-size:11px;
line-height:1; letter-spacing:.08em; color:var(--accent-lo);
font-variant-numeric:tabular-nums; transition:color .3s var(--ease);
}
.stepb[data-open="true"] .stepb-n{color:var(--accent)}
.stepb-l{
font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
color:var(--faint); transition:color .3s var(--ease);
}
.stepb[data-open="true"] .stepb-l{color:var(--fg)}
.stepb-v{
font-family:var(--display); font-size:16px; font-weight:500; line-height:1.2; letter-spacing:-.01em;
color:var(--fg); text-align:end; font-variant-numeric:lining-nums tabular-nums;
}
.stepb-v.is-empty{color:var(--faint); font-style:italic}
.stepb[data-open="true"] .stepb-v{opacity:0; pointer-events:none}
.stepb-c{
width:9px; height:9px; justify-self:end;
border-inline-end:1px solid var(--accent); border-bottom:1px solid var(--accent);
transform:rotate(45deg) translate(-2px,-2px);
transition:transform .35s var(--ease);
}
.stepb[data-open="true"] .stepb-c{transform:rotate(-135deg) translate(-2px,-2px)}
/* 0fr → 1fr anime le repli sans mesurer de hauteur en JS */
.stepb-p{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease)}
.stepb[data-open="true"] .stepb-p{grid-template-rows:1fr}
.stepb-p > div{overflow:hidden}
.stepb-in{padding:2px clamp(20px,1.8vw,26px) clamp(16px,1.4vw,20px)}
/* calendrier */
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.cal-month{font-family:var(--display); font-size:19px; font-weight:500; letter-spacing:-.012em}
.cal-btn{
background:none; border:1px solid var(--hair); width:30px; height:30px;
display:grid; place-items:center; cursor:pointer; color:var(--fg);
transition:border-color .3s var(--ease), color .3s var(--ease);
}
.cal-btn:hover:not([disabled]){border-color:var(--accent); color:var(--accent)}
.cal-btn[disabled]{opacity:.28; cursor:not-allowed}
.cal-dow,.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-dow{margin-bottom:6px}
.cal-dow span{
text-align:center; font-size:9.5px; font-weight:500; letter-spacing:.1em;
text-transform:uppercase; color:var(--faint); padding-block:4px;
}
/* hauteur de rangée fixe plutôt qu'aspect-ratio : une cellule carrée dans une
colonne de 320px donne un mois de 270px de haut, soit l'essentiel du budget
de l'étape ouverte */
.cal-grid button, .cal-grid span{
height:34px; display:grid; place-items:center;
font-size:13.5px; font-variant-numeric:tabular-nums lining-nums;
border:1px solid transparent; background:none; padding:0;
}
.cal-grid .is-open{
border-color:var(--hair); color:var(--fg); cursor:pointer;
transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.cal-grid .is-open:hover{border-color:var(--fg)}
.cal-grid .is-open[aria-pressed="true"]{background:var(--fg); border-color:var(--fg); color:var(--bg)}
.cal-grid .is-off{color:oklch(78% 0.014 260)}
/* créneaux + sélecteurs */
.book-field{margin-top:22px; padding-top:20px; border-top:1px solid var(--hair-soft)}
.slots{display:flex; gap:10px; flex-wrap:wrap}
.slot{
flex:1; min-width:110px; padding:13px 10px; text-align:center; cursor:pointer;
border:1px solid var(--hair); background:none;
font-size:13.5px; font-variant-numeric:tabular-nums;
transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.slot:hover{border-color:var(--fg)}
.slot[aria-pressed="true"]{background:var(--fg); border-color:var(--fg); color:var(--bg)}
.slot small{display:block; margin-top:5px; font-size:9.5px; letter-spacing:.1em;
text-transform:uppercase; opacity:.62}
.book-empty{font-size:13.5px; color:var(--faint); line-height:1.5}
.sel{position:relative}
.sel select{
width:100%; appearance:none; background:transparent; border:0;
border-bottom:1px solid var(--hair); padding:11px 26px 11px 0;
font-size:15.5px; cursor:pointer; outline:0; border-radius:0;
transition:border-color .3s var(--ease);
}
.sel select:focus{border-bottom-color:var(--accent)}
.sel::after{
content:""; position:absolute; inset-inline-end:4px; top:20px;
width:7px; height:7px; border-inline-end:1px solid var(--faint);
border-bottom:1px solid var(--faint); transform:rotate(45deg); pointer-events:none;
}
.book-note{margin-top:9px; font-size:12px; color:var(--faint); line-height:1.5}
/* clôture épinglée : ne défile jamais, le CTA reste toujours à l'écran */
.book-close{
flex:none; padding:clamp(14px,1.3vw,18px) clamp(20px,1.8vw,26px);
border-top:1px solid var(--fg); background:var(--surface); position:relative;
}
/* Fondu sur la zone des étapes quand du contenu reste sous la coupe. Délibérément
jamais opaque : à 100% il effaçait la rangée partielle en dessous et la coupe
se lisait comme du vide plutôt que comme « il y a la suite ». */
.book-close::before{
content:""; position:absolute; inset-inline:0; bottom:100%; height:26px;
background:linear-gradient(to top,
color-mix(in oklch, var(--surface) 78%, transparent), transparent);
opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.book.can-scroll .book-close::before{opacity:1}
.book-total{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.book-total b{
font-family:var(--display); font-weight:500; font-size:27px; letter-spacing:-.018em;
font-variant-numeric:lining-nums tabular-nums;
}
.book-flat{margin-top:6px; font-size:12px; line-height:1.45; color:var(--muted)}
.book-summary{margin-top:8px; font-size:12px; line-height:1.45; color:var(--accent)}
.book-summary:empty{display:none}
.book-cta{margin-top:14px}
.book-cta[disabled]{opacity:.42; cursor:not-allowed}
.book-cta[disabled]:hover{background:var(--fg); border-color:var(--fg); color:var(--bg)}
.book-foot{
flex:none; padding:13px clamp(20px,1.8vw,26px); border-top:1px solid var(--hair);
font-size:11.5px; line-height:1.5; color:var(--faint);
}
.book-foot b{color:var(--accent); font-weight:500}
.book-foot a{text-decoration:underline}
/* =======================================================================
27. PAGE EXPÉRIENCE — itinéraire
======================================================================= */
.block{padding-block:clamp(20px,2vw,28px) clamp(56px,6vw,96px)}
.block-head{margin-bottom:clamp(34px,4vw,54px)}
.block-head .eyebrow{margin-bottom:22px}
.block-note{
margin-top:22px; padding-inline-start:18px; border-inline-start:1px solid var(--accent);
font-size:14px; line-height:1.6; color:var(--muted); max-width:56ch;
}
.block-note.is-soft{border-inline-start-color:var(--hair)}
.stops{border-top:1px solid var(--fg)}
.stop{
display:grid; grid-template-columns:64px 96px 1fr; gap:clamp(14px,2vw,32px);
padding-block:clamp(24px,2.6vw,34px); border-bottom:1px solid var(--hair);
align-items:start;
}
.stop-n{
font-family:var(--serif); font-style:italic; font-weight:400; font-size:28px;
line-height:1; color:var(--accent-lo); font-variant-numeric:lining-nums tabular-nums;
}
.stop-t{padding-top:8px}
.stop h3{
font-family:var(--display); font-weight:400; font-size:clamp(20px,1.8vw,26px);
line-height:1.14; letter-spacing:-.018em; margin-bottom:10px;
}
.stop h3 span, .stop-label{
display:block; font-family:var(--sans); font-size:10.5px; font-weight:500;
letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:9px;
}
.stop p{color:var(--muted); font-size:15.5px; line-height:1.65; max-width:60ch; text-wrap:pretty}
/* =======================================================================
28. PAGE EXPÉRIENCE — galerie
La visionneuse est celle de core/image (lightbox natif), pas de JS maison.
======================================================================= */
.gal.wp-block-gallery{
display:grid; grid-template-columns:repeat(6,1fr);
grid-auto-rows:clamp(150px,15vw,220px); gap:clamp(12px,1.4vw,20px);
}
.gal.wp-block-gallery figure.wp-block-image{
display:flex; flex-direction:column; grid-column:span 2; width:auto; margin:0;
}
/* Ces trois-là doivent battre la règle de base ci-dessus en spécificité,
sinon le `span 2` par défaut l'emporte et la grille se pave en quatre
cellules identiques. Les spans doivent totaliser 6 par rangée, faute de
quoi la grille laisse un trou. */
.gal.wp-block-gallery figure.wp-block-image.is-wide{grid-column:span 4; grid-row:span 2}
.gal.wp-block-gallery figure.wp-block-image.is-tall{grid-column:span 2; grid-row:span 2}
.gal.wp-block-gallery figure.wp-block-image.is-half{grid-column:span 3}
.gal figure > a, .gal figure > img{flex:1; min-height:0; display:block; overflow:hidden}
.gal figure img{width:100%; height:100%; object-fit:cover;
filter:contrast(1.03);
transition:transform 1.4s var(--ease)}
.gal figure:hover img{transform:scale(1.045)}
/* Les rangées sont de hauteur fixe et l'image est flex:1, donc une légende qui
passe à deux lignes vole de la hauteur à son image et casse le bas de rangée.
On réserve deux lignes pour chaque légende : les images restent alignées, les
légendes posent sur une ligne de base commune. */
/* Le bloc galerie du core pose ses légendes en surimpression sur l'image,
en blanc sur un dégradé. Le design les veut sous l'image, en petites
capitales. Sa règle pèse (0,3,2) : on la bat en accrochant .wp-element-caption. */
.gal.wp-block-gallery.has-nested-images figure.wp-block-image figcaption.wp-element-caption{
margin:10px 0 0; flex:none; min-height:2.5em; line-height:1.25;
font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.16em;
text-transform:uppercase; color:var(--faint); text-align:start;
background:none; position:static; padding:0; max-height:none; overflow:visible;
text-shadow:none; box-sizing:border-box; width:100%;
}
/* =======================================================================
29. PAGE EXPÉRIENCE — un mot de Caroline
======================================================================= */
.word{
border-top:1px solid var(--fg); border-bottom:1px solid var(--hair);
padding-block:clamp(38px,4.4vw,58px);
display:grid; grid-template-columns:150px 1fr; gap:clamp(24px,3vw,44px); align-items:start;
}
/* Buste, pas la silhouette entière. L'accueil porte le portrait complet ; ici
c'est une signature à côté d'une citation, et à taille de vignette le cadre
entier laisse le visage illisible. Recadrer règle aussi la résolution :
1,3× d'une source de 400px pose ~310 pixels source sur 150 px CSS, donc ce
bloc reste net sur un écran 2× là où le portrait de l'accueil ne l'est pas. */
.word .ph{aspect-ratio:4/5}
.word .ph img{object-position:50% 0; transform:scale(1.3); transform-origin:50% 14%}
.word-q{
font-family:var(--serif); font-weight:400; font-style:italic;
font-size:clamp(22px,2.3vw,31px); line-height:1.24; letter-spacing:-.01em;
margin-bottom:22px; text-wrap:balance;
}
.word p{color:var(--muted); font-size:15.5px; line-height:1.66; max-width:58ch}
.word-sig{margin-top:20px}
/* =======================================================================
30. PAGE EXPÉRIENCE — FAQ (blocs core/details natifs)
======================================================================= */
.faq{border-top:1px solid var(--fg)}
.faq details, .faq .wp-block-details{border-bottom:1px solid var(--hair); margin:0}
.faq summary{
list-style:none; cursor:pointer; padding-block:22px;
display:flex; align-items:baseline; justify-content:space-between; gap:20px;
font-family:var(--display); font-size:clamp(18px,1.6vw,22px); font-weight:500;
letter-spacing:-.014em; transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
content:""; flex:none; width:11px; height:11px; margin-top:8px;
border-inline-end:1px solid var(--accent); border-bottom:1px solid var(--accent);
transform:rotate(45deg); transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a, .faq details > p:not(:first-child){
padding-bottom:26px; color:var(--muted); font-size:15.5px; line-height:1.66; max-width:62ch;
}
/* =======================================================================
31. PAGE EXPÉRIENCE — autres expériences + barre mobile
======================================================================= */
.others{padding-block:var(--s-lg); background:var(--bg-deep); border-block:1px solid var(--hair)}
.bar{
display:none; position:fixed; inset-inline:0; inset-block-end:0; z-index:70;
background:oklch(96.1% 0.005 95 / .97); backdrop-filter:blur(14px);
border-top:1px solid var(--fg); padding:12px var(--pad);
align-items:center; justify-content:space-between; gap:16px;
}
.bar-price{font-family:var(--display); font-size:23px; font-weight:400; line-height:1.1;
font-variant-numeric:lining-nums tabular-nums}
.bar-price small{display:block; font-family:var(--sans); font-size:10px; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:3px}
.bar .btn{padding:14px 22px; font-size:11px; letter-spacing:.12em}
/* =======================================================================
32. RESPONSIVE
======================================================================= */
@media (max-width:1180px){
.split{grid-template-columns:1fr 330px; gap:clamp(32px,3.4vw,52px)}
}
@media (max-width:1080px){
.grid-4{grid-template-columns:repeat(2,1fr)}
.ben-grid{grid-template-columns:repeat(2,1fr)}
.ben{border-bottom:1px solid var(--hair)}
.ben:nth-last-child(-n+2){border-bottom:0} /* c'est la grille qui trace ce bord */
}
@media (max-width:1000px){
.adv-head{grid-template-columns:1fr; gap:clamp(20px,3vw,32px)}
.adv-aside{justify-items:stretch}
.split{grid-template-columns:1fr}
.pdp-aside{position:static; order:-1; max-width:520px}
/* la carte n'est plus collante : le défilement de page atteint le CTA tout
seul. La plafonner ici imbriquerait une zone de défilement dans la page. */
.book{max-height:none}
.book-steps{overflow:visible}
.book-close::before{display:none}
/* la hauteur de cellule du bureau existe pour tenir dans une colonne
collante ; au tactile c'est le minimum de 44px qui l'emporte */
.cal-grid button, .cal-grid span{height:44px}
.pdp-meta{grid-template-columns:repeat(2,1fr)}
.pdp-meta > div{border-bottom:1px solid var(--hair)}
.pdp-meta > div:nth-last-child(-n+1){border-bottom:0}
/* 2 par rangée, la troisième carte passe à la ligne. Ne jamais la masquer
pour garder la rangée pleine : cela supprimerait un produit entier pour
tout visiteur en largeur tablette. */
.grid-3{grid-template-columns:repeat(2,1fr)}
}
/* Six entrées et un CTA : le tiroir s'ouvre dès 1200px. Au-dessus, la nav
tenait sur une ligne avec une seule entrée « Experiences » ; les trois
offres du lot 3 la débordent bien avant la largeur tablette. */
@media (max-width:1200px){
.nav-links{
position:fixed; inset-block-start:72px; inset-inline:0;
background:var(--bg); color:var(--fg); flex-direction:column; align-items:stretch;
gap:0; padding:8px var(--pad) 26px; border-bottom:1px solid var(--hair);
transform:translateY(-8px); opacity:0; pointer-events:none;
transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.nav-links.open{opacity:1; transform:none; pointer-events:auto}
.nav-links a{padding-block:16px; border-bottom:1px solid var(--hair-soft); opacity:1}
.nav-links a::after{display:none}
.nav-toggle{display:block}
.nav.menu-open{background:var(--bg); color:var(--fg); border-bottom-color:transparent}
}
@media (max-width:900px){
.foot-page ul{grid-template-columns:1fr}
.pt-head, .pt-partners{grid-template-columns:1fr}
.pt-how{grid-template-columns:1fr; gap:0}
.pt-how > div{border-top:1px solid var(--ink-hair); padding-block:18px}
.pt-how > div:first-child{border-top:0; padding-top:0}
.svc-row{grid-template-columns:repeat(2,1fr)}
.car-points{grid-template-columns:1fr}
.xp-cards{grid-template-columns:1fr}
.xp-where-cols{grid-template-columns:1fr}
.xp-where-cols > :last-child{border-inline-start:0; padding-inline-start:0}
.jr-head{grid-template-columns:1fr}
.jr-grid{grid-template-columns:1fr 1fr}
.jr-card.is-lead{grid-column:span 2; grid-row:auto}
.jr-list{grid-template-columns:1fr}
.jr-show{grid-template-columns:1fr auto; row-gap:4px}
.jr-what{grid-column:1 / -1}
.pod{flex-direction:column; align-items:stretch; gap:18px}
.pod-cover{width:auto; height:180px; --logo-h:34px}
.pod-where{display:none}
.adv-cards{grid-template-columns:1fr}
.bar{display:flex}
body.has-book-bar{padding-bottom:78px}
.intro-grid{grid-template-columns:1fr; gap:26px}
.lead .ph{aspect-ratio:3/2}
.gal.wp-block-gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(150px,32vw,230px)}
.gal.wp-block-gallery figure.wp-block-image,
.gal.wp-block-gallery figure.wp-block-image.is-wide,
.gal.wp-block-gallery figure.wp-block-image.is-tall,
.gal.wp-block-gallery figure.wp-block-image.is-half{grid-column:span 1; grid-row:span 1}
.word{grid-template-columns:1fr}
.word .ph{max-width:170px}
.car-grid{grid-template-columns:1fr; gap:clamp(30px,5vw,48px)}
.car-photo{max-width:400px}
.hot-grid, .news-grid, .form-split{grid-template-columns:1fr}
.grid-2{grid-template-columns:1fr}
.steps{grid-template-columns:1fr; gap:0}
.step{padding-block:30px 34px}
.step + .step{border-top:1px solid var(--hair)}
.cards-3{grid-template-columns:1fr; gap:0}
.profile{border-top:0; padding-block:30px}
.profile + .profile{border-top:1px solid var(--hair)}
.profile .ph{aspect-ratio:16/9}
/* Une carte pleine plus l'amorce de la suivante : l'amorce est ce qui
apprend au pouce qu'il peut glisser. */
.testi-stage{grid-template-columns:1fr; gap:6px}
.testi-mark{font-size:70px}
.testi-foot{flex-wrap:wrap}
.mo-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(150px,33vw,230px)}
.mo, .mo.feature, .mo.half{grid-column:span 1; grid-row:span 1}
.foot-top{grid-template-columns:1fr 1fr}
.sec-head-split{grid-template-columns:1fr; align-items:start}
}
@media (max-width:640px){
body{font-size:16px}
/* En mobile la maquette sépare ce que le bureau superpose : la photo prend
le haut, le texte se pose sur l'encre en dessous. Même markup, deux
mises en page. */
.hero{display:block; min-height:0; overflow:visible}
.hero-bg{position:static; aspect-ratio:4/3}
.hero-bg img{height:100%; transform:none; animation:none}
.hero::after{display:none}
.hero-inner{background:var(--ink); padding-block:clamp(32px,8vw,44px)}
.hero-h{margin-bottom:20px}
.hero-eyebrow{font-size:10px; letter-spacing:.15em}
.hero-eyebrow::before{width:20px}
/* Un bouton pleine largeur, le lien centré dessous. */
.hero-actions{display:grid; justify-items:center; gap:18px}
.hero-actions .wp-block-buttons{width:100%}
.fgrid .f-half, .fgrid .f-third{grid-column:1/-1}
.svc-row{grid-template-columns:1fr}
/* Les trois expériences défilent à l'horizontale, comme la maquette mobile :
on garde la grille, on la fait couler en colonnes et on la laisse déborder
jusqu'aux bords de l'écran. */
.xp-cards{
grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%;
overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad);
}
.xp-cards::-webkit-scrollbar{display:none}
.xp-card{scroll-snap-align:start}
/* Les appels à l'action prennent la largeur, 52px de haut. */
.hero-actions .wp-block-buttons, .pt-intro .wp-block-buttons,
.adv-aside .wp-block-buttons, .form-actions{width:100%}
.hero-actions .btn, .pt-intro .btn, .adv-aside .btn, .form-actions .btn{
width:100%; justify-content:center; min-height:52px;
}
.form-actions{display:grid; justify-items:center; gap:14px; text-align:center}
.form-actions .meta{max-width:none}
.news-panel .field{flex-wrap:wrap}
.news-panel .field input, .news-panel .field button{width:100%; justify-content:center}
.why-grid{grid-template-columns:1fr}
.why-col:first-child{
padding-inline-end:0; border-inline-end:0;
border-bottom:1px solid var(--hair); padding-bottom:clamp(30px,5vw,44px);
}
.why-col:last-child{padding-inline-start:0}
.ben-grid{grid-template-columns:1fr}
.ben:nth-last-child(-n+2){border-bottom:1px solid var(--hair)}
.ben:last-child{border-bottom:0}
.grid-4{grid-template-columns:1fr}
.xp .ph{aspect-ratio:16/11}
.fgrid{grid-template-columns:1fr}
.foot-top{grid-template-columns:1fr; gap:34px}
.pdp-meta{grid-template-columns:1fr}
.pdp-meta > div{border-bottom:1px solid var(--hair)}
.pdp-meta > div:last-child{border-bottom:0}
.stop{grid-template-columns:44px 1fr; gap:14px}
.stop-t{grid-column:2; padding-top:0; margin-bottom:8px}
.stop-body{grid-column:2}
.grid-3{grid-template-columns:1fr}
.lead .ph{aspect-ratio:4/3}
}
/* =======================================================================
33. MOUVEMENT / IMPRESSION / FOCUS
======================================================================= */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms !important; animation-delay:0ms !important;
transition-duration:.001ms !important}
.oma-js .ln > span{transform:none}
.oma-js .hero .fx{opacity:1; transform:none}
.oma-js .rv{opacity:1; transform:none}
.hero-bg img{transform:none}
}
@media print{
.nav,.hero-cue,.bar,.pdp-aside{display:none}
.rv{opacity:1; transform:none}
.split{grid-template-columns:1fr}
body{background:#fff; padding-bottom:0}
}
:where(a,button,input,textarea,select,summary):focus-visible{
outline:2px solid var(--accent); outline-offset:3px;
}
.screen-reader-text{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}