@media (max-width: 799px) and (orientation: landscape) {
  .grids {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 3vw, 1.5rem);
  }
}

@media (max-width: 799px) and (orientation: portrait) {
    .cta-bubbles {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .bubble-group {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .bubble {
        width: 100px;
        height: 100px;
        padding: 0;
        border-radius: 45% 55%;
        font-size: 0.85em;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        animation: bubbleColor 3s ease-in-out infinite;
    }
}

@media (max-width: 799px) and (orientation: landscape) {
    .cta-bubbles {
        flex-direction: row;
        align-items: center;
        gap: 25px;
    }

    .bubble-group {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .bubble {
        width: 105px;
        height: 105px;
        padding: 0;
        border-radius: 45% 55%;
        font-size: 0.8em;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        animation: bubbleColor 3s ease-in-out infinite;
    }
}


@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  .contact-form [data-notification] { max-width: min(calc(100% - 2rem), 18rem); font-size: .75rem; }
  .contact-form .notification__text--full { display: none; }
  .contact-form .notification__text--compact { display: inline; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .font-banner { min-height: 100svh; padding: 1.5rem 0; gap: 1rem; }
  .font-banner .logo-container { margin: 0; }
  .font-banner .logo { width: min(25svh,128px); }
  .font-banner .logo-line { margin-top: 1rem; }
  .font-banner .titre-container { max-width: 90%; margin: 0; }
  .font-banner h1 { font-size: clamp(1.5rem,4vw,2.2rem); }
  .font-banner p { font-size: 1rem; }
  #navbar nav { padding: .125rem 1rem; }
  .nav-menu.desktop-view { gap: .6rem; }
  .nav-menu li a { font-size: .85rem; padding: .4rem .5rem; }
  .nav-menu .nav-social-links a { width: 2rem; height: 2rem; }
  .showcase-section { padding: 1.5rem 1rem; scroll-margin-top: 3rem; }
  .showcase-carousel { width: min(100%, calc((100svh - 120px) * 16 / 9)); margin-inline: auto; }
  .showcase-control { width: 2rem; height: 2rem; font-size: .8rem; }
  .showcase-control-prev { left: .5rem; }
  .showcase-control-next { right: .5rem; }
  .showcase-zoom { width: 2rem; height: 2rem; right: .5rem; bottom: 1.5rem; font-size: .8rem; }
  .showcase-dots { margin-top: .5rem; }
  .showcase-lightbox { height: 96svh; padding-top: 2.5rem; }
  .services-section { padding: 2.5rem 1.5rem; }
  .services-heading { margin-bottom: 1rem; }
  .services-section .sservices { font-size: 1.7rem; }
  .services-section .service-row { grid-template-columns: minmax(150px,.65fr) minmax(0,1.4fr); min-height: 0; }
  .services-section .service-row h3 { padding: .75rem 1rem; font-size: 1.15rem; }
  .services-section .service-row > p { padding: .75rem 1rem; border-top: 0; border-left: 1px solid rgba(79,195,247,.28); font-size: .875rem; line-height: 1.5; }
  .about-wrapper { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 1.5rem; }
  .about-photo-frame { width: 100%; left: auto; transform: none; }
  .about-copy p { font-size: .9rem; line-height: 1.55; }
  #contact-form { padding: 2rem 1rem; }
  #contact-form .form-wrapper { max-width: 740px; padding: 1rem 1.25rem; gap: .65rem; }
  #contact-form h2 { font-size: 1.35rem; margin: 0; }
  #contact-form .contact-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
  #contact-form .contact-form > input[name="phone"],
  #contact-form .contact-form > textarea,
  #contact-form .contact-form > .message-character-count,
  #contact-form .contact-form > button[type="submit"] { grid-column: 1 / -1; }
  #contact-form input, #contact-form textarea { font-size: 1rem; padding: .55rem .75rem; }
  #contact-form textarea { height: 88px; min-height: 88px; max-height: 180px; }
  #contact-form button[type="submit"] { justify-self: center; width: fit-content; padding: .5rem 1.5rem; }
  .realisations-page { padding-top: 3rem; }
  .realisations-page .realisations-section, .ai-section { padding: 2rem 1.5rem; }
  .showcase-heading :is(h1, h2), .ai-heading h2 { font-size: 1.9rem; }
  .showcase-group { padding-top: 1.5rem; }
  .showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .showcase-grid--single { grid-template-columns: minmax(0,420px); }
  .showcase-card-body { padding: .9rem; }
  .showcase-card-body h4 { font-size: 1.2rem; }
  .ville-hero { height: auto; min-height: calc(100svh - 3rem); max-height: none; }
  .ville-hero-content { padding: 4rem 0 2rem; }
  .ville-hero h1 { font-size: 2.1rem; }
  .ville-hero-content > p { font-size: 1rem; line-height: 1.5; }
  .ville-section { padding-block: 2.5rem; }
}

@media (orientation: landscape) and (max-height: 540px) {
  #presentation, #qui-sommes-nous, #contact, .projects-cta-section { padding-block: 2rem; }
  #presentation .presentation-left p { font-size: .875rem; line-height: 1.55; margin-block: .75rem; }
  #presentation .presentation-left hr { margin-block: .75rem; }
  #presentation .local-page-link { margin-block: .75rem; font-size: .875rem; min-height: 44px; }
  #presentation .cta-bubbles { gap: 1rem; }
  #presentation .bubble-group { display: contents; }
  #presentation .bubble { width: 76px; height: 76px; margin-block: .5rem; font-size: .8125rem; }
  .projects-cta-shell { gap: 1.5rem; padding-block: 1.25rem; }
  .projects-cta-copy h2, #qui-sommes-nous .section-title, #contact .section-title { font-size: 1.6rem; line-height: 1.2; margin-bottom: 1rem; }
  .projects-cta-copy p, #contact .intro { font-size: .875rem; line-height: 1.55; }
  .about-photo-frame { width: min(100%,78svh); }
  #contact .section-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
  #contact .section-item h3 { font-size: 1.125rem; }
  #contact .section-item p { font-size: .875rem; overflow-wrap: anywhere; }
  #contact .section-item .note { font-size: .75rem; }
  .ville-hero-content { padding: 3.5rem 0 2rem; }
  .ville-back-link { margin-bottom: 1rem; }
  .ville-hero-content > p { margin-top: 1rem; font-size: .875rem; }
  .ville-hero-actions { margin-top: 1.25rem; }
  .ville-section, .ville-contact { padding-block: 2rem; }
  .ville-heading { margin-bottom: 1.25rem; }
  .ville-heading h2, .ville-zone h2, .ville-contact h2 { font-size: 1.6rem; line-height: 1.2; }
  .ville-heading p, .ville-zone p, .ville-contact p { font-size: .875rem; line-height: 1.55; }
  .ville-profile-panel { margin-top: 1.25rem; padding-block: 1.25rem; }
  .ville-profile-panel ul { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 1.5rem; }
  .ville-profile-panel li { font-size: .875rem; line-height: 1.5; gap: .5rem; }
  .ville-service-panorama { margin-top: 1.25rem; }
  .ville-service-card { padding: 1rem .75rem; }
  .ville-service-card::before { margin-bottom: .75rem; }
  .ville-service-card h3 { font-size: 1.125rem; }
  .ville-service-card p { font-size: .875rem; line-height: 1.5; }
  .ville-service-cta { margin-top: 1.25rem; }
  .ville-prepare-layout { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 1.5rem; }
  .ville-prepare-list li { padding-bottom: .75rem; font-size: .875rem; line-height: 1.55; }
  .ville-process-layout { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 1.5rem; }
  .ville-step-list li { padding-left: 1.75rem; padding-bottom: 1rem; }
  .ville-step-list h3 { font-size: 1.125rem; margin-bottom: .5rem; }
  .ville-step-list p { font-size: .875rem; line-height: 1.55; }
  .ville-faq-layout .ville-heading { margin-bottom: 1.25rem; }
  .ville-faq-item summary { padding-block: .75rem; min-height: 44px; font-size: .875rem; }
  .ville-faq-item p { font-size: .875rem; line-height: 1.55; }
}

@media (max-width: 599px) and (orientation: portrait) {
  .font-banner h1 {
    font-size: 1.875rem;
  }

  .font-banner p {
    font-size: 0.96875rem;
    line-height: 1.55;
  }

  #presentation .presentation-left > p,
  #qui-sommes-nous .about-copy p,
  .services-section .service-row > p,
  .projects-cta-copy > p,
  #avis .review-card .review-body,
  #contact .intro {
    font-size: 0.90625rem;
    line-height: 1.6;
  }

  .services-section .service-row h3 {
    padding: 0.9rem 1.1rem 0.7rem;
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .services-section .service-row > p {
    padding: 0.8rem 1.1rem 1rem;
    font-size: 0.875rem;
  }

  #services h2.section-title.sservices {
    font-size: 1.625rem;
  }

  #qui-sommes-nous h2.section-title,
  #contact h2.section-title,
  #contact-form h2 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
  }

  #projects-cta-title {
    font-size: 1.8125rem;
    font-weight: 700;
    line-height: 1.2;
  }

  #avis .reviews-heading h2 {
    font-size: 1.625rem;
    line-height: 1.25;
    text-wrap: balance;
  }

  #contact .section-item h3 {
    font-size: 1.3125rem;
  }

  #avis .review-identity strong {
    font-size: 1.03125rem;
  }
}

/* Copyright (c) Rzu-Informatique. Tous droits reserves. */

@media (max-width: 599px) and (orientation: portrait) {
  .ville-section:not(.ville-faq-section) .ville-heading h2,
  .ville-faq-section .ville-heading h2 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .ville-heading p,
  .ville-profile-panel li,
  .ville-service-card p,
  .ville-prepare-list li,
  .ville-faq-item p {
    font-size: 0.90625rem;
    line-height: 1.6;
  }

  .ville-profile-title {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  .ville-profile-panel li strong {
    font-size: 0.96875rem;
  }

  .ville-service-card h3 {
    font-size: 1.125rem;
    line-height: 1.25;
  }

  .ville-faq-item summary {
    font-size: 0.96875rem;
    line-height: 1.4;
  }
}