/* =================================================================
FEUILLE DE STYLE COMMUNE — LES LAURIERS DE LA BASTIDE
Fichier UNIQUE : modifier ici pour changer l'apparence de TOUTES
les pages du site. Chaque page l'appelle ainsi, dans :
Organisation : sections 1 à 18 = styles communs à tout le site,
sections 19 à 23 = styles propres à une page (les sélecteurs y sont
volontairement limités aux classes que seule cette page utilise).
================================================================= */
/* =================================================================
1. VARIABLES — palette, typographies, rythme
Modifier ici pour ajuster toute l'identité visuelle.
================================================================= */
:root{
/* Couleurs */
--vert-foret: #3D5843; /* vert forêt : boutons, titres accentués */
--vert-profond: #2C4032; /* bandes immersives (parc, appel à l'action) */
--vert-sauge: #8B9B80; /* pictogrammes, détails */
--sauge-pale: #DCE2D3; /* filets, fonds discrets */
--ivoire: #F6F1E7; /* fond principal */
--blanc-casse: #FCFAF4; /* cartes, en-tête */
--terracotta: #A9754D; /* brun doux décoratif (filets, rameau) */
--terracotta-txt:#8A5A38; /* même teinte, assombrie pour le texte */
--anthracite: #2E2B26; /* texte principal */
--texte-doux: #59554D; /* texte secondaire */
--clair: #F3F1E8; /* texte sur fonds verts foncés */
/* Typographies */
--police-titres:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--police-texte: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;
/* Rythme et formes */
--largeur-max: 72rem;
--espace-section: clamp(4.5rem, 9vw, 7.5rem);
--rayon: 14px;
--rayon-arche: 999px 999px 14px 14px; /* photos en arche, clin d'œil bastide */
--ombre: 0 18px 45px -22px rgba(46, 64, 50, .38);
--transition: .3s ease;
--hauteur-entete: 5rem;
}
/* =================================================================
2. BASE
================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family:var(--police-texte);
font-size:1.0625rem; /* 17 px : confort de lecture */
line-height:1.7;
color:var(--anthracite);
background:var(--ivoire);
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{
font-family:var(--police-titres);
font-weight:600;
line-height:1.15;
margin:0 0 1rem;
color:var(--anthracite);
text-wrap:balance;
}
h1{ font-size:clamp(2.5rem, 6vw, 4.25rem); }
h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); }
h3{ font-size:clamp(1.3rem, 2.2vw, 1.6rem); }
h2 em, h1 em{ font-style:italic; font-weight:500; color:var(--vert-foret); }
p{ margin:0 0 1.1rem; }
a{ color:var(--vert-foret); text-underline-offset:3px; }
a:hover{ color:var(--vert-profond); }
ul{ margin:0 0 1.1rem; padding-left:1.2rem; }
:focus-visible{
outline:3px solid var(--terracotta);
outline-offset:3px;
border-radius:4px;
}
::selection{ background:var(--vert-foret); color:var(--clair); }
/* Lien d'évitement (accessibilité clavier) */
.evitement{
position:absolute; left:1rem; top:-4rem;
background:var(--vert-foret); color:#fff;
padding:.7rem 1.2rem; border-radius:0 0 10px 10px;
z-index:200; transition:top .2s ease;
}
.evitement:focus{ top:0; color:#fff; }
/* Masqué visuellement mais lu par les lecteurs d'écran */
.sr-only{
position:absolute; width:1px; height:1px;
margin:-1px; padding:0; border:0;
clip:rect(0 0 0 0); clip-path:inset(50%);
overflow:hidden; white-space:nowrap;
}
/* =================================================================
3. COMPOSANTS COMMUNS
================================================================= */
.conteneur{
width:min(100% - 2.5rem, var(--largeur-max));
margin-inline:auto;
}
section{ padding-block:var(--espace-section); scroll-margin-top:calc(var(--hauteur-entete) + 1rem); }
/* Surtitre avec rameau de laurier — motif signature de la page */
.entete-section{ max-width:46rem; }
.entete-section.centre{ margin-inline:auto; text-align:center; }
.rameaux{
display:inline-flex; align-items:center; gap:.4rem;
color:var(--terracotta); margin-bottom:.7rem;
}
.rameaux svg{ width:52px; height:18px; }
.rameaux svg:first-child{ transform:scaleX(-1); }
.surtitre{
display:block;
font-size:.8rem; font-weight:600;
letter-spacing:.22em; text-transform:uppercase;
color:var(--terracotta-txt);
margin-bottom:.9rem;
}
.fonce .surtitre{ color:#D8B292; }
.fonce h2, .fonce h3, .fonce p{ color:var(--clair); }
.fonce h2 em{ color:#C9D6BE; }
/* Boutons — assez grands pour le tactile (min. 48 px) */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
min-height:48px; padding:.8rem 1.7rem;
border-radius:999px; border:1.5px solid transparent;
font-family:var(--police-texte); font-size:1rem; font-weight:500;
letter-spacing:.02em; text-decoration:none; cursor:pointer;
transition:background var(--transition), color var(--transition),
border-color var(--transition), transform var(--transition);
}
.btn:hover{ transform:translateY(-2px); }
.btn-plein{ background:var(--vert-foret); color:#fff; }
.btn-plein:hover{ background:var(--vert-profond); color:#fff; }
.btn-ligne{ border-color:var(--vert-foret); color:var(--vert-foret); background:transparent; }
.btn-ligne:hover{ background:var(--vert-foret); color:#fff; }
.btn-clair{ background:var(--ivoire); color:var(--vert-profond); }
.btn-clair:hover{ background:#fff; color:var(--vert-profond); }
.btn-contour-clair{ border-color:rgba(246,241,231,.75); color:var(--clair); background:transparent; }
.btn-contour-clair:hover{ background:rgba(246,241,231,.14); color:#fff; }
/* Apparition douce au défilement (désactivée sans JS et si mouvement réduit) */
.js .apparait{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.js .apparait.visible{ opacity:1; transform:none; }
/* =================================================================
4. EN-TÊTE ET NAVIGATION
================================================================= */
.entete-site{
position:fixed; inset:0 0 auto 0; z-index:100;
transition:background var(--transition), box-shadow var(--transition);
}
.entete-site .conteneur{
display:flex; align-items:center; gap:1.2rem;
min-height:var(--hauteur-entete);
}
/* Transparent sur la photo d'accueil, puis opaque au défilement */
.js .entete-site{ background:transparent; }
.entete-site.est-defile, .entete-site.menu-ouvert, html:not(.js) .entete-site{
background:rgba(252,250,244,.96);
box-shadow:0 8px 30px -18px rgba(46,64,50,.35);
}
@supports (backdrop-filter: blur(6px)){
.entete-site.est-defile{ background:rgba(252,250,244,.86); backdrop-filter:blur(8px); }
}
/* Logo (remplacer le bloc .logo par une image si besoin :
) */
.logo{
display:inline-flex; align-items:center; gap:.55rem;
text-decoration:none; line-height:1.05;
}
.logo svg{ width:30px; height:30px; color:var(--vert-sauge); flex:none; }
.logo b{
font-family:var(--police-titres); font-weight:600;
font-size:1.22rem; letter-spacing:.01em; color:var(--anthracite);
}
.logo small{
display:block; font-size:.62rem; font-weight:600;
letter-spacing:.3em; text-transform:uppercase; color:var(--terracotta-txt);
}
.js .entete-site:not(.est-defile):not(.menu-ouvert) .logo b{ color:#fff; }
.js .entete-site:not(.est-defile):not(.menu-ouvert) .logo small{ color:#E8CDB2; }
.js .entete-site:not(.est-defile):not(.menu-ouvert) .logo svg{ color:#DCE4D2; }
.nav-principale{ margin-left:auto; }
.nav-principale ul{
list-style:none; display:flex; align-items:center; gap:1.35rem;
margin:0; padding:0;
}
.nav-principale a{
font-size:.95rem; font-weight:500; text-decoration:none;
color:var(--anthracite); padding:.4rem 0;
border-bottom:2px solid transparent;
transition:color var(--transition), border-color var(--transition);
}
.nav-principale a:hover{ color:var(--vert-foret); border-color:var(--terracotta); }
.js .entete-site:not(.est-defile):not(.menu-ouvert) .nav-principale a{ color:#fff; }
.js .entete-site:not(.est-defile):not(.menu-ouvert) .nav-principale a:hover{ border-color:#E8CDB2; }
.actions-entete{ display:flex; align-items:center; gap:1rem; }
.tel-entete{
display:inline-flex; align-items:center; gap:.45rem;
font-weight:600; font-size:.95rem; text-decoration:none;
color:var(--anthracite); white-space:nowrap;
}
.tel-entete svg{ width:17px; height:17px; }
.js .entete-site:not(.est-defile):not(.menu-ouvert) .tel-entete{ color:#fff; }
.actions-entete .btn{ min-height:44px; padding:.55rem 1.25rem; font-size:.95rem; }
/* Bouton menu mobile */
.bouton-menu{
display:none; flex-direction:column; justify-content:center; gap:5px;
width:48px; height:48px; padding:0 11px;
background:transparent; border:0; cursor:pointer; border-radius:10px;
}
.bouton-menu span{
display:block; height:2px; width:100%; border-radius:2px;
background:var(--anthracite); transition:transform var(--transition), opacity var(--transition);
}
.js .entete-site:not(.est-defile):not(.menu-ouvert) .bouton-menu span{ background:#fff; }
.menu-ouvert .bouton-menu span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-ouvert .bouton-menu span:nth-child(2){ opacity:0; }
.menu-ouvert .bouton-menu span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* =================================================================
5. SECTION D'ACCUEIL (HERO)
================================================================= */
.hero{
position:relative; min-height:min(100vh, 56rem);
display:flex; align-items:center;
padding-block:calc(var(--hauteur-entete) + 3rem) 4rem;
color:#fff; overflow:hidden;
background:linear-gradient(160deg, #46604C, #2C4032); /* visible avant le chargement de la photo */
}
.hero-photo{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover;
}
.hero-voile{ /* voile pour garantir la lisibilité du texte */
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(30,42,33,.55) 0%, rgba(30,42,33,.35) 45%, rgba(30,42,33,.62) 100%);
}
.hero .conteneur{ position:relative; max-width:54rem; text-align:center; }
.hero .surtitre{ color:#EBD3B8; }
.hero h1{ color:#fff; margin-bottom:1.1rem; }
.hero p{
font-size:clamp(1.05rem, 2vw, 1.25rem);
max-width:38rem; margin:0 auto 2rem; color:#F1EEE4;
}
.hero-boutons{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.hero-mention{
margin-top:2.6rem; font-size:.9rem; letter-spacing:.14em;
text-transform:uppercase; color:#E4DFCF;
}
.hero-mention span{ white-space:nowrap; }
.hero-mention .sep{ color:#D9B893; padding-inline:.55rem; }
/* =================================================================
6. PRÉSENTATION DU DOMAINE
================================================================= */
.domaine-grille{
display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.photo-arche{
border-radius:var(--rayon-arche);
overflow:hidden; box-shadow:var(--ombre);
background:linear-gradient(170deg, var(--sauge-pale), #CBD3BE);
}
.photo-arche img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.encadre-chiffres{
display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem;
margin-top:1.8rem; padding-top:1.6rem;
border-top:1px solid var(--sauge-pale);
}
.encadre-chiffres b{
display:block; font-family:var(--police-titres);
font-size:1.7rem; font-weight:600; color:var(--vert-foret);
}
.encadre-chiffres span{ font-size:.9rem; color:var(--texte-doux); }
/* =================================================================
7. LES ÉVÉNEMENTS — trois cartes
================================================================= */
.fond-creme{ background:var(--blanc-casse); }
.grille-cartes{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap:clamp(1.4rem, 3vw, 2.2rem); margin-top:2.8rem;
}
.carte{
display:flex; flex-direction:column;
background:var(--ivoire); border:1px solid var(--sauge-pale);
border-radius:var(--rayon); overflow:hidden;
box-shadow:0 12px 30px -24px rgba(46,64,50,.45);
transition:transform var(--transition), box-shadow var(--transition);
}
.carte:hover{ transform:translateY(-6px); box-shadow:var(--ombre); }
.carte figure{ margin:0; overflow:hidden; }
.carte img{
width:100%; aspect-ratio:4/3; object-fit:cover;
transition:transform .6s ease;
}
.carte:hover img{ transform:scale(1.04); }
.carte-corps{ display:flex; flex-direction:column; flex:1; padding:1.6rem 1.5rem 1.7rem; }
.carte h3{ margin-bottom:.5rem; }
.carte p{ color:var(--texte-doux); font-size:.98rem; }
.carte .btn{ margin-top:auto; align-self:flex-start; }
/* =================================================================
8. LES ESPACES DU DOMAINE
================================================================= */
.grille-espaces{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap:1.4rem; margin-top:2.8rem;
}
.espace{
background:var(--blanc-casse); border:1px solid var(--sauge-pale);
border-radius:var(--rayon); padding:1.7rem 1.5rem;
}
.espace svg{
width:34px; height:34px; color:var(--vert-sauge);
margin-bottom:.9rem;
}
.espace h3{ font-size:1.25rem; margin-bottom:.35rem; }
.espace p{ font-size:.95rem; color:var(--texte-doux); margin:0; }
.rangee-services{
display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
margin-top:2.4rem; padding:0; list-style:none;
}
.rangee-services li{
font-size:.88rem; letter-spacing:.03em;
border:1px solid var(--sauge-pale); border-radius:999px;
padding:.45rem 1.05rem; background:var(--blanc-casse); color:var(--texte-doux);
}
/* =================================================================
9. FOCUS SUR LE PARC — bande immersive
================================================================= */
.fonce{ background:var(--vert-profond); }
.parc-grille{
display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.parc-grille .photo-arche{ box-shadow:0 24px 60px -28px rgba(0,0,0,.55); }
.liste-parc{ list-style:none; padding:0; margin:1.4rem 0 2rem; }
.liste-parc li{
position:relative; padding-left:1.7rem; margin-bottom:.55rem; color:var(--clair);
}
.liste-parc li::before{
content:""; position:absolute; left:0; top:.62em;
width:.85rem; height:2px; background:var(--terracotta); border-radius:2px;
}
/* =================================================================
10. SERVICES ET ACCOMPAGNEMENT
================================================================= */
.grille-prestations{
display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
gap:1rem; margin-top:2.6rem;
}
.prestation{
display:flex; align-items:center; gap:.8rem;
background:var(--ivoire); border:1px solid var(--sauge-pale);
border-radius:12px; padding:1rem 1.1rem;
font-size:.96rem; font-weight:500;
}
.prestation::before{
content:""; flex:none; width:9px; height:9px; border-radius:50%;
background:var(--vert-sauge);
}
.note-prestations{
margin-top:1.8rem; font-size:.95rem; color:var(--texte-doux);
max-width:44rem;
}
/* =================================================================
11. GALERIE PHOTOGRAPHIQUE
================================================================= */
.grille-galerie{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap:1rem; margin-top:2.8rem;
}
.grille-galerie a{
display:block; border-radius:var(--rayon); overflow:hidden;
background:linear-gradient(170deg, var(--sauge-pale), #CBD3BE);
}
.grille-galerie img{
width:100%; aspect-ratio:4/3; object-fit:cover;
transition:transform .6s ease;
}
.grille-galerie a:hover img{ transform:scale(1.05); }
/* Visionneuse (lightbox) accessible —