/* ==========================================================================
TERRITOIRE D'HOMME — feuille de style principale
Palette, typographie et composants définis selon la direction artistique.
========================================================================== */
/* ---------- Polices ----------
Chargées via dans le de chaque page HTML, pas ici en
@import : un @import CSS est bloquant pour le rendu (le navigateur
doit d'abord télécharger et parser ce fichier avant même de découvrir
qu'il faut charger la police), ce qui pénalise le temps d'affichage
et les Core Web Vitals — donc le référencement. */
/* ---------- Design tokens ---------- */
:root{
/* Couleurs de marque */
--color-black: #111111;
--color-ivory: #F3F0E9;
--color-sand: #C8BDAA;
--color-brown: #4A382D;
--color-green: #24342D;
/* Variantes / usages dérivés */
--color-ivory-dim: #e8e3d6;
--color-black-soft: #1a1a1a;
--overlay-dark: rgba(17,17,17,.55);
--overlay-dark-strong: rgba(17,17,17,.72);
--overlay-black-grad: linear-gradient(180deg, rgba(17,17,17,.4) 0%, rgba(17,17,17,0) 16%, rgba(17,17,17,.15) 45%, rgba(17,17,17,.82) 100%);
--hairline: rgba(17,17,17,.12);
--hairline-on-dark: rgba(243,240,233,.18);
/* Typographie */
--font-display: 'Cormorant Garamond', 'Times New Roman', serif;
--font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
/* Rythme / espacement */
--section-pad-y: clamp(5rem, 10vw, 9rem);
--container-w: 1360px;
--container-pad: clamp(1.25rem, 5vw, 3.5rem);
--gutter: clamp(1.25rem, 3vw, 2.5rem);
/* Mouvement */
--ease: cubic-bezier(.22,.61,.36,1);
--dur-fast: .4s;
--dur-med: .9s;
--dur-slow: 1.4s;
--header-h: 92px;
}
@media (max-width: 720px){
:root{ --header-h: 72px; }
}
/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{
scroll-behavior: smooth;
/* Légèrement inférieur à --header-h : le header est toujours compact
(voir .is-scrolled) au moment où une ancre est atteinte. */
scroll-padding-top: calc(var(--header-h) - 16px);
}
body, h1, h2, h3, h4, p, figure, blockquote{ margin: 0; }
ul{ list-style: none; margin: 0; padding: 0; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea{ font: inherit; }
body{
background: var(--color-ivory);
color: var(--color-black);
font-family: var(--font-body);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* ---------- Accessibilité ---------- */
/* Texte présent dans le DOM (lecteurs d'écran + robots d'indexation)
mais invisible à l'écran — utilisé notamment à côté du logo masqué en
CSS (.logo-img), pour que "Territoire d'Homme" reste un vrai texte de
page et pas seulement un attribut aria-label. */
.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: 1rem;
top: -60px;
background: var(--color-black);
color: var(--color-ivory);
padding: .85rem 1.25rem;
font-family: var(--font-body);
font-size: .8rem;
letter-spacing: .08em;
text-transform: uppercase;
z-index: 999;
transition: top .3s var(--ease);
}
.skip-link:focus{ top: 1rem; }
:focus-visible{
outline: 2px solid var(--color-brown);
outline-offset: 3px;
}
.site-header :focus-visible,
.hero :focus-visible,
.section--dark :focus-visible{
outline-color: var(--color-sand);
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.reveal{ opacity: 1 !important; transform: none !important; }
[data-parallax]{ transform: none !important; }
}
/* ---------- Conteneurs & rythme ---------- */
.container{
max-width: var(--container-w);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.section{ padding-block: var(--section-pad-y); }
.section--tight{ padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.section--dark{ background: var(--color-black); color: var(--color-ivory); }
.section--sand{ background: var(--color-sand); color: var(--color-black); }
.eyebrow{
font-family: var(--font-body);
font-size: .72rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--color-brown);
display: inline-flex;
align-items: center;
gap: .75rem;
}
.section--dark .eyebrow{ color: var(--color-sand); }
.eyebrow::before{
content: '';
width: 28px;
height: 1px;
background: currentColor;
opacity: .6;
}
/* ---------- Typographie ---------- */
h1, h2, h3, h4{
font-family: var(--font-display);
font-weight: 500;
letter-spacing: .01em;
line-height: 1.08;
color: var(--color-black);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.hero h1, .hero h2, .hero h3,
.detail-content h1, .detail-content h2, .detail-content h3,
.cc-hero h1, .cc-hero h2, .cc-hero h3{
color: var(--color-ivory);
}
.detail-content .eyebrow,
.cc-hero .eyebrow{ color: var(--color-sand); }
h2{
font-size: clamp(2.1rem, 4.4vw, 3.4rem);
font-weight: 500;
}
h3{
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
font-weight: 500;
}
.section-lede{
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(.98rem, 1.2vw, 1.08rem);
line-height: 1.8;
color: var(--color-brown);
max-width: 46ch;
}
.section--dark .section-lede, .cc-hero .section-lede{ color: var(--color-ivory-dim); }
.quote{
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
line-height: 1.5;
}
.section-head{
display: flex;
flex-direction: column;
gap: 1.1rem;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head--center{ align-items: center; text-align: center; margin-inline: auto; }
/* ---------- Boutons & liens ---------- */
.btn{
display: inline-flex;
align-items: center;
gap: .9rem;
padding: 1rem 1.9rem;
font-family: var(--font-body);
font-size: .74rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
border: 1px solid currentColor;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
white-space: nowrap;
}
.btn-primary{
background: var(--color-ivory);
color: var(--color-black);
border-color: var(--color-ivory);
}
.btn-primary:hover{
background: transparent;
color: var(--color-ivory);
border-color: var(--color-ivory);
}
.btn-outline{
background: transparent;
color: var(--color-ivory);
border-color: rgba(243,240,233,.55);
}
.btn-outline:hover{
background: var(--color-ivory);
color: var(--color-black);
border-color: var(--color-ivory);
}
.btn-dark{
background: var(--color-black);
color: var(--color-ivory);
border-color: var(--color-black);
}
.btn-dark:hover{
background: transparent;
color: var(--color-black);
}
.btn-ghost-line{
border: 0;
padding: .3rem 0;
position: relative;
font-size: .74rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
}
.btn-ghost-line::after{
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 100%; height: 1px;
background: currentColor;
transform: scaleX(.35);
transform-origin: left;
transition: transform var(--dur-fast) var(--ease);
opacity: .55;
}
.btn-ghost-line:hover::after{ transform: scaleX(1); opacity: 1; }
.btn[aria-disabled]{ opacity:.45; pointer-events:none; }
/* ==========================================================================
HEADER
========================================================================== */
.site-header{
position: fixed;
inset-inline: 0;
top: 0;
z-index: 90;
height: var(--header-h);
display: flex;
align-items: center;
color: var(--color-ivory);
background: transparent;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease);
border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{ height: calc(var(--header-h) - 14px); }
.site-header.theme-light{ color: var(--color-black); }
.site-header.theme-dark{ color: var(--color-ivory); }
.site-header:not(.is-transparent).theme-light{
background: rgba(243,240,233,.94);
border-bottom-color: var(--hairline);
backdrop-filter: blur(10px);
}
.site-header:not(.is-transparent).theme-dark{
background: rgba(17,17,17,.92);
border-bottom-color: var(--hairline-on-dark);
backdrop-filter: blur(10px);
}
.btn-nav{
border: 1px solid currentColor;
padding: .75rem 1.5rem;
font-size: .7rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
transition: background var(--dur-fast) var(--ease);
}
.btn-nav:hover{ background: rgba(127,127,127,.16); }
.site-header .container{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.logo{
font-family: var(--font-display);
font-size: 1.3rem;
letter-spacing: .12em;
font-weight: 600;
}
.logo small{
display: block;
font-family: var(--font-body);
font-size: .56rem;
font-weight: 500;
letter-spacing: .3em;
color: var(--color-sand);
margin-top: .15rem;
}
.logo-img{
display: block;
width: 96px; /* logo.png fait 1024x366 (ratio ~2.8:1) — ajustez si vous changez de fichier */
height: 34px;
/* Rempli avec currentColor plutôt qu'une image figée : le logo suit
automatiquement le noir/ivoire du header selon le thème de la
section survolée, exactement comme le faisait le texte avant lui.
Le PNG doit avoir un fond TRANSPARENT (pas blanc/noir) — voir
assets/img/README.txt. */
background-color: currentColor;
-webkit-mask: url("../assets/img/logo.png") no-repeat left center / contain;
mask: url("../assets/img/logo.png") no-repeat left center / contain;
}
.main-nav{ display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
.main-nav a{
font-size: .74rem;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
position: relative;
padding-bottom: 4px;
}
.main-nav a::after{
content:'';
position:absolute; left:0; bottom:0;
width:100%; height:1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform var(--dur-fast) var(--ease);
opacity: .7;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after{ transform: scaleX(1); transform-origin: left; }
.header-actions{ display: flex; align-items: center; gap: 1.6rem; }
.nav-toggle{
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 34px;
height: 34px;
}
.nav-toggle span{
display: block;
width: 100%;
height: 1px;
background: currentColor;
transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
.mobile-nav{
position: fixed;
inset: 0;
background: var(--color-black);
color: var(--color-ivory);
display: flex;
flex-direction: column;
/* "safe center" : centre le contenu quand il tient dans l'écran, mais
s'aligne au début plutôt que de couper le haut du contenu une fois
que ça dépasse et qu'on scrolle (piège classique de justify-content
center en flex overflow). Le nombre de liens a grandi (Univers,
L'équipe…), donc ce cas arrive désormais sur petit écran / paysage. */
justify-content: safe center;
padding: calc(var(--header-h) + 1.5rem) var(--container-pad) 2rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateY(-100%);
transition: transform var(--dur-med) var(--ease);
z-index: 89;
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav ul{ display: flex; flex-direction: column; gap: 1.1rem; }
.mobile-nav a{
font-family: var(--font-display);
font-size: clamp(2rem, 8vw, 2.6rem);
font-weight: 500;
}
.mobile-nav .btn{
margin-top: 2.2rem;
align-self: flex-start;
max-width: 100%;
font-family: var(--font-body);
font-size: .74rem;
font-weight: 600;
letter-spacing: .16em;
white-space: normal;
}
.mobile-nav-foot{
margin-top: 3rem;
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-sand);
}
/* Écran bas (petit téléphone, ou paysage) : resserre le menu pour que
les 8 liens + CTA + réseaux sociaux tiennent sans avoir à scroller. */
@media (max-height: 700px){
.mobile-nav ul{ gap: .6rem; }
.mobile-nav a{ font-size: clamp(1.5rem, 7vw, 2rem); }
.mobile-nav .btn{ margin-top: 1.4rem; }
.mobile-nav-foot{ margin-top: 1.6rem; }
}
.scroll-cue-label{
font-size: .62rem;
letter-spacing: .2em;
text-transform: uppercase;
}
@media (max-width: 900px){
.main-nav{ display: none; }
.header-actions .btn-nav{ display: none; }
.nav-toggle{ display: flex; }
}
/* ==========================================================================
PLACEHOLDER PHOTOGRAPHIQUE
Emplacements de prise de vue en attendant les photos réelles de la marque.
========================================================================== */
.ph{
position: relative;
overflow: hidden;
background:
radial-gradient(115% 85% at 22% 12%, rgba(200,189,170,.4) 0%, rgba(200,189,170,0) 48%),
linear-gradient(155deg, rgba(120,92,68,.9) 0%, rgba(58,44,36,.92) 46%, rgba(30,38,33,.94) 78%, rgba(17,17,17,.96) 100%);
isolation: isolate;
}
.ph::before{
/* grain léger */
content: '';
position: absolute; inset: -20%;
background-image: url("data:image/svg+xml;utf8,");
opacity: .18;
mix-blend-mode: overlay;
pointer-events: none;
}
.ph::after{
/* vignette douce */
content: '';
position: absolute; inset: 0;
background: radial-gradient(120% 100% at 50% 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.3) 100%);
pointer-events: none;
}
.ph img{
width: 100%; height: 100%;
object-fit: cover;
position: absolute; inset: 0;
}
.ph-tag{
position: absolute;
left: 1.3rem;
bottom: 1.3rem;
z-index: 2;
display: flex;
align-items: baseline;
gap: .55rem;
color: var(--color-ivory);
max-width: calc(100% - 2.6rem);
}
.ph-tag .ph-mark{
font-family: var(--font-display);
font-style: italic;
font-size: .95rem;
color: var(--color-sand);
flex-shrink: 0;
}
.ph-tag .ph-label{
font-size: .64rem;
letter-spacing: .12em;
text-transform: uppercase;
opacity: .82;
line-height: 1.4;
}
.ph-frame{
position: absolute; inset: 14px;
border: 1px solid rgba(243,240,233,.22);
pointer-events: none;
z-index: 1;
}
.ph-frame::before, .ph-frame::after{
content:'';
position:absolute; width:9px; height:9px;
}
/* ---------- Rideau d'ouverture ----------
Deux panneaux qui se lèvent pour dévoiler l'image au scroll (ou au
chargement pour le hero) : le geste signature du site. */
.ph-curtain{
position: absolute;
left: 0; right: 0;
height: 51%;
background: var(--color-black);
z-index: 5;
transition: transform 1.05s cubic-bezier(.76,0,.1,1);
}
.ph-curtain::after{
content: '';
position: absolute; inset: 0;
background: linear-gradient(155deg, rgba(120,92,68,.55) 0%, rgba(17,17,17,.15) 100%);
opacity: .5;
}
.ph-curtain--top{ top: 0; transform-origin: top; }
.ph-curtain--bottom{ bottom: 0; transform-origin: bottom; }
.ph.is-open .ph-curtain--top{ transform: translateY(-101%); }
.ph.is-open .ph-curtain--bottom{ transform: translateY(101%); }
@media (prefers-reduced-motion: reduce){
.ph-curtain{ transition: none; }
.ph-curtain--top{ transform: translateY(-101%); }
.ph-curtain--bottom{ transform: translateY(101%); }
}
/* ratios utilitaires */
.ph--portrait{ aspect-ratio: 3/4; }
.ph--tall{ aspect-ratio: 4/5.4; }
.ph--square{ aspect-ratio: 1/1; }
.ph--wide{ aspect-ratio: 16/10; }
.ph--cinema{ aspect-ratio: 21/9; }
.ph--full{ width:100%; height:100%; aspect-ratio: auto; }
[data-parallax]{ will-change: transform; }
/* ==========================================================================
HERO
========================================================================== */
.hero{
position: relative;
overflow: hidden;
min-height: 100svh;
display: flex;
align-items: flex-end;
color: var(--color-ivory);
background: var(--color-black);
}
.hero-media{
position: absolute; inset: 0;
z-index: 0;
}
.hero-media .ph{ position:absolute; inset: -6%; width: 112%; height: 112%; }
.hero-media::after{
content:'';
position:absolute; inset:0;
background: var(--overlay-black-grad);
z-index: 1;
}
.hero-content{
position: relative;
z-index: 2;
width: 100%;
padding-bottom: clamp(3.5rem, 8vw, 6rem);
padding-top: calc(var(--header-h) + 2rem);
}
.hero-content .container{
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2rem;
}
.hero-eyebrow{
color: var(--color-sand);
margin-bottom: 1.4rem;
}
.hero-title{
font-size: clamp(2.6rem, 7.2vw, 5.6rem);
font-weight: 500;
letter-spacing: .01em;
line-height: 1.02;
max-width: 16ch;
}
.hero-title em{ font-style: italic; color: var(--color-sand); }
.hero-sub{
margin-top: 1.6rem;
font-family: var(--font-body);
font-size: clamp(.95rem, 1.4vw, 1.12rem);
color: var(--color-ivory-dim);
max-width: 34ch;
line-height: 1.7;
}
.hero-meta{
margin-top: 1.9rem;
display: flex;
align-items: center;
gap: 1rem;
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--color-ivory);
}
.hero-meta .dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--color-sand); }
.hero-ctas{
margin-top: 2.4rem;
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.hero-tag{
writing-mode: vertical-rl;
transform: rotate(180deg);
justify-self: end;
align-self: stretch;
display: flex;
align-items: center;
gap: .9rem;
font-size: .68rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--color-ivory-dim);
padding-bottom: 1rem;
border-left: 1px solid var(--hairline-on-dark);
padding-left: 1rem;
}
.hero-tag .sep{ width: 1px; height: 26px; background: var(--hairline-on-dark); }
.scroll-cue{
position: absolute;
left: 50%; bottom: 1.8rem;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
color: var(--color-ivory-dim);
}
.scroll-cue .line{
width: 1px; height: 46px;
background: linear-gradient(var(--color-ivory-dim), transparent);
overflow: hidden;
position: relative;
}
.scroll-cue .line::after{
content:'';
position:absolute; left:0; top:-100%;
width:100%; height:100%;
background: var(--color-sand);
animation: cue-drop 2.4s var(--ease) infinite;
}
@keyframes cue-drop{
0%{ top: -100%; }
60%{ top: 100%; }
100%{ top: 100%; }
}
@media (max-width: 720px){
.hero-content .container{ grid-template-columns: 1fr; }
.hero-tag{ display: none; }
.hero{ align-items: flex-end; }
}
/* ==========================================================================
UNIVERS
========================================================================== */
.univers-grid{
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.univers-media{ position: relative; }
.univers-media .ph{ border-radius: 2px; }
.univers-media .ph-accent{
position: absolute;
width: 46%;
bottom: -8%; right: -9%;
border: 8px solid var(--color-ivory);
box-shadow: 0 30px 60px -20px rgba(17,17,17,.35);
z-index: 3;
}
.univers-text > p{ margin-top: 1.4rem; }
.univers-pillars{
margin-top: 2.6rem;
display: grid;
gap: 1.6rem;
}
.univers-pillar{
display: grid;
grid-template-columns: 34px 1fr;
gap: 1.1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--hairline);
}
.univers-pillar:first-child{ border-top: 1px solid var(--hairline); }
.univers-pillar-icon{
width: 34px; height: 34px;
color: var(--color-brown);
}
.univers-pillar h3{ margin-bottom: .4rem; font-size: 1.15rem; }
.univers-pillar p{
font-size: .92rem;
color: var(--color-brown);
line-height: 1.7;
max-width: 42ch;
}
@media (max-width: 860px){
.univers-grid{ grid-template-columns: 1fr; }
.univers-media .ph-accent{ display: none; }
}
/* ==========================================================================
MARQUES — carrousel défilant
========================================================================== */
.marques-carousel{
position: relative;
overflow: hidden;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.marques-track{
display: flex;
width: max-content;
animation: marques-scroll var(--marquee-duration, 34s) linear infinite;
}
.marques-carousel:hover .marques-track,
.marques-carousel:focus-within .marques-track{ animation-play-state: paused; }
@keyframes marques-scroll{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}
.marque-item{
flex: 0 0 auto;
border-right: 1px solid var(--hairline);
min-width: 190px;
min-height: 132px;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem 2.25rem;
text-align: center;
transition: background var(--dur-fast) var(--ease);
}
.marque-item:hover{ background: rgba(74,56,45,.06); }
.marque-name{
font-family: var(--font-display);
font-size: clamp(1.15rem, 2vw, 1.5rem);
letter-spacing: .04em;
color: var(--color-black);
opacity: .85;
white-space: nowrap;
transition: opacity var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease);
}
.marque-item:hover .marque-name{ opacity: 1; letter-spacing: .07em; }
.marques-note{
margin-top: 2rem;
font-size: .82rem;
color: var(--color-brown);
font-style: italic;
font-family: var(--font-display);
}
@media (prefers-reduced-motion: reduce){
.marques-track{ animation: none; }
.marques-carousel{
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
}
/* ==========================================================================
SÉLECTION (catégories)
========================================================================== */
.selection-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(.75rem, 1.6vw, 1.25rem);
}
.selection-card{
position: relative;
color: var(--color-ivory);
overflow: hidden;
}
.selection-card .ph{ aspect-ratio: 3/4.1; }
.selection-card:nth-child(3n+1) .ph,
.selection-card:nth-child(5) .ph{ aspect-ratio: 3/4.1; }
.selection-card-text{
position: absolute; left: 0; right: 0; bottom: 0;
z-index: 2;
padding: 1.4rem;
background: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,.42) 55%, rgba(17,17,17,.72) 100%);
}
.selection-card-text h3{ font-size: 1.25rem; }
.selection-card-text p{
margin-top: .35rem;
font-size: .78rem;
color: var(--color-ivory-dim);
max-width: 26ch;
opacity: 0;
transform: translateY(6px);
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.selection-card:hover .selection-card-text p,
.selection-card:focus-within .selection-card-text p{ opacity: 1; transform: translateY(0); }
.selection-card:hover .ph, .selection-card:focus-within .ph{ }
.selection-card .ph img, .selection-card .ph{ transition: transform var(--dur-slow) var(--ease); }
.selection-card:hover .ph::after{ background: radial-gradient(120% 100% at 50% 20%, rgba(0,0,0,0) 20%, rgba(0,0,0,.5) 100%); }
@media (max-width: 980px){
.selection-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
.selection-grid{ grid-template-columns: 1fr 1fr; gap: .6rem; }
.selection-card-text{ padding: 1rem; }
.selection-card-text p{ opacity: 1; transform: none; }
.selection-card .ph-tag{ display: none; }
}
/* ==========================================================================
DÉTAIL — L'élégance dans chaque détail
========================================================================== */
.detail-section{ position: relative; color: var(--color-ivory); overflow: hidden; }
.detail-photos{ display: flex; }
.detail-photos .ph{ flex: 1 1 0; min-height: 76vh; }
.detail-section::after{
/* voile dégradé gauche → droite : garde le texte lisible quelle que
soit la photo du triptyque affichée derrière lui */
content: '';
position: absolute; inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(17,17,17,.8) 0%, rgba(17,17,17,.35) 42%, rgba(17,17,17,0) 68%);
pointer-events: none;
}
.detail-content{
position: absolute; inset: 0;
z-index: 2;
display: flex;
align-items: center;
}
@media (max-width: 700px){
/* Les trois photos restent côte à côte, mais moins hautes : sinon la
section ferait près de 76vh de haut pour à peine 33vw de large. */
.detail-photos .ph{ min-height: 46vh; }
}
@media (max-width: 480px){
/* Sous ~480px, chaque photo ne fait plus qu'une trentaine de pixels
de large : la légende ("Ph. …") n'a plus la place de s'afficher
proprement, et une hauteur de 46vh donne une bande très étirée.
On raccourcit encore et on masque la légende (déjà le traitement
appliqué à .selection-card sur grille étroite, même logique ici). */
.detail-photos .ph{ min-height: 34vh; }
.detail-photos .ph-tag{ display: none; }
}
.detail-inner{ max-width: 480px; }
.detail-inner p{ margin-top: 1.2rem; color: var(--color-ivory-dim); font-size: 1rem; line-height: 1.8; }
/* ==========================================================================
BOUTIQUE
========================================================================== */
.boutique-top{
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: end;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.boutique-address{
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
font-style: italic;
color: var(--color-brown);
}
.boutique-gallery{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, minmax(160px, 1fr));
gap: clamp(.6rem, 1.4vw, 1.1rem);
}
.boutique-gallery .ph:nth-child(1){ grid-column: 1 / 4; grid-row: 1 / 3; }
.boutique-gallery .ph:nth-child(2){ grid-column: 4 / 7; grid-row: 1 / 2; }
.boutique-gallery .ph:nth-child(3){ grid-column: 4 / 6; grid-row: 2 / 3; }
.boutique-gallery .ph:nth-child(4){ grid-column: 6 / 7; grid-row: 2 / 3; }
.boutique-info{
margin-top: clamp(2.5rem, 5vw, 4rem);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: stretch;
}
.boutique-card{
background: var(--color-ivory);
border: 1px solid var(--hairline);
padding: clamp(1.6rem, 3vw, 2.4rem);
}
.boutique-card dl{ margin-top: 1.4rem; display: grid; gap: .9rem; }
.boutique-card dt{
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-brown);
opacity: .8;
}
.boutique-card dd{ margin: .2rem 0 0; font-size: .96rem; }
.boutique-card .btn{ margin-top: 1.8rem; }
.map-embed{
position: relative;
min-height: 320px;
border: 1px solid var(--hairline);
overflow: hidden;
filter: grayscale(.25) contrast(1.02);
}
.map-embed iframe{ width: 100%; height: 100%; min-height: 320px; border: 0; display:block; }
@media (max-width: 900px){
.boutique-top{ grid-template-columns: 1fr; }
.boutique-gallery{ grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(3, 200px); }
.boutique-gallery .ph:nth-child(1){ grid-column: 1/3; grid-row: 1/2; }
.boutique-gallery .ph:nth-child(2){ grid-column: 1/2; grid-row: 2/3; }
.boutique-gallery .ph:nth-child(3){ grid-column: 2/3; grid-row: 2/3; }
.boutique-gallery .ph:nth-child(4){ grid-column: 1/3; grid-row: 3/4; }
.boutique-info{ grid-template-columns: 1fr; }
}
/* ==========================================================================
ÉQUIPE
========================================================================== */
.equipe-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(1.6rem, 3vw, 2.6rem);
}
.equipe-card .ph{ margin-bottom: 1.2rem; }
.equipe-card h3{ font-size: 1.2rem; }
.equipe-role{
display:block;
margin-top: .15rem;
font-size: .7rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-brown);
}
.equipe-quote{
margin-top: .9rem;
font-size: .96rem;
line-height: 1.55;
}
.equipe-quote::before{ content: '\201C'; }
.equipe-quote::after{ content: '\201D'; }
/* ==========================================================================
NOS SERVICES — les deux parcours (prêt-à-porter / costume de mariage)
========================================================================== */
.services-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 3.5rem);
}
.service-panel h3{ margin-bottom: 1.1rem; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.service-panel .ph{
max-width: 78%;
margin: 0 auto 1.6rem;
}
.service-panel-text p{ font-size: .92rem; color: var(--color-brown); max-width: 42ch; line-height: 1.75; }
.service-panel-text .btn{ margin-top: 1.5rem; }
@media (max-width: 780px){
.services-grid{ grid-template-columns: 1fr; gap: 2.8rem; }
}
/* ==========================================================================
CONTACT
========================================================================== */
.contact-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2.5rem, 6vw, 5rem);
}
.contact-block h3{ font-size: 1rem; }
.contact-list{ margin-top: 1.6rem; display: grid; gap: 1.3rem; }
.contact-list .item-label{
display:block;
font-size: .66rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-brown);
margin-bottom: .3rem;
}
.contact-list .item-value{ font-size: 1.02rem; }
.contact-list a.item-value{ transition: opacity var(--dur-fast) var(--ease); }
.contact-list a.item-value:hover{ opacity: .6; }
.contact-socials{ margin-top: 2.2rem; display: flex; gap: 1.4rem; }
.contact-address{
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-style: italic;
line-height: 1.35;
}
.contact-cta{ margin-top: 2.2rem; }
@media (max-width: 780px){
.contact-grid{ grid-template-columns: 1fr; gap: 3rem; }
}
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer{
background: var(--color-black);
color: var(--color-ivory-dim);
padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-top{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2.5rem;
flex-wrap: wrap;
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
border-bottom: 1px solid var(--hairline-on-dark);
}
.footer-mark{
font-family: var(--font-display);
font-size: 1.6rem;
letter-spacing: .04em;
white-space: nowrap;
color: var(--color-ivory);
border: 1px solid var(--hairline-on-dark);
width: 68px; height: 68px;
display: flex; align-items: center; justify-content: center;
}
.footer-brand{ margin-top: 1rem; }
.footer-brand strong{
display:block;
font-family: var(--font-body);
font-size: .82rem;
letter-spacing: .2em;
color: var(--color-ivory);
}
.footer-signature{
margin-top: .5rem;
font-family: var(--font-display);
font-style: italic;
color: var(--color-sand);
font-size: 1.05rem;
}
.footer-nav{ display: flex; gap: clamp(2.5rem, 5vw, 5rem); flex-wrap: wrap; }
.footer-nav-col h4{
font-family: var(--font-body);
font-size: .66rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--color-sand);
margin-bottom: 1rem;
font-weight: 600;
}
.footer-nav-col ul{ display: grid; gap: .65rem; }
.footer-nav-col a{ font-size: .88rem; transition: opacity var(--dur-fast) var(--ease); }
.footer-nav-col a:hover{ opacity: .6; }
.footer-link-btn{
background: none;
border: 0;
padding: 0;
margin: 0;
font-family: inherit;
font-size: .88rem;
color: inherit;
text-align: left;
cursor: pointer;
transition: opacity var(--dur-fast) var(--ease);
}
.footer-link-btn:hover{ opacity: .6; }
.footer-bottom{
margin-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
font-size: .72rem;
letter-spacing: .04em;
color: rgba(243,240,233,.45);
}
/* ---------- Reveal on scroll ---------- */
.reveal{
opacity: 0;
transform: translateY(28px) scale(.97);
transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0) scale(1); }
.reveal-delay-1{ transition-delay: .1s; }
.reveal-delay-2{ transition-delay: .2s; }
.reveal-delay-3{ transition-delay: .3s; }
.reveal-delay-4{ transition-delay: .4s; }
/* ---------- Indicateur de progression ----------
Un fin trait qui se remplit au fil du scroll, écho discret du repère
de coordonnées utilisé dans le hero et le pied de page. */
.scroll-progress{
position: fixed;
top: 120px;
bottom: 28px;
right: 22px;
width: 1px;
background: var(--hairline);
z-index: 80;
display: none;
}
.scroll-progress-fill{
position: absolute;
top: 0; left: 0; width: 100%;
height: 0%;
background: var(--color-brown);
transition: height .12s linear;
}
.scroll-progress.is-dark .scroll-progress-fill{ background: var(--color-sand); }
.scroll-progress.is-dark{ background: var(--hairline-on-dark); }
@media (min-width: 901px){
.scroll-progress{ display: block; }
}
@media (prefers-reduced-motion: reduce){
.scroll-progress{ display: none; }
}
/* ---------- Filets de sécurité largeurs étroites ----------
Les enfants de grilles ne rétrécissent pas sous leur contenu par
défaut (bouton/adresse non coupables) : on l'autorise explicitement
pour éviter tout débordement horizontal sur les très petits écrans.
========================================================================== */
.univers-grid > *,
.boutique-info > *,
.contact-grid > *,
.reservation-panel > *{
min-width: 0;
}
@media (max-width: 380px){
.btn{ white-space: normal; text-align: center; }
}
/* ---------- Responsive : ajustements généraux ---------- */
@media (max-width: 720px){
.section{ padding-block: clamp(3.5rem, 12vw, 5.5rem); }
h2{ font-size: clamp(1.9rem, 8vw, 2.6rem); }
}
/* ==========================================================================
CLICK & COLLECT — page dédiée
========================================================================== */
.cc-hero{
background: var(--color-black);
color: var(--color-ivory);
padding-top: calc(var(--header-h) + 3.5rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.cc-hero h1{
font-size: clamp(2.1rem, 5vw, 3.5rem);
max-width: 20ch;
}
.cc-hero .section-lede{ color: var(--color-ivory-dim); max-width: 54ch; margin-top: 1.1rem; }
.cc-hero-ctas{ margin-top: 2.2rem; display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; }
.cc-steps{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--hairline-on-dark);
}
.cc-step-number{
font-family: var(--font-display);
font-style: italic;
font-size: 2rem;
color: var(--color-sand);
line-height: 1;
}
.cc-step h3{ margin-top: .5rem; font-size: 1.08rem; }
.cc-step p{ margin-top: .45rem; font-size: .89rem; color: var(--color-ivory-dim); line-height: 1.65; max-width: 34ch; }
@media (max-width: 780px){
.cc-steps{ grid-template-columns: 1fr; }
}
/* Grille produits */
.produits-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1.4rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.6rem);
}
.produit-card{ display: flex; flex-direction: column; }
.produit-card .ph{ aspect-ratio: 3/3.6; margin-bottom: 1rem; }
.produit-card h3{ font-size: 1.02rem; line-height: 1.3; }
.produit-category{
display: block;
margin-top: .2rem;
font-size: .64rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-brown);
}
.produit-price{
margin-top: .55rem;
font-family: var(--font-display);
font-size: 1.15rem;
color: var(--color-black);
}
.produit-reserve-btn{
margin-top: .9rem;
align-self: flex-start;
color: var(--color-brown);
background: none;
border: 0;
cursor: pointer;
padding: .3rem 0;
}
@media (max-width: 980px){
.produits-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* Bloc formulaire de réservation */
.reservation-panel{
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
@media (max-width: 900px){
.reservation-panel{ grid-template-columns: 1fr; }
}
.cc-form{ display: grid; gap: 1.5rem; }
.cc-field{ display: flex; flex-direction: column; gap: .55rem; }
.cc-field label{
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-brown);
}
.cc-field input,
.cc-field select,
.cc-field textarea{
width: 100%;
max-width: 100%;
border: 0;
border-bottom: 1px solid var(--hairline);
background: transparent;
padding: .6rem .1rem;
font-family: var(--font-body);
font-size: .98rem;
color: var(--color-black);
border-radius: 0;
transition: border-color var(--dur-fast) var(--ease);
}
.cc-field select{ appearance: none; -webkit-appearance: none; }
.cc-field input:focus,
.cc-field select:focus,
.cc-field textarea:focus{
outline: none;
border-color: var(--color-black);
}
.cc-field textarea{ resize: vertical; min-height: 88px; }
.cc-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 600px){
.cc-row{ grid-template-columns: 1fr; }
}
.cc-note{
font-size: .8rem;
color: var(--color-brown);
line-height: 1.65;
max-width: 48ch;
}
.cc-confirm{
display: none;
margin-top: 1.7rem;
padding: 1.4rem 1.6rem;
border: 1px solid var(--hairline);
background: rgba(74,56,45,.06);
font-size: .92rem;
line-height: 1.65;
}
.cc-confirm.is-visible{ display: block; }
.cc-confirm strong{ font-family: var(--font-display); font-style: italic; font-size: 1.05rem; display: block; margin-bottom: .3rem; }
/* ==========================================================================
ESPACE ÉQUIPE (admin/index.html)
========================================================================== */
.admin-body{ min-height: 100vh; background: var(--color-ivory); }
.login-wrap{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
background: var(--color-black);
}
.login-card{
width: 100%;
max-width: 380px;
background: var(--color-ivory);
padding: clamp(2rem, 5vw, 3rem);
}
.login-card h1{ font-size: 1.7rem; margin-top: .3rem; }
.login-card .section-lede{ margin-top: .8rem; margin-bottom: 2rem; max-width: none; }
.login-error{
color: #a83a3a;
font-size: .85rem;
margin-top: 1rem;
min-height: 1.2em;
}
.admin-header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 1.3rem clamp(1.25rem, 5vw, 3.5rem);
background: var(--color-black);
color: var(--color-ivory);
border-bottom: 1px solid var(--hairline-on-dark);
}
.admin-header .logo{ font-size: 1.05rem; }
.admin-user{ display: flex; align-items: center; gap: 1.3rem; font-size: .82rem; color: var(--color-ivory-dim); }
.admin-user button{
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-sand);
cursor: pointer;
}
.admin-user button:hover{ opacity: .7; }
.admin-main{
padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3.5rem);
max-width: 1100px;
margin-inline: auto;
}
.filter-tabs{ display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.filter-tabs button{
padding: .55rem 1.1rem;
border: 1px solid var(--hairline);
background: transparent;
font-family: var(--font-body);
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--color-brown);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter-tabs button.is-active{ background: var(--color-black); color: var(--color-ivory); border-color: var(--color-black); }
.reservations-list{ display: grid; gap: 1.2rem; }
.reservation-card{
border: 1px solid var(--hairline);
padding: 1.5rem 1.7rem;
background: var(--color-ivory);
animation: reservation-card-in .35s ease;
}
@keyframes reservation-card-in{
from{ opacity: 0; transform: translateY(6px); }
to{ opacity: 1; transform: translateY(0); }
}
.reservation-top{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.status-badge{
display: inline-block;
padding: .3rem .7rem;
font-size: .64rem;
letter-spacing: .1em;
text-transform: uppercase;
border: 1px solid currentColor;
}
.status-badge.status-nouveau{ color: #8a5a1e; }
.status-badge.status-confirme{ color: #2f6b3f; }
.status-badge.status-refuse{ color: #a83a3a; }
.status-badge.status-termine{ color: var(--color-brown); opacity: .6; }
.reservation-date{ font-size: .75rem; color: var(--color-brown); opacity: .75; }
.reservation-card h3{ margin-top: .8rem; font-size: 1.25rem; }
.reservation-meta{ margin-top: .4rem; font-size: .9rem; color: var(--color-black); }
.reservation-message{ margin-top: .6rem; font-size: .88rem; font-style: italic; color: var(--color-brown); }
.reservation-actions{ margin-top: 1.2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.reservation-actions button[disabled]{ opacity: .5; cursor: wait; }
.reservation-actions .btn-delete{ margin-left: auto; color: #a83a3a; }
.admin-empty{
text-align: center;
padding: 4rem 1rem;
color: var(--color-brown);
font-family: var(--font-display);
font-style: italic;
font-size: 1.2rem;
}
@media (max-width: 600px){
.reservation-top{ flex-direction: row; }
.admin-header{ padding: 1.1rem 1.25rem; }
}
/* ==========================================================================
BANDEAU COOKIES
========================================================================== */
.cookie-banner{
position: fixed;
left: 1.2rem; right: 1.2rem; bottom: 1.2rem;
z-index: 200;
max-width: 640px;
margin-inline: auto;
background: var(--color-black);
color: var(--color-ivory);
border: 1px solid var(--hairline-on-dark);
box-shadow: 0 12px 40px rgba(0,0,0,.35);
padding: 1.4rem 1.6rem;
opacity: 0;
transform: translateY(16px);
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cookie-banner.is-visible{ opacity: 1; transform: translateY(0); }
.cookie-banner-inner p{
font-size: .86rem;
line-height: 1.6;
color: var(--color-ivory-dim);
}
.cookie-banner-inner a{ color: var(--color-ivory); text-decoration: underline; text-underline-offset: .15em; }
.cookie-banner-actions{
margin-top: 1.1rem;
display: flex;
align-items: center;
gap: 1.4rem;
flex-wrap: wrap;
}
.cookie-banner-actions .btn{ padding: .8rem 1.6rem; }
.cookie-banner-actions .btn-ghost-line{ color: var(--color-ivory-dim); }
@media (max-width: 560px){
.cookie-banner{ left: .8rem; right: .8rem; bottom: .8rem; padding: 1.2rem; }
}
/* ==========================================================================
PAGES LÉGALES (mentions légales, CGU, confidentialité, cookies)
========================================================================== */
.legal-page{ padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.legal-page .container{ max-width: 780px; }
.legal-page h1{ font-size: clamp(1.9rem, 4vw, 2.6rem); }
.legal-page .section-lede{ max-width: none; }
.legal-updated{
margin-top: .6rem;
font-size: .78rem;
letter-spacing: .05em;
color: var(--color-brown);
opacity: .8;
}
.legal-body{ margin-top: 2.6rem; }
.legal-body h2{
font-size: 1.3rem;
margin-top: 2.6rem;
padding-top: 1.8rem;
border-top: 1px solid var(--hairline);
}
.legal-body h2:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3{ font-size: 1.05rem; margin-top: 1.6rem; }
.legal-body p{ margin-top: 1rem; font-size: .96rem; line-height: 1.8; color: var(--color-black); }
.legal-body ul{ margin-top: 1rem; padding-left: 1.3rem; display: grid; gap: .6rem; }
.legal-body li{ font-size: .96rem; line-height: 1.7; color: var(--color-black); list-style: disc; }
.legal-body a{ color: var(--color-black); text-decoration: underline; text-underline-offset: .15em; }
.legal-body strong{ font-weight: 600; }
.legal-fill{
background: rgba(200,189,170,.22);
padding: .05em .35em;
border-radius: 2px;
font-style: italic;
}
.legal-back{ margin-top: 3rem; }