/* ============================================================
ONEPROD — Design System v2 · Premium Edition
============================================================ */
/* Polices chargées via dans le de chaque page — voir les fichiers .php */
/* ── Variables ────────────────────────────────────────────── */
:root {
--color-night: #0E1420;
--color-slate: #1E3A5F;
--color-lin: #F6F4EF;
--color-coal: #0D0D0D;
--color-mid: #696969;
--color-rule: #C4BAA8;
--color-signature: #C4703A;
--color-support: #B8541E;
--color-white: #FFFFFF;
/* Transitions globales */
--t-fast: 0.2s ease;
--t-mid: 0.35s ease;
--t-slow: 0.7s ease;
}
/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
/* Transitions douces sur couleur, fond, opacité seulement
(éviter transition sur transform/layout = perf) */
transition: color var(--t-fast),
background-color var(--t-fast),
opacity var(--t-fast),
border-color var(--t-fast);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 400;
font-size: 18px;
line-height: 1.9;
color: var(--color-coal);
background-color: var(--color-lin);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Typographie — Échelle contrastée ─────────────────────── */
/* H1 hero — grand, Cormorant, élégance éditorialiste
color sans !important : un h1{color:var(--color-night) !important}
écraserait tout style inline de couleur mis par une page individuelle
(ex: sections à fond sombre déclaré en inline, sans classe .section-dark
/.section-mid/.section-hero) et rendrait le titre invisible sur son
propre fond. Le style inline explicite d'une page doit pouvoir gagner. */
h1 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(3rem, 7vw, 6rem) !important;
letter-spacing: -0.01em !important;
line-height: 0.95 !important;
color: var(--color-white);
}
/* H2 de section — Montserrat léger, aéré */
h2 {
font-family: 'Montserrat', Arial, sans-serif !important;
font-weight: 200 !important;
font-size: clamp(1.6rem, 3.5vw, 3rem) !important;
letter-spacing: 0.04em !important;
line-height: 1.1 !important;
color: var(--color-night);
}
h3 {
font-family: 'Montserrat', Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 1.1rem !important;
letter-spacing: 0.04em !important;
color: var(--color-night);
}
/* H2/H3 sur fond sombre → clair */
.section-dark h2, .section-mid h2, .section-hero h2,
nav h2, footer h2 {
color: var(--color-white) !important;
}
.section-dark h3, .section-mid h3, .section-hero h3,
footer h3 {
color: rgba(246,244,239,0.8) !important;
}
/* Corps long — Cormorant, interlignage généreux */
.font-body {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: clamp(1rem, 1.5vw, 1.15rem);
line-height: 1.9;
}
/* Citations — grandes, aérées */
blockquote, .citation {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: clamp(1.4rem, 2.5vw, 2rem);
line-height: 1.55;
letter-spacing: 0.01em;
border-left: 0.5px solid var(--color-signature);
padding-left: 2rem;
margin-left: 0;
}
/* ── Logo ─────────────────────────────────────────────────── */
.site-logo {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 300;
font-size: 0.9rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-white) !important;
font-style: normal;
text-decoration: none;
}
.site-logo span { color: inherit !important; }
/* ── Navigation — Premium ─────────────────────────────────── */
nav {
background: rgba(14,20,32,0.96) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-bottom: 0.5px solid rgba(196,186,168,0.1) !important;
height: 68px !important;
}
nav a {
font-family: 'Montserrat', Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 0.68rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: rgba(196,186,168,0.7) !important;
text-decoration: none !important;
position: relative;
}
/* Underline qui grandit au hover */
nav a:not(.nav-cta)::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 0.5px;
background: var(--color-signature);
transition: width 0.35s ease;
}
nav a:not(.nav-cta):hover::after { width: 100%; }
nav a:hover, nav a.active {
color: var(--color-white) !important;
}
/* CTA nav */
nav a.nav-cta {
background-color: var(--color-signature) !important;
color: var(--color-white) !important;
padding: 0.45rem 1.2rem !important;
letter-spacing: 0.1em !important;
}
nav a.nav-cta:hover {
background-color: var(--color-support) !important;
color: var(--color-white) !important;
}
nav a.nav-cta::after { display: none !important; }
/* ── Boutons — Sobre, caractère ───────────────────────────── */
.btn-primary {
background-color: var(--color-signature) !important;
color: var(--color-lin) !important;
font-family: 'Montserrat', Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 0.7rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
border: none !important;
border-radius: 0 !important;
padding: 14px 40px !important;
display: inline-block;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease,
letter-spacing 0.3s ease !important;
}
.btn-primary:hover {
background-color: var(--color-support) !important;
letter-spacing: 0.22em !important;
transform: none !important;
box-shadow: none !important;
}
.btn-outline, .btn-secondary {
background-color: transparent !important;
color: var(--color-white) !important;
font-family: 'Montserrat', Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 0.7rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
border: 0.5px solid rgba(196,186,168,0.4) !important;
border-radius: 0 !important;
padding: 14px 38px !important;
display: inline-block;
text-decoration: none;
cursor: pointer;
transition: border-color 0.3s ease,
color 0.3s ease,
letter-spacing 0.3s ease !important;
}
.btn-outline:hover, .btn-secondary:hover {
border-color: var(--color-signature) !important;
color: var(--color-signature) !important;
letter-spacing: 0.22em !important;
transform: none !important;
box-shadow: none !important;
}
.btn-outline.on-light {
color: var(--color-night) !important;
border-color: rgba(14,20,32,0.35) !important;
}
.btn-outline.on-light:hover {
color: var(--color-signature) !important;
border-color: var(--color-signature) !important;
}
/* ── Fonds de section ─────────────────────────────────────── */
section, main {
background-color: var(--color-lin);
color: var(--color-coal);
}
.section-hero {
background-color: var(--color-night) !important;
color: var(--color-white);
}
.section-dark {
background-color: var(--color-night) !important;
color: var(--color-white);
}
.section-mid {
background-color: var(--color-slate) !important;
color: var(--color-white);
}
.section-light {
background-color: var(--color-lin) !important;
color: var(--color-coal);
}
footer {
background-color: var(--color-night) !important;
border-top: 0.5px solid rgba(196,186,168,0.12) !important;
color: var(--color-white);
}
/* ── Hero — alignement gauche, composition asymétrique ─────── */
.hero-wrap { position: relative; }
.hero-mask {
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, transparent 45%, #0E1420 100%),
linear-gradient(to right, rgba(14,20,32,0.55) 0%, transparent 70%),
radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(4,6,12,0.82) 100%),
rgba(14,20,32,0.55);
pointer-events: none;
z-index: 1;
}
.hero-content {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 4rem 8vw 2rem;
z-index: 2;
}
/* Override Tailwind centering dans le hero */
.hero-content .text-center {
text-align: left !important;
}
.hero-content .justify-center {
justify-content: flex-start !important;
}
.hero-content .mx-auto {
margin-left: 0 !important;
margin-right: 0 !important;
}
.hero-content h1 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(3.5rem, 7vw, 6.5rem) !important;
letter-spacing: -0.01em !important;
line-height: 0.95 !important;
}
/* ── Cards services ───────────────────────────────────────── */
.card-service {
background: var(--color-white) !important;
border-top: 0.5px solid rgba(196,186,168,0.5) !important;
color: var(--color-coal) !important;
transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}
.card-service:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(196,112,58,0.08) !important;
}
.card-service h3 { color: var(--color-night) !important; }
/* Cards alternes — casse la symétrie de la grille */
.card-service:nth-child(even) {
padding-bottom: calc(2rem + 40px) !important;
}
.pillar-card {
background: var(--color-white) !important;
border-top: 0.5px solid rgba(196,186,168,0.5) !important;
color: var(--color-coal);
}
.pillar-card h3 { color: var(--color-night) !important; }
.section-dark .card-service,
.section-mid .card-service,
.section-dark .pillar-card,
.section-mid .pillar-card {
background: rgba(255,255,255,0.05) !important;
border-top-color: rgba(196,186,168,0.18) !important;
color: var(--color-white) !important;
}
.section-dark .card-service h3,
.section-mid .card-service h3,
.section-dark .pillar-card h3,
.section-mid .pillar-card h3 {
color: var(--color-white) !important;
}
/* ── Chiffres contour (numéros géants, remplissage transparent) ──────
Réutilisé par les sections filmstrip (références), étapes (méthode)
et piliers de la page production-executive.php (FR + EN). */
.stroke-num {
display: block;
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
line-height: 0.85;
color: transparent;
-webkit-text-stroke: 1.5px var(--color-signature);
}
/* ── Pastilles (pills) — tags de contexte & garanties opérationnelles ── */
.pill-tag {
display: inline-block;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 300;
font-size: 0.72rem;
line-height: 1.3;
letter-spacing: 0.02em;
padding: 0.5rem 1rem;
border: 0.5px solid rgba(196,112,58,0.5);
border-radius: 999px;
color: var(--color-signature);
}
.pill-tag--muted {
color: var(--color-coal);
border-color: rgba(196,112,58,0.4);
}
/* ── Filmstrip — liste de références avec numéro contour + miniature ── */
.filmstrip-row {
display: grid;
grid-template-columns: 56px 1fr;
grid-template-areas: "num thumb" "info info" "cta cta";
gap: 0.75rem 1.25rem;
align-items: center;
padding: 1.75rem 0;
border-top: 0.5px solid rgba(196,186,168,0.25);
text-decoration: none;
}
.filmstrip-row .fs-num { grid-area: num; }
.filmstrip-row .fs-thumb { grid-area: thumb; }
.filmstrip-row .fs-info { grid-area: info; }
.filmstrip-row .fs-cta { grid-area: cta; }
@media (min-width: 768px) {
.filmstrip-row {
grid-template-columns: 90px 220px 1fr auto;
grid-template-areas: "num thumb info cta";
gap: 2rem;
}
}
/* ── Étapes méthode en zigzag — numéro contour + contenu ─────────────── */
.zigzag-step {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem 0;
border-top: 0.5px solid rgba(196,186,168,0.3);
}
@media (min-width: 768px) {
.zigzag-step { flex-direction: row; align-items: center; gap: 2.5rem; }
.zigzag-step .stroke-num { width: 140px; flex-shrink: 0; }
}
/* ── Rangées de piliers — numéro / texte / pastilles ─────────────────── */
.pillar-row {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2.5rem 0;
border-top: 0.5px solid rgba(196,186,168,0.3);
}
@media (min-width: 768px) {
.pillar-row { grid-template-columns: 120px 1fr 1.2fr; gap: 3rem; align-items: start; }
}
/* ── Citation centrée (pull-quote), variante sans filet gauche ────────── */
.citation-center {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: clamp(1.6rem, 3.2vw, 2.4rem);
line-height: 1.4;
letter-spacing: 0.01em;
text-align: center;
color: var(--color-coal);
border: none;
padding: 0;
margin: 0;
}
/* ── Hero standard — hauteur uniforme (~800px @ desktop, main.pt-16 inclus)
pour les pages expertises/services (production-executive, publicite, marques,
documentaires + équivalents EN). min-height (pas height) : jamais de
recadrage brutal du texte, seulement un plancher commun ; les pages plus
courtes gagnent de l'espace de respiration en bas, les pages plus longues
restent lisibles. 736px de section + 64px de padding-top du = 800px
perçus depuis le haut de page. */
.hero-standard {
position: relative;
overflow: hidden;
background: var(--color-night);
padding: 8rem 1.5rem 6rem;
}
@media (min-width: 1024px) {
.hero-standard { min-height: 736px; }
}
/* H1 de .hero-standard : plus d'override ici — on laisse la règle globale
h1{font-family:Cormorant Garamond;font-size:clamp(3rem,7vw,6rem)!important}
s'appliquer, exactement comme sur les heros index (portfolio, expertises,
approche). Le style inline de chaque page ajoute juste l'italique et la
couleur, non couverts par la règle globale. Même traitement typographique
partout = même critère d'alignement et de rendu. */
.hero-standard h1,
.hero-standard p {
overflow-wrap: break-word;
word-break: break-word;
}
.hero-standard > .max-w-7xl,
.hero-standard > .max-w-7xl > div {
max-width: 100%;
}
@media (max-width: 767px) {
.hero-standard { padding: 6rem 1.25rem 3rem; }
}
/* ── Hero index (portfolio, expertises, approche) — même plancher ~800px
@ desktop (main.pt-16 inclus) que .hero-standard, mais ces heros utilisent
déjà display:flex + align-items:center + un min-height:Xvh en inline
(variable par page : 52vh, 80vh...) pour le mobile. On ne touche qu'au
palier desktop, en !important pour battre l'inline min-height sans
perturber le comportement mobile propre à chaque page. */
@media (min-width: 1024px) {
.hero-index-standard { min-height: 736px !important; }
}
/* .feature-card : fond nuit défini en