/* Murmures de vous : la feuille de style unique du site.
   Charte graphique 2026 : sauge #819C80, rouge-gorge #EA5810, ardoise #4F7074, brume #EDF0EC, miel #E3A100,
   terre cuite #A43016. Didot (titres) et Argentina Script (signature) : remplacées par Bodoni Moda et Pinyon Script
   en attendant les fichiers de la charte ; Montserrat pour le texte courant, comme la charte. */
:root {
  --sauge: #819c80; --sauge-fonce: #61795f; --orange: #ea5810; --ardoise: #4f7074; --brume: #edf0ec; --miel: #e3a100; --brique: #a43016;
  --encre: #2f3a37; --doux: #5c6a65; --papier: #f8f9f6; --trait: rgba(79,112,116,.18);
  --didot: 'Bodoni Moda', 'Didot', serif; --script: 'Pinyon Script', cursive; --sans: 'Montserrat', system-ui, sans-serif;
  --haut: env(safe-area-inset-top, 0px); --bas: env(safe-area-inset-bottom, 0px);
  --large: 1180px; --rayon: 18px; --ombre: 0 24px 60px rgba(47,58,55,.16);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 16px/1.7 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ardoise); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-weight: 400; color: var(--ardoise); }
h1 { font: 400 clamp(38px, 6.4vw, 72px)/1.08 var(--didot); margin: 0 0 18px; }
h2 { font: 400 clamp(30px, 4.6vw, 50px)/1.12 var(--didot); margin: 0 0 18px; }
h3 { font: 400 clamp(22px, 2.6vw, 28px)/1.25 var(--didot); margin: 0 0 10px; }
p { margin: 0 0 16px; }
.script { font-family: var(--script); color: var(--orange); font-weight: 400; }
.sur { display: block; font: 600 11px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--sauge-fonce); margin-bottom: 14px; }
.chapeau { font-size: clamp(17px, 1.6vw, 19px); color: var(--doux); max-width: 56ch; }
.centre { text-align: center; } .centre .chapeau { margin-left: auto; margin-right: auto; }

/* ---------- Le chuchotement : les lettres arrivent floues, comme un souffle, puis se posent ---------- */
.chuchote .l { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.18em); transition: opacity 1.1s ease, filter 1.3s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.chuchote .m { display: inline-block; white-space: nowrap; }
.chuchote.dit .l { opacity: 1; filter: blur(0); transform: none; }
/* Apparition douce des blocs au défilement. */
.apparait { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .chuchote .l, .apparait { transition: opacity .4s; filter: none; transform: none; } html { scroll-behavior: auto; } }

/* ---------- En-tête (ordinateur) ---------- */
.entete { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: calc(10px + var(--haut)) clamp(18px, 4vw, 48px) 10px; background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .4s; }
.entete.defile { border-bottom-color: var(--trait); }
.entete .logo img { width: 128px; }
.entete nav { display: none; }
@media (min-width: 980px) {
  .entete nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
  .entete nav a { text-decoration: none; color: var(--encre); font: 500 13px/1 var(--sans); letter-spacing: .06em; padding: 8px 0; border-bottom: 1px solid transparent; }
  .entete nav a:hover, .entete nav a[aria-current="page"] { color: var(--orange); border-bottom-color: currentColor; }
  .entete nav .bouton { padding: 13px 20px; border: 0; color: #fff; }
  .entete nav .bouton:hover { color: #fff; }
}
.entete .appel { display: inline-flex; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--orange);
  padding: 10px 12px; border: 1px solid currentColor; border-radius: 99px; }
@media (min-width: 980px) { .entete .appel { display: none; } }

/* ---------- Le menu du dîner (téléphone, sous le pouce) : une enveloppe scellée d'un cachet de cire au rouge-gorge.
   On brise le cachet, l'enveloppe s'ouvre et le menu du site glisse dehors, écrit comme le menu d'un repas de mariage
   (choix de David le 2026-10-06). Sur ordinateur, l'en-tête suffit. ---------- */
body { padding-bottom: calc(88px + var(--bas)); }
.diner .enveloppe { position: fixed; z-index: 47; left: 50%; bottom: calc(12px + var(--bas)); translate: -50% 0; width: 132px; height: 62px; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, #fbf7ee, #f1eadb); border-radius: 4px; box-shadow: 0 10px 24px rgba(47,58,55,.22), inset 0 0 0 1px rgba(0,0,0,.05); perspective: 400px; -webkit-tap-highlight-color: transparent; }
.diner .rabat { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, #f6f0e2, #ebe2cf); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; transition: transform .6s ease; }
.diner .cachet { position: absolute; left: 50%; top: 22px; translate: -50% 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #f07a3c, #c9440b 70%, #a83a0a); box-shadow: 0 3px 6px rgba(0,0,0,.25), inset 0 0 0 3px rgba(0,0,0,.08); transition: transform .45s cubic-bezier(.4,1.6,.5,1), opacity .45s; }
.diner .cachet img { width: 30px; height: auto; opacity: .92; }
.diner .mot { position: absolute; left: 0; right: 0; bottom: -2px; font: 400 17px/1 var(--script); color: var(--sauge-fonce); }
.diner .enveloppe.ouverte .rabat { transform: rotateX(180deg); }
.diner .enveloppe.ouverte .cachet { transform: scale(1.3) rotate(25deg); opacity: 0; }
.diner .carte-menu { position: fixed; z-index: 48; left: 50%; bottom: calc(84px + var(--bas)); translate: -50% 0; width: min(330px, 88vw); max-height: calc(100svh - 120px - var(--bas)); overflow-y: auto;
  background: #fdfbf6; padding: 24px 24px 16px; text-align: center; border-radius: 3px;
  box-shadow: 0 30px 70px rgba(47,58,55,.3), inset 0 0 0 6px #fdfbf6, inset 0 0 0 7px var(--sauge), inset 0 0 0 10px #fdfbf6, inset 0 0 0 11px rgba(129,156,128,.5);
  animation: sort-menu .7s cubic-bezier(.2,.8,.2,1); }
@keyframes sort-menu { from { transform: translateY(70%) scale(.6); opacity: 0; } }
.diner .titre { margin: 0; font: 400 52px/1 var(--script); color: var(--orange); }
.diner .sous { margin: 0 0 12px; font: 600 9px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--sauge-fonce); }
.diner ul { list-style: none; margin: 0; padding: 0; }
.diner li a { display: block; padding: 7px 0; text-decoration: none; color: var(--ardoise); }
.diner li a small { display: block; font: 600 9px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--sauge-fonce); }
.diner li a span { font: italic 400 21px/1.25 var(--didot); }
.diner li a[aria-current="page"] span { color: var(--orange); }
.diner li + li::before { content: ""; display: block; width: 34px; margin: 2px auto; border-top: 1px solid rgba(129,156,128,.45); }
.diner .tout, .diner .refermer { margin: 12px 6px 0; border: 0; background: none; cursor: pointer; font: 600 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--doux); padding: 8px; }
@media (min-width: 980px) { body { padding-bottom: 0; } .diner { display: none; } }
@media (prefers-reduced-motion: reduce) { .diner .carte-menu { animation: none; } }
.menu { position: fixed; z-index: 50; inset: 0; display: none; }
.menu.ouvert { display: block; }
.menu .fond { position: absolute; inset: 0; background: rgba(47,58,55,.35); animation: fondu .3s ease; }
.menu .feuille { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86svh; overflow-y: auto; background: var(--papier); border-radius: 24px 24px 0 0;
  padding: 20px 22px calc(24px + var(--bas)); box-shadow: 0 -20px 50px rgba(0,0,0,.18); animation: monte .35s cubic-bezier(.2,.8,.2,1); }
.menu .feuille img { width: 110px; margin: 4px auto 14px; }
.menu nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.menu nav a { text-decoration: none; color: var(--encre); font: 400 19px/1.3 var(--didot); padding: 10px 0; border-bottom: 1px solid var(--trait); }
.menu nav a[aria-current="page"] { color: var(--orange); }
.menu .fermer { display: block; margin: 18px auto 0; border: 0; background: none; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--doux); padding: 12px; cursor: pointer; }
.menu .installer { display: none; width: 100%; margin-top: 16px; }
.menu .installer.pret { display: block; }
@keyframes fondu { from { opacity: 0; } } @keyframes monte { from { transform: translateY(100%); } }

/* ---------- Sections et mises en page ---------- */
.section { padding: clamp(70px, 10vw, 130px) clamp(20px, 4vw, 48px); }
.section > .dedans { max-width: var(--large); margin: 0 auto; }
.section.brume { background: var(--brume); } .section.sauge { background: var(--sauge); color: #fff; } .section.ardoise { background: var(--ardoise); color: #fff; }
.section.sauge h2, .section.ardoise h2, .section.sauge h3, .section.ardoise h3 { color: #fff; }
.section.sauge .sur, .section.ardoise .sur { color: #e5ece4; } .section.sauge .chapeau, .section.ardoise .chapeau { color: #e7eeeb; }
.section.sauge a:not(.bouton), .section.ardoise a:not(.bouton) { color: #fff; }
.deux-col { display: grid; gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (min-width: 900px) { .deux-col { grid-template-columns: 1fr 1fr; } .deux-col.inverse > :first-child { order: 2; } }
.arche { border-radius: 260px 260px var(--rayon) var(--rayon); overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 4 / 5; }
.arche img, .cadre img { width: 100%; height: 100%; object-fit: cover; }
.cadre { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 4 / 5; }
.branche-deco { position: absolute; width: min(320px, 44vw); opacity: .45; pointer-events: none; }

/* ---------- Haut de page (pages intérieures) ---------- */
.haut { position: relative; overflow: hidden; padding: clamp(50px, 8vw, 100px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 80px); background: radial-gradient(110% 90% at 50% 0%, #fff, var(--brume)); }
.haut > .dedans { max-width: var(--large); margin: 0 auto; position: relative; }
.haut .branche-deco { right: -60px; top: 10px; rotate: 160deg; }
.fil { font-size: 12px; color: var(--doux); margin-bottom: 18px; }
.fil a { color: var(--doux); }
.haut.photo { padding: 0; min-height: min(78svh, 720px); display: grid; align-items: end; color: #fff; background: var(--ardoise); }
.haut.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.haut.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,38,36,.05) 30%, rgba(30,38,36,.72)); }
.haut.photo > .dedans { z-index: 1; padding: 0 clamp(20px, 4vw, 48px) clamp(36px, 6vw, 70px); width: 100%; }
.haut.photo h1, .haut.photo .sur, .haut.photo .chapeau, .haut.photo .fil, .haut.photo .fil a { color: #fff; }

/* ---------- Boutons ---------- */
.bouton { display: inline-block; padding: 17px 26px; border: 0; border-radius: 99px; background: var(--orange); color: #fff; text-decoration: none; cursor: pointer; text-align: center;
  font: 600 12px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 14px 30px rgba(234,88,16,.26); transition: transform .2s, box-shadow .2s; }
.bouton:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(234,88,16,.32); }
.bouton:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.bouton.discret { background: transparent; color: var(--ardoise); box-shadow: inset 0 0 0 1px var(--trait); }
.section.sauge .bouton.discret, .section.ardoise .bouton.discret, .haut.photo .bouton.discret { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.centre .actions { justify-content: center; }

/* ---------- Cartes ---------- */
.cartes { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.carte { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 10px 30px rgba(47,58,55,.08);
  text-decoration: none; color: var(--encre); transition: transform .4s, box-shadow .4s; }
a.carte:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(47,58,55,.16); }
.carte .image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--brume); }
.carte .image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
a.carte:hover .image img { transform: scale(1.05); }
.carte .texte { padding: 20px 22px 24px; }
.carte h3 { margin-bottom: 6px; }
.carte p { color: var(--doux); font-size: 15px; margin: 0; }
.carte .plus { display: inline-block; margin-top: 14px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }

/* ---------- Étapes (la méthode, le déroulé) ---------- */
.etapes { counter-reset: e; display: grid; gap: 18px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.etapes li { counter-increment: e; position: relative; background: #fff; border-radius: var(--rayon); padding: 26px 22px 22px; box-shadow: 0 10px 30px rgba(47,58,55,.07); }
.etapes li::before { content: counter(e, decimal-leading-zero); display: block; font: 600 11px/1 var(--sans); letter-spacing: .24em; color: var(--sauge-fonce); margin-bottom: 12px; }
.etapes li p { color: var(--doux); font-size: 15px; margin: 0; }

/* ---------- Citation et murmures ---------- */
.citation { font: italic 400 clamp(22px, 2.8vw, 32px)/1.4 var(--didot); color: var(--encre); border-left: 2px solid var(--orange); padding-left: 22px; margin: 30px 0; max-width: 40ch; }
.citation cite { display: block; margin-top: 12px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sauge-fonce); font-style: normal; }
.murmures { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.murmure-client { background: #fff; border-radius: var(--rayon); padding: 26px; box-shadow: 0 10px 30px rgba(47,58,55,.08); }
.murmure-client blockquote { margin: 0 0 16px; font: italic 400 19px/1.5 var(--didot); }
.murmure-client .qui { font: 600 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sauge-fonce); }
.ecouter-vocal { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; border: 0; background: var(--brume); border-radius: 99px; padding: 10px 16px; cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); }
.ecouter-vocal .onde { display: inline-flex; gap: 2px; align-items: center; height: 16px; }
.ecouter-vocal .onde i { width: 2px; height: 30%; background: var(--orange); border-radius: 2px; }
.ecouter-vocal.joue .onde i { animation: onde .9s ease-in-out infinite; }
.ecouter-vocal .onde i:nth-child(2) { animation-delay: -.2s; } .ecouter-vocal .onde i:nth-child(3) { animation-delay: -.4s; } .ecouter-vocal .onde i:nth-child(4) { animation-delay: -.6s; }
@keyframes onde { 50% { height: 100%; } }

/* ---------- Formules et tarifs ---------- */
.formules { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: stretch; }
.formule { display: flex; flex-direction: column; background: #fff; border-radius: var(--rayon); padding: 30px 26px; box-shadow: 0 10px 30px rgba(47,58,55,.08); position: relative; }
.formule.phare { background: var(--ardoise); color: #fff; box-shadow: var(--ombre); }
.formule.phare h3, .formule.phare .prix { color: #fff; } .formule.phare li { color: #dfe8e5; }
.formule .nom-script { font: 400 34px/1 var(--script); color: var(--orange); }
.formule.phare .nom-script { color: var(--miel); }
.formule .prix { font: 400 34px/1.1 var(--didot); color: var(--ardoise); margin: 16px 0 4px; }
.formule .prix small { font: 500 13px/1 var(--sans); letter-spacing: .04em; }
.formule ul { margin: 18px 0 24px; padding: 0 0 0 18px; color: var(--doux); font-size: 15px; }
.formule li { margin-bottom: 7px; }
.formule .bouton { margin-top: auto; }
.a-confirmer { display: inline-block; font: 600 9px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brique); background: #fbe9df;
  padding: 5px 8px; border-radius: 99px; vertical-align: middle; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font: 400 clamp(19px, 2vw, 23px)/1.35 var(--didot); color: var(--ardoise); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange);
  transform: rotate(45deg); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details > div { padding: 0 0 22px; color: var(--doux); max-width: 66ch; }

/* ---------- Tirages (photos posées comme des tirages) ---------- */
.tirages { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.tirages figure { margin: 0; width: min(270px, 78vw); background: #fff; padding: 10px 10px 14px; border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,.2); }
.tirages figure:nth-child(odd) { rotate: -2.5deg; } .tirages figure:nth-child(even) { rotate: 2deg; translate: 0 16px; }
.tirages img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.tirages figcaption { margin-top: 10px; font: 400 22px/1 var(--script); color: var(--brique); text-align: center; }
@media (max-width: 700px) { .tirages { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 20px 36px; margin: 0 -20px; }
  .tirages figure { flex: 0 0 72vw; scroll-snap-align: center; } }

/* ---------- Galerie et agrandissement ---------- */
.galerie { columns: 2 220px; column-gap: 14px; }
.galerie a { display: block; margin-bottom: 14px; border-radius: 10px; overflow: hidden; break-inside: avoid; }
.galerie img { width: 100%; transition: transform 1s ease; }
.galerie a:hover img { transform: scale(1.04); }
.agrandi { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(28,34,32,.94); padding: 20px; cursor: zoom-out; animation: fondu .3s ease; }
.agrandi img { max-height: 86svh; width: auto; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.agrandi p { position: absolute; left: 0; right: 0; bottom: calc(18px + var(--bas)); text-align: center; color: #e5ece9; font: italic 400 17px/1.4 var(--didot); padding: 0 20px; }

/* ---------- Formulaires ---------- */
.champ { display: block; margin: 0 0 18px; font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sauge-fonce); }
.champ input, .champ select, .champ textarea { display: block; width: 100%; margin-top: 8px; border: 0; border-bottom: 1px solid rgba(79,112,116,.35); background: transparent;
  padding: 9px 0; font: 400 19px/1.35 var(--didot); color: var(--encre); letter-spacing: 0; text-transform: none; border-radius: 0; }
.champ textarea { min-height: 110px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--orange); }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix button { border: 1px solid var(--trait); background: #fff; border-radius: 99px; padding: 11px 16px; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--encre); transition: all .3s; }
.choix button[aria-pressed="true"] { background: var(--ardoise); color: #fff; border-color: var(--ardoise); }

/* ---------- Dates encore libres ---------- */
.dates { display: flex; flex-wrap: wrap; gap: 10px; }
.date-libre { background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 8px 20px rgba(47,58,55,.08); min-width: 120px; }
.date-libre b { display: block; font: 400 22px/1.1 var(--didot); color: var(--ardoise); }
.date-libre span { font: 600 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sauge-fonce); }
.date-libre.peu b { color: var(--orange); }

/* ---------- Appel final, présent sur chaque page ---------- */
.appel-murmure { position: relative; overflow: hidden; text-align: center; background: var(--brume); padding: clamp(80px, 11vw, 140px) 24px; }
.appel-murmure h2 em { font: 400 1.45em/1 var(--script); color: var(--orange); font-style: normal; }
.appel-murmure .rouge-gorge { width: 120px; margin: 0 auto 18px; cursor: pointer; }
.appel-murmure .branche-deco.g { left: -60px; bottom: -20px; rotate: -20deg; } .appel-murmure .branche-deco.d { right: -60px; top: -10px; rotate: 160deg; }

/* ---------- Pied de page ---------- */
.pied { background: var(--ardoise); color: #dfe8e5; padding: 70px clamp(20px, 4vw, 48px) 40px; font-size: 14px; }
.pied .dedans { max-width: var(--large); margin: 0 auto; display: grid; gap: 34px; }
@media (min-width: 900px) { .pied .dedans { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.pied img { width: 160px; margin-bottom: 14px; }
.pied h3 { font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; } .pied li { margin-bottom: 8px; }
.pied a { color: #dfe8e5; text-decoration: none; } .pied a:hover { color: #fff; text-decoration: underline; }
.pied .signature { font: 400 30px/1 var(--script); color: var(--miel); margin: 8px 0 0; }
.pied .bas { max-width: var(--large); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; font-size: 12px; color: #b9c8c4; }

/* ---------- Accueil ---------- */
/* Le grand logo de l'ouverture suffit : celui de l'en-tête n'apparaît qu'en descendant. */
.accueil .entete .logo { opacity: 0; transition: opacity .5s; } .accueil .entete.defile .logo { opacity: 1; }
.ouverture { position: relative; min-height: calc(100svh - 64px); display: grid; align-items: center; overflow: hidden; padding: 40px clamp(20px, 4vw, 48px) 60px;
  background: radial-gradient(120% 80% at 50% 0%, #fff 0%, var(--brume) 60%, #e3e9e2 100%); }
.ouverture .dedans { max-width: var(--large); margin: 0 auto; width: 100%; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .ouverture .dedans { grid-template-columns: 1.05fr .95fr; } }
.ouverture .logo-grand { width: min(470px, 84vw); margin: 0 0 14px -10px; }
.ouverture .signature { font: 400 clamp(32px, 5vw, 54px)/1 var(--script); color: var(--orange); margin: 6px 0 18px; }
.ouverture .murmure-phrase { font: italic 400 clamp(22px, 2.6vw, 30px)/1.35 var(--didot); color: var(--ardoise); max-width: 22ch; min-height: 2.8em; }
.ouverture .photo-ouverture { position: relative; }
.ouverture .photo-ouverture .arche { max-width: 460px; margin-left: auto; }
.ouverture .photo-ouverture .etiquette { position: absolute; left: -10px; bottom: 30px; background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: var(--ombre);
  font: italic 400 16px/1.3 var(--didot); color: var(--encre); max-width: 230px; }
.ouverture .photo-ouverture .etiquette small { display: block; font: 600 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sauge-fonce); font-style: normal; margin-bottom: 5px; }
.ouverture .branche-deco.b1 { left: -50px; top: 8%; rotate: -18deg; animation: respire 9s ease-in-out infinite; }
@keyframes respire { 50% { transform: translateY(-8px) rotate(2deg); opacity: .6; } }
.chanter { border: 0; background: none; cursor: pointer; padding: 6px 0; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sauge-fonce); text-decoration: underline; text-underline-offset: 5px; }
.promesses { display: grid; gap: 30px; text-align: center; }
@media (min-width: 900px) { .promesses { grid-template-columns: repeat(3, 1fr); } }
.promesses .mot { font: 400 clamp(54px, 7vw, 80px)/1 var(--script); color: var(--orange); }
.section.ardoise .promesses .mot { color: var(--miel); }
.promesses p { max-width: 32ch; margin: 10px auto 0; }

/* ---------- Pastille maquette : signale ce qui reste à confirmer avec Joëlle ---------- */
.maquette { background: #fff7e6; border: 1px dashed var(--miel); border-radius: 12px; padding: 12px 16px; font-size: 13px; color: #6b5310; margin: 18px 0; }

/* ---------- Le seuil : à la première page de chaque visite, la page blanche, le murmure qui s'écrit, puis le
   rouge-gorge. Il s'efface seul après le murmure ; un toucher l'ouvre plus tôt et fait chanter l'oiseau. ---------- */
.seuil { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: #fff; cursor: pointer; padding: 24px; text-align: center;
  transition: opacity 1.6s ease, visibility 1.6s; }
.seuil.parti { opacity: 0; visibility: hidden; pointer-events: none; }
.seuil .phrase-seuil { font: italic 400 clamp(26px, 5.4vw, 52px)/1.25 var(--didot); color: var(--ardoise); max-width: 15ch; margin: 0 auto; }
.seuil .oiseau { width: min(210px, 46vw); margin: 0 auto 28px; opacity: 0; transform: translateY(16px) scale(.94); transition: opacity 1.4s ease, transform 1.6s cubic-bezier(.2,.8,.2,1); }
.seuil.oiseau-la .oiseau { opacity: 1; transform: none; }
.seuil.chante .oiseau { animation: saut-seuil .6s cubic-bezier(.3,1.6,.5,1) 2; }
@keyframes saut-seuil { 40% { transform: translateY(-14px) rotate(-5deg); } }
.seuil .invite { margin-top: 34px; font: 600 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--sauge-fonce); opacity: 0; transition: opacity 1.2s ease; }
.seuil.oiseau-la .invite { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .seuil, .seuil .oiseau { transition: opacity .4s; } }

/* Pied de page : téléphone, e-mail et réseaux (pictogrammes demandés par Joëlle le 2026-10-26). */
.pied .joindre { margin: 18px 0 0; line-height: 1.8; }
.pied .reseaux { display: flex; gap: 12px; margin: 14px 0 0; }
.pied .reseaux a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: #fff; }
.pied .reseaux a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.pied .reseaux svg { width: 20px; height: 20px; }

/* Accueil : le métier dit en clair sous le logo (demande de Joëlle, 2026-10-26). */
.ouverture .metier { font: 600 clamp(15px, 1.6vw, 18px)/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); margin: 4px 0 0; max-width: 30ch; }
.ouverture .metier small { display: block; font: 400 clamp(14px, 1.4vw, 16px)/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--doux); margin-top: 8px; }

/* Dates libres masquées au démarrage (data/dates.json « afficher »). html.avec-dates les remontre. */
html:not(.avec-dates) a[href="/disponibilites"], html:not(.avec-dates) li:has(> a[href="/disponibilites"]),
html:not(.avec-dates) section:has([data-dates]):not(.haut), html:not(.avec-dates) .haut a[href="#calendrier"],
html:not(.avec-dates) #calendrier { display: none !important; }
.sans-calendrier { display: none; margin-top: 26px; }
html:not(.avec-dates) .sans-calendrier { display: block; }
html:not(.avec-dates) .si-dates { display: none; }

/* État d'un service : disponible (sauge) ou bientôt (miel). */
.etat { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--sauge-fonce); color: #fff; font: 600 10px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; }
.etat.bientot { background: var(--miel); color: var(--ardoise); }

.ouverture .metier { margin-bottom: 12px; }

/* Sur murmuresdevous.be, les notes de travail, les pastilles « à confirmer » et les fiches de partenaires vides ne
   s'affichent pas ; sur l'adresse d'essai (html.essai, posé par script.js), elles restent visibles. */
html:not(.essai) .maquette, html:not(.essai) .a-confirmer:not(.garde), html:not(.essai) .emplacement { display: none !important; }