/*!
 * CEFONSTUDIO — ajustements écrans extrêmes
 * Du smartphone (iPhone X, 375 px) aux très grands écrans (TV 4K / 5K, 105 pouces).
 * À charger en dernier dans le <head> de chaque page :
 *   <link rel="stylesheet" href="responsive.css"/>
 */

/* ───────── Base commune ───────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }

/* ───────── Très grands écrans ───────── */
/* Le site est dessiné pour 1 920 px. Au-delà (écrans 2K, 4K, 5K, TV 105"),
   les textes et espacements exprimés en rem grandissent avec la largeur,
   pour garder les mêmes proportions qu'en 1 920 px. */
@media (min-width: 2200px) {
  html { font-size: clamp(16px, calc(100vw / 120), 44px); }
}
@media (min-width: 2200px) {
  /* Conteneurs : leur largeur maximale suit la taille du texte */
  section { max-width: 120rem; }
  footer { max-width: 120rem; }
  .cta-section { max-width: 120rem; }
  .services { max-width: 120rem; }
  .faq-section { max-width: 75rem; }
  .col-right { max-width: 77.5rem; }
  .mentions-body { max-width: 56.25rem; }
  .art-studio-text { max-width: 35rem; }
  .blog-desc { max-width: 30rem; }
  .blog-studio-text { max-width: 35rem; }
  .case-quote { max-width: 47.5rem; }
  .cta-final-inner { max-width: 45rem; }
  .faq-answer-inner { max-width: 40rem; }
  .hero-bottom-desc { max-width: 17.5rem; }
  .interlude-desc { max-width: 22.5rem; }
  .page-desc { max-width: 21.25rem; }
  .page-hero-desc { max-width: 35rem; }
  .penta-about-panel p { max-width: 48.75rem; }
  .penta-subtitle { max-width: 32.5rem; }
  .penta-text { max-width: 48.75rem; }
  .pf-closing-text { max-width: 32.5rem; }
  .pf-intro p { max-width: 40rem; }
  .pricing-closing-text { max-width: 32.5rem; }
  .pricing-intro p { max-width: 40rem; }
  .pricing-section-sub { max-width: 35rem; }
  /* Grilles et colonnes à largeur fixe */
  .col-right { grid-template-columns: minmax(0, 1fr) 18.75rem; column-gap: 6rem; }
  .faq-categories { grid-template-columns: 15rem 1fr; gap: 5rem; }
  .contact-aside { top: 6rem; }
  .pricing-card { padding: 2.5rem 2rem; }
  .process-section { --card: clamp(18.75rem, 30vw, 28.75rem); --pad: 7.5rem; }
  .process-arrow { width: 2.75rem; height: 2.75rem; }
}


/* ───────── Petits écrans (iPhone X et équivalents) ───────── */
@media (max-width: 768px) {
  /* Titres des études de cas : autorisés à passer à la ligne */
  .penta-title {
    white-space: normal !important;
    font-size: clamp(1.6rem, 9vw, 2.4rem) !important;
    letter-spacing: 0.1em !important;
    overflow-wrap: anywhere;
    line-height: 1.1 !important;
  }
  .penta-header-bottom { flex-direction: column; align-items: flex-start !important; gap: 24px !important; }

  /* FAQ : une seule colonne */
  .faq-categories { grid-template-columns: 1fr !important; gap: 40px !important; }
  .faq-section { padding-left: 20px !important; padding-right: 20px !important; }

  /* Lisibilité minimale des petits libellés */
  .pf-card-cat, .pf-card-soon, .blog-card-cat, .contact-aside-label, .opt-flag,
  .br-credit-label, .br-identity-label, .br-swatch-name, .nav-footer-city, .nav-theme-label {
    font-size: 10px !important;
  }

  /* Champs de formulaire : 16 px minimum pour éviter le zoom automatique d'iOS */
  input, select, textarea { font-size: max(16px, 1em); }

  /* Zones tactiles confortables */
  .menu-btn, .process-arrow, .freq-tab, .faq-question { min-height: 44px; }
}

@media (max-width: 380px) {
  .hero-title, .contact-hero-title, .blog-hero-title, .e404-title { letter-spacing: 0.06em !important; }
}