/* ===================================================================
MAISON TRESSANE — feuille de style principale
Direction artistique : noir profond, champagne, typographie editoriale.
=================================================================== */
/* -------------------------------------------------
1. Jetons de design (les variables du site)
------------------------------------------------- */
:root {
--noir: #0d0d0f;
--noir-2: #16161a;
--noir-3: #232329;
--champagne: #c6a87c;
/* Assombri pour l’accessibilite : #b08f5f donnait 2,8:1 sur le creme,
loin des 4,5:1 requis pour du petit texte. #846437 passe a 5,05:1 sur
--creme et 4,62:1 sur --creme-2, en gardant la meme famille de teinte. */
--champagne-2: #846437;
--champagne-3: #e6d6ba;
--creme: #faf7f2;
--creme-2: #f2ece2;
--blanc: #ffffff;
--gris: #6f6a64;
--gris-2: #9a948d;
--bordure: rgba(198, 168, 124, .3);
--bordure-2: rgba(13, 13, 15, .1);
--rouge: #a3453b;
--vert: #4a6b52;
--serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
--sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--max: 1320px;
--max-etroit: 820px;
--gouttiere: clamp(20px, 5vw, 56px);
--t: .45s cubic-bezier(.22, .61, .36, 1);
--ombre: 0 18px 50px -22px rgba(13, 13, 15, .35);
--ombre-2: 0 30px 70px -30px rgba(13, 13, 15, .5);
}
/* -------------------------------------------------
2. Base
------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--creme);
color: var(--noir);
font-family: var(--sans);
font-size: 16.5px;
font-weight: 350;
line-height: 1.72;
letter-spacing: .006em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t), opacity var(--t); }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--champagne); color: var(--noir); }
:focus-visible {
outline: 2px solid var(--champagne-2);
outline-offset: 3px;
}
/* -------------------------------------------------
3. Typographie
------------------------------------------------- */
h1, h2, h3, h4, h5 {
font-family: var(--serif);
font-weight: 400;
line-height: 1.1;
letter-spacing: -.015em;
margin: 0 0 .5em;
}
h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
h4 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
.surtitre {
display: block;
font-family: var(--sans);
font-size: .72rem;
font-weight: 500;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--champagne-2);
margin-bottom: 1.4em;
}
.surtitre--clair { color: var(--champagne); }
.chapo {
font-size: clamp(1.02rem, 1.5vw, 1.16rem);
color: var(--gris);
line-height: 1.8;
max-width: 62ch;
}
.italique { font-style: italic; }
/* Liseré décoratif sous les titres de section */
.trait {
width: 54px;
height: 1px;
background: var(--champagne);
margin: 1.6rem 0 0;
}
.trait--centre { margin-left: auto; margin-right: auto; }
/* -------------------------------------------------
4. Structure
------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--gouttiere);
}
.wrap--etroit { max-width: var(--max-etroit); }
.section { padding-block: clamp(64px, 9vw, 130px); }
.section--serre { padding-block: clamp(44px, 6vw, 84px); }
.section--noir { background: var(--noir); color: var(--creme); }
.section--noir h1, .section--noir h2, .section--noir h3 { color: var(--blanc); }
.section--noir .chapo { color: rgba(250, 247, 242, .68); }
.section--creme { background: var(--creme-2); }
.section--blanc { background: var(--blanc); }
.entete-section { margin-bottom: clamp(36px, 5vw, 64px); }
.entete-section--centre { text-align: center; }
.entete-section--centre .chapo { margin-inline: auto; }
.entete-section--ligne {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
/* -------------------------------------------------
5. Boutons
------------------------------------------------- */
.btn {
--bg: var(--noir);
--fg: var(--creme);
--bd: var(--noir);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6em;
padding: 1.02em 2.5em;
background: var(--bg);
color: var(--fg);
border: 1px solid var(--bd);
font-family: var(--sans);
font-size: .76rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color var(--t), border-color var(--t), background-color var(--t);
text-align: center;
}
/* Remplissage qui monte depuis le bas au survol */
.btn::after {
content: '';
position: absolute;
inset: 0;
background: var(--champagne);
transform: translateY(101%);
transition: transform var(--t);
z-index: 0;
}
.btn > * , .btn { position: relative; }
.btn span { position: relative; z-index: 1; }
.btn:hover { color: var(--noir); border-color: var(--champagne); }
.btn:hover::after { transform: translateY(0); }
.btn--or { --bg: var(--champagne); --fg: var(--noir); --bd: var(--champagne); }
.btn--or::after { background: var(--noir); }
.btn--or:hover { color: var(--creme); border-color: var(--noir); }
.btn--vide { --bg: transparent; --fg: var(--noir); --bd: var(--noir); }
.btn--clair { --bg: transparent; --fg: var(--creme); --bd: rgba(250,247,242,.45); }
.btn--clair:hover { color: var(--noir); }
.btn--large { width: 100%; }
.btn--petit { padding: .82em 1.7em; font-size: .7rem; }
/* Lien souligné animé */
.lien-souligne {
display: inline-flex;
align-items: center;
gap: .55em;
font-size: .76rem;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
padding-bottom: .45em;
border-bottom: 1px solid var(--bordure);
transition: border-color var(--t), color var(--t);
white-space: nowrap;
}
.lien-souligne:hover { border-color: var(--champagne); color: var(--champagne-2); }
.lien-souligne .fleche { transition: transform var(--t); }
.lien-souligne:hover .fleche { transform: translateX(5px); }
/* -------------------------------------------------
6. Bandeau d'annonce
------------------------------------------------- */
.annonce {
background: var(--noir);
color: var(--creme);
font-size: .715rem;
letter-spacing: .2em;
text-transform: uppercase;
text-align: center;
padding: 11px var(--gouttiere);
position: relative;
z-index: 60;
}
.annonce__piste {
display: flex;
align-items: center;
justify-content: center;
gap: 2.6em;
flex-wrap: wrap;
}
.annonce__item { display: inline-flex; align-items: center; gap: .6em; opacity: .92; }
.annonce__item svg { width: 14px; height: 14px; stroke: var(--champagne); }
@media (max-width: 780px) {
.annonce__item:not(:first-child) { display: none; }
}
/* -------------------------------------------------
7. En-tete
------------------------------------------------- */
.entete {
position: sticky;
top: 0;
z-index: 50;
background: rgba(250, 247, 242, .9);
backdrop-filter: saturate(150%) blur(14px);
-webkit-backdrop-filter: saturate(150%) blur(14px);
border-bottom: 1px solid var(--bordure-2);
transition: background var(--t), box-shadow var(--t);
}
.entete.is-collee { box-shadow: 0 6px 28px -18px rgba(13,13,15,.5); }
.entete__barre {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
min-height: 84px;
}
.site-logo { display: inline-flex; align-items: center; justify-self: center; }
.site-logo__img { max-height: 54px; width: auto; }
.site-logo__text {
font-family: var(--serif);
font-size: clamp(1.32rem, 2.3vw, 1.85rem);
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
}
/* Navigation principale */
.nav-principale ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
.nav-principale a {
font-size: .755rem;
font-weight: 500;
letter-spacing: .17em;
text-transform: uppercase;
padding: 6px 0;
position: relative;
white-space: nowrap;
}
.nav-principale a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: var(--champagne);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--t);
}
.nav-principale a:hover::after,
.nav-principale .current-menu-item > a::after,
.nav-principale .current_page_item > a::after { transform: scaleX(1); transform-origin: left; }
/* Sous-menus */
.nav-principale li { position: relative; }
.nav-principale .sub-menu {
position: absolute;
top: 100%; left: -22px;
min-width: 244px;
background: var(--blanc);
border: 1px solid var(--bordure);
padding: 14px 0;
display: block;
flex-direction: column;
gap: 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity var(--t), transform var(--t), visibility var(--t);
box-shadow: var(--ombre);
}
.nav-principale li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-principale .sub-menu li { width: 100%; }
.nav-principale .sub-menu a { display: block; padding: 10px 24px; letter-spacing: .12em; }
.nav-principale .sub-menu a::after { display: none; }
.nav-principale .sub-menu a:hover { color: var(--champagne-2); background: var(--creme); }
/* Outils a droite */
.entete__outils {
display: flex;
align-items: center;
justify-content: flex-end;
gap: clamp(12px, 1.6vw, 22px);
}
.icone-btn {
display: inline-flex;
align-items: center;
gap: .5em;
padding: 8px;
position: relative;
line-height: 1;
}
.icone-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.icone-btn:hover { color: var(--champagne-2); }
.icone-btn__label {
font-size: .74rem;
letter-spacing: .14em;
text-transform: uppercase;
}
@media (max-width: 1080px) { .icone-btn__label { display: none; } }
.pastille {
position: absolute;
top: 0; right: 0;
min-width: 18px; height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--champagne);
color: var(--noir);
font-size: .63rem;
font-weight: 600;
letter-spacing: 0;
display: grid;
place-items: center;
line-height: 1;
}
/* Bouton menu mobile */
.burger { display: none; padding: 8px; }
.burger span {
display: block;
width: 24px; height: 1.4px;
background: currentColor;
margin: 5px 0;
transition: transform var(--t), opacity var(--t);
}
.burger.is-ouvert span:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
.burger.is-ouvert span:nth-child(2) { opacity: 0; }
.burger.is-ouvert span:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }
@media (max-width: 1024px) {
.entete__barre { grid-template-columns: auto 1fr auto; min-height: 70px; }
.nav-principale { display: none; }
.burger { display: block; }
.site-logo { justify-self: center; }
}
/* Tiroir mobile */
.tiroir {
position: fixed;
inset: 0;
z-index: 90;
background: var(--noir);
color: var(--creme);
padding: 96px var(--gouttiere) 48px;
transform: translateX(-100%);
transition: transform .55s cubic-bezier(.65,.05,.36,1);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 34px;
}
.tiroir.is-ouvert { transform: translateX(0); }
.tiroir__fermer { position: absolute; top: 26px; right: var(--gouttiere); font-size: 1.9rem; line-height: 1; }
.tiroir ul { list-style: none; margin: 0; padding: 0; }
.tiroir > nav > ul > li { border-bottom: 1px solid rgba(250,247,242,.13); }
.tiroir > nav > ul > li > a {
display: block;
padding: 18px 0;
font-family: var(--serif);
font-size: 1.55rem;
letter-spacing: .02em;
}
.tiroir .sub-menu { padding: 0 0 16px 14px; }
.tiroir .sub-menu a {
display: block;
padding: 7px 0;
font-size: .82rem;
letter-spacing: .13em;
text-transform: uppercase;
color: rgba(250,247,242,.62);
}
.tiroir .sub-menu a:hover { color: var(--champagne); }
.tiroir__pied { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
/* Recherche plein ecran */
.recherche-overlay {
position: fixed;
inset: 0;
z-index: 95;
background: rgba(13,13,15,.97);
display: grid;
place-items: center;
padding: var(--gouttiere);
opacity: 0;
visibility: hidden;
transition: opacity var(--t), visibility var(--t);
}
.recherche-overlay.is-ouvert { opacity: 1; visibility: visible; }
.recherche-overlay form { width: min(720px, 100%); }
.recherche-overlay input[type="search"] {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(250,247,242,.3);
color: var(--creme);
font-family: var(--serif);
font-size: clamp(1.6rem, 4vw, 2.7rem);
padding: .4em 0;
}
.recherche-overlay input::placeholder { color: rgba(250,247,242,.32); }
.recherche-overlay__aide {
margin-top: 22px;
color: rgba(250,247,242,.5);
font-size: .76rem;
letter-spacing: .2em;
text-transform: uppercase;
}
.recherche-overlay__fermer { position: absolute; top: 28px; right: var(--gouttiere); color: var(--creme); font-size: 2rem; line-height: 1; }
/* -------------------------------------------------
8. Hero
------------------------------------------------- */
.hero {
position: relative;
min-height: clamp(560px, 88vh, 920px);
display: grid;
align-items: center;
overflow: hidden;
background: var(--noir);
color: var(--creme);
isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 32%;
}
.hero__voile {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(100deg, rgba(13,13,15,.86) 0%, rgba(13,13,15,.56) 42%, rgba(13,13,15,.24) 72%, rgba(13,13,15,.5) 100%),
linear-gradient(to top, rgba(13,13,15,.6) 0%, transparent 45%);
}
.hero__contenu { max-width: 660px; padding-block: clamp(90px, 14vw, 150px); }
.hero h1 { color: var(--blanc); margin-bottom: .3em; }
.hero h1 em { font-style: italic; color: var(--champagne); }
.hero__chapo {
font-size: clamp(1rem, 1.5vw, 1.14rem);
color: rgba(250,247,242,.8);
max-width: 50ch;
margin-bottom: 2.6em;
line-height: 1.85;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__defiler {
position: absolute;
bottom: 34px; left: 50%;
transform: translateX(-50%);
color: rgba(250,247,242,.6);
font-size: .64rem;
letter-spacing: .3em;
text-transform: uppercase;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.hero__defiler::after {
content: '';
width: 1px; height: 46px;
background: linear-gradient(to bottom, var(--champagne), transparent);
animation: defile 2.4s ease-in-out infinite;
}
@keyframes defile {
0%, 100% { opacity: .3; transform: scaleY(.5); transform-origin: top; }
50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}
@media (max-width: 640px) { .hero__defiler { display: none; } }
/* -------------------------------------------------
9. Bandeau de reassurance
------------------------------------------------- */
.reassurance {
background: var(--blanc);
border-bottom: 1px solid var(--bordure-2);
}
.reassurance__grille {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--bordure-2);
}
.reassurance__item {
background: var(--blanc);
padding: clamp(26px, 3vw, 40px) clamp(16px, 2vw, 28px);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.reassurance__item svg { width: 26px; height: 26px; stroke: var(--champagne-2); fill: none; stroke-width: 1.2; }
.reassurance__titre {
font-size: .76rem;
font-weight: 500;
letter-spacing: .17em;
text-transform: uppercase;
}
.reassurance__texte { font-size: .86rem; color: var(--gris); line-height: 1.6; }
@media (max-width: 900px) { .reassurance__grille { grid-template-columns: repeat(2, 1fr); } }
/* -------------------------------------------------
10. Collections (grille de categories)
------------------------------------------------- */
.collections {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.6vw, 24px);
}
.collections--4 { grid-template-columns: repeat(4, 1fr); }
.collection {
position: relative;
display: block;
overflow: hidden;
background: var(--noir-2);
aspect-ratio: 4 / 5;
isolation: isolate;
}
.collection img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s cubic-bezier(.22,.61,.36,1), filter var(--t);
filter: brightness(.86) saturate(.95);
}
.collection:hover img { transform: scale(1.07); filter: brightness(.72); }
.collection__voile {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(13,13,15,.82) 0%, rgba(13,13,15,.15) 55%, transparent 100%);
}
.collection__texte {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: clamp(20px, 2.6vw, 34px);
color: var(--creme);
}
.collection__nom {
font-family: var(--serif);
font-size: clamp(1.15rem, 1.9vw, 1.6rem);
color: var(--blanc);
margin-bottom: .3em;
line-height: 1.15;
}
.collection__compte {
font-size: .7rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--champagne);
display: flex;
align-items: center;
gap: .6em;
}
.collection__compte .fleche { transition: transform var(--t); }
.collection:hover .collection__compte .fleche { transform: translateX(6px); }
/* Premiere carte en grand format */
.collections .collection--vedette { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 1024px) {
.collections, .collections--4 { grid-template-columns: repeat(2, 1fr); }
.collections .collection--vedette { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
}
@media (max-width: 560px) {
.collections, .collections--4 { grid-template-columns: 1fr; }
.collections .collection--vedette { grid-column: span 1; }
}
/* -------------------------------------------------
11. Bloc editorial (image + texte)
------------------------------------------------- */
.editorial {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(36px, 6vw, 90px);
}
.editorial--inverse .editorial__media { order: 2; }
.editorial__media { position: relative; }
.editorial__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
/* Cadre champagne decale derriere l'image */
.editorial__media::before {
content: '';
position: absolute;
inset: 22px -22px -22px 22px;
border: 1px solid var(--champagne);
z-index: -1;
}
.editorial--inverse .editorial__media::before { inset: 22px 22px -22px -22px; }
.editorial__liste { list-style: none; margin: 2rem 0 2.4rem; padding: 0; display: grid; gap: 14px; }
.editorial__liste li {
display: flex;
gap: 14px;
align-items: flex-start;
font-size: .95rem;
line-height: 1.65;
}
.editorial__liste svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 5px; stroke: var(--champagne-2); fill: none; stroke-width: 1.6; }
@media (max-width: 880px) {
.editorial { grid-template-columns: 1fr; }
.editorial--inverse .editorial__media { order: 0; }
.editorial__media::before { display: none; }
}
/* -------------------------------------------------
12. Chiffres cles
------------------------------------------------- */
.chiffres {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(24px, 3vw, 48px);
text-align: center;
}
.chiffre__valeur {
font-family: var(--serif);
font-size: clamp(2.4rem, 4.4vw, 3.6rem);
color: var(--champagne);
line-height: 1;
margin-bottom: .32em;
}
.chiffre__label {
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(250,247,242,.62);
}
@media (max-width: 700px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }
/* -------------------------------------------------
13. Section video
------------------------------------------------- */
.video-section {
position: relative;
min-height: clamp(420px, 62vh, 700px);
display: grid;
place-items: center;
overflow: hidden;
background: var(--noir);
text-align: center;
color: var(--creme);
isolation: isolate;
}
.video-section__media { position: absolute; inset: 0; z-index: -2; }
.video-section__media video, .video-section__media img { width: 100%; height: 100%; object-fit: cover; }
.video-section__voile { position: absolute; inset: 0; z-index: -1; background: rgba(13,13,15,.6); }
.video-section__contenu { max-width: 680px; padding: clamp(56px, 8vw, 100px) var(--gouttiere); }
.video-section h2 { color: var(--blanc); }
.lecture {
width: 80px; height: 80px;
border-radius: 50%;
border: 1px solid rgba(250,247,242,.5);
display: grid;
place-items: center;
margin: 0 auto 28px;
transition: background var(--t), border-color var(--t), transform var(--t);
}
.lecture svg { width: 22px; height: 22px; fill: var(--creme); margin-left: 4px; }
.lecture:hover { background: var(--champagne); border-color: var(--champagne); transform: scale(1.07); }
.lecture:hover svg { fill: var(--noir); }
/* -------------------------------------------------
14. Avis clientes
------------------------------------------------- */
.avis-grille {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.4vw, 34px);
}
.avis {
background: var(--blanc);
border: 1px solid var(--bordure);
padding: clamp(28px, 3.4vw, 44px);
display: flex;
flex-direction: column;
gap: 18px;
}
.avis__etoiles { display: flex; gap: 3px; }
.avis__etoiles svg { width: 15px; height: 15px; fill: var(--champagne); }
.avis__texte {
font-family: var(--serif);
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
font-style: italic;
line-height: 1.65;
color: var(--noir-2);
flex: 1;
}
.avis__auteur { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.avis__auteur strong { color: var(--noir); font-weight: 500; }
@media (max-width: 900px) { .avis-grille { grid-template-columns: 1fr; } }
/* -------------------------------------------------
15. Journal (articles de blog)
------------------------------------------------- */
.articles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.6vw, 38px);
}
.article-carte { display: flex; flex-direction: column; gap: 18px; }
.article-carte__media { overflow: hidden; aspect-ratio: 3/2; background: var(--creme-2); }
.article-carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
.article-carte:hover .article-carte__media img { transform: scale(1.06); }
.article-carte__meta { font-size: .69rem; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne-2); }
.article-carte__titre { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.25; }
.article-carte:hover .article-carte__titre { color: var(--champagne-2); }
.article-carte__extrait { font-size: .92rem; color: var(--gris); line-height: 1.7; }
@media (max-width: 880px) { .articles { grid-template-columns: 1fr; } }
/* -------------------------------------------------
16. Newsletter
------------------------------------------------- */
.newsletter { text-align: center; }
.newsletter__form {
display: flex;
gap: 10px;
max-width: 520px;
margin: 2.4rem auto 1.1rem;
flex-wrap: wrap;
}
.newsletter__form input[type="email"] {
flex: 1 1 260px;
background: transparent;
border: 1px solid rgba(250,247,242,.28);
color: var(--creme);
padding: 1.05em 1.3em;
font-size: .88rem;
letter-spacing: .05em;
}
.newsletter__form input::placeholder { color: rgba(250,247,242,.4); }
.newsletter__form input:focus { border-color: var(--champagne); outline: none; }
.newsletter__mention { font-size: .74rem; color: rgba(250,247,242,.45); }
/* -------------------------------------------------
17. Pied de page
------------------------------------------------- */
.pied { background: var(--noir); color: rgba(250,247,242,.7); padding-top: clamp(56px, 7vw, 92px); }
.pied a:hover { color: var(--champagne); }
.pied__haut {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: clamp(28px, 4vw, 60px);
padding-bottom: clamp(40px, 5vw, 64px);
}
.pied__marque .site-logo__text { color: var(--blanc); font-size: 1.5rem; }
.pied__baseline { margin-top: 18px; font-size: .9rem; line-height: 1.75; max-width: 34ch; }
.pied__titre {
font-size: .72rem;
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--blanc);
margin-bottom: 1.5em;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pied ul a { font-size: .88rem; }
.pied__contact { display: grid; gap: 10px; font-size: .88rem; margin-top: 22px; }
.pied__contact a { display: inline-flex; align-items: center; gap: .6em; }
.pied__contact svg { width: 15px; height: 15px; stroke: var(--champagne); fill: none; stroke-width: 1.4; }
.reseaux { display: flex; gap: 14px; margin-top: 26px; }
.reseaux a {
width: 38px; height: 38px;
border: 1px solid rgba(250,247,242,.2);
display: grid; place-items: center;
transition: border-color var(--t), background var(--t);
}
.reseaux a:hover { border-color: var(--champagne); background: rgba(198,168,124,.12); }
.reseaux svg { width: 16px; height: 16px; fill: currentColor; }
.pied__bas {
border-top: 1px solid rgba(250,247,242,.13);
padding-block: 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
flex-wrap: wrap;
font-size: .78rem;
}
.pied__legal { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.paiements { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.paiements span {
border: 1px solid rgba(250,247,242,.2);
padding: 5px 11px;
font-size: .66rem;
letter-spacing: .14em;
text-transform: uppercase;
}
@media (max-width: 900px) { .pied__haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__haut { grid-template-columns: 1fr; } }
/* -------------------------------------------------
18. Pages de contenu simples
------------------------------------------------- */
.entete-page {
background: var(--noir);
color: var(--creme);
padding-block: clamp(60px, 8vw, 110px);
text-align: center;
}
.entete-page h1 { color: var(--blanc); margin-bottom: 0; }
.entete-page .chapo { color: rgba(250,247,242,.7); margin: 1.2rem auto 0; }
.fil { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-2); margin-bottom: 1.4em; }
.fil a:hover { color: var(--champagne-2); }
.entete-page .fil { color: rgba(250,247,242,.5); }
.contenu { font-size: 1.02rem; line-height: 1.85; }
.contenu h2 { margin-top: 2em; }
.contenu h3 { margin-top: 1.7em; }
.contenu ul, .contenu ol { padding-left: 1.3em; margin-bottom: 1.3em; }
.contenu li { margin-bottom: .5em; }
.contenu a { color: var(--champagne-2); border-bottom: 1px solid var(--bordure); }
.contenu a:hover { border-color: var(--champagne-2); }
.contenu img { margin: 2em 0; }
.contenu blockquote {
margin: 2em 0;
padding: 1.4em 0 1.4em 2em;
border-left: 2px solid var(--champagne);
font-family: var(--serif);
font-size: 1.24rem;
font-style: italic;
line-height: 1.6;
}
.contenu table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: .93rem; }
.contenu th, .contenu td { border: 1px solid var(--bordure-2); padding: 12px 16px; text-align: left; }
.contenu th { background: var(--creme-2); font-weight: 500; letter-spacing: .06em; }
/* FAQ en accordeon */
.faq { display: grid; gap: 0; border-top: 1px solid var(--bordure-2); }
.faq__item { border-bottom: 1px solid var(--bordure-2); }
.faq__q {
width: 100%;
text-align: left;
padding: 1.5em 2.6em 1.5em 0;
font-family: var(--serif);
font-size: clamp(1.02rem, 1.5vw, 1.22rem);
position: relative;
transition: color var(--t);
}
.faq__q:hover { color: var(--champagne-2); }
.faq__q::after {
content: '+';
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%);
font-family: var(--sans);
font-size: 1.4rem;
font-weight: 300;
color: var(--champagne-2);
transition: transform var(--t);
}
.faq__item.is-ouvert .faq__q::after { transform: translateY(-50%) rotate(45deg); }
.faq__r { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,.61,.36,1); }
.faq__r > div { padding-bottom: 1.8em; color: var(--gris); max-width: 72ch; }
/* Formulaire de contact */
.form-contact { display: grid; gap: 18px; }
.form-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-champ { display: grid; gap: 8px; }
.form-champ label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.form-champ input, .form-champ textarea, .form-champ select {
background: var(--blanc);
border: 1px solid var(--bordure-2);
padding: .95em 1.1em;
font-size: .95rem;
transition: border-color var(--t);
width: 100%;
}
.form-champ input:focus, .form-champ textarea:focus, .form-champ select:focus { border-color: var(--champagne); outline: none; }
.form-champ textarea { min-height: 165px; resize: vertical; }
@media (max-width: 640px) { .form-ligne { grid-template-columns: 1fr; } }
.encart {
background: var(--creme-2);
border-left: 2px solid var(--champagne);
padding: clamp(22px, 3vw, 34px);
margin: 2em 0;
font-size: .95rem;
}
.encart strong { display: block; margin-bottom: .5em; font-weight: 500; }
/* 404 */
.page-404 { text-align: center; padding-block: clamp(90px, 14vw, 180px); }
.page-404__code { font-family: var(--serif); font-size: clamp(6rem, 18vw, 13rem); line-height: .85; color: var(--champagne-3); }
/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: clamp(44px, 6vw, 70px); flex-wrap: wrap; }
.pagination .page-numbers {
min-width: 44px; height: 44px;
display: grid; place-items: center;
padding: 0 12px;
border: 1px solid var(--bordure-2);
font-size: .84rem;
transition: border-color var(--t), background var(--t), color var(--t);
}
.pagination .page-numbers:hover { border-color: var(--champagne); }
.pagination .page-numbers.current { background: var(--noir); color: var(--creme); border-color: var(--noir); }
/* -------------------------------------------------
19. Animations d'apparition au defilement
------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .1s; }
.reveal--d2 { transition-delay: .2s; }
.reveal--d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
/* -------------------------------------------------
20. Utilitaires
------------------------------------------------- */
.centre { text-align: center; }
.mt-0 { margin-top: 0; }
.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;
}
.skip-link {
position: absolute;
left: -9999px;
z-index: 999;
padding: 1em 1.5em;
background: var(--noir);
color: var(--creme);
}
.skip-link:focus { left: 12px; top: 12px; }
/* -------------------------------------------------
21. Hero : lent zoom sur l'image de fond
Donne du mouvement sans le poids d'une video.
------------------------------------------------- */
.hero__media img { animation: heroZoom 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes heroZoom {
from { transform: scale(1); }
to { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
.hero__media img { animation: none; }
}
/* Repli visuel des cartes collection sans image */
.collection { background: linear-gradient(140deg, var(--noir-2), var(--noir-3)); }
/* -------------------------------------------------
22. Comparateur avant / apres
------------------------------------------------- */
.ba { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.ba__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--noir-2);
cursor: ew-resize;
user-select: none;
touch-action: pan-y;
isolation: isolate;
}
.ba__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
pointer-events: none;
}
/* L'image "avant" est rognee jusqu'a la position du curseur. */
.ba__img--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__tag {
position: absolute;
top: 16px;
z-index: 3;
font-size: .6rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
padding: .5em 1em;
line-height: 1;
pointer-events: none;
backdrop-filter: blur(4px);
}
.ba__tag--avant { left: 16px; background: rgba(13,13,15,.82); color: var(--creme); }
.ba__tag--apres { right: 16px; background: var(--champagne); color: var(--noir); }
.ba__poignee {
position: absolute;
top: 0; bottom: 0;
left: var(--pos);
width: 2px;
margin-left: -1px;
background: var(--creme);
z-index: 4;
pointer-events: none;
box-shadow: 0 0 18px rgba(13,13,15,.45);
}
.ba__poignee-rond {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 52px; height: 52px;
border-radius: 50%;
background: var(--creme);
color: var(--noir);
display: grid;
place-items: center;
box-shadow: 0 8px 26px -8px rgba(13,13,15,.6);
}
.ba__poignee-rond svg { width: 24px; height: 12px; }
/* Le champ natif reste accessible au clavier, mais invisible. */
.ba__curseur {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
z-index: 5;
-webkit-appearance: none;
appearance: none;
background: transparent;
}
.ba__curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 54px; height: 100%; }
.ba__curseur::-moz-range-thumb { width: 54px; height: 100%; border: 0; background: transparent; }
.ba__curseur:focus-visible + .ba__poignee .ba__poignee-rond,
.ba__media:focus-within .ba__poignee-rond { outline: 2px solid var(--champagne-2); outline-offset: 3px; }
.ba__legende { display: flex; flex-direction: column; gap: 8px; }
.ba__titre {
font-family: var(--serif);
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
line-height: 1.25;
}
.ba__texte { font-size: .92rem; color: var(--gris); line-height: 1.65; }
.ba__legende .lien-souligne { align-self: flex-start; margin-top: 6px; }
.section--noir .ba__texte { color: rgba(250,247,242,.66); }
.section--noir .ba__titre { color: var(--blanc); }
.ba-grille {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 34px);
}
@media (max-width: 900px) { .ba-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ba-grille { grid-template-columns: 1fr; } }
.ba-mention {
margin-top: clamp(26px, 3vw, 40px);
font-size: .78rem;
color: var(--gris-2);
text-align: center;
letter-spacing: .02em;
}
.section--noir .ba-mention { color: rgba(250,247,242,.42); }
/* -------------------------------------------------
23. Bandeau video sur les pages collection
------------------------------------------------- */
.cat-video {
position: relative;
height: clamp(280px, 42vh, 460px);
overflow: hidden;
background: var(--noir);
isolation: isolate;
}
.cat-video video, .cat-video img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 32%;
z-index: -2;
}
.cat-video__voile {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgba(13,13,15,.9) 0%, rgba(13,13,15,.35) 55%, rgba(13,13,15,.55) 100%);
}
.cat-video__texte {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: clamp(24px, 4vw, 52px) var(--gouttiere);
color: var(--creme);
max-width: var(--max);
margin-inline: auto;
}
.cat-video__texte p { max-width: 56ch; color: rgba(250,247,242,.8); font-size: clamp(.94rem, 1.3vw, 1.06rem); margin: 0; }
.cat-video__texte .surtitre { margin-bottom: .8em; }
/* -------------------------------------------------
24. Tableau comparatif naturel / synthetique
------------------------------------------------- */
.comparo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--bordure);
border: 1px solid var(--bordure);
margin: 2.2rem 0 2.4rem;
}
.comparo__col {
background: var(--creme);
padding: clamp(20px, 2.4vw, 28px);
display: flex;
flex-direction: column;
gap: 14px;
}
.section--creme .comparo__col { background: var(--blanc); }
.comparo__titre {
font-family: var(--serif);
font-size: 1.08rem;
line-height: 1.25;
padding-bottom: 12px;
border-bottom: 1px solid var(--bordure-2);
}
.comparo__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; }
.comparo__col li {
position: relative;
padding-left: 20px;
font-size: .89rem;
line-height: 1.55;
color: var(--gris);
}
.comparo__col li::before {
content: '';
position: absolute;
left: 0; top: .62em;
width: 9px; height: 1px;
background: var(--champagne);
}
.comparo__prix {
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--champagne-2);
padding-top: 12px;
border-top: 1px solid var(--bordure-2);
}
@media (max-width: 520px) { .comparo { grid-template-columns: 1fr; } }
/* -------------------------------------------------
25. Illustrations dans le corps des articles
------------------------------------------------- */
.art-fig { margin: 2.6em 0; }
.art-fig img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: center 25%;
}
.art-fig figcaption {
margin-top: 12px;
font-size: .8rem;
color: var(--gris-2);
line-height: 1.55;
padding-left: 14px;
border-left: 1px solid var(--champagne);
}
/* Une illustration qui suit immediatement un titre doit respirer au-dessus */
.contenu .art-fig + h2 { margin-top: 1.6em; }
/* ===================================================================
26. HERO EN DEUX VOLETS (remplace l'ancien hero plein ecran)
Panneau noir a gauche pour le texte, photographie a droite.
Contraste garanti, photo respectee, pas de texte illisible.
=================================================================== */
.hero {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
/* align-items explicite : l'ancienne version du hero imposait "center",
ce qui laissait le volet photo s'effondrer a zero de hauteur puisque
son image est en position absolue (donc hors du flux). */
align-items: stretch;
align-content: stretch;
min-height: min(88vh, 860px);
background: var(--noir);
color: var(--creme);
overflow: hidden;
position: relative;
isolation: isolate;
}
.hero > * { min-height: 100%; }
/* ---- Volet texte ---- */
.hero__panneau {
display: flex;
align-items: center;
padding: clamp(48px, 6vw, 92px) clamp(24px, 5vw, 84px);
position: relative;
background:
radial-gradient(120% 90% at 0% 0%, rgba(198,168,124,.10) 0%, transparent 58%),
var(--noir);
}
/* Filet champagne qui separe les deux volets */
.hero__panneau::after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--champagne), transparent);
opacity: .55;
}
.hero__inner { width: 100%; max-width: 560px; margin-left: auto; }
.hero__note {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 2.2em;
font-size: .76rem;
letter-spacing: .08em;
color: rgba(250,247,242,.62);
}
.hero__etoiles { display: inline-flex; gap: 2px; }
.hero__etoiles svg { width: 13px; height: 13px; fill: var(--champagne); }
.hero h1 {
font-size: clamp(2.5rem, 4.2vw, 4.15rem);
line-height: 1.04;
letter-spacing: -.022em;
color: var(--blanc);
margin: 0 0 .5em;
}
.hero h1 em { font-style: italic; color: var(--champagne); }
.hero__chapo {
font-size: clamp(.98rem, 1.15vw, 1.1rem);
line-height: 1.82;
color: rgba(250,247,242,.72);
max-width: 46ch;
margin: 0 0 2.4em;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__points {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 26px);
margin: clamp(34px, 4.2vw, 54px) 0 0;
padding: clamp(24px, 3vw, 32px) 0 0;
border-top: 1px solid rgba(250,247,242,.14);
}
.hero__points li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .78rem;
line-height: 1.45;
color: rgba(250,247,242,.7);
letter-spacing: .015em;
}
.hero__points svg {
width: 17px; height: 17px;
flex: 0 0 17px;
margin-top: 2px;
stroke: var(--champagne);
fill: none;
stroke-width: 1.2;
}
/* ---- Volet photographie ---- */
.hero__visuel { position: relative; overflow: hidden; background: var(--noir-2); }
.hero__visuel img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 26%;
/* Le mouvement est desormais porte par « heroRespire », et seulement
par la photo active : l ancienne boucle infinie tournait sur les
trois, y compris les invisibles. */
will-change: transform;
}
/* Fondu vers le panneau : la couture entre les deux volets disparait */
.hero__grain {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(13,13,15,.72) 0%, rgba(13,13,15,.12) 26%, transparent 52%),
linear-gradient(to top, rgba(13,13,15,.55) 0%, transparent 42%);
pointer-events: none;
}
/* Pastille produit posee sur la photo */
.hero__pastille {
position: absolute;
right: clamp(18px, 2.4vw, 34px);
bottom: clamp(18px, 2.4vw, 34px);
z-index: 3;
display: flex;
align-items: center;
gap: 14px;
max-width: min(340px, calc(100% - 36px));
padding: 12px 16px 12px 12px;
background: rgba(250, 247, 242, .95);
backdrop-filter: blur(10px);
color: var(--noir);
box-shadow: 0 22px 50px -24px rgba(13,13,15,.85);
transition: transform var(--t), background var(--t);
}
.hero__pastille:hover { transform: translateY(-3px); background: var(--blanc); }
.hero__pastille-img { flex: 0 0 56px; width: 56px; height: 70px; overflow: hidden; background: var(--creme-2); }
.hero__pastille-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__pastille-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero__pastille-eyebrow {
font-size: .58rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--champagne-2);
}
.hero__pastille-nom {
font-family: var(--serif);
font-size: .94rem;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hero__pastille-prix { font-size: .84rem; font-weight: 500; }
.hero__pastille-prix .price { font-size: inherit; }
.hero__pastille-fleche { margin-left: auto; color: var(--champagne-2); transition: transform var(--t); }
.hero__pastille:hover .hero__pastille-fleche { transform: translateX(4px); }
/* ---- Tablette : la photo passe en bandeau au-dessus ---- */
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; min-height: 0; }
.hero__visuel { order: -1; aspect-ratio: 16 / 11; }
.hero__visuel img { position: absolute; }
.hero__grain { background: linear-gradient(to bottom, rgba(13,13,15,.25) 0%, transparent 40%, rgba(13,13,15,.55) 100%); }
.hero__panneau { padding: clamp(36px, 7vw, 56px) var(--gouttiere); }
.hero__panneau::after { display: none; }
.hero__inner { margin-inline: auto; max-width: 640px; }
}
@media (max-width: 560px) {
/* remplace plus bas par une hauteur bornee (section 49) */
.hero__points { grid-template-columns: 1fr; gap: 12px; }
.hero__points li { align-items: center; }
.hero__actions .btn { width: 100%; }
.hero__pastille { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}
/* Les anciennes regles du hero plein ecran ne s'appliquent plus. */
.hero__voile, .hero__defiler, .hero__media { display: none; }
/* -------------------------------------------------
27. Hero — ajustements
L'image est desormais au format portrait : elle remplit
le volet vertical sans rogner le visage.
La pastille produit a ete retiree (illisible en petit,
et le visuel produit sur fond blanc jurait avec la photo).
------------------------------------------------- */
.hero__visuel img { object-position: center 46%; }
.hero__pastille { display: none !important; }
@media (max-width: 900px) {
.hero__visuel { aspect-ratio: 4 / 3; }
.hero__visuel img { object-position: center 44%; }
}
@media (max-width: 560px) {
.hero__visuel { aspect-ratio: 1 / 1; }
}
/* Photo de hero deja sombre : on allege le fondu pour ne pas
noyer la chevelure, tout en gardant la couture invisible. */
.hero__grain {
background:
linear-gradient(to right, rgba(13,13,15,.55) 0%, rgba(13,13,15,.06) 22%, transparent 44%),
linear-gradient(to top, rgba(13,13,15,.32) 0%, transparent 38%);
}
@media (max-width: 900px) {
.hero__grain { background: linear-gradient(to bottom, rgba(13,13,15,.18) 0%, transparent 42%, rgba(13,13,15,.45) 100%); }
}
/* -------------------------------------------------
28. Encart code de réduction (page Accompagnement)
------------------------------------------------- */
.encart-code {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
text-align: center;
background: var(--noir);
color: var(--creme);
padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px);
margin: 2.4em 0;
position: relative;
}
.encart-code::after {
content: '';
position: absolute;
inset: 8px;
border: 1px solid rgba(198,168,124,.35);
pointer-events: none;
}
.encart-code__label {
font-size: .68rem;
font-weight: 500;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--champagne);
}
.encart-code__code {
font-family: var(--serif);
font-size: clamp(1.7rem, 4vw, 2.5rem);
letter-spacing: .06em;
color: var(--blanc);
line-height: 1.1;
user-select: all;
}
.encart-code__detail {
font-size: .82rem;
color: rgba(250,247,242,.6);
line-height: 1.65;
max-width: 46ch;
}
/* Bandeau d'accès depuis la page d'accueil */
.accompagnement {
background: var(--creme-2);
border-top: 1px solid var(--bordure);
border-bottom: 1px solid var(--bordure);
}
.accompagnement__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(20px, 3vw, 46px);
padding-block: clamp(30px, 4vw, 46px);
flex-wrap: wrap;
}
.accompagnement__texte { max-width: 62ch; }
.accompagnement__titre {
font-family: var(--serif);
font-size: clamp(1.2rem, 2vw, 1.55rem);
line-height: 1.25;
margin: 0 0 .5em;
}
.accompagnement__texte p { font-size: .93rem; color: var(--gris); line-height: 1.7; margin: 0; }
.accompagnement__texte strong { color: var(--noir); font-weight: 500; }
@media (max-width: 700px) {
.accompagnement__inner { flex-direction: column; align-items: flex-start; }
.accompagnement .btn { width: 100%; }
}
/* -------------------------------------------------
29. En-tête — correctif de compression
Avec « 1fr auto 1fr », la colonne 1fr ne descend jamais
sous la largeur de son contenu : une navigation un peu
longue pousse alors tout l'en-tête hors de l'écran.
minmax(0, 1fr) autorise la compression.
------------------------------------------------- */
.entete__barre {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.nav-principale { min-width: 0; }
.nav-principale ul { flex-wrap: nowrap; }
.entete__outils { min-width: 0; }
/* Entre 1024 et 1400 px, on resserre plutôt que de déborder */
@media (min-width: 1025px) and (max-width: 1400px) {
.nav-principale ul { gap: 15px; }
.nav-principale a { font-size: .7rem; letter-spacing: .1em; }
.site-logo__text { font-size: clamp(1.05rem, 1.7vw, 1.45rem); letter-spacing: .07em; }
.entete__outils { gap: 10px; }
.icone-btn { padding: 6px; }
}
@media (min-width: 1025px) and (max-width: 1240px) {
.icone-btn__label { display: none; }
}
/* -------------------------------------------------
30. En-tête — logo à gauche
Le logo centré n'est tenable qu'avec une navigation courte.
Dès que le menu s'enrichit, il passe SOUS le logo et les textes
se superposent. Le logo à gauche accepte n'importe quel menu.
------------------------------------------------- */
@media (min-width: 1301px) {
.entete__barre {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: clamp(20px, 3vw, 48px);
}
.site-logo { grid-column: 1; justify-self: start; }
.nav-principale { grid-column: 2; justify-self: center; min-width: 0; }
.entete__outils { grid-column: 3; justify-self: end; }
.burger { display: none; }
.nav-principale ul { flex-wrap: nowrap; gap: clamp(12px, 1.4vw, 26px); }
.nav-principale a { font-size: .7rem; letter-spacing: .09em; white-space: nowrap; }
.site-logo__text { font-size: clamp(1.15rem, 1.6vw, 1.6rem); letter-spacing: .08em; }
}
/* En dessous, le menu déroulant plein écran prend le relais :
plus lisible qu'une navigation comprimée à l'extrême. */
@media (max-width: 1300px) {
.entete__barre { grid-template-columns: auto 1fr auto; }
.nav-principale { display: none; }
.burger { display: block; grid-column: 1; justify-self: start; }
.site-logo { grid-column: 2; justify-self: center; }
.entete__outils { grid-column: 3; justify-self: end; }
}
/* -------------------------------------------------
31. En-tête — largeur et seuil du menu déroulant
Le contenu de l'en-tête (logo + 7 entrées + outils) réclame
davantage que les 1320 px du reste du site. On l'autorise à
s'étendre, et on bascule sur le menu déroulant plus tôt.
------------------------------------------------- */
.entete__barre {
max-width: min(1720px, 100%);
}
@media (min-width: 1401px) {
.entete__barre {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: clamp(18px, 2vw, 40px);
}
.site-logo { grid-column: 1; justify-self: start; }
.nav-principale { grid-column: 2; justify-self: center; min-width: 0; overflow: hidden; display: block; }
.entete__outils { grid-column: 3; justify-self: end; }
.burger { display: none; }
.nav-principale ul { flex-wrap: nowrap; gap: clamp(10px, 1.1vw, 22px); justify-content: center; }
.nav-principale a { font-size: .66rem; letter-spacing: .07em; white-space: nowrap; }
.site-logo__text { font-size: clamp(1.1rem, 1.4vw, 1.5rem); letter-spacing: .07em; }
}
/* En dessous de 1400 px, menu déroulant : plus lisible qu'une
navigation comprimée jusqu'à l'illisible. */
@media (max-width: 1400px) {
.entete__barre { grid-template-columns: auto 1fr auto; }
.nav-principale { display: none; }
.burger { display: block; grid-column: 1; justify-self: start; }
.site-logo { grid-column: 2; justify-self: center; }
.entete__outils { grid-column: 3; justify-self: end; }
}
/* -------------------------------------------------
32. En-tête — tout sur une seule ligne
Piège de CSS Grid : le logo (colonne 1) apparaît APRÈS la
navigation (colonne 2) dans le HTML. Sans grid-row explicite,
le navigateur renvoie le logo à la ligne suivante.
------------------------------------------------- */
@media (min-width: 1401px) {
.entete__barre { grid-template-rows: auto; align-items: center; min-height: 88px; }
.site-logo { grid-row: 1; grid-column: 1; }
.nav-principale { grid-row: 1; grid-column: 2; }
.entete__outils { grid-row: 1; grid-column: 3; }
}
@media (max-width: 1400px) {
.entete__barre { grid-template-rows: auto; align-items: center; }
.burger { grid-row: 1; grid-column: 1; }
.site-logo { grid-row: 1; grid-column: 2; }
.entete__outils{ grid-row: 1; grid-column: 3; }
}
/* -------------------------------------------------
33. En-tête — finitions
------------------------------------------------- */
.entete {
background: rgba(250, 247, 242, .94);
border-bottom: 1px solid var(--bordure-2);
}
.entete.is-collee {
background: rgba(250, 247, 242, .985);
box-shadow: 0 8px 30px -22px rgba(13, 13, 15, .55);
}
.site-logo__text {
font-weight: 500;
white-space: nowrap;
transition: opacity var(--t);
}
.site-logo:hover .site-logo__text { opacity: .72; }
.nav-principale > ul > li > a {
padding-block: 10px;
color: var(--noir);
opacity: .82;
transition: opacity var(--t), color var(--t);
}
.nav-principale > ul > li > a:hover,
.nav-principale .current-menu-item > a,
.nav-principale .current_page_item > a { opacity: 1; }
/* Le soulignement part du centre : plus soigné que du bord */
.nav-principale > ul > li > a::after {
left: 50%;
right: auto;
width: 0;
transform: none;
transition: width var(--t), left var(--t);
}
.nav-principale > ul > li > a:hover::after,
.nav-principale .current-menu-item > a::after,
.nav-principale .current_page_item > a::after { left: 0; width: 100%; }
.entete__outils { align-items: center; }
.icone-btn { color: var(--noir); opacity: .82; }
.icone-btn:hover { opacity: 1; color: var(--champagne-2); }
.icone-btn__label { font-size: .68rem; letter-spacing: .16em; }
.pastille {
top: -2px; right: -4px;
box-shadow: 0 0 0 2px var(--creme);
}
/* -------------------------------------------------
34. En-tête — version allégée
Les libellés ayant été raccourcis, la navigation tient
désormais bien plus bas en largeur : on redescend le seuil
du menu déroulant de 1400 à 1100 px.
------------------------------------------------- */
@media (min-width: 1181px) {
.entete__barre {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: clamp(20px, 2.4vw, 46px);
align-items: center;
min-height: 82px;
}
.site-logo { grid-row: 1; grid-column: 1; justify-self: start; }
.nav-principale { grid-row: 1; grid-column: 2; justify-self: center; display: block; min-width: 0; }
.entete__outils { grid-row: 1; grid-column: 3; justify-self: end; }
.burger { display: none; }
.nav-principale ul { flex-wrap: nowrap; gap: clamp(14px, 1.5vw, 30px); justify-content: center; }
.nav-principale a { font-size: .69rem; letter-spacing: .13em; white-space: nowrap; }
.site-logo__text { font-size: clamp(1.15rem, 1.5vw, 1.5rem); letter-spacing: .1em; }
}
@media (max-width: 1180px) {
.entete__barre { grid-template-columns: auto 1fr auto; align-items: center; }
.nav-principale { display: none; }
.burger { display: block; grid-row: 1; grid-column: 1; justify-self: start; }
.site-logo { grid-row: 1; grid-column: 2; justify-self: center; }
.entete__outils { grid-row: 1; grid-column: 3; justify-self: end; }
}
/* Bandeau d'annonce plus discret */
.annonce {
font-size: .68rem;
letter-spacing: .16em;
padding: 9px var(--gouttiere);
background: var(--noir);
}
.annonce__piste { gap: 2.2em; }
.annonce__item { opacity: .85; }
/* Puce du hero (remplace les étoiles inventées) */
.hero__puce {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--champagne);
flex: 0 0 6px;
box-shadow: 0 0 0 3px rgba(198,168,124,.2);
}
.hero__note { gap: 10px; }
/* Cartes de collection : le dégradé ne doit pas noyer la photo */
.collection img { filter: brightness(.92) saturate(1); }
.collection:hover img { filter: brightness(.78); }
.collection__voile {
background: linear-gradient(to top, rgba(13,13,15,.88) 0%, rgba(13,13,15,.18) 52%, rgba(13,13,15,.05) 100%);
}
/* ===================================================================
35. TROIS FAÇONS (remplace l'ancien avant/après)
------------------------------------------------------------------
Trois cartes verticales sur fond noir. La photo garde un ratio fixe
(aspect-ratio) : sans cela la hauteur dépend du poids de l'image
décodée et la grille sursaute au chargement.
------------------------------------------------- */
.facons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.6vw, 40px);
}
.facon {
display: flex;
flex-direction: column;
background: var(--noir-2);
border: 1px solid rgba(198,168,124,.16);
border-radius: 3px;
overflow: hidden;
transition: border-color var(--t), transform var(--t);
}
.facon:hover { border-color: rgba(198,168,124,.42); transform: translateY(-4px); }
.facon__media {
position: relative;
display: block;
aspect-ratio: 9 / 11;
overflow: hidden;
background: var(--noir-3);
}
.facon__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.facon:hover .facon__media img { transform: scale(1.05); }
/* Pastille de durée : le seul chiffre de la carte, il doit ressortir. */
.facon__duree {
position: absolute;
left: 14px; bottom: 14px;
padding: 7px 14px;
background: rgba(13,13,15,.72);
backdrop-filter: blur(6px);
color: var(--champagne-3);
font-family: var(--sans);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
border: 1px solid rgba(198,168,124,.3);
border-radius: 2px;
}
.facon__corps {
flex: 1;
display: flex;
flex-direction: column;
padding: clamp(22px, 2.4vw, 34px);
}
.facon__num {
display: block;
font-family: var(--serif);
font-size: .95rem;
color: var(--champagne);
letter-spacing: .18em;
margin-bottom: 12px;
}
.facon h3 {
font-family: var(--serif);
font-size: clamp(1.28rem, 1.7vw, 1.62rem);
line-height: 1.22;
margin: 0 0 14px;
}
.facon h3 a { color: var(--creme); text-decoration: none; }
.facon h3 a:hover { color: var(--champagne-3); }
.facon p {
color: var(--gris-2);
font-size: .95rem;
line-height: 1.72;
margin: 0 0 22px;
}
/* Poussé en bas pour que les trois liens s'alignent malgré des textes
de longueurs différentes. */
.lien-fleche {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--champagne);
font-family: var(--sans);
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
text-decoration: none;
}
.lien-fleche svg {
width: 22px; height: 10px;
fill: none;
stroke: currentColor;
stroke-width: 1.2;
transition: transform var(--t);
}
.lien-fleche:hover { color: var(--champagne-3); }
.lien-fleche:hover svg { transform: translateX(6px); }
@media (max-width: 900px) {
.facons { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.facon__media { aspect-ratio: 4 / 3; }
}
/* ===================================================================
36. COLLECTIONS — grille régulière
------------------------------------------------------------------
Remplace la mosaïque « une tuile géante + des petites » : dès que le
nombre de collections ne tombait pas juste, elle laissait un trou en
bas à droite. Six cartes strictement identiques, trois par ligne.
Le média est isolé dans un span pour que le voile et le texte ne
subissent pas le zoom au survol.
------------------------------------------------- */
.collections { grid-template-columns: repeat(3, 1fr); }
.collections .collection--vedette { grid-column: auto; grid-row: auto; }
.collection {
aspect-ratio: 4 / 5;
border: 1px solid transparent;
transition: border-color var(--t), transform var(--t);
}
.collection:hover { border-color: rgba(198,168,124,.45); transform: translateY(-3px); }
.collection__media {
position: absolute;
inset: 0;
overflow: hidden;
display: block;
}
.collection__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Voile plus dense en bas : ces photos sont claires (fonds blancs de
studio) et le texte crème s'y perdait complètement. */
.collection__voile {
background: linear-gradient(to top,
rgba(13,13,15,.90) 0%,
rgba(13,13,15,.55) 30%,
rgba(13,13,15,.10) 62%,
rgba(13,13,15,0) 100%);
}
.collection__texte { z-index: 2; }
.collection__accroche {
display: block;
font-family: var(--sans);
font-size: .66rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--champagne);
margin-bottom: .7em;
}
.collection__nom { display: block; }
@media (max-width: 1024px) {
.collections { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.collections { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
.collection { aspect-ratio: 3 / 2; }
}
/* ===================================================================
37. ACCOMPAGNEMENT CANCER
------------------------------------------------------------------
Deux formats du même engagement. La version « ligne » doit être
lisible sans jamais devenir un bandeau publicitaire : le sujet ne
supporte ni gros caractères ni couleur criarde.
------------------------------------------------- */
/* Le code promo, partout où il apparaît : sélectionnable d'un double-clic. */
.accompagnement code,
.accompagnement-ligne code {
font-family: var(--sans);
font-size: .92em;
font-weight: 500;
letter-spacing: .08em;
background: rgba(198,168,124,.22);
border: 1px solid rgba(198,168,124,.5);
border-radius: 2px;
padding: .12em .5em;
color: var(--noir);
white-space: nowrap;
user-select: all;
}
.accompagnement-ligne {
display: flex;
align-items: flex-start;
gap: 12px;
margin: clamp(26px, 3vw, 40px) 0;
padding: 16px 20px;
background: rgba(198,168,124,.09);
border-left: 2px solid var(--champagne);
font-size: .87rem;
line-height: 1.65;
color: var(--gris);
}
.accompagnement-ligne strong { color: var(--noir); font-weight: 500; }
.accompagnement-ligne a {
color: var(--champagne-2);
border-bottom: 1px solid rgba(198,168,124,.5);
white-space: nowrap;
}
.accompagnement-ligne a:hover { color: var(--noir); border-bottom-color: var(--noir); }
.accompagnement-ligne__pastille {
flex: 0 0 auto;
width: 7px; height: 7px;
margin-top: .55em;
border-radius: 50%;
background: var(--champagne);
}
/* Dans le pied de page, fond sombre : on inverse les valeurs. */
.pied .accompagnement-ligne {
background: rgba(198,168,124,.10);
color: var(--gris-2);
margin: 0 0 30px;
}
.pied .accompagnement-ligne strong { color: var(--creme); }
.pied .accompagnement-ligne code { color: var(--creme); background: rgba(198,168,124,.2); }
.pied .accompagnement-ligne a { color: var(--champagne-3); }
.pied .accompagnement-ligne a:hover { color: var(--blanc); border-bottom-color: var(--blanc); }
@media (max-width: 600px) {
.accompagnement-ligne { flex-direction: row; padding: 14px 16px; font-size: .84rem; }
}
/* ===================================================================
38. COLLECTIONS — cadrage des visages
------------------------------------------------------------------
Les vignettes sont des photos portrait de mannequins (900 × 1200).
`object-fit: cover` recadre depuis le CENTRE : dans une carte plus
large que haute, le centre d'un portrait tombe sur le menton, et la
carte n'affiche qu'une bouche et des cheveux. On décale donc le point
d'ancrage vers le haut pour garder le visage et la racine — c'est
précisément ce que la cliente vient regarder sur une perruque.
------------------------------------------------- */
.collection__media img { object-position: 50% 22%; }
@media (max-width: 560px) {
/* Format portrait plutôt que paysage : sur un écran étroit, la carte
large coupait la tête. Le 4/5 laisse tenir le sujet entier. */
.collection { aspect-ratio: 4 / 5; }
.collection__media img { object-position: 50% 18%; }
.collection__texte { padding: 18px 20px 20px; }
.collection__nom { font-size: 1.24rem; }
}
/* Renvoi vers le guide, sous la grille des collections. Remplace une
section entière qui répétait les mêmes cartes vers les mêmes pages. */
.collections__guide {
margin-top: clamp(26px, 3vw, 40px);
text-align: center;
font-size: .92rem;
color: var(--gris);
}
.collections__guide a {
color: var(--noir);
border-bottom: 1px solid var(--bordure);
padding-bottom: 2px;
margin-left: .4em;
white-space: nowrap;
}
.collections__guide a:hover { color: var(--champagne-2); border-bottom-color: var(--champagne); }
.collections__guide .fleche { display: inline-block; transition: transform var(--t); }
.collections__guide a:hover .fleche { transform: translateX(5px); }
@media (max-width: 600px) {
.collections__guide a { white-space: normal; display: inline-block; margin-left: 0; margin-top: .4em; }
}
/* ===================================================================
39. LISIBILITE — correctifs mesures
------------------------------------------------------------------
Trois défauts relevés en mesurant la page rendue, pas en la regardant :
contraste insuffisant du champagne sur crème (corrigé dans les jetons
ci-dessus), lignes de texte trop longues, et libellés sous 11 px.
------------------------------------------------- */
/* 161 caractères par ligne : au-delà de 75, l'œil perd le début de la
ligne suivante. On ramène à une largeur de lecture. */
.collections__guide {
max-width: 52ch;
margin-inline: auto;
}
/* 10 px pour des capitales très espacées, c'est sous le seuil de confort.
On remonte d'un cran et on resserre l'interlettrage en compensation. */
.article-carte__meta { font-size: .74rem; letter-spacing: .18em; }
/* Le suptitre cumulait petite taille et interlettrage très large. */
.surtitre { letter-spacing: .28em; }
/* ===================================================================
40. ZONES TACTILES SUR MOBILE
------------------------------------------------------------------
Mesuré sur un écran de 375 px : les icônes de l'en-tête faisaient
17 × 35 px, les croix de fermeture 30 × 32, la pagination 26 × 33.
La cible recommandée est 44 × 44 — en dessous, on rate le bouton et
on touche le lien d'à côté. Le doigt ne vise pas comme la souris.
------------------------------------------------- */
@media (max-width: 900px) {
.icone-btn,
.burger {
min-width: 44px;
min-height: 44px;
justify-content: center;
padding: 8px;
}
.tiroir__fermer,
.filtres__fermer,
.recherche-overlay__fermer {
min-width: 44px;
min-height: 44px;
display: grid;
place-items: center;
padding: 0;
}
/* WooCommerce enveloppe sa pagination dans nav.woocommerce-pagination,
pas dans .pagination : ma premiere regle ne l'atteignait pas. */
.pagination .page-numbers,
.woocommerce-pagination li .page-numbers,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
min-width: 44px;
min-height: 44px;
display: inline-grid;
place-items: center;
}
/* Options de filtre : on les tape en serie, 38 px etait juste. */
.filtre__option { min-height: 44px; }
.btn, .btn--clair, .btn--or { min-height: 44px; }
/* Le bouton d'ajout au panier sur la carte produit. */
ul.products li.product .button { min-height: 44px; display: inline-grid; place-items: center; }
}
/* ===================================================================
45. ENTETE — bloc de reference, place en dernier
===================================================================
Cinq blocs successifs redeclaraient la grille de l'entete et la place
du logo, en se contredisant. Le passage de « Maison Loree » (12 signes)
a « Maison Tressane » (15) a fait deborder la ligne : a 375 px le
contenu reclamait 463 px, la colonne des outils etait ecrasee a 28 px
et son « justify-self: end » la faisait deborder vers la gauche, par
dessus le nom de la boutique.
Correction de fond : c'est le LOGO qui recoit la colonne souple
(minmax(0,1fr)), les outils gardent leur largeur naturelle. Ce bloc
vient apres tous les autres : c'est lui qui fait autorite.
=================================================================== */
@media (max-width: 1024px) {
.entete__barre {
grid-template-columns: auto minmax(0, 1fr) auto;
column-gap: 12px;
align-items: center;
min-height: 70px;
}
.nav-principale { display: none; }
.burger { display: block; grid-row: 1; grid-column: 1; justify-self: start; }
.site-logo { grid-row: 1; grid-column: 2; justify-self: center; min-width: 0; }
.entete__outils { grid-row: 1; grid-column: 3; justify-self: end; gap: 4px; }
.icone-btn__label { display: none; }
.site-logo__text { font-size: clamp(1rem, 3.2vw, 1.45rem); letter-spacing: .07em; }
}
/* Sous 420 px, le nom passe sur deux lignes plutot que de retrecir
jusqu'a l'illisible : « MAISON » au-dessus de « TRESSANE ». C'est un
traitement courant des marques de mode, et il tient dans la place. */
@media (max-width: 420px) {
.entete__barre { column-gap: 8px; }
.site-logo__text {
white-space: normal;
text-align: center;
line-height: 1.06;
font-size: 1.12rem;
letter-spacing: .09em;
}
}
/* ===================================================================
46. HERO — les trois arguments, sans mots colles
===================================================================
Le libelle et sa valeur etaient separes par un
, masque sur
mobile par « .hero__points span br { display: none } ». Or masquer
un
supprime le retour a la ligne SANS laisser d'espace : on
lisait « Perruquesdes 32,90 € ». Deux elements distincts et un
ecart declare reglent le probleme dans les deux dispositions.
=================================================================== */
.hero__point { display: flex; flex-direction: column; min-width: 0; }
.hero__point b { font-weight: inherit; }
.hero__point i { font-style: normal; }
@media (max-width: 560px) {
.hero__point { flex-direction: row; flex-wrap: wrap; column-gap: .4em; }
}
/* ===================================================================
47. MOBILE — taille de texte plancher
===================================================================
Onze libelles descendaient a 10,6 px sur telephone : les accroches
des cartes de collection, les mentions de paiement du pied de page
et les etiquettes des icones. En dessous de 12 px environ, un texte
en majuscules tres espacees devient penible a lire sur un ecran tenu
a bout de bras. On remonte le plancher sans toucher au dessin.
=================================================================== */
@media (max-width: 620px) {
.collection__accroche { font-size: .78rem; letter-spacing: .12em; }
.paiements span { font-size: .74rem; letter-spacing: .1em; padding: 5px 10px; }
.icone-btn__label { font-size: .74rem; }
}
/* Tres petits telephones (320 px et moins). A cette largeur, « TRESSANE »
mesurait encore 102 px pour une piste de 80 : le nom empietait de 3 px
sur les icones. On resserre les gouttieres et l'ecart entre icones
plutot que de rapetisser davantage le nom. */
@media (max-width: 360px) {
.wrap.entete__barre { padding-left: 14px; padding-right: 14px; column-gap: 6px; }
.entete__outils { gap: 0; }
.site-logo__text { font-size: 1rem; letter-spacing: .07em; }
}
/* ===================================================================
48. HERO — trois visuels qui se relaient
===================================================================
Une seule photo ne dit pas grand-chose d'un catalogue de 232 modeles.
Trois se succedent : une longueur blonde, une couleur franche, une
coupe brune a bandeau. Elles sont toutes carrees comme leur cadre,
donc aucune n'est recadree, et elles portent leurs attributs width et
height : la place est reservee, la page ne saute pas.
Le fondu passe par l'opacite seule — la propriete la moins couteuse a
animer, elle ne declenche ni calcul de mise en page ni repeinture.
=================================================================== */
.hero__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.1s ease;
will-change: opacity;
}
.hero__photo.is-actif { opacity: 1; }
/* Reperes cliquables. La cible tactile fait 44 px, le point 7 px :
confortable au doigt sans alourdir l'image. */
.hero__diapo-nav {
position: absolute;
left: 0; right: 0; bottom: 8px;
display: flex;
justify-content: center;
gap: 2px;
z-index: 3;
}
.hero__diapo-puce {
width: 44px; height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: grid;
place-items: center;
}
.hero__diapo-puce::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(250, 247, 242, .55);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .22);
transition: background var(--t), transform var(--t);
}
.hero__diapo-puce:hover::before { background: rgba(250, 247, 242, .85); }
.hero__diapo-puce.is-actif::before { background: var(--champagne); transform: scale(1.4); }
.hero__diapo-puce:focus-visible { outline: 2px solid var(--champagne); outline-offset: -6px; }
/* Sans animation demandee : on garde le premier visuel, fixe. */
@media (prefers-reduced-motion: reduce) {
.hero__photo { transition: none; }
}
/* ===================================================================
49. HERO — mise en scène
===================================================================
Le principe des deux volets ne bouge pas : le texte reste sur un fond
plein, dont le contraste est constant, et la photo garde son volet.
Ce qui change, c'est que le volet photo cesse d'être une image posée.
Quatre gestes, et un seul texte posé sur l'image — la légende, qui a
son propre voile :
1. un mouvement lent sur la photo active, pour qu'elle respire ;
2. une légende qui nomme la teinte : montrer une couleur sans la
nommer laisse deviner, et deviner fatigue ;
3. un index 01 / 02 / 03 avec une jauge qui se remplit, plutôt que
des points muets : on sait où l'on en est ;
4. une entrée en escalier sur le texte, une ligne après l'autre.
=================================================================== */
/* ---- Volet photo ---- */
.hero__visuel {
position: relative;
overflow: hidden;
background: var(--noir-2);
isolation: isolate;
}
/* Mouvement lent : la photo active s'approche de 4 % en douze secondes.
On anime « transform », la seule propriété que le navigateur sait
déplacer sans recalculer la page. */
.hero__photo {
/* Sur-cadrage de 4 % : sans lui, le decalage au pointeur decouvrirait
les bords de la photo. */
transform: scale(1.04);
transition: opacity 1.2s ease;
}
.hero__photo.is-actif {
animation: heroRespire 13s ease-out forwards;
}
@keyframes heroRespire {
from { transform: scale(1.04); }
to { transform: scale(1.075); }
}
/* Voile de pied d'image : il porte la légende et l'index. Sans lui, le
texte clair passerait sur une chevelure claire une fois sur trois. */
.hero__grain {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
/* Assez dense pour que la legende tienne meme sur une chevelure
blond clair : a hauteur du texte, le voile atteint 0,75 a 0,86
d opacite. En dessous, le petit texte en capitales passait sous
le seuil de lisibilite. */
linear-gradient(to top, rgba(13,13,15,.94) 0%, rgba(13,13,15,.80) 16%, rgba(13,13,15,.40) 34%, transparent 54%),
linear-gradient(to right, rgba(13,13,15,.34) 0%, transparent 30%);
}
/* ---- Légende ---- */
.hero__legende {
position: absolute;
left: clamp(20px, 3vw, 40px);
/* Au-dessus de l index, jamais dessus : l index occupe 44 px de
haut a partir de 18 px du bas, la legende doit donc commencer
plus haut que 62 px. A 768 px, l ancien reglage la faisait
chevaucher les chiffres. */
bottom: clamp(78px, 8vw, 94px);
z-index: 2;
display: flex;
flex-direction: column;
gap: 5px;
color: var(--creme);
text-shadow: 0 1px 14px rgba(13,13,15,.55);
}
.hero__legende-teinte {
font-family: var(--serif);
font-size: clamp(1.3rem, 2vw, 1.85rem);
line-height: 1.1;
letter-spacing: -.005em;
}
.hero__legende-detail {
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(250,247,242,.78);
}
/* Le changement de photo change la légende : un fondu bref évite le
clignotement sec d'un texte remplacé d'un coup. */
.hero__legende.est-en-transition { opacity: 0; }
.hero__legende { transition: opacity .34s ease; }
/* ---- Index éditorial ---- */
.hero__index {
position: absolute;
left: clamp(20px, 3vw, 40px);
right: clamp(20px, 3vw, 40px);
bottom: clamp(18px, 2.2vw, 26px);
z-index: 2;
display: flex;
align-items: center;
gap: 4px;
}
.hero__index-btn {
appearance: none;
border: 0;
background: none;
cursor: pointer;
min-width: 44px;
height: 44px;
padding: 0 6px;
font-family: var(--sans);
font-size: .74rem;
letter-spacing: .16em;
color: rgba(250,247,242,.5);
transition: color var(--t);
}
.hero__index-btn:hover { color: rgba(250,247,242,.85); }
.hero__index-btn.is-actif { color: var(--champagne); }
.hero__index-btn:focus-visible { outline: 2px solid var(--champagne); outline-offset: -8px; }
/* Jauge : elle se remplit sur la durée d'un visuel. Elle occupe la place
restante, ce qui donne à l'index son allure de générique. */
.hero__jauge {
flex: 1;
height: 1px;
margin-left: 10px;
background: rgba(250,247,242,.2);
position: relative;
overflow: hidden;
}
.hero__jauge i {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: var(--champagne);
display: block;
}
/* ---- Entrée en escalier ----
Volontairement en CSS pur, sans JavaScript. Une version pilotée
par « requestAnimationFrame » laisserait le texte invisible si
l’appel ne se déclenchait pas : onglet ouvert en arrière-plan,
script en échec, navigateur ancien. Une animation CSS, elle,
se termine toujours — « both » garantit l’état final. */
@keyframes heroEntree {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
[data-hero-entree] > * { animation: heroEntree .75s cubic-bezier(.22,.61,.36,1) both; }
[data-hero-entree] > *:nth-child(1) { animation-delay: .06s; }
[data-hero-entree] > *:nth-child(2) { animation-delay: .14s; }
[data-hero-entree] > *:nth-child(3) { animation-delay: .22s; }
[data-hero-entree] > *:nth-child(4) { animation-delay: .30s; }
[data-hero-entree] > *:nth-child(5) { animation-delay: .38s; }
[data-hero-entree] > *:nth-child(6) { animation-delay: .46s; }
/* ---- Titre : on gagne en présence ---- */
.hero h1 {
/* Assez grand pour que la ligne franchisse vraiment la limite des
deux volets : a 1440 px, « sans rien couper » mesure 712 px et
la photo commence a 719. Une marge negative seule ne suffisait
pas — elle elargit la boite, pas le texte, qui reste cale a
gauche. Verifie : le panneau garde 146 px de marge en hauteur. */
font-size: clamp(2.7rem, 7vw, 6.6rem);
line-height: .99;
letter-spacing: -.032em;
}
/* ---- Sur mobile, la photo passe devant : c'est elle qui accroche ---- */
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; }
/* La photo passe devant, mais sans manger tout l ecran : a 768 px
elle faisait 941 px de haut et repoussait le titre hors de vue.
Le premier ecran doit montrer la photo ET la promesse. */
/* Hauteur bornee plutot que rapport impose : avec « aspect-ratio »,
limiter la hauteur retrecissait AUSSI la largeur, et la photo ne
touchait plus les bords. Ici elle tient toute la largeur, et le
cadrage est absorbe par object-fit: cover. */
.hero__visuel { order: -1; aspect-ratio: auto; height: clamp(380px, 62vh, 640px); min-height: 0; }
.hero__panneau { padding-top: clamp(34px, 7vw, 56px); }
.hero__panneau::after { display: none; }
}
@media (max-width: 560px) {
.hero__visuel { aspect-ratio: auto; height: clamp(380px, 58vh, 560px); }
}
/* ---- Rien ne bouge si le système demande le calme ---- */
@media (prefers-reduced-motion: reduce) {
.hero__photo.is-actif { animation: none; transform: none; }
.hero__photo { transition: none; }
[data-hero-entree] > * { animation: none; opacity: 1; transform: none; }
.hero__jauge { display: none; }
}
/* ===================================================================
50. HERO — la composition casse sa grille
===================================================================
Jusqu'ici les deux volets se touchaient sans jamais se croiser : une
ligne droite au milieu, tout bien rangé de part et d'autre. Correct,
mais sage. Trois gestes le sortent de là.
1. LE TITRE DÉBORDE SUR LA PHOTO. C'est le geste éditorial par
excellence — le texte franchit la marge au lieu de s'arrêter net.
Le risque est le contraste : on l'annule en fonçant la bande de
photo que le titre survole, et en n'autorisant le débordement
qu'au-dessus de 1100 px, là où il y a la place.
2. UN FILET SE TRACE sous la ligne en italique, une seconde après
l'arrivée. Animé en « scaleX », donc porté par le compositeur.
3. LA LÉGENDE DEVIENT UN LIEN. Une photo de perruque qui ne mène
nulle part est une affiche ; avec « Voir ce modèle », elle devient
une porte d'entrée dans le catalogue.
=================================================================== */
/* ---- 1. Le titre franchit la marge ---- */
@media (min-width: 1100px) {
.hero__panneau { z-index: 2; }
.hero h1 {
position: relative;
z-index: 3;
margin-right: calc(-1 * clamp(110px, 12vw, 200px));
}
/* La bande de photo survolée par le titre est assombrie : sans cela,
une chevelure blond clair passerait sous le texte. */
.hero__grain {
background:
linear-gradient(to top, rgba(13,13,15,.94) 0%, rgba(13,13,15,.80) 16%, rgba(13,13,15,.40) 34%, transparent 54%),
/* Mesure a l appui : avec 0,74 -> 0,46 le titre tombait a 2,78:1
sur la meche la plus claire, sous le seuil de 3:1. A 0,88 -> 0,72
sur la bande que le texte survole, on passe au-dessus de 4:1
sur les trois visuels. */
linear-gradient(to right, rgba(13,13,15,.88) 0%, rgba(13,13,15,.72) 12%, rgba(13,13,15,.30) 26%, transparent 40%);
}
}
/* ---- 2. Le filet qui se trace ---- */
.hero h1 em {
position: relative;
display: inline-block;
}
.hero h1 em::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -.02em;
height: 2px;
background: var(--champagne);
opacity: .45;
transform: scaleX(0);
transform-origin: left center;
animation: heroTrait 1s cubic-bezier(.22,.61,.36,1) 1s both;
}
@keyframes heroTrait { to { transform: scaleX(1); } }
/* ---- 3. Le lien de la légende ---- */
.hero__legende-lien {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
font-size: .76rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--champagne);
border-bottom: 1px solid rgba(198,168,124,.4);
padding-bottom: 3px;
align-self: flex-start;
transition: color var(--t), border-color var(--t);
}
.hero__legende-lien svg {
width: 15px; height: 15px;
stroke: currentColor;
fill: none;
stroke-width: 1.4;
transition: transform var(--t);
}
.hero__legende-lien:hover { color: var(--blanc); border-color: var(--blanc); }
.hero__legende-lien:hover svg { transform: translateX(4px); }
.hero__legende-lien:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
/* ---- L'index passe à droite : la jauge relie la légende aux chiffres ---- */
.hero__index { justify-content: flex-end; }
.hero__jauge { order: -1; margin-left: 0; margin-right: 14px; }
/* Le lien ajoute une ligne : la légende remonte pour ne pas croiser l'index. */
.hero__legende { bottom: clamp(84px, 8.5vw, 104px); }
@media (prefers-reduced-motion: reduce) {
.hero h1 em::after { animation: none; transform: scaleX(1); }
}
/* ===================================================================
51. HERO — le mot porte la matière, et le visuel se balaie
===================================================================
Deux partis pris qu'on ne voit pas ailleurs dans ce métier.
1. LE MOT « TÊTE » EST REMPLI PAR LA CHEVELURE. Il prend la couleur
de la perruque affichée et change avec elle : blond, puis rose,
puis brun. Le titre cesse d'être une légende posée à côté de la
photo — il en est fait.
Filet de sécurité : un aplat champagne est déclaré DERRIÈRE
l'image. Si le fichier n'arrivait pas, le mot resterait rempli de
champagne au lieu de devenir invisible. Et les navigateurs qui ne
savent pas découper un fond dans du texte gardent simplement le
blanc — c'est le rôle du bloc @supports.
2. LE CHANGEMENT DE VISUEL SE BALAIE au lieu de se fondre. Un fondu
passe par une bouillie où l'on voit les deux photos à la fois ;
un balayage garde chaque image nette, et un filet champagne le
suit comme une lame.
=================================================================== */
/* ---- 1. Le mot rempli par la matière ---- */
.hero__mot {
background-color: var(--champagne);
background-image: var(--ml-hero-photo);
background-size: 150% auto;
background-position: 50% 18%;
background-repeat: no-repeat;
color: var(--blanc);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.hero__mot {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
transition: background-image .55s ease;
}
}
/* ---- 2. Le balayage ---- */
.hero__photo {
opacity: 1;
clip-path: inset(0 0 0 100%);
z-index: 0;
}
.hero__photo.est-dessous {
clip-path: inset(0 0 0 0);
z-index: 1;
transition: none;
}
.hero__photo.is-actif {
clip-path: inset(0 0 0 0);
z-index: 2;
transition: clip-path 1.05s cubic-bezier(.76, 0, .24, 1);
}
/* La lame champagne qui accompagne le balayage. Animée en « transform »,
la seule propriété que le compositeur déplace sans repeindre. */
.hero__balai {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 2px;
background: var(--champagne);
box-shadow: 0 0 26px 5px rgba(198, 168, 124, .5);
z-index: 3;
opacity: 0;
pointer-events: none;
transform: translateX(0);
}
.hero__balai.est-actif { animation: heroBalai 1.05s cubic-bezier(.76, 0, .24, 1); }
@keyframes heroBalai {
0% { transform: translateX(var(--ml-largeur, 700px)); opacity: 0; }
12% { opacity: .95; }
88% { opacity: .95; }
100% { transform: translateX(0); opacity: 0; }
}
/* ---- 3. Le regard suit la souris ---- */
/* On utilise « translate », propriété distincte de « transform » : le
mouvement lent du visuel passe par « transform », les deux cohabitent
sans se marcher dessus. */
.hero__photo { translate: var(--ml-vx, 0) var(--ml-vy, 0); }
@media (hover: hover) and (pointer: fine) {
.hero__photo { transition: clip-path 1.05s cubic-bezier(.76,0,.24,1), translate .5s cubic-bezier(.22,.61,.36,1); }
}
@media (prefers-reduced-motion: reduce) {
.hero__photo { transition: none; translate: none; }
.hero__balai { display: none; }
.hero__mot { transition: none; }
}
/* ===================================================================
52. HERO — remise en ordre des plans, et lisibilité du mot
===================================================================
Deux corrections mesurées sur le rendu.
1. ORDRE DES PLANS. En donnant un z-index aux photos pour le
balayage, je les avais fait passer AU-DESSUS du voile : la
légende se délavait et le dégradé sous le titre disparaissait.
L'ordre est désormais explicite, du fond vers la surface :
photos 0-2 · voile 3 · lame 4 · légende et index 5
2. LE MOT « TÊTE » DISPARAISSAIT sur le panneau noir : une chevelure
brune remplissant un mot posé sur du presque-noir ne se voit pas.
« background-blend-mode: screen » mélange la photo avec l'aplat
champagne au lieu de la poser dessus : le mot reste clair quelle
que soit la teinte, et garde la couleur de la perruque.
=================================================================== */
.hero__grain { z-index: 3; }
.hero__balai { z-index: 4; }
.hero__legende,
.hero__index { z-index: 5; }
.hero__mot {
background-blend-mode: screen;
background-size: 210% auto;
background-position: 48% 26%;
}
/* ===================================================================
53. HERO — deux mécanismes refaits
===================================================================
1. LE MOT CHANGE SANS TRANSITION. « background-image » ne s'interpole
pas : le navigateur la bascule d'un coup à mi-parcours. Avec une
transition de 0,55 s, la valeur restait donc l'ANCIENNE pendant
275 ms — assez pour croire que rien ne se passait. On la retire.
2. LE BALAYAGE PASSE PAR UNE ANIMATION, plus par une transition.
Une animation rejoue depuis le début chaque fois qu'on repose la
classe ; une transition, non. Surtout, on abandonne la classe
« est-dessous » et son minuteur de 1,1 s : il entrait en course
avec la transition de 1,05 s et laissait les photos dans des
états incohérents. C'est désormais le JavaScript qui pose les
plans, une fois, sans délai — donc sans course possible.
=================================================================== */
.hero__mot { transition: none; }
.hero__photo { clip-path: inset(0); }
.hero__photo.is-actif {
clip-path: inset(0);
transition: none;
animation: heroRespire 13s ease-out forwards,
heroBalayage 1.05s cubic-bezier(.76, 0, .24, 1);
}
@keyframes heroBalayage {
from { clip-path: inset(0 0 0 100%); }
to { clip-path: inset(0 0 0 0); }
}
/* Le décalage au pointeur garde sa transition ; le découpage, non. */
@media (hover: hover) and (pointer: fine) {
.hero__photo { transition: translate .5s cubic-bezier(.22, .61, .36, 1); }
}
@media (prefers-reduced-motion: reduce) {
.hero__photo.is-actif { animation: none; }
}
/* ===================================================================
54. HERO — le balayage ne doit jamais pouvoir masquer la photo
===================================================================
Le balayage par ANIMATION avait un defaut grave : une animation
figee — onglet en arriere-plan, rendu suspendu — reste bloquee sur
sa PREMIERE image. Or la premiere image de « heroBalayage » decoupe
la photo a 100 %, donc invisible. On se retrouvait avec la legende
« Rose pastel » au-dessus d'une photo blonde : le texte avait
change, l'image non.
On repasse donc a une TRANSITION, dont l'etat final est ecrit en
ligne par le JavaScript. Si la transition ne joue pas, la propriete
vaut deja sa valeur d'arrivee : la photo est simplement la, sans
effet. Le decor peut manquer, jamais le contenu.
=================================================================== */
.hero__photo.is-actif {
animation: heroRespire 13s ease-out forwards;
transition: clip-path 1.05s cubic-bezier(.76, 0, .24, 1);
}
@media (prefers-reduced-motion: reduce) {
.hero__photo.is-actif { animation: none; transition: none; }
}