@font-face{font-family:'Cormorant';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/cormorant-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/cormorant-latin-300-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/cormorant-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/jost-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jost-latin-400-normal.woff2') format('woff2');}
/* Alban de Laubier — feuille de style commune aux quatre pages */
:root {
  --bleu: #5A82A0;
  --bleu-fonce: #3E6484;
  --creme: #F4EEE2;
  --creme-2: #EBE3D3;
  --olive: #6E7A4A;
  --encre: #2A2620;
  --encre-2: #4A443B;
  --blanc: #FFFDF8;
  --titre: 'Cormorant', Georgia, serif;
  --texte: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --max: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
}
img { max-width: 100%; display: block; }
a { color: var(--bleu-fonce); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }
section.alt { background: var(--creme-2); }
section.sombre { background: var(--bleu-fonce); color: var(--creme); }
section.sombre .surtitre { color: var(--creme); opacity: .8; }

h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.15; color: inherit; }
h1 { font-size: clamp(40px, 6vw, 68px); }
h2 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 20px; }
h3 { font-size: 26px; margin-bottom: 10px; }
.surtitre {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--olive); font-weight: 400; margin-bottom: 14px; display: block;
}
.intro { font-size: 19px; color: var(--encre-2); max-width: 680px; margin-bottom: 48px; }
.sombre .intro { color: var(--creme); }
p + p { margin-top: 14px; }

/* En-tête */
header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(244, 238, 226, .96);
  border-bottom: 1px solid rgba(42, 38, 32, .08);
}
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.logo { font-family: var(--titre); font-size: 22px; letter-spacing: .08em; text-decoration: none; color: var(--encre); white-space: nowrap; }
.logo small { font-size: .75em; }
nav ul { list-style: none; display: flex; gap: 28px; }
nav a { text-decoration: none; color: var(--encre); font-size: 15px; }
nav a:hover, nav a[aria-current="page"] { color: var(--bleu-fonce); }
.bouton {
  display: inline-block; background: var(--bleu-fonce); color: var(--creme);
  padding: 13px 26px; text-decoration: none; font-size: 15px; letter-spacing: .03em;
  border: 1px solid var(--bleu-fonce); cursor: pointer; font-family: var(--texte);
}
.bouton:hover { background: var(--bleu); border-color: var(--bleu); }
.bouton.clair { background: transparent; color: var(--bleu-fonce); }
.bouton.clair:hover { background: var(--bleu-fonce); color: var(--creme); }
header .bouton { padding: 10px 18px; font-size: 14px; }

/* Hero */
.hero { padding: 120px 0 104px; }
.hero h1 { max-width: 880px; margin-bottom: 26px; }
.hero .intro { margin-bottom: 36px; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Grilles */
.grille-2, .grille-3, .grille-4 { display: grid; gap: 32px; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }

/* Portes d'entrée (accueil) */
.porte {
  display: flex; flex-direction: column; background: var(--blanc);
  padding: 40px 32px; text-decoration: none; color: var(--encre);
  border-top: 3px solid var(--bleu); transition: transform .2s;
}
.porte:hover { transform: translateY(-3px); }
.porte:nth-child(2) { border-top-color: var(--olive); }
.porte:nth-child(3) { border-top-color: var(--bleu-fonce); }
.porte h3 { font-size: 30px; margin-bottom: 14px; }
.porte p { color: var(--encre-2); flex: 1; }
.porte .lien { margin-top: 24px; color: var(--bleu-fonce); font-size: 15px; }

/* Volets de savoir-faire */
.volet h3 { font-size: 24px; }
.volet p { color: var(--encre-2); font-size: 16px; }

/* Étapes */
.etape { background: var(--blanc); padding: 36px 30px; }
.etape .num { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--olive); }
.etape h3 { font-size: 34px; margin: 6px 0 14px; }
.etape p { font-size: 16px; color: var(--encre-2); }
.etape ul { margin-top: 20px; padding-left: 18px; font-size: 15px; }
.etape li { margin-bottom: 6px; }

/* Honoraires */
.tarif { border-top: 1px solid rgba(42, 38, 32, .2); padding-top: 22px; }
.tarif h3 { font-size: 22px; }
.tarif .prix { font-family: var(--titre); font-size: 36px; color: var(--bleu-fonce); line-height: 1.2; }
.tarif .note { font-size: 14px; color: var(--encre-2); }
.precision { margin-top: 36px; font-size: 15px; color: var(--encre-2); max-width: 760px; }

/* Bio */
.bio { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.bio .visuel { background: var(--creme-2); aspect-ratio: 4 / 5; }
.bio .visuel img { width: 100%; height: 100%; object-fit: cover; }

/* Avant / après */
.avant-apres { background: var(--blanc); }
.avant-apres .paires { display: grid; grid-template-columns: 1fr 1fr; }
.avant-apres figure { position: relative; aspect-ratio: 4 / 3; background: var(--creme-2); }
.avant-apres figure img { width: 100%; height: 100%; object-fit: cover; }
.avant-apres figcaption {
  position: absolute; left: 10px; top: 10px; background: var(--encre); color: var(--creme);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px;
}
.avant-apres .legende { padding: 18px 22px; font-size: 15px; color: var(--encre-2); }
.avant-apres .legende strong { color: var(--encre); font-weight: 400; }

/* Encadré */
.encadre { background: var(--blanc); padding: 44px 40px; border-left: 3px solid var(--olive); }
.encadre .chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 28px 0; }
.encadre .chiffres strong { display: block; font-family: var(--titre); font-size: 34px; font-weight: 400; color: var(--bleu-fonce); line-height: 1.1; }
.encadre .chiffres span { font-size: 14px; color: var(--encre-2); }

/* Pour qui */
.profil { border-left: 2px solid var(--bleu); padding-left: 22px; }
.profil p { color: var(--encre-2); font-size: 16px; }

/* FAQ */
.faq details { border-bottom: 1px solid rgba(42, 38, 32, .15); padding: 22px 0; }
.faq summary {
  cursor: pointer; list-style: none; font-family: var(--titre); font-size: 24px;
  display: flex; justify-content: space-between; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--bleu); font-family: var(--texte); font-size: 22px; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 12px; color: var(--encre-2); max-width: 760px; }

/* Contact */
.contact { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; }
.coordonnees { list-style: none; margin-top: 28px; }
.coordonnees li { margin-bottom: 8px; }
.coordonnees a { text-decoration: none; }
form { display: grid; gap: 18px; }
label { font-size: 14px; display: block; margin-bottom: 6px; color: var(--encre-2); }
input, select, textarea {
  width: 100%; padding: 13px 14px; border: 1px solid rgba(42, 38, 32, .25);
  background: var(--blanc); font-family: var(--texte); font-size: 16px; color: var(--encre);
}
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }
.ligne-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--encre-2); }
.consentement input { width: auto; margin-top: 4px; }
.pot { position: absolute; left: -9999px; }
.petit { font-size: 14px; color: var(--encre-2); }

/* Pied de page */
footer { background: var(--encre); color: var(--creme); padding: 64px 0 36px; font-size: 15px; }
footer .colonnes { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
footer .logo { color: var(--creme); }
footer h4 { font-family: var(--texte); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; margin-bottom: 14px; opacity: .7; }
footer ul { list-style: none; }
footer li { margin-bottom: 6px; }
footer a { color: var(--creme); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .mentions { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(244, 238, 226, .15); font-size: 13px; opacity: .7; }

/* Mobile */
@media (max-width: 960px) {
  nav { display: none; }
  .grille-3, .grille-4 { grid-template-columns: 1fr 1fr; }
  .bio, .contact { grid-template-columns: 1fr; gap: 36px; }
  .encadre .chiffres { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  .hero { padding: 72px 0 64px; }
  .wrap { padding: 0 16px; }
  .grille-2, .grille-3, .grille-4, .ligne-2 { grid-template-columns: 1fr; }
  footer .colonnes { grid-template-columns: 1fr; }
  .encadre { padding: 32px 22px; }
  header .bouton { display: none; }
}

/* Avant / après — ajustements */
.avant-apres figure { aspect-ratio: 1 / 1; }
.groupe { font-size: 28px; margin: 8px 0 22px; }
.grille-3 + .groupe, .grille-2 + .groupe { margin-top: 56px; }

/* Série avant / après */
.serie { margin-top: 32px; gap: 24px; }
.serie + .signature { margin-top: 40px; }
.serie .avant-apres:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
@media (max-width: 640px) { .serie .avant-apres:last-child:nth-child(odd) { width: 100%; } }

/* Ancres : compenser l'en-tête fixe */
[id] { scroll-margin-top: 72px; }

/* Signature sous le bloc maison */
.signature { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(42, 38, 32, .15); font-size: 15px; color: var(--encre-2); }

/* Bandeau photo pleine largeur */
.bandeau img { width: 100%; height: clamp(240px, 44vw, 640px); object-fit: cover; object-position: center 40%; }

/* ---- Ajouts du 1er octobre 2026 ---- */

/* En-tête opaque : le contenu ne transparaît plus derrière */
header { background: var(--creme); }

/* Menu mobile */
.menu-bascule, .menu-bouton { display: none; }

@media (max-width: 960px) {
  header .wrap { flex-wrap: wrap; height: auto; padding-top: 16px; padding-bottom: 16px; }
  .menu-bouton {
    display: block; cursor: pointer; width: 26px; height: 18px; position: relative; flex: 0 0 auto;
  }
  .menu-bouton span, .menu-bouton span::before, .menu-bouton span::after {
    content: ""; position: absolute; left: 0; width: 26px; height: 2px; background: var(--encre);
  }
  .menu-bouton span { top: 8px; }
  .menu-bouton span::before { top: -7px; }
  .menu-bouton span::after { top: 7px; }
  nav { display: none; flex-basis: 100%; }
  .menu-bascule:checked ~ nav { display: block; }
  nav ul { flex-direction: column; gap: 0; margin-top: 10px; }
  nav li { border-top: 1px solid rgba(42, 38, 32, .12); }
  nav a { display: block; padding: 13px 0; font-size: 16px; }
  header .bouton { display: none; }
  .menu-bascule:checked ~ .bouton {
    display: block; flex-basis: 100%; text-align: center; margin-top: 14px;
  }
}

/* Colonnes de texte des pages légales */
.texte > * { max-width: 760px; }
.texte h2 { font-size: clamp(24px, 3vw, 30px); margin: 40px 0 12px; }
.texte h2:first-child { margin-top: 0; }
.texte .coordonnees { margin-top: 12px; }
.texte .petit { margin-top: 40px; }