/* =========================================================
SALMA LAHKIM — Portfolio
Direction : éditorial contemporain
Papier chaud · vert phtalo · lie-de-vin · reliefs doux
========================================================= */
/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: #6e2436; color: #f4f1ea; }
/* ---------------------------------------------------------
POLICES — chargées depuis Google Fonts ( dans le ).
Pour les héberger sur le serveur : télécharger Instrument Serif
et Inter sur fonts.google.com, placer les .woff2 dans assets/fonts/,
supprimer les balises Google et décommenter ce bloc.
---------------------------------------------------------
@font-face { font-family:"Instrument Serif"; src:url("../fonts/instrument-serif-400.woff2") format("woff2");
font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-variable.woff2") format("woff2");
font-weight:300 700; font-style:normal; font-display:swap; }
--------------------------------------------------------- */
/* ---------- 2. Jetons ---------- */
:root {
/* surfaces */
--paper: #f4f1ea;
--surface: #f8f6f0;
--surface-in: #efece4;
/* encres */
--ink: #161c19;
--ink-soft: #4e544e;
--ink-mute: #86847c;
/* accents */
--green: #0e3b32; /* vert phtalo */
--green-mid: #17564a;
--green-pale: rgba(14, 59, 50, .08);
--wine: #6e2436; /* lie-de-vin */
--wine-mid: #8e3247;
--wine-pale: rgba(110, 36, 54, .09);
/* traits */
--line: rgba(22, 28, 25, .14);
--line-soft: rgba(22, 28, 25, .08);
/* reliefs doux */
--relief: 8px 8px 22px rgba(22, 28, 25, .07), -8px -8px 20px rgba(255, 255, 255, .8);
--relief-sm: 4px 4px 12px rgba(22, 28, 25, .06), -4px -4px 10px rgba(255, 255, 255, .75);
--relief-lift: 12px 14px 34px rgba(22, 28, 25, .11), -8px -8px 20px rgba(255, 255, 255, .85);
--relief-in: inset 4px 4px 10px rgba(22, 28, 25, .07), inset -3px -3px 8px rgba(255, 255, 255, .85);
/* typo */
--serif: "Instrument Serif", "GFS Baskerville", "Bitstream Charter", Georgia, "Times New Roman", serif;
--sans: "Inter", "Carlito", "Helvetica Neue", Helvetica, Arial, sans-serif;
/* mesures */
--wrap: 1200px;
--gutter: clamp(20px, 5vw, 56px);
--sp: clamp(56px, 7.5vw, 112px);
--radius: 18px;
--ease: cubic-bezier(.22, 1, .36, 1);
}
/* ---------- 3. Base ---------- */
body {
font-family: var(--sans);
font-size: 16.5px;
line-height: 1.7;
font-weight: 400;
color: var(--ink);
background-color: var(--paper);
background-image:
radial-gradient(120% 70% at 80% -10%, rgba(14, 59, 50, .05), transparent 60%),
radial-gradient(90% 60% at -10% 100%, rgba(110, 36, 54, .045), transparent 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
background-attachment: fixed, fixed, scroll;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
/* ---------- 4. Typographie ---------- */
.display {
font-family: var(--serif);
font-weight: 400;
line-height: 1.07;
letter-spacing: -.015em;
text-wrap: balance;
}
.display--xl { font-size: clamp(3rem, 8.4vw, 6.8rem); line-height: 1.04; }
.display--l { font-size: clamp(2.5rem, 6vw, 4.6rem); }
.display--m { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.08; }
.display--s { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.14; }
.accent { color: var(--wine); font-style: italic; }
.accent-green { color: var(--green); font-style: italic; }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
color: var(--green);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .55; flex: none; }
.eyebrow--plain::before { display: none; }
.eyebrow--wine { color: var(--wine); }
.eyebrow--mute { color: var(--ink-mute); font-weight: 500; }
.lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.62; color: var(--ink-soft); max-width: 60ch; }
p + p { margin-top: 1em; }
strong { font-weight: 600; color: var(--ink); }
.section { padding-block: var(--sp); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section-head { margin-bottom: clamp(32px, 4vw, 54px); }
.section-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--serif); font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -.015em; margin-top: 14px; font-weight: 400; }
.section-head__rule { margin-top: 22px; height: 1px; background: var(--line); position: relative; }
.section-head__rule::after { content: ""; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--wine); }
.section-num { font-family: var(--serif); font-size: 1.05rem; color: var(--wine); }
.stat__value, .case-row__num, .section-num, .idcard__v, .entry__date, .pillar__num, .contact-row__value {
font-variant-numeric: lining-nums tabular-nums;
}
/* ---------- 5. Liens & boutons ---------- */
.link {
display: inline-flex; align-items: center; gap: 10px;
font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
color: var(--green); padding-bottom: 4px;
border-bottom: 1px solid rgba(14, 59, 50, .3);
transition: color .35s var(--ease), border-color .35s var(--ease), gap .35s var(--ease);
}
.link::after { content: "\2192"; }
.link:hover { color: var(--wine); border-color: var(--wine); gap: 15px; }
.link--back::after { content: none; }
.link--back::before { content: "\2190"; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 15px 30px; border-radius: 999px; border: 0; cursor: pointer;
background: var(--green); color: var(--paper);
font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
box-shadow: var(--relief-sm);
transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover { background: var(--wine); transform: translateY(-2px); box-shadow: var(--relief-lift); }
.btn--ghost { background: var(--surface); color: var(--green); box-shadow: var(--relief-sm); }
.btn--ghost:hover { color: var(--wine); background: var(--surface); }
.inline-link { color: var(--green); border-bottom: 1px solid rgba(14, 59, 50, .28); transition: color .3s, border-color .3s; }
.inline-link:hover { color: var(--wine); border-color: var(--wine); }
/* ---------- 6. En-tête ---------- */
.site-header {
position: sticky; top: 0; z-index: 60;
background: color-mix(in srgb, var(--paper) 82%, transparent);
backdrop-filter: blur(12px) saturate(1.1);
border-bottom: 1px solid transparent;
transition: border-color .4s, background .4s;
}
.site-header.is-stuck { border-bottom-color: var(--line-soft); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 74px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__name { font-family: var(--serif); font-size: 1.22rem; letter-spacing: -.01em; }
.brand__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--wine); flex: none; }
.nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); }
.nav a { position: relative; font-size: .78rem; font-weight: 500; color: var(--ink-soft); padding: 6px 0; transition: color .3s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--wine); transition: right .4s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }
.nav a[aria-current="page"] { color: var(--green); font-weight: 600; }
.nav a[aria-current="page"]::after { right: 0; background: var(--green); }
.nav a.is-private::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--ink-mute); margin-right: 7px; vertical-align: middle; }
.nav a.is-private:hover::before { background: var(--wine); border-color: var(--wine); }
.nav-toggle {
display: none; background: var(--surface); border: 0; border-radius: 999px;
padding: 10px 18px; font-size: .72rem; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; cursor: pointer; color: var(--green); box-shadow: var(--relief-sm);
}
@media (max-width: 1000px) {
.nav-toggle { display: block; }
.nav {
position: absolute; top: 74px; left: 0; right: 0; display: none;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--paper); border-bottom: 1px solid var(--line-soft);
padding: 6px var(--gutter) 22px;
}
.nav.is-open { display: flex; }
.nav a { font-size: .98rem; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.nav a::after { display: none; }
}
/* ---------- 7. Hero ---------- */
.hero { position: relative; padding-block: clamp(44px, 6vw, 84px) clamp(36px, 4.5vw, 64px); overflow: hidden; }
.hero--page { padding-bottom: clamp(18px, 2.4vw, 32px); }
.hero__flora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__flora img { position: absolute; filter: grayscale(1) contrast(.9); }
.hero__inner { position: relative; z-index: 1; }
.flora-a { width: clamp(230px, 30vw, 440px); left: 1%; top: 0; opacity: .2; }
.flora-b { width: clamp(265px, 34vw, 495px); right: -4%; bottom: -16%; opacity: .24; }
.flora-c { width: clamp(220px, 28vw, 380px); right: 1%; top: -20%; opacity: .18; }
.hero-home { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.hero-home__title { margin-top: 20px; }
.hero-home__title .accent { display: block; }
.hero-home__cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: clamp(28px, 3.4vw, 40px); }
@media (max-width: 900px) { .hero-home { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.idcard { background: var(--surface); border-radius: var(--radius); padding: clamp(24px, 3vw, 32px); box-shadow: var(--relief); }
.idcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.idcard__row:last-child { border-bottom: 0; padding-bottom: 0; }
.idcard__row:first-child { padding-top: 0; }
.idcard__k { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); }
.idcard__v { font-family: var(--serif); font-size: 1.12rem; text-align: right; }
.idcard__v .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green-mid); margin-right: 8px; }
/* ---------- 8. Bandeau défilant ---------- */
.ticker { background: var(--green); color: #eef2ef; overflow: hidden; padding-block: 15px; }
.ticker__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.ticker__track > span {
display: inline-flex; align-items: center; gap: 26px; padding-right: 26px;
font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
white-space: nowrap; opacity: .92;
}
.ticker__track > span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wine-mid); flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }
/* ---------- 9. Chiffres ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.stat { background: var(--surface); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--relief-sm); transition: box-shadow .45s var(--ease), transform .45s var(--ease); }
.stat:hover { box-shadow: var(--relief-lift); transform: translateY(-3px); }
.stat__value { font-family: var(--serif); font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.05; color: var(--green); }
.stat__value em { font-style: italic; color: var(--wine); }
.stat__label { margin-top: 12px; font-size: .74rem; line-height: 1.5; color: var(--ink-mute); }
/* ---------- 10. Bande sombre ---------- */
.band-dark {
background: var(--green); color: #e8ece9; border-radius: clamp(20px, 3vw, 34px);
padding: clamp(38px, 5vw, 76px) clamp(24px, 4vw, 60px);
position: relative; overflow: hidden;
}
.band-dark::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(70% 60% at 90% 0%, rgba(142, 50, 71, .3), transparent 60%);
}
.band-dark > * { position: relative; z-index: 1; }
.band-dark .eyebrow { color: #b9cdc5; }
.band-dark .display, .band-dark .section-head h2 { color: #fbfaf6; }
.band-dark p { color: rgba(232, 236, 233, .8); }
.band-dark .section-head__rule { background: rgba(255, 255, 255, .16); }
.band-dark .section-head__rule::after { background: var(--wine-mid); }
.band-dark .section-num { color: #c9a2ae; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 46px); margin-top: clamp(28px, 3.5vw, 46px); }
.pillar { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); }
.pillar h3 { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.15; color: #fbfaf6; font-weight: 400; }
.pillar p { margin-top: 12px; font-size: .95rem; line-height: 1.65; }
.pillar__num { font-family: var(--serif); font-size: .95rem; color: #9fbdb2; }
@media (max-width: 820px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
/* ---------- 11. Études de cas ---------- */
.case-row {
display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: start;
gap: clamp(16px, 2.5vw, 34px); padding: clamp(26px, 3vw, 38px) clamp(14px, 2vw, 26px);
border-radius: var(--radius); border-bottom: 1px solid var(--line-soft);
transition: background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.case-row:hover { background: var(--surface); box-shadow: var(--relief-sm); transform: translateX(4px); border-bottom-color: transparent; }
.case-row__num { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--wine); line-height: 1.1; }
.case-row__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-mute); }
.case-row__title { font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.12; margin: 10px 0 12px; letter-spacing: -.015em; font-weight: 400; }
.case-row__desc { color: var(--ink-soft); font-size: .98rem; max-width: 58ch; }
.case-row__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.case-row__go {
width: 46px; height: 46px; border-radius: 50%; background: var(--surface); box-shadow: var(--relief-sm);
display: grid; place-items: center; color: var(--green); flex: none;
transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.case-row:hover .case-row__go { background: var(--green); color: var(--paper); transform: rotate(-45deg); }
@media (max-width: 720px) {
.case-row { grid-template-columns: 44px minmax(0, 1fr); padding-inline: 0; }
.case-row__go { display: none; }
}
.chip {
display: inline-flex; align-items: center; padding: 7px 15px; border-radius: 999px;
background: var(--surface); box-shadow: var(--relief-sm);
font-size: .73rem; letter-spacing: .04em; color: var(--ink-soft);
transition: color .3s, box-shadow .3s;
}
.chip:hover { color: var(--green); }
.chip--green { background: var(--green-pale); box-shadow: none; color: var(--green); }
.chip--wine { background: var(--wine-pale); box-shadow: none; color: var(--wine); }
/* ---------- 12. Grilles ---------- */
.grid { display: grid; gap: clamp(24px, 3.2vw, 48px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--aside { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
@media (max-width: 880px) { .grid--2, .grid--3, .grid--aside { grid-template-columns: minmax(0, 1fr); } }
/* ---------- 13. Parcours ---------- */
.timeline { position: relative; padding-left: clamp(20px, 3vw, 34px); }
.timeline::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.entry { position: relative; padding-block: clamp(22px, 2.6vw, 32px); }
.entry::before {
content: ""; position: absolute; left: calc(-1 * clamp(20px, 3vw, 34px)); top: calc(clamp(22px, 2.6vw, 32px) + 14px);
width: 7px; height: 7px; border-radius: 50%; background: var(--paper);
box-shadow: 0 0 0 1px var(--line); transform: translateX(-3px);
transition: background .35s, box-shadow .35s;
}
.entry:hover::before { background: var(--wine); box-shadow: 0 0 0 4px var(--wine-pale); }
.entry + .entry { border-top: 1px solid var(--line-soft); }
.entry__head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.entry__role { font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.2; font-weight: 400; }
.entry__org { margin-top: 5px; font-size: .88rem; color: var(--green); }
.entry__date { font-size: .73rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); white-space: nowrap; }
.bullets { margin-top: 16px; display: grid; gap: 8px; }
.bullets li { position: relative; padding-left: 20px; font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .68em; width: 8px; height: 1px; background: var(--wine); opacity: .6; }
/* ---------- 14. Compétences ---------- */
.skill-card { background: var(--surface); border-radius: var(--radius); padding: clamp(24px, 2.8vw, 34px); box-shadow: var(--relief-sm); transition: box-shadow .45s var(--ease), transform .45s var(--ease); }
.skill-card:hover { box-shadow: var(--relief); transform: translateY(-2px); }
.skill-card h3 { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lang { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.lang:last-child { border-bottom: 0; }
.lang__name { font-family: var(--serif); font-size: 1.3rem; }
.lang__level { font-size: .8rem; color: var(--ink-mute); }
/* ---------- 15. À compléter ---------- */
.todo {
display: inline-flex; align-items: baseline; gap: 7px;
font-family: var(--serif); font-style: italic; font-size: .95em; color: var(--wine);
border-bottom: 1px dotted rgba(110, 36, 54, .45);
}
.todo::before { content: "\2022"; }
.todo-block {
border-radius: var(--radius); padding: clamp(22px, 2.6vw, 30px);
background: var(--surface-in); box-shadow: var(--relief-in);
color: var(--ink-soft); font-size: .95rem; line-height: 1.6;
}
.todo-block > .eyebrow { margin-bottom: 12px; }
/* ---------- 16. Espace privé ---------- */
.gate { min-height: calc(100vh - 74px); display: grid; place-items: center; padding: 56px var(--gutter); position: relative; overflow: hidden; }
.gate__flora { position: absolute; inset: 0; pointer-events: none; }
.gate__flora img { position: absolute; opacity: .18; filter: grayscale(1); }
.gate__card {
position: relative; z-index: 1; width: 100%; max-width: 470px; text-align: center;
background: var(--surface); border-radius: clamp(20px, 3vw, 28px);
padding: clamp(34px, 4.4vw, 52px); box-shadow: var(--relief);
}
.gate__lock { width: 34px; height: 34px; margin: 0 auto 22px; color: var(--green); }
.gate__title { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.1; margin-top: 14px; font-weight: 400; }
.gate__form { margin-top: 30px; display: grid; gap: 12px; }
.gate__input {
width: 100%; padding: 16px 20px; border: 0; border-radius: 999px;
background: var(--surface-in); box-shadow: var(--relief-in);
text-align: center; letter-spacing: .1em; font-size: .92rem; transition: box-shadow .3s;
}
.gate__input::placeholder { color: var(--ink-mute); letter-spacing: .06em; }
.gate__input:focus { outline: none; box-shadow: var(--relief-in), 0 0 0 2px var(--green-pale); }
.gate__error { min-height: 20px; font-size: .82rem; color: var(--wine); }
.gate__hint { margin-top: 20px; font-size: .82rem; color: var(--ink-mute); line-height: 1.6; }
[data-private-content] { display: none; }
[data-private-content].is-unlocked { display: block; }
.private-bar {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding: 13px 22px; border-radius: 999px; background: var(--surface); box-shadow: var(--relief-sm);
font-size: .76rem; color: var(--ink-mute);
}
.private-bar span { display: inline-flex; align-items: center; gap: 9px; }
.private-bar span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-mid); }
.private-bar button { background: none; border: 0; cursor: pointer; font-size: .76rem; font-weight: 600; color: var(--green); border-bottom: 1px solid rgba(14, 59, 50, .3); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.private-bar button:hover { color: var(--wine); border-color: var(--wine); }
/* ---------- 17. Citations ---------- */
.quote { background: var(--surface); border-radius: var(--radius); padding: clamp(26px, 3.2vw, 40px); box-shadow: var(--relief-sm); transition: box-shadow .45s var(--ease); }
.quote:hover { box-shadow: var(--relief); }
.quote__text { font-family: var(--serif); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.45; color: var(--ink); max-width: 62ch; }
.quote__text::before { content: "\201C"; color: var(--wine); margin-right: 3px; }
.quote__text::after { content: "\201D"; color: var(--wine); }
.quote__author { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.quote__name { font-weight: 600; font-size: .92rem; }
.quote__role { font-size: .84rem; color: var(--ink-mute); }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 30px; }
.shot { border-radius: var(--radius); background: var(--surface-in); box-shadow: var(--relief-in); aspect-ratio: 3 / 4; display: grid; place-items: center; text-align: center; padding: 20px; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
/* ---------- 18. Contact ---------- */
.contact-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--relief); padding: clamp(26px, 3vw, 40px); }
.contact-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.contact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-row:first-child { padding-top: 0; }
.contact-row__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); }
.contact-row__value { font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.contact-form { display: grid; gap: 14px; margin-top: 26px; }
.field {
width: 100%; padding: 16px 20px; border: 0; border-radius: 16px;
background: var(--surface-in); box-shadow: var(--relief-in);
font-size: .92rem; transition: box-shadow .3s;
}
.field::placeholder { color: var(--ink-mute); }
.field:focus { outline: none; box-shadow: var(--relief-in), 0 0 0 2px var(--green-pale); }
textarea.field { resize: vertical; min-height: 140px; border-radius: 20px; }
.field-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); display: block; margin-bottom: 8px; }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contact-form__captcha { margin-top: 4px; }
.contact-form__status { min-height: 20px; font-size: .84rem; }
.contact-form__status.is-error { color: var(--wine); }
.contact-form__status.is-ok { color: var(--green); }
.contact-form .btn[disabled] { opacity: .6; cursor: default; transform: none; }
/* ---------- 19. Pied de page ---------- */
.site-footer { background: var(--green); color: rgba(232, 236, 233, .82); margin-top: var(--sp); padding-block: clamp(44px, 5.5vw, 76px); }
.site-footer a { color: rgba(232, 236, 233, .82); transition: color .3s; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; }
.site-footer__name { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.4rem); color: #fbfaf6; line-height: 1.1; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 4px; }
.site-footer__nav a { font-size: .84rem; }
.site-footer__legal { margin-top: 30px; font-size: .76rem; color: rgba(232, 236, 233, .5); }
.site-footer__contact { font-size: .95rem; }
@media (max-width: 780px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- 20. Utilitaires ---------- */
.mt-s { margin-top: 16px; } .mt-m { margin-top: 30px; } .mt-l { margin-top: 52px; }
.text-mute { color: var(--ink-mute); }
.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; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.ticker__track { animation: none; }
html { scroll-behavior: auto; }
}
/* ---------- 21. Impression ---------- */
@media print {
.site-header, .site-footer, .ticker, .hero__flora, .nav-toggle, .link, .btn { display: none !important; }
body { background: #fff; font-size: 11pt; color: #000; }
.section, .hero { padding-block: 12pt; }
.entry, .quote, .stat { break-inside: avoid; box-shadow: none; }
}