/* ==========================================================================
Cabinet Desfarges — feuille de style
Charte « Piste B · desfarges. en vert »
========================================================================== */
/* --- Polices (Google Fonts, licence OFL) ---------------------------------
Chargées via + dans le
de chaque page (meilleure performance qu'un @import). --------------------- */
/* --- Variables ----------------------------------------------------------- */
:root {
--vert: #173129; /* fond principal, vert profond */
--vert-clair: #2a463d;
--craie: #F2EFE7; /* fonds clairs, texte sur sombre */
--cuivre: #C07A45; /* accent, le « point » de la marque */
--eucalyptus: #8DA095; /* sous-titres, texte secondaire */
--gris-texte: #41534c;
--blanc: #ffffff;
--maxw: 1120px;
--radius: 14px;
--transition: .25s ease;
--font-titre: 'Space Grotesk', system-ui, sans-serif;
--font-corps: 'Inter', system-ui, sans-serif;
--font-edito: 'Fraunces', Georgia, serif;
}
/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-corps);
color: var(--vert);
background: var(--craie);
line-height: 1.7;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--cuivre); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--vert); }
h1, h2, h3 { font-family: var(--font-titre); font-weight: 700; line-height: 1.15; color: var(--vert); margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); letter-spacing: -.01em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
.edito { font-family: var(--font-edito); font-style: italic; color: var(--cuivre); }
.point { color: var(--cuivre); }
/* --- Conteneurs ---------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; }
.section-sombre { background: var(--vert); color: var(--craie); }
.section-sombre h1, .section-sombre h2, .section-sombre h3 { color: var(--craie); }
.surtitre {
font-family: var(--font-titre);
text-transform: uppercase;
letter-spacing: .18em;
font-size: .78rem;
font-weight: 600;
color: var(--eucalyptus);
margin-bottom: 14px;
}
/* --- En-tête / navigation ------------------------------------------------ */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(242,239,231,.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(23,49,41,.08);
}
.nav {
display: flex; align-items: center; justify-content: space-between;
height: 72px;
}
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 48px; width: auto; display: block; }
.nav__links { display: flex; gap: 30px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav__links a {
font-family: var(--font-titre);
font-weight: 500;
font-size: .95rem;
color: var(--vert);
position: relative;
}
.nav__links a::after {
content: ''; position: absolute; left: 0; bottom: -6px;
width: 0; height: 2px; background: var(--cuivre); transition: width var(--transition);
}
.nav__links a:hover::after, .nav__links a.actif::after { width: 100%; }
.nav__check { display: none; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--vert); margin: 5px 0; transition: var(--transition); }
/* --- Boutons ------------------------------------------------------------- */
.btn {
display: inline-block;
font-family: var(--font-titre);
font-weight: 600;
font-size: .95rem;
padding: 13px 26px;
border-radius: 999px;
cursor: pointer;
border: 2px solid var(--cuivre);
transition: all var(--transition);
}
.btn--plein { background: var(--cuivre); color: var(--blanc); }
.btn--plein:hover { background: var(--vert); border-color: var(--vert); color: var(--craie); }
.btn--ligne { background: transparent; color: var(--cuivre); }
.btn--ligne:hover { background: var(--cuivre); color: var(--blanc); }
.btn--clair { border-color: var(--craie); color: var(--craie); }
.btn--clair:hover { background: var(--craie); color: var(--vert); }
/* --- Hero ---------------------------------------------------------------- */
.hero { background: var(--vert); color: var(--craie); padding: 0; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 50px; min-height: 78vh; }
.hero__contenu { padding: 70px 0; }
.hero__marque { height: 96px; width: auto; max-width: 100%; margin-bottom: 30px; }
.hero h1 { color: var(--craie); }
.hero h1 .point { color: var(--cuivre); }
.hero__sous { font-size: 1.15rem; color: var(--eucalyptus); max-width: 30ch; margin-bottom: 32px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__photo { position: relative; align-self: stretch; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero__photo--vide {
background: linear-gradient(160deg, var(--vert-clair), var(--vert));
display: flex; align-items: center; justify-content: center; min-height: 78vh;
color: var(--eucalyptus); text-align: center; font-family: var(--font-titre); padding: 30px;
border-left: 1px solid rgba(242,239,231,.08);
}
/* --- Grilles de cartes --------------------------------------------------- */
.grille { display: grid; gap: 26px; }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.carte {
background: var(--blanc);
border: 1px solid rgba(23,49,41,.08);
border-radius: var(--radius);
padding: 32px 28px;
transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(23,49,41,.10); }
.carte__num { font-family: var(--font-edito); font-style: italic; color: var(--cuivre); font-size: 1.4rem; margin-bottom: 10px; }
.carte h3 { margin-bottom: 10px; }
.carte p { color: var(--gris-texte); margin: 0; font-size: .98rem; }
/* --- Listes d'intervention ----------------------------------------------- */
.liste-checks { list-style: none; padding: 0; margin: 0; }
.liste-checks li { position: relative; padding-left: 28px; margin-bottom: 12px; color: var(--gris-texte); }
.liste-checks li::before {
content: ''; position: absolute; left: 0; top: 11px;
width: 8px; height: 8px; border-radius: 50%; background: var(--cuivre);
}
.section-sombre .liste-checks li { color: var(--craie); }
/* --- Bloc deux colonnes -------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.duo__media { margin: 0; }
.duo__media img { border-radius: var(--radius); }
.credit-photo { margin: 8px 2px 0; font-size: .72rem; color: var(--eucalyptus); text-align: right; }
.duo__media--vide {
border-radius: var(--radius); background: linear-gradient(160deg, var(--eucalyptus), var(--vert-clair));
min-height: 420px; display: flex; align-items: center; justify-content: center;
color: var(--craie); font-family: var(--font-titre); text-align: center; padding: 24px;
}
/* --- Bandeau CTA --------------------------------------------------------- */
.cta { background: var(--vert); color: var(--craie); text-align: center; }
.cta h2 { color: var(--craie); }
.cta p { color: var(--eucalyptus); max-width: 52ch; margin: 0 auto 28px; }
/* --- Formulaire ---------------------------------------------------------- */
.form { display: grid; gap: 20px; max-width: 640px; }
.form__champ { display: flex; flex-direction: column; gap: 7px; }
.form__champ label { font-family: var(--font-titre); font-weight: 500; font-size: .92rem; }
.form input, .form textarea, .form select {
font-family: var(--font-corps); font-size: 1rem; padding: 13px 15px;
border: 1px solid rgba(23,49,41,.18); border-radius: 10px; background: var(--blanc);
color: var(--vert); transition: border-color var(--transition);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--cuivre); }
.form textarea { resize: vertical; min-height: 140px; }
.form__rgpd { font-size: .85rem; color: var(--gris-texte); display: flex; gap: 10px; align-items: flex-start; }
.form__rgpd input { width: auto; margin-top: 4px; }
/* --- Coordonnées --------------------------------------------------------- */
.coord { list-style: none; padding: 0; margin: 0; }
.coord li { margin-bottom: 18px; }
.coord .label { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--eucalyptus); display: block; margin-bottom: 3px; }
/* --- Pied de page -------------------------------------------------------- */
.footer { background: var(--vert); color: var(--eucalyptus); padding: 56px 0 28px; }
.footer a { color: var(--craie); }
.footer a:hover { color: var(--cuivre); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer__logo img { height: 52px; margin-bottom: 18px; }
.footer h4 { font-family: var(--font-titre); color: var(--craie); font-size: .95rem; margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; font-size: .92rem; }
.footer__bas { border-top: 1px solid rgba(242,239,231,.12); padding-top: 22px; font-size: .82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
/* --- En-tête de page interne --------------------------------------------- */
.page-tete { background: var(--vert); color: var(--craie); padding: 70px 0 60px; }
.page-tete h1 { color: var(--craie); }
.page-tete p { color: var(--eucalyptus); max-width: 56ch; margin: 0; }
/* --- Contenu rédactionnel ------------------------------------------------ */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
.hero__grid { grid-template-columns: 1fr; min-height: auto; }
.hero__photo, .hero__photo--vide { min-height: 360px; }
.hero__contenu { padding: 56px 0 40px; }
.grille--3, .grille--2 { grid-template-columns: 1fr; }
.duo { grid-template-columns: 1fr; gap: 32px; }
.footer__grid { grid-template-columns: 1fr; gap: 28px; }
.nav__toggle { display: block; }
/* Sur mobile, le flou de l'en-tête rognait le menu déroulant : on le retire
et on rend le fond opaque pour que le menu s'affiche correctement. */
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--craie); }
.nav__links {
position: absolute; top: 72px; left: 0; right: 0; z-index: 60;
flex-direction: column; gap: 0; background: var(--craie);
border-bottom: 1px solid rgba(23,49,41,.1);
box-shadow: 0 12px 24px rgba(23,49,41,.10);
max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.nav__links.ouvert,
.nav__check:checked ~ .nav__links { max-height: 420px; }
.nav__links li { width: 100%; border-top: 1px solid rgba(23,49,41,.07); }
.nav__links a { display: block; padding: 16px 24px; }
.nav__links a::after { display: none; }
}
@media (max-width: 560px) {
section { padding: 56px 0; }
body { font-size: 16px; }
}