/*
theme.css — Source unique du design Describot
Thème officiel : Suisse Chromatique « Encre / Nuit »
Auteur : Zakari Benhalima
RÈGLE : toute page Describot (site, pages SEO /integrations/, back-office…)
importe CE fichier via (ou chemin relatif).
JAMAIS de CSS recréé par page. Changement de design = ici uniquement.
Contenu :
1. Google Fonts (déclarées ici pour référence — à copier dans de chaque page)
2. Tokens CSS (:root)
3. Reset & base
4. Utilitaires (container, grille, labels, boutons, reveal)
5. Navigation (nav fixe + hamburger + menu mobile)
6. Footer
7. Responsive partagé
*/
/* ══════════════════════════════════════════════════════
GOOGLE FONTS — à inclure dans le de chaque page :
══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
1. TOKENS & RESET
Thème Encre/Nuit : navy #16243D signature + fond lin clair (#F2F0EB)
Sur fonds clairs (lin) : accent = --ink (navy)
Sur fonds sombres (navy) : accent = --ink-soft (périwinkle #8FA6D8, ~4.8:1)
══════════════════════════════════════════════════════ */
:root {
/* ── Palette principale ── */
--ink: #16243D; /* Navy signature */
--ink-soft: #8FA6D8; /* Périwinkle — accent lisible sur fond navy */
--ink-muted: #5B7AB0; /* Bleu intermédiaire */
--linen: #F2F0EB; /* Fond lin principal */
--linen-2: #E9E6E0; /* Lin légèrement plus sombre (lignes, séparateurs) */
--text-dark: #1C1C1C; /* Texte principal sur fond clair */
--text-light: #F2F0EB; /* Texte sur fond sombre */
--gray: #9B9B9B; /* Gris neutre */
/* ── Surfaces sombres (fond navy) ── */
--dark: var(--ink);
--dark-2: #1E2E4A;
--dark-3: #263554;
/* ── Compatibilité ── */
--lin: var(--linen);
--lin-2: var(--linen-2);
--light-text: var(--text-light);
--red: var(--ink);
/* ── Statuts ── */
--ok: #2D7A3A;
--ok-bg: rgba(45, 122, 58, 0.12);
--warn: #B06000;
--warn-bg:rgba(176, 96, 0, 0.12);
--fix: var(--ink);
--fix-bg: rgba(22, 36, 61, 0.12);
/* ── Layout ── */
--max: 1200px;
--gutter: 24px;
--col: calc((var(--max) - 11 * var(--gutter)) / 12);
/* ── Typographie ── */
--font-head: 'Plus Jakarta Sans', sans-serif;
--font-body: 'Geist', sans-serif;
--font-mono: 'Geist Mono', monospace;
/* ── Radius discipliné ── */
--r: 4px;
--r-md: 2px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--linen);
color: var(--text-dark);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--linen); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* ══════════════════════════════════════════════════════
2. UTILITAIRES
══════════════════════════════════════════════════════ */
/* ── Grille 12 colonnes ── */
.container {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--gutter);
}
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--gutter);
}
/* ── Labels mono — sur fond clair (lin) ── */
.label {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
}
/* ── Labels mono — sur fond sombre (navy) ── */
.label-on-dark {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-soft);
}
.label-gray {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gray);
}
/* ── Boutons ── */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 26px;
border-radius: var(--r);
font-family: var(--font-head);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
border: none;
transition: background 0.18s, color 0.18s, transform 0.18s;
text-decoration: none;
}
/* Bouton primaire sur fond clair : navy sur lin */
.btn-primary {
background: var(--ink);
color: var(--linen);
}
.btn-primary:hover { background: #0F1A2E; transform: translateY(-1px); }
/* Bouton primaire sur fond sombre : ink-soft sur ink (~7:1) */
.btn-primary-on-dark {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 26px;
border-radius: var(--r);
font-family: var(--font-head);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
border: none;
transition: background 0.18s, color 0.18s, transform 0.18s;
background: var(--ink-soft);
color: var(--ink);
text-decoration: none;
}
.btn-primary-on-dark:hover { background: #A9BCE6; transform: translateY(-1px); }
.btn-outline {
background: transparent;
color: var(--text-dark);
border: 1.5px solid var(--text-dark);
}
.btn-outline:hover { background: var(--text-dark); color: var(--linen); }
.btn-outline-light {
background: transparent;
color: var(--text-light);
border: 1.5px solid rgba(242,240,235,0.35);
}
.btn-outline-light:hover { background: rgba(242,240,235,0.1); }
/* ── Reveal au scroll ── */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
/* ══════════════════════════════════════════════════════
3. NAVIGATION (header fixe)
Fond transparent → frosted glass au scroll (.scrolled)
Logo : "Describot●" · Liens gris → dark au hover
══════════════════════════════════════════════════════ */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 0;
border-bottom: 1px solid transparent;
transition: background 0.25s, border-color 0.25s;
}
nav.scrolled {
background: rgba(242, 240, 235, 0.96);
border-bottom: 1px solid var(--linen-2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Nav sur pages internes (pas de hero vidéo/sombre) : toujours frosted */
nav.nav-opaque {
background: rgba(242, 240, 235, 0.96);
border-bottom: 1px solid var(--linen-2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
gap: 32px;
}
.nav-logo {
font-family: var(--font-head);
font-size: 1rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text-dark);
text-decoration: none;
}
.nav-logo .dot-red {
display: inline-block;
width: 8px; height: 8px;
background: var(--ink);
border-radius: 50%;
margin-left: 3px;
vertical-align: middle;
position: relative;
top: -1px;
}
.nav-links {
display: flex;
align-items: center;
gap: 36px;
list-style: none;
}
.nav-links a {
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 500;
color: var(--gray);
transition: color 0.18s;
text-decoration: none;
}
.nav-links a:hover { color: var(--text-dark); }
.nav-links a.active-link { color: var(--text-dark); }
.nav-cta { font-size: 0.85rem; padding: 10px 20px; }
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.nav-hamburger span {
display: block;
width: 22px; height: 1.5px;
background: var(--text-dark);
transition: all 0.25s;
}
.nav-mobile {
display: none;
position: fixed;
top: 64px; left: 0; right: 0;
background: var(--linen);
border-bottom: 1px solid var(--linen-2);
padding: 24px var(--gutter) 28px;
z-index: 99;
}
.nav-mobile.open { display: block; }
.nav-mobile ul { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.nav-mobile a { font-size: 1rem; font-weight: 500; color: var(--gray); text-decoration: none; }
.nav-mobile a:hover { color: var(--text-dark); }
/* ══════════════════════════════════════════════════════
4. FOOTER (fond navy)
══════════════════════════════════════════════════════ */
footer {
background: var(--ink);
border-top: 1px solid rgba(143,166,216,0.15);
padding: 32px 0;
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.footer-brand {
font-family: var(--font-mono);
font-size: 0.75rem;
color: rgba(242,240,235,0.3);
}
.footer-brand strong { color: rgba(242,240,235,0.6); font-weight: 500; }
.footer-email {
font-family: var(--font-mono);
font-size: 0.75rem;
color: rgba(242,240,235,0.3);
transition: color 0.18s;
text-decoration: none;
}
.footer-email:hover { color: var(--text-light); }
/* ══════════════════════════════════════════════════════
5. RESPONSIVE PARTAGÉ
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.nav-links, nav .nav-cta { display: none; }
.nav-hamburger { display: flex; }
.footer-inner { flex-direction: column; gap: 12px; }
}