/* =========================================================================
MOKCHA Studio — Design system (partagé par les 3 pages)
Source de vérité : ../../../design-system/mokcha-design-system.html (versionné dans ce repo)
Display = Rammetto One · Corps/UI = Poppins
Palette sable / terre / brique · ombres franches colorées (signature)
========================================================================= */
/* Polices hébergées par le thème (sous-ensemble latin, WOFF2) : aucune requête vers un tiers
avant le premier rendu. Licence SIL OFL 1.1 — Poppins (Indian Type Foundry),
Rammetto One (Vernon Adams). Ajouter une graisse = ajouter son fichier ICI et dans assets/fonts/. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/poppins-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rammetto One'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/rammetto-one-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/poppins-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------- Tokens ---------- */
:root {
/* Teintes principales — DA 90/95 % */
--cream: #F4E7D7; /* crème rosé · fond principal */
--sand: #E5D2A8; /* sable · surface secondaire · bordures · rayures */
--sand-2: #FBF1E7; /* crème clair · surface claire · rayure claire */
--beige: #E5D2A8; /* = sable · bordures · séparateurs */
--beige-2: #BFAE86; /* sable atténué · texte sur fond foncé (dérivé) */
--beige-3: #EBE3D2; /* fond bouton désactivé (dérivé) */
--white: #FFFFFF; /* cartes · contraste (dérivé) */
/* Teintes d'écriture — DA */
--ink: #404042; /* titres · charbon */
--slate: #58585A; /* texte courant · gris moyen */
--stone: #7E7F82; /* légendes · atténué (dérivé, entre gris moyen et gris clair) */
/* Teintes secondaires — DA 5/10 % */
--olive: #897543; /* olive · accent secondaire · sur-titres */
--accent: #6B392E; /* brique — action principale · liens · ombres */
--accent-dark: #542C23; /* brique foncée · hover (dérivé) */
/* Alias internes */
--muted: var(--slate);
/* compat : anciens inline styles var(--gold) → sable du DS */
--gold: var(--sand);
--line: rgba(107,57,46, .14);
--line-strong: var(--beige);
/* Rayons */
--r-sm: 8px;
--r: 10px; /* boutons / champs */
--r-14: 14px;
--r-16: 16px;
--r-lg: 20px; /* cartes / blocs */
--pill: 999px;
/* Ombres douces chaudes */
--shadow-soft: 0 8px 20px rgba(107,57,46, .18);
--shadow-deep: 0 18px 36px rgba(107,57,46, .22);
--shadow-subtle:0 1px 3px rgba(107,57,46, .12);
/* Ombres franches colorées (signature — jamais floues) */
/* Nommées par RÔLE, pas par couleur : le prochain changement de teinte
ne touchera plus que la valeur de --accent. */
--shadow-hard-olive: 6px 6px 0 #897543;
--shadow-hard-accent: 6px 6px 0 #6B392E;
--shadow-hard-accent-sm: 3px 3px 0 #6B392E;
--maxw: 1180px;
--gap: clamp(1.2rem, 3vw, 2.2rem);
--header-h: 80px;
/* Hauteur de la barre CTA mobile. Sert à deux endroits : le padding de fin de
page et la position du bandeau cookies — les deux doivent bouger ensemble si
la barre change de taille. */
--cta-bar-h: calc(68px + env(safe-area-inset-bottom, 0px));
--ff: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--ff-disp: 'Rammetto One', 'Poppins', cursive;
}
/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--ff);
font-weight: 400;
color: var(--slate);
background: var(--cream);
line-height: 1.6;
font-size: 16px;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--cream); }
/* `height: auto` n'est pas cosmétique. Les ![]()
portent des attributs width/height —
utiles, ils réservent la place et évitent le décalage de mise en page au chargement —
et ces attributs agissent comme des règles CSS de faible priorité. Sans `height: auto`,
la hauteur de l'attribut fait autorité : l'image est figée à sa taille naturelle, et
tout `aspect-ratio` déclaré plus bas devient inopérant, puisqu'il n'agit que si l'une
des deux dimensions est libre. */
img { max-width: 100%; height: auto; display: block; }
/* Liens : brique, sans souligné par défaut. Le souligné est réservé au contenu
éditorial (voir « .prose a » plus bas) — dans un menu, un bouton ou une carte,
la position et la forme signalent déjà le lien, le souligné n'y sert à rien. */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
/* Titres : display = Rammetto One, sous-titres = Poppins */
h1, h2 {
font-family: var(--ff-disp); font-weight: 400; color: var(--ink);
line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 .5em;
}
h3, h4 {
font-family: var(--ff); font-weight: 800; color: var(--ink);
line-height: 1.25; margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
strong { color: var(--ink); font-weight: 600; }
/* ---------- Accessibilité ---------- */
.skip-link {
position: absolute; left: 8px; top: -60px;
background: var(--accent); color: var(--cream);
padding: .7rem 1.1rem; border-radius: var(--r); z-index: 2000;
transition: top .2s ease; font-weight: 600;
}
.skip-link:focus { top: 8px; text-decoration: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-alt { background: var(--white); }
.section-sand { background: var(--sand); }
.lead { font-size: 1.15rem; color: var(--slate); max-width: 60ch; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
/* Teaser « Qui suis-je » (piliers) : split façon HP mais compact (~2× moins haut).
L'image passe en paysage 3:2 plafonnée, au lieu du portrait 2/3 de la home. */
.split--compact .split-media img { aspect-ratio: 3 / 2; max-height: 320px; }
.eyebrow {
text-transform: uppercase; letter-spacing: .22em; font-size: .78rem;
font-weight: 600; color: var(--olive); margin: 0 0 .9rem;
}
.section-sand .eyebrow { color: var(--olive); }
/* =========================================================================
BOUTONS / CTA — valeurs exactes du DS
========================================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: var(--ff); font-weight: 600; font-size: 15px; line-height: 1;
padding: 15px 30px; border-radius: var(--r);
border: none; cursor: pointer; text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { text-decoration: none; }
/* Primaire brique */
.btn-primary { background: var(--accent); color: var(--cream); }
.btn-primary:hover { background: var(--accent-dark); color: var(--cream); transform: translateY(-2px); }
/* Primaire SIGNATURE — ombre franche brune (CTA principaux : hero, fin de page) */
.btn-signature { box-shadow: var(--shadow-hard-olive); }
.btn-signature:hover { box-shadow: 3px 3px 0 #897543; transform: translate(3px, 3px); }
/* Secondaire sable */
.btn-secondary { background: var(--sand); color: var(--ink); }
.btn-secondary:hover { background: var(--beige); color: var(--ink); transform: translateY(-2px); }
/* Sur fond sable, le bouton secondaire (sable) se fondrait — on le passe en clair. */
.section-sand .btn-secondary { background: var(--white); }
.section-sand .btn-secondary:hover { background: var(--sand-2); }
/* Contour brun (ex-ghost) */
.btn-ghost,
.btn-outline {
background: transparent; color: var(--olive);
border: 1.5px solid var(--olive); padding: 14px 28px;
}
.btn-ghost:hover,
.btn-outline:hover { background: var(--olive); color: var(--cream); transform: translateY(-2px); }
/* Tailles */
.btn-sm { font-size: 13px; padding: 10px 20px; border-radius: var(--r-sm); }
.btn-lg { font-size: 17px; padding: 19px 40px; border-radius: 12px; }
/* Désactivé */
.btn[disabled], .btn.is-disabled {
background: var(--beige-3); color: #B2B3B7; cursor: not-allowed; box-shadow: none; transform: none;
}
/* =========================================================================
HEADER (sticky)
========================================================================= */
.site-header {
position: sticky; top: 0; z-index: 1000;
/* bandes verticales (CSS) — rappel du header du site actuel */
background: repeating-linear-gradient(to right,
#F4E7D7 0, #F4E7D7 30px,
#E5D2A8 30px, #E5D2A8 60px);
border-bottom: 1px solid var(--line-strong);
}
.header-inner {
display: flex; align-items: center; gap: 1.5rem;
min-height: var(--header-h); padding-block: .5rem;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.main-nav li { display: flex; align-items: center; }
.main-nav a {
font-family: var(--ff); color: var(--ink); font-weight: 700; font-size: .95rem;
padding: .4rem 0; position: relative; white-space: nowrap;
}
.main-nav a:hover { color: var(--accent); text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--olive); font-weight: 600; }
.main-nav a[aria-current="page"]::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent);
}
.header-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
/* Le téléphone est MOBILE UNIQUEMENT : sur desktop, `tel:` n'ouvre aucun dialer
chez la plupart des gens. Il réapparaît sous 900px (voir le media query). */
.header-tel { display: none; color: var(--olive); font-weight: 600; white-space: nowrap; align-items: center; gap: .35rem; }
.header-tel:hover { color: var(--accent); text-decoration: none; }
.header-tel svg { width: 16px; height: 16px; flex-shrink: 0; }
.header-actions .btn-primary,
.header-actions .btn-outline { padding: 11px 22px; font-size: 14px; }
/* Le portfolio : secondaire assumé. Contour brun, jamais plein — un seul bouton
plein dans le header, sinon les deux CTA se neutralisent. */
.btn-portfolio { white-space: nowrap; }
.nav-toggle { display: none; }
/* Sous-menu déroulant « Architecture pro » */
.has-dropdown { position: relative; }
.dropdown-toggle {
font-family: var(--ff); color: var(--ink); font-weight: 500; font-size: .95rem;
background: none; border: 0; cursor: pointer; padding: .4rem 0;
display: inline-flex; align-items: center; gap: .3rem; line-height: inherit;
}
.dropdown-toggle:hover { color: var(--accent); }
.dropdown-toggle .caret { font-size: .7em; transition: transform .2s ease; }
.has-dropdown[data-open="true"] .dropdown-toggle .caret { transform: rotate(180deg); }
.dropdown-menu {
position: absolute; top: calc(100% + .6rem); left: 0; min-width: 230px;
background: var(--cream); border: 1px solid var(--line-strong);
border-radius: var(--r-16); box-shadow: var(--shadow-soft);
padding: .5rem; margin: 0; list-style: none;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 1100;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown[data-open="true"] .dropdown-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu li { display: block; }
.dropdown-menu a {
display: block; padding: .6rem .8rem; border-radius: var(--r-sm);
font-size: .92rem; color: var(--ink); font-weight: 500;
}
.dropdown-menu a:hover { background: var(--sand); color: var(--accent); text-decoration: none; }
.dropdown-menu a strong { display: block; color: var(--olive); font-weight: 600; font-size: .82rem; }
/* CTA répété dans le panneau mobile (caché en desktop) */
/* =========================================================================
HERO
========================================================================= */
.hero { position: relative; background: var(--cream); padding: 0; }
.hero-grid {
display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
min-height: 560px;
}
/* The text is centred in the first screen, not in the full height of the hero: with
a tall photo the hero is taller than the screen, and the buttons must not go
below the fold. A hero shorter than the screen is unchanged. */
.hero-content {
display: flex; flex-direction: column; justify-content: center;
align-self: start; min-height: min(100%, calc(100svh - var(--header-h)));
padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}
.hero-content h1 { color: var(--ink); margin-bottom: .6rem; max-width: 16ch; }
.hero-baseline { font-size: 1.18rem; color: var(--slate); max-width: 50ch; margin-bottom: 1.8rem; line-height: 1.55; }
.hero-baseline em { font-style: italic; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-media { position: relative; }
.hero-media img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.hero-microreassure {
margin-top: 1.6rem; font-size: .92rem; color: var(--stone);
display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
}
.hero-microreassure span { display: inline-flex; align-items: center; gap: .4rem; }
/* =========================================================================
GRILLES
========================================================================= */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* =========================================================================
CARTES (projet / service / générique) — radius 20px
========================================================================= */
/* Une carte doit contraster avec le fond de SA section, sinon elle perd son contour et
cesse d'être une carte. Les sections alternent crème (défaut) et blanc (.section-alt) :
la carte prend donc l'inverse de son hôte.
La base était crème, comme `.section-alt .card` — cette seconde règle ne servait donc à
rien, et toute carte posée sur une section crème (l'archive des réalisations) était
crème sur crème : sans limite visible. */
.card {
background: var(--white); border-radius: var(--r-lg);
overflow: hidden; display: flex; flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease;
}
.section-alt .card { background: var(--cream); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); }
/* Sous-type en Brouillon : carte informative, non interactive. */
.pillar-card--static:hover { transform: none; box-shadow: none; }
/* Page sous-type (éditoriale, façon article de blog) */
.st-hero { padding-top: 2.5rem; }
.st-hero-head { max-width: 760px; text-align: center; }
.st-hero-head h1 { margin-top: .5rem; }
.st-hero-lead { font-size: 1.2rem; color: var(--slate); margin-top: 1rem; }
.st-hero-cover { margin-top: 2.5rem; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.st-hero-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.st-essentiel-wrap { padding-top: 2.5rem; }
.st-essentiel { max-width: 820px; margin: 0 auto; background: var(--cream); border-left: 4px solid var(--olive); border-radius: var(--r-lg); padding: 1.5rem 1.75rem; }
.st-essentiel h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .75rem; }
.st-essentiel ul { margin: 0; padding-left: 1.25rem; }
.st-essentiel li { line-height: 1.6; margin-bottom: .35rem; }
[id] { scroll-margin-top: 90px; }
/* Corps éditorial en bandes : un chapitre = un