/* =========================================================================
   MOBILE.CSS · 1max2vues
   Optimisations spécifiques mobile (≤ 767px).
   Le desktop n'est JAMAIS impacté : tout est wrappé dans @media.
   Aucune modification des fichiers CSS existants, juste des ajouts par-dessus.
   ========================================================================= */

/* === Classe utilitaire globale : invisible sur desktop, visible mobile === */
.mobile-only { display: none; }

/* === Blocs web.php hero uniquement mobile : caches sur desktop === */
.hero-flash-stats,
.hero-code-mockup,
.wp-vs-custom,
.end-cta-availability,
.end-cta-guarantees,
.end-cta-reassure,
.card-accent { display: none; }

/* =========================================================================
   HOME (index.php) — MOBILE
   ========================================================================= */

@media (max-width: 767px) {

  /* ---------------------------------------------------------------------
     FIX : forcer la visibilité des éléments reveal sur mobile.
     Evite les "trous" si GSAP n'a pas declenche l'animation.
     --------------------------------------------------------------------- */
  .hero-text .reveal,
  .hero-visual.reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* ---------------------------------------------------------------------
     HERO · resserre, fluide, compact
     --------------------------------------------------------------------- */

  .hero {
    padding: 2.5rem 0 1.5rem;
    overflow: visible;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Cerveau : taille reduite, marges minimes */
  .hero-visual {
    display: block !important;
    width: 100% !important;
    max-width: 220px !important;
    margin: 0.75rem auto 0.25rem !important;
    aspect-ratio: auto !important;
    order: unset;
    overflow: visible;
  }

  .brain-split {
    max-width: 220px !important;
    width: 100% !important;
    margin: 0 auto !important;
    aspect-ratio: 700 / 832 !important;
  }

  /* Cerveau : labels caches sur mobile */
  .brain-label,
  .brain-label-human,
  .brain-label-ai {
    display: none !important;
  }
  .brain-glow {
    width: 70%;
    height: 90%;
  }

  /* Meta eyebrow */
  .hero-meta {
    font-size: 11px;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    justify-content: center;
  }

  /* Classe utilitaire : br visible uniquement sur mobile */
  .mobile-only { display: inline; }

  /* Titre : 3 lignes maitrisees */
  .hero-title {
    font-size: clamp(2.2rem, 9vw, 3rem);
    line-height: 1.05;
    margin: 0;
    text-align: center;
  }

  /* Centrage complet du hero-text */
  .hero-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Lead : collee sous le cerveau */
  .hero-lead {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0.25rem 0 0;
  }

  /* Actions : boutons pleine largeur */
  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.25rem;
    margin-bottom: 0 !important;  /* neutralise le margin-bottom desktop */
    width: 100%;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
  }

  /* Stats : serrees avec les actions */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 0;
    border-top: 1px solid rgba(15, 14, 12, 0.08);
    width: 100%;
  }
  .hero-stat { text-align: center; }
  .hero-stat .stat-num { font-size: 1.4rem; }
  .hero-stat .stat-label {
    font-size: 10px;
    letter-spacing: 0.08em;
  }


  /* ---------------------------------------------------------------------
     TRUST STRIP · 4 lignes empilees centrees, progression croissante
     --------------------------------------------------------------------- */

  .trust-strip {
    padding: 1.25rem 1.25rem;
    margin-top: 0;
  }

  .trust-inner {
    display: flex !important;
    flex-direction: column;
    gap: 0.55rem;
    align-items: center;
    text-align: center;
  }

  .trust-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center;
    gap: 0.5rem !important;
    flex: none !important;
    width: 100%;
    padding: 0 !important;
  }
  .trust-item::before {
    content: none !important;
  }
  .trust-dot {
    display: inline-block !important;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #C14E2A;
    flex-shrink: 0;
    transform: translateY(-1px);
  }
  .trust-item strong {
    font-weight: 500;
    display: inline;
    line-height: 1.4;
  }
  .trust-item em {
    display: inline;
    color: rgba(15, 14, 12, 0.5);
    font-style: normal;
    line-height: 1.4;
  }

  /* Progression visuelle croissante : 4 items (indices 1,3,5,7 car .trust-sep entre eux) */
  .trust-item:nth-child(1) strong { font-size: 12px; }
  .trust-item:nth-child(1) em     { font-size: 11px; }
  .trust-item:nth-child(3) strong { font-size: 13px; }
  .trust-item:nth-child(3) em     { font-size: 11.5px; }
  .trust-item:nth-child(5) strong { font-size: 14px; }
  .trust-item:nth-child(5) em     { font-size: 12px; }
  .trust-item:nth-child(7) strong { font-size: 15px; font-weight: 600; color: #0F0E0C; }
  .trust-item:nth-child(7) em     { font-size: 12.5px; }

  /* Masquer les separateurs */
  .trust-sep { display: none; }


  /* ---------------------------------------------------------------------
     SECTIONS · espacement général, respirations, padding
     --------------------------------------------------------------------- */

  section {
    padding: 4rem 0;
  }

  .container,
  .container-wide,
  .container-narrow {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sec-head {
    margin-bottom: 2.5rem;
  }

  .sec-title {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    line-height: 1.1;
  }

  .sec-lead {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .eyebrow {
    font-size: 10px;
    letter-spacing: 0.14em;
  }


  /* ---------------------------------------------------------------------
     LE CONSTAT · chat demo compact, fond garanti, hauteur fixe
     --------------------------------------------------------------------- */

  .story-block {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .story-text p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .story-quote-inline {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border-left: 3px solid #C14E2A;
    background: rgba(193, 78, 42, 0.04);
    border-radius: 0 10px 10px 0;
  }
  .story-quote-inline .story-quote-text { font-size: 1.1rem; }

  /* Fix : force visibilite et fond sombre du chat sur mobile, meme
     si home.js met du temps a injecter ses styles. */
  .story-chat {
    max-width: 100% !important;
    width: 100%;
    background: #0F0E0C !important;
    color: #F3EDDD !important;
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.3);
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    order: 2;
    position: relative;
  }

  /* Hauteur fixe du body = stoppe le ballotement en mobile */
  .story-chat-body {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
  }

  /* Secours : si les styles JS ne sont pas la, au moins l'en-tete est lisible */
  .story-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(243, 237, 221, 0.08);
    margin-bottom: 12px;
  }
  .story-chat-title {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(243, 237, 221, 0.6);
  }
  .story-chat-status {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C14E2A;
    margin-left: auto;
  }


  /* ---------------------------------------------------------------------
     LES 4 FREINS · une seule colonne avec plus d'air
     --------------------------------------------------------------------- */

  .freins-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .frein-card {
    padding: 1.5rem 1.25rem;
  }
  .frein-num {
    font-size: 11px;
    margin-bottom: 0.75rem;
  }
  .frein-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }
  .frein-desc {
    font-size: 0.9rem;
    line-height: 1.55;
  }


  /* ---------------------------------------------------------------------
     MANIFESTO · bloc noir, respiration mobile
     --------------------------------------------------------------------- */

  .manifesto-section {
    padding: 4rem 0;
  }
  .manifesto-title {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
  }
  .manifesto-inner p {
    font-size: 0.95rem;
    line-height: 1.65;
  }


  /* ---------------------------------------------------------------------
     SERVICES GRID · cartes empilées, grosses, tappables
     --------------------------------------------------------------------- */

  .services-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
  }

  .service-card {
    padding: 1.75rem 1.5rem;
  }
  .service-num {
    font-size: 10px;
    letter-spacing: 0.14em;
    margin-bottom: 0.5rem;
  }
  .service-icon-wrap svg {
    width: 36px;
    height: 36px;
  }
  .service-card h3 {
    font-size: 1.4rem;
    margin: 0.75rem 0 0.5rem;
  }
  .service-card p {
    font-size: 0.9rem;
    line-height: 1.55;
  }
  .service-foot {
    margin-top: 1.25rem;
    padding-top: 1rem;
  }
  .service-price {
    font-size: 0.85rem;
  }


  /* ---------------------------------------------------------------------
     PROCESSUS TIMELINE · déjà bien, on affine juste
     --------------------------------------------------------------------- */

  .process {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .process-intro p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .timeline {
    padding-left: 2rem;
  }
  .step {
    padding-bottom: 2rem;
  }
  .step-head h4 {
    font-size: 1.05rem;
  }
  .step p {
    font-size: 0.9rem;
    line-height: 1.55;
  }


  /* ---------------------------------------------------------------------
     USECASES · 2 colonnes bien centrées
     --------------------------------------------------------------------- */

  .usecases {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .usecase-tile {
    padding: 1.5rem 0.75rem;
  }
  .usecase-icon svg {
    width: 32px;
    height: 32px;
  }
  .usecase-label {
    font-size: 1rem;
    margin-top: 0.75rem;
  }
  .usecase-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 0.25rem;
  }


  /* ---------------------------------------------------------------------
     END CTA · theatralise pour mobile : section finale premium
     --------------------------------------------------------------------- */

  .end-cta {
    padding: 3.5rem 0 4rem;
    position: relative;
    overflow: hidden;
  }

  /* Motif decoratif en fond : lignes diagonales subtiles */
  .end-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(45deg, rgba(193, 78, 42, 0.025) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(193, 78, 42, 0.025) 25%, transparent 25%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px;
    opacity: 0.7;
    pointer-events: none;
  }

  .end-cta .container-narrow {
    padding: 0 1.25rem;
    position: relative;
    z-index: 1;
  }

  /* ==== INDICATEUR DISPONIBILITE ==== */
  .end-cta-availability {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(193, 78, 42, 0.08);
    border: 1px solid rgba(193, 78, 42, 0.2);
    border-radius: 100px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C14E2A;
    margin: 0 auto 1.5rem;
    width: fit-content;
  }
  .end-cta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C14E2A;
    box-shadow: 0 0 0 3px rgba(193, 78, 42, 0.2);
    animation: endCtaDotPulse 2s ease-in-out infinite;
  }
  @keyframes endCtaDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
  }

  /* Centrage du container pour la pilule */
  .end-cta .reveal {
    text-align: center;
  }

  /* ==== TITRE ==== */
  .end-cta .sec-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    line-height: 1.1 !important;
    margin: 0 0 1rem !important;
  }

  /* ==== LEAD ==== */
  .end-cta .sec-lead {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin: 0 0 1.75rem !important;
    color: rgba(15, 14, 12, 0.7);
  }

  /* ==== 3 GARANTIES ==== */
  .end-cta-guarantees {
    display: flex !important;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0 auto 2rem;
    max-width: 240px;
    align-items: flex-start;
  }
  .end-cta-guarantee {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 0.9rem;
    color: rgba(15, 14, 12, 0.8);
    opacity: 0;
    transform: translateX(-10px);
    animation: endCtaGuaranteeIn 500ms cubic-bezier(0.25, 0.9, 0.3, 1) forwards;
  }
  .end-cta-guarantee:nth-child(1) { animation-delay: 200ms; }
  .end-cta-guarantee:nth-child(2) { animation-delay: 350ms; }
  .end-cta-guarantee:nth-child(3) { animation-delay: 500ms; }
  @keyframes endCtaGuaranteeIn {
    to { opacity: 1; transform: translateX(0); }
  }
  .end-cta-guarantee svg {
    width: 18px;
    height: 18px;
    color: #C14E2A;
    flex-shrink: 0;
    padding: 3px;
    background: rgba(193, 78, 42, 0.12);
    border-radius: 50%;
    box-sizing: content-box;
    width: 14px;
    height: 14px;
  }

  /* ==== BOUTON PREMIUM ==== */
  .end-cta .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 320px;
    padding: 1.15rem 1.75rem !important;
    font-size: 1rem !important;
    font-weight: 500;
    border-radius: 100px;
    background: linear-gradient(135deg, #0F0E0C 0%, #1a1815 100%);
    color: #FAF6EC;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow:
      0 20px 40px -15px rgba(15, 14, 12, 0.4),
      0 5px 15px -5px rgba(193, 78, 42, 0.2);
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 300ms ease;
  }

  /* Effet brillance qui traverse le bouton */
  .end-cta .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(250, 246, 236, 0.15), transparent);
    animation: endCtaShine 3s ease-in-out infinite;
    animation-delay: 1s;
  }
  @keyframes endCtaShine {
    0%   { left: -100%; }
    50%  { left: 100%; }
    100% { left: 100%; }
  }

  .end-cta .btn span {
    position: relative;
    z-index: 1;
  }
  .end-cta .btn svg {
    width: 18px !important;
    height: 18px !important;
    position: relative;
    z-index: 1;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .end-cta .btn:active {
    transform: scale(0.96);
    box-shadow:
      0 10px 25px -10px rgba(15, 14, 12, 0.5),
      0 3px 10px -3px rgba(193, 78, 42, 0.3);
  }
  .end-cta .btn:active svg {
    transform: translateX(5px);
  }

  /* ==== REASSURANCE ==== */
  .end-cta-reassure {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(15, 14, 12, 0.08);
  }
  .end-cta-reassure em {
    font-family: "JetBrains Mono", monospace;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(15, 14, 12, 0.5);
  }
  .end-cta-reassure a {
    font-family: "Fraunces", serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: #0F0E0C;
    text-decoration: none;
    letter-spacing: -0.01em;
  }
  .end-cta-reassure a:active {
    color: #C14E2A;
  }

  /* ==== Masquer ancien end-contacts ==== */
  .end-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(15, 14, 12, 0.1);
  }
  .end-contact {
    font-size: 0.85rem;
    justify-content: center;
  }


  /* ---------------------------------------------------------------------
     NAVIGATION · plus compacte
     --------------------------------------------------------------------- */

  .nav-cta {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }


  /* ---------------------------------------------------------------------
     REVEALS · plus rapides sur mobile pour ne pas attendre
     --------------------------------------------------------------------- */

  .reveal {
    transition-duration: 0.6s !important;
  }


  /* ---------------------------------------------------------------------
     EFFETS MOBILE · désactive ce qui ne sert à rien (économie perf)
     --------------------------------------------------------------------- */

  /* Spotlight hover : ne sert à rien sans souris */
  .service-card::before,
  .frein-card::before,
  .price-card::before,
  .tool-card::before {
    display: none !important;
  }

  /* Tilt 3D : désactivé par JS déjà mais on force via CSS */
  .work-item {
    transform: none !important;
  }

}


/* =========================================================================
   Très petits écrans (≤ 380px) : iPhone SE, petits Android
   ========================================================================= */
@media (max-width: 380px) {
  .hero-title {
    font-size: 2.1rem;
  }
  .sec-title {
    font-size: 1.65rem;
  }
  .hero-stat .stat-num { font-size: 1.3rem; }
  .container,
  .container-wide,
  .container-narrow {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* =========================================================================
   ANIMATIONS MOBILE · plan B+
   Reveals + entree hero + parallax + feedback tactile + scroll indicator
   100% CSS quand possible pour robustesse (pas de dependance GSAP).
   ========================================================================= */

@media (max-width: 767px) {

  /* ----------------------------------------------------------------------
     1. ENTREE HERO · animations en cascade au chargement
     ---------------------------------------------------------------------- */

  /* Etat initial : tout invisible et legerement decale */
  .hero-meta,
  .hero-title,
  .hero-visual,
  .hero-lead,
  .hero-actions,
  .hero-stats {
    opacity: 0;
    transform: translateY(14px);
    animation: heroFadeUp 700ms cubic-bezier(0.25, 0.9, 0.3, 1) forwards;
  }

  @keyframes heroFadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Cascade : chaque element arrive avec son delay */
  .hero-meta    { animation-delay: 100ms; }
  .hero-title   { animation-delay: 200ms; }
  .hero-visual {
    animation-delay: 400ms;
    animation-duration: 900ms;
    transform: translateY(20px) scale(0.94);
  }
  .hero-visual  { animation-name: heroBrainIn; }
  @keyframes heroBrainIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .hero-lead    { animation-delay: 600ms; }
  .hero-actions { animation-delay: 750ms; }
  .hero-stats   { animation-delay: 900ms; }

  /* Override du reveal desktop qui pourrait cohabiter */
  .hero-text .reveal { animation: none; }


  /* ----------------------------------------------------------------------
     2. SCROLL INDICATOR · petite fleche qui invite au scroll
     ---------------------------------------------------------------------- */

  .hero::after {
    content: "";
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C14E2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    animation: heroScrollHint 2.5s ease-in-out infinite;
    animation-delay: 1.5s;
    pointer-events: none;
  }

  @keyframes heroScrollHint {
    0%, 100% { opacity: 0; transform: translate(-50%, -4px); }
    50%      { opacity: 0.7; transform: translate(-50%, 4px); }
  }

  /* Cacher l'indicator au scroll */
  .hero.scrolled::after {
    animation: none;
    opacity: 0;
    transition: opacity 300ms ease;
  }

  /* Hero en position:relative pour ancrer le ::after */
  .hero { position: relative; }


  /* ----------------------------------------------------------------------
     3. PARALLAX LEGER · cerveau qui glisse au scroll
     (controle par JS qui set la CSS var --brain-scroll-y)
     ---------------------------------------------------------------------- */

  .brain-split {
    transform: translateY(calc(var(--brain-scroll-y, 0) * 0.15px));
    transition: transform 0s;
  }


  /* ----------------------------------------------------------------------
     4. REVEALS AU SCROLL · toutes les sections apres le hero
     ---------------------------------------------------------------------- */

  .m-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms cubic-bezier(0.25, 0.9, 0.3, 1),
                transform 600ms cubic-bezier(0.25, 0.9, 0.3, 1);
    will-change: opacity, transform;
  }

  .m-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger doux pour les enfants d'une grid */
  .m-reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms cubic-bezier(0.25, 0.9, 0.3, 1),
                transform 500ms cubic-bezier(0.25, 0.9, 0.3, 1);
  }
  .m-reveal-stagger.is-visible > *      { opacity: 1; transform: translateY(0); }
  .m-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .m-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
  .m-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
  .m-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
  .m-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
  .m-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }


  /* ----------------------------------------------------------------------
     5. FEEDBACK TACTILE · scale subtil au tap sur les cartes/boutons
     ---------------------------------------------------------------------- */

  .service-card,
  .frein-card,
  .price-card,
  .work-item,
  .tool-card,
  .usecase-tile,
  .btn {
    -webkit-tap-highlight-color: transparent;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .service-card:active,
  .frein-card:active,
  .price-card:active,
  .work-item:active,
  .tool-card:active,
  .usecase-tile:active {
    transform: scale(0.97);
  }

  .btn:active {
    transform: scale(0.95);
  }


  /* ----------------------------------------------------------------------
     6. REDUCED MOTION · respecte les preferences utilisateur
     ---------------------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .hero-meta, .hero-title, .hero-visual,
    .hero-lead, .hero-actions, .hero-stats,
    .m-reveal, .m-reveal-stagger > * {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .hero::after { display: none; }
    .brain-split { transform: none !important; }
  }
}


/* =========================================================================
   WEB.PHP — MOBILE
   Hero + Pourquoi sur-mesure + Réalisations + Formules + Abonnement
   ========================================================================= */

@media (max-width: 767px) {

  /* ----------------------------------------------------------------------
     PAGE HERO · version mobile incarnée avec stats flash + mockup code
     ---------------------------------------------------------------------- */

  .page-hero {
    padding: 2.5rem 0 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .page-hero .container { padding: 0 1.25rem; }
  .page-hero h1 {
    font-size: clamp(2rem, 8.5vw, 2.8rem);
    line-height: 1.08;
    margin: 0.75rem 0 1rem;
  }
  .page-hero h1 em {
    display: inline-block;
    animation: heroItalicIn 1s cubic-bezier(0.25, 0.9, 0.3, 1) 0.5s both;
  }
  @keyframes heroItalicIn {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .page-hero-lead {
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: none;
    margin: 0 auto 1.5rem;
    color: rgba(15, 14, 12, 0.65);
  }

  /* ======== STATS FLASH · 3 promesses rapides ======== */
  .hero-flash-stats {
    display: flex !important;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.75rem 0 2rem;
    padding: 0.5rem;
    background: rgba(15, 14, 12, 0.04);
    border: 1px solid rgba(15, 14, 12, 0.06);
    border-radius: 16px;
  }
  .flash-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
    position: relative;
    opacity: 0;
    animation: flashStatIn 500ms cubic-bezier(0.25, 0.9, 0.3, 1) forwards;
  }
  .flash-stat:nth-child(1) { animation-delay: 400ms; }
  .flash-stat:nth-child(2) { animation-delay: 550ms; }
  .flash-stat:nth-child(3) { animation-delay: 700ms; }
  @keyframes flashStatIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .flash-stat svg {
    width: 20px;
    height: 20px;
    color: #C14E2A;
  }
  .flash-stat-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .flash-stat strong {
    font-family: "Fraunces", serif;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1;
    color: #0F0E0C;
  }
  .flash-stat em {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(15, 14, 12, 0.55);
  }
  /* Separateur vertical entre stats */
  .flash-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -0.25rem;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(15, 14, 12, 0.08);
  }

  /* ======== MOCKUP CODE · terminal qui s'ecrit tout seul ======== */
  .hero-code-mockup {
    display: block !important;
    margin: 2rem 0 0;
    background: #0F0E0C;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 45px -15px rgba(15, 14, 12, 0.4);
    opacity: 0;
    transform: translateY(20px);
    animation: heroCodeIn 800ms cubic-bezier(0.25, 0.9, 0.3, 1) 900ms forwards;
    text-align: left;
  }
  @keyframes heroCodeIn {
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-code-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(243, 237, 221, 0.08);
    background: rgba(243, 237, 221, 0.03);
  }
  .hero-code-dots {
    display: flex;
    gap: 5px;
  }
  .hero-code-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .hero-code-dots span:nth-child(1) { background: #ff5f57; }
  .hero-code-dots span:nth-child(2) { background: #febc2e; }
  .hero-code-dots span:nth-child(3) { background: #28c840; }
  .hero-code-title {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: rgba(243, 237, 221, 0.55);
    letter-spacing: 0.05em;
  }
  .hero-code-status {
    margin-left: auto;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: #C14E2A;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .hero-code-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C14E2A;
    box-shadow: 0 0 0 3px rgba(193, 78, 42, 0.2);
    animation: heroCodeLive 2s ease-in-out infinite;
  }
  @keyframes heroCodeLive {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }

  .hero-code-body {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    line-height: 1.7;
    padding: 14px 16px 18px;
    min-height: 180px;
    height: 180px;
    overflow: hidden;
    color: rgba(243, 237, 221, 0.85);
  }
  .hero-code-line {
    display: block;
    white-space: pre;
    opacity: 0;
    animation: codeLineIn 300ms ease-out forwards;
  }
  @keyframes codeLineIn {
    from { opacity: 0; transform: translateX(-5px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .hero-code-line .tag      { color: #C14E2A; }
  .hero-code-line .attr     { color: #d4a657; }
  .hero-code-line .str      { color: #8db67e; }
  .hero-code-line .comment  { color: rgba(243, 237, 221, 0.35); font-style: italic; }
  .hero-code-line .kw       { color: #7fb3d5; }
  .hero-code-line .indent   { color: transparent; }
  /* Curseur clignotant a la fin de la derniere ligne */
  .hero-code-line.cursor::after {
    content: "▊";
    color: #C14E2A;
    animation: codeCursorBlink 1s step-end infinite;
  }
  @keyframes codeCursorBlink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
  }


  /* BREADCRUMB : discret */
  .breadcrumb {
    padding: 0.75rem 0;
    font-size: 11px;
  }


  /* ----------------------------------------------------------------------
     POURQUOI SUR-MESURE · comparatif WordPress vs Sur-mesure
     ---------------------------------------------------------------------- */

  /* On masque les cartes freins texte sur mobile dans cette section pour
     laisser la place au comparatif visuel (les 4 cartes restent sur desktop) */
  .sec-warm .freins-grid {
    display: none !important;
  }

  /* On affiche le comparatif visuel */
  .wp-vs-custom {
    display: block !important;
    margin-top: 2.5rem;
  }

  /* ======== HEAD : WordPress VS Sur-mesure ======== */
  .wp-vs-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: rgba(15, 14, 12, 0.04);
    border-radius: 16px 16px 0 0;
    border: 1px solid rgba(15, 14, 12, 0.06);
    border-bottom: none;
  }

  .wp-vs-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .wp-vs-label {
    font-family: "Fraunces", serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: #0F0E0C;
  }
  .wp-vs-col--bad .wp-vs-label {
    color: rgba(15, 14, 12, 0.5);
    text-decoration: line-through;
    text-decoration-color: rgba(200, 50, 50, 0.6);
    text-decoration-thickness: 2px;
  }

  .wp-vs-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .wp-vs-icon svg {
    width: 18px;
    height: 18px;
  }
  .wp-vs-icon--bad {
    background: rgba(200, 50, 50, 0.1);
    color: #C83232;
  }
  .wp-vs-icon--good {
    background: rgba(193, 78, 42, 0.12);
    color: #C14E2A;
  }

  .wp-vs-vs {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(15, 14, 12, 0.4);
    font-weight: 500;
  }


  /* ======== ROWS : 4 lignes comparatives ======== */
  .wp-vs-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1rem 1rem;
    background: rgba(15, 14, 12, 0.02);
    border-left: 1px solid rgba(15, 14, 12, 0.06);
    border-right: 1px solid rgba(15, 14, 12, 0.06);
  }

  .wp-vs-row {
    padding: 1.25rem 0;
    border-bottom: 1px dashed rgba(15, 14, 12, 0.08);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms cubic-bezier(0.25, 0.9, 0.3, 1),
                transform 500ms cubic-bezier(0.25, 0.9, 0.3, 1);
  }
  .wp-vs-row:last-child {
    border-bottom: none;
  }
  .wp-vs-row.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .wp-vs-row:nth-child(1).is-visible { transition-delay: 0ms; }
  .wp-vs-row:nth-child(2).is-visible { transition-delay: 120ms; }
  .wp-vs-row:nth-child(3).is-visible { transition-delay: 240ms; }
  .wp-vs-row:nth-child(4).is-visible { transition-delay: 360ms; }

  .wp-vs-row-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
  }
  .wp-vs-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: #C14E2A;
    padding: 3px 7px;
    background: rgba(193, 78, 42, 0.1);
    border-radius: 4px;
  }
  .wp-vs-topic {
    font-family: "Fraunces", serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #0F0E0C;
  }

  /* BARRES de progression */
  .wp-vs-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }
  .wp-vs-bar {
    height: 8px;
    background: rgba(15, 14, 12, 0.06);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
  }
  .wp-vs-bar span {
    display: block;
    height: 100%;
    width: 0 !important; /* etat initial, anime au reveal */
    border-radius: 100px;
    transition: width 800ms cubic-bezier(0.25, 0.9, 0.3, 1);
    transition-delay: 200ms;
  }
  .wp-vs-row.is-visible .wp-vs-bar--bad span {
    width: var(--wp-bar-bad, 35%) !important;
    background: linear-gradient(90deg, #C83232, #d55050);
  }
  .wp-vs-row.is-visible .wp-vs-bar--good span {
    width: var(--wp-bar-good, 95%) !important;
    background: linear-gradient(90deg, #C14E2A, #d55a33);
  }

  /* VERDICTS texte */
  .wp-vs-verdicts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: center;
  }
  .wp-vs-verdict {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-align: center;
  }
  .wp-vs-verdict--bad {
    color: rgba(200, 50, 50, 0.85);
    text-decoration: line-through;
    text-decoration-color: rgba(200, 50, 50, 0.4);
  }
  .wp-vs-verdict--good {
    color: #C14E2A;
    font-weight: 500;
  }


  /* ======== SYNTHESE en bas ======== */
  .wp-vs-synth {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
    background: #0F0E0C;
    color: #F3EDDD;
    border-radius: 0 0 16px 16px;
    text-align: center;
    font-family: "Fraunces", serif;
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .wp-vs-synth strong {
    font-weight: 400;
    color: rgba(243, 237, 221, 0.5);
    text-decoration: line-through;
    text-decoration-color: rgba(243, 237, 221, 0.25);
  }
  .wp-vs-synth em {
    font-family: "JetBrains Mono", monospace;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: rgba(243, 237, 221, 0.4);
    margin: 0.1rem 0;
  }
  .wp-vs-synth--good {
    color: #FAF6EC !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    font-size: 1.1rem;
  }


  /* ----------------------------------------------------------------------
     REALISATIONS · CARROUSEL HORIZONTAL SWIPE (CSS scroll-snap)
     ---------------------------------------------------------------------- */

  /* Le container section se met en full bleed pour que le carrousel prenne
     toute la largeur de l'ecran, meme au-dela du container */
  .works-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
    margin: 2rem -1.25rem 0;
    padding: 0.5rem 1.25rem 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .works-grid::-webkit-scrollbar {
    display: none;
  }

  /* Chaque carte : largeur = viewport - padding - peek de la suivante */
  .works-grid .work-item {
    flex: 0 0 calc(100vw - 4rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 1.5rem 1.25rem 1.5rem;
    border-radius: 20px;
    background: rgba(243, 237, 221, 0.5);
    border: 1px solid rgba(15, 14, 12, 0.06);
    transition: transform 300ms ease, box-shadow 300ms ease;
  }

  /* Indicateur de swipe : leger hint initial */
  .works-grid .work-item:first-child {
    margin-left: 0;
  }

  /* Mockup browser : plus grand, prend toute la largeur de la carte */
  .works-grid .work-visual {
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 1rem;
  }

  .works-grid .work-browser {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 35px -12px rgba(15, 14, 12, 0.25);
  }

  .works-grid .work-topbar {
    padding: 8px 12px;
    gap: 5px;
    background: #e8e3d4;
  }
  .works-grid .work-dot {
    width: 8px !important;
    height: 8px !important;
  }
  .works-grid .work-url {
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
  }

  .works-grid .work-screen img {
    width: 100%;
    display: block;
  }

  /* Mockup phone superpose plus visible, en bas a droite */
  .works-grid .work-phone {
    width: 80px !important;
    right: 6px !important;
    bottom: -16px !important;
    border-radius: 12px;
    box-shadow: 0 12px 25px -8px rgba(15, 14, 12, 0.35);
  }

  /* Meta : lisible, compact */
  .works-grid .work-meta {
    padding: 0;
  }
  .works-grid .work-tag {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .works-grid .work-meta h4 {
    font-size: 1.3rem;
    margin: 0.6rem 0 0.5rem;
  }
  .works-grid .work-meta p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(15, 14, 12, 0.7);
  }

  /* Tilt 3D neutralise */
  .works-grid .work-item[data-tilt] {
    transform: none !important;
  }

  /* Desactive le m-reveal-stagger sur works-grid mobile :
     les cartes horizontales doivent toutes etre visibles pour swipe */
  .works-grid.m-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }


  /* ----------------------------------------------------------------------
     DOTS DE NAVIGATION DU CARROUSEL
     ---------------------------------------------------------------------- */

  .works-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 0.5rem;
    padding: 0;
    list-style: none;
  }
  .works-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 14, 12, 0.2);
    transition: all 300ms ease;
    cursor: pointer;
    border: none;
    padding: 0;
  }
  .works-dots .dot.is-active {
    width: 24px;
    border-radius: 3px;
    background: #C14E2A;
  }


  /* ----------------------------------------------------------------------
     INDICATEUR DE SWIPE (animation initiale)
     ---------------------------------------------------------------------- */

  .works-swipe-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 0.75rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(15, 14, 12, 0.4);
    opacity: 0;
    animation: swipeHintFade 4s ease-in-out 1s forwards;
  }
  .works-swipe-hint svg {
    width: 14px;
    height: 14px;
    animation: swipeHintMove 1.5s ease-in-out infinite;
  }
  @keyframes swipeHintFade {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; display: none; }
  }
  @keyframes swipeHintMove {
    0%, 100% { transform: translateX(-3px); }
    50%      { transform: translateX(3px); }
  }


  /* ----------------------------------------------------------------------
     FORMULES · CARTES PRIX THEATRALISEES
     ---------------------------------------------------------------------- */

  .pricing-grid {
    display: flex !important;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2.5rem;
  }

  /* ======== BASE CARTE ======== */
  .price-card {
    padding: 2rem 1.5rem 1.75rem;
    border-radius: 24px;
    position: relative;
    overflow: visible;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Si la carte a un badge (injecte par JS ou en HTML), plus de padding-top */
  .price-card:has(.price-badge) {
    padding-top: 2.5rem !important;
  }

  /* ======== CARTE PRO FEATURED (remontee + mise en avant) ======== */
  .price-card.featured {
    order: -1;
    transform: scale(1.015);
    box-shadow: 0 25px 60px -20px rgba(193, 78, 42, 0.25),
                0 10px 25px -10px rgba(15, 14, 12, 0.15);
    border: 1px solid rgba(193, 78, 42, 0.25);
    position: relative;
    /* Padding-top augmente pour laisser la place au badge qui sort */
    padding-top: 2.5rem !important;
  }
  /* Halo terracotta subtil derriere (annule le display:none plus haut) */
  .price-card.featured::before {
    display: block !important;
    content: "" !important;
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(193, 78, 42, 0.08), transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  .price-card.featured > * { position: relative; z-index: 1; }

  /* ======== BADGE CONTEXTUEL (injecte par JS ou direct en HTML) ======== */
  .price-badge {
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #0F0E0C !important;
    color: #F3EDDD !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 100px !important;
    z-index: 5 !important;
    /* Important : visibilite garantie */
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-indent: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    /* Une petite shadow pour qu'il flotte joliment */
    box-shadow: 0 4px 12px -2px rgba(15, 14, 12, 0.2);
  }
  .price-card.featured .price-badge {
    background: #C14E2A !important;
    color: #FAF6EC !important;
  }

  /* ======== RIBBON RECOMMANDE (celui du HTML) ======== */
  .price-ribbon {
    display: none !important; /* remplace par le badge injecte */
  }

  /* ======== NOM + PRIX ======== */
  .price-name {
    font-family: "Fraunces", serif;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    margin: 0.25rem 0 0.75rem !important;
    color: #0F0E0C;
  }

  .price-amount {
    display: flex !important;
    align-items: baseline;
    gap: 4px !important;
    font-family: "Fraunces", serif;
    font-size: 2.5rem !important;
    line-height: 1 !important;
    font-weight: 400;
    color: #0F0E0C;
    margin: 0.5rem 0 0.35rem;
    letter-spacing: -0.03em;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .price-amount sup {
    font-size: 1rem !important;
    color: #C14E2A !important;
    font-weight: 400;
    vertical-align: super;
    top: -0.5em;
    position: relative;
    flex-shrink: 0;
  }
  .price-amount small {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.7rem !important;
    font-weight: 400;
    color: rgba(15, 14, 12, 0.45);
    margin-left: 6px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* Version featured (fond noir) : couleur du HT/mois ajustee */
  .price-card.featured .price-amount small {
    color: rgba(243, 237, 221, 0.5);
  }
  .price-card.featured .price-amount {
    color: #FAF6EC;
  }

  .price-setup {
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(15, 14, 12, 0.65);
    margin-top: 0.25rem;
    margin-bottom: 1rem;
  }
  .price-setup strong {
    color: #0F0E0C;
  }
  /* Sur carte featured (fond noir) : texte clair */
  .price-card.featured .price-setup {
    color: rgba(243, 237, 221, 0.7);
  }
  .price-card.featured .price-setup strong {
    color: #FAF6EC;
  }

  /* ======== DIVIDER FIN ======== */
  .price-divider {
    margin: 1.25rem -0.5rem !important;
    height: 1px;
    background: rgba(15, 14, 12, 0.08);
    border: none;
  }
  .price-card.featured .price-divider {
    background: rgba(193, 78, 42, 0.15);
  }

  /* ======== FEATURES avec CHECK icones ======== */
  .price-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1rem !important;
  }
  .price-features li {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    padding: 0.5rem 0 0.5rem 1.75rem !important;
    position: relative;
    color: rgba(15, 14, 12, 0.85);
  }
  .price-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23C14E2A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }
  /* Check blanc sur la carte featured (fond dark) */
  .price-card.featured .price-features li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23C14E2A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
  }
  .price-card.featured .price-features li {
    color: rgba(243, 237, 221, 0.9);
  }


  /* ======== UPSELLS DEPLIABLES ======== */
  .price-upsells {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }
  .price-upsells-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: rgba(15, 14, 12, 0.04);
    border: 1px solid rgba(15, 14, 12, 0.06);
    border-radius: 12px;
    color: #0F0E0C;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 200ms ease;
    margin-top: 0.5rem;
  }
  .price-upsells-toggle:hover,
  .price-upsells-toggle:active {
    background: rgba(193, 78, 42, 0.08);
  }
  .price-upsells-toggle .chevron {
    display: inline-block;
    transition: transform 300ms cubic-bezier(0.25, 0.9, 0.3, 1);
  }
  .price-upsells.is-open .price-upsells-toggle .chevron {
    transform: rotate(180deg);
  }
  /* Fond dark pour featured */
  .price-card.featured .price-upsells-toggle {
    background: rgba(243, 237, 221, 0.08);
    border-color: rgba(243, 237, 221, 0.15);
    color: rgba(243, 237, 221, 0.95);
  }
  .price-card.featured .price-upsells-toggle:active {
    background: rgba(193, 78, 42, 0.25);
  }

  /* Panneau upsells : cache par defaut, animation max-height */
  .price-upsells-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms cubic-bezier(0.25, 0.9, 0.3, 1);
  }
  .price-upsells.is-open .price-upsells-panel {
    max-height: 400px; /* assez grand pour tous les upsells */
  }
  .price-upsells-title {
    display: none; /* remplace par le toggle */
  }
  .price-upsells ul {
    padding: 1rem 0.5rem 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .price-upsells ul li {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    padding: 0.35rem 0 0.35rem 1rem !important;
    position: relative;
    color: rgba(15, 14, 12, 0.7) !important;
  }
  .price-upsells ul li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 0.35rem;
    color: #C14E2A;
    font-weight: 500;
  }
  .price-card.featured .price-upsells ul li {
    color: rgba(243, 237, 221, 0.75) !important;
  }


  /* ======== MAINTENANCE · bloc dedie, plus premium ======== */
  .price-maintenance {
    margin-top: 1rem !important;
    padding: 1rem 1rem !important;
    background: rgba(193, 78, 42, 0.06) !important;
    border: 1px dashed rgba(193, 78, 42, 0.3) !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .price-maintenance-label {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    color: #C14E2A !important;
    margin-bottom: 0 !important;
  }
  .price-maintenance strong {
    font-weight: 500;
    color: #0F0E0C;
  }
  .price-card.featured .price-maintenance {
    background: rgba(243, 237, 221, 0.05) !important;
    border-color: rgba(243, 237, 221, 0.2) !important;
  }
  .price-card.featured .price-maintenance strong {
    color: #FAF6EC;
  }
  .price-card.featured .price-maintenance {
    color: rgba(243, 237, 221, 0.8);
  }


  /* ======== CTA BOUTON avec FLECHE ======== */
  .price-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 500;
    width: 100%;
    border-radius: 100px;
    background: #0F0E0C;
    color: #FAF6EC;
    text-decoration: none;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease;
    position: relative;
  }
  .price-cta::after {
    content: "→";
    display: inline-block;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .price-cta:active {
    transform: scale(0.96);
  }
  .price-cta:active::after {
    transform: translateX(4px);
  }
  .price-card.featured .price-cta {
    background: #C14E2A;
  }
  .price-card.featured .price-cta:active {
    background: #d55a33;
  }


  /* ======== ANIMATION PRIX SCALE A L'ENTREE ======== */
  .price-card {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    transition: opacity 600ms cubic-bezier(0.25, 0.9, 0.3, 1),
                transform 600ms cubic-bezier(0.25, 0.9, 0.3, 1);
  }
  .price-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  /* La featured garde son scale up quand elle arrive */
  .price-card.featured.is-visible {
    transform: translateY(0) scale(1.015);
  }

  /* Stagger manual */
  .price-card:nth-child(1).is-visible { transition-delay: 0ms; }
  .price-card:nth-child(2).is-visible { transition-delay: 100ms; }
  .price-card:nth-child(3).is-visible { transition-delay: 200ms; }

  /* Desactive le m-reveal-stagger sur pricing-grid */
  .pricing-grid.m-reveal-stagger > * {
    opacity: inherit !important;
    transform: inherit !important;
  }


  /* Note en bas de section */
  .note {
    margin-top: 2.5rem;
    padding: 1.25rem 1.25rem;
    font-size: 0.82rem;
    line-height: 1.6;
    border-radius: 14px;
    background: rgba(15, 14, 12, 0.04);
    border: 1px solid rgba(15, 14, 12, 0.06);
  }


  /* ----------------------------------------------------------------------
     ABONNEMENT MENSUEL · cartes qui glissent depuis le bas au scroll
     ---------------------------------------------------------------------- */

  .subscription-grid {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    /* On perspective le parent pour que les cartes aient un vrai effet 3D subtil */
    perspective: 1000px;
  }

  /* Priorite absolue : on neutralise toute autre animation stagger heritee */
  .subscription-grid.m-reveal-stagger > * {
    /* On laisse le JS gerer opacity et transform en inline */
  }

  /* Etat initial : toutes les cartes sont en bas, invisibles */
  /* (Le JS scroll-driven override ces valeurs en temps reel) */
  .subscription-grid .frein-card {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    /* Pas de transition : on veut un controle direct au scroll */
    transition: box-shadow 400ms ease;
    transform-origin: bottom center;
    position: relative;

    /* Design premium : gradient subtil + shadow douce */
    background: linear-gradient(145deg, rgba(250, 246, 236, 0.9), rgba(243, 237, 221, 0.6));
    border: 1px solid rgba(15, 14, 12, 0.06);
    border-radius: 18px;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 2px 8px -2px rgba(15, 14, 12, 0.04);
  }

  /* Etat visible : shadow renforcee (seul truc que le CSS gere) */
  .subscription-grid .frein-card.is-visible {
    box-shadow: 0 15px 40px -20px rgba(15, 14, 12, 0.18),
                0 5px 15px -10px rgba(193, 78, 42, 0.1);
  }
  /* Pas de stagger CSS : le scroll naturel de l'utilisateur declenche
     chaque carte une par une (via IntersectionObserver individuel) */

  /* Barre terracotta qui se trace sur le cote gauche au reveal */
  .subscription-grid .frein-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #C14E2A, transparent);
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
    transition: height 600ms cubic-bezier(0.25, 0.9, 0.3, 1) 200ms;
  }
  .subscription-grid .frein-card.is-visible::before {
    height: 60%;
  }

  /* Numero "Inclus" : badge terracotta plus visible */
  .subscription-grid .frein-num {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem !important;
    background: rgba(193, 78, 42, 0.1);
    color: #C14E2A !important;
    border-radius: 100px;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 9.5px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    margin-bottom: 0.85rem !important;
    width: fit-content;
  }
  .subscription-grid .frein-num strong {
    color: #C14E2A !important;
    font-weight: 500;
  }

  /* Titre : serif elegant */
  .subscription-grid .frein-title {
    font-family: "Fraunces", serif !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    margin: 0 0 0.6rem !important;
    color: #0F0E0C !important;
  }
  .subscription-grid .frein-title em {
    font-style: italic;
    color: #C14E2A;
  }

  /* Description plus discrete */
  .subscription-grid .frein-desc {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: rgba(15, 14, 12, 0.7) !important;
    margin: 0 !important;
  }

  /* Feedback tactile au tap */
  .subscription-grid .frein-card:active {
    transform: translateY(-2px) scale(0.98);
    transition-duration: 150ms;
  }


  /* ----------------------------------------------------------------------
     FEEDBACK TACTILE · scale au tap sur prix cards
     ---------------------------------------------------------------------- */

  .price-card {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

}


/* =========================================================================
   GOOGLE.PHP — MOBILE
   Hero avec demo Google search + outils + roue + formules + end CTA
   ========================================================================= */

@media (max-width: 767px) {

  /* ----------------------------------------------------------------------
     HERO GOOGLE · demo recherche Google adaptee
     ---------------------------------------------------------------------- */

  /* Page hero deja stylisée via la section web.php, on herite des bases.
     Ici on affine uniquement ce qui est specifique google. */

  /* La demo Google Search : reduction pour mobile */
  .google-search-demo {
    max-width: 100% !important;
    margin: 2rem 0 0 !important;
    padding: 14px 14px 16px !important;
    border-radius: 20px !important;
    box-shadow:
      0 20px 45px -15px rgba(0,0,0,0.12),
      0 8px 20px -8px rgba(0,0,0,0.06) !important;

    /* Animation d'entree */
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    animation: gsdIn 800ms cubic-bezier(0.25, 0.9, 0.3, 1) 600ms forwards;
  }
  @keyframes gsdIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Barre de recherche plus compacte */
  .gsd-bar {
    padding: 9px 12px !important;
    gap: 10px !important;
    border-radius: 20px !important;
  }
  .gsd-logo {
    width: 60px !important;
    height: 20px !important;
  }
  .gsd-input {
    font-size: 13px !important;
    min-height: 18px !important;
  }
  .gsd-search {
    width: 15px !important;
    height: 15px !important;
  }

  /* Resultats */
  .gsd-results {
    margin-top: 14px !important;
    gap: 10px !important;
  }
  .gsd-result-tag {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 6px !important;
  }

  .gsd-result-card {
    padding: 12px 13px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }
  .gsd-result-title {
    font-size: 14.5px !important;
    margin-bottom: 3px !important;
  }
  .gsd-result-meta {
    font-size: 12px !important;
    gap: 5px !important;
    flex-wrap: wrap;
  }
  .gsd-stars {
    font-size: 11px !important;
  }
  .gsd-result-type {
    font-size: 11px !important;
  }
  .gsd-result-badge {
    padding: 5px 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    flex-shrink: 0;
  }

  /* Legere brillance animee sur le badge #1 pour attirer l'oeil */
  .gsd-result-badge {
    position: relative;
    overflow: hidden;
  }
  .gsd-result-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(250, 246, 236, 0.4), transparent);
    animation: gsdBadgeShine 3s ease-in-out infinite;
    animation-delay: 2s;
  }
  @keyframes gsdBadgeShine {
    0%   { left: -100%; }
    60%  { left: 150%; }
    100% { left: 150%; }
  }

  /* Indicateur de dispo au-dessus du titre (on le reutilise) */
  .page-hero .end-cta-availability {
    display: inline-flex !important;
    margin: 0 auto 1rem !important;
  }


  /* ----------------------------------------------------------------------
     ROUE DES AVIS · section demo live (google.php)
     ---------------------------------------------------------------------- */

  #demo-roue {
    padding: 3.5rem 0;
  }

  /* Wrapper : ordre vertical roue > timeline */
  .demo-wrap {
    display: flex !important;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 2rem;
  }

  /* ORDRE MOBILE : roue en premier (pour que le user joue), timeline ensuite */
  .demo-wrap .wheel-premium { order: 1; }
  .demo-wrap .demo-flow     { order: 2; }

  /* ======== LA ROUE ======== */
  .wheel-premium {
    padding: 1rem 0 0 !important;
    gap: 1.25rem !important;
  }

  .wheel-premium-stage {
    max-width: 300px !important;
    width: 100% !important;
  }

  /* Les canvas prennent toute la stage */
  .wheel-premium-stage canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  /* Pointeur plus petit */
  .wheel-premium-pointer {
    width: 22px !important;
    height: 32px !important;
    top: -6px !important;
  }
  .wheel-premium-pointer::after {
    width: 10px !important;
    height: 10px !important;
  }

  /* Hub au centre : proportionne a la roue reduite */
  .wheel-premium-hub {
    width: 60px !important;
    height: 60px !important;
  }

  /* Overlay quand on gagne : bien visible */
  .wheel-premium-overlay {
    padding: 12px 16px !important;
  }
  .wheel-premium-lbl {
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
  }
  .wheel-premium-prize {
    font-size: 1.3rem !important;
    line-height: 1.1 !important;
    margin: 4px 0 !important;
  }
  .wheel-premium-sub {
    font-size: 9px !important;
  }

  /* Bouton tourner : plein largeur, bien tappable */
  .wheel-premium-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    padding: 0.95rem 1.5rem !important;
    font-size: 0.95rem !important;
    border-radius: 100px !important;
    background: linear-gradient(135deg, #0F0E0C, #1a1815) !important;
    color: #FAF6EC !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px -12px rgba(15, 14, 12, 0.4) !important;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  .wheel-premium-btn:active {
    transform: scale(0.96);
  }

  /* Effet brillance qui invite a cliquer */
  .wheel-premium-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(250, 246, 236, 0.2), transparent);
    animation: wheelBtnShine 2.5s ease-in-out infinite;
    animation-delay: 1s;
  }
  @keyframes wheelBtnShine {
    0%   { left: -100%; }
    60%  { left: 100%; }
    100% { left: 100%; }
  }

  .wheel-premium-btn span,
  .wheel-premium-btn svg {
    position: relative;
    z-index: 1;
  }

  /* Note */
  .wheel-premium-note {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    padding: 0 1rem;
    text-align: center !important;
    color: rgba(15, 14, 12, 0.5);
  }


  /* ======== TIMELINE 5 ETAPES ======== */
  .demo-flow {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    position: relative;
    padding-left: 0 !important;
  }

  .demo-step {
    display: flex !important;
    align-items: flex-start;
    gap: 1rem !important;
    padding: 0 0 1.75rem 0 !important;
    background: transparent !important;
    border: none !important;
    position: relative;
    transition: none !important;
  }

  /* Ligne verticale terracotta qui relie les steps (sauf le dernier) */
  .demo-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(193, 78, 42, 0.4), rgba(193, 78, 42, 0.1));
  }

  /* Numero en pilule terracotta ronde */
  .demo-step-num {
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #0F0E0C !important;
    color: #FAF6EC !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    position: relative;
    z-index: 1;
  }

  /* Step 4 (la roue) en terracotta pour marquer la sequence cle */
  .demo-step:nth-child(4) .demo-step-num {
    background: #C14E2A !important;
    box-shadow: 0 0 0 4px rgba(193, 78, 42, 0.15);
  }

  /* Titre etape */
  .demo-step h4 {
    font-family: "Fraunces", serif !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    margin: 0.4rem 0 0.3rem !important;
    color: #0F0E0C !important;
  }

  .demo-step p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: rgba(15, 14, 12, 0.65) !important;
    margin: 0 !important;
  }

  /* Hover/active : feedback tactile */
  .demo-step:active .demo-step-num {
    transform: scale(0.92);
  }


  /* ----------------------------------------------------------------------
     ACCENTS VISUELS CARTES GOOGLE · chaque carte a son moment
     ---------------------------------------------------------------------- */

  .card-accent {
    display: flex !important;
    align-items: center;
    margin: 0.25rem 0 1rem;
    padding: 0;
  }

  /* ======== ÉTOILES GMB (carte Pack Google My Business) ======== */
  .card-accent-stars {
    gap: 3px;
  }
  .card-accent-stars .ca-star {
    font-size: 18px;
    line-height: 1;
    color: rgba(15, 14, 12, 0.15);
    opacity: 0;
    transform: scale(0.5);
    transition: color 400ms ease,
                opacity 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .card-accent-stars.is-active .ca-star {
    opacity: 1;
    transform: scale(1);
    color: #e7711b;
  }
  .card-accent-stars.is-active .ca-star:nth-child(1) { transition-delay: 100ms; }
  .card-accent-stars.is-active .ca-star:nth-child(2) { transition-delay: 200ms; }
  .card-accent-stars.is-active .ca-star:nth-child(3) { transition-delay: 300ms; }
  .card-accent-stars.is-active .ca-star:nth-child(4) { transition-delay: 400ms; }
  .card-accent-stars.is-active .ca-star:nth-child(5) { transition-delay: 500ms; }

  .card-accent-stars .ca-label {
    margin-left: 0.5rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: rgba(15, 14, 12, 0.6);
    opacity: 0;
    transition: opacity 400ms ease 700ms;
  }
  .card-accent-stars.is-active .ca-label {
    opacity: 1;
  }


  /* ======== FLASH RÉSULTATS IMMÉDIATS (Google Ads featured) ======== */
  .card-accent-flash {
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(193, 78, 42, 0.15);
    border: 1px solid rgba(193, 78, 42, 0.3);
    border-radius: 100px;
    width: fit-content;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FAF6EC;
  }
  .card-accent-flash svg {
    width: 13px;
    height: 13px;
    color: #ffb88c;
    flex-shrink: 0;
    animation: flashPulse 2s ease-in-out infinite;
  }
  @keyframes flashPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.85); }
  }
  .card-accent-flash span {
    color: #FAF6EC;
    font-weight: 500;
  }


  /* ======== POSITION GOOGLE #8 → #1 (carte SEO Local) ======== */
  .card-accent-rank {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
  }
  .ca-rank-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(15, 14, 12, 0.5);
  }

  .ca-rank-track {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(15, 14, 12, 0.06);
    border-radius: 100px;
    overflow: visible;
  }

  /* Barre qui se remplit */
  .ca-rank-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(15, 14, 12, 0.3), #C14E2A);
    border-radius: 100px;
    transition: width 1200ms cubic-bezier(0.25, 0.9, 0.3, 1);
  }
  .card-accent-rank.is-active .ca-rank-fill {
    width: 100%;
  }

  /* Marqueurs #8 et #1 aux extremites */
  .ca-rank-marker {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1;
  }
  .ca-rank-marker-start {
    left: 0;
    background: rgba(15, 14, 12, 0.1);
    color: rgba(15, 14, 12, 0.45);
    text-decoration: line-through;
    top: calc(50% + 12px);
  }
  .ca-rank-marker-end {
    right: 0;
    background: #C14E2A;
    color: #FAF6EC;
    top: calc(50% + 12px);
    opacity: 0;
    transform: translateY(-50%) scale(0.7);
    transition: opacity 400ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .card-accent-rank.is-active .ca-rank-marker-end {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    transition-delay: 1000ms;
  }

  /* On laisse de la place sous la barre pour les markers */
  .card-accent-rank {
    padding-bottom: 1.25rem;
  }


  /* ----------------------------------------------------------------------
     4 OUTILS MAISON (google.php) · cartes premium avec icones animees
     ---------------------------------------------------------------------- */

  .tools-grid {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
  }

  .tool-card {
    padding: 1.75rem 1.5rem !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(250, 246, 236, 0.95), rgba(243, 237, 221, 0.6)) !important;
    border: 1px solid rgba(15, 14, 12, 0.06) !important;
    box-shadow: 0 4px 15px -5px rgba(15, 14, 12, 0.04);
    position: relative;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 300ms ease;
  }

  /* Icone en haut : badge carre arrondi */
  .tool-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    background: rgba(193, 78, 42, 0.08);
    border: 1px solid rgba(193, 78, 42, 0.15);
    border-radius: 12px;
    color: #C14E2A;
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 300ms ease;
  }
  .tool-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  .tool-card:active .tool-icon {
    transform: scale(1.08) rotate(-5deg);
    background: rgba(193, 78, 42, 0.15);
  }

  /* Tag */
  .tool-tag {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 9.5px !important;
    letter-spacing: 0.1em !important;
    color: rgba(15, 14, 12, 0.45) !important;
    display: block;
    margin-bottom: 0.5rem;
  }

  /* Titre */
  .tool-card h3 {
    font-family: "Fraunces", serif !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin: 0 0 0.6rem !important;
    color: #0F0E0C !important;
  }

  /* Description */
  .tool-card p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: rgba(15, 14, 12, 0.7) !important;
    margin: 0 !important;
  }

  /* CTA "Voir la demo" (outil 01 uniquement) */
  .tool-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.5rem 0.85rem;
    background: rgba(15, 14, 12, 0.04);
    border: 1px solid rgba(15, 14, 12, 0.08);
    border-radius: 100px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0F0E0C;
    text-decoration: none;
    transition: background 200ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .tool-cta:active {
    background: rgba(193, 78, 42, 0.1);
    transform: scale(0.96);
  }
  .tool-cta svg {
    width: 12px !important;
    height: 12px !important;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .tool-cta:active svg {
    transform: translateX(3px);
  }

  /* Feedback carte */
  .tool-card:active {
    transform: scale(0.985);
  }


  /* ----------------------------------------------------------------------
     EFFET COMBINÉ (google.php) · scroll-driven stagger marquant
     ---------------------------------------------------------------------- */

  /* On neutralise le m-reveal-stagger auto pour gerer soi-meme */
  .combined-grid.m-reveal-stagger > * {
    /* Laisser le JS scroll-driven gerer */
  }

  .combined-grid {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
  }

  /* Etat initial : cartes decalees + invisibles */
  .combined-grid .frein-card {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transform-origin: bottom center;
    transition: box-shadow 400ms ease;

    background: linear-gradient(145deg, rgba(250, 246, 236, 0.9), rgba(243, 237, 221, 0.6));
    border: 1px solid rgba(15, 14, 12, 0.06);
    border-radius: 18px;
    padding: 1.5rem 1.25rem !important;
    box-shadow: 0 2px 8px -2px rgba(15, 14, 12, 0.04);
    position: relative;
  }

  /* Visible : shadow renforcee */
  .combined-grid .frein-card.is-visible {
    box-shadow: 0 15px 40px -20px rgba(15, 14, 12, 0.18),
                0 5px 15px -10px rgba(193, 78, 42, 0.1);
  }

  /* Barre terracotta qui se trace a gauche */
  .combined-grid .frein-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #C14E2A, transparent);
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
    transition: height 600ms cubic-bezier(0.25, 0.9, 0.3, 1) 200ms;
  }
  .combined-grid .frein-card.is-visible::before {
    height: 60%;
  }

  /* Numero en badge terracotta (01 · GMB / 02 · Ads / etc.) */
  .combined-grid .frein-num {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem !important;
    background: rgba(193, 78, 42, 0.1);
    color: #C14E2A !important;
    border-radius: 100px;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 9.5px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    margin-bottom: 0.85rem !important;
    width: fit-content;
  }
  .combined-grid .frein-num strong {
    color: #C14E2A !important;
    font-weight: 500;
  }

  /* Carte 04 (l'effet combine final) : badge terracotta plein */
  .combined-grid .frein-card:nth-child(4) .frein-num {
    background: #C14E2A;
    color: #FAF6EC !important;
  }
  .combined-grid .frein-card:nth-child(4) .frein-num strong {
    color: #FAF6EC !important;
  }

  /* Titre en Fraunces */
  .combined-grid .frein-title {
    font-family: "Fraunces", serif !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    margin: 0 0 0.6rem !important;
    color: #0F0E0C !important;
  }
  .combined-grid .frein-title em {
    font-style: italic;
    color: #C14E2A;
  }

  /* Description */
  .combined-grid .frein-desc {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: rgba(15, 14, 12, 0.7) !important;
    margin: 0 !important;
  }

  /* Feedback tactile */
  .combined-grid .frein-card:active {
    transform: translateY(-2px) scale(0.98);
    transition-duration: 150ms;
  }


  /* ----------------------------------------------------------------------
     END CTA GOOGLE · bouton btn-accent (terracotta par defaut)
     ---------------------------------------------------------------------- */

  /* Le bouton .btn-accent a deja un style par defaut terracotta,
     on le rend visuellement coherent avec le btn-primary de web.php */
  .end-cta .btn-accent {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 320px;
    padding: 1.15rem 1.75rem !important;
    font-size: 1rem !important;
    font-weight: 500;
    border-radius: 100px;
    background: linear-gradient(135deg, #C14E2A 0%, #d55a33 100%);
    color: #FAF6EC;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow:
      0 20px 40px -15px rgba(193, 78, 42, 0.5),
      0 5px 15px -5px rgba(15, 14, 12, 0.15);
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 300ms ease;
  }
  .end-cta .btn-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(250, 246, 236, 0.2), transparent);
    animation: endCtaShine 3s ease-in-out infinite;
    animation-delay: 1s;
  }
  .end-cta .btn-accent span,
  .end-cta .btn-accent svg {
    position: relative;
    z-index: 1;
  }
  .end-cta .btn-accent svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .end-cta .btn-accent:active {
    transform: scale(0.96);
    box-shadow:
      0 10px 25px -10px rgba(193, 78, 42, 0.5),
      0 3px 10px -3px rgba(15, 14, 12, 0.25);
  }
  .end-cta .btn-accent:active svg {
    transform: translateX(5px);
  }

}


/* =========================================================================
   RESEAUX.PHP — MOBILE
   Hero + Avant/apres slider + Flux WhatsApp + Processus + Formules + End CTA
   ========================================================================= */

@media (max-width: 767px) {

  /* ----------------------------------------------------------------------
     AVANT / APRES · 2 sliders empiles verticalement, compacts
     ---------------------------------------------------------------------- */

  .ba-showcase {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
  }

  .ba-slider {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 12px 30px -12px rgba(15, 14, 12, 0.18);
    aspect-ratio: 1 / 1;  /* carre au lieu de 4/5 : moins haut */
    max-height: 360px;     /* plafond pour pas bouffer l'ecran */
    position: relative;
    /* Le slider entier accepte les gestes verticaux pour scroller */
    touch-action: pan-y;
  }

  /* Le handle quant a lui capture le touch horizontal */
  .ba-handle {
    width: 44px !important;
    touch-action: none;  /* le handle est la seule zone "drag-only" */
    cursor: ew-resize;
  }

  .ba-slider-inner,
  .ba-slider-inner img,
  .ba-after-wrap img {
    border-radius: 16px !important;
  }

  /* Handle visible, prehensive */
  .ba-handle-knob {
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 4px 14px -2px rgba(15, 14, 12, 0.35) !important;
  }
  .ba-handle-knob svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Ligne verticale */
  .ba-handle-line {
    width: 3px !important;
    background: rgba(250, 246, 236, 0.85) !important;
    box-shadow: 0 0 8px rgba(15, 14, 12, 0.3) !important;
  }

  /* Badges "Brute" et "IA" */
  .ba-badge {
    font-size: 9.5px !important;
    padding: 4px 9px !important;
    letter-spacing: 0.1em !important;
  }
  .ba-badge-left {
    top: 10px !important;
    left: 10px !important;
  }
  .ba-badge-right {
    top: 10px !important;
    right: 10px !important;
  }


  /* ----------------------------------------------------------------------
     FLUX WHATSAPP · texte + mockup phone empiles
     ---------------------------------------------------------------------- */

  .wa-flow {
    display: flex !important;
    flex-direction: column;
    gap: 2.5rem;
  }

  .wa-intro {
    text-align: left;
  }
  .wa-intro h2.sec-title {
    margin-bottom: 1rem !important;
  }
  .wa-intro p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: rgba(15, 14, 12, 0.75) !important;
    margin-bottom: 1.25rem;
  }

  /* Liste des points WhatsApp : cards plus premium */
  .wa-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    counter-reset: wa-counter;
  }
  .wa-points li {
    counter-increment: wa-counter;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    padding: 0.95rem 1rem 0.95rem 3.2rem !important;
    position: relative;
    background: #FAF6EC;
    border: 1px solid rgba(15, 14, 12, 0.06);
    border-radius: 14px;
    color: rgba(15, 14, 12, 0.75) !important;
    box-shadow: 0 2px 8px -2px rgba(15, 14, 12, 0.04);
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 250ms ease;
  }

  /* Numero en pilule noire sur la gauche */
  .wa-points li::before {
    content: counter(wa-counter, decimal-leading-zero);
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0F0E0C;
    color: #FAF6EC;
    border-radius: 50%;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    background-image: none;
  }

  /* Premier item : numero en terracotta pour ouvrir la sequence */
  .wa-points li:first-child::before {
    background: #C14E2A;
    box-shadow: 0 0 0 3px rgba(193, 78, 42, 0.15);
  }

  .wa-points li strong {
    color: #0F0E0C !important;
    font-weight: 500;
    font-family: "Fraunces", serif;
    font-size: 1rem;
  }

  .wa-points li:active {
    transform: scale(0.98);
    box-shadow: 0 4px 14px -4px rgba(15, 14, 12, 0.08);
  }

  /* Mockup phone : plus grand, centre, style iPhone moderne */
  .wa-phone-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
  }
  .wa-phone-shell {
    width: 300px !important;
    max-width: 100%;
    border-radius: 44px !important;
    padding: 10px !important;
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a) !important;
    border: 2px solid #2a2a2a !important;
    box-shadow:
      0 30px 60px -20px rgba(0, 0, 0, 0.4),
      0 15px 30px -10px rgba(0, 0, 0, 0.3),
      inset 0 2px 3px rgba(255, 255, 255, 0.08) !important;
    position: relative;
    overflow: hidden;
  }

  /* Dynamic Island moderne au lieu du notch */
  .wa-phone-notch {
    width: 96px !important;
    height: 28px !important;
    top: 12px !important;
    border-radius: 100px !important;
    background: #000 !important;
    z-index: 10;
  }

  /* Camera dans la Dynamic Island */
  .wa-phone-notch::before {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #1a3a5a 0%, #000 60%);
    box-shadow: inset 0 0 2px rgba(100, 150, 200, 0.3);
  }

  /* Status bar : heure + antenne + wifi + batterie */
  .wa-phone-screen {
    border-radius: 36px !important;
    min-height: 520px !important;
    padding-top: 52px !important;
    position: relative;
  }

  .wa-phone-screen::before {
    content: "9:41";
    position: absolute;
    top: 14px;
    left: 22px;
    font-family: -apple-system, system-ui, 'SF Pro', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0F0E0C;
    z-index: 4;
    letter-spacing: -0.01em;
  }

  /* Indicateurs reseau/wifi/batterie à droite */
  .wa-phone-screen::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 22px;
    width: 68px;
    height: 14px;
    background-image:
      /* Batterie */
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14' fill='none'%3E%3Crect x='0.5' y='0.5' width='22' height='13' rx='3' stroke='%230F0E0C' opacity='0.4'/%3E%3Crect x='2' y='2' width='19' height='10' rx='1.5' fill='%230F0E0C'/%3E%3Crect x='23' y='4' width='2' height='6' rx='1' fill='%230F0E0C' opacity='0.4'/%3E%3C/svg%3E"),
      /* Wifi */
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='%230F0E0C'%3E%3Cpath d='M8 11.5c.7 0 1.3-.6 1.3-1.3S8.7 9 8 9s-1.3.6-1.3 1.3.6 1.3 1.3 1.3zm4-4.2c-.2-.2-.6-.5-.9-.8-.9-.8-2-1.2-3.1-1.2-1.2 0-2.2.4-3.1 1.2-.4.3-.7.6-.9.8l1 1c.7-.7 1.9-1.2 3-1.2s2.3.5 3 1.2l1-1zm3-3c-.5-.5-1-1-1.6-1.4C11.8 1.4 10 .8 8 .8S4.2 1.4 2.6 2.8c-.6.5-1.1 1-1.6 1.5l1 1c.4-.4.8-.8 1.3-1.2C4.7 2.9 6.3 2.3 8 2.3c1.7 0 3.3.6 4.7 1.8.5.4.9.8 1.3 1.2l1-1z'/%3E%3C/svg%3E"),
      /* Signal */
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12' fill='%230F0E0C'%3E%3Crect x='0' y='8' width='3' height='4' rx='0.5'/%3E%3Crect x='5' y='6' width='3' height='6' rx='0.5'/%3E%3Crect x='10' y='3' width='3' height='9' rx='0.5'/%3E%3Crect x='15' y='0' width='3' height='12' rx='0.5'/%3E%3C/svg%3E");
    background-position:
      right 0 center,
      right 30px center,
      right 48px center;
    background-repeat: no-repeat;
    z-index: 4;
  }

  /* Header WhatsApp plus moderne */
  .wa-header {
    padding: 10px 14px !important;
    background: #008069 !important;
    color: white !important;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .wa-contact-avatar {
    background: #128c7e !important;
    color: white !important;
    font-family: "Fraunces", serif !important;
    font-size: 13px;
    font-weight: 500;
  }


  /* ----------------------------------------------------------------------
     PROCESSUS TIMELINE · on reutilise le systeme natif glitch.css
     (ligne terracotta + boule qui descend au scroll).
     Ici on ne fait que des ajustements pour ne pas casser le systeme.
     ---------------------------------------------------------------------- */

  .process-intro p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  /* Adaptation mobile des tailles uniquement, pas de re-invention */
  .process .timeline {
    padding-left: 2rem !important;
    margin-top: 1.5rem;
  }

  .process .step {
    padding-bottom: 2rem !important;
  }

  .process .step-head {
    gap: 0.75rem !important;
  }

  .process .step-n {
    font-size: 10.5px !important;
  }

  .process .step h4 {
    font-family: "Fraunces", serif !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #0F0E0C !important;
  }

  .process .step p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: rgba(15, 14, 12, 0.7) !important;
  }


  /* ----------------------------------------------------------------------
     TOGGLE ENGAGEMENT (tarifs reseaux) · design premium avec indicateur
     ---------------------------------------------------------------------- */

  .price-toggle {
    display: flex !important;
    position: relative;
    background: rgba(15, 14, 12, 0.05);
    border: 1px solid rgba(15, 14, 12, 0.08);
    border-radius: 100px;
    padding: 5px;
    margin: 2rem auto 2rem;
    width: 100%;
    max-width: 340px;
    box-shadow: inset 0 2px 4px rgba(15, 14, 12, 0.04);
  }

  .price-toggle-btn {
    flex: 1;
    padding: 0.85rem 1rem !important;
    border: none !important;
    background: transparent !important;
    border-radius: 100px !important;
    font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: rgba(15, 14, 12, 0.55) !important;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 300ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
    line-height: 1;
  }

  .price-toggle-btn.is-active {
    color: #FAF6EC !important;
    background: #0F0E0C !important;
    box-shadow:
      0 8px 20px -6px rgba(15, 14, 12, 0.4),
      0 2px 6px -2px rgba(193, 78, 42, 0.2);
    transition: color 300ms ease, background 400ms cubic-bezier(0.25, 0.9, 0.3, 1);
  }

  /* Label "jusqu'a -50€/mois" */
  .price-toggle-save {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    color: #C14E2A !important;
    opacity: 1;
  }
  .price-toggle-btn.is-active .price-toggle-save {
    color: #ffb88c !important;
  }

}