/* ============================================================
KAVALIERS — Design System partagé
Une seule feuille à charger dans le de Zoho Sites.
(Réglages du site → En-tête/Code personnalisé → …
puis composer avec les classes.
============================================================ */
/* ---------- 1. Polices ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Lato:wght@400;700;900&display=swap');
/* ---------- 2. Tokens ---------- */
.kav {
/* Marque — vert du logo */
--kav-green: #003810; /* PRIMAIRE — vert sapin logo */
--kav-green-d: #002A0C; /* vert plus sombre / hover */
--kav-green-l: #1C5A2E; /* vert clair / sur fond crème*/
/* Surfaces */
--kav-cream: #FAF8F4; /* fond principal */
--kav-cream-2: #F3EFE9; /* fond alterné / cartes */
--kav-white: #FFFFFF;
--kav-ink: #003810; /* fond sombre = vert marque */
/* Texte */
--kav-text: #544E47; /* corps */
--kav-text-2: #3A3530; /* corps soutenu */
--kav-muted: #9A9389; /* yeux-de-biche / légendes */
/* Accent */
--kav-accent: #B5673B; /* orange Kavaliers */
--kav-accent-d: #9E5530; /* hover */
/* Sur fond sombre (vert) */
--kav-on-dark: #EAEEE8;
--kav-on-dark-muted: #8FB89A;
--kav-on-dark-accent: #E0A77E;
/* Lignes */
--kav-line: #E8E1D5;
--kav-line-2: #DDD4C6;
/* Rythme */
--kav-maxw: 1180px;
--kav-radius: 14px;
--kav-radius-s: 2px;
--kav-pad-x: clamp(20px, 5vw, 48px);
--kav-sec-y: clamp(56px, 8vw, 104px);
/* Base */
color: var(--kav-text);
background: var(--kav-cream);
font-family: 'Lato', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---------- 3. Reset doux (scopé) ---------- */
.kav *, .kav *::before, .kav *::after { box-sizing: border-box; }
.kav p, .kav h1, .kav h2, .kav h3, .kav ul, .kav figure { margin: 0; }
.kav img { max-width: 100%; display: block; }
.kav a { color: inherit; }
.kav ::selection { background: var(--kav-accent); color: var(--kav-cream); }
.kav p { text-wrap: pretty; }
.kav h1, .kav h2, .kav h3 { text-wrap: balance; }
/* ---------- 4. Pleine largeur (Zoho casse le conteneur) ---------- */
.kav-bleed {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
overflow-x: hidden;
}
/* ---------- 5. Sections & conteneur ---------- */
.kav-section { background: var(--kav-cream); }
.kav-section--alt {
background: var(--kav-cream-2);
border-top: 1px solid var(--kav-line);
border-bottom: 1px solid var(--kav-line);
}
.kav-section--dark { background: var(--kav-ink); color: var(--kav-on-dark); }
.kav-container {
max-width: var(--kav-maxw);
margin: 0 auto;
padding: var(--kav-sec-y) var(--kav-pad-x);
}
.kav-container--tight { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
/* Grille deux colonnes responsive */
.kav-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: clamp(36px, 5vw, 68px);
align-items: start;
}
.kav-grid--center { align-items: center; }
/* ---------- 6. Typographie ---------- */
.kav-eyebrow {
font-size: 13px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--kav-muted);
}
/* yeux-de-biche précédé d'un filet */
.kav-eyebrow-line {
display: flex;
align-items: center;
gap: 14px;
}
.kav-eyebrow-line::before {
content: "";
width: 38px;
height: 1.5px;
background: var(--kav-accent);
flex: 0 0 auto;
}
.kav-h1 {
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: clamp(40px, 7vw, 82px);
line-height: 1.02;
letter-spacing: -.02em;
color: var(--kav-ink);
}
.kav-h2 {
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.1;
letter-spacing: -.01em;
color: var(--kav-ink);
}
.kav-h3 {
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.2;
color: var(--kav-ink);
}
.kav-lead {
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.5;
color: var(--kav-text-2);
}
.kav-body {
font-size: 17px;
line-height: 1.72;
color: var(--kav-text);
}
.kav-body--sm { font-size: 15px; line-height: 1.6; }
.kav-measure { max-width: 52ch; }
/* couleurs utilitaires */
.kav-accent-text { color: var(--kav-accent); }
.kav-ink-text { color: var(--kav-ink); }
/* ---------- 7. Filet horizontal ---------- */
.kav-rule { height: 1px; background: var(--kav-line); border: 0; }
.kav-rule--dark { background: #3D3833; }
/* ---------- 8. Bouton ---------- */
.kav-btn {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
font-size: 15px;
font-weight: 700;
letter-spacing: .04em;
color: var(--kav-cream);
background: var(--kav-accent);
padding: 16px 30px;
border-radius: var(--kav-radius-s);
border: 1px solid var(--kav-accent);
cursor: pointer;
transition: background .15s, border-color .15s;
}
.kav-btn:hover { background: var(--kav-accent-d); border-color: var(--kav-accent-d); }
.kav-btn--ghost {
background: transparent;
color: var(--kav-accent);
}
.kav-btn--ghost:hover { background: var(--kav-accent); color: var(--kav-cream); }
/* variante verte = identité de marque */
.kav-btn--green { background: var(--kav-green); border-color: var(--kav-green); color: var(--kav-cream); }
.kav-btn--green:hover { background: var(--kav-green-d); border-color: var(--kav-green-d); }
.kav-btn--ghost-green { background: transparent; color: var(--kav-green); border-color: var(--kav-green); }
.kav-btn--ghost-green:hover { background: var(--kav-green); color: var(--kav-cream); }
/* lien souligné inline */
.kav-link {
color: var(--kav-accent);
text-decoration: none;
border-bottom: 1px solid rgba(181,103,59,.35);
transition: border-color .15s;
}
.kav-link:hover { border-bottom-color: var(--kav-accent); }
/* ---------- 9. Cartes ---------- */
.kav-card {
background: var(--kav-white);
border: 1px solid var(--kav-line);
border-radius: var(--kav-radius);
padding: clamp(26px, 3vw, 34px);
}
.kav-card--alt { background: var(--kav-cream-2); }
.kav-card--dark {
background: var(--kav-ink);
color: var(--kav-on-dark);
border: 0;
padding: clamp(34px, 4vw, 44px);
}
.kav-card--dark .kav-eyebrow { color: var(--kav-on-dark-muted); }
/* ---------- 10. Bloc statistique ---------- */
.kav-stat {
display: flex;
align-items: center;
gap: 24px;
padding: 6px 0 6px 24px;
border-left: 3px solid var(--kav-accent);
max-width: fit-content;
}
.kav-stat__num {
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: clamp(52px, 6.5vw, 76px);
line-height: .82;
color: var(--kav-ink);
}
.kav-stat__num span { color: var(--kav-accent); }
.kav-stat__label { font-size: 15px; line-height: 1.5; color: var(--kav-text); max-width: 22ch; }
/* ---------- 11. Liste numérotée (filets) ---------- */
.kav-list { display: flex; flex-direction: column; }
.kav-list__row {
display: flex;
gap: 20px;
padding: 22px 0;
border-top: 1px solid var(--kav-line-2);
}
.kav-list__num {
font-family: 'Playfair Display', serif;
font-size: 18px;
color: var(--kav-accent);
line-height: 1.5;
flex: 0 0 auto;
}
.kav-list__row p { font-size: 16.5px; line-height: 1.6; color: var(--kav-text-2); }
/* ---------- 11b. Liste à puce sobre (listes courantes) ---------- */
.kav-ul { display: flex; flex-direction: column; gap: 13px; list-style: none; padding: 0; margin: 0; }
.kav-ul li {
position: relative;
padding-left: 22px;
font-size: 16.5px;
line-height: 1.6;
color: var(--kav-text-2);
}
.kav-ul li::before {
content: "";
position: absolute;
left: 1px;
top: .62em;
width: 7px;
height: 7px;
background: var(--kav-accent);
transform: translateY(-50%) rotate(45deg); /* losange discret */
}
/* sur fond sombre */
.kav-ul--dark li { color: var(--kav-cream-soft, #E9E1D4); }
.kav-ul--dark li::before { background: var(--kav-on-dark-accent, #E0A77E); }
/* ---------- 11c. Liste « features » — marqueur K-cavalier ---------- */
.kav-features { display: flex; flex-direction: column; gap: 28px; list-style: none; padding: 0; margin: 0; }
.kav-features li { display: flex; gap: 20px; align-items: flex-start; }
.kav-features__k {
flex: 0 0 auto;
width: 36px;
height: 36px;
margin-top: 2px;
object-fit: contain;
}
.kav-features__t {
font-family: 'Playfair Display', serif;
font-size: 19px;
line-height: 1.3;
color: var(--kav-ink);
margin: 0 0 5px;
}
.kav-features li p { font-size: 16px; line-height: 1.6; color: var(--kav-text-2); margin: 0; }
/* gros numéro de section (01 / 02 / 03) */
.kav-secnum {
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: 48px;
line-height: 1;
color: var(--kav-accent);
}
/* ---------- 12. Fil d'ariane ---------- */
.kav-breadcrumb {
display: flex;
gap: 10px;
align-items: center;
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kav-muted);
}
.kav-breadcrumb a { text-decoration: none; color: var(--kav-muted); }
.kav-breadcrumb a:hover { color: var(--kav-accent); }
.kav-breadcrumb__sep { color: var(--kav-line-2); }
.kav-breadcrumb__here { color: var(--kav-text); }
/* ---------- 13. Espacements utilitaires ---------- */
.kav-mt-s { margin-top: 18px; }
.kav-mt { margin-top: 26px; }
.kav-mt-l { margin-top: clamp(40px, 5vw, 64px); }
.kav-stack > * + * { margin-top: 22px; }