/* ============================================================
   WHY DS — Composants pages produit — v1.6 (21/08/2026)
   Fichier canonique : /wp-content/why-assets/why-ds.css
   Chargé automatiquement par le mu-plugin why-core.php
   (enqueue conditionnel, version = filemtime).
   Source de vérité des composants .why-ds-* des pages produit.
   ============================================================ */

/* --- Socle page produit --- */
.why-ds-page * { overflow-wrap: break-word; }
.why-ds-page h1, .why-ds-page h2, .why-ds-page h3, .why-ds-page h4 { text-wrap: balance; }
.why-ds.why-ds-page.why-ds-page-bleed, .is-layout-constrained > .why-ds-page-bleed { width: 100vw !important; max-width: 100vw !important; position: relative; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; overflow-x: clip; }

/* --- Hero : visuel produit --- */
.why-ds-hero-visual { display: flex; align-items: center; justify-content: center; }
.why-ds-hero-img { width: 100%; height: auto; display: block; border-radius: var(--why-radius-lg); box-shadow: 0 24px 60px -18px rgba(112,0,0,0.28), 0 0 0 1px rgba(15,15,15,0.06), 0 0 0 8px var(--why-white); }

/* --- Marquee logos clients --- */
.why-ds-logos { padding: 3rem 0; overflow: hidden; }
.why-ds-logos-title { text-align: center; font-size: 0.85rem; color: var(--why-bordeaux); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: 2rem; }
.why-ds-marquee { display: flex; overflow: hidden; padding: 1rem 0; height: 150px; -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
.why-ds-marquee-track { display: flex; gap: 3.5rem; align-items: center; flex-shrink: 0; padding-right: 3.5rem; height: 100%; animation: whyDsMarquee 90s linear infinite; }
.why-ds-marquee:hover .why-ds-marquee-track { animation-play-state: paused; }
.why-ds-marquee-logo { height: auto; max-height: 90px; width: auto; max-width: 190px; object-fit: contain; opacity: 0.8; transition: opacity 0.3s ease; flex-shrink: 0; display: block; }
.why-ds-marquee-logo:hover { opacity: 1; }
@keyframes whyDsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .why-ds-marquee-track { animation: none !important; } }

/* --- Images de zigzag --- */
.why-ds-feature-img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 16px 48px -16px rgba(112,0,0,0.14); }

/* --- Étapes numérotées (Comment ça marche) --- */
.why-ds-method-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 700px) { .why-ds-method-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .why-ds-method-grid { grid-template-columns: repeat(4, 1fr); } .why-ds-method-grid.why-ds-method-grid-5 { grid-template-columns: repeat(5, 1fr); } }
.why-ds-method-step { background: var(--why-white); border: 1px solid var(--why-border); border-radius: var(--why-radius-card); padding: 1.5rem; transition: all 0.3s ease; }
.why-ds-method-step:hover { transform: translateY(-3px); border-color: var(--why-orange); }
.why-ds-method-num { width: 38px; height: 38px; border-radius: 50%; background: var(--why-bordeaux); color: var(--why-creme-light); font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.1rem; display: grid; place-items: center; margin-bottom: 1rem; }
.why-ds-method-step h3 { font-family: 'Inter', sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--why-bordeaux); margin: 0 0 0.5rem; }
.why-ds-method-step p { font-size: 0.88rem; color: var(--why-ink-soft); line-height: 1.55; margin: 0; }

/* --- Grille fonctions à icônes --- */
.why-ds-fn-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 600px) { .why-ds-fn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why-ds-fn-grid { grid-template-columns: repeat(3, 1fr); } }
.why-ds-fn { display: flex; flex-direction: column; align-items: flex-start; background: var(--why-white); border: 1px solid var(--why-border); border-radius: var(--why-radius-card); padding: 1.5rem; transition: all 0.3s ease; }
.why-ds-fn:hover { transform: translateY(-4px); border-color: var(--why-orange); box-shadow: 0 12px 32px -12px rgba(112,0,0,0.12); }
.why-ds-fn-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--why-creme); border: 1px solid var(--why-border); display: grid; place-items: center; margin-bottom: 0.85rem; }
.why-ds-fn h4 { font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--why-bordeaux); margin: 0 0 0.4rem; }
.why-ds-fn p { font-size: 0.86rem; color: var(--why-ink-soft); line-height: 1.55; margin: 0; }

/* --- Pills (métiers non cliquables ou liens suite) --- */
.why-ds-pills { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.25rem; }
.why-ds-pill { background: var(--why-white); border: 1.5px solid var(--why-border); border-radius: 24px; padding: 0.55rem 1.05rem; font-size: 0.88rem; font-weight: 600; color: var(--why-bordeaux); text-decoration: none; transition: border-color 0.25s ease; }
.why-ds-pill:hover { border-color: var(--why-orange); }

/* --- Bande métiers / modules (encadré 2 colonnes) --- */
.why-band-section { padding: 2.25rem 0; }
.why-ds-metiers { background: var(--why-creme-light); border: 1px solid var(--why-border); border-radius: var(--why-radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); display: grid; grid-template-columns: 1fr; gap: 2rem; box-shadow: 0 10px 30px -16px rgba(112,0,0,0.10); }
@media (min-width: 900px) { .why-ds-metiers { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.why-ds-metiers-title { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--why-bordeaux); margin: 0.5rem 0 1rem; line-height: 1.2; font-weight: 600; }
.why-ds-metiers-head p { font-size: 1rem; color: var(--why-ink-soft); line-height: 1.7; margin: 0; }
.why-ds-metiers-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 500px) { .why-ds-metiers-cards { grid-template-columns: repeat(2, 1fr); } }
.why-ds-metier-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--why-white); border: 1px solid var(--why-border); border-radius: var(--why-radius-card); padding: 1.5rem; text-decoration: none; transition: all 0.3s ease; }
.why-ds-metier-card:hover { transform: translateY(-3px); border-color: var(--why-orange); box-shadow: 0 10px 28px -10px rgba(112,0,0,0.1); }
.why-ds-metier-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--why-creme-light); border: 1px solid var(--why-border); margin-bottom: 0.75rem; }
.why-ds-metier-card h4 { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--why-bordeaux); margin: 0 0 0.5rem; }
.why-ds-metier-card p { font-size: 0.86rem; color: var(--why-ink-soft); line-height: 1.55; margin: 0 0 0.85rem; flex-grow: 1; }
.why-ds-metier-list { list-style: none; margin: 0; padding: 0; }
.why-ds-metier-list li { padding: 0.45rem 0 0.45rem 1.6rem; font-size: 0.88rem; color: var(--why-ink-soft); line-height: 1.5; border-top: 1px dashed var(--why-border); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.6l4.1 4L16 5.4' fill='none' stroke='%23FDA649' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 0.75em; background-size: 15px 15px; }
.why-ds-metier-list li:first-child { border-top: 0; }
.why-ds-module-link { font-size: 0.85rem; font-weight: 600; color: var(--why-orange); }
.why-ds-metier-card:hover .why-ds-module-link { color: var(--why-bordeaux); }

/* --- Garanties --- */
.why-ds-garanties-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 600px) { .why-ds-garanties-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why-ds-garanties-grid { grid-template-columns: repeat(4, 1fr); } }
.why-ds-garantie { background: var(--why-white); border: 1px solid var(--why-border); border-radius: var(--why-radius-card); padding: 1.75rem; transition: all 0.3s ease; }
.why-ds-garantie:hover { transform: translateY(-3px); border-color: var(--why-orange); box-shadow: 0 10px 28px -10px rgba(112,0,0,0.1); }
.why-ds-garantie-icon { width: 52px; height: 52px; border-radius: 13px; background: var(--why-creme); border: 1px solid var(--why-border); display: grid; place-items: center; margin-bottom: 1rem; }
.why-ds-garantie h3 { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--why-bordeaux); margin: 0 0 0.5rem; }
.why-ds-garantie p { font-size: 0.9rem; color: var(--why-ink-soft); line-height: 1.6; margin: 0; }

/* --- Témoignages : citation en Inter sur pages produit --- */
.why-ds-page .why-ds-testimonial-quote { font-family: 'Inter', sans-serif; font-style: normal; font-size: 1.05rem; font-weight: 400; color: var(--why-ink, #2b2b2b); line-height: 1.75; }

/* --- Maillage silo + baseline --- */
.why-ds-silo { max-width: 820px; margin: 0 auto; }
.why-ds-silo p { font-size: 1rem; color: var(--why-ink-soft); line-height: 1.75; margin: 0 0 1rem; }
.why-ds-silo a { color: var(--why-orange); font-weight: 600; text-decoration: none; }
.why-ds-silo a:hover { color: var(--why-bordeaux); }
.why-ds-baseline { text-align: center; margin-top: 3rem; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.15rem; color: var(--why-bordeaux); }

/* --- Bloc démo : formulaire Brevo natif --- */
.why-contact-form-wrapper { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 980px) { .why-contact-form-wrapper { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; } }
.why-contact-form-intro { display: flex; flex-direction: column; }
.why-contact-trust-list { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.85rem; }
.why-contact-trust-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: var(--why-ink-soft); line-height: 1.5; }
.why-contact-trust-list svg { flex-shrink: 0; margin-top: 2px; }
.why-contact-trust-list strong { color: var(--why-bordeaux); }
.why-contact-form-testimonial { background: var(--why-white); border: 1px solid var(--why-border); border-left: 3px solid var(--why-orange); border-radius: 12px; padding: 1.25rem 1.5rem; }
.why-contact-form-testimonial-stars { color: var(--why-orange); font-size: 0.95rem; letter-spacing: 2px; margin-bottom: 0.5rem; }
.why-contact-form-testimonial p { font-size: 0.95rem; color: var(--why-ink, #2b2b2b); line-height: 1.6; font-style: italic; margin: 0 0 0.5rem; }
.why-contact-form-testimonial-author { font-size: 0.85rem; color: var(--why-muted); font-weight: 600; }
.why-contact-form-card { background: var(--why-white); border: 1px solid var(--why-border); border-radius: var(--why-radius-lg); padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: 0 16px 48px -16px rgba(112,0,0,0.12); }
.why-contact-sib-container { max-width: 100% !important; padding: 0 !important; background: transparent !important; border: 0 !important; text-align: left !important; }
.why-contact-form-card .sib-form { padding: 0 !important; }
.why-contact-field { margin-bottom: 1rem; }
.why-contact-field-row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 560px) { .why-contact-field-row { grid-template-columns: 1fr 1fr; } }
.why-contact-label { display: block; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--why-bordeaux); margin-bottom: 0.4rem; text-align: left; }
.why-contact-required { color: var(--why-orange); }
.why-contact-optional { color: var(--why-muted); font-weight: 400; font-size: 0.8rem; }
.why-contact-input { width: 100%; box-sizing: border-box; padding: 0.7rem 0.9rem; font-family: 'Inter', sans-serif; font-size: 0.95rem; color: var(--why-ink, #2b2b2b); background: var(--why-creme-light); border: 1px solid var(--why-border); border-radius: 10px; transition: all 0.2s ease; height: auto; }
.why-contact-input::placeholder { color: var(--why-muted); }
.why-contact-input:focus { outline: none; border-color: var(--why-orange); background: var(--why-white); box-shadow: 0 0 0 3px rgba(253,166,73,0.18); }
.why-contact-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23700000' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem; cursor: pointer; }
.why-contact-captcha-wrap { display: flex; justify-content: flex-start; transform-origin: left; }
.why-contact-submit-wrap { margin-top: 1.25rem; }
.why-contact-submit-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 1.5rem; font-family: 'Inter', sans-serif; font-size: 1.02rem; font-weight: 700; color: #FFFFFF; background: var(--why-bordeaux); border: none; border-radius: 10px; cursor: pointer; transition: all 0.25s ease; }
.why-contact-submit-btn:hover { background: #5A0000; transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(112,0,0,0.4); }
.why-contact-submit-arrow { transition: transform 0.25s ease; }
.why-contact-submit-btn:hover .why-contact-submit-arrow { transform: translateX(4px); }
.why-contact-rgpd-notice { font-size: 0.78rem; color: var(--why-muted); line-height: 1.5; margin: 1.25rem 0 0; }
.why-contact-rgpd-notice a { color: var(--why-orange); }
.why-contact-msg-error, .why-contact-msg-success { max-width: 100% !important; border-radius: 10px; }
.why-contact-form-card .entry__error { font-size: 0.82rem; }

/* --- View Transitions (navigation inter-pages, v1.2) --- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* --- Standards « vaisseau amiral » (v1.3, 21/08/2026) --- */
/* Norme actée : la norme de lisibilité du blog = la norme du site. */
/* 1 · Gris AAA (~8:1) : la variable est resserrée pour toutes les pages DS */
.why-ds-page { --why-ink-soft: #4b4536; }
/* 2 · Plancher de lisibilité des textes de cartes (15 px) */
.why-ds-page .why-ds-method-step p, .why-ds-page .why-ds-fn p, .why-ds-page .why-ds-metier-card p, .why-ds-page .why-ds-garantie p { font-size: 0.94rem; line-height: 1.6; }
/* 3 · Boutons : 5 états, graisse verrouillée (jamais de changement de graisse au survol) */
.why-ds-page .why-ds-btn, .why-ds-page .why-ds-btn:hover, .why-ds-page .why-ds-btn:focus { font-weight: 700; text-decoration: none; }
.why-ds-page .why-ds-btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.why-ds-page .why-ds-btn:hover { transform: translateY(-2px); }
.why-ds-page .why-ds-btn-primary:hover { box-shadow: 0 12px 26px -10px rgba(231,139,39,.55); }
.why-ds-page .why-ds-btn-secondary:hover { box-shadow: 0 12px 26px -12px rgba(112,0,0,.2); border-color: var(--why-orange); }
.why-ds-page .why-ds-btn:active { transform: translateY(0); box-shadow: 0 4px 10px -6px rgba(112,0,0,.35); transition-duration: .08s; }
.why-ds-page .why-ds-btn:focus-visible, .why-ds-page .why-ds-accordion-trigger:focus-visible, .why-ds-page .why-contact-submit-btn:focus-visible { outline: 3px solid rgba(253,166,73,.75); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .why-ds-page .why-ds-btn:hover, .why-ds-page .why-ds-btn:active { transform: none !important; } }

/* --- Alignement visuel sur la home (v1.4, 21/08/2026) --- */
/* La home .why-hm est la référence : titres Playfair, corps Inter, bande logos liserée. */
/* 1 · Corps en Inter (comme la home et le blog) */
.why-ds-page { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
/* 2 · Titres en Playfair Display (l'italique orange interne reste Playfair italic) */
.why-ds-page .why-ds-hero-title, .why-ds-page .why-ds-section-title, .why-ds-page .why-ds-metiers-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; }
/* 3 · Bande logos façon home : fond blanc, liserés orange, gabarit compact */
.why-ds-page .why-ds-logos, .why-ds-logos { background: #fff; border-top: 1px solid var(--why-orange); border-bottom: 1px solid var(--why-orange); padding: 22px 0 26px; }
.why-ds-page .why-ds-logos-title { margin-bottom: 6px; font-weight: 700; font-size: 12.5px; }
.why-ds-page .why-ds-marquee { height: 130px; padding: 0.5rem 0; }
.why-ds-page .why-ds-marquee-logo { max-height: 86px; opacity: 1; }
.why-ds-page .why-ds-marquee-track { animation-duration: 110s; }

/* --- Fonds de sections alignés sur la home (v1.5, 21/08/2026) --- */
/* Le hero et l'alternance des sections reprennent le crème exact de la home (#FAF6E8). */
.why-ds-page .why-ds-bg-creme, section.why-ds-bg-creme { background: #FAF6E8; }
.why-ds-page .why-ds-bg-creme-light, section.why-ds-bg-creme-light { background: #FCFAF3; }
.why-ds-page .why-ds-bg-white, section.why-ds-bg-white { background: #FFFFFF; }

/* --- Unification typographique des cartes (v1.6, 21/08/2026) --- */
/* Norme : Playfair pour tous les titres (sections ET cartes), Inter pour le corps, */
/* orange pour les kickers et les numéros en contour (référence : home). */
.why-ds-page .why-ds-fn h4, .why-ds-page .why-ds-garantie h3, .why-ds-page .why-ds-metier-card h4, .why-ds-page .why-ds-method-step h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.18rem; }
.why-ds-page .why-ds-method-num { background: transparent; border: 1.5px solid var(--why-orange); color: var(--why-bordeaux); }
.why-ds-page .why-ds-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }