/* QUALITE24 r33 — couche « luxe 2040 » commune à toutes les pages publiques (posée par injecter-r33.mjs).
   Ambiance lumineuse (jour / coucher de soleil / nuit, heure locale), profondeur et apparitions au défilement,
   lignes de plan qui se dessinent, transitions entre pages, écran de chargement court, lien vers l'appli.
   Uniquement transform / opacity animés ; tout est coupé si « Réduire les animations » est activé. */

:root {
  --q24l-ease: cubic-bezier(.2, .7, .2, 1);
  --q24l-ciel: rgba(186, 209, 229, .55);
  --q24l-lueur: rgba(255, 243, 214, .75);
  --q24l-sombre: rgba(92, 122, 152, .22);
  --q24l-accent: rgba(200, 16, 46, .55);
  --q24l-fond-hero: #f7f5f0;
}
html[data-q24-ambiance='couchant'] {
  --q24l-ciel: rgba(242, 186, 156, .5);
  --q24l-lueur: rgba(255, 196, 140, .6);
  --q24l-sombre: rgba(190, 70, 40, .24);
  --q24l-fond-hero: #f8f2ea;
}
html[data-q24-ambiance='nuit'] {
  --q24l-ciel: rgba(124, 138, 178, .34);
  --q24l-lueur: rgba(255, 200, 128, .34);
  --q24l-sombre: rgba(70, 82, 140, .32);
  --q24l-fond-hero: #efece6;
}

/* ── Ambiance des en-têtes de page (fonds clairs : le texte garde son contraste) ───────────── */
.page-hero, .m-hero, .f-tete, .espace-hero, .cmv-hero {
  position: relative; overflow: clip; isolation: isolate;
  background:
    radial-gradient(48% 70% at 92% 4%, var(--q24l-lueur), transparent 72%),
    radial-gradient(80% 120% at 78% -20%, var(--q24l-ciel), transparent 64%),
    var(--q24l-fond-hero);
  transition: background-color .6s ease;
}
.page-intro, .appel { position: relative; overflow: clip; isolation: isolate; background-image: radial-gradient(60% 110% at 88% -10%, var(--q24l-sombre), transparent 70%); }
.cta-band { position: relative; overflow: clip; isolation: isolate; background-image: radial-gradient(50% 120% at 100% 0%, var(--q24l-sombre), transparent 70%); }
.page-hero > .wrap, .m-hero > *, .f-tete > .wrap, .espace-hero > *, .cmv-hero > .wrap, .page-intro > .container, .appel > .container, .cta-band > .wrap { position: relative; z-index: 1; }

/* Lignes de plan qui se dessinent (décor, aria-hidden), légère profondeur au défilement */
.q24l-plan { position: absolute; z-index: 0; right: max(-40px, calc((100% - 1260px) / 2)); top: 50%; width: min(560px, 46vw); height: auto; margin-top: -170px; pointer-events: none; color: inherit; opacity: .2; will-change: transform; }
.page-intro .q24l-plan, .appel .q24l-plan, .cta-band .q24l-plan { opacity: .14; top: auto; bottom: -60px; margin-top: 0; }
.m-hero .q24l-plan { top: 34px; margin-top: 0; width: min(420px, 36vw); }
.q24l-plan path, .q24l-plan rect, .q24l-plan line, .q24l-plan circle { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.q24l-plan .q24l-cote { stroke: var(--q24l-accent); stroke-width: 1; }
.q24l-plan .q24l-mur { stroke-width: 2.4; }
.q24l-js:not(.q24l-calme) .q24l-plan [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: q24l-trace 2.6s var(--q24l-ease) forwards; }
.q24l-js:not(.q24l-calme) .q24l-plan [pathLength]:nth-child(3n+2) { animation-delay: .25s; }
.q24l-js:not(.q24l-calme) .q24l-plan [pathLength]:nth-child(3n) { animation-delay: .5s; }
@keyframes q24l-trace { to { stroke-dashoffset: 0; } }
@media (max-width: 760px) {
  .q24l-plan { width: 300px; right: -90px; top: auto; bottom: -40px; margin-top: 0; opacity: .1; }
  .m-hero .q24l-plan { display: none; }
}

/* Image d'en-tête de la page Modèles : profondeur (l'image glisse plus lentement que la page) */
.m-hero-fig { overflow: hidden; border-radius: 8px; }
.m-hero-img[data-q24l-par] { transform: translate3d(0, var(--q24l-y, 0px), 0) scale(1.08); will-change: transform; }

/* ── Apparitions au défilement (seulement si le script tourne et sans « Réduire les animations ») ── */
.q24l-js:not(.q24l-calme) .q24l-r { opacity: 0; translate: 0 26px; transition: opacity .9s var(--q24l-ease) var(--q24l-d, 0s), translate 1s var(--q24l-ease) var(--q24l-d, 0s), box-shadow .4s ease, transform .5s var(--q24l-ease); }
.q24l-js:not(.q24l-calme) .q24l-r.q24l-in { opacity: 1; translate: none; }
.q24l-js:not(.q24l-calme) .q24l-r.q24l-net { transition: none; }
.q24l-js:not(.q24l-calme) .q24l-chiffre { transition: opacity .9s var(--q24l-ease), filter .9s var(--q24l-ease), letter-spacing 1.2s var(--q24l-ease); }
.q24l-js:not(.q24l-calme) .q24l-r:not(.q24l-in) .q24l-chiffre { filter: blur(6px); letter-spacing: .08em; }

/* Titres : soulignement rouge qui se trace */
.q24l-js:not(.q24l-calme) .page-hero .rule, .q24l-js:not(.q24l-calme) .m-hero-text .rule { transform-origin: left; animation: q24l-regle 1.1s .3s var(--q24l-ease) both; }
@keyframes q24l-regle { from { transform: scaleX(0); } }
.q24l-js:not(.q24l-calme) .page-hero h1, .q24l-js:not(.q24l-calme) .m-hero-text h1, .q24l-js:not(.q24l-calme) .f-titre h1, .q24l-js:not(.q24l-calme) .page-intro h1 { animation: q24l-titre 1.2s var(--q24l-ease) both; }
@keyframes q24l-titre { from { opacity: 0; transform: translate3d(0, 18px, 0); letter-spacing: .02em; } }

/* ── Profondeur des cartes : ombre douce, léger relief au survol (souris uniquement) ─────────────── */
.m-card, .t-card, .card, .q-type, .f-autres-liste a { transition: box-shadow .4s ease, transform .5s var(--q24l-ease); }
@media (hover: hover) and (pointer: fine) {
  .q24l-js:not(.q24l-calme) .q24l-relief { transform: perspective(1100px) rotateX(var(--q24l-rx, 0deg)) rotateY(var(--q24l-ry, 0deg)) translate3d(0, var(--q24l-ty, 0px), 0); }
  .q24l-js:not(.q24l-calme) .q24l-relief:hover { --q24l-ty: -4px; box-shadow: 0 30px 60px -28px rgba(35, 38, 43, .35), 0 8px 18px -10px rgba(35, 38, 43, .18); }
}

/* ── En-tête et barre de lecture ─────────────────────────────────────────────────────────── */
.site-header { view-transition-name: q24-entete; transition: box-shadow .4s ease, background-color .4s ease; }
.q24l-defile .site-header { box-shadow: 0 12px 30px -24px rgba(0, 0, 0, .45); }
.q24l-lecture { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #8f0b21, #c8102e 70%, #ef5a6f); opacity: .9; }

/* ── Transitions entre pages (navigateurs compatibles ; sinon navigation normale) ──────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: q24l-sortie .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: q24l-entree .5s var(--q24l-ease) both; }
::view-transition-group(q24-entete) { animation-duration: .35s; }
@keyframes q24l-sortie { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes q24l-entree { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* ── Écran de chargement court (première page de la visite, 1,5 s au plus) ───────────────────── */
html.q24l-charge body::before, html.q24l-charge body::after { content: ''; position: fixed; z-index: 2147483000; pointer-events: none; animation: q24l-fin .45s ease 1.05s forwards; }
html.q24l-charge body::before {
  inset: 0;
  background:
    linear-gradient(rgba(31, 33, 36, .05) 1px, transparent 1px) center / 120px 120px,
    linear-gradient(90deg, rgba(31, 33, 36, .05) 1px, transparent 1px) center / 120px 120px,
    radial-gradient(120% 90% at 50% 40%, #fbfaf6 0%, #f3efe6 62%, #e9e2d3 100%);
}
html.q24l-charge body::after {
  left: 50%; top: 50%; width: min(240px, 60vw); height: 150px; transform: translate(-50%, -60%);
  background: url(/assets/web/logo-qualite24-transparent.webp) center / contain no-repeat;
  filter: drop-shadow(0 10px 28px rgba(200, 16, 46, .16));
  animation: q24l-clignote 1.2s ease-in-out infinite, q24l-fin .45s ease 1.05s forwards;
}
html.q24l-charge.q24l-charge-fin body::before, html.q24l-charge.q24l-charge-fin body::after { animation: q24l-fin .4s ease forwards; }
@keyframes q24l-clignote { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes q24l-fin { to { opacity: 0; visibility: hidden; } }

/* ── Lien « Télécharger l'appli » : menu, pied de page, bouton discret ───────────────────────── */
.q24l-appli-lien svg { width: 1em; height: 1em; vertical-align: -.14em; margin-right: .35em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.q24l-appli-pied { display: inline-flex; align-items: center; }
.q24l-appli {
  position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 39;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border-radius: 999px;
  background: rgba(255, 253, 249, .78); color: #23262b; border: 1px solid rgba(35, 38, 43, .12);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .45); font: 500 13px/1 "Instrument Sans", system-ui, sans-serif;
  opacity: 0; transform: translate3d(0, 16px, 0); pointer-events: none; transition: opacity .5s ease, transform .6s var(--q24l-ease);
}
.q24l-appli.q24l-vu { opacity: 1; transform: none; pointer-events: auto; }
.q24l-appli a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.q24l-appli a:hover { color: #9e1022; }
.q24l-appli button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 16px; cursor: pointer; }
.q24l-appli button:hover, .q24l-appli button:focus-visible { background: rgba(35, 38, 43, .08); }
html[data-q24l-page='site'] .q24l-appli { background: rgba(20, 20, 20, .72); color: #f4f2ee; border-color: rgba(255, 255, 255, .14); }
@media (max-width: 1024px) { html[data-q24l-page='site'] .q24l-appli { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 760px) { .q24l-appli { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } }
.q24l-appli.q24l-cache { opacity: 0; visibility: hidden; pointer-events: none; }
@media print { .q24l-appli, .q24l-lecture, .q24l-plan { display: none !important; } }

/* Menu : le lien appli ne doit jamais pousser le logo ni faire déborder l'en-tête */
.q24l-court { display: none; }
.site-header .brand, .site-header .site-logo { flex-shrink: 0; }
.q24l-menu-appli a, .site-nav__liens .q24l-appli-lien { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1240px) {
  .q24l-menu-appli .q24l-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .q24l-menu-appli .q24l-court { display: inline; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .q24l-menu-appli .q24l-court { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .q24l-menu-appli svg { margin-right: 0; width: 1.15em; height: 1.15em; }
}
/* Pages « site » (en-tête sombre) : sur ordinateur moyen, l'en-tête est déjà plein → lien dans le pied de page et bouton discret */
@media (min-width: 1025px) and (max-width: 1439px) { .site-nav__liens .q24l-appli-lien { display: none !important; } }
/* r34 : le menu compte aussi « Boutique » → liens resserrés et téléphone retiré de l'en-tête (il reste dans le pied et sur Contact) */
@media (min-width: 1025px) and (max-width: 1439px) {
  .site-nav__liens a { padding: 0 7px; font-size: .86rem; }
  .site-nav__actions .nav-phone { display: none; }
  .site-nav__actions .button { padding: 0 14px; }
}
@media (min-width: 1440px) and (max-width: 1680px) { .site-nav__liens a { padding: 0 9px; } }

/* ── Réduire les animations : tout est immédiat et immobile ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(q24-entete) { animation: none; }
  html.q24l-charge body::after { animation: q24l-fin .3s ease .6s forwards; }
  html.q24l-charge body::before { animation: q24l-fin .3s ease .6s forwards; }
  .m-hero-img[data-q24l-par] { transform: none; }
  .q24l-appli { transition: none; }
}