/* =============================================================================
   jeremy-vaucher.com — thème v2 « Ligne de crête »
   Filets de 2px, aucun arrondi, Archivo pour les titres, Public Sans pour le texte.
   Les classes de la v1 (section, features, pricing, prose…) sont conservées :
   les pages de data/pages/*.html se rendent sans être modifiées.
   ========================================================================== */

:root {
  --ink: #2F3E46;          /* texte et filets forts   */
  --ink-2: #46565E;        /* texte secondaire        */
  --near-black: #201E1D;   /* texte sur aplat accent  */
  --ground: #F4F6F7;       /* fond principal          */
  --ground-2: #EBEEEF;     /* fond alterné            */
  --ground-3: #E4EAEC;
  --accent: #D38B3D;       /* orange cairn, action    */
  --accent-dk: #A85E12;    /* liens, survol           */
  --accent-lt: #E9B978;    /* accent sur fond sombre  */
  --accent-soft: #F1DCC0;  /* sélection               */
  --line: #C8D2D6;         /* filets fins             */
  --mute: #8FA0A7;         /* gris de soutien         */
  --dark: #1B242A;         /* pied de page            */
  --dark-line: #35444B;

  --rule: 2px solid var(--ink);
  --pad-x: clamp(20px, 5vw, 72px);
  --pad-y: clamp(64px, 9vw, 128px);
  --pad-y-lg: clamp(72px, 10vw, 148px);
  --pad-y-sm: clamp(48px, 7vw, 88px);
  --maxw: 1200px;

  --font-ui: Archivo, "Segoe UI", system-ui, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

strong { font-weight: 600; }

::selection { background: var(--accent-soft); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
}

h1 { font-size: clamp(34px, 5.4vw, 62px); margin: 0 0 22px; }
h2 { font-size: clamp(28px, 3.6vw, 46px); margin: 0 0 24px; }
h3 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }

p { margin: 0 0 18px; max-width: 38em; }

.lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 34em; }

/* Lien d'évitement ------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: #fff; padding: 12px 18px;
  font-family: var(--font-ui); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* =============================== En-tête ================================ */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 32px;
  padding: 18px var(--pad-x);
  border-bottom: var(--rule);
  background: var(--ground);
}
.brand { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img { height: 54px; width: auto; }
.brand-text { display: flex; flex-direction: column; gap: 5px; }
.brand-name {
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1; letter-spacing: -0.02em;
}
.brand-line {
  font-family: var(--font-ui); font-weight: 500; font-size: 13px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.brand-line .dot { color: var(--accent); }

.site-nav { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-left: auto; font-family: var(--font-ui); font-size: 15px; font-weight: 500; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 6px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent-dk); }

.nav-toggle { display: none; }

/* =============================== Boutons ================================ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-weight: 600; font-size: 17px;
  padding: 15px 26px; min-height: 48px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.btn svg { flex: 0 0 auto; }
.btn-primary { background: var(--accent); color: var(--near-black); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--ground); }
.btn-sm { font-size: 15px; padding: 11px 18px; min-height: 44px; }

.header-cta {
  flex: 0 0 auto; background: var(--accent); color: var(--near-black);
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  padding: 12px 20px; min-height: 44px;
  display: flex; align-items: center; text-decoration: none;
}
.header-cta:hover { background: var(--accent-dk); color: #fff; }

/* =============================== Sections =============================== */
.section { padding: var(--pad-y) var(--pad-x); border-bottom: var(--rule); }
.section.lg { padding-block: var(--pad-y-lg); }
.section.sm { padding-block: var(--pad-y-sm); }
.section.soft { background: var(--ground-2); }
.section.flush { padding: 0; }
.section > *,
.page-intro > * { max-width: var(--maxw); }

.section-head { margin-bottom: 40px; }
.section-head h2 { max-width: 22em; }
.section-head p { color: var(--ink-2); max-width: 40em; }

.section-title { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.section-title h2 { margin: 0; }

.eyebrow {
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 14px;
}

.hr { height: 2px; background: var(--ink); border: 0; margin: 0; }

/* Intro de page (fil d'Ariane + H1) -------------------------------------- */
.page-intro { padding: clamp(40px, 6vw, 84px) var(--pad-x) clamp(36px, 5vw, 64px); border-bottom: var(--rule); }
.page-intro h1 { max-width: 18em; }
.page-intro .lead { margin-bottom: 0; }

.breadcrumb {
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-dk); }

/* =============================== Le héros =============================== */
.hero {
  position: relative;
  min-height: clamp(540px, 76vh, 820px);
  background-size: cover; background-position: 30% 22%;
  display: grid; align-content: start; justify-items: end;
  padding: clamp(28px, 5vw, 72px);
  border-bottom: var(--rule);
}
.hero-inner { max-width: 560px; }
.hero .eyebrow { color: #fff; text-shadow: 0 1px 8px rgba(20, 40, 60, .55); }
.hero h1 {
  margin: 0; font-size: clamp(42px, 7.4vw, 92px); line-height: .95;
  color: #fff; text-shadow: 0 2px 14px rgba(20, 40, 60, .5);
}
.hero .lead {
  margin: 24px 0 0; color: #fff; max-width: 26em;
  text-shadow: 0 1px 10px rgba(20, 40, 60, .6);
}
.hero .btn { margin-top: 30px; }
.hero .btn-primary:hover { background: var(--ground); border-color: var(--ground); color: var(--near-black); }

/* Bandeau photo pleine largeur ------------------------------------------- */
.band { margin: 0; border-bottom: var(--rule); }
.band img { width: 100%; height: clamp(200px, 26vw, 250px); object-fit: cover; }

/* =============================== Grilles ================================ */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px 56px; max-width: var(--maxw); }
.cols p { max-width: 34em; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; max-width: var(--maxw); }

/* Section coupée en deux : texte d'un côté, photo de l'autre -------------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); border-bottom: var(--rule); background: var(--ground-2); padding: 0; }
.split-text { padding: clamp(64px, 9vw, 124px) var(--pad-x); display: flex; flex-direction: column; justify-content: center; gap: 48px; }
.split-text article { display: flex; flex-direction: column; gap: 14px; }
.split-text article h2, .split-text article h3 { margin: 0; font-size: clamp(26px, 3vw, 38px); }
.split-text article p { margin: 0; max-width: 32em; }
.split-media { margin: 0; border-left: var(--rule); }
.split-media img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
@media (max-width: 719px) { .split-media { border-left: 0; border-top: var(--rule); } }

/* =============================== Cartes ================================= */
.tiles { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; align-items: stretch; max-width: var(--maxw); }
.tiles li { background: var(--ground); border: var(--rule); }
.tiles a { display: flex; flex-direction: column; gap: 16px; padding: 28px 24px 30px; text-decoration: none; color: var(--ink); min-height: 100%; font-family: var(--font-ui); font-size: 20px; font-weight: 600; }
.tiles a:hover { background: var(--ground-2); color: var(--ink); }

.card { background: var(--ground); border: var(--rule); padding: 28px 24px; }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card-icon { font-size: 28px; line-height: 1; margin-bottom: 12px; }

/* Colonnes à filet supérieur (prestations, étapes) ----------------------- */
.features, .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 48px; max-width: var(--maxw); }
.features .feature, .steps .step {
  border-top: var(--rule); padding: 24px 0 30px;
}
.features .feature-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.features .f-ico { font-size: 24px; line-height: 1; }
.features h3, .steps h3 { font-family: var(--font-ui); font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.features p, .steps p { font-size: 16px; line-height: 1.65; margin: 0; max-width: 34em; }
.steps.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* =============================== Tarifs ================================= */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 48px; max-width: var(--maxw); }
.price-card { border-top: var(--rule); padding: 24px 0 30px; }
.price-card h3 { font-family: var(--font-ui); font-size: 21px; font-weight: 600; margin: 0 0 8px; }
.price-card .amount {
  display: block; font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em;
  color: var(--accent-dk); margin-bottom: 12px;
}
.price-card p { font-size: 16px; line-height: 1.65; margin: 0; }

/* ======================= Bandeau d'appel à l'action ===================== */
.cta-band {
  border-top: var(--rule);
  margin-top: 56px; padding-top: 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px;
  max-width: var(--maxw);
}
.cta-band h2 { margin: 0; font-size: clamp(24px, 3vw, 38px); max-width: 22em; }
.cta-band .btn { margin-left: auto; }

.cta-strip {
  border-bottom: var(--rule);
  padding: var(--pad-y-sm) var(--pad-x);
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px;
}
.cta-strip h2 { margin: 0; font-size: clamp(24px, 3vw, 38px); max-width: 22em; }
.cta-strip .btn { margin-left: auto; }

/* =============================== Étiquettes ============================= */
.tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tags li, .tag {
  border: 1px solid var(--ink); padding: 8px 14px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
}

/* ============================ Texte éditorial =========================== */
.rich-text p, .editorial p, .ed-body p { max-width: 34em; }
.editorial { max-width: var(--maxw); }
.ed-body { margin-top: 8px; }

.prose { max-width: 42em; }
.prose h2 { font-size: clamp(24px, 2.8vw, 34px); margin: 44px 0 16px; }
.prose h3 { font-size: clamp(19px, 2vw, 23px); margin: 32px 0 12px; }
.prose p, .prose li { font-size: 17px; line-height: 1.75; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 18px; }
.prose li { margin-bottom: 8px; }
.prose img { margin: 28px 0; border: var(--rule); }
.prose blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent); color: var(--ink-2); font-size: 18px;
}
.prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 16px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--ground-2); font-family: var(--font-ui); font-weight: 600; }
.prose code { background: var(--ground-2); padding: 2px 6px; font-size: .92em; }
.prose pre { background: var(--ink); color: var(--ground); padding: 18px; overflow-x: auto; }
.prose pre code { background: none; color: inherit; padding: 0; }

/* ============================ Liste d'articles ========================== */
.post-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 34px; max-width: var(--maxw); }
.post-card { display: flex; flex-direction: column; gap: 14px; border-top: var(--rule); padding-top: 20px; text-decoration: none; color: var(--ink); }
.post-card:hover { color: var(--ink); }
.post-card .thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card .meta { font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.post-card h3 { font-family: var(--font-ui); font-size: 21px; font-weight: 600; line-height: 1.25; margin: 0; }
.post-card:hover h3 { color: var(--accent-dk); }

/* ============================ Article de blog =========================== */
.article-head { padding: clamp(40px, 6vw, 84px) var(--pad-x) clamp(28px, 4vw, 44px); border-bottom: var(--rule); }
.article-head h1 { max-width: 17em; }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
  margin: 0;
}
.article-meta .sep { color: var(--accent); }
.article-cover { margin: 0; border-bottom: var(--rule); }
.article-cover img { width: 100%; height: clamp(240px, 34vw, 460px); object-fit: cover; }
.article-body { padding: clamp(48px, 7vw, 88px) var(--pad-x); border-bottom: var(--rule); }

/* ============================== Formulaires ============================= */
.field { display: grid; gap: 8px; margin-bottom: 20px; max-width: 34em; }
.field label { font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.input, input[type="text"], input[type="email"], textarea, select {
  font-family: var(--font-body); font-size: 16px;
  padding: 12px 14px; border: var(--rule); background: #fff; color: var(--ink);
  width: 100%; border-radius: 0;
}
textarea { min-height: 160px; resize: vertical; }
.input:focus, input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool-box { border: var(--rule); background: var(--ground-2); padding: 28px 24px; max-width: 44em; }
.counter { font-family: var(--font-ui); font-size: 14px; color: var(--ink-2); }
.counter.over { color: #A11; font-weight: 600; }

/* =============================== Pied de page =========================== */
.site-footer { position: relative; background: var(--dark); color: var(--line); }
.footer-band { width: 100%; height: clamp(180px, 22vw, 260px); object-fit: cover; object-position: 50% 40%; }
.footer-inner { padding: clamp(44px, 6vw, 80px) var(--pad-x) 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand .fb-name { margin: 0; font-family: var(--font-ui); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.footer-brand .fb-line { margin: -4px 0 0; font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.footer-brand .fb-line .dot { color: var(--accent); }
.footer-brand p { margin: 0; font-size: 15px; line-height: 1.65; max-width: 34em; }
.footer-col h2 { margin: 0 0 14px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; }
.footer-col a { color: var(--line); text-decoration: none; }
.footer-col a:hover { color: var(--accent-lt); }
.footer-bottom { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--dark-line); font-size: 14px; color: var(--mute); max-width: none; }

/* ============================== Adaptatif =============================== */
@media (max-width: 899px) {
  .site-header { gap: 12px 20px; }
  .brand img { height: 44px; }
  .site-nav { order: 3; width: 100%; margin-left: 0; gap: 4px 18px; font-size: 14px; }
  .header-cta { margin-left: auto; }
}
@media (max-width: 599px) {
  body { font-size: 16px; }
  .split-text { gap: 36px; }
  .cta-band .btn, .cta-strip .btn { margin-left: 0; }
  .features, .steps, .pricing { gap: 0 24px; }
}

@media print {
  .site-header, .site-footer, .cta-band, .cta-strip, .skip-link { display: none; }
  body { background: #fff; }
}

/* ====================== Composants propres à la home ==================== */

/* Section sombre (tarifs) ------------------------------------------------ */
.section.dark { background: #22303A; color: var(--ground-3); }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark > p { color: var(--ground-3); font-size: 18px; max-width: 36em; }
.section.dark a { color: var(--accent-lt); }
.section.dark a:hover { color: #fff; }

/* Photo pleine largeur avec texte en surimpression ----------------------- */
.overlay { position: relative; border-bottom: var(--rule); }
.overlay > picture > img, .overlay > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,32,40,.72) 0%, rgba(20,32,40,.42) 60%, rgba(20,32,40,.18) 100%); }
.overlay-inner { position: relative; z-index: 1; padding: clamp(64px, 11vw, 152px) var(--pad-x); max-width: 44em; }
.overlay-inner h2 { color: #fff; font-size: clamp(27px, 3.8vw, 48px); margin: 0 0 24px; }
.overlay-inner p { color: #fff; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.65; max-width: 32em; }
.overlay-inner p + p { margin-top: 18px; }
.overlay-inner p:last-child { margin-bottom: 0; }

/* Split inversé : photo à gauche, texte à droite ------------------------- */
.split.plain { background: transparent; }
.split.reverse .split-media { border-left: 0; border-right: var(--rule); }
.split.reverse .split-text { gap: 22px; }
@media (max-width: 719px) { .split.reverse .split-media { border-right: 0; border-bottom: var(--rule); } }
.split-media img { aspect-ratio: 4 / 3; }

/* Grille de cartes bordées ----------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; max-width: var(--maxw); }
.cards article { background: var(--ground); border: var(--rule); padding: 30px 26px 34px; }
.cards h3 { font-family: var(--font-ui); font-size: 20px; font-weight: 600; margin: 0 0 12px; }
.cards p { font-size: 16px; line-height: 1.65; margin: 0; }

/* Tarifs en cartes (sur fond sombre) ------------------------------------- */
.pricing.boxed { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; }
.pricing.boxed .price-card { border-top: 0; background: var(--ground); border: 2px solid var(--ground); color: var(--ink); padding: 28px 26px 32px; }
.pricing.boxed .price-card h3 { color: var(--ink); margin-bottom: 12px; }
.pricing.boxed .price-card p { color: var(--ink); font-size: 15px; line-height: 1.6; }
.pricing.boxed .amount { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.015em; }

.note { font-size: 14px; font-style: italic; color: var(--ink-2); margin: 18px 0 0; max-width: none; }
.section.dark .note { color: #A9B8BF; }

/* Le héros porte sa photo depuis la feuille de style --------------------- */
.hero { background-image: url("/assets/img/photos/hero-croix-mer-de-nuages-1440.jpg"); }
@media (min-width: 1441px) { .hero { background-image: url("/assets/img/photos/hero-croix-mer-de-nuages-1920.jpg"); } }
@media (max-width: 960px)  { .hero { background-image: url("/assets/img/photos/hero-croix-mer-de-nuages-960.jpg"); } }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero { background-image: image-set(url("/assets/img/photos/hero-croix-mer-de-nuages-1440.webp") type("image/webp")); }
  @media (min-width: 1441px) { .hero { background-image: image-set(url("/assets/img/photos/hero-croix-mer-de-nuages-1920.webp") type("image/webp")); } }
  @media (max-width: 960px)  { .hero { background-image: image-set(url("/assets/img/photos/hero-croix-mer-de-nuages-960.webp") type("image/webp")); } }
}

/* Liens dans les cartes d'articles --------------------------------------- */
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--accent-dk); }
.post-card .thumb { border: 0; }

/* ========================= Gabarit article de blog ====================== */
.article-layout {
  padding: clamp(48px, 7vw, 96px) var(--pad-x);
  display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 40px 64px; align-items: start; border-bottom: var(--rule);
}
@media (max-width: 959px) { .article-layout { grid-template-columns: 1fr; } }

.toc { position: sticky; top: 24px; border-top: var(--rule); padding-top: 18px; }
.toc h2 { font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.toc a { color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.4; }
.toc a:hover { color: var(--accent-dk); }
@media (max-width: 959px) { .toc { position: static; } }

.article-prose { max-width: 68ch; }
.article-prose p, .article-prose li { font-size: 18px; line-height: 1.75; }
.article-prose > :first-child { margin-top: 0; }

figcaption { font-size: 14px; color: var(--ink-2); padding: 10px var(--pad-x) 0; max-width: 60em; }
.article-cover figcaption { padding-bottom: 4px; }

.author-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px;
  padding: var(--pad-y-sm) var(--pad-x); border-bottom: var(--rule); background: var(--ground-2);
}
.author-box img { height: 64px; width: auto; }
.author-box .ab-name { font-family: var(--font-ui); font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.author-box p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 42em; }
.author-box .btn { margin-left: auto; }
@media (max-width: 719px) { .author-box .btn { margin-left: 0; } }

/* Barre de filtres (catégories du blog) ---------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; list-style: none; padding: 0; }
.filters a {
  display: inline-block; border: 1px solid var(--ink); padding: 8px 14px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.filters a:hover { background: var(--ink); color: var(--ground); }

/* Hub outils SEO --------------------------------------------------------- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: var(--maxw); }
.tool-grid a { display: flex; flex-direction: column; gap: 10px; background: var(--ground); border: var(--rule); padding: 26px 24px 30px; text-decoration: none; color: var(--ink); }
.tool-grid a:hover { background: var(--ground-2); }
.tool-grid .t-ico { font-size: 26px; line-height: 1; }
.tool-grid h3 { font-family: var(--font-ui); font-size: 19px; font-weight: 600; margin: 0; }
.tool-grid p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--ink-2); }

/* =============================================================================
   Passe 2 : colonne de contenu centrée, héros réduit, menu burger,
   formulaire latéral. Corrige les grands vides à droite sur écrans larges.
   ========================================================================== */

/* Une seule règle règle le vide : le rembourrage horizontal grandit pour
   centrer une colonne de contenu plafonnée à --maxw, sans toucher au HTML.
   Les filets et les photos restent pleine largeur. */
:root { --maxw: 1280px; }
.site-header, .section, .page-intro, .cta-strip,
.article-head, .article-layout, .author-box, .footer-inner {
  padding-inline: max(var(--pad-x), (100% - var(--maxw)) / 2);
}
.overlay-inner { padding-inline: max(var(--pad-x), (100% - var(--maxw)) / 2); max-width: none; }
.overlay-inner > * { max-width: 44em; }
.section > *, .page-intro > * { max-width: none; }
.section > p, .page-intro > p { max-width: 38em; }
.section-head h2, .section > h2 { max-width: 22em; }

/* Moins de blanc juste après une intro de page */
.page-intro + .section { padding-top: clamp(36px, 4vw, 56px); }
.filters { margin-bottom: 32px; }

/* Héros plus bas, l'image ne mange plus tout l'écran ---------------------- */
.hero { min-height: clamp(340px, 48vh, 540px); align-content: center; }
.hero h1 { font-size: clamp(36px, 5.4vw, 68px); }
.hero .lead { margin-top: 18px; font-size: clamp(16px, 1.7vw, 19px); }
.hero .btn { margin-top: 24px; }
@media (max-width: 719px) { .hero { min-height: 300px; justify-items: start; } }

/* ============================== Menu burger ============================= */
.nav-toggle {
  display: none; margin-left: auto;
  align-items: center; gap: 10px;
  background: transparent; border: 2px solid var(--ink); color: var(--ink);
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  padding: 10px 14px; min-height: 44px; cursor: pointer; line-height: 1;
}
.nav-toggle:hover { background: var(--ink); color: var(--ground); }
.nav-toggle .bars { display: inline-flex; flex-direction: column; gap: 4px; }
.nav-toggle .bars span { display: block; width: 18px; height: 2px; background: currentColor; }

@media (max-width: 899px) {
  .site-header { gap: 12px 16px; }
  .nav-toggle { display: inline-flex; order: 2; }
  .header-cta { order: 3; margin-left: 0; }
  .site-nav { display: none; order: 4; width: 100%; margin-left: 0; }
  .site-nav.open { display: flex; flex-direction: column; gap: 0; border-top: 2px solid var(--ink); margin-top: 6px; }
  .site-nav.open a { padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .site-nav.open a:last-child { border-bottom: 0; }
}
@media (max-width: 419px) {
  .nav-toggle span.lbl { display: none; }
  .brand img { height: 38px; }
  .brand-name { font-size: 21px; }
  .brand-line { font-size: 11px; letter-spacing: .12em; }
}

/* ========================= Formulaire latéral ========================== */
.with-aside {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 40px 64px; align-items: start;
}
@media (max-width: 899px) { .with-aside { grid-template-columns: 1fr; } }
.with-aside > div > p { max-width: 34em; }

.lead-form { border: var(--rule); background: var(--ground-2); padding: 26px 24px 30px; }
.lead-form h2, .lead-form h3 { font-family: var(--font-ui); font-size: 21px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.lead-form p.intro { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 18px; max-width: none; }
.lead-form .field { margin-bottom: 14px; max-width: none; }
.lead-form .field label { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.lead-form input, .lead-form textarea, .lead-form select { font-size: 15px; padding: 10px 12px; }
.lead-form textarea { min-height: 110px; }
.lead-form .btn { width: 100%; justify-content: space-between; }
.lead-form .rgpd { font-size: 12.5px; line-height: 1.5; color: var(--mute); margin: 14px 0 0; max-width: none; }
.lead-form .ok { border: var(--rule); background: var(--ground); padding: 18px 16px; }

.seg { display: flex; gap: 0; border: 2px solid var(--ink); margin-bottom: 14px; }
.seg label { flex: 1; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; text-align: center; padding: 11px 8px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--ink);
}
.seg label + label span { border-left: 2px solid var(--ink); }
.seg input:checked + span { background: var(--accent); color: var(--near-black); }
.seg input:focus-visible + span { outline: 2px solid var(--accent-dk); outline-offset: -4px; }

/* Les pages de contenu héritées enveloppent tout dans .container : on le rend
   transparent pour la mise en page, sinon les grilles et le centrage sautent. */
.container { display: contents; }

/* Les blocs de texte long coulent en deux colonnes sur grand écran, au lieu
   de laisser la moitié droite vide. La mesure de lecture reste à ~34em.
   Sélecteurs en descendance : .container peut s'intercaler. */
@media (min-width: 1080px) {
  .section .rich-text,
  .section .editorial > .ed-body {
    columns: 2; column-gap: 56px;
  }
  .section .rich-text > *,
  .section .editorial > .ed-body > * { break-inside: avoid; max-width: none; }
  .section .rich-text > p:first-child,
  .section .editorial > .ed-body > p:first-child { margin-top: 0; }
}
/* Une intro d'un seul paragraphe ne doit pas être coupée en deux */
.section .rich-text:has(> p:only-child) { columns: 1; }

/* Respiration resserrée */
.section-head { margin-bottom: 28px; }
.section-head h2 { margin-bottom: 14px; }
.section > h2, .section > .container > h2 { margin-bottom: 20px; }
.split-text { gap: 32px; }
.section p, .page-intro p { max-width: 38em; }
.section .rich-text p, .section .ed-body p, .section-head p { max-width: 34em; }

/* Taille minimale automatique des enfants de grille : sans min-width:0, un
   champ de formulaire ou une sous-grille impose sa min-content à la piste et
   fait déborder toute la page en mobile. Mesuré à 604px sur un écran de 414px. */
.with-aside > *, .cols > *, .grid-2 > *, .split > *, .features > *, .steps > *,
.cards > *, .pricing > *, .tiles > *, .post-list > *, .tool-grid > *,
.article-layout > *, .footer-grid > *, .lead-form form > * { min-width: 0; }

input, textarea, select { min-width: 0; max-width: 100%; }
.lead-form .seg { flex-wrap: wrap; }
.lead-form .seg label { min-width: 44%; }

/* Filet de sécurité : les mots très longs ne débordent plus */
body { overflow-wrap: break-word; }
.prose a, .rich-text a, .article-prose a { overflow-wrap: anywhere; }

/* =============================================================================
   Passe 3 : la marque du cairn sur les photos, et des légendes qui font le
   pont entre la montagne et le référencement. Les images cessent d'être
   décoratives, elles portent le propos.
   ========================================================================== */

figure { position: relative; }

/* La marque, posée sur la zone image et jamais sur la légende */
.split-media > picture, .band > picture, .article-cover > picture,
.overlay > picture, .figure-mark > picture { position: relative; display: block; }

.split-media > picture::after, .band > picture::after,
.article-cover > picture::after, .overlay > picture::after,
.figure-mark > picture::after, .hero::after {
  content: ""; position: absolute; z-index: 3;
  right: clamp(14px, 1.6vw, 26px); bottom: clamp(14px, 1.6vw, 26px);
  width: clamp(34px, 4vw, 54px); aspect-ratio: 104 / 82;
  background: url("/assets/img/cairn-blanc-160.png") center / contain no-repeat;
  opacity: .82; pointer-events: none;
}
.hero::after { z-index: 1; }
.article-cover > picture::after { opacity: .7; }

/* La légende posée sur le bas de la photo */
.fig-over {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: 52px clamp(18px, 2.4vw, 28px) clamp(16px, 1.8vw, 22px);
  padding-right: clamp(64px, 7vw, 96px);
  background: linear-gradient(to top, rgba(14, 24, 30, .88) 0%, rgba(14, 24, 30, .62) 48%, rgba(14, 24, 30, 0) 100%);
  color: #fff; font-size: clamp(14px, 1.35vw, 16px); line-height: 1.5;
  max-width: none; text-shadow: 0 1px 6px rgba(10, 20, 26, .5);
}
.fig-over b, .fig-over strong { font-weight: 600; color: #fff; }
.fig-over .src { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #B9C6CC; }
@media (max-width: 599px) {
  .fig-over { padding: 40px 16px 14px; padding-right: 62px; font-size: 13.5px; }
}

/* Bandeau photo : la légende ne doit pas écraser une image très basse */
.band img { height: clamp(240px, 30vw, 320px); }

/* La photo d'un demi-bloc remplit toute la hauteur de sa colonne : sinon la
   légende posée en bas de figure retombe sur du blanc. */
.split-media { display: flex; }
.split-media > picture { flex: 1; display: block; }
.split-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; min-height: 340px; }
@media (max-width: 719px) { .split-media img { min-height: 260px; aspect-ratio: 4 / 3; } }

/* La marque se range dans la gouttière réservée par la légende */
.split-media > picture::after, .band > picture::after { bottom: clamp(16px, 1.8vw, 24px); }

/* =============================================================================
   Passe 4 : le heros. La photo est en 4:3, la banniere en 3,8:1 sur grand
   ecran : en gardant le haut on ne voyait que du ciel. On descend le point de
   cadrage sur la croix et la mer de nuages, on redonne de la hauteur sur les
   ecrans larges, et on aligne le texte sur la colonne de contenu du site.
   ========================================================================== */
.hero {
  min-height: clamp(420px, max(52vh, 27vw), 680px);
  background-position: 50% 62%;
  padding-block: clamp(36px, 4vw, 64px);
  padding-inline: max(var(--pad-x), (100% - var(--maxw)) / 2);
  align-content: center;
  position: relative;
}
/* Voile de lisibilite, plus dense du cote du texte */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to left, rgba(14, 26, 34, .58) 0%, rgba(14, 26, 34, .28) 42%, rgba(14, 26, 34, 0) 72%),
    linear-gradient(to top, rgba(14, 26, 34, .34) 0%, rgba(14, 26, 34, 0) 38%);
}
.hero-inner { position: relative; z-index: 1; max-width: 34em; }
.hero h1 { text-shadow: 0 2px 18px rgba(10, 22, 30, .55); }
.hero .lead { text-shadow: 0 1px 12px rgba(10, 22, 30, .6); max-width: 30em; }
.hero .eyebrow { text-shadow: 0 1px 10px rgba(10, 22, 30, .6); }

/* La marque ne doit pas mordre le bord du heros */
.hero::after {
  right: max(var(--pad-x), (100% - var(--maxw)) / 2);
  bottom: clamp(18px, 2vw, 30px);
  z-index: 2;
}

@media (max-width: 719px) {
  .hero { min-height: 340px; justify-items: start; }
  .hero-inner { max-width: none; }
  .hero::before { background: linear-gradient(to top, rgba(14, 26, 34, .62) 0%, rgba(14, 26, 34, .22) 55%, rgba(14, 26, 34, .1) 100%); }
}

/* Coupures de ligne : « Haute-Savoie » ne doit pas se casser sur son trait
   d'union, et les titres cherchent un equilibre entre leurs lignes. */
.nb { white-space: nowrap; }
h1, h2, h3, .lead { text-wrap: balance; }
.prose p, .article-prose p, .rich-text p { text-wrap: pretty; }

/* Sous 520px, la marque prend sa ligne, puis Contact et le burger partagent la
   seconde, l'un a gauche et l'autre a droite. Evite le bouton isole. */
@media (max-width: 519px) {
  .site-header { row-gap: 10px; }
  .brand { flex: 1 1 100%; }
  .header-cta { order: 3; }
  .nav-toggle { order: 4; margin-left: auto; }
  .site-nav { order: 5; }
}

/* =============================================================================
   Passe 5 : les classes des pages heritees que la v2 n'avait jamais stylees.
   .check-grid, .check-card et .checklist portent tout le corps des pages
   prestation ; sans regle elles retombaient en colonne unique et etroite.
   ========================================================================== */

/* --- Grille de cartes a puces (audit, semantique, coaching) -------------- */
.check-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px; align-items: start; max-width: var(--maxw);
}
.check-grid > * { min-width: 0; }
.check-card {
  background: var(--ground); border: var(--rule);
  padding: 24px 22px 26px; height: 100%;
}
.section.soft .check-card { background: #fff; }
.check-card h3 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 19px; font-weight: 600;
  letter-spacing: -.01em; margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cc-ico { font-size: 21px; line-height: 1; flex: 0 0 auto; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checklist li {
  position: relative; padding-left: 24px;
  font-size: 15.5px; line-height: 1.5; margin: 0;
}
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--accent-dk); border-bottom: 2px solid var(--accent-dk);
  transform: rotate(-45deg);
}

/* --- Images dans les blocs .feature : alignees en bas de cellule --------- */
.features .feature { display: flex; flex-direction: column; }
.features .feature > img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  margin-top: auto; padding-top: 16px; border: 0;
}
.features .feature > p { margin-bottom: 16px; }

/* --- Figure illustree --------------------------------------------------- */
.media-figure { margin: 0 0 24px; border: var(--rule); background: var(--ground); }
.media-figure img { width: 100%; height: auto; display: block; }
.media-figure figcaption {
  padding: 12px 16px; font-size: 14px; line-height: 1.5;
  color: var(--ink-2); border-top: 1px solid var(--line); max-width: none;
  position: static; background: none; text-shadow: none;
}

/* --- Residus WordPress -------------------------------------------------- */
.wp-block-heading { margin-top: 36px; }
.wp-block-columns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px 40px; margin: 24px 0;
}
.wp-block-column { min-width: 0; }
.wp-block-column > :first-child { margin-top: 0; }
.wp-block-image { margin: 28px 0; }
.wp-block-image img, .size-full, .size-large { height: auto; }
.aligncenter { display: block; margin-inline: auto; }
.wp-block-social-links { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 18px 0; }
@media (max-width: 599px) { .wp-block-columns:not(.is-not-stacked-on-mobile) { grid-template-columns: 1fr; } }

/* --- Residus GenerateBlocks -------------------------------------------- */
.gb-headline { margin: 28px 0 12px; }
.gb-headline-text { font-family: var(--font-ui); }
.gb-image, .gb-block-image { margin: 20px 0; }
.gb-image img, .gb-block-image img { width: 100%; height: auto; }
.gb-icon { display: inline-flex; align-items: center; }
.gb-icon svg { width: 1em; height: 1em; fill: currentColor; }
.gb-button {
  display: inline-flex; align-items: center; gap: 10px;
  border: 2px solid var(--ink); color: var(--ink); background: transparent;
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  padding: 11px 18px; min-height: 44px; text-decoration: none; margin: 6px 8px 6px 0;
}
.gb-button:hover { background: var(--ink); color: var(--ground); }
.has-accent-color, .has-link-color { color: var(--accent-dk); }

/* Quand un bloc de prose porte une figure illustree, celle-ci vient occuper la
   moitie droite et le texte l'habille, au lieu de laisser le vide. */
@media (min-width: 1080px) {
  .section .prose:has(.media-figure),
  .section .prose:has(.wp-block-image) { max-width: none; }
  .section .prose:has(.media-figure) > p,
  .section .prose:has(.wp-block-image) > p { max-width: none; }
  .section .prose .media-figure,
  .section .prose .wp-block-image {
    float: right; width: 44%; margin: 6px 0 26px 44px; shape-margin: 44px;
  }
  .section .prose::after { content: ""; display: block; clear: both; }
}

/* Meme habillee par une figure, la ligne ne doit pas depasser une mesure lisible */
@media (min-width: 1080px) {
  .section .prose:has(.media-figure) > p,
  .section .prose:has(.wp-block-image) > p,
  .section .prose:has(.media-figure) > ul,
  .section .prose:has(.media-figure) > ol { max-width: 46em; }
}