/*
 * responsive.css — Drone-Presta
 * ─────────────────────────────────────────────────────────────
 * Feuille de style dédiée au rendu mobile / tablette.
 * À charger APRÈS style.css dans functions.php.
 *
 * Stratégie : mobile-last (on part du desktop, on adapte vers le bas).
 * Breakpoints :
 *   — 1024px  Tablette paysage
 *   —  768px  Tablette portrait / smartphone large
 *   —  480px  Smartphone standard
 *   —  360px  Petit smartphone
 *
 * TABLE DES MATIÈRES
 * ─────────────────────────────────────────────────────────────
 * 01. Variables & meta
 * 02. Navigation
 * 03. Typographie de base
 * 04. Utilitaires & boutons
 * 05. Hero — Homepage
 * 06. Hero — Page service
 * 07. Hero — Blog liste
 * 08. Hero — Article
 * 09. Stats bar
 * 10. Section services
 * 11. Section expertise / avantages
 * 12. Section processus
 * 13. Section CTA
 * 14. Blog preview homepage
 * 15. Blog — Liste & filtres
 * 16. Blog — Cards articles
 * 17. Blog — Sidebar & widgets
 * 18. Article — Corps & composants
 * 19. Article — Navigation & related
 * 20. Page devis
 * 21. Footer
 * 22. Animations
 * ─────────────────────────────────────────────────────────────
 */


/* ============================================================
   01. VARIABLES & META
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --nav-h: 64px;
  }
}


/* ============================================================
   02. NAVIGATION
   ============================================================ */

@media (max-width: 1024px) {
  .site-nav, nav {
    padding-inline: 1.5rem;
  }
  .nav-links {
    gap: 1.6rem;
  }
  .nav-links a {
    font-size: .78rem;
  }
}

@media (max-width: 768px) {
  .site-nav, nav {
    padding-inline: 1.2rem;
    padding-block: .9rem;
  }
  .nav-links {
    display: none;
  }
  .nav-logo-text {
    font-size: 1.05rem;
  }
  .nav-logo img, .nav-logo-img {
    width: 32px;
    height: 32px;
  }
  .nav-cta {
    padding: .45rem 1rem;
    font-size: .78rem;
  }
  .nav-back {
    font-size: .76rem;
  }
  /* Burger placeholder */
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-burger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: rgba(200, 168, 130, 0.7);
    border-radius: 99px;
    transition: transform .2s, opacity .2s;
  }
  .breadcrumb-bar {
    padding-inline: 1.2rem;
  }
  .breadcrumb a, .breadcrumb span {
    font-size: .68rem;
  }
}

@media (max-width: 480px) {
  .site-nav, nav {
    padding-inline: 1rem;
  }
  .nav-logo-text {
    font-size: .95rem;
  }
}


/* ============================================================
   03. TYPOGRAPHIE DE BASE
   ============================================================ */

@media (max-width: 768px) {
  h1 { font-size: clamp(1.75rem, 6vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem,  5vw, 1.9rem); }
  h3 { font-size: clamp(1.1rem,  4vw, 1.4rem); }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
  h2 { font-size: clamp(1.3rem, 6vw, 1.7rem); }
}


/* ============================================================
   04. UTILITAIRES & BOUTONS
   ============================================================ */

@media (max-width: 768px) {
  .inner {
    padding-inline: 1.2rem;
  }
  .section-py    { padding-block: 4rem; }
  .section-py-sm { padding-block: 2.5rem; }
  .section-py-lg { padding-block: 5rem; }

  .btn {
    padding: .75rem 1.6rem;
    font-size: .88rem;
  }
  .section-label {
    font-size: .62rem;
  }
  .section-title {
    font-size: clamp(1.4rem, 5vw, 1.9rem);
  }
}

@media (max-width: 480px) {
  .inner {
    padding-inline: 1rem;
  }
  .btn {
    padding: .7rem 1.4rem;
    font-size: .85rem;
  }
}


/* ============================================================
   05. HERO — HOMEPAGE
   ============================================================ */

@media (max-width: 1024px) {
  .hero, .hero-home {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: var(--nav-h);
    padding-bottom: 4rem;
  }
  .hero-home__left, .hero-left {
    max-width: 100%;
    padding: 3.5rem 1.5rem 3rem;
  }
  .hero-home__right {
    display: none;
  }
}

@media (max-width: 768px) {

  #hero {
    height: 100vh;
  }

  .section-hero {
    padding-top: 232px;
  }

  .slide-tool {
    top: 23px;
    width: 270px;
  }

  .hero, .hero-home {
    padding-bottom: 3rem;
  }
  .hero-home__left, .hero-left {
    padding: 2.5rem 1.2rem 2.5rem;
  }
  .hero-title, .hero-home__title {
    font-size: clamp(2rem, 7vw, 2.8rem);
    margin-bottom: 1.1rem;
  }
  .hero-desc, .hero-home__desc {
    font-size: .95rem;
    margin-bottom: 2rem;
  }
  .hero-actions, .hero-home__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
    margin-bottom: 2.5rem;
  }
  .hero-home__actions .btn-primary,
  .hero-actions .btn-primary {
    text-align: center;
  }
  .hero-home__link, .btn-ghost {
    justify-content: center;
    text-align: center;
  }
  .hero-badge {
    font-size: .62rem;
    padding: .25rem .8rem;
    margin-bottom: 1.3rem;
  }
  .hero-mini-stats {
    gap: 1.2rem;
    padding-top: 1.5rem;
  }
  .hero-mini-stat__num {
    font-size: 1.3rem;
  }
  .hero-mini-stat__lbl {
    font-size: .6rem;
  }
  .hero-mini-sep {
    height: 28px;
  }
}

@media (max-width: 480px) {
  .hero-title, .hero-home__title {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }
  .hero-mini-stats {
    gap: .8rem;
  }
  .hero-mini-sep {
    display: none;
  }
}


/* ============================================================
   06. HERO — PAGE SERVICE
   ============================================================ */

@media (max-width: 1024px) {
  .hero-service {
    padding: 3rem 1.5rem 0;
  }
  .hero-service__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-service__left {
    padding-bottom: 3rem;
  }
  .hero-service__visual {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-service {
    padding: 2.5rem 1.2rem 0;
  }
  .hero-service__title {
    font-size: clamp(1.8rem, 6.5vw, 2.4rem);
    margin-bottom: 1rem;
  }
  .hero-service__desc {
    font-size: .92rem;
    margin-bottom: 1.8rem;
  }
  .hero-service__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
  }
  .hero-service__actions .btn-primary {
    text-align: center;
  }
  /* Présentation */
  .section-presentation {
    padding: 4rem 1.2rem;
  }
  .section-presentation .inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-inline: 0;
  }
  .pres-title {
    font-size: clamp(1.4rem, 5vw, 1.85rem);
  }
  /* Avantages */
  .section-avantages {
    padding: 4rem 1.2rem;
  }
  .avantages-head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  .avantages-title {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
  }
  .avantages-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  /* FAQ */
  .section-faq {
    padding: 4rem 1.2rem;
  }
  .faq-title {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }
  /* Related services */
  .section-related {
    padding: 3rem 1.2rem;
  }
  .related-grid, .related-cards {
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
  }
}

@media (max-width: 480px) {
  .avantages-grid {
    grid-template-columns: 1fr;
  }
  .related-grid, .related-cards {
    grid-template-columns: 1fr;
  }
  .section-faq {
    padding: 3.5rem 1rem;
  }
}


/* ============================================================
   07. HERO — BLOG LISTE
   ============================================================ */

@media (max-width: 1024px) {
  .blog-hero, .hero-blog {
    padding: 5rem 1.5rem 3.5rem;
  }
  .blog-hero-inner, .hero-blog__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .blog-hero-stats, .hero-blog__stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
  }
  .hero-blog-stat {
    text-align: left;
    flex: 1;
    min-width: 100px;
  }
}

@media (max-width: 768px) {
  .blog-hero, .hero-blog {
    padding: 3.5rem 1.2rem 2.5rem;
  }
  .blog-hero-title, .hero-blog__title {
    font-size: clamp(1.8rem, 6.5vw, 2.4rem);
  }
  .blog-hero-desc, .hero-blog__desc {
    font-size: .92rem;
  }
  .blog-hero-stats, .hero-blog__stats {
    display: none;
  }
  .filter-bar {
    top: var(--nav-h);
  }
  .filter-bar-inner, .filter-bar__inner {
    padding-inline: 1rem;
  }
  .filter-btn {
    padding: .85rem 1rem;
    font-size: .76rem;
  }
  .blog-layout {
    padding-inline: 1.2rem;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-bottom: 4rem;
  }
  .blog-sidebar {
    order: -1;
  }
}

@media (max-width: 480px) {
  .blog-hero, .hero-blog {
    padding: 3rem 1rem 2rem;
  }
  .filter-btn {
    padding: .75rem .75rem;
    font-size: .72rem;
  }
  .blog-layout {
    padding-inline: 1rem;
  }
}


/* ============================================================
   08. HERO — ARTICLE
   ============================================================ */

@media (max-width: 1024px) {
  .hero-article__inner, .article-hero-inner {
    padding: 3rem 1.5rem 0;
  }
  .article-layout {
    grid-template-columns: 1fr;
    padding-inline: 1.5rem;
    padding-bottom: 4rem;
    gap: 3rem;
  }
  .article-sidebar {
    position: static;
    top: auto;
  }
  .article-content {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero-article__inner, .article-hero-inner {
    padding: 2.5rem 1.2rem 0;
  }
  .hero-article__title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }
  .hero-article__excerpt {
    font-size: .92rem;
    margin-bottom: 1.5rem;
  }
  .hero-article__category, .hero-category {
    font-size: .62rem;
    margin-bottom: 1rem;
  }
  .hero-article__visual {
    height: 240px;
    margin-top: 2rem;
  }
  .article-meta {
    gap: .8rem;
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
  }
  .meta-sep {
    display: none;
  }
  .article-layout {
    padding-inline: 1.2rem;
    gap: 2.5rem;
    padding-bottom: 3rem;
  }
  .article-content {
    padding-top: 2.5rem;
  }
  .article-lead {
    font-size: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.8rem;
  }
  .article-body {
    font-size: .9rem;
  }
  .article-body h2 {
    font-size: 1.3rem;
    margin: 2.2rem 0 .9rem;
  }
  .article-body h2::before {
    left: -1rem;
  }
  .article-body h3 {
    font-size: 1.05rem;
  }
  .article-body blockquote {
    padding: 1.2rem 1.3rem;
    margin: 1.8rem 0;
  }
  .article-body blockquote::before {
    font-size: 2.5rem;
    top: -.6rem;
  }
  .article-body blockquote p {
    font-size: .93rem;
  }
  .callout {
    padding: 1.1rem 1.2rem;
    margin: 1.8rem 0;
    gap: .75rem;
  }
  .callout__text, .callout-text {
    font-size: .83rem;
  }
  .article-img {
    margin: 1.8rem 0;
  }
  .article-img--wide, .article-img-wide {
    margin: 1.8rem -1.2rem;
  }
  .article-img figcaption {
    font-size: .72rem;
  }
  .article-share {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    padding: 1.1rem;
  }
  .share-btns {
    flex-wrap: wrap;
    gap: .4rem;
  }
  .author-bio {
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem;
  }
  .article-tags {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }
  /* Sidebar article */
  .article-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .toc-widget {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-article__inner, .article-hero-inner {
    padding: 2rem 1rem 0;
  }
  .hero-article__title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .hero-article__visual {
    height: 200px;
  }
  .article-layout {
    padding-inline: 1rem;
  }
  .article-img--wide, .article-img-wide {
    margin-inline: -1rem;
  }
  .share-btn {
    padding: .3rem .7rem;
    font-size: .72rem;
  }
}


/* ============================================================
   09. STATS BAR
   ============================================================ */

@media (max-width: 768px) {
  .stats-bar__inner, .stats-bar-inner {
    grid-template-columns: 1fr 1fr;
    padding: 1.5rem 1.2rem;
    gap: .5rem;
  }
  .stat-item__num, .stat-num {
    font-size: 1.55rem;
  }
  .stat-item__lbl, .stat-label {
    font-size: .65rem;
  }
  .stat-item:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .stats-bar__inner, .stats-bar-inner {
    padding: 1.2rem 1rem;
  }
  .stat-item__num, .stat-num {
    font-size: 1.35rem;
  }
}


/* ============================================================
   10. SECTION SERVICES
   ============================================================ */

@media (max-width: 1024px) {
  .section-services {
    padding: 5rem 1.5rem;
  }
  .services__head, .services-head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }
  .services__grid, .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .section-services {
    padding: 4rem 1.2rem;
  }
  .services__title, .services-title {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
  }
  .services__grid, .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
  }
  .service-card {
    padding: 1.4rem 1.2rem;
    gap: .7rem;
  }
  .svc-icon {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
  .svc-name {
    font-size: .9rem;
  }
  .svc-desc {
    font-size: .78rem;
    display: none;
  }
}

@media (max-width: 480px) {
  .section-services {
    padding: 3.5rem 1rem;
  }
  .services__grid, .services-grid {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .svc-desc {
    display: block;
  }
  .service-card {
    padding: 1.3rem;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
  .svc-icon {
    flex-shrink: 0;
  }
  .svc-link {
    display: none;
  }
}


/* ============================================================
   11. SECTION EXPERTISE / AVANTAGES
   ============================================================ */

@media (max-width: 1024px) {
  .section-expertise, .section-vapeur {
    padding: 5rem 1.5rem;
  }
  .expertise__inner, .expertise-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .expertise__grid, .expertise-right {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .section-expertise, .section-vapeur {
    padding: 4rem 1.2rem;
  }
  .expertise__title, .expertise-title {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    margin-bottom: 1rem;
  }
  .expertise__intro {
    font-size: .9rem;
    margin-bottom: 1.8rem;
  }
  .expertise__grid, .expertise-right {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .av-card {
    padding: 1.3rem 1.1rem;
  }
  .av-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
    margin-bottom: .7rem;
  }
  .av-title {
    font-size: .9rem;
  }
  .av-desc {
    font-size: .78rem;
  }
}

@media (max-width: 480px) {
  .section-expertise {
    padding: 3.5rem 1rem;
  }
  .expertise__grid, .expertise-right {
    grid-template-columns: 1fr;
  }
  .av-card--full {
    grid-column: span 1;
  }
}


/* ============================================================
   12. SECTION PROCESSUS
   ============================================================ */

@media (max-width: 1024px) {
  .section-processus {
    padding: 5rem 1.5rem;
  }
  .processus__steps, .processus-steps {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1rem;
  }
  .processus__steps::before, .processus-steps::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .section-processus {
    padding: 4rem 1.2rem;
  }
  .processus__title, .processus-title {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }
  .processus__head {
    margin-bottom: 3rem;
  }
  .processus__steps, .processus-steps {
    grid-template-columns: 1fr 1fr;
    gap: 2rem .8rem;
  }
  .step-item {
    padding: 0 .5rem;
  }
  .step-num-wrap {
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
  }
  .step-title {
    font-size: .88rem;
  }
  .step-desc {
    font-size: .78rem;
  }
}

@media (max-width: 480px) {
  .section-processus {
    padding: 3.5rem 1rem;
  }
  .processus__steps, .processus-steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .step-item {
    flex-direction: row;
    text-align: left;
    gap: 1rem;
    padding: 0;
  }
  .step-num-wrap {
    margin-bottom: 0;
    flex-shrink: 0;
  }
}


/* ============================================================
   13. SECTION CTA
   ============================================================ */

@media (max-width: 1024px) {
  .section-cta {
    padding: 5rem 1.5rem;
  }
  .cta__inner, .cta-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .cta__actions, .cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .section-cta {
    padding: 4rem 1.2rem;
  }
  .cta-title, .cta__title {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
  }
  .cta__sub, .cta-sub {
    font-size: .9rem;
    margin-bottom: 1.2rem;
  }
  .cta__reassurances, .cta-reassurances {
    gap: .8rem;
    flex-direction: column;
  }
  .cta__reass, .cta-reass, .cta-reass-item {
    font-size: .78rem;
  }
  .cta__actions, .cta-actions, .cta-action {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: .8rem;
  }
  .cta__actions .btn-cta, .cta-actions .btn-cta, .btn-cta-main {
    text-align: center;
    width: 100%;
  }
  .cta__phone, .cta-phone {
    text-align: center;
    font-size: 1.2rem;
  }
  .cta__hours, .cta-hours, .cta-delai {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .section-cta {
    padding: 3.5rem 1rem;
  }
}


/* ============================================================
   14. BLOG PREVIEW HOMEPAGE
   ============================================================ */

@media (max-width: 1024px) {
  .section-blog {
    padding: 5rem 1.5rem;
  }
  .blog-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
  }
  .blog-card.big {
    grid-column: span 2;
  }
  .blog-card.big .blog-visual {
    height: 220px;
  }
}

@media (max-width: 768px) {
  .section-blog {
    padding: 4rem 1.2rem;
  }
  .blog-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .blog-title {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .blog-card.big {
    grid-column: span 1;
  }
  .blog-card.big .blog-visual {
    height: 200px;
  }
  .blog-visual {
    height: 180px;
  }
  .blog-card-title {
    font-size: .9rem;
  }
  .blog-card.big .blog-card-title {
    font-size: 1rem;
  }
  .blog-card-excerpt {
    display: none;
  }
}

@media (max-width: 480px) {
  .section-blog {
    padding: 3.5rem 1rem;
  }
  .blog-grid {
    gap: .8rem;
  }
}


/* ============================================================
   15. BLOG — LISTE & FILTRES
   ============================================================ */

@media (max-width: 768px) {
  .featured-card {
    grid-template-columns: 1fr;
  }
  .featured-visual {
    min-height: 220px;
  }
  .featured-body {
    padding: 1.5rem 1.3rem;
    gap: .8rem;
  }
  .featured-title {
    font-size: 1.2rem;
  }
  .articles-section-label {
    font-size: .62rem;
    margin-bottom: 1.2rem;
  }
  .articles-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .pagination {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }
  .page-btn {
    width: 34px;
    height: 34px;
    font-size: .8rem;
  }
}

@media (max-width: 480px) {
  .featured-body {
    padding: 1.2rem 1rem;
  }
  .featured-title {
    font-size: 1.05rem;
  }
}


/* ============================================================
   16. BLOG — CARDS ARTICLES
   ============================================================ */

@media (max-width: 768px) {
  .art-card--wide, .art-card-wide {
    flex-direction: column;
  }
  .art-card--wide .art-card__visual,
  .art-card-wide .art-card-visual {
    width: 100%;
    height: 160px;
  }
  .art-card--wide .art-card__title,
  .art-card-wide .art-card-title {
    font-size: .95rem;
  }
  .art-card__visual, .art-card-visual {
    height: 150px;
  }
  .art-card__body, .art-card-body {
    padding: 1.1rem;
    gap: .5rem;
  }
  .art-card__title, .art-card-title {
    font-size: .9rem;
  }
  .art-card__excerpt, .art-card-excerpt {
    -webkit-line-clamp: 2;
    font-size: .78rem;
  }
  .art-date, .art-card-date {
    font-size: .68rem;
  }
}


/* ============================================================
   17. BLOG — SIDEBAR & WIDGETS
   ============================================================ */

@media (max-width: 1024px) {
  .blog-layout, .article-layout {
    grid-template-columns: 1fr;
    padding-inline: 1.5rem;
    gap: 3rem;
  }
  .blog-sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
  }
  .toc-widget {
    display: none;
  }
}

@media (max-width: 768px) {
  .blog-layout, .article-layout {
    padding-inline: 1.2rem;
    padding-bottom: 3.5rem;
    gap: 2.5rem;
  }
  .blog-sidebar {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .widget__header, .widget-header {
    padding: .85rem 1.1rem;
    font-size: .78rem;
  }
  .newsletter__body, .newsletter-body {
    padding: 1.1rem;
  }
  .newsletter__desc, .newsletter-desc {
    font-size: .8rem;
    margin-bottom: .9rem;
  }
  .cat-item {
    padding: .6rem 1.1rem;
    font-size: .82rem;
  }
  .cta-widget__body, .cta-widget-body {
    padding: 1.1rem;
  }
  .cta-widget__text, .cta-widget-text {
    font-size: .82rem;
  }
  /* Masquer widgets non essentiels */
  .tags-cloud {
    display: none;
  }
}

@media (max-width: 480px) {
  .blog-layout, .article-layout {
    padding-inline: 1rem;
  }
}


/* ============================================================
   18. ARTICLE — CORPS & COMPOSANTS
   ============================================================ */

@media (max-width: 768px) {
  .article-body ul li,
  .article-body ol li {
    font-size: .88rem;
  }
  .article-divider {
    margin: 2rem 0;
  }
  .art-tag, .tag-chip {
    font-size: .68rem;
    padding: .22rem .55rem;
  }
}


/* ============================================================
   19. ARTICLE — NAVIGATION & RELATED
   ============================================================ */

@media (max-width: 768px) {
  .article-nav {
    grid-template-columns: 1fr;
    gap: .8rem;
    margin-top: 3rem;
  }
  .art-nav-card--next {
    align-items: flex-start;
    text-align: left;
  }
  .related-articles {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
  }
  .related-header {
    margin-bottom: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  .related-title {
    font-size: 1.2rem;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .rel-visual {
    height: 100px;
  }
  .rel-body {
    padding: .8rem;
  }
  .rel-title {
    font-size: .8rem;
  }
}

@media (max-width: 480px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
  .article-nav {
    gap: .7rem;
  }
  .art-nav-title {
    font-size: .88rem;
  }
}


/* ============================================================
   20. PAGE DEVIS
   ============================================================ */

@media (max-width: 1024px) {
  .devis-layout, .page {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .devis-left, .left-panel {
    position: static;
    height: auto;
    padding: 2.5rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .devis-left__title, .panel-title {
    grid-column: span 2;
    font-size: 1.5rem;
  }
  .devis-right, .right-panel {
    padding: 2.5rem 1.5rem;
  }
}

@media (max-width: 768px) {
  .devis-left, .left-panel {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.2rem;
    gap: 1.5rem;
  }
  .devis-left__title, .panel-title {
    font-size: clamp(1.3rem, 5vw, 1.7rem);
  }
  .reass-item {
    padding: .85rem .9rem;
  }
  .reass-title {
    font-size: .8rem;
  }
  .reass-desc {
    font-size: .72rem;
  }
  .devis-left__contact, .panel-contact {
    display: none;
  }
  .devis-right, .right-panel {
    padding: 2rem 1.2rem;
  }
  /* Indicateur étapes */
  .step-indicator {
    margin-bottom: 1.8rem;
  }
  .step-label {
    font-size: .58rem;
  }
  .step-dot {
    width: 24px;
    height: 24px;
    font-size: .68rem;
  }
  /* Sélecteur services */
  .service-selector, .service-grid {
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }
  .service-option {
    padding: .9rem .7rem;
  }
  .service-option__icon {
    font-size: 1.2rem;
  }
  .service-option__label {
    font-size: .7rem;
  }
  /* Champs */
  .field-group {
    margin-bottom: 1rem;
  }
  .field-label {
    font-size: .74rem;
  }
  .field-input, .field-textarea, .field-select {
    padding: .65rem .85rem;
    font-size: .88rem;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  /* Urgence */
  .urgency-group, .urgency-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .urgency-btn {
    padding: .6rem .5rem;
    font-size: .76rem;
  }
  /* Form header */
  .form-header h2 {
    font-size: 1.3rem;
  }
  .form-header p {
    font-size: .85rem;
  }
  /* Navigation form */
  .form-nav {
    flex-direction: column-reverse;
    gap: .8rem;
    align-items: stretch;
  }
  .form-nav .btn-next,
  .form-nav .btn-submit {
    width: 100%;
    justify-content: center;
  }
  /* Succès */
  .devis-success, .success-card {
    padding: 2.5rem 1rem;
  }
  .success-icon {
    width: 60px;
    height: 60px;
    font-size: 1.7rem;
  }
  .success-title {
    font-size: 1.3rem;
  }
  .success-text {
    font-size: .88rem;
  }
}

@media (max-width: 480px) {
  .devis-left, .left-panel {
    padding: 1.8rem 1rem;
  }
  .devis-right, .right-panel {
    padding: 1.8rem 1rem;
  }
  .service-selector, .service-grid {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .service-option {
    flex-direction: row;
    text-align: left;
    padding: .85rem 1rem;
    gap: .8rem;
  }
  .urgency-group, .urgency-grid {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
}


/* ============================================================
   21. FOOTER
   ============================================================ */

@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 3rem 1.5rem 2.5rem;
  }
  .footer-brand {
    grid-column: span 2;
  }
  .footer-bottom {
    padding-inline: 1.5rem;
  }
}

@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 1.2rem 2rem;
  }
  .footer-brand {
    grid-column: span 1;
  }
  .footer-tagline {
    max-width: 100%;
    font-size: .83rem;
  }
  .footer-col-title {
    font-size: .68rem;
    margin-bottom: .9rem;
  }
  .footer-links a {
    font-size: .82rem;
  }
  .footer-contact-text {
    font-size: .8rem;
  }
  .footer-hour-day, .footer-hour-time, .footer-hour-closed {
    font-size: .78rem;
  }
  .footer-bottom {
    padding: 1.2rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
  }
  .footer-copy, .footer-legal a {
    font-size: .72rem;
  }
  .footer-legal {
    flex-wrap: wrap;
    gap: .8rem 1.2rem;
  }
}

@media (max-width: 480px) {
  .footer-top {
    padding: 2rem 1rem 1.5rem;
  }
  .footer-bottom {
    padding-inline: 1rem;
  }
  .footer-certif {
    font-size: .68rem;
    padding: .3rem .65rem;
  }
}


/* ============================================================
   22. ANIMATIONS
   ============================================================ */

@media (max-width: 768px) {
  /* Réduire l'amplitude et la durée */
  .reveal {
    transform: translateY(14px);
    transition-duration: .5s;
  }
  /* Supprimer les délais en cascade — tout apparaît ensemble */
  .rd1, .rd2, .rd3, .rd4, .rd5 {
    transition-delay: 0s;
  }
  /* Désactiver les animations purement décoratives */
  .hero-float-card {
    animation: none;
  }
  .hero-drone {
    animation-duration: 8s;
  }
  .scan-ring {
    animation: none;
    display: none;
  }
  .drone-anim {
    animation-duration: 8s;
  }
}

/* Respect des préférences système (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
}