/* ==========================================================================
   UNIT CUISINES — V2 (essai) : chargé APRÈS style.css, ne fait que surcharger.
   Idée : Marcellus (une seule graisse) pour tout ce qui est « voix » de la marque,
   Jost en vraies graisses (500 → 700) pour tout ce qui est « information ».
   Le contraste vient du duo grand serif / petit sans gras, plus des phrases
   d'accroche sorties du texte en grand, et du « Lire la suite » sur les pavés.
   ========================================================================== */

:root {
  --display: "Marcellus", "Trajan Pro", Georgia, serif;
  --sans: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --dw: 400; --nw: 400; --dls: -.005em; --nls: -.02em; --ds: .94; --em-style: normal;
  --texte: #2b2a28;           /* corps de texte : plus dense que l'ancien gris */
  --texte-clair: rgba(255, 255, 255, .78);
}

body { color: var(--noir); }
/* Marcellus n'a qu'une graisse : on interdit le faux gras du navigateur */
.h-display, .h2, .h3, .lead-big, .statement, .slide blockquote, .projet h3,
.stat-num, .rating-score, .leicht-year, .leicht-quote, .collection-title, .faq-q, .highlight { font-synthesis: none; }

/* ---------- Petits textes : plus d'assise ---------- */
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .28em; }
.eyebrow::before { width: 48px; height: 2px; }
.btn, .link-arrow, .nav-main a { font-weight: 600; letter-spacing: .2em; }
.btn { font-size: 11.5px; }
.btn--ghost-light { border-width: 1.5px; }
.link-arrow { border-bottom-width: 2px; }
.header-tel { font-weight: 500; }

/* ---------- Corps de texte : moins timide ---------- */
.prose { font-size: 16px; line-height: 1.75; }
.muted, .equipe-content .prose, .temoignages-intro p, .faq-a p, .rating-meta { color: var(--texte); }
.prose strong, .prose a.inline { font-weight: 600; }
.is-dark .prose, .leicht-content .prose, .invisibles-text p, .pillar p, .projet p, .engagement p { color: var(--texte-clair); }

/* ---------- Grand / petit : l'accroche sort du paragraphe ---------- */
.lead-big {
  display: block; margin-bottom: .55em;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px); line-height: 1.3; letter-spacing: -.005em;
  color: var(--noir);
}
.is-dark .lead-big { color: var(--blanc); }
.lead-split + * { margin-top: 1.3em; }

.invisibles-text p + p, .invisibles-text .more p { margin-top: 1.1em; }
.invisibles-text p { font-size: 16px; }
.invisibles-text p.lead-big { font-size: clamp(24px, 2.2vw, 32px); margin: 0 0 .7em; color: var(--blanc); }
.invisibles-text strong { color: var(--blanc); font-weight: 600; }

.statement { margin: 1.6em 0; padding-left: 24px; border-left: 2px solid var(--or); }
.statement strong { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; color: var(--or) !important; }

/* ---------- Lire la suite ---------- */
.more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.more > div { overflow: hidden; }
.more > div > p:first-child { margin-top: 1.3em; }
.more.is-open { grid-template-rows: 1fr; }
.more-btn {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--noir);
}
.is-dark .more-btn { color: var(--blanc); }
.more-btn i { width: 26px; height: 26px; border: 1.5px solid var(--or); border-radius: 50%; position: relative; transition: background .3s, transform .5s var(--ease); }
.more-btn i::before, .more-btn i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.more-btn i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .5s var(--ease); }
.more-btn:hover i { background: var(--or); }
.more-btn[aria-expanded="true"] i::after { transform: translate(-50%, -50%) rotate(0); }

/* ---------- Hero ---------- */
.hero h1 em { color: var(--or); }
.hero-sub { color: var(--texte-clair); }
.hero-sub .hero-accroche { font-weight: 700; letter-spacing: .28em; }
.hero-sub p:nth-child(2) { font-family: var(--display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; color: var(--blanc); }
.hero-sub p:nth-child(2) em { color: var(--blanc); }
.hero-bar .container { font-weight: 500; }
.hero-badge b { font-weight: 700; }

/* ---------- Chiffres ---------- */
.stat-num sup { font-family: var(--sans); font-weight: 600; }
.stat-label { font-weight: 700; letter-spacing: .22em; color: var(--noir); }
.is-dark .stat-label { color: var(--blanc); }

/* ---------- Détails invisibles ---------- */
.pillar { grid-template-columns: 96px 1fr; }
/* Les chiffres de Marcellus sont « elzéviriens » (01 se lit OI) : numéros en Jost */
.pillar-num { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--or); }
.pillar-tag { font-weight: 700; letter-spacing: .28em; }
.pillar .h3 { font-size: calc(clamp(22px, 2vw, 30px) * var(--ds)); }
.pillar .h3 span { color: rgba(255, 255, 255, .5); }

/* ---------- Collections : le titre devient la vedette ---------- */
.collection-num { font-weight: 700; }
.collection-title { font-family: var(--display); font-size: clamp(26px, 2.6vw, 40px); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.05; }

/* ---------- Leicht ---------- */
.leicht-year small { font-family: var(--sans); font-weight: 700; }
.leicht-quote { font-size: calc(clamp(26px, 2.6vw, 38px) * var(--ds)); color: var(--blanc); }

/* ---------- Témoignages ---------- */
.rating-score small { font-family: var(--sans); font-weight: 500; }
.rating-meta a { font-weight: 600; }
.slide-author b { font-weight: 700; font-size: 15px; }
.slide-author span { font-weight: 500; }
.slider-count b { font-weight: 700; }

/* ---------- Réalisations ---------- */
.projet-index { font-size: 13px; font-weight: 600; }
.projet .projet-lieu { font-weight: 700; letter-spacing: .26em; color: var(--or); }

/* ---------- FAQ / engagement / équipe ---------- */
.faq-q { font-family: var(--display); font-size: clamp(19px, 1.7vw, 24px); }
.equipe-visual .tag { font-weight: 700; }
.equipe-content .prose .highlight { font-family: var(--display); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.35; font-weight: 400; margin-top: 1.6em; }
.cta-final p { color: var(--texte-clair); font-size: 17px; }
.cta-final .access b { font-weight: 700; }

/* ---------- Footer ---------- */
.footer-col h3 { font-weight: 700; letter-spacing: .26em; }

@media (max-width: 760px) {
  .pillar { grid-template-columns: 1fr; }
  .pillar-num { font-size: 36px; margin-bottom: 12px; }
}

/* ==========================================================================
   V2 — PASSE « ÉPAISSEUR » : plus rien de fin ni de timide.
   Graisses relevées, boutons plus grands et plus francs, traits et icônes à 2px.
   ========================================================================== */

/* Marcellus n'a qu'une graisse : un léger contour de la couleur du texte l'épaissit */
.h-display, .h2, .h3, .lead-big, .statement strong, .slide blockquote, .projet h3,
.stat-num, .rating-score, .leicht-year, .leicht-quote, .collection-title, .faq-q,
.equipe-content .prose .highlight, .hero-sub p:nth-child(2), .mobile-menu li a {
  -webkit-text-stroke: .018em currentColor;
}
.h-display { -webkit-text-stroke-width: .014em; }

/* Corps de texte : Jost variable, un cran au-dessus du « regular » */
body, .prose, .hero-sub, .invisibles-text p, .pillar p, .projet p, .faq-a p, .engagement p, .cta-final p { font-weight: 450; }
.prose, .invisibles-text p { font-size: 16.5px; }
.prose strong, .invisibles-text strong { font-weight: 700; }

/* Petits libellés : gras, plus grands, moins espacés */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .24em; gap: 18px; }
.eyebrow::before { width: 56px; height: 3px; }
.nav-main a { font-size: 12px; font-weight: 700; letter-spacing: .18em; }
.nav-main a::after { height: 2px; }
.header-tel { font-size: 14px; font-weight: 600; }
.pillar-tag, .projet .projet-lieu, .stat-label, .footer-col h3, .hero-sub .hero-accroche { font-size: 12px; font-weight: 800; letter-spacing: .22em; }
.hero-bar .container, .video-toggle, .invisibles-visual-caption, .slide-author span, .cta-final .access { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; }

/* Boutons : plus hauts, lettrage gras, bordures franches */
.btn { min-height: 62px; padding: 0 40px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; border-width: 2px; }
.btn svg { width: 20px; height: 20px; stroke-width: 2.2; }
.btn--ghost-light { border: 2px solid var(--blanc); }
.btn--ghost-dark { border-width: 2px; }
.btn-header { min-height: 50px; padding: 0 28px; font-size: 11.5px; border-width: 2px; }
.link-arrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; padding-bottom: 10px; border-bottom-width: 3px; }
.link-arrow svg { width: 18px; height: 18px; stroke-width: 2.2; }
.more-btn { font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.more-btn i { width: 30px; height: 30px; border-width: 2px; }
.more-btn i::before, .more-btn i::after { width: 11px; height: 2px; }

/* Boutons ronds et icônes : traits à 2px */
.collection-cta, .slider-btn, .footer-social a { border-width: 2px; }
.collection-cta { width: 58px; height: 58px; border-color: rgba(255, 255, 255, .8); }
.collection-cta svg, .slider-btn svg { stroke-width: 2.2; }
.slider-btn { width: 60px; height: 60px; }
.faq-icon { border-width: 2px; border-color: var(--noir); }
.faq-icon::before, .faq-icon::after { height: 2px; width: 14px; }
.burger span { height: 2px; }
.stars { font-size: 17px; }

/* Filets : visibles plutôt qu'effacés */
.stats { border-top: 2px solid var(--noir); }
.is-dark .stats { border-top-color: var(--blanc); }
.stat + .stat { border-left-color: #d6d4cf; }
.pillar { border-top: 1px solid rgba(255, 255, 255, .3); }
.pillar:last-child { border-bottom-color: rgba(255, 255, 255, .3); }
.faq-list { border-top-width: 2px; }
.faq-item { border-bottom-color: #d6d4cf; }
.rating { border-color: #d6d4cf; }
.slide-author::before { height: 2px; }
.slider-progress { height: 2px; }
.slider-progress i { height: 2px; }
.engagement::before { height: 4px; width: 96px; }
.statement { border-left-width: 3px; }
.leicht-quote { border-top-width: 2px; border-bottom-width: 2px; }
.equipe-content .prose .highlight { border-left-width: 3px; }

/* Grand / petit : les chiffres plus massifs, les exposants en gras */
.stat-num { font-size: calc(clamp(68px, 8vw, 132px) * var(--ds)); }
.stat-num sup { font-weight: 800; }
.pillar-num { font-weight: 700; }
.collection-num, .projet-index, .slider-count b { font-weight: 800; }
.slide-author b { font-size: 16px; font-weight: 800; }

/* ---------- Engagement : bandeau noir pleine largeur ----------
   Le bloc sort du conteneur (marges négatives), le contenu reste aligné sur la grille,
   et il vient se coller à la section suivante (on annule le padding bas de la FAQ). */
.engagement {
  --bleed: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: calc(-1 * var(--section));
  padding: clamp(72px, 9vw, 136px) var(--bleed);
}
.engagement::before { left: var(--bleed); }
@media (max-width: 760px) {
  .engagement { padding: 64px var(--gutter) 56px; }
  .engagement::before { left: var(--gutter); }
}
/* Le surtitre est un <p> : la règle « .engagement p » l'écrasait en blanc fin */
.engagement .eyebrow { color: var(--or); font-weight: 700; margin-bottom: 0; }

/* ---------- CTA final : titre sur 2 lignes, conteneur large, bouton à taille normale ---------- */
.cta-final { padding: clamp(96px, 11vw, 160px) 0; }
.cta-final .container { max-width: var(--container); }
.cta-final .h2 { font-size: calc(clamp(34px, 4.6vw, 72px) * var(--ds)); line-height: 1.08; margin: 28px 0 28px; }
.cta-final .h2 em { display: block; }
.cta-final p { max-width: 640px; margin-bottom: 40px; }
.cta-final .eyebrow { color: var(--or); font-weight: 700; margin: 0; }
.cta-final .btn { min-height: 54px; padding: 0 30px; font-size: 11.5px; }
.cta-final .access { margin-top: 32px; }

/* ---------- Intro : titre sur 3 lignes ---------- */
.intro-title { font-size: calc(clamp(30px, 3.9vw, 58px) * var(--ds)); line-height: 1.12; text-wrap: balance; }

/* ==========================================================================
   V2 — ÉCHELLE TYPOGRAPHIQUE UNIQUE
   Une seule taille par niveau, quelle que soit la section (remplace les
   tailles au cas par cas définies plus haut et dans style.css).
   ========================================================================== */
:root {
  --t-h2: calc(clamp(32px, 3.9vw, 58px) * var(--ds));   /* tous les titres de section */
  --t-h3: calc(clamp(24px, 2.3vw, 34px) * var(--ds));   /* sous-titres, titres de projet / collection, citations */
  --t-lead: clamp(20px, 1.7vw, 25px);                   /* phrases d'accroche en Marcellus */
  --t-body: 16.5px;                                     /* tout le texte courant */
  --t-label: 12px;                                      /* surtitres, libellés, boutons, liens */
}

/* Titres de section (h2) */
.h2, .intro-title, .temoignages-intro .h2, .faq-intro .h2, .cta-final .h2,
.invisibles-head .h2, .leicht-content .h2, .equipe-content .h2, .collections-head .h2, .realisations-head .h2 {
  font-size: var(--t-h2); line-height: 1.1;
}

/* Sous-titres (h3) */
.h3, .pillar .h3, .engagement .h3, .projet h3, .collection-title, .slide blockquote {
  font-size: var(--t-h3); line-height: 1.25;
}

/* Accroches */
.lead-big, .invisibles-text p.lead-big, .statement strong, .equipe-content .prose .highlight,
.hero-sub p:nth-child(2), .leicht-quote, .faq-q {
  font-size: var(--t-lead); line-height: 1.35;
}

/* Texte courant */
.prose, .invisibles-text p, .pillar p, .projet p, .faq-a p, .temoignages-intro p,
.engagement p, .cta-final p, .hero-sub, .rating-meta {
  font-size: var(--t-body); line-height: 1.75;
}

/* Libellés, boutons, liens : même corps partout */
.eyebrow, .pillar-tag, .projet .projet-lieu, .stat-label, .footer-col h3, .hero-sub .hero-accroche,
.btn, .btn-header, .cta-final .btn, .link-arrow, .more-btn, .nav-main a, .collection-num, .projet-index {
  font-size: var(--t-label);
}
.btn, .cta-final .btn { min-height: 56px; padding: 0 34px; }

/* CTA final : moins d'air en haut et en bas */
.cta-final { padding: clamp(72px, 7vw, 104px) 0; }
.cta-final .h2 { margin: 24px 0; }
.cta-final p { margin-bottom: 32px; }
.cta-final .access { margin-top: 24px; }

/* Les surtitres sont des <p> : les règles « .section p » leur imposaient taille et couleur du texte */
p.eyebrow { font-size: var(--t-label); line-height: 1.4; color: var(--or-texte); }
.is-dark p.eyebrow, p.eyebrow--light, .cta-final p.eyebrow, .engagement p.eyebrow { color: var(--or); }
.pillar p.pillar-tag { font-size: var(--t-label); color: var(--or); font-weight: 800; }

/* Avis : colonne de titre plus large pour éviter un titre sur 5 lignes */
.temoignages-grid { grid-template-columns: 5fr 7fr; }
@media (max-width: 1024px) { .temoignages-grid { grid-template-columns: 1fr; } }

/* ---------- Chiffres clés : allégés (jugés trop gras) ---------- */
.stat-num { -webkit-text-stroke: 0; font-size: calc(clamp(52px, 5.6vw, 88px) * var(--ds)); }
.equipe-stats .stat-num { font-size: calc(clamp(44px, 4.4vw, 72px) * var(--ds)); }
.stat-num sup { font-weight: 400; font-size: .3em; }
.stat-label { font-weight: 600; color: var(--gris-600); }
.is-dark .stat-label { color: rgba(255, 255, 255, .6); }
.stats { border-top: 1px solid var(--gris-100); }
.is-dark .stats { border-top-color: rgba(255, 255, 255, .14); }
.stat + .stat { border-left-color: var(--gris-100); }