/* Atelier : styles des sites créés. Tout est rangé sous .site, et s'adapte à la largeur de .site (requêtes de conteneur).
   Direction : la photo d'abord, une typographie serrée sur les grands titres, des matières translucides,
   des mouvements amortis qui partent toujours de l'état affiché. */
/*polices:debut*/
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url(../assets/poppins-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 100 900; font-display: swap; src: url(polices/fraunces-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(polices/archivo-latin-wdth-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-display: swap; src: url(polices/dm-serif-display-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url(polices/bricolage-grotesque-latin-wght-normal.woff2) format("woff2"); }
/*polices:fin*/

.site {
  container: site / inline-size;
  --f-texte: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --amorti: cubic-bezier(.22, 1, .36, 1);
  --doux: cubic-bezier(.25, .1, .25, 1);
  --ressort: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --h-entete: 60px;
  --verre: color-mix(in srgb, var(--fond) 74%, transparent);
  background: var(--fond); color: var(--encre);
  font-family: var(--f-texte); font-size: 17px; line-height: 1.5; letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  interpolate-size: allow-keywords;
}
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site :where(h1, h2, h3, p, ul, ol, figure, blockquote, table, dl) { margin: 0; padding: 0; }
.site :where(ul, ol) { list-style: none; }
.site :where(img) { display: block; max-width: 100%; }
.site :where(a) { color: inherit; }
.site :where(button, input, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; }
.site :where(button) { -webkit-tap-highlight-color: transparent; }
.site :focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; border-radius: 6px; }
.site .s-pre { white-space: pre-line; }
.site [hidden] { display: none !important; }

/* ---------- Fonds de section ---------- */
.s-sec { --sf: var(--fond); --sf2: var(--fond-2); --st: var(--encre); --st2: var(--encre-2); --sl: var(--ligne); --sa: var(--c1-ink); --sb: var(--c1); --sbt: var(--c1-txt);
  position: relative; background: var(--sf); color: var(--st); }
.s-sec.fd-teinte { --sf: var(--c1-doux); --sf2: var(--fond); }
.site[data-fond="gris"] .s-sec.fd-teinte { --sf2: #FFFFFF; }
.s-sec.fd-clair { --sf: #FFFFFF; --sf2: #F5F5F7; --st: #1D1D1F; --st2: #6E6E73; --sl: #E3E3E6; --sa: var(--c1-ink-c); }
.s-sec.fd-sombre { --sf: #0E0F11; --sf2: #1C1D20; --st: #F5F5F7; --st2: #A1A1A6; --sl: #2C2D31; --sa: var(--c1-ink-s); --sb: var(--cs); --sbt: var(--cs-txt); }
.site[data-fond="sombre"] .s-sec:not(.fd-clair):not(.fd-teinte):not(.fd-couleur) { --sb: var(--cs); --sbt: var(--cs-txt); }
.s-sec.fd-couleur, .site .b-heros.v-aplat, .site .b-promo.v-bandeau, .site .b-annonce.v-couleur {
  --sf: var(--c1); --sf2: color-mix(in srgb, var(--c1-txt) 10%, var(--c1)); --st: var(--c1-txt); --st2: color-mix(in srgb, var(--c1-txt) 74%, var(--c1)); --sl: color-mix(in srgb, var(--c1-txt) 22%, var(--c1)); --sa: var(--c1-txt); --sb: var(--c1-txt); --sbt: var(--c1); }
.s-sec.esp-s { padding-block: clamp(36px, 6cqi, 60px); }
.s-sec.esp-m { padding-block: clamp(64px, 10cqi, 124px); }
.s-sec.esp-l { padding-block: clamp(88px, 14cqi, 172px); }
.s-in { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 5.2cqi, 44px); }

/* ---------- Typographie : approche serrée sur les grandes tailles, neutre sur le texte ---------- */
.s-h1, .s-h2, .s-h3, .s-cit, .s-cpt-c b, .s-fid-nom, .s-marque b, .s-gros, .s-fin-titre {
  font-family: var(--f-titre); font-weight: var(--t-poids); text-transform: var(--t-casse); font-stretch: var(--t-large); }
.s-h1 { font-size: clamp(2.7rem, 8.6cqi, 6.4rem); line-height: .98; letter-spacing: var(--t-esp-g); overflow-wrap: anywhere; text-wrap: balance; }
.s-h2 { font-size: clamp(2.05rem, 5.6cqi, 3.9rem); line-height: 1.04; letter-spacing: var(--t-esp-g); text-wrap: balance; overflow-wrap: anywhere; max-width: 22ch; }
.s-h3 { font-size: 1.2rem; line-height: 1.2; letter-spacing: var(--t-esp); }
.s-gris { color: var(--st2); }
.s-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.s-tete > :first-child { min-width: 0; flex: 1 1 420px; }
.s-lead { margin-top: 16px; max-width: 52ch; font-size: clamp(1.06rem, 1.9cqi, 1.3rem); line-height: 1.45; color: var(--st2); letter-spacing: -.015em; }
.s-texte { margin-top: 18px; max-width: 60ch; font-size: clamp(1.04rem, 1.6cqi, 1.18rem); line-height: 1.55; color: var(--st2); }
.s-sur { font-size: clamp(.95rem, 1.6cqi, 1.1rem); font-weight: 600; color: var(--sa); margin-bottom: 12px; letter-spacing: -.01em; }
.s-mini { font-size: .8rem; color: var(--st2); letter-spacing: 0; }
.s-vide { font-size: .92rem; color: var(--st2); padding: 6px 0; }
.s-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 30px; }
.s-act:empty { display: none; }
.s-act--c { justify-content: center; }
.s-h2 + .s-lead { margin-top: 14px; }

/* ---------- Boutons : réponse dès l'appui ---------- */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--rb); background: var(--sb); color: var(--sbt); font-weight: 600; font-size: 1.02rem; line-height: 1.1; letter-spacing: -.012em; text-decoration: none; cursor: pointer;
  transition: transform .5s var(--amorti), background-color .25s var(--doux), box-shadow .25s var(--doux), opacity .25s; touch-action: manipulation; }
.s-btn:active { transform: scale(.955); transition-duration: .08s; }
@media (hover: hover) { .s-btn:hover { background: color-mix(in srgb, var(--sb) 88%, var(--sbt)); } }
.s-btn:disabled { opacity: .32; cursor: default; transform: none; }
.s-btn--2 { background: transparent; color: var(--sa); box-shadow: inset 0 0 0 1.25px currentColor; }
@media (hover: hover) { .s-btn--2:hover { background: color-mix(in srgb, var(--sa) 8%, transparent); } }
.s-btn--s { min-height: 36px; padding: 0 16px; font-size: .9rem; }
.s-btn--chev { min-height: 44px; padding: 0 2px; background: none; color: var(--sa); box-shadow: none; }
.s-btn--chev::after { content: ""; width: 7px; height: 7px; margin-left: 1px; border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor; transform: rotate(45deg) translateY(1px); transition: transform .4s var(--amorti); }
@media (hover: hover) { .s-btn--chev:hover { background: none; text-decoration: underline; text-underline-offset: 4px; } .s-btn--chev:hover::after { transform: translateX(3px) rotate(45deg) translateY(1px); } }
.s-btn--lien { min-height: 0; padding: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.s-lien { background: none; border: 0; padding: 0; color: var(--st2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Statut ouvert / fermé ---------- */
.s-statut { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 7px 14px 7px 12px; border-radius: 99px; background: color-mix(in srgb, currentColor 8%, transparent); font-size: .92rem; font-weight: 550; letter-spacing: -.01em; }
.s-statut i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #2FB463; flex: none; }
.s-statut:not(.ferme):not(.inconnu) i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: s-pouls 2.2s var(--amorti) infinite; }
@keyframes s-pouls { from { transform: scale(1); opacity: .55; } to { transform: scale(3); opacity: 0; } }
.s-statut.ferme i { background: #E5603B; }
.s-statut.inconnu i { background: #9AA0A6; }
/* Chez le barbier, le point « ouvert » devient une petite enseigne tournante. */
.site[data-metier="barbier"] .s-statut:not(.ferme):not(.inconnu) i { width: 9px; height: 15px; border-radius: 5px; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.25);
  background: repeating-linear-gradient(135deg, #D7263D 0 3px, #fff 3px 6px, #1E4FD8 6px 9px, #fff 9px 12px); background-size: 100% 34px; animation: s-enseigne 1.8s linear infinite; }
.site[data-metier="barbier"] .s-statut i::after { display: none; }
@keyframes s-enseigne { to { background-position: 0 -16.97px; } }

/* ---------- Images ---------- */
.s-ph { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; min-height: 120px;
  background-color: color-mix(in srgb, var(--c1) 11%, var(--sf2));
  background-image: radial-gradient(circle at 30% 20%, color-mix(in srgb, #fff 30%, transparent), transparent 60%);
  color: color-mix(in srgb, var(--c1) 55%, var(--st)); }
.s-ph-ic { width: min(32%, 64px); height: auto; opacity: .5; stroke-width: 1.2; }
.s-ph span { font-size: .8rem; font-weight: 600; opacity: .8; }
.s-ic { width: 20px; height: 20px; flex: none; }
.s-illu { position: absolute; right: clamp(12px, 3cqi, 28px); bottom: 10px; z-index: 3; margin: 0; font-size: .68rem; font-weight: 500; letter-spacing: .01em; color: var(--st2); opacity: .8; pointer-events: none; }
.b-heros.v-cinema .s-illu, .b-heros.v-photo .s-illu, .b-appel.v-photo .s-illu { color: rgba(255,255,255,.7); }

/* ---------- En-tête : une barre translucide ---------- */
.s-entete { position: relative; z-index: 30; color: var(--encre); background: var(--verre); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--encre) 9%, transparent); transition: background-color .45s var(--doux), color .45s var(--doux), box-shadow .45s var(--doux); }
.s-entete.fixe { position: sticky; top: var(--haut, 0); }
.s-entete-in { display: flex; align-items: center; gap: 18px; max-width: 1180px; margin-inline: auto; height: var(--h-entete); padding-inline: clamp(16px, 5.2cqi, 44px); }
.s-marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.s-marque b { font-size: 1.08rem; line-height: 1.1; letter-spacing: var(--t-esp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-logo { width: auto; height: 36px; max-width: 150px; object-fit: contain; }
.s-logo--l { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 30%; background: var(--c1); color: var(--c1-txt); font-family: var(--f-titre); font-weight: 700; font-size: 1.02rem; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.s-nav { display: none; margin-left: auto; gap: 2px; }
.s-nav a { padding: 8px 12px; border-radius: 99px; text-decoration: none; font-size: .88rem; font-weight: 500; color: var(--encre-2); transition: color .2s, background-color .2s; }
.s-nav a:hover { color: var(--encre); }
.s-nav a.actif { color: var(--encre); font-weight: 600; }
.s-entete-act { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.s-entete-tel { display: none; align-items: center; gap: 7px; text-decoration: none; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.s-entete-tel .s-ic { width: 16px; height: 16px; color: var(--c1-ink); }
.s-entete .s-btn { --sb: var(--c1); --sbt: var(--c1-txt); }
.s-burger { position: relative; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: inherit; }
.s-burger i, .s-burger i::before { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .45s var(--amorti); }
.s-burger i { position: relative; transform: translateY(-3px); }
.s-burger i::before { content: ""; position: absolute; left: 0; top: 6px; }
.s-entete.ouvert .s-burger i { transform: translateY(0) rotate(45deg); }
.s-entete.ouvert .s-burger i::before { transform: translateY(-6px) rotate(-90deg); }
.s-entete.ouvert { --verre: color-mix(in srgb, var(--fond) 94%, transparent); }
.s-entete.ouvert .s-nav { display: grid; align-content: start; position: absolute; left: 0; right: 0; top: 100%; padding: 12px clamp(20px, 5.2cqi, 44px) 30px; background: var(--verre); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 34px 40px -30px rgba(0,0,0,.35); }
.s-entete.ouvert .s-nav a { padding: 9px 0; border-radius: 0; font-size: 1.7rem; font-weight: 650; letter-spacing: -.025em; color: var(--encre); animation: s-lien .55s var(--amorti) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes s-lien { from { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
.s-entete.v-minimal .s-nav, .s-entete.v-minimal .s-burger { display: none !important; }
@container site (max-width: 520px) { .s-entete .s-btn--s { display: none; } }
@container site (min-width: 860px) {
  .s-nav { display: flex; }
  .s-burger { display: none; }
  .s-entete-tel { display: inline-flex; }
  .s-entete-act { margin-left: 14px; }
  .s-entete.ouvert .s-nav { display: flex; position: static; padding: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .s-entete.ouvert .s-nav a { padding: 8px 12px; font-size: .88rem; font-weight: 500; letter-spacing: 0; color: var(--encre-2); animation: none; }
  .s-entete.v-centre .s-entete-in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .s-entete.v-centre .s-marque { grid-column: 2; grid-row: 1; justify-self: center; }
  .s-entete.v-centre .s-nav { grid-column: 1; grid-row: 1; margin: 0; }
  .s-entete.v-centre .s-entete-act { grid-column: 3; grid-row: 1; justify-self: end; }
}
/* Au-dessus d'une grande photo : l'en-tête s'efface, puis redevient une vitre dès qu'on défile. */
.site:not(.ed) > .s-entete ~ main > .b-heros.v-cinema:first-child { margin-top: calc(-1 * var(--h-entete)); }
.site:not(.ed):has(> main:not([hidden]) > .b-heros.v-cinema:first-child) > .s-entete:not(.colle):not(.ouvert) {
  --verre: transparent; --encre: #fff; --encre-2: rgba(255,255,255,.82); --c1-ink: #fff; color: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site:not(.ed):has(> main:not([hidden]) > .b-heros.v-cinema:first-child) > .s-entete:not(.colle):not(.ouvert) .s-btn { --sb: #fff; --sbt: #111; }

/* ---------- Bandeau d'annonce ---------- */
.b-annonce { font-size: .86rem; font-weight: 500; }
.s-sec.b-annonce { padding-block: 0; }
.b-annonce.v-sombre { --sf: #0E0F11; --st: #F5F5F7; }
.b-annonce.v-defile { --sf: var(--encre); --st: var(--fond); }
.s-annonce-in { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; min-height: 40px; padding-block: 8px; text-align: center; }
.b-annonce .s-btn--lien { color: inherit; }
.s-defile { overflow: hidden; white-space: nowrap; padding: 11px 0; }
.s-defile-piste { display: inline-flex; animation: s-defile 30s linear infinite; }
.s-defile-piste span { padding-right: 56px; }
.s-defile-piste span::after { content: "·"; padding-left: 56px; opacity: .6; }
@keyframes s-defile { to { transform: translateX(-50%); } }

/* ---------- Grande bannière ---------- */
.s-heros-txt { max-width: 780px; }
.s-heros-p { margin-top: 20px; font-size: clamp(1.1rem, 2.3cqi, 1.42rem); line-height: 1.4; letter-spacing: -.018em; max-width: 36ch; color: var(--st2); }
.b-heros.v-photo { min-height: clamp(460px, 62cqi + 240px, 780px); display: grid; align-items: end; padding-block: 0 !important; isolation: isolate; color: #fff; overflow: hidden; }
.b-heros.v-photo .s-heros-fond, .b-heros.v-cinema .s-heros-fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0c0c0d; }
.b-heros.v-photo .s-heros-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,10,.84) 0%, rgba(8,8,10,.4) 52%, rgba(8,8,10,.12) 100%); }
.b-heros .s-heros-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.b-heros.v-photo .s-ph, .b-heros.v-cinema .s-ph { background-color: color-mix(in srgb, var(--c1) 70%, #000); color: rgba(255,255,255,.7); }
.b-heros.v-photo .s-ph span, .b-heros.v-cinema .s-ph span { position: absolute; top: calc(var(--h-entete) + 18px); right: 18px; }
.b-heros.v-photo .s-ph-ic, .b-heros.v-cinema .s-ph-ic { position: absolute; right: 7%; top: 18%; width: clamp(80px, 22cqi, 220px); opacity: .2; }
.b-heros.v-photo .s-in { padding-block: 120px clamp(40px, 8cqi, 84px); }
.b-heros.v-photo .s-heros-txt, .b-heros.v-cinema .s-heros-txt { --st: #fff; --st2: rgba(255,255,255,.84); --sa: #fff; --sb: #fff; --sbt: #111; }
.b-heros.v-photo .s-sur, .b-heros.v-cinema .s-sur { color: rgba(255,255,255,.88); }
.s-heros-grille { display: grid; gap: 36px; align-items: center; }
.s-heros-media { position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--rg); overflow: hidden; background: var(--sf2); }
.s-heros-media .s-heros-img { width: 100%; height: 100%; object-fit: cover; }
.b-heros.v-aplat .s-h1 { font-size: clamp(2.9rem, 12cqi, 7.4rem); }
.b-heros.v-aplat .s-in { padding-block: clamp(24px, 6cqi, 60px); }
.s-enseigne { border: 2px solid currentColor; border-radius: var(--r); padding: clamp(28px, 6cqi, 64px) clamp(20px, 5cqi, 56px); text-align: center; position: relative; }
.s-enseigne::before, .s-enseigne::after { content: ""; position: absolute; top: -26px; width: 2px; height: 22px; background: currentColor; opacity: .5; }
.s-enseigne::before { left: 22%; } .s-enseigne::after { right: 22%; }
.s-enseigne .s-heros-txt { margin-inline: auto; }
.s-enseigne .s-heros-p { margin-inline: auto; }
.s-enseigne .s-act { justify-content: center; }
.s-enseigne .s-h1 { font-size: clamp(2.6rem, 11cqi, 6.4rem); }
@container site (min-width: 760px) {
  .s-heros-grille { grid-template-columns: 1.05fr 1fr; gap: 64px; }
  .b-heros.v-partage .s-heros-media { aspect-ratio: 4 / 4.7; }
}
/* Variante « cinéma » : la photo plein cadre, le texte posé en bas, une barre de verre pour l'essentiel. */
.b-heros.v-cinema { min-height: clamp(560px, 50cqi + 340px, 900px); min-height: clamp(560px, 100svh, 940px); display: grid; grid-template-rows: 1fr auto; padding-block: 0 !important; isolation: isolate; color: #fff; overflow: hidden; background: #0c0c0d; }
.b-heros.v-cinema .s-heros-fond::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.5) 0, rgba(0,0,0,0) calc(var(--h-entete) + 90px)), linear-gradient(to right, rgba(0,0,0,.38), rgba(0,0,0,0) 62%), linear-gradient(to top, rgba(6,6,8,.9) 0%, rgba(6,6,8,.6) 38%, rgba(6,6,8,.18) 68%, rgba(6,6,8,.06) 100%); }
@container site (max-width: 640px) { .b-heros.v-cinema .s-heros-fond::after { background: linear-gradient(to bottom, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 140px), linear-gradient(to top, rgba(6,6,8,.92) 0%, rgba(6,6,8,.66) 50%, rgba(6,6,8,.2) 80%, rgba(6,6,8,.08) 100%); } }
.s-cine { align-self: end; padding-top: calc(var(--h-entete) + 60px); }
.s-cine .s-h1 { font-size: clamp(3rem, 9.6cqi, 7.2rem); line-height: .94; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.s-cine .s-heros-p { color: rgba(255,255,255,.88); max-width: 34ch; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.s-cine .s-act { margin-top: 28px; }
.s-cine-bas { padding-block: 26px clamp(26px, 4cqi, 40px); }
.s-verre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; width: fit-content; max-width: 100%; padding: 6px; border-radius: 20px; color: #fff;
  background: rgba(28,28,32,.42); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 20px 40px -24px rgba(0,0,0,.6); }
.s-verre > * { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; font-size: .9rem; font-weight: 550; text-decoration: none; letter-spacing: -.01em; }
.s-verre > * + * { border-left: 1px solid rgba(255,255,255,.18); }
.s-verre .s-statut { margin: 0; background: none; border-radius: 0; padding: 0 14px; }
.s-verre .s-ic { width: 16px; height: 16px; opacity: .85; }
.s-verre a:hover { text-decoration: underline; text-underline-offset: 3px; }
@container site (max-width: 560px) { .s-verre { border-radius: 16px; } .s-verre > * + * { border-left: 0; } .s-verre > * { min-height: 32px; } }

/* ---------- En bref : tuiles ---------- */
.s-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); grid-auto-flow: dense; gap: clamp(10px, 1.6cqi, 16px); margin-top: 34px; }
.s-tete + .s-bento, .s-bento:first-child { margin-top: 0; }
.s-tete:not(:empty) + .s-bento { margin-top: 34px; }
.s-tuile { position: relative; display: grid; align-content: space-between; gap: 14px; min-width: 0; padding: clamp(18px, 2.6cqi, 26px); border-radius: var(--rg); background: var(--sf2); overflow: hidden; color: var(--st); text-decoration: none; }
.s-tuile--l { grid-column: span 2; }
.s-tuile--photo { grid-column: span 2; grid-row: span 2; padding: 0; min-height: 300px; background: var(--sf2); }
.s-tuile--photo2 { grid-column: span 2; padding: 0; min-height: 200px; }
.s-tuile--photo img, .s-tuile--photo2 img, .s-tuile--photo .s-ph, .s-tuile--photo2 .s-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-tuile-l { font-size: .86rem; font-weight: 600; color: var(--st2); display: flex; align-items: center; gap: 8px; letter-spacing: -.005em; }
.s-tuile-l .s-ic { width: 17px; height: 17px; color: var(--sa); }
.s-gros { font-size: clamp(2.6rem, 6.4cqi, 4.4rem); line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums; text-transform: none; }
.s-moyen { font-family: var(--f-titre); font-weight: var(--t-poids); font-stretch: var(--t-large); text-transform: var(--t-casse); font-size: clamp(1.5rem, 3.2cqi, 2.2rem); line-height: 1.05; letter-spacing: var(--t-esp-g); text-wrap: balance; }
.s-tuile p { min-width: 0; }
.s-tuile-x { font-size: .98rem; line-height: 1.4; color: var(--st2); }
.s-tuile .s-etoiles svg { width: 18px; height: 18px; }
.s-tuile .s-statut { margin: 8px 0 0; justify-self: start; align-items: flex-start; padding: 0; background: none; font-size: .9rem; line-height: 1.35; color: var(--st2); }
.s-tuile .s-statut i { margin-top: .32em; }
.s-tuile--note { background: var(--c1); color: var(--c1-txt); --st2: color-mix(in srgb, var(--c1-txt) 76%, var(--c1)); }
.s-tuile--note .s-etoiles svg { fill: color-mix(in srgb, var(--c1-txt) 28%, transparent); }
.s-tuile--note .s-etoiles svg.on { fill: var(--c1-txt); }
.s-tuile--adr { background: var(--sf2); }
.s-tuile--adr .s-btn--chev { justify-self: start; min-height: 0; }
.s-tuile-map { position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background: radial-gradient(circle at 84% 80%, var(--c1) 0 6px, color-mix(in srgb, var(--c1) 22%, transparent) 7px 18px, transparent 19px),
    linear-gradient(100deg, transparent 0 46%, var(--sf) 46% 50%, transparent 50%), linear-gradient(8deg, transparent 0 62%, var(--sf) 62% 66%, transparent 66%); }
.s-tuile--adr > *:not(.s-tuile-map) { position: relative; }
@media (hover: hover) { a.s-tuile { transition: transform .5s var(--amorti); } a.s-tuile:hover { transform: scale(1.012); } }
a.s-tuile:active { transform: scale(.985); transition-duration: .1s; }
@container site (min-width: 760px) {
  .s-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); }
  .s-tuile--photo { min-height: 0; }
}

/* ---------- Commande segmentée (filtre de catégories) ---------- */
.s-seg { position: relative; display: inline-flex; max-width: 100%; margin-top: 30px; padding: 3px; border-radius: calc(var(--rb) + 3px); background: color-mix(in srgb, var(--st) 7%, transparent); overflow-x: auto; scrollbar-width: none; isolation: isolate; }
.s-seg::-webkit-scrollbar { display: none; }
.s-seg button { position: relative; z-index: 1; flex: none; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--rb); background: none; font-size: .9rem; font-weight: 600; color: var(--st2); white-space: nowrap; cursor: pointer; transition: color .25s var(--doux); }
.s-seg button[aria-selected="true"] { color: var(--st); }
.s-seg-pouce { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: var(--rb); background: var(--sf); box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 14px -4px rgba(0,0,0,.14); transition: transform .5s var(--ressort), width .5s var(--ressort); }
.s-seg.pret .s-seg-pouce { visibility: visible; }
.s-seg:not(.pret) .s-seg-pouce { visibility: hidden; }
.fd-teinte .s-seg-pouce { background: var(--sf2); }
.s-sort { animation: s-sort .55s var(--amorti) both; }
@keyframes s-sort { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
.site.ed .s-seg { display: none; }

/* ---------- Tarifs et prestations ---------- */
.s-prest { display: grid; gap: 40px; margin-top: 36px; }
.s-seg + .s-prest { margin-top: 26px; }
.s-prest-g .s-h3 { margin-bottom: 6px; font-size: .86rem; font-family: var(--f-texte); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; font-stretch: normal; color: var(--st2); }
.s-prest-i { display: flex; align-items: baseline; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--sl); }
.s-prest-n { min-width: 0; }
.s-prest-nom { font-weight: 600; font-size: 1.06rem; letter-spacing: -.015em; }
.s-prest-d { font-size: .88rem; color: var(--st2); margin-top: 3px; }
.s-prest-pt { flex: 1; min-width: 16px; }
.s-prest-p { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--st); font-size: 1.06rem; }
.b-prestations.v-liste .s-prest { max-width: 840px; }
@container site (min-width: 900px) {
  .b-prestations.v-liste .s-prest:not(:has(.s-prest-g + .s-prest-g)) { max-width: none; }
  .b-prestations.v-liste .s-prest:not(:has(.s-prest-g + .s-prest-g)) .s-prest-l { columns: 2; column-gap: 64px; }
  .b-prestations .s-prest-i { break-inside: avoid; }
}
@container site (min-width: 900px) {
  .b-prestations.v-liste .s-prest:has(.s-prest-g:not(.s-cache) + .s-prest-g:not(.s-cache)) { grid-template-columns: 1fr 1fr; column-gap: 64px; max-width: none; }
}
.b-prestations.v-cartes .s-prest-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.b-prestations.v-cartes .s-prest-i { flex-direction: column; align-items: flex-start; gap: 22px; padding: 24px; border: 0; border-radius: var(--rg); background: var(--sf2); justify-content: space-between; min-height: 170px; }
.b-prestations.v-cartes .s-prest-pt { display: none; }
.b-prestations.v-cartes .s-prest-p { font-size: 1.9rem; font-family: var(--f-titre); font-weight: var(--t-poids); letter-spacing: -.03em; color: var(--sa); }
.b-prestations.v-ardoise { --sf: #1B201D; --sf2: #232925; --st: #F2EFE6; --st2: #B6B4AA; --sl: rgba(242,239,230,.13); --sa: color-mix(in srgb, var(--c1) 40%, #F2EFE6); --sb: #F2EFE6; --sbt: #1B201D; }
.b-prestations.v-ardoise .s-in { border: 1.5px solid rgba(242,239,230,.2); border-radius: var(--rg); padding: clamp(24px, 5cqi, 60px); max-width: 1080px; background-image: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.05), transparent 60%); }
.b-prestations.v-ardoise .s-tete { justify-content: center; text-align: center; }
.b-prestations.v-ardoise .s-h2, .b-prestations.v-ardoise .s-lead { margin-inline: auto; }
.b-prestations.v-ardoise .s-seg { display: flex; width: fit-content; margin-inline: auto; }
.b-prestations.v-ardoise .s-seg-pouce { background: rgba(242,239,230,.14); box-shadow: none; }
.b-prestations.v-ardoise .s-prest-g .s-h3 { text-align: center; margin: 4px 0 6px; color: var(--sa); }
.b-prestations.v-ardoise .s-prest-pt { border-bottom: 1.5px dotted rgba(242,239,230,.28); transform: translateY(-5px); }
@container site (min-width: 900px) { .b-prestations.v-ardoise .s-prest:has(.s-prest-g:not(.s-cache) + .s-prest-g:not(.s-cache)) { grid-template-columns: 1fr 1fr; column-gap: 64px; } }
.s-cache { display: none !important; }

/* ---------- Produits ---------- */
.s-prod { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 230px), 1fr)); gap: clamp(14px, 2.4cqi, 24px) clamp(12px, 2cqi, 20px); margin-top: 36px; }
.s-seg + .s-prod { margin-top: 26px; }
.s-prod-i { min-width: 0; }
.s-prod-m { position: relative; aspect-ratio: 1 / 1; border-radius: var(--rg); overflow: hidden; background: var(--sf2); }
.s-prod-img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--amorti); }
@media (hover: hover) { .s-prod-i:hover .s-prod-img { transform: scale(1.04); } }
.s-prod-m .s-ph { min-height: 0; }
.s-prod-vide { display: grid; place-items: center; width: 100%; height: 100%; background: color-mix(in srgb, var(--c1) 9%, var(--sf2)); color: color-mix(in srgb, var(--c1) 60%, var(--st)); }
.s-prod-vide .s-ph-ic { width: 30%; opacity: .45; }
.s-prod-mot { padding: 14px; text-align: center; font-family: var(--f-titre); font-weight: var(--t-poids); font-stretch: var(--t-large); text-transform: var(--t-casse); font-size: clamp(1.3rem, 3.4cqi, 2rem); line-height: 1; letter-spacing: var(--t-esp-g); color: var(--c1-ink); text-wrap: balance; overflow-wrap: anywhere; }
.fd-sombre .s-prod-mot, .site[data-fond="sombre"] .s-prod-mot { color: var(--c1-ink-s); }
.s-badge { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.72); color: #111; -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); font-size: .74rem; font-weight: 650; letter-spacing: 0; }
.s-prod-t { padding: 14px 2px 0; }
.s-prod-nom { font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.s-prod-p { margin-top: 4px; color: var(--st2); }
.s-prod-p b { font-weight: 600; color: var(--st); font-variant-numeric: tabular-nums; }
.s-prod-p small { font-size: .86rem; }
.b-produits.v-rangee .s-prod { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(20px, 5.2cqi, 44px); padding-bottom: 6px; scrollbar-width: none; margin-inline: calc(-1 * clamp(20px, 5.2cqi, 44px)); padding-inline: clamp(20px, 5.2cqi, 44px); }
.b-produits.v-rangee .s-prod::-webkit-scrollbar { display: none; }
.b-produits.v-rangee .s-prod-i { flex: 0 0 min(72%, 290px); scroll-snap-align: start; }
/* Vitrine de boucher : la photo et l'étiquette noire piquée dans la viande. */
.b-produits.v-vitrine .s-prod { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.b-produits.v-vitrine .s-prod-m { aspect-ratio: 4 / 4.4; }
.s-pique { position: absolute; left: 14px; bottom: 16px; z-index: 2; display: grid; gap: 1px; min-width: 112px; max-width: calc(100% - 28px); padding: 7px 12px 8px; border-radius: 3px; background: #121212; color: #fff; transform: rotate(-2.5deg); transform-origin: 30% 0; box-shadow: 0 8px 18px -6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); font-family: var(--f-texte); text-transform: none; }
.s-pique::before { content: ""; position: absolute; left: 34px; top: -26px; width: 3px; height: 28px; border-radius: 2px; background: linear-gradient(90deg, #cfd2d6, #f4f5f6 40%, #9aa0a6); box-shadow: 0 2px 2px rgba(0,0,0,.2); }
.s-pique small { font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-pique b { font-size: 1.55rem; line-height: 1.05; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.s-pique i { font-style: normal; font-size: .76rem; opacity: .75; }
.site.anim .b-produits.v-vitrine .s-pique { transition: transform .8s var(--ressort) .3s; }
.site.anim .b-produits.v-vitrine:not(.vu) .s-pique { transform: rotate(-12deg) translateY(10px); }
@media (hover: hover) { .b-produits.v-vitrine .s-prod-i:hover .s-pique { transform: rotate(1deg); } }
.b-produits.v-vitrine .s-prod-t { display: none; }
.b-produits.v-vitrine .s-prod-vide { background: radial-gradient(ellipse at 30% 20%, #3a3a3c, #161618 70%); color: rgba(255,255,255,.4); }
.b-produits.v-vitrine .s-prod-vide .s-ph-ic { transform: translateY(-18%); }
.site.ed .b-produits.v-vitrine .s-prod-t { display: block; }

/* ---------- Flèches de défilement ---------- */
.s-fleches { display: flex; gap: 10px; flex: none; }
.s-fleche { width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--st) 8%, transparent); color: var(--st); cursor: pointer; transition: opacity .25s, transform .4s var(--amorti), background-color .2s; }
.s-fleche:active:not(:disabled) { transform: scale(.9); transition-duration: .08s; }
.s-fleche:disabled { opacity: .3; cursor: default; }
.s-fleche::before { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-2px) rotate(45deg); }
.s-fleche[data-prec]::before { transform: translateX(2px) rotate(-135deg); }
@media (hover: hover) { .s-fleche:hover:not(:disabled) { background: color-mix(in srgb, var(--st) 14%, transparent); } }
.site.ed .s-fleches { display: none; }
@container site (max-width: 640px) { .s-fleches { display: none; } }

/* ---------- Réservation et commande ---------- */
.s-resa { margin-top: 36px; padding: clamp(16px, 3.4cqi, 32px); border-radius: var(--rg); background: var(--sf2); box-shadow: 0 1px 0 color-mix(in srgb, var(--st) 6%, transparent), 0 30px 60px -40px rgba(0,0,0,.25); }
.s-resa-g { display: grid; gap: 28px; }
.s-resa-g > *, .s-resa-etape, .s-resa-col { min-width: 0; }
.s-resa-q { font-weight: 650; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--st2); margin-bottom: 12px; }
.s-services { display: grid; border-radius: min(var(--r), 16px); background: var(--sf); box-shadow: inset 0 0 0 1px var(--sl); overflow: hidden; }
.s-service { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; transition: background-color .2s; }
.s-service + .s-service::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; height: 1px; background: var(--sl); }
.s-service::after { content: ""; grid-column: 1; grid-row: 1; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--st) 28%, transparent); transition: box-shadow .3s var(--amorti), background-color .2s; }
.s-service span { grid-column: 2; font-weight: 600; letter-spacing: -.012em; }
.s-service small { grid-column: 3; color: var(--st2); white-space: nowrap; font-size: .86rem; font-variant-numeric: tabular-nums; }
.s-service.on { background: color-mix(in srgb, var(--sb) 6%, transparent); }
.s-service.on::after { background: var(--sb); box-shadow: inset 0 0 0 5.5px var(--sb), inset 0 0 0 10px var(--sbt); }
.s-service:active { background: color-mix(in srgb, var(--st) 5%, transparent); }
.s-resa-jours { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: -2px -2px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
.s-resa-jours::-webkit-scrollbar { display: none; }
.s-puce { flex: none; display: grid; justify-items: center; gap: 1px; min-width: 58px; padding: 9px 10px 10px; border: 0; border-radius: 14px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--sl); cursor: pointer; scroll-snap-align: start; transition: background-color .25s var(--doux), color .25s, transform .4s var(--amorti); }
.s-puce small { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.s-puce b { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.s-puce:active { transform: scale(.94); transition-duration: .08s; }
.s-puce.on { background: var(--sb); color: var(--sbt); box-shadow: none; }
.s-resa-heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.s-heure { padding: 11px 0; border: 0; border-radius: min(var(--rb), 12px); background: var(--sf); box-shadow: inset 0 0 0 1px var(--sl); font-weight: 600; font-size: .94rem; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s, transform .4s var(--amorti); }
.s-heure:active:not(:disabled) { transform: scale(.93); transition-duration: .08s; }
.s-heure.on { background: var(--sb); color: var(--sbt); box-shadow: none; }
.s-heure:disabled { background: transparent; box-shadow: none; color: var(--st2); text-decoration: line-through; opacity: .45; cursor: default; }
.s-resa-heures .s-vide { grid-column: 1 / -1; }
.s-resa-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--sl); }
.s-resa-recap { font-size: .95rem; color: var(--st2); min-width: 0; flex: 1 1 220px; }
.s-resa-recap b { color: var(--st); font-weight: 650; }
.s-cmd-l { display: grid; border-radius: min(var(--r), 16px); background: var(--sf); box-shadow: inset 0 0 0 1px var(--sl); overflow: hidden; }
.s-cmd-ligne { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; transition: background-color .25s; }
.s-cmd-ligne + .s-cmd-ligne::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--sl); }
.s-cmd-ligne.on { background: color-mix(in srgb, var(--sb) 5%, transparent); }
.s-cmd-ligne p { min-width: 0; }
.s-cmd-ligne b { display: block; font-weight: 600; letter-spacing: -.012em; }
.s-cmd-ligne small { color: var(--st2); font-size: .86rem; font-variant-numeric: tabular-nums; }
.s-pas { display: flex; align-items: center; flex: none; padding: 3px; border-radius: 99px; background: color-mix(in srgb, var(--st) 6%, transparent); }
.s-pas-b { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: transform .4s var(--amorti), background-color .2s, opacity .2s; }
.s-pas-plus { background: var(--sb); color: var(--sbt); }
.s-pas-b:active:not(:disabled) { transform: scale(.84); transition-duration: .08s; }
.s-pas-b:disabled { opacity: .3; cursor: default; }
.s-pas-v { min-width: 3.4em; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; font-size: .92rem; }
.s-pas-v.hop { animation: s-hop .45s var(--ressort); }
@keyframes s-hop { 0% { transform: scale(.7); opacity: .4; } }
.s-resa-form { display: grid; gap: 14px; max-width: 520px; }
.s-form-recap { padding: 14px 16px; border-radius: min(var(--r), 14px); background: var(--sf); box-shadow: inset 0 0 0 1px var(--sl); font-weight: 550; }
.s-champ { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; }
.s-champ input, .s-champ textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 0; border-radius: min(var(--rb), 12px); background: var(--sf); box-shadow: inset 0 0 0 1px var(--sl); font-size: 17px; font-weight: 400; transition: box-shadow .2s; }
.s-champ textarea { resize: vertical; min-height: 120px; }
.s-champ input:focus, .s-champ textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sb), 0 0 0 4px color-mix(in srgb, var(--sb) 18%, transparent); }
.s-form-err { min-height: 1.2em; font-size: .9rem; font-weight: 600; color: #D9480F; }
.s-form-err:empty { min-height: 0; }
.fd-couleur .s-form-err, .fd-sombre .s-form-err { color: inherit; }
.s-form-act { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.s-resa-fin { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 28px 0 10px; }
.s-resa-fin.joue { animation: s-matiere .7s var(--amorti) both; }
@keyframes s-matiere { from { opacity: 0; transform: scale(.94); filter: blur(10px); } }
.s-coche { width: 66px; height: 66px; fill: none; stroke: var(--sa); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s-coche circle { stroke-dasharray: 145; stroke-dashoffset: 0; }
.s-coche path { stroke-dasharray: 40; stroke-dashoffset: 0; stroke-width: 3.5; }
.s-resa-fin.joue .s-coche circle { animation: s-trace .6s .1s var(--amorti) both; stroke-dashoffset: 145; }
.s-resa-fin.joue .s-coche path { animation: s-trace .4s .5s var(--amorti) both; stroke-dashoffset: 40; }
@keyframes s-trace { to { stroke-dashoffset: 0; } }
.s-fin-titre { font-size: 1.7rem; letter-spacing: var(--t-esp-g); }
.s-fin-texte { color: var(--st2); max-width: 46ch; }
.s-resa-fin .s-btn { margin-top: 10px; }
@container site (min-width: 760px) {
  .b-reservation.v-etapes .s-resa-g, .b-commande.v-carte .s-resa-g { grid-template-columns: 1fr 1.15fr; gap: 40px; }
}

/* ---------- Offre à durée limitée ---------- */
.s-promo-boite { display: grid; gap: 28px; align-items: center; }
.b-promo.v-carte .s-promo-boite { --sf: var(--c1); --st: var(--c1-txt); --st2: color-mix(in srgb, var(--c1-txt) 80%, var(--c1)); --sa: var(--c1-txt); --sb: var(--c1-txt); --sbt: var(--c1); background: var(--c1); color: var(--c1-txt); border-radius: var(--rg); padding: clamp(26px, 5cqi, 56px); background-image: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--c1-txt) 14%, transparent), transparent 55%); }
.s-cpt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.s-cpt-c { display: grid; justify-items: center; gap: 4px; padding: 16px 4px 14px; border-radius: min(var(--r), 16px); background: color-mix(in srgb, currentColor 10%, transparent); }
.s-cpt-c b { font-size: clamp(1.8rem, 5cqi, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: -.03em; }
.s-cpt-c small { font-size: .72rem; opacity: .8; }
.s-cpt-fin { display: none; grid-column: 1 / -1; text-align: center; font-weight: 700; }
.s-cpt.fini .s-cpt-c { opacity: .35; }
.s-cpt.fini .s-cpt-fin { display: block; }
@container site (min-width: 760px) { .s-promo-boite { grid-template-columns: 1.2fr 1fr; gap: 52px; } }

/* ---------- Carte de fidélité ---------- */
.s-fid-g { display: grid; gap: 34px; align-items: center; }
.s-fid-carte { position: relative; width: min(100%, 440px); aspect-ratio: 1.586; justify-self: center; padding: clamp(18px, 4cqi, 28px); border-radius: 20px; background: var(--c1); color: var(--c1-txt); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18); transform: rotate(-3deg); display: grid; align-content: space-between; overflow: hidden;
  background-image: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.16) 45%, rgba(255,255,255,0) 60%); background-size: 260% 100%; }
.site.anim .b-fidelite.vu .s-fid-carte { animation: s-reflet 2.4s .4s var(--doux) both; }
@keyframes s-reflet { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.s-fid-carte::after { content: ""; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; border: 22px solid color-mix(in srgb, var(--c1-txt) 9%, transparent); }
.s-fid-nom { font-size: 1.15rem; line-height: 1.1; letter-spacing: var(--t-esp); }
.s-tampons { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(6px, 1.6cqi, 12px); }
.s-tampon { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--c1-txt) 55%, transparent); display: grid; place-items: center; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.s-tampon:has(.s-tampon-ic) { background: var(--c1-txt); color: var(--c1); border-style: solid; border-color: var(--c1-txt); }
.s-tampon-ic { width: 58%; height: 58%; }
.s-tampon--fin { border-style: solid; border-width: 2px; }
.site.anim .b-fidelite[data-anim] .s-tampon:has(.s-tampon-ic) { transform: scale(0) rotate(-30deg); transition: transform .6s var(--ressort); transition-delay: calc(.45s + var(--i) * .16s); }
.site.anim .b-fidelite.vu .s-tampon:has(.s-tampon-ic) { transform: none; }
@container site (min-width: 760px) { .s-fid-g { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---------- Votre histoire ---------- */
.s-apropos-g { display: grid; gap: 34px; align-items: center; }
.s-apropos-m { position: relative; aspect-ratio: 4 / 4.6; border-radius: var(--rg); overflow: hidden; background: var(--sf2); }
.s-apropos-img { width: 100%; height: 100%; object-fit: cover; }
.s-apropos-t .s-texte { font-size: clamp(1.08rem, 1.9cqi, 1.3rem); line-height: 1.5; letter-spacing: -.015em; }
.s-cit-s { margin-top: 20px; font-weight: 600; color: var(--sa); }
.s-apropos-seul .s-texte { font-size: clamp(1.08rem, 1.9cqi, 1.3rem); }
.s-citation { max-width: 1000px; }
.s-cit-t { font-weight: 600; color: var(--sa); margin-bottom: 18px; }
.s-cit { font-size: clamp(1.7rem, 4.8cqi, 3.3rem); line-height: 1.12; letter-spacing: var(--t-esp-g); text-transform: none; text-wrap: pretty; }
@container site (min-width: 760px) {
  .s-apropos-g { grid-template-columns: 1fr 1.05fr; gap: 72px; }
  .b-apropos.v-droite .s-apropos-m { order: 2; }
}

/* ---------- Photos ---------- */
.s-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 1.4cqi, 14px); margin-top: 36px; }
.s-gal-i { position: relative; aspect-ratio: 1; border-radius: var(--rg); overflow: hidden; background: var(--sf2); }
.s-gal-img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--amorti); }
@media (hover: hover) { .s-gal-i:hover .s-gal-img { transform: scale(1.035); } }
.b-galerie.v-mosaique .s-gal-i:first-child { grid-column: span 2; aspect-ratio: 2 / 1.3; }
.b-galerie.v-defile .s-gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(20px, 5.2cqi, 44px); padding-bottom: 4px; scrollbar-width: none; margin-inline: calc(-1 * clamp(20px, 5.2cqi, 44px)); padding-inline: clamp(20px, 5.2cqi, 44px); }
.b-galerie.v-defile .s-gal::-webkit-scrollbar { display: none; }
.b-galerie.v-defile .s-gal-i { flex: 0 0 min(80%, 420px); scroll-snap-align: start; aspect-ratio: 4 / 5; }
@container site (min-width: 760px) {
  .s-gal { grid-template-columns: repeat(3, 1fr); }
  .b-galerie.v-mosaique .s-gal { grid-template-columns: repeat(4, 1fr); }
  .b-galerie.v-mosaique .s-gal-i:first-child { grid-row: span 2; aspect-ratio: auto; }
}
.s-loupe { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.s-loupe[open] { animation: s-matiere .5s var(--amorti) both; }
.s-loupe::backdrop { background: rgba(8,9,10,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.s-loupe img { max-width: 92vw; max-height: 84vh; border-radius: 14px; }
.s-loupe-x { display: block; margin: 16px auto 0; padding: 10px 20px; border: 0; border-radius: 99px; background: rgba(255,255,255,.92); color: #111; font-weight: 600; cursor: pointer; }

/* ---------- L'équipe ---------- */
.s-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(44%, 180px), 1fr)); gap: 28px 16px; margin-top: 36px; }
.s-membre { text-align: center; }
.s-membre-img { width: min(100%, 150px); aspect-ratio: 1; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; object-fit: cover; }
.s-membre-img.s-ph { min-height: 0; }
.s-membre-nom { font-weight: 650; letter-spacing: -.015em; }
.s-membre-role { font-size: .9rem; color: var(--st2); }
.b-equipe.v-cartes .s-membre-img { width: 100%; aspect-ratio: 3 / 3.7; border-radius: var(--rg); }
.b-equipe.v-cartes .s-membre { text-align: left; }

/* ---------- Avis ---------- */
.s-avis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; margin-top: 36px; }
.s-avi { display: grid; align-content: space-between; gap: 18px; padding: 26px; border-radius: var(--rg); background: var(--sf2); }
.s-etoiles { display: inline-flex; gap: 2px; }
.s-etoiles svg { width: 16px; height: 16px; fill: color-mix(in srgb, var(--st) 16%, transparent); }
.s-etoiles svg.on { fill: #F5A300; }
.s-etoiles--p { position: relative; display: inline-block; vertical-align: middle; }
.s-et-f, .s-et-p { display: flex; gap: 2px; }
.s-et-p { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.s-et-p svg { flex: none; }
.s-avi-t { font-size: 1.1rem; line-height: 1.45; letter-spacing: -.015em; }
.s-avi-n { font-weight: 600; font-size: .9rem; color: var(--st2); }
.b-avis.v-une .s-avis { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
.b-avis.v-une .s-avi { background: none; padding: 0; text-align: center; justify-items: center; }
.b-avis.v-une .s-tete { justify-content: center; text-align: center; }
.b-avis.v-une .s-h2, .b-avis.v-une .s-lead { margin-inline: auto; }
.b-avis.v-une .s-avi-t { font-family: var(--f-titre); font-size: clamp(1.5rem, 4cqi, 2.5rem); line-height: 1.15; letter-spacing: var(--t-esp-g); }

/* ---------- Questions ---------- */
.s-faq-g { display: grid; gap: 28px; }
.s-faq { max-width: 860px; }
.s-faq details { border-bottom: 1px solid var(--sl); }
.s-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 600; font-size: 1.1rem; letter-spacing: -.015em; cursor: pointer; list-style: none; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary i { position: relative; width: 14px; height: 14px; flex: none; transition: transform .45s var(--amorti); }
.s-faq summary i::before, .s-faq summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.8px; border-radius: 2px; background: currentColor; }
.s-faq summary i::after { transform: rotate(90deg); }
.s-faq details[open] summary i { transform: rotate(45deg); }
.s-faq details p { padding: 0 0 22px; color: var(--st2); max-width: 64ch; font-size: 1.02rem; }
.s-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--amorti), content-visibility .45s allow-discrete; }
.s-faq details[open]::details-content { block-size: auto; }
@container site (min-width: 900px) { .b-faq.v-deux .s-faq-g { grid-template-columns: 1fr 1.5fr; gap: 72px; } }

/* ---------- Texte libre ---------- */
.b-texte.v-centre .s-texte-b { text-align: center; }
.b-texte.v-centre .s-texte-b .s-texte, .b-texte.v-centre .s-h2 { margin-inline: auto; }
.b-texte.v-centre .s-texte-b .s-act { justify-content: center; }

/* ---------- Horaires ---------- */
.s-hor-g { display: grid; gap: 30px; }
.s-hor { width: 100%; max-width: 580px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.s-hor th, .s-hor td { padding: 13px 12px; border-bottom: 1px solid var(--sl); text-align: left; font-weight: 400; }
.s-hor td { text-align: right; color: var(--st2); }
.s-hor tr.auj th, .s-hor tr.auj td { font-weight: 650; color: var(--st); background: color-mix(in srgb, var(--sb) 8%, transparent); border-bottom-color: transparent; }
.s-hor tr.auj th { border-radius: 10px 0 0 10px; } .s-hor tr.auj td { border-radius: 0 10px 10px 0; }
.s-hor-adr { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; padding: 22px; border-radius: var(--rg); background: var(--sf2); }
.s-hor-adr .s-ic { color: var(--sa); margin-top: 2px; }
.s-hor-adr .s-btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
@container site (min-width: 860px) {
  .s-hor-g { grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
  .b-horaires.v-semaine .s-hor-g { grid-template-columns: .8fr 1.5fr; }
  .b-horaires.v-carte .s-hor-g { grid-template-columns: 1fr 1.2fr 1fr; }
}
/* Variante « semaine » : chaque jour est une barre, comme un emploi du temps. */
.s-sem { display: grid; gap: 4px; min-width: 0; font-variant-numeric: tabular-nums; }
.s-sem-l { display: grid; grid-template-columns: 3.4em 1fr auto; grid-template-areas: "j h h" "p p p"; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 14px; transition: background-color .3s; }
.s-sem-j { grid-area: j; font-weight: 600; }
.s-sem-h { grid-area: h; justify-self: end; text-align: right; color: var(--st2); font-size: .92rem; }
.s-sem-p { grid-area: p; position: relative; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--st) 7%, transparent); }
.s-sem-p i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: color-mix(in srgb, var(--sb) 55%, var(--sf)); transform-origin: left; }
.s-sem-l.ferme .s-sem-h { opacity: .7; }
.s-sem-l.auj { background: color-mix(in srgb, var(--sb) 7%, transparent); }
.s-sem-l.auj .s-sem-j, .s-sem-l.auj .s-sem-h { color: var(--st); font-weight: 650; }
.s-sem-l.auj .s-sem-p i { background: var(--sb); }
.s-sem-mtn { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--st); box-shadow: 0 0 0 2px var(--sf); }
.s-sem-mtn::before { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--st); }
.s-sem-axe { display: grid; grid-template-columns: 4.2em 1fr 11.5em; gap: 12px; padding: 6px 14px 0; }
.s-sem-axe-p { grid-column: 2; display: flex; justify-content: space-between; font-size: .72rem; color: var(--st2); }
.site.anim .b-horaires.v-semaine .s-sem-p i { transition: transform 1s var(--amorti); transition-delay: calc(.2s + var(--i) * 60ms); }
.site.anim .b-horaires.v-semaine:not(.vu) .s-sem-p i { transform: scaleX(0); }
@container site (min-width: 640px) {
  .s-sem-l { grid-template-columns: 4.2em 1fr 11.5em; grid-template-areas: "j p h"; padding: 12px 14px; }
}
@container site (max-width: 639px) { .s-sem-axe { display: none; } }

/* ---------- Adresse et plan ---------- */
.s-acces-g { display: grid; gap: 32px; align-items: center; }
.s-adr { display: flex; gap: 10px; margin-top: 20px; font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; }
.s-adr .s-ic { color: var(--sa); margin-top: 3px; }
.s-plan { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--rg); overflow: hidden; background: #F2EFE9; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.fd-sombre .s-plan, .site[data-fond="sombre"] .s-sec:not(.fd-clair):not(.fd-teinte) .s-plan { background: #1E2023; }
.s-rue { position: absolute; background: #FFFFFF; box-shadow: 0 0 0 1.5px #E4DFD5; }
.fd-sombre .s-rue, .site[data-fond="sombre"] .s-sec:not(.fd-clair):not(.fd-teinte) .s-rue { background: #3A3D42; box-shadow: none; }
.s-rue--1 { left: -10%; right: -10%; top: 42%; height: 18px; transform: rotate(-9deg); }
.s-rue--2 { top: -10%; bottom: -10%; left: 57%; width: 14px; transform: rotate(14deg); }
.s-rue--3 { left: -10%; right: 35%; top: 77%; height: 10px; transform: rotate(5deg); }
.s-rue--4 { top: -10%; bottom: 40%; left: 22%; width: 9px; transform: rotate(-6deg); }
.s-ilot { position: absolute; border-radius: 10px; background: #E7E2D8; }
.s-ilot--1 { left: 64%; top: 6%; width: 24%; height: 26%; background: #CFE5C3; }
.s-ilot--2 { left: 4%; top: 52%; width: 14%; height: 17%; background: #BFDCF2; border-radius: 40% 60% 55% 45%; }
.fd-sombre .s-ilot, .site[data-fond="sombre"] .s-ilot { opacity: .25; }
.s-plan-pin { position: absolute; left: 55%; top: 41%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--c1); color: var(--c1-txt); box-shadow: 0 0 0 3px #fff, 0 10px 20px rgba(0,0,0,.25); }
.s-plan-pin::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--c1); opacity: .35; animation: s-pouls 2.6s var(--amorti) infinite; z-index: -1; }
.s-plan-pin .s-ic { width: 20px; height: 20px; }
.s-plan-tag { position: absolute; left: 55%; top: calc(41% + 30px); transform: translateX(-50%); padding: 6px 11px; border-radius: 10px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #1D1D1F; font-size: .8rem; font-weight: 650; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
@container site (min-width: 760px) { .s-acces-g { grid-template-columns: 1fr 1.25fr; gap: 64px; } }

/* ---------- Contact : liste groupée, comme les réglages d'un téléphone ---------- */
.s-contact-g { display: grid; gap: 34px; }
.s-coords { display: grid; margin-top: 26px; border-radius: min(var(--rg), 20px); background: var(--sf2); overflow: hidden; }
.s-coord { position: relative; display: grid; grid-template-columns: 34px 1fr 10px; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; text-decoration: none; transition: background-color .2s; }
.s-coord + .s-coord::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--sl); }
.s-coord::after { content: ""; width: 7px; height: 7px; border-top: 1.8px solid var(--st2); border-right: 1.8px solid var(--st2); transform: rotate(45deg); opacity: .6; }
.s-coord:active { background: color-mix(in srgb, var(--st) 6%, transparent); }
.s-coord .s-ic { width: 34px; height: 34px; padding: 7px; border-radius: 9px; background: var(--c1); color: var(--c1-txt); }
.s-coord span { display: grid; font-weight: 600; min-width: 0; overflow-wrap: anywhere; letter-spacing: -.012em; }
.s-coord small { font-size: .78rem; font-weight: 500; color: var(--st2); letter-spacing: 0; }
.s-contact-f { display: grid; gap: 14px; align-content: start; padding: clamp(18px, 3.6cqi, 32px); border-radius: var(--rg); background: var(--sf2); }
.s-contact-f .s-btn { justify-self: start; }
.b-contact.v-boutons .s-coords { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; background: none; border-radius: 0; overflow: visible; }
.b-contact.v-boutons .s-coord { padding: 20px; border-radius: var(--rg); background: var(--sf2); }
.b-contact.v-boutons .s-coord::before { display: none; }
@container site (min-width: 860px) { .b-contact.v-formulaire .s-contact-g { grid-template-columns: 1fr 1.1fr; gap: 64px; } }

/* ---------- Réseaux ---------- */
.s-res-g { display: grid; gap: 28px; align-items: center; }
.s-res-l { display: grid; border-radius: min(var(--rg), 20px); background: var(--sf2); overflow: hidden; }
.s-res { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 14px; padding: 14px; text-decoration: none; font-weight: 600; }
.s-res + .s-res::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--sl); }
.s-res .s-ic { width: 34px; height: 34px; padding: 7px; border-radius: 9px; background: var(--st); color: var(--sf); }
.s-res span { display: grid; min-width: 0; }
.s-res small { font-weight: 500; color: var(--st2); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-res--vide { opacity: .55; }
@container site (min-width: 860px) { .s-res-g { grid-template-columns: 1fr 1.2fr; gap: 64px; } }

/* ---------- Appel à l'action ---------- */
.s-appel-b { position: relative; text-align: center; padding: clamp(40px, 8cqi, 96px) clamp(20px, 5cqi, 56px); border-radius: var(--rg); overflow: hidden; isolation: isolate; }
.s-appel-b .s-h2 { max-width: 18ch; margin-inline: auto; }
.s-appel-b .s-lead { margin-inline: auto; }
.b-appel.v-plein .s-appel-b { --st: var(--c1-txt); --st2: color-mix(in srgb, var(--c1-txt) 78%, var(--c1)); --sa: var(--c1-txt); --sb: var(--c1-txt); --sbt: var(--c1); background: var(--c1); color: var(--c1-txt);
  background-image: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--c1-txt) 16%, transparent), transparent 60%); }
.b-appel.v-contour .s-appel-b { box-shadow: inset 0 0 0 1.5px var(--sl); }
.b-appel.v-photo .s-appel-b { --st: #fff; --st2: rgba(255,255,255,.8); --sa: #fff; --sb: #fff; --sbt: #111; color: #fff; min-height: clamp(380px, 40cqi + 180px, 560px); display: grid; align-content: center; background: #0c0c0d; }
.s-appel-fond { position: absolute; inset: 0; z-index: -1; }
.s-appel-fond img, .s-appel-fond .s-ph { width: 100%; height: 100%; object-fit: cover; }
.s-appel-fond::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.42), rgba(0,0,0,.72)); }

/* ---------- Espace ---------- */
.s-hr { border: 0; height: 1px; background: transparent; }
.b-espace.v-ligne .s-hr { background: var(--sl); }

/* ---------- Pied de page ---------- */
.s-pied { background: var(--fond-2); color: var(--encre); font-size: .88rem; }
.s-pied a { text-decoration: none; }
.s-pied a:hover { text-decoration: underline; text-underline-offset: 3px; }
.s-pied-g { display: grid; gap: 32px; padding-block: 56px 36px; }
.s-pied-m p { margin-top: 14px; color: var(--encre-2); max-width: 36ch; }
.s-pied-res { display: flex; gap: 8px; margin-top: 16px; }
.s-pied-res a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fond); }
.s-pied-h { font-weight: 650; margin-bottom: 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--encre-2); }
.s-pied-hor li { display: flex; gap: 12px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.s-pied-hor span { width: 3.2em; color: var(--encre); }
.s-pied-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-block: 18px; border-top: 1px solid var(--ligne); font-size: .78rem; color: var(--encre-2); }
.s-pied-bas nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.s-credit { margin-left: auto; opacity: .75; }
@container site (min-width: 760px) { .s-pied-g { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- Barre d'action sur téléphone ---------- */
.s-dock { display: none; position: sticky; bottom: 0; z-index: 25; height: 84px; margin-top: -84px; padding: 0 10px calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.s-dock-in { display: flex; gap: 8px; align-items: center; height: 64px; margin-top: 8px; padding: 8px; border-radius: 22px; pointer-events: auto;
  background: color-mix(in srgb, var(--fond) 72%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(22px); backdrop-filter: saturate(1.8) blur(22px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--encre) 8%, transparent), 0 18px 40px -16px rgba(0,0,0,.35);
  transform: translateY(130%); opacity: 0; transition: transform .6s var(--amorti), opacity .35s var(--doux); }
.s-dock.vu .s-dock-in { transform: none; opacity: 1; }
.s-dock .s-btn { --sb: var(--c1); --sbt: var(--c1-txt); flex: 1; min-height: 48px; border-radius: 15px; }
.s-dock-tel { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: color-mix(in srgb, var(--encre) 8%, transparent); color: var(--encre); }
.s-dock-tel .s-ic { width: 20px; height: 20px; }
.site.ed .s-dock { display: none !important; }
@container site (max-width: 719px) { .s-dock { display: block; } .s-pied { padding-bottom: 84px; } }

/* ---------- Pages légales ---------- */
.s-legal { max-width: 760px; padding-block: 64px 80px; }
.s-legal .s-h2 { font-size: clamp(2rem, 5cqi, 3rem); }
.s-legal .s-h3 { margin: 32px 0 8px; }
.s-legal p { color: var(--encre-2); }
.s-manque { background: #FFF1B8; color: #5A4300; padding: 0 4px; border-radius: 4px; }

/* ---------- Visibilité selon l'écran ---------- */
@container site (max-width: 719px) { .cache-mob { display: none; } }
@container site (min-width: 720px) { .cache-ord { display: none; } }

/* ---------- Apparition au défilement (option « animations ») ---------- */
.site.anim [data-anim] > .s-in > * { transition: opacity 1s var(--amorti), transform 1s var(--amorti), filter 1s var(--amorti); }
.site.anim [data-anim]:not(.vu) > .s-in > * { opacity: 0; transform: translateY(30px); filter: blur(8px); }
.site.anim [data-anim] > .s-in > :nth-child(2) { transition-delay: .08s; }
.site.anim [data-anim] > .s-in > :nth-child(3) { transition-delay: .16s; }
.site.anim [data-anim] > .s-in > :nth-child(n+4) { transition-delay: .22s; }
.site.anim .b-bento .s-tuile { transition: opacity .9s var(--amorti), transform .9s var(--amorti); transition-delay: calc(var(--i, 0) * 70ms); }
.site.anim .b-bento:not(.vu) .s-tuile { opacity: 0; transform: translateY(28px) scale(.97); }
.site.anim .b-bento:not(.vu) > .s-in > .s-bento { opacity: 1; transform: none; filter: none; }
/* La bannière cinéma a sa propre entrée : la photo se pose, le texte monte. */
.site.anim .b-heros.v-cinema[data-anim] > .s-in > * { opacity: 1; transform: none; filter: none; transition: none; }
.site.anim .b-heros.v-cinema .s-heros-fond { animation: s-pose-h 2s var(--amorti) both; }
@keyframes s-pose-h { from { transform: scale(1.08); opacity: .2; } }
.site.anim .b-heros.v-cinema .s-cine > .s-heros-txt > *, .site.anim .b-heros.v-cinema .s-verre { animation: s-monte 1.1s var(--amorti) both; }
.site.anim .b-heros.v-cinema .s-cine > .s-heros-txt > :nth-child(1) { animation-delay: .25s; }
.site.anim .b-heros.v-cinema .s-cine > .s-heros-txt > :nth-child(2) { animation-delay: .33s; }
.site.anim .b-heros.v-cinema .s-cine > .s-heros-txt > :nth-child(3) { animation-delay: .43s; }
.site.anim .b-heros.v-cinema .s-cine > .s-heros-txt > :nth-child(n+4) { animation-delay: .53s; }
.site.anim .b-heros.v-cinema .s-verre { animation-delay: .7s; }
@keyframes s-monte { from { opacity: 0; transform: translateY(34px); filter: blur(10px); } }
/* Liés au défilement, là où le navigateur sait le faire. */
@supports (animation-timeline: view()) {
  .site.anim .b-heros.v-cinema .s-heros-img { animation: s-cine-sort linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  @keyframes s-cine-sort { to { transform: scale(1.14) translateY(7%); } }
  .site.anim .b-heros.v-cinema .s-cine { animation: s-cine-txt linear both; animation-timeline: view(); animation-range: exit 0% exit 70%; }
  @keyframes s-cine-txt { to { transform: translateY(-60px); opacity: 0; } }
  .site.anim .s-tuile--photo img, .site.anim .s-tuile--photo2 img, .site.anim .s-apropos-img, .site.anim .s-appel-fond img { animation: s-pose linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes s-pose { from { transform: scale(1.14); } to { transform: scale(1); } }
}

/* ---------- Préférences du visiteur ---------- */
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .site.anim [data-anim]:not(.vu) > .s-in > *, .site.anim .b-bento:not(.vu) .s-tuile { opacity: 1; transform: none; filter: none; }
  .s-defile-piste { animation: none !important; }
  .site.anim .s-heros-img, .site.anim .s-cine, .site.anim .s-tuile img, .site.anim .s-apropos-img, .site.anim .s-appel-fond img { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .s-entete, .s-dock-in, .s-entete.ouvert .s-nav { --verre: var(--fond); -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--fond); }
  .s-verre { background: rgba(20,20,22,.88); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .s-badge, .s-plan-tag { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .s-gris, .s-lead, .s-texte { color: var(--st); }
  .s-verre { background: rgba(0,0,0,.86); }
  .s-entete { box-shadow: 0 1px 0 var(--encre); }
}