/* Chaque section prend 100% de la largeur de son conteneur Elementor. Pour un rendu bord à bord (le style prévu pour ce site), règle Content Width sur "Full Width" et Padding sur 0 dans les paramètres de la Section Elementor qui héberge chaque widget — voir la notice affichée dans le panneau de chaque widget. (Une version précédente forçait 100vw avec des marges négatives ; ce calcul suppose que la section est déjà pleine largeur, et produit l'effet inverse — décaler toute la section hors champ, donnant l'impression qu'elle est vide — quand ce n'est pas encore le cas, typiquement dans l'éditeur Elementor avant d'avoir réglé Full Width.) */ .masthead,.hero,.style,.work,.shop,.booking,.foot,.twitch,.contact-block{ width:100%; } :root{ --head-h:66px; --ink:#0A0A0B; --night:#121014; --gold:#C6A664; --gold-bright:#E0C489; --gold-line:rgba(198,166,100,.3); --bone:#EDE4D6; --bone-dim:rgba(237,228,214,.62); --pad:clamp(1.25rem,5vw,5rem); /* couleurs fixes pour le texte posé sur une photo assombrie (hero mobile) : n'évoluent pas avec le mode clair/sombre, puisque le fond y est toujours sombre */ --on-photo:#F3ECE0; --on-photo-dim:rgba(243,236,224,.82); --on-photo-gold:#E7C88F; color-scheme:dark; } html[data-theme="light"]{ --ink:#F6F1E7; --night:#EEE6D6; --gold:#9C7A3C; --gold-bright:#7C602C; --gold-line:rgba(156,122,60,.32); --bone:#241F17; --bone-dim:rgba(36,31,23,.66); color-scheme:light; } html[data-theme="light"] .masthead{background-color:var(--ink)} html[data-theme="light"] .masthead{background:rgba(246,241,231,.92)} html[data-theme="light"] .btn--filled{color:var(--night)} html[data-theme="light"] .card__media,html[data-theme="light"] .portrait{background:var(--night)} html{transition:background-color .35s ease} body,.masthead,.style,.work,.shop,.booking,.foot{transition:background-color .35s ease,color .35s ease} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* overflow-x:clip plutôt que hidden : "hidden" transforme silencieusement l'élément en conteneur de scroll (le navigateur force overflow-y:auto en miroir), ce qui casse position:sticky de façon imprévisible selon les navigateurs. "clip" empêche le débordement horizontal sans ce piège. */ html{overflow-x:clip} body{ margin:0;overflow-x:clip; background:var(--ink); color:var(--bone); font-family:"EB Garamond",Georgia,serif; font-weight:400; font-size:clamp(1.05rem,.55vw + .95rem,1.2rem); line-height:1.7; -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%} a{color:inherit} /* ---------- primitives ---------- */ .wrap{max-width:1400px;margin:0 auto;padding-inline:var(--pad)} .label{ font-family:"Josefin Sans",sans-serif;font-weight:500;font-size:1rem; letter-spacing:0;text-transform:uppercase;color:var(--gold); margin:0;line-height:1.6; } .title{ font-family:"Playfair Display",serif;font-weight:400;letter-spacing:.02em; line-height:1.08;text-transform:uppercase;margin:0; } .title--xl{font-size:clamp(2.1rem,6.5vw,5rem)} .title--l{font-size:clamp(1.7rem,4vw,3.1rem)} .lede{font-size:clamp(1.1rem,1vw + .95rem,1.45rem);line-height:1.55;max-width:38ch;margin:0} .prose{max-width:54ch} .prose p{margin:0 0 1.15em} .prose em{font-style:italic;color:var(--gold-bright)} /* filet + sceau : un mandala de Dino posé sur la ligne, qui se trace au scroll */ .rule{display:flex;align-items:center;justify-content:center;gap:1.1rem;width:min(300px,70%);margin-inline:auto} .rule::before,.rule::after{ content:"";flex:1;height:1px; background:linear-gradient(to right,transparent,var(--gold-line),transparent); } .rule img,.rule__mark{width:46px;height:46px;opacity:.85;animation:spin 90s linear infinite} @keyframes spin{to{rotate:360deg}} @keyframes dve-mark-pulse{0%,100%{scale:1;opacity:.85}50%{scale:1.08;opacity:1}} /* dans une section qui apparaît au scroll, le filet se trace au lieu de surgir */ .reveal .rule::before,.reveal .rule::after{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)} .reveal .rule::before{transform-origin:right center} .reveal .rule::after{transform-origin:left center;transition-delay:.12s} .reveal.is-in .rule::before,.reveal.is-in .rule::after{transform:scaleX(1)} .reveal .rule img,.reveal .rule__mark{ opacity:0;transform:scale(.4) rotate(-40deg); transition:opacity .6s ease .3s,transform .7s cubic-bezier(.2,.7,.2,1) .3s; } .reveal.is-in .rule img,.reveal.is-in .rule__mark{opacity:.85;transform:none;animation:spin 90s linear infinite} .btn{ display:inline-block;font-family:"Cinzel",serif;font-weight:600;font-size:.72rem; letter-spacing:.24em;text-transform:uppercase;text-decoration:none; padding:1.05rem 2rem;border:1px solid var(--gold);color:var(--gold); background:transparent;transition:background .3s ease,color .3s ease; } .btn:hover{background:var(--gold);color:var(--ink)} .btn--filled{background:var(--gold);color:var(--ink)} .btn--filled:hover{background:transparent;color:var(--gold)} :focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* décor : les dessins de Dino en fond, débordant hors cadre */ .decor{ position:absolute;pointer-events:none;user-select:none;z-index:0; will-change:transform;transition:transform .1s linear; } /* Bouquets de fond pour Travaux, Boutique, Twitch et Contact : deux fleurs fines plutôt qu'un seul motif, pour un fond plus fourni sans devenir lourd. Toujours discret (10-16% d'opacité) et hors du champ de lecture. Sur mobile, l'accent secondaire disparaît pour ne pas surcharger un écran étroit — seule la fleur principale, réduite, subsiste. */ #travaux .decor-cluster__a{ right:-9%;top:2%;width:min(360px,46%);opacity:.15; rotate:6deg; } #travaux .decor-cluster__b{ left:-6%;bottom:4%;width:min(190px,26%);opacity:.11; rotate:-10deg; } #boutique .decor-cluster__a{ left:-8%;bottom:0;width:min(370px,48%);opacity:.15; rotate:-5deg; } #boutique .decor-cluster__b{ right:-5%;top:4%;width:min(180px,24%);opacity:.1; rotate:12deg; } #twitch .decor-cluster__a{ right:-10%;top:4%;width:min(320px,44%);opacity:.14; rotate:-4deg; } #twitch .decor-cluster__b{ left:-6%;bottom:6%;width:min(170px,24%);opacity:.11; rotate:8deg; } #contact .decor-cluster__a{ left:-7%;top:0;right:auto;bottom:auto;translate:none; width:min(320px,44%);opacity:.13;rotate:-6deg; } #contact .decor-cluster__b{ right:-6%;bottom:2%;left:auto;top:auto;translate:none; width:min(200px,28%);opacity:.11;rotate:9deg; } /* mode clair : le doré assourdi (--gold plus sombre pour rester lisible sur fond crème) rend ces mêmes traits beaucoup moins visibles qu'en mode sombre — on relève l'opacité pour retrouver un contraste comparable. Sélecteurs aussi spécifiques que ceux qu'ils corrigent (mêmes ID), sinon les règles ci-dessus l'emportent quel que soit l'ordre. */ html[data-theme="light"] .hero .decor{opacity:.32} html[data-theme="light"] .style .decor{opacity:.26} html[data-theme="light"] .booking .decor{opacity:.28} html[data-theme="light"] #travaux .decor-cluster__a{opacity:.28} html[data-theme="light"] #travaux .decor-cluster__b{opacity:.2} html[data-theme="light"] #boutique .decor-cluster__a{opacity:.28} html[data-theme="light"] #boutique .decor-cluster__b{opacity:.18} html[data-theme="light"] #twitch .decor-cluster__a{opacity:.26} html[data-theme="light"] #twitch .decor-cluster__b{opacity:.2} html[data-theme="light"] #contact .decor-cluster__a{opacity:.24} html[data-theme="light"] #contact .decor-cluster__b{opacity:.2} @media (max-width:700px){ #travaux .decor-cluster__a, #boutique .decor-cluster__a, #twitch .decor-cluster__a, #contact .decor-cluster__a{ width:min(220px,58%); } #travaux .decor-cluster__b, #boutique .decor-cluster__b, #twitch .decor-cluster__b, #contact .decor-cluster__b{ display:none; } } /* ---------- header ---------- */ .masthead{ position:sticky;top:0;z-index:60; background:rgba(10,10,11,.92);backdrop-filter:blur(8px); border-bottom:1px solid var(--gold-line); transition:background-color .35s ease,box-shadow .35s ease; } .masthead.is-scrolled{ background:rgba(10,10,11,.97); box-shadow:0 10px 30px rgba(0,0,0,.35); } html[data-theme="light"] .masthead.is-scrolled{ background:rgba(246,241,231,.97); box-shadow:0 10px 30px rgba(0,0,0,.12); } .masthead__inner{ display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1.5rem; padding-block:.85rem;transition:padding-block .35s ease; max-width:none;padding-inline:clamp(1.25rem,3.5vw,3.25rem); } .masthead.is-scrolled .masthead__inner{padding-block:.55rem} /* la hauteur figée du logo passe par --dve-logo-h (lue par le style inline du logo lui-même) plutôt que par un override direct sur l'img : un override direct ici perdrait contre le !important inline posé exprès pour blinder le logo face au CSS d'un thème — voir dve_get_logo_html(). */ .masthead.is-scrolled .masthead__mark--logo{ height:32px;max-height:32px; --dve-logo-h:32px; } .masthead__progress{ position:absolute;left:0;bottom:-1px;height:1px;width:0%; background:var(--gold);transition:width .1s linear; } .masthead__side{display:flex;align-items:center;gap:1.5rem;min-width:0} .masthead__side--left{justify-self:start} .masthead__side--right{justify-self:end} /* logo centré : hérite de la taille "Identité du site" réglée dans WordPress, simplement contenu dans une hauteur raisonnable pour le header */ /* logo centré : hérite de la taille "Identité du site" réglée dans WordPress. Beaucoup de thèmes ont leurs propres règles CSS pour .custom-logo, avec une spécificité qui peut passer devant les nôtres selon l'ordre de chargement — d'où le !important et le verrou de hauteur sur le conteneur lui-même, pour garantir la taille quoi qu'il arrive. */ .masthead__mark--logo{ display:flex;align-items:center;text-decoration:none;line-height:0; height:40px;max-height:40px;overflow:hidden; } .masthead__mark--logo img, .masthead__mark--logo .custom-logo{ max-height:40px !important;height:auto !important;width:auto !important; display:block; } .masthead__mark-fallback{ font-family:"Cinzel",serif;font-weight:700;font-size:.95rem; letter-spacing:.2em;text-transform:uppercase;color:var(--bone); } .masthead__nav{display:flex;flex-wrap:wrap;row-gap:.35rem;gap:1.4rem;align-items:center;list-style:none;margin:0;padding:0;min-width:0} /* la copie mobile de RDV/langue/switch reste cachée tant qu'on est en largeur desktop — voir @media(max-width:920px) pour son affichage */ .masthead__nav-utils{display:none} /* le bouton RDV est un descendant de .masthead__nav une fois placé dans le tiroir mobile : la règle générale ".masthead__nav a" (couleur, bordure, padding pour les liens du menu) le rattrapait au passage et écrasait son propre style de bouton (texte doré sur fond doré, bordure du bas rendue transparente). On restaure explicitement l'apparence du bouton avec une spécificité suffisante pour gagner. */ .masthead__nav a.masthead__rdv{ color:var(--ink);border:1px solid var(--gold);padding:1.05rem 2rem; font-size:.72rem;letter-spacing:.24em; } .masthead__nav a.masthead__rdv:hover{color:var(--gold);border-color:var(--gold)} .masthead__nav > li{list-style:none} .masthead__nav a{ font-family:"Cinzel",serif;font-weight:600;font-size:.7rem; letter-spacing:.2em;text-transform:uppercase;text-decoration:none; color:var(--gold);padding-block:.35rem;border-bottom:1px solid transparent; transition:color .25s ease,border-color .25s ease; } .masthead__nav a:hover{color:var(--gold-bright);border-bottom-color:var(--gold)} .masthead__nav-placeholder{ font-family:"Cinzel",serif;font-size:.66rem;letter-spacing:.14em; color:var(--bone-dim);opacity:.6;font-style:italic; } .theme-toggle{ display:flex;align-items:center;gap:.65rem;background:none;border:0; cursor:pointer;padding:.4rem 0;color:var(--bone-dim); font-family:"Cinzel",serif;font-weight:600;font-size:.68rem; letter-spacing:.2em;text-transform:uppercase;transition:color .25s ease; } .theme-toggle:hover{color:var(--gold)} .theme-toggle__track{ position:relative;width:38px;height:20px;border:1px solid var(--gold); border-radius:999px;flex:none;transition:background-color .3s ease; } .theme-toggle__thumb{ position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%; background:var(--gold);transition:transform .3s cubic-bezier(.2,.7,.2,1); } .theme-toggle[aria-pressed="true"] .theme-toggle__thumb{transform:translateX(18px)} /* panier WooCommerce */ /* bouton RDV du menu : même style que les boutons du site, mais compact pour tenir dans la barre du header */ .masthead__rdv{ padding:.6rem 1.2rem;font-size:.66rem;letter-spacing:.18em; } /* Sélecteur de langue (TranslatePress ou équivalent) : le widget se pilote en grande partie via ses propres variables CSS plutôt que par une bataille de sélecteurs — on les règle sur nos couleurs et notre typo, il fait le reste. */ .masthead__lang{ display:flex;align-items:center;align-self:center; font-family:"Cinzel",serif;line-height:1; } /* Les variables CSS de TranslatePress sont réaffirmées avec !important directement sur son propre conteneur (pas juste sur notre wrapper) : sa feuille de style redéfinit probablement --text/--bg sur ce même élément, ce qui gagnerait sinon face à une valeur posée plus haut dans l'arbre. On force aussi les couleurs "en dur" en secours, au cas où certaines de ses variantes ne lisent pas toutes ces variables. */ .masthead__lang .trp-shortcode-switcher{ --text:var(--gold) !important;--text-hover:var(--gold-bright) !important; --bg:transparent !important;--bg-hover:transparent !important; --border:var(--gold-line) !important;--border-radius:0 !important; --transition-duration:.25s !important; display:flex !important;align-items:center !important; margin:0 !important;padding:0 !important;line-height:1 !important; color:var(--gold) !important;background:transparent !important; } .masthead__lang .trp-language-item-name{ font-family:"Cinzel",serif !important;font-weight:600 !important;font-size:.68rem !important; letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--gold) !important; } .masthead__lang .trp-flag-image{width:16px;height:auto} .masthead__lang .trp-language-item:hover .trp-language-item-name, .masthead__lang .trp-shortcode-switcher:hover{color:var(--gold-bright) !important} .masthead__lang .trp-language-item__current{opacity:.85} /* copie du bandeau desktop, à droite du panier */ .masthead__lang--bar{margin-left:.25rem} /* copie dans le menu déroulant mobile : voir plus bas */ .masthead__nav-utils .masthead__lang{align-self:flex-start} .masthead__cart{ position:relative;display:flex;align-items:center;justify-content:center; width:34px;height:34px;color:var(--gold);text-decoration:none; transition:color .25s ease; } .masthead__cart:hover{color:var(--gold-bright)} .masthead__cart-icon{width:22px;height:22px} .masthead__cart-count{ position:absolute;top:-4px;right:-6px; min-width:16px;height:16px;padding:0 3px; display:flex;align-items:center;justify-content:center; background:var(--gold);color:var(--ink); font-family:"Cinzel",serif;font-weight:700;font-size:.62rem; border-radius:999px;line-height:1; } .burger{ display:none;flex-direction:column;justify-content:center;gap:6px; width:40px;height:40px;padding:0;background:none;border:0;cursor:pointer; } .burger__bar{display:block;width:26px;height:1px;background:var(--gold);transition:transform .3s ease,opacity .3s ease} /* classes explicites plutôt que :first-of-type/:last-of-type — ces pseudo-classes comptent les par balise, pas par classe, et le span .sr-only placé juste avant (pour les lecteurs d'écran) comptait comme "premier span", laissant la vraie première barre sans transformation du tout (une croix à une seule branche, pas deux). */ .burger[aria-expanded="true"] .burger__bar--top{transform:translateY(3.5px) rotate(45deg)} .burger[aria-expanded="true"] .burger__bar--bottom{transform:translateY(-3.5px) rotate(-45deg)} @media (max-width:920px){ .burger{display:flex} .masthead__side--left{gap:0} .masthead__nav{ position:absolute;left:0;right:0;top:100%; flex-direction:column;align-items:flex-start;gap:0; background:var(--ink);border-bottom:1px solid var(--gold-line); padding:.25rem var(--pad) 1.75rem; } .masthead__nav:not([data-open]){display:none} .masthead__nav a{font-size:.78rem;padding-block:.95rem;display:block} /* sous 920px, langue et switch quittent le bandeau du haut (trop étroit pour les accueillir proprement) et vivent dans le menu déroulant à la place — voir .masthead__nav-utils plus bas. RDV est déjà dans le