/* ==========================================================================
   Basile — compléments au CSS d'origine (site.css = Tailwind compilé)
   ========================================================================== */

/* --- Neutralise les espacements automatiques de WordPress ---------------- */
.wp-site-blocks { margin: 0; padding: 0; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100dvh; }
.wp-site-blocks > .basile-main, .wp-site-blocks > main { flex: 1 0 auto; }
:where(.wp-site-blocks) > * { margin-block-start: 0; margin-block-end: 0; }
.basile-page-content, .basile-page-content > *,
.wp-block-template-part { margin: 0; }
:where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }
.wp-block-group { box-sizing: border-box; }
.wp-block-html { margin: 0; }
/* Accessibilité : gris « ink-mute » assombri (contraste AA ≥ 4,5:1 sur paper et paper-deep). */
.text-ink-mute { color: #646977; }
.bg-navy .text-ink-mute, .bg-navy-soft .text-ink-mute { color: #8A8F9C; }
body.admin-bar .basile-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .basile-header { top: 46px; } }
html { scroll-padding-top: 90px; }

[hidden] { display: none !important; }

/* --- Maquettes de conversation (page Assistant IA) ------------------------- */
.bchat { display: flex; flex-direction: column; gap: .75rem; }
.bchat-msg { max-width: 88%; margin: 0; padding: .7rem 1rem; border-radius: 1.1rem; font-size: .9375rem; line-height: 1.55; }
.bchat-user { align-self: flex-end; background: #C7431F; color: #fff; border-bottom-right-radius: .35rem; }
.bchat-bot { align-self: flex-start; background: #1F2634; color: #F5F1E8; border: 1px solid #2C3547; border-bottom-left-radius: .35rem; }
.bg-navy-soft .bchat-bot { background: #141924; }
.bchat-who { display: flex; align-items: center; gap: .5rem; margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 241, 232, .7); }
.bchat-product { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .65rem; padding: .6rem .75rem; border-radius: .75rem; background: #141924; border: 1px solid #2C3547; font-size: .8125rem; }
.bchat-input { margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; border: 1px solid #2C3547; border-radius: 999px; padding: .5rem .5rem .5rem 1rem; color: rgba(245, 241, 232, .6); font-size: .875rem; }
.bchat-send { display: flex; height: 2rem; width: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; background: #C7431F; color: #fff; }
.bchat-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.bchat-chip { border: 1px solid #2C3547; border-radius: 999px; padding: .3rem .75rem; font-size: .75rem; color: rgba(245, 241, 232, .8); }

/* --- Logo ----------------------------------------------------------------- */
.basile-logo { gap: .55rem; text-decoration: none; }
.basile-logo-mark { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.basile-logo-text { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: #191D26; line-height: 1; }
.basile-logo--light .basile-logo-text { color: #F5F1E8; }

/* --- Menu déroulant / mobile -------------------------------------------- */
.basile-dropdown-panel { opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .25s, transform .25s, visibility .25s; }
.basile-dropdown.is-open .basile-dropdown-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.basile-dropdown.is-open .basile-dropdown-toggle .lucide-chevron-down { transform: rotate(180deg); }
.basile-burger .basile-icon-close { display: none; }
.basile-burger.is-open .basile-icon-close { display: block; }
.basile-burger.is-open .basile-icon-open { display: none; }
.basile-mobile-menu[hidden] { display: none !important; }
.basile-mobile-menu { animation: basile-fade .3s ease both; }
@keyframes basile-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Apparition au défilement ------------------------------------------- */
.will-reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.will-reveal.is-in { opacity: 1; transform: none; }
.editor-styles-wrapper .will-reveal { opacity: 1; transform: none; }

/* --- Soulignement manuscrit du titre d'accueil (mot surligné) ------------ */
.u-mark, mark.u-mark {
  background: none; color: inherit; position: relative; display: inline-block; padding: 0;
}
.u-mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: .14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9 Q 50 2 98 7' fill='none' stroke='%23E4572E' stroke-linecap='round' stroke-width='5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* --- Appel final : mascotte uniquement sur l'accueil -------------------- */
body:not(.home) .basile-cta-mascot { display: none !important; }

/* --- FAQ (blocs "Détails" natifs) ---------------------------------------- */
.basile-faq details { border-bottom: 1px solid rgb(230 222 207); }
.basile-faq details:first-of-type { border-top: 1px solid rgb(230 222 207); }
.basile-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; font-size: 1.0625rem; font-weight: 600; color: #191D26; transition: color .2s;
}
.basile-faq summary::-webkit-details-marker { display: none; }
.basile-faq summary:hover { color: #E4572E; }
.basile-faq summary::after {
  content: ""; width: 1.25rem; height: 1.25rem; flex-shrink: 0; transition: transform .3s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4572E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") no-repeat center / contain;
}
.basile-faq details[open] summary::after { transform: rotate(45deg); }
.basile-faq details > :not(summary) { padding-bottom: 1.25rem; padding-right: 2rem; line-height: 1.75; color: rgb(74 79 92); margin: 0; }
.basile-faq--dark details { border-color: rgb(44 53 71); }
.basile-faq--dark summary { color: #F5F1E8; }
.basile-faq--dark details > :not(summary) { color: rgb(245 241 232 / .7); }

/* --- Formulaires ---------------------------------------------------------- */
.basile-input { font: inherit; font-size: 1rem; outline: none; transition: border-color .2s, box-shadow .2s; }
@media (min-width: 768px) { .basile-input { font-size: .875rem; } }
.basile-input::placeholder { color: rgb(138 143 156); }
.basile-input:focus-visible { border-color: #E4572E; box-shadow: 0 0 0 3px rgb(228 87 46 / .2); }
.basile-input[aria-invalid="true"] { border-color: hsl(0 84.2% 60.2%); }
.basile-check { width: 1.25rem; height: 1.25rem; margin-top: .125rem; flex-shrink: 0; accent-color: #E4572E; cursor: pointer; }

/* --- Dialogue "Créer mon agent commercial" ------------------------------ */
.basile-dialog { width: min(32rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; color: inherit; margin: auto; }
.basile-dialog::backdrop { background: rgb(0 0 0 / .5); }
.basile-dialog[open] { animation: basile-pop .2s ease both; }
@keyframes basile-pop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.basile-dialog-close { position: absolute; top: 1rem; right: 1rem; opacity: .7; border-radius: .25rem; padding: .25rem; background: none; border: 0; cursor: pointer; color: inherit; }
.basile-dialog-close:hover { opacity: 1; }

/* --- Articles de blog (contenu éditable) --------------------------------- */
.basile-prose > * + * { margin-top: 1.75rem; }
.basile-prose > p, .basile-prose > ul, .basile-prose > ol { color: rgb(74 79 92); }
.basile-prose > p { font-size: 1.125rem; line-height: 1.75; }
.basile-prose > p.is-style-lead, .basile-prose > p.lead {
  font-family: Fraunces, Georgia, serif; font-size: 1.35rem; line-height: 1.5; color: #191D26; margin-top: 0;
}
.basile-prose > h2 {
  font-family: Fraunces, Georgia, serif; font-size: clamp(1.6rem, 2.8vw, 2.15rem); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.015em; color: #191D26; padding-top: 1.5rem; margin-top: 2.5rem; scroll-margin-top: 100px;
}
.basile-prose > p.is-style-lead + h2, .basile-prose > p.lead + h2 { margin-top: 2.5rem; }
.basile-prose > h3 { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; line-height: 1.25; color: #191D26; }
.basile-prose strong { font-weight: 600; color: #191D26; }
.basile-prose a:not([class]) { color: #C7431F; text-decoration: underline; text-underline-offset: 3px; }
.basile-prose > ul, .basile-prose > ol { list-style: none; padding: 0; }
.basile-prose > ul > li, .basile-prose > ol > li { position: relative; padding-left: 1.25rem; font-size: 1.0625rem; line-height: 1.7; }
.basile-prose > ul > li + li, .basile-prose > ol > li + li { margin-top: .875rem; }
.basile-prose > ul > li::before { content: ""; position: absolute; left: 0; top: .65em; width: .375rem; height: .375rem; border-radius: 9999px; background: #E4572E; }
.basile-prose > ol { counter-reset: b; }
.basile-prose > ol > li { padding-left: 2rem; counter-increment: b; }
.basile-prose > ol > li::before { content: counter(b, decimal-leading-zero); position: absolute; left: 0; top: .15em; font-family: 'JetBrains Mono', monospace; font-size: .8125rem; font-weight: 600; color: #E4572E; }
.basile-prose > blockquote, .basile-prose > .wp-block-quote {
  border-left: 3px solid #E4572E; background: rgb(252 231 220); border-radius: 0 1rem 1rem 0;
  padding: 1.25rem 1.5rem; font-family: Fraunces, Georgia, serif; font-size: 1.25rem; line-height: 1.5; color: #191D26; margin-left: 0; margin-right: 0;
}
.basile-prose > blockquote p { margin: 0; }
.basile-prose > blockquote cite { display: block; margin-top: .75rem; font-family: 'JetBrains Mono', monospace; font-size: .75rem; font-style: normal; color: rgb(138 143 156); }
.basile-prose > figure img { border-radius: 1rem; }
.basile-prose > .basile-box { margin-top: 3.5rem; }

/* --- Éditeur : rendu proche du site -------------------------------------- */
.editor-styles-wrapper { background: #FAF6F0; font-family: Inter, system-ui, sans-serif; color: #191D26; }
.editor-styles-wrapper .basile-faq details > :not(summary) { display: block; }

/* FAQ en cartes (page Agent vocal) */
.basile-faq--cards details, .basile-faq--cards details:first-of-type { border: 1px solid rgb(230 222 207); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(25,29,38,.05), 0 8px 24px -8px rgba(25,29,38,.1); overflow: hidden; }
.basile-faq--cards summary { padding: 1.25rem; }
.basile-faq--cards details > :not(summary) { padding: 0 1.25rem 1.25rem; }

/* ==========================================================================
   Motion design (v1.2)
   ========================================================================== */
.bm .basile-header { animation: bm-header .8s cubic-bezier(.22,1,.36,1) .1s both; }
@keyframes bm-header { from { transform: translateY(-100%); } to { transform: none; } }

/* Titre mot par mot */
.bm-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.bm-wi { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.bm-split.is-in .bm-wi { transform: none; }
.bm-split .u-mark::after { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.65,0,.35,1) var(--bm-d, 1s); }
.bm-split.is-in .u-mark::after { transform: scaleX(1); }

/* Apparition */
.bm-up { opacity: 0; translate: 0 28px; transition: opacity .9s cubic-bezier(.22,1,.36,1), translate .9s cubic-bezier(.22,1,.36,1); }
.bm-up.is-in { opacity: 1; translate: 0 0; }

/* Mascotte + console du hero */
.bm-pop { opacity: 0; scale: .85; transition: opacity .9s ease, scale 1.1s cubic-bezier(.34,1.56,.64,1), translate .6s cubic-bezier(.22,1,.36,1); }
.bm-pop.is-in { opacity: 1; scale: 1; animation: bm-float 5s ease-in-out 1.4s infinite; }
@keyframes bm-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -14px; } }
.bm-slide { opacity: 0; translate: -30px 50px; transition: opacity .8s ease, translate 1s cubic-bezier(.22,1,.36,1); }
.bm-slide.is-in { opacity: 1; translate: 0 0; }

/* Manifeste */
.bm-scrub > span.inline-block { opacity: .18; transition: opacity .35s ease, color .35s ease; }
.bm-scrub > span.inline-block.is-lit { opacity: 1; }

/* Cartes 3D */
.bm-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s; will-change: transform; position: relative; }
.bm-tilt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(228 87 46 / .09), transparent 60%); }
.bm-tilt:hover::before { opacity: 1; }

/* Boutons : reflet */
.bm-shine { position: relative; overflow: hidden; isolation: isolate; transition: translate .25s cubic-bezier(.22,1,.36,1), background-color .2s, scale .2s; }
.bm-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent); transform: skewX(-20deg); transition: left .7s ease; }
.bm-shine:hover::after { left: 130%; }

/* Barre de progression */
.bm-progress { position: fixed; left: 0; right: 0; top: 72px; height: 2px; background: #E4572E; transform-origin: left; transform: scaleX(0); z-index: 45; pointer-events: none; }
body.admin-bar .bm-progress { top: 104px; }

/* Cycle (bande défilante) : pause au survol */
.animate-marquee:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .bm-up, .bm-pop, .bm-slide, .bm-wi { opacity: 1 !important; translate: none !important; transform: none !important; scale: none !important; animation: none !important; }
}