/* ==========================================================================
DE MARCO — FEUILLE DE STYLE
Thème clair par défaut; thème sombre : html[data-theme="dark"].
1. BASE
2. EN-TÊTE ET NAVIGATION
3. BOUTONS
4. ACCUEIL : HERO
5. ACCUEIL : RÉSEAUX SOCIAUX
6. ACCUEIL : SIGNIFICATION
7. ACCUEIL : À PROPOS
8. ACCUEIL : MA VISION
9. FOOTER
10. POPUP MAGASINER ET FORMULAIRES
11. BANDEAU TÉMOINS
12. PAGES SECONDAIRES
13. RESPONSIVE
14. MOUVEMENT RÉDUIT
========================================================================== */
/* ==========================================================================
1. BASE
========================================================================== */
/* Polices */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../font/playfair-display-v40-latin-regular.woff2") format("woff2");
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../font/playfair-display-v40-latin-italic.woff2") format("woff2");
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../font/playfair-display-v40-latin-500.woff2") format("woff2");
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../font/playfair-display-v40-latin-500italic.woff2") format("woff2");
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../font/playfair-display-v40-latin-600.woff2") format("woff2");
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("../font/playfair-display-v40-latin-600italic.woff2") format("woff2");
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../font/roboto-v51-latin-regular.woff2") format("woff2");
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../font/roboto-v51-latin-italic.woff2") format("woff2");
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../font/roboto-v51-latin-500.woff2") format("woff2");
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../font/roboto-v51-latin-500italic.woff2") format("woff2");
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
/* Variables */
:root {
--font-serif: 'Playfair Display', Georgia, serif;
--font-sans: 'Roboto', Arial, sans-serif;
--bg: #fff;
--bg-alt: #fafafa;
--text: #1a1a1a;
--text-muted: #4a4a4a;
--shadow: rgba(0, 0, 0, 0.1);
--border-soft: rgba(0, 0, 0, 0.08);
--header-bg: rgba(255, 255, 255, 0.67);
--hover-overlay: rgba(0, 0, 0, 0.06);
--accent: #b88f5a;
--accent-hover: #9a784d;
--error: #c0392b;
--field-border: rgba(0, 0, 0, 0.45);
--btn-text-halo: 0 0 1px rgba(70, 45, 15, 0.9), 0 1px 3px rgba(70, 45, 15, 0.7);
color-scheme: only light;
}
html[data-theme="dark"] {
--bg: #121212;
--bg-alt: #1b1b1b;
--text: #f2f2f2;
--text-muted: #b8b8b8;
--shadow: rgba(0, 0, 0, 0.5);
--border-soft: rgba(255, 255, 255, 0.1);
--header-bg: rgba(0, 0, 0, 0.45);
--hover-overlay: rgba(255, 255, 255, 0.12);
--error: #ef6f61;
--field-border: rgba(255, 255, 255, 0.35);
color-scheme: only dark;
}
/* Éléments HTML */
body {
min-height: 100vh;
font-family: var(--font-sans);
line-height: 1.5;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button,
input {
font: inherit;
color: inherit;
}
button {
padding: 0;
background: none;
border: none;
cursor: pointer;
}
h1,
h2,
h3 {
font-family: var(--font-serif);
font-weight: 400;
overflow-wrap: break-word;
text-wrap: balance;
}
p {
overflow-wrap: break-word;
text-wrap: pretty;
}
:focus-visible {
outline: 2px solid var(--text);
outline-offset: 3px;
}
::selection {
background: var(--text);
color: var(--bg);
}
picture {
display: contents;
}
/* Utilitaires */
.nowrap {
white-space: nowrap;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 300;
padding: 0.6rem 1rem;
background-color: var(--bg);
color: var(--text);
border: 1px solid var(--border-soft);
border-radius: 8px;
box-shadow: 0 10px 25px var(--shadow);
transform: translateY(-8rem);
}
.skip-link:focus {
transform: none;
}
/* Échelle typographique */
.category-text h2,
.about-heading h2,
.vision-label {
font-size: clamp(1.65rem, 2.8vw, 2.25rem);
line-height: 1.2;
}
.category-text p,
.about-text p {
font-size: clamp(1rem, 0.4vw + 0.9rem, 1.0625rem);
line-height: 1.75;
}
/* ==========================================================================
2. EN-TÊTE ET NAVIGATION
========================================================================== */
.site-header {
position: fixed;
z-index: 100;
width: 100%;
height: 5rem;
display: flex;
align-items: center;
padding: 10px 4%;
color: var(--text);
box-shadow: 0 4px 24px var(--shadow);
transition:
color 0.3s ease,
box-shadow 0.3s ease;
}
.site-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--header-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background-color 0.3s ease;
}
/* Disposition */
.site-header__side,
.site-header__logo {
flex: 1 1 0;
min-width: 0;
}
.site-header__side {
display: flex;
align-items: center;
}
.site-header__side--start {
justify-content: flex-start;
gap: 0.75rem;
}
.site-header__side--end {
justify-content: flex-end;
gap: 1.25rem;
}
.site-header__logo {
display: flex;
justify-content: center;
align-items: center;
}
/* Logo */
.site-logo {
height: 2.4rem;
width: auto;
transition: filter 0.3s ease;
}
html[data-theme="dark"] .site-logo {
filter: invert(1) brightness(1.05);
}
/* Boutons thème et langue */
.theme-toggle-wrap {
position: relative;
display: flex;
align-items: center;
}
.theme-toggle,
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: transparent;
border: 1px solid var(--border-soft);
border-radius: 50%;
transition:
background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease;
}
.theme-toggle:hover,
.lang-toggle:hover {
background-color: var(--hover-overlay);
}
.lang-toggle {
display: inline-flex;
font-family: var(--font-serif);
font-size: 0.72rem;
letter-spacing: 0.02em;
}
.theme-icon {
width: 20px;
height: 20px;
}
.theme-icon--sun,
html[data-theme="dark"] .theme-icon--moon {
display: none;
}
html[data-theme="dark"] .theme-icon--sun {
display: block;
}
.theme-toggle.is-overridden .theme-icon {
color: #9a9a9a;
opacity: 0.75;
}
.theme-toggle[aria-disabled="true"] {
cursor: not-allowed;
}
.theme-toggle[aria-disabled="true"]:hover {
background-color: transparent;
}
.theme-notice {
position: absolute;
top: calc(100% + 10px);
left: 0;
z-index: 200;
width: 230px;
padding: 0.75rem 1rem;
background-color: var(--bg);
border: 1px solid var(--border-soft);
border-radius: 10px;
box-shadow: 0 10px 25px var(--shadow);
font-size: 0.78rem;
line-height: 1.5;
}
.theme-notice[hidden] {
display: none;
}
/* Navigation */
.site-nav {
display: flex;
align-items: center;
gap: 2rem;
}
.site-nav a {
font-family: var(--font-serif);
transition:
opacity 0.3s ease,
color 0.3s ease;
}
.site-nav a:hover {
opacity: 0.65;
}
.site-nav a[aria-current="page"] {
text-decoration: underline;
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
/* Menu mobile */
.nav-toggle {
display: none;
width: 44px;
height: 44px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border-radius: 8px;
}
.nav-toggle-bar {
width: 24px;
height: 2px;
background-color: var(--text);
border-radius: 2px;
transition:
transform 0.3s ease,
opacity 0.3s ease,
background-color 0.3s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ==========================================================================
3. BOUTONS
========================================================================== */
/* Bouton Magasiner */
.shop-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0 18px;
height: 42px;
background-color: var(--accent);
color: #fff;
font-family: var(--font-serif);
font-size: 0.92rem;
border-radius: 30px;
white-space: nowrap;
text-shadow: var(--btn-text-halo);
transition:
background-color 0.3s ease,
transform 0.3s ease;
}
.shop-btn:hover {
background-color: var(--accent-hover);
transform: translateY(-2px);
}
.shop-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.shop-btn--menu {
display: none;
}
/* Bouton principal */
.btn-cta {
display: inline-block;
padding: 10px 20px;
background-color: var(--accent);
color: #fff;
font-family: var(--font-serif);
font-size: 1rem;
border-radius: 30px;
text-shadow: var(--btn-text-halo);
transition:
background-color 0.3s ease,
transform 0.3s ease;
}
.btn-cta:hover {
background-color: var(--accent-hover);
transform: translateY(-2px);
}
.hero .btn-cta {
border: 1.5px solid #fff;
}
html[data-theme="dark"] .hero .btn-cta {
border: none;
}
/* ==========================================================================
4. ACCUEIL : HERO
========================================================================== */
.hero {
position: relative;
height: 67vh;
min-height: 450px;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 24px var(--shadow);
}
html[data-theme="dark"] .hero {
background: linear-gradient(180deg, #0d0703, #1c0d05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.hero-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
text-align: center;
}
html[data-theme="dark"] .hero-overlay {
background: rgba(0, 0, 0, 0.67);
}
.hero-title {
margin-bottom: 10px;
font-size: clamp(2.2rem, 4.4vw, 3.2rem);
line-height: 1.15;
}
.hero-divider {
width: 60px;
height: 2px;
margin: 10px auto;
border: none;
background-color: var(--accent);
}
.hero-subtitle {
margin-bottom: 20px;
font-family: var(--font-serif);
font-size: clamp(1rem, 1.6vw, 1.25rem);
line-height: 1.5;
}
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .hero-subtitle {
color: #fff;
}
/* Flamme */
.hero-flame {
--c1: 226, 165, 65;
--c2: 242, 205, 105;
--c3: 212, 150, 55;
--c4: 218, 160, 60;
--k: 0.5;
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
html[data-theme="dark"] .hero-flame {
--c1: 230, 100, 35;
--c2: 255, 170, 70;
--c3: 215, 85, 30;
--c4: 235, 110, 40;
--k: 0.65;
}
.hero-flame i {
position: absolute;
bottom: -30%;
border-radius: 50% 50% 45% 45%;
filter: blur(55px);
transform-origin: 50% 100%;
animation: flame-flicker var(--d) ease-in-out infinite alternate;
will-change: transform, opacity;
}
.hero-flame .l1 { left: 18%; width: 34%; height: 80%; background: rgba(var(--c1), var(--k)); --d: 3.1s; }
.hero-flame .l2 { left: 38%; width: 24%; height: 55%; background: rgba(var(--c2), calc(var(--k) + 0.1)); --d: 4.3s; animation-delay: -1s; bottom: -32%; }
.hero-flame .l3 { left: 55%; width: 30%; height: 75%; background: rgba(var(--c3), var(--k)); --d: 3.7s; animation-delay: -2s; }
.hero-flame .l4 { left: 33%; width: 34%; height: 90%; background: rgba(var(--c4), calc(var(--k) - 0.15)); --d: 5s; animation-delay: -3s; bottom: -36%; }
@keyframes flame-flicker {
0% { transform: scale(1, 0.85) translateX(-2%); opacity: 0.7; }
35% { transform: scale(1.05, 1.05) translateX(2%); opacity: 1; }
65% { transform: scale(0.95, 0.9) translateX(-1%); opacity: 0.8; }
100% { transform: scale(1.02, 1.1) translateX(3%); opacity: 1; }
}
html.tab-hidden .hero-flame i {
animation-play-state: paused;
}
/* ==========================================================================
5. ACCUEIL : RÉSEAUX SOCIAUX
========================================================================== */
.reseaux-sociaux {
display: flex;
align-items: flex-start;
width: 100%;
background: #fff;
}
html[data-theme="dark"] .reseaux-sociaux {
background: #141414;
}
/* Photo */
.image-block {
width: 60%;
height: clamp(360px, 40vw, 540px);
display: flex;
align-items: stretch;
padding: 3%;
}
.img-div_img-block {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
border-radius: 12px;
}
/* Colonne de droite */
.categories-section {
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 3%;
}
/* Bannières */
.div-banners-reseaux {
display: flex;
flex-direction: column;
gap: 1rem;
}
.img-container {
position: relative;
width: 100%;
min-height: 92px;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 2.75rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(247, 243, 236, 0.9));
border: 1px solid var(--border-soft);
box-shadow: 0 1px 2px rgba(60, 40, 15, 0.04);
overflow: hidden;
isolation: isolate;
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.5s ease;
}
.img-container:hover,
.img-container:focus-visible {
transform: translateY(-3px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 243, 236, 0.95));
box-shadow: 0 14px 30px -12px rgba(60, 40, 15, 0.28);
}
.img-container:focus-visible {
outline: 2px solid var(--accent-hover);
outline-offset: 3px;
}
html[data-theme="dark"] .img-container {
background: linear-gradient(135deg, #1d1d1d, #161616);
border-color: #343230;
box-shadow: none;
}
html[data-theme="dark"] .img-container:hover,
html[data-theme="dark"] .img-container:focus-visible {
background: linear-gradient(135deg, #222, #181818);
border-color: #4a4744;
box-shadow:
0 14px 32px -14px rgba(255, 255, 255, 0.14),
0 6px 14px -8px rgba(0, 0, 0, 0.9);
}
.social-banner {
position: relative;
z-index: 1;
width: auto;
max-width: 68%;
max-height: 50px;
opacity: 0.88;
filter: invert(1) brightness(0.85);
transition:
opacity 0.35s ease,
filter 0.3s ease;
}
.img-container:hover .social-banner {
opacity: 1;
}
.arrow {
position: absolute;
right: 1.4rem;
top: 50%;
z-index: 1;
width: 18px;
opacity: 0.4;
filter: invert(1) brightness(0.85);
transform: translateY(-50%);
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.35s ease,
filter 0.3s ease;
}
.img-container:hover .arrow {
transform: translate(6px, -50%);
opacity: 0.95;
}
html[data-theme="dark"] .social-banner,
html[data-theme="dark"] .arrow {
filter: none;
}
/* Texte */
.category-text {
margin-top: 1rem;
padding: 3% 0;
}
.category-text h2 {
margin-bottom: 10px;
}
.category-text p a {
text-decoration: underline;
text-underline-offset: 3px;
}
.category-text p a:hover {
text-decoration-color: var(--accent);
}
/* ==========================================================================
6. ACCUEIL : SIGNIFICATION
========================================================================== */
.about-heading {
position: relative;
padding: 10vh 6vw;
text-align: center;
background-color: #b08a55;
box-shadow: inset 0 22px 26px -18px rgba(60, 40, 15, 0.22);
overflow: hidden;
transition: background-color 0.3s ease;
}
html[data-theme="dark"] .about-heading {
background-color: #8f6f43;
box-shadow: inset 0 22px 26px -18px rgba(0, 0, 0, 0.9);
}
/* Taches dorées */
.about-heading::before {
content: "";
position: absolute;
inset: -10%;
z-index: 0;
background-image:
radial-gradient(ellipse 40% 55% at 15% 30%, #c9a46d, transparent 70%),
radial-gradient(ellipse 38% 60% at 80% 25%, #a98350, transparent 70%),
radial-gradient(ellipse 45% 50% at 55% 90%, #c9a46d, transparent 70%),
radial-gradient(ellipse 30% 45% at 90% 85%, #bb9660, transparent 70%);
background-repeat: no-repeat;
filter: blur(26px);
pointer-events: none;
}
html[data-theme="dark"] .about-heading::before {
background-image:
radial-gradient(ellipse 40% 55% at 15% 30%, #a98655, transparent 70%),
radial-gradient(ellipse 38% 60% at 80% 25%, #8a6a3e, transparent 70%),
radial-gradient(ellipse 45% 50% at 55% 90%, #a98655, transparent 70%),
radial-gradient(ellipse 30% 45% at 90% 85%, #977549, transparent 70%);
}
/* Grain */
.about-heading::after {
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.6;
}
.about-heading h2,
.about-heading p {
position: relative;
z-index: 1;
color: #fbf3df;
}
.about-heading h2 {
margin-bottom: 20px;
text-shadow:
0 0 2px rgba(50, 32, 8, 0.75),
0 1px 4px rgba(50, 32, 8, 0.6),
0 2px 14px rgba(40, 25, 5, 0.35);
}
.about-heading p {
max-width: 900px;
margin: 0 auto;
font-size: clamp(1rem, 0.5vw + 0.9rem, 1.1rem);
line-height: 1.8;
text-shadow:
0 0 2px rgba(50, 32, 8, 0.85),
0 1px 3px rgba(50, 32, 8, 0.7),
0 1px 10px rgba(40, 25, 5, 0.4);
}
/* ==========================================================================
7. ACCUEIL : À PROPOS
========================================================================== */
.about-us {
padding: 80px 20px;
background: #fff;
transition: background-color 0.3s ease;
}
html[data-theme="dark"] .about-us {
background: #141414;
}
.about-container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 80px;
}
.about-block {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
/* Bloc avec image à gauche */
.row-rev {
flex-direction: row-reverse;
}
.about-text {
flex: 1 1 400px;
min-width: 0;
}
.about-text h3 {
margin-bottom: 15px;
font-size: clamp(1.3rem, 1.9vw, 1.5rem);
line-height: 1.3;
}
.about-text p {
margin-bottom: 1rem;
color: var(--text-muted);
}
.about-text p:last-child {
margin-bottom: 0;
}
.about-image {
flex: 1 1 400px;
display: flex;
justify-content: center;
transform: translateY(var(--parallax-y, 0px));
will-change: transform;
}
.about-image img {
width: 100%;
max-width: 400px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 12px 30px var(--shadow);
}
/* ==========================================================================
8. ACCUEIL : MA VISION
========================================================================== */
.about-closing {
position: relative;
width: 100%;
padding: clamp(64px, 12vh, 130px) 6vw;
text-align: center;
background: #fff;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
overflow: hidden;
transition: background-color 0.3s ease;
}
html[data-theme="dark"] .about-closing {
background: linear-gradient(180deg, #050505, #0b0b0b);
}
/* Grain (signification et vision) */
.about-heading::after,
.about-closing::after {
content: "";
position: absolute;
inset: -35% 0;
z-index: 0;
translate: 0 var(--grain-y, 0px);
will-change: translate;
pointer-events: none;
}
.about-closing::after {
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.14;
}
html[data-theme="dark"] .about-closing::after {
opacity: 0.1;
}
/* Étoiles */
.vision-stars {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.vision-stars i {
position: absolute;
inset: -150% 0;
background-color: #d6b36e;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
opacity: 0.5;
will-change: translate, transform;
animation: star-sway var(--sway-t, 10s) ease-in-out infinite alternate;
}
html[data-theme="dark"] .vision-stars i {
background-color: #e6d2a2;
}
.vision-stars i:nth-child(1) { translate: 0 var(--star1-y, 0px); --sway: -18px; --sway-t: 12s; -webkit-mask-size: 520px 520px; mask-size: 520px 520px; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.vision-stars i:nth-child(2) { translate: 0 var(--star2-y, 0px); --sway: -26px; --sway-t: 9s; -webkit-mask-size: 700px 700px; mask-size: 700px 700px; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.vision-stars i:nth-child(3) { translate: 0 var(--star3-y, 0px); --sway: -36px; --sway-t: 7s; -webkit-mask-size: 900px 900px; mask-size: 900px 900px; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
@keyframes star-sway {
from { transform: translateY(0); }
to { transform: translateY(var(--sway, -24px)); }
}
/* Titre et piliers */
.vision-label,
.vision-items {
position: relative;
z-index: 1;
}
.vision-label {
margin-bottom: 70px;
letter-spacing: 0.04em;
}
html[data-theme="dark"] .vision-label {
color: var(--accent);
}
.vision-items {
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: stretch;
}
.vision-item {
flex: 1;
padding: 0 20px;
min-width: 0;
container-type: inline-size;
}
.vision-item span {
display: block;
margin-bottom: 14px;
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.vision-item strong {
display: block;
font-family: var(--font-serif);
font-size: clamp(1.1rem, 11cqw, 1.75rem);
line-height: 1.3;
font-weight: 400;
white-space: nowrap;
text-wrap: pretty;
}
.vision-divider {
flex: none;
width: 1px;
align-self: stretch;
margin: 6px 0;
background: linear-gradient(
to bottom,
transparent,
var(--border-soft) 20%,
var(--border-soft) 80%,
transparent
);
}
/* ==========================================================================
9. FOOTER
========================================================================== */
.site-footer {
--ft-bg: #fdfcfa;
--ft-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
--ft-text: rgba(0, 0, 0, 0.68);
--ft-strong: #1a1a1a;
--ft-hover: var(--accent-hover);
--ft-line: rgba(0, 0, 0, 0.1);
--ft-btn-border: rgba(0, 0, 0, 0.45);
--ft-logo: none;
padding: 3rem 20px 1.5rem;
background-color: var(--ft-bg);
background-image: var(--ft-grain);
color: var(--ft-text);
border-top: 1px solid var(--ft-line);
font-size: 0.85rem;
}
html[data-theme="dark"] .site-footer {
--ft-bg: #0a0a0a;
--ft-grain: none;
--ft-text: rgba(255, 255, 255, 0.75);
--ft-strong: #fff;
--ft-hover: var(--accent);
--ft-line: rgba(255, 255, 255, 0.12);
--ft-btn-border: rgba(255, 255, 255, 0.55);
--ft-logo: invert(1);
}
.footer-inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
.site-footer a,
.site-footer .footer-link {
color: inherit;
transition: color 0.3s ease, opacity 0.3s ease;
}
.site-footer a:hover,
.site-footer .footer-link:hover {
color: var(--ft-strong);
}
.site-footer a:focus-visible,
.site-footer button:focus-visible {
outline: 2px solid var(--ft-strong);
outline-offset: 3px;
}
/* Rangée principale */
.footer-top {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.9rem 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--ft-line);
}
.footer-brand {
display: contents;
}
.footer-logo {
display: inline-block;
}
.footer-logo img {
display: block;
height: 2.5rem;
margin-left: -5px;
width: auto;
filter: var(--ft-logo);
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.4rem;
white-space: nowrap;
font-family: var(--font-serif);
font-size: 1rem;
}
.footer-nav a {
color: var(--ft-strong);
}
.footer-nav a:hover {
color: var(--ft-hover);
}
.footer-actions {
display: contents;
}
.footer-actions .footer-btn {
grid-area: 1 / 2;
justify-self: end;
}
.footer-social {
grid-area: 2 / 2;
justify-self: end;
}
.footer-logo {
grid-area: 1 / 1;
justify-self: start;
}
.footer-nav {
grid-area: 2 / 1;
}
.footer-social,
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.footer-social {
font-size: 0.8rem;
font-weight: 500;
}
/* Bouton Recevoir les annonces */
.footer-btn {
display: inline-block;
padding: 0.6rem 1.3rem;
color: var(--ft-strong);
font-family: var(--font-serif);
font-size: 0.95rem;
border: 1px solid var(--ft-btn-border);
border-radius: 30px;
transition:
background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease;
}
.site-footer .footer-btn--gold {
background-color: var(--accent);
color: #fff;
border-color: var(--accent);
text-shadow: var(--btn-text-halo);
}
.site-footer .footer-btn--gold:hover {
background-color: var(--accent-hover);
color: #fff;
border-color: var(--accent-hover);
}
/* Rangée du bas */
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem 1.5rem;
padding-top: 1.25rem;
font-size: 0.78rem;
}
.footer-copy {
margin: 0;
}
.footer-link {
font-size: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.footer-link[hidden],
.footer-legal li:has(> [hidden]) {
display: none;
}
/* ==========================================================================
10. POPUP MAGASINER ET FORMULAIRES
========================================================================== */
.shop-dialog {
position: fixed;
inset: 0;
margin: auto;
width: min(440px, calc(100% - 2rem));
max-height: calc(100% - 2rem);
padding: 2.4rem 2rem 1.8rem;
background-color: var(--bg);
color: var(--text);
border: 1px solid var(--border-soft);
border-radius: 16px;
box-shadow: 0 20px 60px var(--shadow);
text-align: center;
}
.shop-dialog::backdrop {
background: rgba(0, 0, 0, 0.45);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.shop-dialog[open] {
animation: shop-dialog-in 0.25s ease;
}
@keyframes shop-dialog-in {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.shop-dialog__close {
position: absolute;
top: 0.6rem;
right: 0.8rem;
width: 36px;
height: 36px;
color: var(--text-muted);
font-size: 1.6rem;
line-height: 1;
transition: color 0.3s ease;
}
.shop-dialog__close:hover {
color: var(--text);
}
.shop-dialog__title {
margin-bottom: 0.9rem;
color: var(--accent);
font-size: 1.6rem;
line-height: 1.2;
}
.shop-dialog__text {
margin-bottom: 1.25rem;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.6;
}
/* Champ courriel */
.shop-dialog__row {
display: flex;
gap: 0.5rem;
}
.shop-dialog__row input[type="email"] {
flex: 1;
min-width: 0;
height: 44px;
padding: 0 16px;
background-color: var(--bg-alt);
border: 1px solid var(--field-border);
border-radius: 30px;
font-size: 16px;
}
.shop-dialog__row input[type="email"]::placeholder {
color: var(--text-muted);
opacity: 0.8;
}
.shop-dialog__row input[type="email"]:focus {
outline: 2px solid var(--accent-hover);
outline-offset: 1px;
}
.shop-dialog__submit {
height: 44px;
padding: 0 20px;
white-space: nowrap;
}
/* Consentement */
.shop-dialog__consent {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin-top: 1rem;
text-align: left;
font-size: 0.8rem;
line-height: 1.5;
color: var(--text-muted);
cursor: pointer;
}
.shop-dialog__consent input {
flex: none;
width: 18px;
height: 18px;
margin-top: 0.1rem;
accent-color: var(--accent);
}
.shop-dialog__consent.is-invalid input {
outline: 2px solid var(--error);
outline-offset: 2px;
}
.shop-dialog__error {
margin-top: 0.5rem;
color: var(--error);
font-size: 0.85rem;
line-height: 1.4;
}
.shop-dialog__error[hidden] {
display: none;
}
/* Champ piège */
.shop-dialog__trap {
position: absolute;
left: -9999px;
}
/* Messages d'état */
.shop-dialog__status {
min-height: 1.4em;
margin-top: 0.8rem;
font-size: 0.85rem;
}
.shop-dialog__status.is-ok { color: var(--accent); }
.shop-dialog__status.is-error { color: var(--error); }
/* ==========================================================================
11. BANDEAU TÉMOINS
========================================================================== */
#cc-main {
--cc-font-family: var(--font-sans);
--cc-bg: var(--bg);
--cc-primary-color: var(--text);
--cc-secondary-color: var(--text-muted);
--cc-link-color: var(--accent-hover);
--cc-modal-border-radius: 14px;
--cc-btn-border-radius: 8px;
--cc-btn-primary-bg: var(--text);
--cc-btn-primary-color: var(--bg);
--cc-btn-primary-border-color: var(--text);
--cc-btn-primary-hover-bg: var(--text-muted);
--cc-btn-primary-hover-color: var(--bg);
--cc-btn-primary-hover-border-color: var(--text-muted);
--cc-btn-secondary-bg: var(--bg);
--cc-btn-secondary-color: var(--text);
--cc-btn-secondary-border-color: var(--field-border);
--cc-btn-secondary-hover-bg: var(--hover-overlay);
--cc-btn-secondary-hover-color: var(--text);
--cc-btn-secondary-hover-border-color: var(--text);
--cc-separator-border-color: var(--border-soft);
--cc-toggle-on-bg: var(--accent);
--cc-toggle-off-bg: var(--text-muted);
--cc-toggle-readonly-bg: var(--border-soft);
--cc-cookie-category-block-bg: var(--bg-alt);
--cc-cookie-category-block-border: var(--border-soft);
--cc-cookie-category-block-hover-bg: var(--hover-overlay);
--cc-cookie-category-block-hover-border: var(--border-soft);
--cc-cookie-category-expanded-block-bg: transparent;
--cc-cookie-category-expanded-block-hover-bg: var(--hover-overlay);
--cc-footer-bg: var(--bg-alt);
--cc-footer-color: var(--text-muted);
--cc-footer-border-color: var(--border-soft);
--cc-overlay-bg: rgba(0, 0, 0, 0.55);
}
#cc-main .cm__desc {
font-size: 0.85rem;
line-height: 1.5;
}
#cc-main .cm__btn {
font-size: 0.8rem;
font-weight: 500;
}
#cc-main .pm__title {
font-family: var(--font-serif);
font-weight: 500;
}
/* ==========================================================================
12. PAGES SECONDAIRES
========================================================================== */
/* ---------- Gabarit commun et abonnement ---------- */
.sub-main {
padding: calc(5rem + 3.5rem) 1.25rem 4.5rem;
}
.sub-wrap {
width: min(620px, 100%);
margin: 0 auto;
}
.sub-title {
margin-bottom: 1rem;
font-size: clamp(1.9rem, 5vw, 2.6rem);
line-height: 1.15;
text-align: center;
}
.sub-intro {
margin: 0 auto 2.5rem;
max-width: 34rem;
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.6;
text-align: center;
}
.sub-card {
margin-bottom: 1.5rem;
padding: 2rem 2rem 1.6rem;
background-color: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 16px;
scroll-margin-top: 7rem;
}
.sub-card__title {
margin-bottom: 1.2rem;
color: var(--accent);
font-size: 1.5rem;
line-height: 1.2;
}
.sub-card__text {
margin-bottom: 1.2rem;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.6;
}
/* Désabonnement */
.sub-card--quiet {
background-color: transparent;
}
.sub-card--quiet .sub-card__title {
color: var(--text);
}
.sub-btn-quiet {
border: 1px solid var(--border-soft);
border-radius: 30px;
font-size: 0.95rem;
transition: background-color 0.3s ease;
}
.sub-btn-quiet:hover {
background-color: var(--hover-overlay);
}
/* ---------- Politique de confidentialité ---------- */
.legal-updated {
margin-bottom: 2.5rem;
color: var(--text-muted);
font-size: 0.9rem;
text-align: center;
}
.legal h2 {
margin: 2.2rem 0 0.8rem;
font-size: 1.35rem;
line-height: 1.25;
}
.legal p,
.legal li {
color: var(--text-muted);
font-size: 0.98rem;
line-height: 1.65;
}
.legal p {
margin-bottom: 0.9rem;
}
.legal ul {
margin: 0 0 1rem 1.2rem;
padding: 0;
list-style: disc;
}
.legal li {
margin-bottom: 0.4rem;
}
.legal strong {
color: var(--text);
}
.legal a {
color: var(--text);
text-decoration: underline;
text-decoration-color: var(--accent);
text-underline-offset: 3px;
}
/* ---------- FAQ ---------- */
.faq .sub-title {
margin-bottom: 2rem;
}
.faq-toc {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 0 auto 2.5rem;
}
.faq-toc a {
padding: 0.45rem 1rem;
color: var(--text-muted);
font-size: 0.9rem;
white-space: nowrap;
border: 1px solid var(--border-soft);
border-radius: 30px;
transition:
color 0.3s ease,
border-color 0.3s ease,
background-color 0.3s ease;
}
.faq-toc a:hover {
color: var(--text);
border-color: var(--accent);
}
/* Onglets */
.faq-toc.is-tabs {
flex-wrap: nowrap;
justify-content: center;
overflow-x: auto;
scrollbar-width: none;
}
.faq-toc.is-tabs::-webkit-scrollbar {
display: none;
}
.faq-toc a[aria-selected="true"] {
background-color: var(--accent);
color: #111;
border-color: var(--accent);
}
.faq-toc a:focus-visible {
outline: 2px solid var(--accent-hover);
outline-offset: 2px;
}
.faq-section {
margin-bottom: 2.5rem;
scroll-margin-top: 7rem;
}
.faq-section__title {
margin-bottom: 0.8rem;
font-size: 1.45rem;
line-height: 1.25;
}
.faq-item {
border-bottom: 1px solid var(--border-soft);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0;
cursor: pointer;
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
flex-shrink: 0;
color: var(--accent);
font-size: 1.4rem;
line-height: 1;
transition: transform 0.3s ease;
}
.faq-item[open] summary::after {
content: "\2212";
}
.faq-item summary:focus-visible {
outline: 2px solid var(--accent-hover);
outline-offset: 4px;
}
.faq-item__q {
font-family: var(--font-sans);
font-size: 1.02rem;
font-weight: 500;
line-height: 1.4;
}
.faq-item__a {
padding: 0 0 1.2rem;
}
.faq-item__a p,
.faq-item__a li {
color: var(--text-muted);
font-size: 0.98rem;
line-height: 1.65;
}
.faq-item__a ul {
margin: 0 0 0 1.2rem;
padding: 0;
list-style: disc;
}
.faq-item__a li {
margin-bottom: 0.4rem;
}
.faq-item__a a {
color: var(--text);
text-decoration: underline;
text-decoration-color: var(--accent);
text-underline-offset: 3px;
}
/* ---------- Galerie ---------- */
.gallery-wrap {
width: min(1100px, 100%);
margin: 0 auto;
}
.gallery-main .sub-title {
margin-bottom: 2rem;
margin-inline: 0;
}
.gallery-filters {
display: flex;
justify-content: center;
gap: 0.5rem;
margin: 0 auto 2.5rem;
overflow-x: auto;
scrollbar-width: none;
}
.gallery-filters::-webkit-scrollbar {
display: none;
}
.gallery-filter {
padding: 0.45rem 1rem;
color: var(--text-muted);
font-size: 0.9rem;
white-space: nowrap;
border: 1px solid var(--border-soft);
border-radius: 30px;
transition:
color 0.3s ease,
border-color 0.3s ease,
background-color 0.3s ease;
}
.gallery-filter:hover {
color: var(--text);
border-color: var(--accent);
}
.gallery-filter[aria-pressed="true"] {
background-color: var(--accent);
color: #111;
border-color: var(--accent);
}
.gallery-filter:focus-visible {
outline: 2px solid var(--accent-hover);
outline-offset: 2px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.gallery-item[hidden] {
display: none;
}
.gallery-link {
display: block;
aspect-ratio: 1;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 8px 22px var(--shadow);
}
.gallery-link img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.gallery-link:hover img,
.gallery-link:focus-visible img {
transform: scale(1.04);
}
.gallery-link:focus-visible {
outline: 2px solid var(--accent-hover);
outline-offset: 3px;
}
.gallery-caption {
padding: 0.6rem 0.2rem 0;
}
.gallery-caption__title {
display: block;
font-size: 0.92rem;
line-height: 1.35;
}
.gallery-caption__text {
display: none;
}
/* Visionneuse */
.lightbox {
width: 100vw;
max-width: 100vw;
height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
background: rgba(10, 10, 10, 0.94);
color: #f2f2f2;
border: none;
}
.lightbox[open] {
display: flex;
align-items: center;
justify-content: center;
}
.lightbox::backdrop {
background: rgba(0, 0, 0, 0.6);
}
.lightbox__figure {
display: flex;
flex-direction: column;
align-items: center;
max-width: min(1100px, 86vw);
margin: 0;
}
.lightbox__img {
max-width: 100%;
max-height: 72vh;
object-fit: contain;
border-radius: 8px;
}
.lightbox__caption {
max-width: 640px;
padding-top: 1rem;
text-align: center;
}
.lightbox__title {
margin-bottom: 0.4rem;
font-size: 1.3rem;
}
.lightbox__text {
color: #cfcfcf;
font-size: 0.95rem;
line-height: 1.55;
}
.lightbox__count {
margin-top: 0.6rem;
color: #9a9a9a;
font-size: 0.8rem;
}
.lightbox__close,
.lightbox__nav {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: #fff;
font-size: 2rem;
line-height: 1;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
transition: background-color 0.3s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover {
background: rgba(255, 255, 255, 0.18);
}
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.lightbox__close {
top: 1rem;
right: 1rem;
}
.lightbox__nav--prev {
left: 1rem;
top: 50%;
transform: translateY(-50%);
}
.lightbox__nav--next {
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
/* ---------- Page 404 ---------- */
.error-page {
text-align: center;
}
.error-page__code {
margin: 0;
color: var(--accent);
font-family: var(--font-serif);
font-size: clamp(4rem, 14vw, 7rem);
line-height: 1;
}
.error-page__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin: 1.75rem 0 0;
}
.error-page__en {
margin-top: 3.5rem;
padding-top: 2.5rem;
border-top: 1px solid var(--border-soft);
}
.error-page__en h2 {
font-size: 1.4rem;
}
/* ==========================================================================
13. RESPONSIVE
========================================================================== */
/* ---------- Bureau : 881px et plus ---------- */
@media (min-width: 881px) {
/* Hero */
.hero-flame {
translate: 0 22%;
}
html[data-theme="dark"] .hero-flame {
translate: none;
}
/* Réseaux sociaux */
html:not([data-theme="dark"]) .img-div_img-block {
box-shadow: 0 12px 30px var(--shadow);
}
/* Réseaux sociaux */
.reseaux-sociaux {
align-items: stretch;
padding: 3rem 2vw;
}
.image-block {
width: 52%;
height: auto;
align-self: stretch;
padding: 3% 4%;
}
.categories-section {
width: 48%;
padding: 3% 4%;
}
.img-div_img-block {
height: 0;
min-height: 100%;
}
.div-banners-reseaux {
gap: 0.9rem;
}
.img-container {
min-height: 78px;
}
.social-banner {
max-height: 40px;
}
.category-text {
margin-top: 2rem;
}
/* Signification et vision */
.about-heading {
padding: 13vh 8vw;
}
.about-closing {
padding: clamp(80px, 15vh, 160px) 6vw;
}
/* À propos */
.about-us {
padding: 120px 32px;
}
.about-container {
gap: 120px;
}
.about-block {
gap: 72px;
}
/* Ma vision : étoiles */
.vision-stars i:nth-child(1) { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.vision-stars i:nth-child(2) { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.vision-stars i:nth-child(3) { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
}
/* ---------- 760px et plus ---------- */
@media (min-width: 760px) {
/* Pages secondaires */
.sub-title {
font-size: clamp(1.9rem, 4.4vw, 2.4rem);
white-space: nowrap;
margin-inline: calc((min(100vw - 2.5rem, 620px) - min(100vw - 2.5rem, 960px)) / 2);
}
}
/* ---------- Tablette : 880px et moins ---------- */
@media (max-width: 880px) {
/* Navigation */
.site-nav {
gap: 1.25rem;
}
/* Réseaux sociaux */
.reseaux-sociaux {
flex-direction: column;
align-items: stretch;
padding-bottom: 1rem;
}
.categories-section {
display: contents;
}
.category-text {
order: 1;
margin-top: 0;
padding: 8% 5% 0;
text-align: center;
}
.div-banners-reseaux {
order: 2;
padding: 6% 5% 0;
}
.image-block {
order: 3;
width: 100%;
height: 560px;
padding: 8% 5% 5%;
}
.img-div_img-block {
object-position: 50% 10%;
}
/* À propos */
.about-us {
padding: 80px 24px;
}
.about-block {
flex-direction: column;
gap: 28px;
}
.about-text,
.about-image {
width: 100%;
flex-basis: auto;
}
.about-text h3 {
text-align: center;
}
.about-image img {
max-width: 380px;
margin: auto;
}
/* Galerie */
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
/* ---------- Pied de page : 880px et moins ---------- */
@media (max-width: 880px) {
.footer-inner {
padding: 0;
}
.footer-top {
grid-template-columns: 1fr;
justify-items: center;
gap: 1.5rem;
text-align: center;
}
.footer-brand {
display: block;
}
.footer-logo img {
margin: 0 auto;
}
.footer-nav {
justify-content: center;
margin-top: 1.25rem;
}
.footer-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
}
.footer-bottom {
flex-direction: column;
justify-content: center;
text-align: center;
}
.footer-social,
.footer-legal {
justify-content: center;
}
}
/* ---------- Mobile : 700px et moins ---------- */
@media (max-width: 700px) {
/* À propos : pas de parallaxe */
.about-image {
transform: none;
will-change: auto;
}
/* En-tête */
.site-header {
padding: 0 4%;
box-shadow: 0 2px 10px var(--shadow);
}
.site-logo {
height: 2rem;
}
.theme-toggle,
.lang-toggle {
width: 36px;
height: 36px;
}
.lang-toggle {
font-size: 0.68rem;
}
.theme-notice {
width: 210px;
}
.site-header__side--end {
gap: 0.6rem;
}
.nav-toggle {
display: flex;
}
/* Bouton Magasiner */
.shop-btn--header {
display: none;
}
/* Navigation */
.site-nav {
position: fixed;
top: 5rem;
left: 0;
right: 0;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
max-height: 0;
overflow: hidden;
background-color: var(--header-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
visibility: hidden;
transition:
max-height 0.3s ease,
background-color 0.3s ease,
visibility 0s linear 0.3s;
}
.site-nav.is-open {
max-height: 60vh;
visibility: visible;
transition-delay: 0s;
}
.site-nav a {
padding: 1rem 6%;
font-size: 1.05rem;
text-align: center;
border-top: 1px solid var(--border-soft);
}
.site-nav a.shop-btn--menu {
display: flex;
justify-content: center;
gap: 0.6rem;
height: auto;
border-radius: 0;
border-top: none;
}
.site-nav a.shop-btn--menu:hover {
opacity: 1;
transform: none;
}
/* Hero */
.hero {
height: 70vh;
min-height: 400px;
}
.hero-overlay {
padding: 15px;
}
/* Titres et textes */
.category-text h2,
.about-heading h2,
.vision-label {
font-size: clamp(1.75rem, 7.6vw, 2rem);
}
.category-text,
.about-heading,
.about-text,
.about-text h3 {
text-align: left;
}
/* Réseaux sociaux */
.category-text p,
.image-block {
display: none;
}
.div-banners-reseaux {
padding: 1.5rem 5% 3rem;
}
.img-container {
min-height: 72px;
padding: 0.9rem 2.5rem;
}
.social-banner {
max-height: 36px;
}
.arrow {
right: 1.1rem;
width: 16px;
}
/* Signification */
.about-heading {
padding: 72px 6%;
}
/* À propos */
.about-us {
padding: 72px 18px;
}
.about-container {
gap: 72px;
}
.about-block {
gap: 40px;
}
.about-text p {
line-height: 1.6;
}
.about-image img {
max-width: 100%;
}
/* Ma vision */
.about-closing {
padding: 72px 6%;
}
.vision-label {
margin-bottom: 50px;
}
.vision-items {
flex-direction: column;
gap: 40px;
}
.vision-divider {
display: none;
}
.vision-item {
padding: 0;
}
.vision-item span {
margin-bottom: 8px;
}
.vision-item strong {
font-size: clamp(1.3rem, 7.4vw, 2rem);
white-space: normal;
}
}
/* ---------- 600px et moins ---------- */
@media (max-width: 600px) {
/* Galerie */
.gallery-grid {
gap: 0.75rem;
}
.gallery-filters {
flex-wrap: wrap;
gap: 0.4rem;
}
.gallery-filter {
padding: 0.4rem 0.75rem;
font-size: 0.85rem;
}
.gallery-caption__title {
font-size: 0.85rem;
}
.lightbox__figure {
max-width: 92vw;
}
.lightbox__img {
max-height: 60vh;
}
.lightbox__nav {
top: auto;
bottom: 1rem;
transform: none;
}
}
/* ---------- 480px et moins ---------- */
@media (max-width: 480px) {
/* Popup Magasiner */
.shop-dialog {
padding: 2.2rem 1.4rem 1.5rem;
}
.shop-dialog__row {
flex-direction: column;
}
.shop-dialog__row input[type="email"] {
flex: none;
width: 100%;
}
.shop-dialog__submit {
width: 100%;
}
/* Pages secondaires */
.sub-main {
padding-top: calc(5rem + 2rem);
}
.sub-card {
padding: 1.6rem 1.25rem 1.3rem;
}
}
/* ---------- 420px et moins ---------- */
@media (max-width: 420px) {
/* FAQ */
.faq-toc.is-tabs {
justify-content: flex-start;
gap: 0.35rem;
}
.faq-toc a {
padding: 0.4rem 0.7rem;
font-size: 0.85rem;
}
}
/* ---------- 400px et moins ---------- */
@media (max-width: 400px) {
/* Ma vision */
.vision-item strong {
font-size: 1.3rem;
}
}
/* ==========================================================================
14. MOUVEMENT RÉDUIT
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hero-flame i,
.vision-stars i,
.shop-dialog[open] {
animation: none;
}
.img-container,
.arrow {
transition: none;
}
}