/* =========================================================================
   Kwezi · site vitrine (kwezi.app). Feuille sur mesure, qui remplace celle du
   starter. Règles du design system Kwezi : crème et encre, corail rare (un seul
   élément dominant par écran, jamais en texte sur crème), filets plutôt
   qu'ombres, Newsreader pour les titres seulement, Instrument Sans ailleurs.
   Les variables --c-* / --f-head / --r servent le socle des modules (blog),
   ajouté après cette feuille par gen-site.js.
   ========================================================================= */

:root {
  --kwezi-ink: #141414;
  --kwezi-cream: #F9F7E5;
  --kwezi-coral: #F0654A;

  --surface: var(--kwezi-cream);
  --surface-raised: #FDFCF3;
  --ink: var(--kwezi-ink);
  --ink-muted: #5C5A52;
  --hairline: rgba(20, 20, 20, .14);
  --accent: var(--kwezi-coral);
  --on-accent: var(--kwezi-ink);
  --focus: var(--kwezi-ink);
  /* Section inversée (encre sur crème ↔ crème sur encre). */
  --inv-surface: var(--kwezi-ink);
  --inv-ink: var(--kwezi-cream);
  --inv-muted: #A8A597;
  --inv-hairline: rgba(249, 247, 229, .16);

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px;
  --radius-sm: 6px; --radius-md: 12px;
  --maxw: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 9vw, 120px);

  /* Socle des modules (starter/modules.css). */
  --c-primary: var(--ink);
  --c-text: var(--ink);
  --c-muted: var(--ink-muted);
  --c-accent: var(--accent);
  --c-accent-ink: var(--ink);
  --c-accent-soft: rgba(240, 101, 74, .14);
  --f-head: var(--display);
  --r: var(--radius-md);

  color-scheme: light;
}

/* Mode sombre : celui du système, sauf choix contraire du visiteur (bouton de l'en-tête,
   attribut data-theme posé avant le rendu par _partials/favicons.html). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--kwezi-ink);
    --surface-raised: #1F1F1E;
    --ink: var(--kwezi-cream);
    --ink-muted: #A8A597;
    --hairline: rgba(249, 247, 229, .16);
    --focus: var(--kwezi-coral);
    --inv-surface: #1F1F1E;
    --inv-ink: var(--kwezi-cream);
    --inv-muted: #A8A597;
    --inv-hairline: rgba(249, 247, 229, .16);
    --c-accent-soft: rgba(240, 101, 74, .2);
    color-scheme: dark;
  }
}
:root, :root[data-theme] {   /* Sombre seulement (décision de Maxime) : quel que soit l'attribut ou le système, y compris dans l'éditeur visuel où les scripts ne posent pas data-theme. */
    --surface: var(--kwezi-ink);
    --surface-raised: #1F1F1E;
    --ink: var(--kwezi-cream);
    --ink-muted: #A8A597;
    --hairline: rgba(249, 247, 229, .16);
    --focus: var(--kwezi-coral);
    --inv-surface: #1F1F1E;
    --inv-ink: var(--kwezi-cream);
    --inv-muted: #A8A597;
    --inv-hairline: rgba(249, 247, 229, .16);
    --c-accent-soft: rgba(240, 101, 74, .2);
    color-scheme: dark;
  }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--space-4); text-wrap: balance; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 22px; line-height: 1.3; }
p { margin: 0 0 var(--space-4); }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
strong { font-weight: 600; }

.skip-link { position: absolute; left: var(--space-4); top: -60px; z-index: 100; padding: var(--space-2) var(--space-4);
  background: var(--ink); color: var(--surface); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--space-4); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.etroit { max-width: 780px; }
.centre { text-align: center; }
.section { padding: var(--section-y) 0; border-top: 1px solid var(--hairline); }
.section-serre { padding-top: 0; border-top: 0; }
.section-relief { background: var(--surface-raised); }
.section-encre { background: var(--inv-surface); color: var(--inv-ink); border-top-color: transparent;
  --ink-muted: var(--inv-muted); --hairline: var(--inv-hairline); --focus: var(--kwezi-coral); }
.section-tete { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-tete-ligne { max-width: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.section-intro { font-size: 19px; line-height: 1.55; color: var(--ink-muted); max-width: 60ch; }
.eyebrow { font: 600 13px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-6); }
.display { font-size: clamp(40px, 7vw, 76px); line-height: 1.04; letter-spacing: -.02em; max-width: 14ch; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font: 600 15px/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: #F37A62; }
.btn-ligne { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ligne:hover { background: var(--ink); color: var(--surface); }
.btn-petit { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.lien-fleche { font-weight: 600; text-decoration: none; }
.lien-fleche::after { content: "→"; margin-left: .45em; }
.lien-fleche:hover { text-decoration: underline; }

/* ---------- en-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 72px; }
.marque img { width: 112px; height: auto; }
.nav-menu { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav-menu a:not(.btn) { font-size: 15px; font-weight: 500; text-decoration: none; }
.nav-menu a:not(.btn):hover { text-decoration: underline; }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; color: var(--ink); }
.nav-toggle span { display: block; height: 2px; background: currentColor; margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav-menu { position: fixed; inset: 72px 0 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-6) var(--gutter); background: var(--surface); overflow-y: auto;
    visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s; }
  .nav-menu li { border-bottom: 1px solid var(--hairline); }
  .nav-menu a:not(.btn) { display: block; padding: 16px 0; font-size: 20px; font-family: var(--display); }
  .nav-menu li:last-child { border: 0; padding-top: var(--space-6); }
  .nav-menu .btn { width: 100%; }
  .nav.open .nav-menu { visibility: visible; opacity: 1; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- accueil ---------- */
.hero { padding: clamp(72px, 12vw, 160px) 0 clamp(64px, 9vw, 120px); }
.hero-court { padding-bottom: clamp(40px, 6vw, 72px); }
.hero-intro { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; color: var(--ink-muted); max-width: 46ch; margin: var(--space-6) 0 clamp(32px, 4vw, 40px); }

.raison { padding: clamp(56px, 8vw, 96px) 0; }
.raison-texte { font: 500 clamp(26px, 3.6vw, 44px)/1.2 var(--display); letter-spacing: -.01em; max-width: 26ch; margin: 0; text-wrap: balance; }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.trois-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (max-width: 820px) { .deux-colonnes { grid-template-columns: 1fr; } }

.liste-filets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.liste-filets li { padding: 18px 0 18px 32px; border-bottom: 1px solid var(--hairline); position: relative; font-size: 18px; line-height: 1.45; }
.liste-filets li::before { content: ""; position: absolute; left: 0; top: 27px; width: 16px; height: 1px; background: currentColor; }

.manifeste-para { font-size: 19px; line-height: 1.65; }
/* Accueil › « Conçu dans un coworking » : photo du fondateur et de son chien en fond, voile sombre pour la lecture
   (plus dense à gauche, sous le texte ; le chien reste visible à droite). */
.manifeste-photo { position: relative; isolation: isolate; overflow: hidden; color: var(--kwezi-cream); border-top: 0;
  background: #141414 url("../images/a-propos-entete.jpg") center 40% / cover no-repeat;
  background: #141414 image-set(url("../images/a-propos-entete.webp") type("image/webp"), url("../images/a-propos-entete.jpg") type("image/jpeg")) center 40% / cover no-repeat; }
.manifeste-photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20,20,20,.92) 0%, rgba(20,20,20,.86) 70%, rgba(20,20,20,.55) 100%); }
.manifeste-photo .manifeste-para, .manifeste-photo h2, .manifeste-photo .lien-fleche { color: var(--kwezi-cream); }
.manifeste-photo .container { padding-block: clamp(24px, 5vw, 64px); }
@media (max-width: 820px) {
  .manifeste-photo { background-image: image-set(url("../images/a-propos-entete-m.webp") type("image/webp"), url("../images/a-propos-entete-m.jpg") type("image/jpeg")); background-position: 70% center; }
  .manifeste-photo::before { background: rgba(20,20,20,.86); }
}
.croyances-titre { margin-top: clamp(32px, 4vw, 48px); font-size: 24px; }
.croyances { list-style: none; margin: 0; padding: 0; }
.croyances li { padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 18px; line-height: 1.5; }
.croyances li:first-child { border-top: 1px solid var(--hairline); }
.nom { margin-top: clamp(40px, 5vw, 64px); padding: var(--space-6); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); }
.nom-mot { font: italic 600 28px/1.2 var(--display); margin-bottom: var(--space-2); }
.nom p:last-child { margin: 0; color: var(--ink-muted); }

.articles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.article-carte a { display: block; height: 100%; padding: var(--space-6); border: 1px solid var(--hairline); border-radius: var(--radius-md); text-decoration: none; background: var(--surface-raised); transition: border-color .15s ease; }
.article-carte a:hover { border-color: var(--ink); }
.article-carte .article-visuel { display: block; aspect-ratio: 16 / 10; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4); overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--hairline); }
.article-carte .article-visuel picture { display: block; height: 100%; }
.article-carte .article-visuel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.article-carte a:hover .article-visuel img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .article-carte .article-visuel img { transition: none; } }
@media (min-width: 561px) and (max-width: 900px) {
  .article-carte a { display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: var(--space-6); align-content: center; }
  .article-carte .article-visuel { grid-row: 1 / span 2; margin: calc(-1 * var(--space-6)) 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); border-radius: var(--radius-md) 0 0 var(--radius-md); aspect-ratio: auto; min-height: 160px; }
  .article-carte time { align-self: end; }
}
.article-carte time { display: block; font-size: 14px; color: var(--ink-muted); margin-bottom: var(--space-2); }
.article-titre { font: 600 21px/1.3 var(--display); }
@media (max-width: 900px) { .articles { grid-template-columns: 1fr; } }

.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:first-child { border-top: 1px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-size: 19px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 28px/1 var(--sans); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 20px; margin: 0; color: var(--ink-muted); max-width: 65ch; }

/* ---------- formulaire ---------- */
.formulaire { display: grid; gap: var(--space-4); }
.formulaire label { display: grid; gap: 6px; font: 600 13px/16px var(--sans); letter-spacing: .02em; }
.formulaire input, .formulaire textarea { font: 400 16px/1.5 var(--sans); color: var(--ink); background: transparent;
  border: 1px solid var(--ink-muted); border-radius: var(--radius-sm); padding: 12px 14px; width: 100%; }
.formulaire textarea { resize: vertical; min-height: 128px; }
.formulaire input:focus-visible, .formulaire textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.formulaire .btn { justify-self: start; }
.formulaire select { font: 400 16px/1.5 var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--ink-muted); border-radius: var(--radius-sm); padding: 12px 14px; width: 100%; }
.formulaire select option { color: #141414; }
/* Liste déroulante stylisée (js/kwezi.js) : le <select> natif reste dans le formulaire, masqué. */
.choix { position: relative; }
.choix .choix-natif { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.choix-bouton { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  font: 400 16px/1.5 var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--ink-muted); border-radius: var(--radius-sm); padding: 12px 14px; }
.choix-bouton::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; flex: none; }
.choix.ouvert .choix-bouton::after { transform: translateY(2px) rotate(-135deg); }
.choix-bouton:focus-visible, .choix.ouvert .choix-bouton { outline: none; border-color: var(--kwezi-coral); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.choix-liste { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); max-height: 280px; overflow-y: auto; }
.choix-liste li { padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); }
.choix-liste li.est-actif, .choix-liste li:hover { background: var(--c-accent-soft); }
.choix-liste li[aria-selected="true"] { font-weight: 600; color: var(--kwezi-coral); }
.formulaire [hidden] { display: none !important; }
.choix-mode { display: inline-flex; justify-self: start; padding: 4px; gap: 4px; border: 1px solid var(--hairline); border-radius: 999px; }
.choix-mode label { display: block; position: relative; cursor: pointer; }
.choix-mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.choix-mode span { display: block; padding: 8px 16px; border-radius: 999px; font: 600 14px/18px var(--sans); letter-spacing: 0; transition: background-color .15s ease, color .15s ease; }
.choix-mode input:checked + span { background: var(--accent); color: var(--on-accent); }
.choix-mode input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.discret-form { margin: 0; font-size: 14px; color: var(--accent); }
#contact { position: relative; }
.ancre-contact { position: absolute; top: 0; scroll-margin-top: 72px; }
.autres-voies { margin: var(--space-4) 0 0; font-size: 15px; opacity: .85; }
.autres-voies a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { white-space: pre-line; font-size: 15px; min-height: 0; }
.form-status:empty { display: none; }
.form-status.success, .form-status.ok { color: var(--ink); }
.form-status.error, .form-status.erreur { color: var(--ink); font-weight: 600; }

/* ---------- tarifs ---------- */
.offres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); align-items: stretch; }
.offre { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-raised); position: relative; }
.offre-en-avant { border: 2px solid var(--ink); }
.offre-badge { position: absolute; top: -13px; left: clamp(24px, 3vw, 40px); margin: 0; padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent); font: 600 12px/16px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.offre h2 { font-size: 30px; margin-bottom: var(--space-2); }
.offre-accroche { color: var(--ink-muted); }
.offre-prix { margin: var(--space-4) 0 var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--hairline); }
.offre-prix .montant { font: 600 48px/1 var(--display); letter-spacing: -.02em; }
.offre-prix .unite { display: block; margin-top: var(--space-2); color: var(--ink-muted); font-size: 15px; }
.offre-points { list-style: none; margin: 0 0 var(--space-6); padding: 0; flex: 1; }
.offre-points li { padding: 8px 0 8px 28px; position: relative; line-height: 1.45; }
.offre-points li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.offre .btn { align-self: stretch; }
/* Formule unique : une carte centrée, points forts sur deux colonnes quand la place le permet. */
.offres:has(> .offre:only-child) { max-width: 760px; margin-inline: auto; }
@media (min-width: 720px) { .offre:only-child .offre-points { columns: 2; column-gap: var(--space-6); } .offre:only-child .offre-points li { break-inside: avoid; } .offre:only-child .btn { align-self: flex-start; } }
.bloc-tarif h2 { font-size: 26px; }
.tarif-sous-titre { font-size: 18px; margin: var(--space-6) 0 var(--space-2); }
.tarif-mention { display: inline-block; margin: 0 0 var(--space-4); padding: 4px 10px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font: 600 13px/18px var(--sans); }
.tarif-engagement { max-width: 760px; margin: var(--space-6) auto 0; text-align: center; color: var(--ink-muted); }
.options { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.options li { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.options li p:last-child { margin: 0; color: var(--ink-muted); }
.option-tete { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: 6px; }
.option-tete span { color: var(--ink-muted); }

/* ---------- pied de page ---------- */
.site-footer { border-top: 1px solid var(--hairline); padding: clamp(40px, 6vw, 64px) 0 var(--space-6); font-size: 15px; }
.footer-inner { display: grid; grid-template-columns: 1.2fr 2fr 1fr; gap: var(--space-6) clamp(24px, 4vw, 64px); align-items: start; }
.footer-marque img { width: 94px; margin-bottom: var(--space-4); }
.footer-marque p { color: var(--ink-muted); margin: 0; font-family: var(--display); font-size: 18px; }
.footer-nav { display: grid; gap: 10px var(--space-6); align-content: start; }
.footer-nav[aria-label="Fonctionnalités"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-nav a { text-decoration: none; font-weight: 500; }
.footer-nav a:hover { text-decoration: underline; }
.footer-legal { grid-column: 1 / -1; margin: var(--space-6) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--hairline); color: var(--ink-muted); font-size: 14px; }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-marque { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-inner { grid-template-columns: 1fr; } }

/* ---------- pages légales (gabarits du starter) ---------- */
.legal-page { max-width: 780px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter); }
.legal-page h1 { font-size: clamp(34px, 5vw, 52px); margin: var(--space-6) 0 clamp(24px, 4vw, 40px); }
.legal-page h2 { font-size: 24px; margin-top: 40px; }
.legal-page p, .legal-page li { color: var(--ink); }
.legal-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.legal-back svg { width: 16px; height: 16px; }



/* =========================================================================
   Refonte du 07/10/2026 : pictos, pages de fonctionnalités, modes clair et
   sombre au choix, animations sobres (apparitions, survols, étoile). Tout
   mouvement s'efface devant prefers-reduced-motion (règle de base, en tête).
   ========================================================================= */

:root { --ease: cubic-bezier(.22, .61, .36, 1); }

/* ---------- logos et bouton de thème selon le mode ---------- */
/* Sombre seulement : logo pour fond sombre, toujours. */
.logo-clair, .picto-lune { display: none !important; }
.logo-sombre, .picto-soleil { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-clair, :root:not([data-theme="light"]) .picto-lune { display: none !important; }
  :root:not([data-theme="light"]) .logo-sombre, :root:not([data-theme="light"]) .picto-soleil { display: block !important; }
}
:root[data-theme="dark"] .logo-clair, :root[data-theme="dark"] .picto-lune { display: none !important; }
:root[data-theme="dark"] .logo-sombre, :root[data-theme="dark"] .picto-soleil { display: block !important; }
/* Bascule douce des couleurs, seulement au moment du clic (pas à chaque survol). */
.theme-bascule, .theme-bascule *, .theme-bascule *::before, .theme-bascule *::after {
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease) !important; }

.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--hairline);
  border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: border-color .2s ease, transform .3s var(--ease); }
.theme-toggle:hover { border-color: var(--ink); transform: rotate(-15deg); }
.theme-toggle .picto { width: 18px; height: 18px; }
@media (max-width: 960px) { .nav-menu li.nav-theme { padding: var(--space-4) 0; } }

/* ---------- en-tête : verre dépoli et filet une fois la page défilée ---------- */
/* Le verre dépoli vit sur un calque (::before) et non sur l'en-tête : un backdrop-filter sur l'en-tête enfermait
   le menu mobile (position: fixed) dans ses 72 px de haut une fois la page défilée (27/10/2026). */
.site-header { border-bottom-color: transparent; transition: border-color .3s ease, background-color .3s ease; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.site-header.est-defile { border-bottom-color: var(--hairline); background: transparent; }
.site-header.est-defile::before { background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
.nav-menu a:not(.btn) { position: relative; }
@media (min-width: 961px) {
  .nav-menu a:not(.btn):hover { text-decoration: none; }
  .nav-menu a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
  .nav-menu a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
}

/* ---------- apparitions au défilement (classe .visible posée par js/site.js) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--rang, 0) * 70ms); }
.js [data-reveal].visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* ---------- pictos ---------- */
.picto { width: 24px; height: 24px; flex: none; }
.pastille-picto { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .4s var(--ease); }
.pastille-grande { width: 64px; height: 64px; border-radius: 18px; }
.pastille-grande .picto { width: 30px; height: 30px; }
.badge-option { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--hairline); font: 600 11px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- cartes de fonctionnalités (accueil et page Fonctionnalités) ---------- */
.cartes-fonctions { --gap: var(--space-6); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.cartes-fonctions > li { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); display: flex; }
@media (max-width: 1024px) { .cartes-fonctions > li { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 640px) { .cartes-fonctions > li { flex-basis: 100%; } }
.carte-fonction { position: relative; display: flex; flex-direction: column; gap: var(--space-4); width: 100%;
  padding: clamp(24px, 2.6vw, 32px); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--surface-raised); text-decoration: none; overflow: hidden;
  transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.carte-fonction::before { content: ""; position: absolute; inset: auto -40% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c-accent-soft), transparent); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.carte-fonction:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(20, 20, 20, .45); text-decoration: none; }
.carte-fonction:hover::before { opacity: 1; }
.carte-fonction:hover .pastille-picto { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: rotate(-6deg); }
.carte-titre { font: 600 22px/1.25 var(--display); }
.carte-texte { color: var(--ink-muted); font-size: 16px; line-height: 1.55; flex: 1; }
.carte-lien { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.carte-lien .picto { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.carte-fonction:hover .carte-lien .picto { transform: translateX(4px); }

/* ---------- accueil : l'étoile et ses orbites ---------- */
.hero-accueil { position: relative; overflow: hidden; }
.hero-accueil .hero-inner { position: relative; z-index: 1; }
.hero-astre { position: absolute; top: 50%; right: max(-120px, calc((100vw - var(--maxw)) / 2 - 160px)); width: min(640px, 60vw); aspect-ratio: 1;
  transform: translateY(-50%); pointer-events: none; }
.orbite { position: absolute; inset: 0; margin: auto; border: 1px solid var(--hairline); border-radius: 50%; animation: tourne 60s linear infinite; }
.orbite::after { content: ""; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); opacity: .5; }
.orbite-1 { width: 38%; height: 38%; animation-duration: 40s; }
.orbite-2 { width: 66%; height: 66%; animation-duration: 70s; animation-direction: reverse; }
.orbite-2::after { background: var(--accent); opacity: 1; }
.orbite-3 { width: 94%; height: 94%; animation-duration: 110s; }
.astre { position: absolute; inset: 0; margin: auto; width: 16%; height: 16%; color: var(--accent);
  filter: drop-shadow(0 0 28px rgba(240, 101, 74, .45)); animation: respire 6s var(--ease) infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes respire { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.12) rotate(8deg); } }
@media (max-width: 820px) { .hero-astre { width: 420px; right: -190px; top: 120px; transform: none; opacity: .55; } }

/* ---------- pages de fonctionnalité ---------- */
.ariane { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 4vw, 40px); font-size: 14px; color: var(--ink-muted); }
.ariane a { text-decoration: none; }
.ariane a:hover { text-decoration: underline; }
.fonction-tete { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.fonction-tete .eyebrow { margin: 0; }
.hero-fonction .display { max-width: 18ch; }

.blocs { list-style: none; margin: 0; padding: 0; counter-reset: bloc; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.bloc { counter-increment: bloc; padding-top: var(--space-6); border-top: 1px solid var(--ink); }
.bloc::before { content: counter(bloc, decimal-leading-zero); display: block; margin-bottom: var(--space-4); font: 500 14px/1 var(--sans); letter-spacing: .08em; color: var(--ink-muted); }
.bloc h2 { font-size: clamp(22px, 2.2vw, 26px); }
.bloc p { color: var(--ink-muted); margin: 0; }
@media (max-width: 900px) { .blocs { grid-template-columns: 1fr; } }

.liste-coches { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.liste-coches li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline); font-size: 18px; line-height: 1.45; }
.liste-coches .picto { width: 20px; height: 20px; color: var(--accent); }

.suite { padding: clamp(48px, 7vw, 88px) 0; }
.suite-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.suite-lien { display: grid; gap: var(--space-2); text-decoration: none; }
.suite-label { font: 600 13px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.suite-titre { display: inline-flex; align-items: center; gap: var(--space-4); font: 600 clamp(28px, 4vw, 44px)/1.1 var(--display); letter-spacing: -.01em; }
.suite-fleche { width: 32px; height: 32px; transition: transform .4s var(--ease); }
.suite-lien:hover { text-decoration: none; }
.suite-lien:hover .suite-fleche { transform: translateX(8px); }
.suite-lien:hover .pastille-picto { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- finitions générales ---------- */
.btn-accent { box-shadow: 0 10px 24px -16px rgba(240, 101, 74, .9); }
.lien-fleche::after { display: inline-block; transition: transform .3s var(--ease); }
.lien-fleche:hover::after { transform: translateX(4px); }
.faq details p { animation: deplie .35s var(--ease); }
@keyframes deplie { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hero-accueil .hero-intro { max-width: 40ch; }
.section-tete-ligne .lien-fleche { white-space: nowrap; }

/* ---------- encart réglementaire (page Facturation : facturation électronique) ---------- */
.encart-section { padding-top: 0; border-top: 0; }
.encart { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 64px); padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-raised); position: relative; overflow: hidden; }
.encart::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
.encart h2 { margin-bottom: var(--space-4); }
.calendrier { list-style: none; margin: var(--space-6) 0; padding: 0; border-left: 1px solid var(--hairline); }
.calendrier li { position: relative; display: grid; gap: 2px; padding: 0 0 var(--space-6) var(--space-6); line-height: 1.5; }
.calendrier li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-raised); border: 2px solid var(--accent); }
.calendrier li:last-child { padding-bottom: 0; }
.calendrier-date { font-weight: 600; }
.encart-conclusion { font: 500 19px/1.4 var(--display); margin: 0 0 var(--space-4); }
.encart-source { margin: 0; font-size: 14px; color: var(--ink-muted); }
.encart-partenaires h3 { font-size: 20px; }
.partenaires-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.partenaire-carte { padding: var(--space-4) 20px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); }
.partenaire-carte p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
.partenaire-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 6px !important; color: var(--ink) !important; font-size: 17px !important; }
.partenaire-statut { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--hairline); font: 600 11px/16px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.partenaire-carte:first-child { border-color: var(--ink); }
.partenaire-carte:first-child .partenaire-statut { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (max-width: 900px) { .encart { grid-template-columns: 1fr; } }

/* ---------- renvoi vers une option (page Marque blanche → Site web) ---------- */
.cta-option-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 4vw, 48px); }
.cta-option .eyebrow { margin-bottom: var(--space-2); }
.cta-option h2 { margin-bottom: var(--space-2); }
.cta-option .section-intro { margin: 0; }
.cta-option .pastille-picto { background: transparent; color: var(--inv-ink); border-color: var(--inv-hairline); }
@media (max-width: 820px) { .cta-option-inner { grid-template-columns: 1fr; } }
/* Partenaires sur toute la largeur de l'encart, sous le texte. */
.encart { grid-template-columns: 1fr; }
.encart-partenaires { padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--hairline); }
.encart-partenaires-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.encart-partenaires-tete h3 { margin: 0; }
.encart-partenaires-tete p { margin: 0; color: var(--ink-muted); max-width: 52ch; }
.partenaires-liste { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: var(--space-4); }
.partenaire-carte { display: flex; flex-direction: column; }
.partenaire-carte > p:nth-child(2) { flex: 1; }
.partenaire-tete { flex-direction: column; align-items: flex-start !important; }
.partenaire-kwezi { margin-top: var(--space-4) !important; padding-top: 10px; border-top: 1px solid var(--hairline); font: 600 13px/18px var(--sans) !important; color: var(--ink-muted) !important; }
.partenaire-carte:first-child .partenaire-kwezi { color: var(--ink) !important; }
.partenaire-carte:first-child .partenaire-kwezi::before { content: "● "; color: #3f9a5a; }
@media (min-width: 901px) { .encart-texte { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: clamp(28px, 5vw, 64px); }
  .encart-texte > .eyebrow, .encart-texte > h2, .encart-texte > .section-intro { grid-column: 1; }
  .encart-texte > .calendrier { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }
  .encart-texte > .encart-conclusion, .encart-texte > .encart-source { grid-column: 1; } }
/* 5 partenaires : 3 + 2 centrés (convention de l'atelier pour un nombre impair). */
.partenaires-liste { --gap: var(--space-4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.partenaires-liste > li { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); }
@media (max-width: 760px) { .partenaires-liste > li { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 480px) { .partenaires-liste > li { flex-basis: 100%; } }
/* Logo de la réforme : petit, sur fond blanc aux bords arrondis (lisible dans les deux modes). */
.encart-logo { display: inline-block; justify-self: start; margin-bottom: var(--space-4); padding: 6px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--hairline); }
.encart-logo img { display: block; width: 132px; height: auto; }
@media (min-width: 901px) { .encart-texte > .encart-logo { grid-column: 1; } }
.partenaires-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; margin: var(--space-6) 0 var(--space-4); text-align: center; }

/* ---------- carrousel des solutions de facturation (défilement continu, sobre) ---------- */
.defile { position: relative; overflow: hidden; margin: 0 0 var(--space-6); padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.defile-piste { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-4); width: max-content; animation: defile 32s linear infinite; }
.defile:hover .defile-piste { animation-play-state: paused; }
.defile-logo { flex: none; display: grid; place-items: center; height: 72px; padding: 0 28px; border-radius: 14px; background: #fff; border: 1px solid var(--hairline); }
.defile-logo img { display: block; height: 30px; width: auto; max-width: 150px; object-fit: contain; }
@keyframes defile { to { transform: translateX(calc(-50% - var(--space-4) / 2)); } }
@media (prefers-reduced-motion: reduce) {
  .defile { -webkit-mask-image: none; mask-image: none; }
  .defile-piste { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .defile-logo[aria-hidden="true"] { display: none; }
}
.encart > *, .encart-partenaires { min-width: 0; }
.defile { max-width: 100%; contain: inline-size; }

/* ---------- logos des moyens de paiement (page Paiement) ---------- */
.logos-section { padding-bottom: clamp(16px, 3vw, 32px); }
.logos-titre { font: 600 13px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-4); }
.logos-grille { --gap: var(--space-4); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap); }
.logo-tuile { flex: 1 1 200px; max-width: 280px; display: grid; gap: 10px; justify-items: center; }
.logo-tuile-image { display: grid; place-items: center; width: 100%; height: 88px; padding: 0 24px; border-radius: 14px; background: #fff; border: 1px solid var(--hairline);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.logo-tuile:hover .logo-tuile-image { transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(20, 20, 20, .5); }
.logo-tuile-image img { display: block; height: 34px; width: auto; max-width: 100%; object-fit: contain; }
.logo-tuile-mention { font-size: 14px; color: var(--ink-muted); }
.logo-a-venir .logo-tuile-image img { opacity: .55; filter: grayscale(.4); }
.logo-a-venir .logo-tuile-mention { font-style: italic; }
@media (max-width: 640px) { .logo-tuile { flex-basis: 100%; max-width: none; } }
.logo-tuile-image img { max-width: 170px; }

/* ---------- gabarit unique des tuiles de logos (carrousel Facturation, page Paiement) ----------
   Les images sont déjà calibrées sur un cadre commun de 480 × 200 (2,4:1), chaque logo à surface
   visuelle égale : la tuile a donc toujours la même taille, et le logo la remplit. */
:root { --tuile-l: 216px; --tuile-h: 90px; }
.defile-logo, .logo-tuile-image { width: var(--tuile-l); height: var(--tuile-h); padding: 0; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--hairline); }
.defile-logo img, .logo-tuile-image img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.logo-tuile { flex: 0 0 var(--tuile-l); max-width: none; }
@media (max-width: 640px) { .logo-tuile { flex-basis: var(--tuile-l); } :root { --tuile-l: 168px; --tuile-h: 70px; } }
/* « ● Relié à Kwezi » : même pastille que sur les cartes de partenaires de facturation. */
.logo-relie { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/18px var(--sans); color: var(--ink); }
.logo-relie::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3f9a5a; box-shadow: 0 0 0 3px rgba(63, 154, 90, .18); }
.partenaire-carte:first-child .partenaire-kwezi::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #3f9a5a; box-shadow: 0 0 0 3px rgba(63, 154, 90, .18); vertical-align: 1px; }
/* « ● Connecteur à venir » : même pastille, en ambre. */
.logo-avenir::before { background: #d9932b; box-shadow: 0 0 0 3px rgba(217, 147, 43, .2); }
.logo-a-venir .logo-tuile-mention { font-style: normal; }
.partenaire-carte:not(:first-child) .partenaire-kwezi::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #d9932b; box-shadow: 0 0 0 3px rgba(217, 147, 43, .2); vertical-align: 1px; }
.partenaire-kwezi { color: var(--ink) !important; }
/* Quatre blocs : 2 × 2 plutôt que 3 + 1. */
@media (min-width: 901px) { .blocs:has(> .bloc:nth-child(4)) { grid-template-columns: repeat(2, 1fr); row-gap: clamp(36px, 5vw, 64px); } }

/* ---------- menu déroulant « Fonctionnalités » ---------- */
.nav-ouvrir { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 15px/1.6 var(--sans); cursor: pointer; }
.nav-ouvrir .chevron { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.nav-deroulant.ouvert .chevron { transform: rotate(180deg); }
.mega-titre { margin: 0 0 var(--space-2); font: 600 12px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-lien { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; text-decoration: none; transition: background-color .15s ease; }
.mega-lien:hover { background: var(--surface); text-decoration: none; }
.mega-lien .pastille-picto { width: 36px; height: 36px; border-radius: 10px; }
.mega-lien .picto { width: 18px; height: 18px; }
.mega-lien:hover .pastille-picto { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mega-lien strong { font-weight: 600; font-size: 15px; }
.mega-toutes { display: inline-block; margin-top: var(--space-4); font-size: 14px; }

@media (min-width: 961px) {
  .nav-deroulant { position: static; }
  .mega { position: absolute; left: 50%; top: calc(100% + 1px); width: min(980px, calc(100vw - 2 * var(--gutter))); transform: translate(-50%, 8px);
    padding: var(--space-6); border: 1px solid var(--hairline); border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--surface-raised);
    box-shadow: 0 30px 60px -40px rgba(20, 20, 20, .5); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .25s var(--ease), visibility .2s; }
  .nav-deroulant.ouvert .mega, .nav-deroulant:hover .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .mega-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .site-header { position: sticky; }
  .header-inner { position: relative; }
}
@media (max-width: 960px) {
  .nav-ouvrir { width: 100%; justify-content: space-between; padding: 16px 0; font: 600 20px/1.3 var(--display); }
  .mega { display: none; padding: 0 0 var(--space-4); }
  .nav-deroulant.ouvert .mega { display: block; }
  .mega-grille { display: grid; gap: var(--space-4); }
}

/* ---------- menu mobile : animations et entrées Fonctionnalités (27/10/2026) ----------
   Le panneau glisse, ses entrées arrivent l'une après l'autre, les sous-menus se déplient en cascade.
   Les entrées à picto gardent leur mise en page (la règle générale des liens du menu les passait en bloc). */
@media (max-width: 960px) {
  .nav-menu { transform: translateY(-12px); transition: opacity .25s ease, visibility .25s, transform .35s var(--ease); }
  .nav.open .nav-menu { transform: none; }
  .nav-menu > li { opacity: 0; transform: translateY(14px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
  .nav.open .nav-menu > li { opacity: 1; transform: none; }
  .nav.open .nav-menu > li:nth-child(1) { transition-delay: .06s; }
  .nav.open .nav-menu > li:nth-child(2) { transition-delay: .11s; }
  .nav.open .nav-menu > li:nth-child(3) { transition-delay: .16s; }
  .nav.open .nav-menu > li:nth-child(4) { transition-delay: .21s; }
  .nav.open .nav-menu > li:nth-child(5) { transition-delay: .26s; }
  .nav.open .nav-menu > li:nth-child(6) { transition-delay: .31s; }
  .nav.open .nav-menu > li:nth-child(7) { transition-delay: .36s; }
  .nav.open .nav-menu > li:nth-child(n+8) { transition-delay: .41s; }
  .nav-toggle span { transition: transform .35s var(--ease), opacity .2s ease; }
  .nav-menu .mega li, .nav-menu .mega li:last-child { border: 0; padding-top: 0; }
  .nav-menu a.mega-lien { display: flex; align-items: center; gap: 14px; padding: 8px 4px; font: 500 16px/1.3 var(--sans); }
  .nav-menu .mega-lien .pastille-picto { flex: none; }
  .nav-deroulant.ouvert .mega-groupe, .nav-deroulant.ouvert .mega-petit li, .nav-deroulant.ouvert .mega-toutes { animation: mega-entree .4s var(--ease) both; }
  .nav-deroulant.ouvert .mega-groupe:nth-child(2) { animation-delay: .06s; }
  .nav-deroulant.ouvert .mega-groupe:nth-child(3) { animation-delay: .12s; }
  .nav-deroulant.ouvert .mega-groupe:nth-child(4) { animation-delay: .18s; }
  .nav-deroulant.ouvert .mega-toutes { animation-delay: .24s; }
}
@keyframes mega-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Ordinateur : les entrées du menu déroulant arrivent en léger décalé. */
@media (min-width: 961px) {
  .mega-lien .pastille-picto { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .3s var(--ease); }
  .mega-lien:hover .pastille-picto { transform: rotate(-6deg) scale(1.06); }
  .nav-deroulant.ouvert .mega-groupe, .nav-deroulant:hover .mega-groupe { animation: mega-entree .35s var(--ease) both; }
  .nav-deroulant.ouvert .mega-groupe:nth-child(2), .nav-deroulant:hover .mega-groupe:nth-child(2) { animation-delay: .04s; }
  .nav-deroulant.ouvert .mega-groupe:nth-child(3), .nav-deroulant:hover .mega-groupe:nth-child(3) { animation-delay: .08s; }
  .nav-deroulant.ouvert .mega-groupe:nth-child(4), .nav-deroulant:hover .mega-groupe:nth-child(4) { animation-delay: .12s; }
}

/* ---------- Tarifs : détails en cartes (réseaux, mise en service, options, à la demande) ---------- */
.tarifs-details .container { display: grid; gap: clamp(20px, 3vw, 28px); }
.tarifs-titre { margin: clamp(20px, 3vw, 32px) 0 0; font-size: clamp(26px, 3vw, 32px); }
.tarifs-rangee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.tarifs-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.carte-tarif-grande { grid-column: 1 / -1; }
.carte-tarif { display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); }
.carte-tarif h2, .carte-tarif h3 { margin: 0; }
.carte-tarif h2 { font-size: 24px; }
.carte-tarif h3 { font-size: 20px; }
.carte-tarif-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.prix { margin: 0; white-space: nowrap; text-align: right; }
.prix strong { font: 600 28px/1 var(--display); letter-spacing: -.01em; }
.prix span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-muted); }
.carte-tarif-texte { margin: 0; color: var(--ink-muted); line-height: 1.55; }
.carte-tarif .tarif-mention { align-self: flex-start; margin: 0; }
.lignes-titre { margin: var(--space-2) 0 0; font: 600 12px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.lignes-prix { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.lignes-prix li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.lignes-prix li span { color: var(--ink); }
.prix-ligne { white-space: nowrap; font-weight: 600; }
.carte-tarif-grande .lignes-prix { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); border-top: 0; }
.carte-tarif-grande .lignes-prix li { border-top: 1px solid var(--hairline); }
@media (max-width: 960px) { .tarifs-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tarifs-rangee, .tarifs-options, .carte-tarif-grande .lignes-prix { grid-template-columns: 1fr; } }
/* Jauge des mises en service offertes : un segment par place, les places prises en corail. */
.jauge-places { display: grid; gap: 8px; }
.jauge-segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.jauge-segments .segment { height: 8px; border-radius: 4px; background: var(--hairline); }
.jauge-segments .segment.pris { background: var(--accent); }
.jauge-texte { margin: 0; font-size: 14px; }
.js .jauge-places[data-reveal] .segment.pris, .jauge-places .segment.pris { transform-origin: left; animation: remplir .8s var(--ease) both; }
@keyframes remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Prix en corail (page Tarifs), sauf les packs « À la demande ». Corail plein sur fond sombre ;
   sur crème, le corail foncé du moteur (#bb4f3a), le corail plein n'y atteignant pas le contraste AA. */
:root { --prix: #bb4f3a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --prix: var(--kwezi-coral); } }
:root, :root[data-theme] { --prix: var(--kwezi-coral); }
.offre-prix .montant, .tarifs-details .prix strong, .carte-tarif-grande .prix-ligne { color: var(--prix); }

/* ---------- widgets pour un site existant (page Site web) ---------- */
.widgets-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.widget-carte { display: flex; flex-direction: column; gap: var(--space-2); padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-raised); }
.widget-carte .pastille-picto { margin-bottom: var(--space-2); }
.widget-carte h3 { font-size: 19px; margin: 0; }
.widget-carte p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { .widgets-grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .widgets-grille { grid-template-columns: 1fr; } }
/* Widgets : picto plus présent (corail au survol de la carte). */
.widget-carte .pastille-picto { width: 52px; height: 52px; }
.widget-carte .picto { width: 26px; height: 26px; }
.widget-carte { transition: border-color .3s var(--ease), transform .4s var(--ease); }
.widget-carte:hover { border-color: var(--ink); transform: translateY(-2px); }
.widget-carte:hover .pastille-picto { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- garanties (page Site web : hébergement France, RGPD, SEO/GEO) ---------- */
.garanties-section { padding-bottom: clamp(16px, 3vw, 32px); }
.garanties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.garantie { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.garantie .pastille-picto { flex: none; color: var(--accent); }
.garantie-titre { margin: 0 0 4px; font-weight: 600; }
.garantie-texte { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 900px) { .garanties { grid-template-columns: 1fr; } }
/* Petit menu déroulant (À propos) : sous l'entrée, pas en pleine largeur. */
@media (min-width: 961px) {
  .nav-deroulant-petit { position: relative; }
  .mega-petit { left: 50%; width: 260px; padding: var(--space-2); border-radius: var(--radius-md); top: calc(100% + 14px); }
}
.mega-petit .mega-lien .picto { width: 18px; height: 18px; }

/* ---------- modale de l'agenda de démonstration ---------- */
.modale-agenda { width: min(980px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); padding: 0; border: 1px solid var(--hairline);
  border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); overflow: hidden; }
.modale-agenda[open] { display: flex; flex-direction: column; animation: modale-entree .3s var(--ease); }
.modale-agenda::backdrop { background: rgba(10, 10, 10, .55); backdrop-filter: blur(4px); }
.modale-agenda-tete { display: flex; align-items: center; gap: var(--space-4); padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.modale-agenda-titre { margin: 0; flex: 1; font: 600 18px/1.3 var(--display); }
.lien-discret { font-size: 14px; color: var(--ink-muted); }
.modale-agenda iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.modale-ouverte, .modale-ouverte body { overflow: hidden; }
@keyframes modale-entree { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .modale-agenda { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; } .lien-discret { display: none; } }
.equipe-signature { margin: var(--space-6) 0 var(--space-4); padding-left: 14px; border-left: 2px solid var(--accent); font: italic 500 18px/1.4 var(--display); }
/* Signature avec photo ronde (page Qui sommes-nous) */
.equipe-signature { display: flex; align-items: center; gap: 18px; padding-left: 0; border-left: 0; font-style: normal; }
.equipe-signature p { margin: 0; padding-left: 14px; border-left: 2px solid var(--accent); font: italic 500 18px/1.4 var(--display); }
.equipe-photo img { display: block; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface-raised); box-shadow: 0 0 0 1px var(--hairline); }
@media (max-width: 480px) { .equipe-photo img { width: 80px; height: 80px; } }
/* Bouton rond (fermeture de la modale de l'agenda) : même allure que le bouton de thème, sans son rôle. */
.bouton-rond { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--hairline);
  border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: border-color .2s ease; }
.bouton-rond:hover { border-color: var(--ink); }

/* ---------- accordéons animés : « + » qui pivote en « − », réponse qui glisse ---------- */
.faq summary::after, .blog-faq__item summary::after { content: "" !important; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; transform: none;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform .32s var(--ease); float: none; }
.faq details.ouvert summary::after, .blog-faq__item.ouvert summary::after { transform: rotate(180deg); background-size: 14px 1.5px, 1.5px 0; }
.blog-faq__item summary { position: relative; padding-right: 32px; }
.faq details p, .blog-faq__item > :not(summary) { animation: none; transition: opacity .3s var(--ease) .05s, transform .3s var(--ease) .05s; }
.faq details:not(.ouvert) p, .blog-faq__item:not(.ouvert) > :not(summary) { opacity: 0; transform: translateY(-4px); }
.faq summary:hover, .blog-faq__item summary:hover { color: var(--ink); }

/* ---------- légitimité (page Site web) : deux dates en grand ---------- */
.legitimite-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.legitimite-chiffres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.legitimite-chiffres li { padding-left: var(--space-6); border-left: 1px solid var(--inv-hairline); }
.legitimite-annee { display: block; font: 600 clamp(48px, 6vw, 72px)/1 var(--display); letter-spacing: -.02em; color: var(--kwezi-coral); }
.legitimite-chiffres p { margin: var(--space-2) 0 0; color: var(--inv-muted); }
@media (max-width: 820px) { .legitimite-inner { grid-template-columns: 1fr; } }

/* ---------- en-tête avec photo en fondu (page Qui sommes-nous) ---------- */
.hero-photo { position: relative; overflow: hidden; }
.hero-photo .hero-inner { position: relative; z-index: 1; }
.hero-photo-image { position: absolute; inset: 0 0 0 auto; width: 58%; pointer-events: none; }
.hero-photo-image img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; opacity: .9;
  animation: photo-fondu 1.2s var(--ease) both; }
@keyframes photo-fondu { from { opacity: 0; transform: scale(1.03); } to { opacity: .9; transform: none; } }
.hero-photo .hero-intro { max-width: 40ch; }
.hero-photo .display { max-width: 13ch; }
@media (max-width: 820px) {
  .hero-photo-image { width: 100%; }
  .hero-photo-image img { opacity: .22; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); animation: none; }
}

/* ---------- bandeau de consentement (js/cookie-consent.js du moteur) ----------
   Carte flottante en bas à gauche. « Refuser » et « Accepter » ont le même poids visuel (exigence CNIL). */
#cookie-banner { position: fixed; z-index: 90; left: var(--gutter); bottom: var(--gutter); width: min(440px, calc(100vw - 2 * var(--gutter)));
  padding: 18px 20px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .55); font-size: 15px; line-height: 1.5; animation: bandeau-entree .5s var(--ease) both; }
#cookie-banner.hidden { display: none; }
#cookie-banner p { margin: 0 0 14px; color: var(--ink-muted); }
#cookie-banner a { color: var(--ink); }
#cookie-banner .cookie-actions { display: flex; gap: 10px; }
#cookie-banner button { flex: 1; min-height: 42px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--ink); background: transparent;
  color: var(--ink); font: 600 14px/1.2 var(--sans); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
#cookie-banner button:hover { background: var(--ink); color: var(--surface); }
@keyframes bandeau-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-photo-image img { object-position: 70% center; }
.hero-photo-accueil img { object-position: 68% 30%; }

/* Accueil sur mobile (27/10/2026) : la photo couvre l'en-tête, le titre posé dessus en bas ;
   l'intro et les deux boutons (côte à côte) sortent de l'en-tête, juste dessous. */
.accueil-intro-mobile { display: none; }
@media (max-width: 820px) {
  .hero-accueil.hero-photo { display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(440px, 72svh, 620px);
    padding: 96px 0 var(--space-6); }
  .hero-accueil .hero-inner .hero-intro, .hero-accueil .hero-inner .actions { display: none; }
  .hero-accueil .hero-inner .display { margin-bottom: 0; }
  .hero-accueil .hero-photo-accueil { width: 100%; }
  .hero-accueil .hero-photo-accueil img { opacity: 1; animation: photo-fondu 1.2s var(--ease) both; -webkit-mask-image: none; mask-image: none; }
  .hero-accueil .hero-photo-accueil::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 30%, color-mix(in srgb, var(--surface) 70%, transparent) 65%, var(--surface) 100%); }
  .accueil-intro-mobile { display: block; padding: var(--space-4) 0 clamp(40px, 10vw, 56px); }
  .accueil-intro-mobile .hero-intro { margin: 0 0 var(--space-6); max-width: none; }
  .accueil-intro-mobile .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .accueil-intro-mobile .actions:has(> :only-child) { grid-template-columns: 1fr; }
  .accueil-intro-mobile .btn { min-width: 0; padding-left: 10px; padding-right: 10px; font-size: 14px; white-space: nowrap; }
}

/* ---------- diaporama de l'en-tête (accueil) : fondu enchaîné + léger zoom ---------- */
.diaporama .diapo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.diaporama .diapo.actif { opacity: 1; }
.diaporama .diapo img { animation: none; }
.diaporama .diapo.actif img { animation: diapo-zoom 7s linear both; }
@keyframes diapo-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.js .diaporama .diapo:first-child { opacity: 1; }
.js .diaporama .diapo:first-child:not(.actif) { opacity: 0; }
.diaporama-commandes { display: flex; align-items: center; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.diaporama-pause { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; }
.diaporama-pause:hover { color: var(--ink); border-color: var(--ink-muted); }
.diaporama-pause svg { width: 12px; height: 12px; }
.diaporama-pause .ico-lecture, .diaporama-pause.en-pause .ico-pause { display: none; }
.diaporama-pause.en-pause .ico-lecture { display: block; }
.diaporama-points { display: inline-flex; gap: 6px; }
.diaporama-points button { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--hairline); cursor: pointer; transition: background-color .3s ease, width .3s var(--ease); }
.diaporama-points button[aria-current="true"] { width: 34px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .diaporama .diapo { transition: none; } .diaporama .diapo.actif img { animation: none; } }
/* Diaporama sans saut : zoom par transition (la photo qui sort continue de bouger pendant son fondu,
   au lieu de reprendre d'un coup sa taille de départ). */
.diaporama .diapo img, .diaporama .diapo.actif img { animation: none !important; }
.diaporama .diapo img { transform: scale(1.06); transition: transform 7.5s linear; will-change: transform; }
.diaporama .diapo.actif img { transform: scale(1); }
.diaporama .diapo { transition: opacity 1.6s ease-in-out; will-change: opacity; }
@media (prefers-reduced-motion: reduce) { .diaporama .diapo img { transform: none; transition: none; } }

/* ---------- cinémagraphe de l'accueil : halo de l'étoile, vapeur du café (rien d'autre ne bouge) ----------
   Le calque (.cg-calque) a la taille et la place de l'image cadrée (calculées par js/kwezi.js) ; ses
   enfants sont placés en % de la photo. Même fondu de bords que la photo, apparition après elle. */
.cinemagraph { overflow: hidden; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; opacity: 0; animation: cg-entree 1.2s var(--ease) 1.2s both; }
.cg-calque { position: absolute; }
.cg-calque > span { position: absolute; transform: translate(-50%, -50%); mix-blend-mode: screen; }
.cg-etoile { width: 7%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 244, 222, .55) 12%, rgba(255, 236, 205, .18) 34%, transparent 66%);
  animation: cg-scintille 5.2s ease-in-out infinite; }
.cg-vapeur { width: 6.5%; height: 19%; transform: translate(-50%, -100%) !important; }
.cg-vapeur i { position: absolute; left: 50%; bottom: 0; width: 46%; height: 52%; margin-left: -23%; border-radius: 45% 55% 50% 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .22) 40%, transparent 70%);
  filter: blur(3.5px); opacity: 0; animation: cg-vapeur 8s ease-in-out infinite; }
.cg-vapeur i:nth-child(2) { animation-delay: 2.7s; --cg-derive: -22%; }
.cg-vapeur i:nth-child(3) { animation-delay: 5.3s; --cg-derive: 18%; }
@keyframes cg-entree { to { opacity: 1; } }
@keyframes cg-scintille { 0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.82); } 50% { opacity: .95; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes cg-vapeur {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.5, .6); }
  20%  { opacity: .5; }
  65%  { opacity: .2; }
  100% { opacity: 0;   transform: translate(var(--cg-derive, 10%), -105%) scale(1.5, 1.2); } }
@media (max-width: 820px), (prefers-reduced-motion: reduce) { .cinemagraph { display: none; } }

/* ---------- page Intégrations ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.integ-recherche { position: relative; max-width: 520px; margin-top: var(--space-6); }
.integ-recherche .picto { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.integ-recherche input { width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; font: 400 17px/1.4 var(--sans); color: var(--ink);
  background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: 999px; transition: border-color .15s ease, box-shadow .15s ease; }
.integ-recherche input::placeholder { color: var(--ink-muted); }
.integ-recherche input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--hairline); }
.integ-grille { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.integ-sommaire { position: sticky; top: 96px; }
.integ-sommaire ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.integ-sommaire a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--ink-muted); text-decoration: none; font-size: 15px; transition: background .15s ease, color .15s ease; }
.integ-sommaire a:hover, .integ-sommaire a.actif { background: var(--surface-raised); color: var(--ink); }
.integ-sommaire a.actif { font-weight: 600; }
.integ-sommaire a.vide { opacity: .4; }
.integ-compte { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.integ-categorie { scroll-margin-top: 96px; padding-bottom: clamp(32px, 5vw, 56px); }
.integ-categorie + .integ-categorie { padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--hairline); }
.integ-categorie h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: var(--space-2); }
.integ-categorie-texte { color: var(--ink-muted); max-width: 60ch; margin-bottom: var(--space-6); }
.integ-cartes { --gap: var(--space-4); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.integ-carte { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-raised);
  transition: border-color .15s ease, transform .2s ease, box-shadow .2s ease; }
.integ-carte:hover { border-color: var(--ink-muted); transform: translateY(-2px); box-shadow: 0 14px 30px -24px rgba(20, 20, 20, .5); }
.integ-logo { display: grid; place-items: center; aspect-ratio: 12 / 5; overflow: hidden; border-radius: var(--radius-sm); background: #fff; border: 1px solid rgba(20, 20, 20, .08); margin-bottom: 4px; }
.integ-logo picture, .integ-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.integ-nom-seul { font: 600 19px/1.2 var(--sans); color: #141414; letter-spacing: -.01em; padding: 0 12px; text-align: center; }
.integ-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.integ-titre { font-size: 17px; }
.integ-texte { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.integ-statut { padding: 2px 8px; border-radius: 999px; font: 600 11px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--hairline); color: var(--ink-muted); }
.integ-statut-inclus { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.integ-bientot .integ-logo img { opacity: .55; filter: grayscale(.4); }
.integ-aucun { padding: var(--space-6); border: 1px dashed var(--hairline); border-radius: var(--radius-md); color: var(--ink-muted); }
.integ-api { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.integ-api-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.integ-api-points li { display: flex; gap: 12px; align-items: flex-start; padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); }
.integ-api-points .picto { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
@media (max-width: 1180px) { .integ-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .integ-grille { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .integ-sommaire { top: 64px; z-index: 5; margin: 0 -16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--hairline); }
  .integ-sommaire ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .integ-sommaire ul::-webkit-scrollbar { display: none; }
  .integ-sommaire a { white-space: nowrap; border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 12px; }
  .integ-categorie { scroll-margin-top: 140px; }
  .integ-api { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .integ-cartes { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .integ-carte { transition: none; } .integ-carte:hover { transform: none; } }
.integ-carte[hidden], .integ-categorie[hidden], .integ-aucun[hidden] { display: none; }

/* ---------- page de fonctionnalité longue : guide, comparatif, prix réseau, questions de démo ---------- */
.guide-titre { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 var(--space-4); text-wrap: balance; }
/* Atouts du réseau (page multi-sites) : cartes à picto, chiffre clé et petite animation au survol. */
.atouts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.atout { --gap: var(--space-6); flex: 0 0 calc((100% - 2 * var(--gap)) / 3); min-width: 0; position: relative; overflow: hidden;
  padding: clamp(24px, 3vw, 34px); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.atout::after { content: ""; position: absolute; right: -38px; top: -38px; width: 110px; height: 110px; border-radius: 50%;
  background: var(--accent); opacity: .12; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s; }
.atout:hover { transform: translateY(-6px) rotate(-.6deg); border-color: var(--accent); box-shadow: 0 18px 40px -24px rgba(20, 20, 20, .45); }
.atout:nth-child(even):hover { transform: translateY(-6px) rotate(.6deg); }
.atout:hover::after { transform: scale(1.7); opacity: .2; }
.atout-picto { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent);
  color: var(--on-accent); margin-bottom: var(--space-4); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.atout-picto svg { width: 26px; height: 26px; }
.atout:hover .atout-picto { transform: rotate(-8deg) scale(1.08); }
.atout-chiffre { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; margin: 0 0 var(--space-2);
  color: var(--ink); }
.atout h3 { font-size: clamp(18px, 1.6vw, 20px); margin: 0 0 12px; }
.atout p:last-child { color: var(--ink-muted); line-height: 1.6; margin: 0; }
@media (max-width: 1000px) { .atout { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 640px) { .atout { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .atout, .atout::after, .atout-picto { transition: none; } .atout:hover, .atout:nth-child(even):hover { transform: none; } }
.comparatif-cadre { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.comparatif { width: 100%; border-collapse: collapse; font-size: 16px; }
.comparatif th, .comparatif td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.comparatif tbody tr:last-child th, .comparatif tbody tr:last-child td { border-bottom: 0; }
.comparatif thead th { font: 600 13px/18px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-raised); }
.comparatif tbody th { font-weight: 600; width: 22%; }
.comparatif td { color: var(--ink-muted); }
.comparatif td.comparatif-kwezi { color: var(--ink); font-weight: 500; background: var(--surface-raised); }
.comparatif thead th.comparatif-kwezi { color: var(--ink); }
.comparatif-ok { display: flex; align-items: flex-start; gap: 12px; }
/* Coche corail devant chaque réponse Kwezi : attire l'œil sur la colonne. */
.comparatif-coche { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); }
.comparatif-coche svg { width: 16px; height: 16px; }
@media (max-width: 700px) {
  .comparatif thead { display: none; }
  .comparatif, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; width: auto; }
  .comparatif tr { padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
  .comparatif tbody tr:last-child { border-bottom: 0; }
  .comparatif th, .comparatif td { padding: 4px 0; border: 0; background: none; }
  .comparatif td.comparatif-kwezi { background: none; }
  .comparatif tbody th { width: auto; padding-bottom: 6px; }
  .comparatif td::before { content: attr(data-col) " : "; font-weight: 600; color: var(--ink-muted); }
}
.prix-reseau { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.prix-reseau th, .prix-reseau td { padding: 14px 16px; text-align: right; border-bottom: 1px solid var(--hairline); }
.prix-reseau th:first-child { text-align: left; }
.prix-reseau thead th { font: 600 12px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.prix-reseau tbody tr:last-child th, .prix-reseau tbody tr:last-child td { border-bottom: 0; }
.prix-reseau-note { margin-top: var(--space-4); font-size: 14px; color: var(--ink-muted); }
@media (max-width: 480px) { .prix-reseau th, .prix-reseau td { padding: 12px 8px; font-size: 14px; } }
.demo-questions { margin: var(--space-6) 0; }

/* ---------- sélecteur de langue (site multilingue) : tout à droite, menu déroulant du site ---------- */
.langue-bouton { gap: 6px; padding: 5px 10px; border: 1px solid var(--hairline); border-radius: 999px; font: 600 13px/18px var(--sans); letter-spacing: .04em; color: var(--ink-muted); transition: color .15s ease, border-color .15s ease; }
.langue-bouton:hover, .nav-langue.ouvert .langue-bouton { color: var(--ink); border-color: var(--ink-muted); }
.langue-bouton .globe { width: 15px; height: 15px; }
.langue-code, .langue-libelle { display: none; }
html[lang="fr"] .langue-code[lang="fr"], html[lang="en"] .langue-code[lang="en"] { display: inline; }
.mega-langue ul { gap: 2px; }
.lien-langue { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font: 500 15px/1.3 var(--sans); color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.lien-langue:hover { background: var(--surface); }
.lien-langue .coche { width: 16px; height: 16px; color: var(--accent); visibility: hidden; }
html[lang="fr"] .lien-langue[lang="fr"] .coche, html[lang="en"] .lien-langue[lang="en"] .coche { visibility: visible; }
html[lang="fr"] .lien-langue[lang="fr"], html[lang="en"] .lien-langue[lang="en"] { font-weight: 600; }
@media (min-width: 961px) {
  .nav-langue .mega-langue { left: auto; right: 0; width: 180px; transform: translate(0, 8px); }
  .nav-langue.ouvert .mega-langue, .nav-langue:hover .mega-langue { transform: translate(0, 0); }
}
@media (max-width: 960px) {
  .langue-bouton { border: 0; border-radius: 0; padding: 16px 0; font: 600 20px/1.3 var(--display); letter-spacing: 0; color: var(--ink); }
  .langue-bouton .langue-libelle { display: inline; margin-right: auto; }
  .langue-bouton .globe { width: 20px; height: 20px; }
  /* La règle générale des liens du menu mobile les passait en bloc : la coche tombait à la ligne (27/10/2026). */
  .nav-menu a.lien-langue { display: flex; padding: 10px 4px; font: 500 16px/1.3 var(--sans); }
  html[lang="fr"] .nav-menu a.lien-langue[lang="fr"], html[lang="en"] .nav-menu a.lien-langue[lang="en"] { font-weight: 600; }
}
.footer-note-langue { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-muted); }

/* ---------- l'étoile du logo brille de temps en temps (menu) ----------
   L'étoile occupe, dans le SVG du logo (336,4 × 113,8), le carré de 49,64 en x 286,76 / y 0 : l'éclat se pose
   dessus en pourcentages, quelle que soit la taille du logo. */
.site-header .marque { position: relative; display: inline-block; line-height: 0; }
.site-header .marque::before, .site-header .marque::after { content: ""; position: absolute; pointer-events: none; opacity: 0; }
.site-header .marque::before { left: 77%; top: -22%; width: 31%; height: 88%; border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 247, 229, .55) 0%, rgba(240, 101, 74, .35) 35%, rgba(240, 101, 74, 0) 70%);
  animation: etoile-halo 9s ease-in-out 2.5s infinite; }
.site-header .marque::after { left: 85.24%; top: 0; width: 14.76%; height: 43.6%;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49.64 49.64'%3E%3Cpath fill='%23F9F7E5' d='M24.82 0c0 16.55 8.27 24.82 24.82 24.82-16.55 0-24.82 8.27-24.82 24.82 0-16.55-8.27-24.82-24.82-24.82C16.55 24.82 24.82 16.55 24.82 0Z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 3px rgba(249, 247, 229, .9));
  animation: etoile-eclat 9s ease-in-out 2.5s infinite; }
@keyframes etoile-eclat {
  0%, 86% { opacity: 0; transform: scale(.6) rotate(0deg); }
  91% { opacity: 1; transform: scale(1.25) rotate(45deg); }
  96%, 100% { opacity: 0; transform: scale(.8) rotate(90deg); }
}
@keyframes etoile-halo {
  0%, 85% { opacity: 0; transform: scale(.5); }
  91% { opacity: 1; transform: scale(1.15); }
  98%, 100% { opacity: 0; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) { .site-header .marque::before, .site-header .marque::after { animation: none; opacity: 0; } }

/* ---------- page Devis (configurateur, 26/10/2026) ---------- */
.devis-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.devis-form { display: grid; gap: var(--space-6); min-width: 0; }
.devis-etape { margin: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-raised); min-width: 0; }
.devis-etape legend { display: flex; align-items: center; gap: 12px; padding: 0; float: left; width: 100%; margin-bottom: var(--space-2);
  font: 600 clamp(22px, 2.4vw, 26px)/1.2 var(--display); letter-spacing: -.01em; }
.devis-etape legend + * { clear: both; }
.devis-num { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.devis-aide { color: var(--ink-muted); margin-bottom: var(--space-4); max-width: 60ch; }
.devis-compteur { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.devis-pas { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font: 500 22px/1 var(--sans); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease; }
.devis-pas:hover { border-color: var(--ink-muted); }
.devis-pas:focus-visible, .devis-compteur input:focus-visible, .devis-choix input:focus-visible + .devis-choix-corps { outline: 2px solid var(--focus); outline-offset: 2px; }
#devis-espaces { width: 84px; height: 44px; text-align: center; font: 600 22px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); -moz-appearance: textfield; }
#devis-espaces::-webkit-inner-spin-button, #devis-espaces::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#devis-espaces-curseur { flex: 1 1 200px; accent-color: var(--accent); min-width: 0; }
.devis-palier { margin: var(--space-4) 0 0; min-height: 1.5em; font-size: 15px; color: var(--ink); }
.devis-options, .devis-sites { display: grid; gap: 10px; }
.devis-choix { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.devis-choix:hover { border-color: var(--ink-muted); }
.devis-choix:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.devis-choix input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.devis-sous-option { margin-left: clamp(16px, 4vw, 34px); }
.devis-choix-corps { display: grid; gap: 4px; min-width: 0; flex: 1; }
.devis-choix-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.devis-choix-tete strong { font-weight: 600; }
.devis-prix { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.devis-choix-texte { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.devis-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.devis-champs .champ { display: grid; gap: 6px; min-width: 0; }
.devis-champs .champ-large { grid-column: 1 / -1; }
.devis-champs label { font: 600 13px/16px var(--sans); letter-spacing: .02em; }
.devis-champs input, .devis-champs textarea { width: 100%; font: 400 16px/1.5 var(--sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--ink-muted); border-radius: var(--radius-sm); padding: 11px 14px; }
.devis-champs input:focus-visible, .devis-champs textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.champ-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.devis-rgpd { margin: var(--space-4) 0; font-size: 13px; color: var(--ink-muted); max-width: 62ch; }
.devis-erreur { margin: 0 0 var(--space-4); padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--accent); color: var(--ink); }
.devis-envoyer[disabled] { opacity: .7; cursor: progress; }
.devis-recap { position: sticky; top: 96px; display: grid; gap: var(--space-4); }
.devis-recap-carte { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-raised); }
.devis-recap-titre { margin: 0 0 var(--space-4); font: 600 24px/1.2 var(--display); }
.devis-bloc-titre { margin: var(--space-4) 0 var(--space-2); font: 600 12px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.devis-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.devis-lignes li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.devis-ligne-libelle { min-width: 0; }
.devis-ligne-libelle small { display: block; font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.devis-ligne-valeur { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.devis-ligne-valeur s { color: var(--ink-muted); }
.devis-offerte { color: var(--accent); }
.devis-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.devis-total strong { font: 600 clamp(26px, 3vw, 32px)/1 var(--display); font-variant-numeric: tabular-nums; }
.devis-total-second strong { font-size: 22px; }
.devis-note { margin: var(--space-4) 0 0; font-size: 13px; color: var(--ink-muted); }
.devis-demo { margin: 0; font-size: 15px; color: var(--ink-muted); }
.devis-succes { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; gap: var(--space-4); padding: clamp(32px, 6vw, 72px) var(--space-6);
  border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-raised); }
.devis-succes:focus { outline: none; }
.devis-succes h2 { margin: 0; }
.devis-succes .pastille-picto { color: var(--accent); }
.devis-succes[hidden], .devis-recap[hidden], .devis-form[hidden], .devis-etape[hidden], .devis-choix[hidden] { display: none; }
@media (max-width: 960px) {
  .devis-grille { grid-template-columns: minmax(0, 1fr); }
  .devis-recap { position: static; order: 2; }
}
@media (max-width: 560px) { .devis-champs { grid-template-columns: minmax(0, 1fr); } }
.devis-barre { display: none; }
@media (max-width: 960px) {
  .devis-barre { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--surface-raised); border-top: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-size: 15px; }
  .devis-barre strong { font: 600 22px/1 var(--display); font-variant-numeric: tabular-nums; }
  .devis-barre[hidden] { display: none; }
  .devis { padding-bottom: 72px; }
}

/* Devis : recherche de l'entreprise (SIRENE) */
.devis-sirene { position: relative; }
.devis-sirene-liste { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px; list-style: none; max-height: 300px; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6); }
.devis-sirene-liste li[role="option"] { display: grid; gap: 2px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.devis-sirene-liste li[role="option"] span { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.devis-sirene-liste li[role="option"]:hover, .devis-sirene-liste li.actif { background: var(--surface); }
.devis-sirene-etat { padding: 9px 10px; font-size: 14px; color: var(--ink-muted); }
.devis-societe { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 14px; }
.devis-societe .picto { flex: none; width: 18px; height: 18px; color: var(--accent); }
#devis-societe-texte { display: grid; gap: 2px; min-width: 0; flex: 1; }
#devis-societe-texte strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#devis-societe-texte span { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.devis-societe button { flex: none; padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface-raised); font: 600 12px/1 var(--sans); color: var(--ink); cursor: pointer; }
.devis-societe button:hover { border-color: var(--ink-muted); }
.devis-societe button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.devis-sirene-liste[hidden], .devis-societe[hidden] { display: none; }

/* Accueil › fonctions IA : la note des crédits sous les cartes. */
#ia .ia-note { max-width: 46rem; margin: var(--space-6) auto 0; text-align: center; color: var(--ink-muted); }

/* Retours à la ligne saisis dans l'éditeur (27/10/2026) : les paragraphes qui affichent un seul texte modifiable
   les gardent (pre-line). En attendant que le moteur les convertisse pour tous les sites. */
.hero-intro, .section-intro, .manifeste-para, .carte-tarif-texte, .raison-texte, .offre-accroche, .devis-aide,
.tarif-mention, .tarif-engagement, .prix-reseau-note, .atout > p:last-child, details > p { white-space: pre-line; }


/* ==========================================================================
   Socle des modules Blog et Réalisations.
   --------------------------------------------------------------------------
   CE FICHIER N'EST PAS COPIÉ TEL QUEL : gen-site.js l'AJOUTE à la feuille finale,
   APRÈS l'éventuelle feuille propre au client.

   Pourquoi : un site à charte sur mesure remplace css/style.css par la sienne.
   Tant que ce socle vivait dedans, il disparaissait avec — les pages des modules
   se retrouvaient sans mise en page, et seules subsistaient les retouches du
   client, qui ajustaient des règles absentes. Le sortir d'ici garantit que le
   fonctionnement visuel des modules survit à n'importe quelle charte.

   Ordre d'assemblage : style.css du client · CE SOCLE · template/css/modules.css
   ========================================================================== */

/* ============================ BLOG ============================ */
.blog-list h1, .blog-article h1 { margin-bottom: .5rem; }
.blog-list__intro { color: var(--c-muted); margin-bottom: 2rem; }
.blog-fil { font-size: .85rem; color: var(--c-muted); margin-bottom: 1.2rem; }

.blog-themes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.blog-theme {
  padding: .38rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  border: 1px solid rgba(0,0,0,.12); color: var(--c-muted); text-decoration: none; transition: .18s ease;
}
.blog-theme:hover { border-color: var(--c-accent); color: var(--c-text); }
.blog-theme.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.blog-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.blog-card { flex: 0 0 calc((100% - 3rem) / 3); min-width: 260px; }
.blog-card__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card__link:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.09); border-color: var(--c-accent); }
.blog-card__cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(0,0,0,.04); }
/* <picture> est en ligne par défaut : sans ce display:block, il ne remplit pas le
   cadre, l'image garde ses proportions naturelles et laisse une bande grise. */
.blog-card__cover picture { display: block; width: 100%; height: 100%; }
.blog-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; flex: 1; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .82rem; color: var(--c-muted); }
.blog-card__cat {
  padding: .18rem .6rem; border-radius: 999px; font-weight: 600; font-size: .74rem;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  background: var(--c-accent-soft, rgba(0,0,0,.05)); color: var(--c-accent-ink, inherit);
}
.blog-card__title { font-family: var(--f-head, inherit); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.blog-card__chapo { color: var(--c-muted); font-size: .95rem; flex: 1; }
.blog-card__more { font-weight: 600; font-size: .9rem; color: var(--c-accent-ink, var(--c-primary)); }

/* Article */
.blog-article .container { max-width: 46rem; }
.blog-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; color: var(--c-muted); margin-bottom: .7rem; }
/* « Mis à jour le » : la correction se dit, elle ne se crie pas. Elle passe
   après la date de parution et en retrait, pour informer sans laisser croire
   que l'article a été refait. */
.blog-article__maj { font-style: italic; opacity: .8; }
.blog-article__chapo { font-size: 1.12rem; line-height: 1.6; color: var(--c-muted); margin-bottom: 2rem; }
.blog-article__cover { display: block; margin: 0 0 2.2rem; }
.blog-article__cover img { width: 100%; height: auto; border-radius: 12px; }

.blog-sommaire { margin: 0 0 1.6rem; padding: 1.1rem 1.4rem; background: rgba(0,0,0,.03); border-radius: 10px; }
.blog-sommaire p { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); margin-bottom: .5rem; }
.blog-sommaire ul { list-style: none; padding: 0; margin: 0; }
.blog-sommaire li + li { margin-top: .3rem; }

.blog-article__corps > * + * { margin-top: 1.15rem; }
.blog-article__corps h2 { font-size: 1.4rem; margin-top: 2.4rem; scroll-margin-top: 5rem; }
.blog-article__corps h3 { font-size: 1.12rem; margin-top: 1.8rem; }
.blog-article__corps ul { padding-left: 1.2rem; }
.blog-article__corps li + li { margin-top: .4rem; }
.blog-article__corps blockquote {
  margin: 2rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--c-accent);
  background: rgba(0,0,0,.03); border-radius: 0 8px 8px 0;
}
.blog-article__corps blockquote p { margin: 0; font-style: italic; }
.blog-article__corps blockquote cite { display: block; margin-top: .6rem; font-size: .88rem; font-style: normal; color: var(--c-muted); }
.blog-figure { margin: 2rem 0; }
.blog-figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
.blog-figure figcaption { margin-top: .5rem; font-size: .86rem; color: var(--c-muted); }
.blog-cta { margin: 2.4rem 0; padding: 1.6rem; background: var(--c-primary); color: #fff; border-radius: 12px; text-align: center; }
.blog-cta p { margin-bottom: 1rem; font-size: 1.05rem; }

.blog-faq { margin-top: 3rem; }
.blog-faq h2 { scroll-margin-top: 5rem; }
.blog-faq__item { border-bottom: 1px solid rgba(0,0,0,.08); padding: 1rem 0; }
.blog-faq__item summary { cursor: pointer; font-weight: 600; list-style: none; }
.blog-faq__item summary::-webkit-details-marker { display: none; }
.blog-faq__item summary::after { content: "+"; float: right; color: var(--c-muted); }
.blog-faq__item[open] summary::after { content: "–"; }
.blog-faq__item > div { margin-top: .7rem; color: var(--c-muted); }

.blog-article__retour { display: inline-block; margin-top: 3rem; font-weight: 600; }

@media (max-width: 980px) { .blog-card { flex: 0 0 calc((100% - 1.5rem) / 2); } }
@media (max-width: 620px) { .blog-card { flex: 0 0 100%; } }
.blog-home__tous { margin-top: 2.2rem; text-align: center; }

/* Article : colonne de lecture + colonne latérale (sommaire puis partage) */
.blog-article .container { max-width: 68rem; }
.blog-article__grille { display: block; }
.blog-article__lecture { max-width: 46rem; margin: 0 auto; }
/* L'en-tête vit DANS la colonne de lecture : hors d'elle, il resterait centré
   sur la page pendant que le texte est décalé par le sommaire, et les deux ne
   s'aligneraient pas. */

.blog-partage { padding: 1.1rem 1.4rem; background: rgba(0,0,0,.03); border-radius: 10px; }
.blog-partage__titre { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin-bottom: .7rem; }
.blog-partage__liens { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-partage__liens > * {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; cursor: pointer;
  color: var(--c-muted); transition: .18s ease; padding: 0;
}
.blog-partage__liens > *:hover { border-color: var(--c-accent); color: var(--c-primary); transform: translateY(-2px); }
.blog-partage__liens svg { width: 17px; height: 17px; fill: currentColor; }
.blog-partage__copie.copie { border-color: var(--c-accent); color: var(--c-primary); }
.blog-partage__copie.copie::after {
  content: "Lien copié"; position: absolute; margin-top: -3.2rem; padding: .3rem .6rem;
  font-size: .78rem; white-space: nowrap; background: var(--c-primary); color: #fff; border-radius: 6px;
}

@media (min-width: 1080px) {
  .blog-article__grille { display: grid; grid-template-columns: 15rem minmax(0, 46rem); gap: 3rem; justify-content: center; align-items: start; }
  .blog-article__lecture { margin: 0; max-width: none; }
  .blog-cote { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1rem; }
  .blog-cote .blog-sommaire { margin: 0; background: transparent; border-left: 2px solid rgba(0,0,0,.12); border-radius: 0; padding: .2rem 0 .2rem 1.1rem; }
  .blog-cote .blog-partage { background: transparent; padding: .2rem 0 .2rem 1.1rem; border-left: 2px solid rgba(0,0,0,.12); }
  /* Sans sommaire, la colonne n'a qu'un bloc : on la garde alignée en haut. */
  .blog-cote[data-sans-sommaire] { padding-top: .2rem; }
}

/* ============================ PORTFOLIO ============================ */
/* Grille et non flex : avec des bases en calc((100% - 2 × écart) / 3), changer
   l'écart depuis la feuille d'un client faisait retomber la grille à deux
   colonnes sans que rien ne le signale. */
.projets-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.projets-grille--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Texte SEO des pages d'accueil blog / portfolio / guide (réglé dans le manager). */
.hub-texte-seo { max-width: 70ch; margin: 3rem 0 0; line-height: 1.7; }
.hub-texte-seo p { margin: 0 0 1rem; }
.hub-texte-seo ul, .hub-texte-seo ol { margin: 0 0 1rem 1.2rem; }
/* Page d'une catégorie : accroche sous le titre, texte SEO sous la grille (réglés dans le manager). */
.projets-categorie__accroche { max-width: 70ch; margin: -.4rem 0 1.8rem; color: var(--c-muted); font-size: 1.05rem; line-height: 1.6; }
.projets-categorie__texte { max-width: 70ch; margin: 3rem 0 0; line-height: 1.7; }
.projets-categorie__texte p { margin: 0 0 1rem; }
.projets-categorie__texte ul, .projets-categorie__texte ol { margin: 0 0 1rem 1.2rem; }
.projet-carte { min-width: 0; }
.projet-carte__lien {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 12px; color: inherit; text-decoration: none; transition: .2s ease;
}
.projet-carte__lien:hover { transform: translateY(-3px); }
.projet-carte__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(0,0,0,.05); border-radius: 12px; }
.projet-carte__image picture { display: block; width: 100%; height: 100%; }
.projet-carte__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.projet-carte__lien:hover .projet-carte__image img { transform: scale(1.04); }
.projet-carte__corps { display: flex; flex-direction: column; gap: .35rem; padding: 1rem .2rem 0; }
.projet-carte__cat {
  align-self: flex-start; padding: .18rem .6rem; border-radius: 999px; text-decoration: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  background: var(--c-accent-soft, rgba(0,0,0,.05)); color: var(--c-accent-ink, inherit);
}
.projet-carte__titre { font-family: var(--f-head, inherit); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.projet-carte__chapo { color: var(--c-muted); font-size: .95rem; }

/* Fiche projet */
.projet .container { max-width: 68rem; }
.projet__hero { display: block; margin-bottom: 2.4rem; }
.projet__hero img { width: 100%; height: auto; border-radius: 12px; }
.projet__grille { display: block; }
.projet__chapo { font-size: 1.12rem; line-height: 1.6; color: var(--c-muted); margin-bottom: 1.6rem; }
.projet__descriptif > * + * { margin-top: 1.15rem; }
.projet__descriptif h2 { font-size: 1.35rem; margin-top: 2rem; }
.projet__descriptif ul, .projet__descriptif ol { padding-left: 1.2rem; }

.projet-fiche { margin: 0 0 1.6rem; }
.projet-fiche__ligne { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .7rem 0; border-top: 1px solid rgba(0,0,0,.08); }
.projet-fiche__ligne:first-child { border-top: none; }
.projet-fiche dt { flex: 0 0 100%; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.projet-fiche dd { font-size: .98rem; }

.projet-galerie { display: flex; flex-wrap: wrap; gap: 1rem; margin: 3rem 0 0; }
.projet-galerie__item { flex: 0 0 calc((100% - 2rem) / 3); min-width: 240px; margin: 0; }
/* Toutes les vignettes au même format : une grille de photos aux hauteurs
   différentes se lit comme un désordre, alors que le travail montré ne l'est pas.
   La photo entière, non recadrée, est servie à l'agrandissement. */
.projet-galerie__voir {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 10px; overflow: hidden;
}
.projet-galerie__voir picture { display: block; width: 100%; }
.projet-galerie__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; }
.projet-galerie__voir:hover img { transform: scale(1.04); }
.projet-galerie__item figcaption { margin-top: .4rem; font-size: .84rem; color: var(--c-muted); }

@media (min-width: 1080px) {
  .projet__grille { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; }
  .projet__cote { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.2rem; }
}
@media (max-width: 980px) {
  .projets-grille, .projets-grille--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projet-galerie__item { flex: 0 0 calc((100% - 1rem) / 2); }
}
@media (max-width: 620px) {
  .projets-grille, .projets-grille--home { grid-template-columns: 1fr; }
  .projet-galerie__item { flex: 0 0 100%; }
}

/* Agrandissement d'une photo de galerie */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.5rem; background: rgba(15,15,15,.94);
}
.lightbox[hidden] { display: none; }
.lightbox__cadre { margin: 0; max-width: min(92vw, 1400px); max-height: 88vh; display: flex; flex-direction: column; gap: .8rem; }
.lightbox__cadre img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; display: block; margin: 0 auto; }
.lightbox__cadre figcaption { color: rgba(255,255,255,.8); font-size: .9rem; text-align: center; }
.lightbox__cadre figcaption[hidden] { display: none; }
.lightbox__nav, .lightbox__fermer {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer; transition: background .18s ease;
}
.lightbox__nav { width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; }
.lightbox__nav:hover, .lightbox__fermer:hover { background: rgba(255,255,255,.22); }
.lightbox__fermer { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border-radius: 50%; font-size: 1.7rem; line-height: 1; }
.lightbox__compteur { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.65); font-size: .85rem; }
@media (max-width: 720px) {
  .lightbox { padding: .8rem; gap: .4rem; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox__cadre img { max-height: 70vh; }
}

/* Lien de carte projet : présent dans le flux, pas seulement au survol. */
.projet-carte__more { font-weight: 600; font-size: .9rem; color: var(--c-accent-ink, var(--c-primary)); }

/* Message affiché quand un filtre ne laisse rien. */
.filtre-vide { margin-top: 2rem; text-align: center; color: var(--c-muted); }

/* ===================== MODULE GUIDE (partenaires par rubrique) ===================== */
/* Socle neutre : structure et rythme. La charte du site (couleurs, polices)
   s'applique par les variables et par template/css/modules.css du client. */
.guide-hub__intro{max-width:70ch;margin:0 auto 2.5rem;text-align:center;}
.guide-hub__surtitre{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:0 0 .5rem;}
.guide-hub__texte{opacity:.85;margin:.75rem 0 0;}
.guide-section__titre{text-align:center;margin:0 0 1.75rem;}
.guide-rubriques{display:grid;gap:2rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.guide-rubrique{display:flex;flex-direction:column;gap:.9rem;}
.guide-rubrique__photo{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r,8px);background:rgba(0,0,0,.05);}
.guide-rubrique__photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.guide-rubrique:hover .guide-rubrique__photo img{transform:scale(1.05);}
.guide-rubrique__titre{margin:0;font-size:1.3rem;}
.guide-rubrique__titre a{text-decoration:none;color:inherit;}
.guide-rubrique__texte{margin:0;opacity:.85;}
.guide-rubrique__plus{margin-top:auto;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.guide-rubrique-page__intro{max-width:70ch;margin:0 auto;}
.grille-partenaires{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));}
/* Page unique du guide (content.guide_page_unique) : pastilles de filtre par rubrique */
.guide-filtres{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 0 2rem;}
.guide-filtres[hidden],.guide-liste__item[hidden]{display:none;}
.guide-filtre{font:inherit;font-size:.92rem;padding:.55rem 1.1rem;border:1px solid rgba(0,0,0,.18);border-radius:999px;background:transparent;color:inherit;cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
.guide-filtre:hover{border-color:var(--c-accent);}
.guide-filtre[aria-pressed="true"]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary,#fff);}
.guide-liste__item{display:flex;}
.guide-liste__item>.partenaire{flex:1;}
.partenaire{display:flex;flex-direction:column;gap:.45rem;padding:1.5rem;border-radius:var(--r,8px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background:#fff;}
.partenaire__photo{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:calc(var(--r,8px) - 2px);margin:-.5rem -.5rem .5rem;}
.partenaire__photo img{width:100%;height:100%;object-fit:cover;}
.partenaire__nom{font-size:1.15rem;margin:0;}
.partenaire__activite{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin:0;}
.partenaire__texte{font-size:.92rem;margin:.2rem 0 0;}
.partenaire__ligne{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;line-height:1.55;opacity:.85;margin:0;}
.partenaire__ligne svg{width:15px;height:15px;flex:none;margin-top:.32em;}
.partenaire__liens{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem;padding-top:.9rem;border-top:1px solid rgba(0,0,0,.08);}
.partenaire__liens a{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.guide-carte{height:clamp(330px,50vh,500px);border-radius:var(--r,8px);overflow:hidden;z-index:0;margin:0 0 2rem;background:rgba(0,0,0,.05);}
.guide-carte .leaflet-container{font-family:inherit;}
.guide-carte__activite{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;opacity:.75;}
@media (max-width:720px){.guide-carte{height:300px;}}


/* ---- Retouches propres au client (template/css/modules.css) ---- */
/* Retouches du socle des modules (blog) pour la charte Kwezi : filets plutôt qu'ombres,
   titres en Newsreader, corail jamais en texte sur crème. */
.blog-list, .blog-article { padding-top: clamp(48px, 7vw, 96px); }
.blog-card__link, .blog-card { box-shadow: none !important; }
.blog-card { border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-raised); }
.blog-card__cat { color: var(--ink) !important; background: var(--c-accent-soft); }
.blog-theme.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Sommaire d'article (« Au sommaire ») : liens sans soulignement, interligne resserré,
   plus d'air entre deux entrées (demande du 07/10/2026). */
.blog-sommaire ul { display: grid; gap: 14px; }
.blog-sommaire li { margin: 0; line-height: 1.3; }
.blog-sommaire a { text-decoration: none; }
.blog-sommaire a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-sommaire li + li { margin-top: 0; }

/* Boutons de partage : contraste adouci (fond discret au lieu de tuiles blanches), dans les deux modes. */
.blog-partage__liens > * { background: transparent !important; border: 1px solid var(--hairline) !important; color: var(--ink-muted) !important; box-shadow: none !important; }
.blog-partage__liens > *:hover { background: var(--surface-raised) !important; border-color: var(--ink-muted) !important; color: var(--ink) !important; }
.blog-partage__copie.copie { border-color: var(--accent) !important; color: var(--ink) !important; }
.blog-cote .blog-sommaire, .blog-cote .blog-partage { border-left-color: var(--hairline); }

/* Encadré d'appel à l'action des articles : le socle met du blanc sur --c-primary, qui devient crème en
   mode sombre (texte illisible). On le cale sur la section « encre » du site, lisible dans les deux modes. */
.blog-cta { background: var(--inv-surface) !important; color: var(--inv-ink) !important; border: 1px solid var(--inv-hairline); }
.blog-cta p { color: var(--inv-ink) !important; }
.blog-cta a, .blog-cta .btn, .blog-cta a.blog-cta__btn { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }

/* Filtre actif du Guide (moteur v0.26.4, module non utilisé ici) : blanc sur --c-primary, crème en mode
   sombre. Même calage que l'encadré ci-dessus, pour que le contrôle des contrastes reste propre. */
.guide-filtre[aria-pressed="true"] { color: var(--surface) !important; }

/* Carte d'article (page Blog) : le socle pose un fond blanc fixe sur le lien ; en mode sombre le titre
   crème y devenait illisible. Fond et textes suivent maintenant le thème. */
.blog-card__link { background: var(--surface-raised) !important; color: var(--ink) !important; border-color: var(--hairline) !important; }
.blog-card__link:hover { border-color: var(--ink) !important; box-shadow: 0 14px 32px -22px rgba(0, 0, 0, .5) !important; }
.blog-card__title { color: var(--ink); }
.blog-card__more { color: var(--ink) !important; }
.blog-card__more::after { content: " →"; }

/* Bulle « Lien copié » du partage : blanc sur crème en thème sombre (contrôle des contrastes, 15/10/2026). */
.blog-partage__copie.copie::after { background: var(--inv-surface) !important; color: var(--inv-ink) !important; }

/* Article sur mobile (27/10/2026) : le sommaire passe sous l'image à la une, le partage devient une barre fixe en bas
   de l'écran. Le gabarit du moteur ne bouge pas : la colonne latérale et la colonne de lecture s'effacent
   (display: contents) et leurs blocs sont remis en ordre dans la grille. */
@media (max-width: 820px) {
  .blog-article__grille { display: flex; flex-direction: column; }
  .blog-cote, .blog-article__lecture { display: contents; }
  .blog-article__lecture > * { order: 3; }
  .blog-article__lecture > .blog-fil, .blog-article__lecture > .blog-article__meta, .blog-article__lecture > h1,
  .blog-article__lecture > .blog-article__chapo, .blog-article__lecture > .blog-article__cover { order: 1; }
  .blog-article__grille .blog-sommaire { order: 2; margin: 0 0 1.6rem; }
  .blog-article__lecture > .blog-article__meta { align-self: flex-start; }

  .blog-partage { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); border-radius: 0; border-top: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    animation: partage-entree .5s var(--ease) .3s both; }
  .blog-partage__titre { margin: 0; }
  .blog-partage__liens { flex-wrap: nowrap; gap: 8px; }
  .blog-partage__liens > * { width: 40px; height: 40px; }
  .blog-partage__copie.copie::after { right: var(--gutter); }
  body:has(.blog-partage) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}
@keyframes partage-entree { from { transform: translateY(100%); } to { transform: none; } }