/* ==========================================================================
   Harmonisation des pages annexes avec la page d'accueil — palette « Bourgogne » (sept. 2026)
   Chargée APRÈS style-pages.css / style-legal.css : elle ne fait que
   surcharger typographies, couleurs et ombres. Retirez la ligne <link> pour
   revenir à l'ancien style.
   ========================================================================== */
@font-face{font-family:'Bricolage Grotesque';font-weight:600;font-display:swap;src:url('fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;src:url('fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}

:root{
  --ink:#221A17; --ink-2:#4A3F3A; --muted:#625650; --line:rgba(34,26,23,.1);
  --cream:#F7F3EC; --cream-2:#EDE5D8; --tint:#FCFAF6; --paper:#FCFAF6;
  --brand-soft:#F4E6E6; --ocre-soft:#F3E8D3; --ocre-2:#D9B061;
  --grad-brand:linear-gradient(135deg,#6B1E2E 0%,#8C2E40 100%);
  --shadow-sm:0 1px 2px rgba(34,26,23,.05),0 4px 12px rgba(34,26,23,.05);
  --shadow-md:0 1px 2px rgba(34,26,23,.04),0 10px 30px -6px rgba(34,26,23,.12),0 30px 60px -30px rgba(107,30,46,.25);
}

body{background:var(--cream);color:var(--ink)}
h1,h2,h3,
.brand b,.encadre .titre,.bloc-prix .montant,.chiffre b,ol.etapes>li::before,ol.etapes>li b,
details.q>summary,.cta a.bouton{font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif}
h1,h2,h3{letter-spacing:-.03em}
em.accent,.accent{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;color:#6B1E2E}

/* en-tête : même encre que le pied de page de l'accueil */
header.site{background:var(--ink);padding:16px 0;position:sticky;top:0;z-index:20;
  box-shadow:0 10px 30px -18px rgba(34,26,23,.6)}
header.site a.retour{border-radius:999px;transition:background .3s}

/* bandeau de titre : fond crème lumineux, comme l'accueil */
.chapeau{background:
    radial-gradient(60% 90% at 90% 0%,rgba(184,137,58,.16),transparent 70%),
    radial-gradient(45% 70% at 100% 100%,rgba(184,137,58,.12),transparent 70%),
    var(--cream);
  color:var(--ink);padding:64px 0 56px;border-bottom:1px solid var(--line)}
.chapeau h1{color:var(--ink);font-weight:600;font-size:clamp(30px,5.4vw,52px);line-height:1.02;letter-spacing:-.045em;max-width:22ch}
.chapeau p{color:var(--ink-2)}
.chapeau .pastille{background:rgba(255,255,255,.7);border-color:#fff;color:var(--brand);box-shadow:var(--shadow-sm)}
.fil{color:var(--muted)}
.fil a{color:var(--brand);border-bottom-color:rgba(107,30,46,.3)}
.fil a:hover{border-bottom-color:var(--brand)}

main h2,h2{font-weight:600;font-size:clamp(22px,2.6vw,28px)}
main h3,h3{font-weight:600}
h1{font-weight:600}

/* cartes et encadrés : papier + ombres douces */
.encadre,.bloc-prix,.chiffre,details.q,.sommaire{background:var(--paper);border-color:#fff;box-shadow:var(--shadow-sm)}
.encadre{border-left-width:4px;border-radius:18px}
.encadre.attention{background:#F8F0E2}
.encadre.bon{background:#EFF8F2}
.bloc-prix{border-radius:22px;box-shadow:var(--shadow-md)}
.bloc-prix .montant{font-weight:800;color:#7E5B1D;letter-spacing:-.04em}
.chiffre{border-radius:18px}
.chiffre b{font-weight:800;letter-spacing:-.03em}
details.q{border-radius:18px;transition:box-shadow .3s}
details.q[open]{box-shadow:var(--shadow-md)}
details.q>summary{font-weight:600}
table{background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
th{background:var(--cream-2)}
th,td{border-color:var(--line)}

/* appel à l'action : encre + accent ocre, sans dégradé criard */
.cta{background:var(--ink);border-radius:28px;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 100% 0%,rgba(184,137,58,.25),transparent 70%)}
.cta>*{position:relative}
.cta h2{font-weight:600;font-size:clamp(24px,3vw,32px)}
.cta p{color:rgba(252,250,246,.72)}
.cta a.bouton{background:#6B1E2E;box-shadow:0 12px 28px -12px rgba(107,30,46,.8);font-weight:800;transition:transform .3s,background .3s}
.cta a.bouton:hover{background:#8C2E40}
.cta a.bouton.clair{background:transparent;border-color:rgba(255,255,255,.4)}

footer{background:var(--ink)}

/* contour clavier : bordeaux sur fond clair, or clair sur les fonds encre (en-tête, appel à l'action, pied de page) */
a:focus-visible,button:focus-visible{outline-color:var(--brand);outline-offset:3px}
:is(header.site,.cta,footer) :is(a,button):focus-visible{outline-color:var(--ocre-2)}

/* Cibles tactiles : liens isolés d'au moins 24 px de haut sur téléphone
   (pied de page, sommaire, coordonnées des tableaux) */
footer nav{gap:4px 16px}
footer nav a,footer .row a,.sommaire li a,td>a[href^="tel:"],td>a[href^="mailto:"]{display:inline-block;padding:7px 0}

/* Question visée par un lien (#suivi-mensuel…) : visible sous l'en-tête collant */
details.q{scroll-margin-top:96px}
/* Titre visé par un lien (ex. site-internet.html#pack-visibilite-locale) : pas caché sous l'en-tête collant */
main h2[id]{scroll-margin-top:96px}

/* ==========================================================================
   Menu commun des pages annexes (généré par scripts/menu.mjs, liens de src/data.js)
   Au-dessus de 1 080 px : liens en ligne + numéro de téléphone. En dessous : bouton « Menu »
   (seulement si JavaScript est actif — sinon les liens restent affichés sur plusieurs lignes).
   La largeur de bascule est aussi écrite dans assets/menu.js.
   ========================================================================== */
header.site .wrap{max-width:1240px}
header.site .row{gap:10px 16px;flex-wrap:wrap}
.menu-site{margin-left:auto}
.menu-site ul{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
.menu-site li{margin:0}
.menu-site a{display:block;padding:9px 13px;border-radius:999px;color:#F2E6DF;text-decoration:none;
  font-weight:600;font-size:14.5px;line-height:1.3;white-space:nowrap;transition:background .3s,color .3s}
.menu-site a:hover{background:rgba(255,255,255,.1);color:#fff}
.menu-site a[aria-current="page"]{background:rgba(217,176,97,.16);color:var(--ocre-2)}
.menu-site__tel{display:none}
.menu-tel{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;background:#6B1E2E;
  color:#fff;font-weight:700;font-size:14.5px;line-height:1.3;text-decoration:none;white-space:nowrap;transition:background .3s}
.menu-tel:hover{background:#8C2E40}
.menu-bouton{display:none}
@media (max-width:1080px){
  .menu-tel{display:none}
  .menu-site{flex-basis:100%;margin-left:0}
  .menu-site ul{flex-wrap:wrap}
  .js-menu .menu-bouton{display:inline-flex;align-items:center;gap:10px;margin-left:auto;padding:11px 16px;
    border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;
    font:700 14.5px/1 'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;cursor:pointer}
  .menu-bouton__barres{position:relative;width:18px;height:2px;border-radius:2px;background:currentColor;transition:background .3s}
  .menu-bouton__barres::before,.menu-bouton__barres::after{content:"";position:absolute;left:0;width:18px;height:2px;
    border-radius:2px;background:currentColor;transition:transform .3s}
  .menu-bouton__barres::before{top:-6px}
  .menu-bouton__barres::after{top:6px}
  .est-ouvert .menu-bouton__barres{background:transparent}
  .est-ouvert .menu-bouton__barres::before{transform:translateY(6px) rotate(45deg)}
  .est-ouvert .menu-bouton__barres::after{transform:translateY(-6px) rotate(-45deg)}
  .js-menu .menu-site{display:none;max-height:calc(100vh - 80px);overflow-y:auto}
  .js-menu header.site.est-ouvert .menu-site{display:block}
  .js-menu .menu-site ul{flex-direction:column;align-items:stretch;gap:0;padding:6px 0 4px}
  .js-menu .menu-site a{padding:14px 4px;border-radius:0;border-top:1px solid rgba(255,255,255,.1);font-size:17px}
  .js-menu .menu-site a[aria-current="page"]{background:transparent}
  .js-menu .menu-site__tel{display:block}
  .js-menu .menu-site__tel a{color:var(--ocre-2)}
  /* Menu ouvert : la Saône à Tournus en transparence (photo de David-Emmanuel, chargée seulement à l'ouverture).
     Mélange « luminosité » : la photo prend la teinte brune de l'en-tête, puis un voile sombre garde les liens lisibles. */
  .js-menu header.site.est-ouvert{background-color:var(--ink);
    background-image:linear-gradient(180deg,rgba(34,26,23,.62) 0%,rgba(34,26,23,.9) 100%),url(photo-saone-tournus-1024.webp);
    background-size:cover;background-position:50% 40%;background-blend-mode:normal,luminosity}
}

/* Téléphone : bouton rond (le mot « Menu » reste lu par les lecteurs d'écran), pour tenir sur la même
   ligne que le logo jusqu'à 320 px de large */
@media (max-width:480px){
  .js-menu .menu-bouton{width:46px;height:46px;padding:0;justify-content:center;flex:none}
  .menu-bouton__texte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .js-menu header.site.est-ouvert{background-image:linear-gradient(180deg,rgba(34,26,23,.62) 0%,rgba(34,26,23,.9) 100%),url(photo-saone-tournus-640.webp)}
}
@media (max-width:360px){
  header.site .wrap{padding:0 16px}
  header.site .row{column-gap:10px}
  header.site .brand i{letter-spacing:.1em}
}

/* Pied de page commun : même espacement sur les pages légales que sur les autres */
footer nav{margin-top:18px}