/*
 * Composants globaux écrits à la main : nav responsive, menu mobile slide-in,
 * header sticky « glass », CTA, pages légales.
 *
 * Volontairement hors de la chaîne Tailwind : app.css est le *source* Tailwind
 * (directive d'import Tailwind + bloc theme), donc tout ajout là-bas exigerait
 * un tailwind:build. Ce fichier est servi tel quel par AssetMapper, versionné
 * et mis en cache, sans étape de build supplémentaire.
 *
 * NB : ne jamais écrire une directive d'import littérale dans ces commentaires —
 * le parseur d'AssetMapper les lit aussi et tentera de résoudre la cible.
 *
 * Chargé AVANT app.css (voir assets/app.js) pour que les utilitaires Tailwind
 * gardent la priorité en cas d'égalité de spécificité, comme lorsque ce CSS
 * était inliné dans le <head>.
 */

/* Couleur d'action « Try it free » — rouge vif, HORS charte officielle.
   Décision du 2026-09-08 : le CTA d'essai se démarque de l'ambre #C87941, que
   la charte réserve aux CTA, accents et liens, et que le bouton « Buy » du hero
   conserve. Les deux pastilles cessent ainsi d'être jumelles et la hiérarchie
   essai-puis-achat devient lisible.

   Contrastes mesurés sur le fond #050403, libellé encre #050403 :
     --zd-cta        #FF3B30 → 5,78:1  (AA, seuil 4,50)
     --zd-cta-hover  #FF5C52 → 6,74:1

   A d'abord été un vermillon #E25822, écarté le 2026-09-08 : le client le
   lisait comme de l'orange, ce qui était le grief même qu'on traitait.

   Les teintes sont désormais des tokens de charte, déclarés dans le bloc theme
   de app.css. On les référence ici AVEC UN REPLI LITTÉRAL délibéré : app.css est
   régénéré par tailwind:build au déploiement, commande fragile sur O2switch, et
   var/ n'est pas versionné. Sans ce repli, un build raté ferait perdre sa
   couleur au bouton le plus important du site. */
:root {
    --zd-cta: var(--color-red-cta, #FF3B30);
    --zd-cta-hover: var(--color-red-cta-hover, #FF5C52);
}

/* Bouton d'essai plein, hors header — le primaire de la section « Start Mixing ».
   Écrit à la main plutôt qu'en utilitaires Tailwind : ce rouge n'est pas un
   token du theme, et l'y ajouter imposerait un tailwind:build. Les utilitaires
   de mise en forme (taille, rayon, casse) restent sur l'élément ; seules les
   couleurs viennent d'ici. Ne pas laisser bg-gold sur l'élément : app.css est
   chargé après ce fichier et l'emporterait à spécificité égale. */
.zd-cta-solid { background: var(--zd-cta); color: #050403; }
.zd-cta-solid:hover { background: var(--zd-cta-hover); }

/* Bouton secondaire — l'achat dans le hero : présent, mais il ne réclame plus
   l'attention avant que le visiteur sache ce que fait le produit. */
.zd-btn-ghost {
    background: transparent; color: #C87941; cursor: pointer;
    border: 1px solid rgba(200,121,65,.55);
    transition: background .2s, color .2s, border-color .2s;
}
.zd-btn-ghost:hover { background: #C87941; color: #050403; border-color: #C87941; }

/* Action tertiaire — « How it works » : un lien, pas un bouton. */
.zd-link-tertiary { color: #A99B8C; transition: color .2s; }
.zd-link-tertiary:hover { color: #C87941; }

/* Pastille d'essai posée dans la rangée des stats du hero. Demande client : elle
   doit se lire comme une entrée de plus du tableau, d'où un gabarit proche des
   valeurs de stats plutôt qu'un gros bouton. */
.zd-stat-cta {
    display: inline-flex; align-items: center;
    background: var(--zd-cta); color: #050403;
    font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    font-size: .95rem; padding: .7rem 1.5rem; border-radius: 999px;
    white-space: nowrap;
    transition: background .2s, transform .15s, box-shadow .2s;
}
.zd-stat-cta:hover {
    background: var(--zd-cta-hover);
    transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,59,48,.25);
}

/* Impulsion unique du CTA du header, peu après l'arrivée sur la page : le
   mouvement est perçu avant la lecture. Une seule itération — sur un header
   sticky présent partout, une boucle deviendrait vite irritante. */
@keyframes zd-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,59,48,.55); }
    70%  { box-shadow: 0 0 0 14px rgba(255,59,48,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
.zd-stat-cta { animation: zd-cta-pulse 1.2s cubic-bezier(.16,1,.3,1) .8s 1; }

@media (prefers-reduced-motion: reduce) {
    .zd-stat-cta { animation: none; }
}

.zd-nav-links { display: none; }
.zd-burger { display: flex; }
@media (min-width: 768px) {
    .zd-nav-links { display: flex; }
    .zd-burger { display: none; }
    #zd-menu { display: none !important; }
}

/* Animated burger → X */
.zd-burger {
    position: relative; z-index: 60;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 6px; width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer; color: #EDE4D6;
    transition: color .2s;
}
.zd-burger:hover { color: #C87941; }
.zd-burger span {
    display: block; width: 26px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s;
}
.zd-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.zd-burger.is-open span:nth-child(2) { opacity: 0; }
.zd-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Slide-in overlay menu */
#zd-menu { position: fixed; inset: 0; z-index: 50; visibility: hidden; }
#zd-menu.open { visibility: visible; }
.zd-menu-backdrop {
    position: absolute; inset: 0;
    background: rgba(5,4,3,0.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity .35s ease;
}
#zd-menu.open .zd-menu-backdrop { opacity: 1; }
.zd-menu-panel {
    position: absolute; top: 0; right: 0; height: 100%;
    width: 86%; max-width: 360px;
    background-color: #050403; /* solid fallback */
    background-image: linear-gradient(160deg, #161008 0%, #050403 62%);
    border-left: 1px solid rgba(200,121,65,0.22);
    box-shadow: -24px 0 60px rgba(0,0,0,0.5);
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.16,1,.3,1);
    display: flex; flex-direction: column;
    padding: 6.5rem 2rem 2.5rem;
}
#zd-menu.open .zd-menu-panel { transform: translateX(0); }
.zd-menu-eyebrow {
    font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
    color: #C87941; margin-bottom: 1.25rem;
}
.zd-menu-link {
    font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; color: #EDE4D6;
    padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex; align-items: center; justify-content: space-between;
    transition: color .2s, padding-left .2s;
}
.zd-menu-link::after { content: '→'; color: #C87941; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.zd-menu-link:hover, .zd-menu-link:focus { color: #C87941; padding-left: .4rem; }
.zd-menu-link:hover::after, .zd-menu-link:focus::after { opacity: 1; transform: translateX(0); }
.zd-menu-cta {
    margin-top: auto; background: var(--zd-cta); color: #050403;
    font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
    padding: 1rem 1.5rem; border-radius: 999px; text-align: center; transition: background .2s;
}
.zd-menu-cta:hover { background: var(--zd-cta-hover); }

/* Staggered reveal */
#zd-menu .zd-menu-eyebrow, #zd-menu .zd-menu-link, #zd-menu .zd-menu-cta {
    opacity: 0; transform: translateX(16px);
}
#zd-menu.open .zd-menu-eyebrow, #zd-menu.open .zd-menu-link, #zd-menu.open .zd-menu-cta {
    opacity: 1; transform: translateX(0);
    transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
#zd-menu.open .zd-menu-eyebrow { transition-delay: .10s; }
#zd-menu.open .zd-menu-link:nth-of-type(1) { transition-delay: .16s; }
#zd-menu.open .zd-menu-link:nth-of-type(2) { transition-delay: .22s; }
#zd-menu.open .zd-menu-cta { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
    .zd-burger span, .zd-menu-backdrop, .zd-menu-panel,
    #zd-menu .zd-menu-eyebrow, #zd-menu .zd-menu-link, #zd-menu .zd-menu-cta { transition: none !important; }
}

/* ── Sticky glass header ─────────────────────────────────── */
.zd-header {
    position: sticky; top: 0; z-index: 40;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.zd-header.is-scrolled {
    background: rgba(5,4,3,0.8);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom-color: rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}
/* Auto-hide on scroll down, reappear on scroll up */
.zd-header.is-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
    .zd-header.is-hidden { transform: none; }
}

/* Desktop links with animated gold underline + active state */
.zd-link {
    position: relative; color: #A99B8C; padding: .25rem 0;
    font-size: .875rem; font-weight: 500; transition: color .2s;
}
.zd-link:hover, .zd-link.is-active { color: #EDE4D6; }
.zd-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: #C87941; border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.zd-link:hover::after, .zd-link.is-active::after { transform: scaleX(1); }

/* CTA pill du header — DORMANT depuis le 2026-09-08 : le CTA a été retiré du
   header sur demande client, aucun gabarit ne porte plus ces classes. Conservé
   tel quel parce que le retrait est annoncé « pour le moment ».
   Plein : quand il existe, c'est le seul appel à l'action du header.
   Mêmes couleurs que .zd-menu-cta pour que desktop et mobile s'accordent. */
.zd-nav-cta {
    background: var(--zd-cta); color: #050403; font-weight: 700;
    border: 1px solid var(--zd-cta);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .6rem 1.3rem; border-radius: 999px; white-space: nowrap;
    /* Écarté des liens de nav (qui sont à gap 2rem les uns des autres) pour
       cesser de se lire comme le dernier item du menu : c'est une zone
       d'action, pas une entrée de navigation. */
    margin-left: 1.25rem;
    transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.zd-nav-cta:hover {
    background: var(--zd-cta-hover); border-color: var(--zd-cta-hover); color: #050403;
    transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,59,48,.25);
}

@media (prefers-reduced-motion: reduce) {
    .zd-header, .zd-link::after, .zd-nav-cta { transition: none !important; }
    .zd-tm-track { scroll-behavior: auto !important; }
    .zd-tm-slide { transition: none !important; }
}

/* ── Témoignages ─────────────────────────────────────────────────────
   Carrousel à scroll-snap : le glisser, le swipe et l'inertie viennent du
   navigateur. Les pseudo-éléments de gouttière permettent au premier et au
   dernier témoignage de se centrer comme les autres. ─────────────────── */
.zd-tm-track {
    position: relative;
    display: flex; gap: 1.5rem; list-style: none; margin: 2.5rem 0 0; padding: 0 0 .5rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none;
}
.zd-tm-track::-webkit-scrollbar { display: none; }
.zd-tm-track::before,
.zd-tm-track::after { content: ''; flex: 0 0 20%; }
.zd-tm-track:focus-visible { outline: 2px solid var(--zd-cta); outline-offset: 4px; }

.zd-tm-slide {
    flex: 0 0 60%; scroll-snap-align: center;
    display: flex; flex-direction: column; align-items: center;
}

/* Le fondu opacité n'est actif qu'une fois le carrousel amélioré par le JS
   (voir _scripts.html.twig : classe posée après l'installation de
   l'IntersectionObserver qui suit le témoignage centré). Sans JS, tous les
   témoignages restent pleinement lisibles. */
[data-zd-carousel].is-enhanced .zd-tm-slide { opacity: .3; transition: opacity .35s ease; }
[data-zd-carousel].is-enhanced .zd-tm-slide.is-active { opacity: 1; }

@media (max-width: 767px) {
    .zd-tm-slide { flex: 0 0 85%; }
    .zd-tm-track::before, .zd-tm-track::after { flex: 0 0 7.5%; }
}

.zd-tm-bubble {
    position: relative; width: 100%; margin: 0;
    background: #161008; border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.25rem; padding: 2rem 1.75rem;
    color: #C9BCAD; line-height: 1.7;
}
.zd-tm-bubble p { margin: 0; }
/* Pointe vers le bas, comme sur la référence. */
.zd-tm-bubble::after {
    content: ''; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
    border-left: 12px solid transparent; border-right: 12px solid transparent;
    border-top: 12px solid #161008;
}
.zd-tm-quote-mark {
    display: block; font-family: 'Bebas Neue', sans-serif; font-size: 3rem;
    line-height: .5; color: #C87941; opacity: .45; margin-bottom: .5rem;
}

.zd-tm-portrait {
    width: 80px; height: 80px; border-radius: 999px; object-fit: cover;
    margin-top: 1.75rem; border: 1px solid rgba(255,255,255,.12);
}

.zd-tm-name { margin: 1.5rem 0 0; color: #EDE4D6; font-weight: 700; text-align: center; }
.zd-tm-portrait + .zd-tm-name { margin-top: 1rem; }
.zd-tm-role { color: #A99B8C; font-weight: 500; }
.zd-tm-credits { margin: .3rem 0 0; color: #A99B8C; font-size: .85rem; text-align: center; }

.zd-tm-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.zd-tm-credits a:hover { color: #C87941; }
.zd-tm-credits a:focus-visible { outline: 2px solid var(--zd-cta); outline-offset: 2px; }

.zd-tm-dots { display: flex; justify-content: center; gap: .6rem; margin-top: 2rem; }
.zd-tm-dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(255,255,255,.22); cursor: pointer;
    transition: background .2s, transform .2s;
}
.zd-tm-dot[aria-current="true"] { background: var(--zd-cta); transform: scale(1.3); }
.zd-tm-dot:focus-visible { outline: 2px solid var(--zd-cta); outline-offset: 3px; }

/* ── Prose des contenus édités au BO (sortie de l'éditeur Trix) ──────
   .zd-legal habille les pages légales et la section « bio » de la home. Le nom
   est hérité du premier usage ; la prose, elle, est générique. ─────── */
.zd-legal-title {
    font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.2rem, 5vw, 3.2rem);
    letter-spacing: .02em; color: #EDE4D6; line-height: 1.05;
}
.zd-legal-meta { color: #A99B8C; font-size: .8rem; margin-top: .5rem; }
.zd-legal-empty { color: #A99B8C; margin-top: 2rem; }
.zd-legal { color: #C9BCAD; line-height: 1.7; margin-top: 2rem; }
.zd-legal h1, .zd-legal h2, .zd-legal h3 {
    font-family: 'Bebas Neue', sans-serif; color: #EDE4D6;
    letter-spacing: .02em; margin: 2rem 0 .75rem;
}
.zd-legal h1 { font-size: 1.9rem; }
.zd-legal h2 { font-size: 1.5rem; }
.zd-legal p { margin: 0 0 1rem; }
.zd-legal a { color: #C87941; text-decoration: underline; }
.zd-legal a:hover { color: #E8965A; }
.zd-legal ul, .zd-legal ol { margin: 0 0 1rem 1.25rem; }
.zd-legal ul { list-style: disc; }
.zd-legal ol { list-style: decimal; }
.zd-legal li { margin: .3rem 0; }
.zd-legal blockquote {
    border-left: 3px solid rgba(200,121,65,.5); padding-left: 1rem;
    margin: 0 0 1rem; color: #A99B8C;
}

/* ── Footer ──────────────────────────────────────────────── */
.zd-footer { border-top: 1px solid rgba(255,255,255,.08); margin-top: 4rem; }
/* Vertical padding lives here (not Tailwind py-12, which isn't in the precompiled bundle)
   so the content keeps a margin below the top demarcation line. */
.zd-footer > div { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.zd-footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (min-width: 768px) {
    .zd-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
}
.zd-footer-brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .zd-footer-brand { grid-column: auto; } }
.zd-footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; letter-spacing: .04em; line-height: 1; }
.zd-footer-tag { color: #A99B8C; font-size: .85rem; margin-top: .75rem; max-width: 22rem; }
.zd-footer-list { display: flex; flex-direction: column; gap: .55rem; }
.zd-footer-link { color: #A99B8C; font-size: .875rem; transition: color .2s; }
.zd-footer-link:hover { color: #EDE4D6; }
.zd-footer-bottom {
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #A99B8C; font-size: .75rem;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .5rem;
}
.zd-footer-madeby { display: inline-flex; align-items: center; gap: .35rem; }
.zd-footer-madeby .zd-heart { color: #C87941; }
.zd-footer-madeby a { color: #A99B8C; transition: color .2s; }
.zd-footer-madeby a:hover { color: #EDE4D6; }