/* Kablann — feuille de style du site (sources propres, octobre 2026)
   Charte reprise de la v70 : ivoire, encre, or ; Cormorant Garamond pour les titres, Jost pour le texte. */

:root {
  --fond: #f7f4ee;
  --encre: #1c1915;
  --ivoire: #f1ede5;
  --pierre: #ebe6dc;
  --texte-2: #3a342d;
  --trait: #d6cec2;
  --or: #7a5b32;
  --or-clair: #c6b491;
  --alerte: #9b3d2e;
  --serif: "Cormorant Garamond", "Cormorant Garamond Fallback", Georgia, serif;
  --sans: "Jost", "Jost Fallback", Arial, sans-serif;
  --largeur: 1180px;
  --entete: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font-family: var(--sans); font-weight: 400; font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
  line-height: 1.08; margin: 0; color: inherit;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.55rem; line-height: 1.15; }
strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.lien-evitement { position: absolute; left: -9999px; top: 0; }
.lien-evitement:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--encre); color: var(--fond); padding: .6rem 1rem; }

.wrap { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .wrap { padding-inline: 2rem; } }
.etroit { max-width: 46rem; }
.centre { text-align: center; }
.centre .chapeau { margin-inline: auto; }

.surtitre {
  font-family: var(--sans); font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin: 0 0 .9rem;
}
.chapeau { font-size: 1.12rem; color: var(--texte-2); max-width: 56ch; margin-top: 1.1rem; }
.petit { font-size: .9rem; color: var(--texte-2); }
.capitales { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.italique { font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1.25; }

/* ---------- Boutons ---------- */
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.centre .boutons { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: .85rem 1.6rem; border: 1px solid var(--encre); background: var(--encre); color: var(--fond);
  font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--encre); }
.btn-clair { background: transparent; color: var(--encre); border-color: var(--trait); }
.btn-clair:hover { border-color: var(--encre); }
.sombre .btn { background: var(--fond); color: var(--encre); border-color: var(--fond); }
.sombre .btn:hover { background: transparent; color: var(--fond); }
.sombre .btn-clair { background: transparent; color: var(--fond); border-color: rgba(247,244,238,.35); }
.sombre .btn-clair:hover { border-color: var(--fond); }
.lien-fleche { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); text-decoration: none; font-weight: 500; }
.lien-fleche::after { content: " →"; }
.lien-fleche:hover { color: var(--encre); }
.sombre .lien-fleche { color: var(--or-clair); }
.sombre .lien-fleche:hover { color: var(--fond); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(247,244,238,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--trait); }
.entete-ligne { display: flex; align-items: center; gap: 1.5rem; height: var(--entete); }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo { gap: .6rem; }
.logo img { height: 18px; width: auto; }
.logo img.logo-k { height: 30px; }
.produits { display: flex; border: 1px solid var(--trait); margin-left: .5rem; }
.produits a {
  display: block; padding: .5rem .9rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--texte-2); border-right: 1px solid var(--trait); white-space: nowrap;
}
.produits a:last-child { border-right: 0; }
.produits a:hover { color: var(--encre); }
.produits a[aria-current="true"] { background: var(--encre); color: var(--fond); }
.nav-principale { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.nav-principale a { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--encre); }
.nav-principale a:hover, .nav-principale a[aria-current="page"] { color: var(--or); }
.nav-principale .btn { color: var(--fond); padding: .7rem 1.2rem; min-height: 42px; }
.nav-principale .btn:hover { color: var(--encre); }
.sous-nav { border-top: 1px solid var(--trait); background: var(--ivoire); }
.sous-nav .wrap { display: flex; align-items: center; gap: 1.6rem; height: 44px; overflow-x: auto; scrollbar-width: none; }
.sous-nav .wrap::-webkit-scrollbar { display: none; }
.sous-nav .nom { font-family: var(--serif); font-size: 1.15rem; white-space: nowrap; }
.sous-nav a { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; color: var(--texte-2); white-space: nowrap; padding-block: .7rem; border-bottom: 1px solid transparent; }
.sous-nav a:hover { color: var(--encre); }
.sous-nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--or); }
.sous-nav .etiquette { margin-left: auto; }
.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--trait); width: 44px; height: 44px; cursor: pointer; }
.burger span { display: block; width: 18px; height: 1px; background: var(--encre); margin: 4px auto; }
.menu-mobile { display: none; }
@media (max-width: 1179px) {
  .nav-principale, .produits { display: none; }
  .burger { display: block; }
  .menu-mobile[data-ouvert="true"] { display: block; border-top: 1px solid var(--trait); padding: 1rem 0 1.5rem; }
  .menu-mobile p { margin: 1rem 0 .3rem; }
  .menu-mobile a { display: block; padding: .55rem 0; text-decoration: none; font-size: 1rem; }
  .menu-mobile .btn { display: flex; margin-top: 1rem; font-size: .8rem; }
  .sous-nav .etiquette { display: none; }
}

/* ---------- Étiquettes ---------- */
.etiquette { display: inline-block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; padding: .3rem .6rem; border: 1px solid var(--or); color: var(--or); white-space: nowrap; }
.etiquette-pleine { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.sombre .etiquette { border-color: var(--or-clair); color: var(--or-clair); }
.formule { display: inline-block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; padding: .15rem .45rem; border: 1px solid var(--trait); color: var(--texte-2); vertical-align: middle; white-space: nowrap; }
.formule.f-p { border-color: var(--or); color: var(--or); }
.formule.f-m { background: var(--encre); color: var(--fond); border-color: var(--encre); }

/* ---------- Sections ---------- */
.bloc { padding-block: clamp(3.5rem, 8vw, 6rem); }
.bloc + .bloc { border-top: 1px solid var(--trait); }
.ivoire { background: var(--ivoire); }
.sombre { background: var(--encre); color: var(--fond); }
.sombre .chapeau, .sombre .petit { color: rgba(247,244,238,.82); }
.sombre .surtitre { color: var(--or-clair); }
.entete-bloc { max-width: 44rem; margin-bottom: 2.75rem; }
.centre .entete-bloc, .entete-bloc.centre { margin-inline: auto; text-align: center; }

/* Héros */
.heros { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
.heros-fond { position: absolute; inset: 0; z-index: 0; }
.heros-fond img, .heros-fond video { width: 100%; height: 100%; object-fit: cover; }
.heros-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247,244,238,.97) 0%, rgba(247,244,238,.9) 45%, rgba(247,244,238,.72) 100%); }
.heros.sombre .heros-fond::after { background: linear-gradient(90deg, rgba(28,25,21,.95) 0%, rgba(28,25,21,.86) 50%, rgba(28,25,21,.6) 100%); }
.heros > .wrap { position: relative; z-index: 1; }
.heros-grille { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .heros-grille { grid-template-columns: 1.05fr 1fr; } }
.heros h1 { max-width: 16ch; }
body[data-page="accueil"] .heros h1 { max-width: 22ch; }
.public { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 1.4rem; color: var(--texte-2); }
.sombre .public { color: rgba(247,244,238,.75); }
.prix-pastille { display: inline-flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-top: 1.8rem; padding: .9rem 1.3rem; border: 1px solid var(--trait); background: rgba(247,244,238,.7); }
.sombre .prix-pastille { background: rgba(247,244,238,.06); border-color: rgba(247,244,238,.25); }
.prix-pastille .de { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.sombre .prix-pastille .de { color: var(--or-clair); }
.prix-pastille .montant { font-family: var(--serif); font-size: 2.3rem; line-height: 1; }
.prix-pastille .unite { font-size: .9rem; }
.capture { border: 1px solid var(--trait); background: var(--fond); box-shadow: 0 30px 60px -30px rgba(28,25,21,.35); }
.legende { margin-top: .9rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); text-align: center; }
.statut { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-top: 1.6rem; font-size: .92rem; }

/* Portes de l'accueil */
.portes { display: grid; gap: 0; border: 1px solid var(--trait); margin-top: 2.5rem; background: var(--fond); }
@media (min-width: 900px) { .portes { grid-template-columns: 1fr 1fr; } }
.porte { position: relative; display: flex; flex-direction: column; padding: clamp(1.6rem, 3.5vw, 2.6rem); min-height: 100%; }
.porte + .porte { border-top: 1px solid var(--trait); }
@media (min-width: 900px) { .porte + .porte { border-top: 0; border-left: 1px solid var(--trait); } }
.porte.sombre { border-color: var(--encre); }
.porte-image { margin: calc(-1 * clamp(1.6rem, 3.5vw, 2.6rem)); margin-bottom: 1.8rem; aspect-ratio: 16 / 7; overflow: hidden; }
.porte-image img { width: 100%; height: 100%; object-fit: cover; }
.porte h2 { font-size: clamp(2rem, 3.2vw, 2.5rem); }
.porte .qui { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--texte-2); margin: .9rem 0 1.1rem; }
.porte.sombre .qui { color: rgba(247,244,238,.72); }
.porte ul { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.porte li { padding: .55rem 0; border-top: 1px solid var(--trait); font-size: .98rem; }
.porte.sombre li { border-color: rgba(247,244,238,.18); }
.porte .bas { margin-top: auto; padding-top: 1.8rem; }
.porte .des { font-family: var(--serif); font-size: 1.5rem; }
.porte .des small { font-family: var(--sans); font-size: .85rem; }

/* Cartes en grille */
.cartes { display: grid; border: 1px solid var(--trait); background: var(--fond); }
.ivoire .cartes { background: var(--fond); }
.sombre .cartes { background: transparent; border-color: rgba(247,244,238,.2); }
@media (min-width: 640px) { .cartes.c2, .cartes.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cartes.c3 { grid-template-columns: repeat(3, 1fr); } .cartes.c4 { grid-template-columns: repeat(4, 1fr); } }
.carte { padding: 1.7rem; border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait); }
.sombre .carte { border-color: rgba(247,244,238,.2); }
.carte h3 { margin-bottom: .7rem; }
.carte p { color: var(--texte-2); font-size: .98rem; }
.sombre .carte p { color: rgba(247,244,238,.8); }
.carte .formule { margin-bottom: .9rem; }
.carte .lien-fleche { display: inline-block; margin-top: 1rem; }
a.carte { text-decoration: none; display: block; transition: background .2s; }
a.carte:hover { background: var(--ivoire); }

/* Listes simples à filets */
.colonnes { display: grid; gap: 2.2rem 3rem; }
@media (min-width: 768px) { .colonnes.c2 { grid-template-columns: 1fr 1fr; } .colonnes.c3 { grid-template-columns: repeat(3, 1fr); } }
.filet { border-top: 1px solid var(--trait); padding-top: 1.2rem; }
.sombre .filet { border-color: rgba(247,244,238,.22); }
.filet h3 { margin-bottom: .6rem; font-size: 1.45rem; }
.filet p { color: var(--texte-2); }
.sombre .filet p { color: rgba(247,244,238,.8); }
.pastilles { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.6rem 0 0; list-style: none; }
.pastilles li { padding: .45rem .9rem; border: 1px solid var(--trait); font-size: .85rem; background: var(--fond); }

/* Bande image */
.bande { position: relative; min-height: clamp(220px, 42vw, 460px); overflow: hidden; }
.bande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bande::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,25,21,0) 45%, rgba(28,25,21,.55) 100%); }
.bande p { z-index: 1; }
.bande p { position: absolute; left: 0; right: 0; bottom: 2rem; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.1rem); color: var(--fond); text-shadow: 0 2px 18px rgba(0,0,0,.35); margin: 0; padding-inline: 1rem; }

/* Chiffres */
.chiffres { display: grid; gap: 0; border: 1px solid var(--trait); }
@media (min-width: 768px) { .chiffres { grid-template-columns: 1fr 1fr; } }
.chiffre { padding: 2rem; }
.chiffre + .chiffre { border-top: 1px solid var(--trait); }
@media (min-width: 768px) { .chiffre + .chiffre { border-top: 0; border-left: 1px solid var(--trait); } }
.chiffre .gros { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; }
.chiffre .sous { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); margin: .6rem 0 1.2rem; }

/* Calendrier */
.jalons { display: grid; border: 1px solid var(--trait); }
@media (min-width: 768px) { .jalons { grid-template-columns: repeat(3, 1fr); } }
.jalon { padding: 1.6rem; border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait); }
.sombre .jalon, .sombre .jalons { border-color: rgba(247,244,238,.2); }
.jalon .quand { font-family: var(--serif); font-size: 1.7rem; }
.jalon .quoi { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); margin: .3rem 0 .8rem; }
.sombre .jalon .quoi { color: var(--or-clair); }
.jalon p { font-size: .96rem; color: var(--texte-2); }
.sombre .jalon p { color: rgba(247,244,238,.8); }

/* Questions fréquentes */
.faq { margin: 0; border-top: 1px solid var(--trait); }
.faq > div { border-bottom: 1px solid var(--trait); padding: 1.3rem 0; }
.faq dt { font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; }
.faq dd { margin: .55rem 0 0; color: var(--texte-2); }

/* Volets repliés */
details.volet { border: 1px solid var(--trait); background: var(--fond); }
details.volet + details.volet { border-top: 0; }
details.volet summary { cursor: pointer; list-style: none; padding: 1.1rem 1.4rem; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); font-weight: 500; }
details.volet summary::-webkit-details-marker { display: none; }
details.volet summary::after { content: "+"; float: right; font-size: 1.1rem; line-height: 1; }
details.volet[open] summary::after { content: "–"; }
details.volet .contenu { padding: 0 1.4rem 1.4rem; }
.table-simple { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table-simple th, .table-simple td { text-align: left; padding: .75rem .6rem; border-top: 1px solid var(--trait); vertical-align: top; }
.table-simple thead th { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); font-weight: 500; border-top: 0; }
.table-simple td:first-child { font-weight: 500; }
.defile { overflow-x: auto; }

/* ---------- Tarifs ---------- */
.calc-reglage { max-width: 46rem; margin: 0 auto; border: 1px solid var(--trait); background: var(--fond); padding: 1.5rem; }
.calc-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.calc-nombre { font-family: var(--serif); font-size: 1.6rem; }
input[type="range"].curseur { width: 100%; margin: 1.2rem 0 1.4rem; accent-color: var(--encre); height: 28px; }
.bascule { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--trait); }
.bascule button { min-height: 48px; padding: .7rem .6rem; border: 0; background: transparent; font-family: var(--sans); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); cursor: pointer; }
.bascule button + button { border-left: 1px solid var(--trait); }
.bascule button[aria-pressed="true"] { background: var(--encre); color: var(--fond); }
.calc-note { font-size: .86rem; color: var(--texte-2); margin-top: .9rem; }
.offres { display: grid; border: 1px solid var(--trait); margin-top: 1.5rem; background: var(--fond); }
@media (min-width: 900px) { .offres { grid-template-columns: repeat(3, 1fr); } }
.offre { display: flex; flex-direction: column; padding: 1.8rem 1.6rem; border-bottom: 1px solid var(--trait); }
@media (min-width: 900px) { .offre { border-bottom: 0; border-right: 1px solid var(--trait); } .offre:last-child { border-right: 0; } }
.offre.reco { background: var(--ivoire); }
.offre-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; min-height: 1.6rem; }
.offre h3 { font-size: 1.9rem; }
.offre .devise { color: var(--texte-2); font-size: .95rem; margin-top: .2rem; }
.offre .prix { margin-top: 1.4rem; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.offre .prix .valeur { font-family: var(--serif); font-size: 3.1rem; line-height: 1; }
.offre .prix .ht { font-size: .9rem; }
.offre .detail-prix { font-size: .85rem; color: var(--texte-2); min-height: 2.6em; margin-top: .4rem; }
.offre ul { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.offre li { padding: .7rem 0; border-top: 1px solid var(--trait); font-size: .95rem; color: var(--texte-2); }
.offre li strong { color: var(--encre); }
.offre .volumes { font-size: .82rem; color: var(--texte-2); margin-top: 1rem; }
.offre .dispo { margin-top: auto; padding-top: 1.2rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--or); }
.mention-invites { max-width: 56rem; margin: 1.6rem auto 0; text-align: center; font-size: .95rem; color: var(--texte-2); }
.exemples { display: grid; gap: 0; border: 1px solid var(--trait); }
@media (min-width: 768px) { .exemples { grid-template-columns: repeat(3, 1fr); } }
.exemple { padding: 1.4rem; border-bottom: 1px solid var(--trait); }
@media (min-width: 768px) { .exemple { border-bottom: 0; border-right: 1px solid var(--trait); } .exemple:last-child { border-right: 0; } }
.exemple .montant { font-family: var(--serif); font-size: 2rem; }
.bandeau-info { border: 1px solid var(--or); padding: 1.1rem 1.4rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--fond); }

/* Tableau comparatif */
.comparatif { width: 100%; border-collapse: collapse; min-width: 640px; }
.comparatif th, .comparatif td { padding: .8rem .7rem; border-top: 1px solid var(--trait); text-align: left; font-size: .95rem; vertical-align: top; }
.comparatif thead th { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; border-top: 0; text-align: center; }
.comparatif td.o { text-align: center; width: 15%; }
.comparatif .groupe td { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); padding-top: 1.5rem; font-weight: 500; }
.coche::before { content: "●"; color: var(--encre); }
.vide::before { content: "—"; color: var(--trait); }

/* Liste de fonctions */
.fonctions { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--trait); }
.fonctions li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; padding: .95rem 0; border-bottom: 1px solid var(--trait); }
.fonctions li p { margin: .25rem 0 0; color: var(--texte-2); font-size: .94rem; }
.domaine { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .domaine { grid-template-columns: 1fr 2fr; gap: 3rem; } }
.domaine + .domaine { margin-top: 3.5rem; }
.domaine h3 { font-size: 1.8rem; }
.domaine .intro { color: var(--texte-2); margin-top: .7rem; }

/* Formulaires */
.formulaire { display: grid; gap: 1.1rem; max-width: 44rem; }
@media (min-width: 640px) { .formulaire .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.formulaire label { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); margin-bottom: .4rem; }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem; border: 1px solid var(--trait); background: var(--fond);
  font-family: var(--sans); font-size: 1rem; color: var(--encre); border-radius: 0;
}
.formulaire textarea { min-height: 120px; resize: vertical; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--encre); }
.formulaire .cache { position: absolute; left: -9999px; }
.formulaire .choix { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.formulaire .choix label { display: inline-flex; gap: .45rem; align-items: center; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--encre); margin: 0; }
.formulaire .choix input { width: auto; min-height: 0; }
.message-envoi { padding: 1rem 1.2rem; border: 1px solid var(--or); display: none; }
.message-envoi[data-etat="ok"], .message-envoi[data-etat="erreur"] { display: block; }
.agenda { border: 1px solid var(--trait); background: var(--fond); }
.agenda iframe { width: 100%; height: 700px; border: 0; display: block; }

/* Texte courant (pages juridiques et ressources) */
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.9rem; margin: 2.4rem 0 .8rem; }
.prose h3 { margin: 1.8rem 0 .6rem; }
.prose p, .prose li { color: var(--texte-2); }
.prose a { color: var(--encre); }
.fil-ariane { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); margin-bottom: 1.6rem; }
.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { color: var(--or); }
.fil-ariane span { margin-inline: .5rem; color: var(--trait); }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: var(--fond); padding-block: 4rem 2.2rem; }
.pied-grille { display: grid; gap: 2.4rem; }
@media (min-width: 768px) { .pied-grille { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.pied img { height: 20px; width: auto; }
.pied .devise { margin-top: 1rem; color: rgba(247,244,238,.72); font-size: .95rem; max-width: 28ch; }
.pied h2 { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-clair); font-weight: 500; margin-bottom: 1rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin: .45rem 0; }
.pied a { text-decoration: none; color: rgba(247,244,238,.85); font-size: .94rem; }
.pied a:hover { color: var(--fond); }
.pied-bas { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(247,244,238,.18); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem; color: rgba(247,244,238,.6); }

/* ---------- Kablann Pro : touche sombre ---------- */
body.pro .sous-nav { background: var(--encre); border-top-color: var(--encre); }
body.pro .sous-nav .nom, body.pro .sous-nav a { color: rgba(247,244,238,.8); }
body.pro .sous-nav a:hover, body.pro .sous-nav a[aria-current="page"] { color: var(--fond); }
body.pro .sous-nav .etiquette { border-color: var(--or-clair); color: var(--or-clair); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
.offre .prix .valeur.devis { font-size: 2.1rem; }

/* ---------- En-têtes par espace ---------- */
.bande-espace { background: var(--ivoire); border-bottom: 1px solid var(--trait); font-size: .78rem; }
.bande-espace .wrap { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 34px; }
.bande-espace span { color: var(--texte-2); }
.bande-espace a { color: var(--or); text-decoration: none; font-weight: 500; white-space: nowrap; }
.bande-espace a:hover { color: var(--encre); }
.espace-pro .bande-espace { background: var(--encre); border-bottom-color: var(--encre); }
.espace-pro .bande-espace span { color: rgba(247,244,238,.75); }
.espace-pro .bande-espace a { color: var(--or-clair); }
.espace-pro .bande-espace a:hover { color: var(--fond); }
.badge-espace { margin-left: .2rem; padding: .2rem .5rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--encre); color: var(--encre); }
.espace-pro .badge-espace { background: var(--encre); color: var(--fond); }
@media (max-width: 767px) { .bande-espace span { display: none; } .bande-espace .wrap { justify-content: flex-end; } }
.entete-accueil { position: absolute; left: 0; right: 0; background: transparent; border-bottom: 0; backdrop-filter: none; }

/* ---------- Accueil : choix de l'espace ---------- */
.choix-espace { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 7rem 0 4rem; overflow: hidden; }
.choix-fond { position: absolute; inset: 0; }
.choix-fond img { width: 100%; height: 100%; object-fit: cover; }
.choix-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,244,238,.93), rgba(247,244,238,.86)); }
.choix-espace > .wrap { position: relative; z-index: 1; text-align: center; }
.choix-espace h1 { margin-inline: auto; }
.choix-espace .chapeau { margin-inline: auto; font-size: 1.25rem; }
.reprise { margin-top: 1.4rem; }
.reprise a { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--or); padding-bottom: .15rem; }
.profils { display: grid; gap: 0; margin: 2.6rem auto 0; max-width: 980px; border: 1px solid var(--trait); text-align: left; background: var(--fond); }
@media (min-width: 860px) { .profils { grid-template-columns: 1fr 1fr; } }
.profils-groupe { padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; }
.profils-groupe.sombre { border-top: 1px solid var(--encre); }
@media (min-width: 860px) { .profils-groupe.sombre { border-top: 0; } }
.profils-titre { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.1; margin-bottom: 1.3rem; }
.profils-boutons { display: grid; gap: .6rem; }
.profil { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: .9rem 1.1rem; border: 1px solid var(--trait); text-decoration: none; font-size: 1.02rem; transition: background .2s, border-color .2s, color .2s; }
.profil::after { content: "→"; color: var(--or); transition: transform .2s; }
.profil:hover { border-color: var(--encre); background: var(--ivoire); }
.profil:hover::after { transform: translateX(4px); }
.sombre .profil { border-color: rgba(247,244,238,.25); color: var(--fond); }
.sombre .profil::after { color: var(--or-clair); }
.sombre .profil:hover { background: rgba(247,244,238,.08); border-color: var(--fond); }
.profils-mene { margin-top: auto; padding-top: 1.3rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.sombre .profils-mene { color: var(--or-clair); }
.choix-note { max-width: 40rem; margin: 1.8rem auto 0; }

/* ---------- Illustrations ---------- */
.illus { margin: 0; }
.illus svg { width: 100%; height: auto; display: block; }
.illus figcaption { margin-top: .7rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.sombre .illus figcaption { color: rgba(247,244,238,.6); }
.duo { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 4rem; } .duo.inverse > :first-child { order: 2; } }
.duo + .duo { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.duo h3 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 1rem; }
.duo p { color: var(--texte-2); }
.sombre .duo p { color: rgba(247,244,238,.8); }
.duo .formule { margin-bottom: 1rem; }
.logo { text-decoration: none; }

/* Accueil v73 : lisible en une seconde */
.choix-espace h1 { max-width: none; font-size: clamp(2.6rem, 6vw, 4.6rem); }
.choix-espace .chapeau { max-width: 40rem; }
.profils-qui { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-bottom: .35rem; font-weight: 500; }
.sombre .profils-qui { color: var(--or-clair); }
.profils-groupe .profils-titre { margin-bottom: .35rem; }
.profils-sous { color: var(--texte-2); margin-bottom: 1.3rem; }
.sombre .profils-sous { color: rgba(247,244,238,.78); }
.profils-mene { text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--texte-2); }
.profils-mene strong { color: var(--encre); }
.sombre .profils-mene { color: rgba(247,244,238,.78); }
.sombre .profils-mene strong { color: var(--fond); }
.atouts { list-style: none; padding: 0; margin: 1.8rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.atouts li::before { content: "✓ "; color: var(--or); }
.entete-accueil .nav-accueil { margin-left: auto; display: flex; gap: 1.6rem; }
.entete-accueil .nav-accueil a { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.entete-accueil .nav-accueil a:hover { color: var(--or); }
@media (max-width: 640px) { .entete-accueil .nav-accueil { display: none; } }

/* v74 : bascule d'espace toujours visible */
.bascule-espace { display: flex; border: 1px solid var(--encre); margin-left: .4rem; flex: none; }
.bascule-espace a { padding: .5rem .85rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--encre); white-space: nowrap; font-weight: 500; }
.bascule-espace a + a { border-left: 1px solid var(--encre); }
.bascule-espace a:hover { background: var(--ivoire); }
.bascule-espace a[aria-current="true"] { background: var(--encre); color: var(--fond); }
@media (max-width: 1023px) {
  .entete-ligne { gap: .8rem; }
  .logo-mot { display: none; }
  .bascule-espace a { padding: .5rem .6rem; font-size: .66rem; letter-spacing: .08em; }
  .cache-mobile { display: none; }
}
.nav-principale .btn { white-space: nowrap; }
@media (max-width: 1240px) { .nav-principale { gap: 1.1rem; } }
img { height: auto; }

/* Bloc « Tout est inclus » (v76) */
.inclus { border: 1px solid var(--or); background: var(--fond); padding: 1.4rem 1.6rem; margin-top: 1.4rem; }
.inclus h3 { margin: 0 0 .9rem; font-size: 1.45rem; }
.inclus ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .55rem 1.6rem; }
.inclus li { position: relative; padding-left: 1.5rem; font-size: .95rem; line-height: 1.45; min-width: 0; }
.inclus li::before { content: ""; position: absolute; left: .1rem; top: .38em; width: .7rem; height: .36rem; border-left: 2px solid var(--or); border-bottom: 2px solid var(--or); transform: rotate(-45deg); }
.inclus-signature { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--trait); font-size: .92rem; color: var(--texte-2); }

/* Captures plus grandes (v76) */
@media (min-width: 1024px) {
  .heros-grille { grid-template-columns: .82fr 1.4fr; gap: 3.5rem; }
  .heros-grille > figure { margin-right: calc(-1 * clamp(0px, (100vw - var(--largeur)) / 2, 7rem)) !important; }
}
@media (min-width: 900px) {
  .duo.large-g { grid-template-columns: 1.6fr 1fr; gap: 3.5rem; }  /* capture à gauche */
  .duo.large-d { grid-template-columns: 1fr 1.6fr; gap: 3.5rem; }  /* capture à droite */
}

/* Tableau des signatures dans le bloc « Tout est inclus » (v78) */
.inclus-signature p { margin: 0; }
.inclus-signature .table-simple { margin: .9rem 0; }
.inclus-signature .table-simple td:not(:first-child) { white-space: nowrap; }

/* ---------- v82 : audit du 2 octobre 2026 ---------- */
.lecteur-ecran { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main [id] { scroll-margin-top: calc(var(--entete) + 1.2rem); }
.agenda-attente { display: grid; gap: 1.1rem; justify-items: center; text-align: center; padding: clamp(2.2rem, 6vw, 4rem) 1.4rem; }
.agenda-attente p { margin: 0; max-width: 34rem; }
/* Sommaire des longues pages */
.sommaire { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 clamp(2.2rem, 5vw, 3.5rem); }
.sommaire a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .95rem; border: 1px solid var(--trait); background: var(--fond); color: var(--texte-2); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.sommaire a:hover, .sommaire a:focus-visible { border-color: var(--or); color: var(--encre); }
.sombre .sommaire a { background: transparent; border-color: rgba(247,244,238,.3); color: rgba(247,244,238,.85); }
/* Questions fréquentes en accordéon */
.faq-repli { border-top: 1px solid var(--trait); }
.faq-repli details { border-bottom: 1px solid var(--trait); }
.faq-repli summary { cursor: pointer; list-style: none; position: relative; padding: 1.2rem 2.6rem 1.2rem 0; font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; }
.faq-repli summary::-webkit-details-marker { display: none; }
.faq-repli summary::after { content: "+"; position: absolute; right: .3rem; top: 1.15rem; color: var(--or); font-family: var(--sans); font-size: 1.3rem; line-height: 1; }
.faq-repli details[open] summary::after { content: "–"; }
.faq-repli details > p { margin: 0 0 1.3rem; color: var(--texte-2); }
/* Replis : ouverts sur grand écran, à déplier sur téléphone */
details.repli > summary { list-style: none; }
details.repli > summary::-webkit-details-marker { display: none; }
@media (min-width: 768px) {
  details.repli > summary { pointer-events: none; cursor: default; }
  details.repli > summary.repli-bouton { display: none; }
}
@media (max-width: 767px) {
  details.repli > summary { cursor: pointer; position: relative; padding-right: 2.2rem; }
  details.repli > summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); color: var(--or); font-family: var(--sans); font-size: 1.3rem; line-height: 1; }
  details.repli[open] > summary::after { content: "–"; }
  details.repli > summary.repli-bouton { margin-top: 1.1rem; padding: .85rem 2.4rem .85rem 1rem; border: 1px solid var(--trait); color: var(--or); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; min-height: 44px; }
  details.repli > summary.repli-bouton::after { right: 1rem; }
  details.filet.repli > summary h3 { margin-bottom: 0; }
  details.filet.repli[open] > summary h3 { margin-bottom: .6rem; }
  details.filet.repli { padding-bottom: 1.2rem; }
  .colonnes:has(> details.filet.repli) { gap: 0; }
  .offre details.repli ul { margin-top: .6rem; }
}
.bandeau-info .boutons { margin: 0; }
/* Très petits écrans : le tableau des signatures tient dans la largeur */
@media (max-width: 400px) {
  .inclus { padding: 1.1rem 1rem; }
  .inclus-signature .table-simple th, .inclus-signature .table-simple td { padding: .6rem .3rem; font-size: .86rem; }
  .inclus-signature .table-simple thead th { font-size: .6rem; letter-spacing: .04em; }
  .inclus-signature .table-simple { table-layout: fixed; }
  .inclus-signature .table-simple th:first-child { width: 42%; }
}
@media (max-width: 767px) {
  details.filet.repli > summary { min-height: 44px; display: flex; align-items: center; }
}
/* Tableau comparatif des formules : les trois colonnes tiennent dans l'écran d'un téléphone */
@media (max-width: 640px) {
  .comparatif:not(:has(thead th:nth-child(5))) { min-width: 0; table-layout: fixed; }
  .comparatif:not(:has(thead th:nth-child(5))) th, .comparatif:not(:has(thead th:nth-child(5))) td { padding: .7rem .25rem; font-size: .84rem; }
  .comparatif:not(:has(thead th:nth-child(5))) thead th { font-size: 1rem; }
  .comparatif:not(:has(thead th:nth-child(5))) thead th:first-child { width: 43%; }
  .comparatif:not(:has(thead th:nth-child(5))) td.o { width: 19%; font-size: .72rem; overflow-wrap: anywhere; }
}

/* ---------- v85 — Tarifs sur téléphone : les trois formules tiennent sur un écran ---------- */
@media (max-width: 767px) {
  body[data-page="tarifs"] main > .bloc:first-child { padding-top: 1.1rem; }
  body[data-page="tarifs"] .entete-bloc { margin-bottom: 1.2rem; }
  body[data-page="tarifs"] .entete-bloc .chapeau { display: none; }
  body[data-page="tarifs"] .atouts { margin-top: .9rem; gap: .25rem 1rem; font-size: .68rem; }
  .calc-reglage { padding: 1rem 1.1rem; }
  input[type="range"].curseur { margin: .5rem 0 .8rem; height: 36px; }
  .bascule button { min-height: 44px; padding: .4rem .5rem; font-size: .68rem; }
  .calc-note { font-size: .8rem; margin-top: .6rem; }
  .offres { margin-top: 1rem; }
  .offre { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; align-items: center; padding: .9rem 1.1rem; }
  .offre-tete { grid-column: 1; grid-row: 1; min-height: 0; justify-content: flex-start; align-items: center; gap: .6rem; }
  .offre h3 { font-size: 1.5rem; }
  .offre .etiquette { font-size: .58rem; padding: .2rem .4rem; }
  .offre .prix { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; flex-wrap: nowrap; justify-content: flex-end; align-self: center; }
  .offre .prix .valeur { font-size: 2.3rem; }
  .offre .prix .valeur.devis { font-size: 1.3rem; }
  .offre .prix .ht { font-size: .74rem; white-space: nowrap; }
  .offre .devise { grid-column: 1; grid-row: 2; margin-top: .1rem; font-size: .88rem; }
  .offre .detail-prix, .offre details.repli, .offre .volumes, .offre .dispo { grid-column: 1 / -1; }
  .offre .detail-prix { min-height: 0; margin-top: .5rem; }
  .offre:has(details.repli:not([open])) .detail-prix,
  .offre:has(details.repli:not([open])) .volumes,
  .offre:has(details.repli:not([open])) .dispo { display: none; }
  .offre details.repli > summary.repli-bouton { margin-top: .65rem; padding: .55rem 2.2rem .55rem .8rem; }
  .offre .volumes { margin-top: .7rem; }
  .offre .dispo { margin-top: 0; padding-top: .6rem; }
  .mention-invites { font-size: .92rem; }
  .bascule-espace a { min-height: 44px; display: inline-flex; align-items: center; }
}
.defile:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.fil-ariane span { color: var(--or); }
.sombre .fil-ariane, .sombre .fil-ariane a { color: rgba(247,244,238,.82); }
.sombre .fil-ariane span { color: var(--or-clair); }
.logo { min-height: 44px; }
form input[type="checkbox"], form input[type="radio"] { width: 22px; height: 22px; flex: none; accent-color: var(--encre); }
@media (max-width: 359px) {
  .offre { padding: .85rem .8rem; column-gap: .5rem; }
  .offre h3 { font-size: 1.3rem; }
  .offre .prix .valeur { font-size: 1.9rem; }
  .offre .prix .ht { font-size: .68rem; }
  .offre .etiquette { display: none; }
  .offre.reco h3::after { content: " ★"; font-size: .9rem; color: var(--or); }
}

/* ---------- v86 — Bouton d'action toujours accessible (téléphone et tablette) ---------- */
.barre-cta { display: none; }
@media (max-width: 1179px) {
  .barre-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom, 0px)); background: rgba(247,244,238,.97); backdrop-filter: blur(6px); border-top: 1px solid var(--trait); transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .barre-cta.visible { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .barre-cta .btn { display: flex; width: 100%; max-width: 30rem; margin: 0 auto; justify-content: center; align-items: center; min-height: 48px; }
  body:has(.barre-cta) .pied { padding-bottom: calc(2.2rem + 70px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .barre-cta, .barre-cta.visible { transition: none; } }
@media print { .barre-cta { display: none; } }
/* v86 — Agenda : hauteur de secours plus grande sur téléphone (la hauteur réelle vient de Calendly) */
@media (max-width: 767px) { .agenda iframe { height: 1180px; } }