/* ============================================================
   ALL IN COMMUNICATION — responsive.css
   Règles @media complémentaires pour un rendu mobile parfait.
   Chargé EN DERNIER dans chaque page — ne modifie aucun code
   existant, n'ajoute que des surcharges au-dessus du code actuel.
============================================================ */


/* ============================================================
   1. CURSEUR CUSTOM — masqué sur appareils tactiles
   Les curseurs custom n'ont aucun sens sur écran touch.
============================================================ */
@media (pointer: coarse) {
  .curseur-bague,
  .curseur-point {
    display: none !important;
  }
  *, *::before, *::after {
    cursor: auto !important;
  }
}


/* ============================================================
   2. OVERFLOW HORIZONTAL — bloqué globalement sur mobile
============================================================ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
}


/* ============================================================
   3. NAVBAR — logo légèrement plus compact
============================================================ */
@media (max-width: 768px) {
  .nav-barre__logo img {
    height: 2.25rem;
  }
}


/* ============================================================
   4. HERO ACCUEIL — titre et actions
============================================================ */
@media (max-width: 480px) {
  .hero__titre {
    font-size: clamp(1.875rem, 7.5vw, 2.75rem);
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .btn-hero {
    justify-content: center;
    width: 100%;
  }
  .hero__stats {
    flex-direction: column;
    gap: 0.625rem;
  }
  .hero__video-wrap {
    margin-top: 1.5rem;
  }
}


/* ============================================================
   5. HERO SERVICE — titre et badge accent
============================================================ */
@media (max-width: 480px) {
  .hero-service__interieur {
    padding-inline: 1.25rem;
  }
  .hero-service__titre {
    font-size: clamp(1.875rem, 8vw, 2.75rem);
    line-height: 1.0;
  }
  .hero-service__titre-accent {
    font-size: 0.85em;
  }
  .hero-service__stat {
    font-size: 1rem;
  }
  .hero-service__stat img {
    width: 2.25rem;
    height: 2.25rem;
  }
}


/* ============================================================
   6. SECTION SERVICES GRILLE (accueil)
   Colonne mini-cartes : empilées proprement, dégradés masqués
============================================================ */
@media (max-width: 580px) {
  .services-grille__degrade {
    display: none;
  }
  .services-grille__col {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }
}


/* ============================================================
   7. SECTION PROCESSUS ONGLETS — scroll horizontal propre
============================================================ */
@media (max-width: 480px) {
  .processus__onglets {
    gap: 0.25rem;
  }
  .processus__onglet {
    font-size: 0.6875rem;
    padding: 0.375rem 0.625rem;
  }
}


/* ============================================================
   8. SECTION ARGUMENTS — 1 colonne sur mobile
   (les cartes superposées ne fonctionnent pas sur petit écran)
============================================================ */
@media (max-width: 580px) {
  .arguments__grille {
    flex-direction: column;
    padding-inline: 0;
    gap: 1.25rem;
    align-items: stretch;
  }
  .argument-carte {
    flex: 0 0 100% !important;
    margin-inline: 0 !important;
    transform: none !important;
  }
  .argument-carte--plus,
  .argument-carte--moins {
    transform: none !important;
  }
}


/* ============================================================
   9. SECTION OFFRES EXCLUSIVES — ajustements padding
============================================================ */
@media (max-width: 768px) {
  .offres-exclusives__interieur {
    height: auto;
    min-height: unset;
  }
  .offres-exclusives__contenu {
    padding-block: 1rem;
  }
}


/* ============================================================
   10. SECTION TARIFS — carte prix et boutons
============================================================ */
@media (max-width: 480px) {
  .tarif-carte__prix-montant {
    font-size: 2rem;
  }
  .tarif-carte__btn {
    font-size: 0.875rem;
    padding: 0.875rem 1.25rem;
  }
}


/* ============================================================
   11. CTA CONTACT — marges et taille titre
============================================================ */
@media (max-width: 480px) {
  .cta-contact {
    margin-inline: 0.75rem;
    border-radius: 1rem;
  }
  .cta-contact__titre {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
  .cta-contact__etapes {
    gap: 0.75rem;
  }
}


/* ============================================================
   12. CONTACT PAGE — grille 2col → 1col
============================================================ */
@media (max-width: 900px) {
  .contact-hero__grille {
    grid-template-columns: 1fr;
  }
  .contact-infos__photo {
    display: none;
  }
  .contact-infos {
    padding-right: clamp(1.5rem, 3vw, 2rem);
    min-height: 180px;
  }
}

@media (max-width: 480px) {
  .contact-hero {
    padding-inline: 1.25rem;
  }
  .contact-form__grille {
    grid-template-columns: 1fr;
  }
  .contact-form__btn {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   13. BLOG & RÉALISATIONS — grille de cartes 3col → 2col → 1col
============================================================ */
@media (max-width: 900px) {
  .real-grille__corps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .real-grille__corps {
    grid-template-columns: 1fr;
  }
  .real-hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .real-hero__btn-primaire,
  .real-hero__btn-secondaire {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   14. FOOTER — tuile jaune : nav + CTA rond empilés
============================================================ */
@media (max-width: 768px) {
  .pied-page__jaune {
    flex-direction: column;
    gap: 1.25rem;
  }
  .pied-page__cta-rond {
    width: 4.5rem;
    height: 4.5rem;
  }
}

@media (max-width: 480px) {
  .pied-page__bleu-titre {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }
  .pied-page__nav-lien {
    font-size: 1.25rem !important;
  }
}


/* ============================================================
   15. AGENCE — citation et section équipe
============================================================ */
@media (max-width: 480px) {
  .citation-agence__texte {
    font-size: clamp(1.875rem, 7vw, 2.75rem);
  }
  .citation-agence__auteur {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.625rem;
  }
  .citation-agence__nom {
    text-align: center;
  }
}


/* ============================================================
   16. FICHE PROJET — paddings et galerie
============================================================ */
@media (max-width: 480px) {
  .fil-ariane {
    padding-inline: 1.25rem;
  }
  .projet-hero {
    padding-inline: 1.25rem;
  }
  .projet-galerie {
    padding-inline: 1.25rem;
  }
  .projet-processus__titre-section {
    padding-inline: 1.25rem;
  }
}


/* ============================================================
   17. FICHE ARTICLE — paddings
============================================================ */
@media (max-width: 480px) {
  .article-hero__interieur {
    padding-inline: 1.25rem;
  }
  .article-corps {
    padding-inline: 1.25rem;
  }
  .articles-similaires {
    padding-inline: 1.25rem;
  }
  .article-hero__grille {
    gap: 1.5rem;
  }
}


/* ============================================================
   18. BOUTON FLOTTANT — plus compact sur mobile
============================================================ */
/* Bulle flottante — picto masqué, texte conservé */
.bulle-flottante [aria-hidden="true"] { display: none !important; }


/* ============================================================
   19. SECTION PACKS / ESTIMATION
   Simulateur : champ pleine largeur sur très petit écran
============================================================ */
@media (max-width: 480px) {
  .sim-form-grille {
    grid-template-columns: 1fr;
  }
  .sim-cat-grille {
    grid-template-columns: repeat(2, 1fr);
  }
  .sim-zone {
    padding: 1rem 1.125rem;
  }
  .sim-pied {
    padding: 0 1.125rem 1.25rem;
  }
  .sim-entete {
    padding: 1rem 1.125rem 0;
  }
}


/* ============================================================
   20. PIED-PAGE BARRE — newsletter + réseaux empilés
============================================================ */
@media (max-width: 480px) {
  .pied-page__barre {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
  }
  .pied-page__reseaux {
    order: -1;
  }
  .pied-page__newsletter {
    width: 100%;
    justify-content: center;
  }
  .pied-page__legal {
    gap: 0.75rem;
    justify-content: center;
  }
}