/* ============================================================
   ROARY — couche tablette
   Chargée après les styles de chaque page, elle rétablit une
   mise en page dédiée entre 700 px et 1024 px, plage qui tombait
   jusqu'ici dans la mise en page téléphone.
   iPad mini 768 · iPad 810/820 · iPad Air 834 · iPad Pro 1024
   ============================================================ */

/* ---------- 1. Site public : rétablir les grilles ---------- */
@media (min-width: 700px) and (max-width: 1024px) {

  .score-dual-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
  .service-teaser-grid,
  .rayonnement-grid,
  .two-col { grid-template-columns: repeat(2, 1fr) !important; }

  /* Longueur de ligne : au-delà de 70 caractères la lecture décroche */
  .manifesto .sub,
  .score-intro,
  .panel p { max-width: 62ch !important; }

  /* Respiration : le padding téléphone est trop serré sur 11 pouces */
  .manifesto-inner,
  .dual-inner,
  .conviction-inner { padding-left: 5vw !important; padding-right: 5vw !important; }
  .score { padding-left: 5vw !important; padding-right: 5vw !important; }

  /* Le hero cesse de plein écran sur un format court en paysage */
  .hero { min-height: 560px; }
}

/* ---------- 2. Navigation : plage intermédiaire ---------- */
/* Entre 861 px et 1024 px la navigation complète tient : on resserre
   simplement les espacements pour éviter tout chevauchement. */
@media (min-width: 861px) and (max-width: 1024px) {
  nav { padding: 22px 4vw; }
  nav.scrolled { padding: 14px 4vw; }
  .navlinks { gap: 20px; }
  .navlinks a { font-size: 11.5px; letter-spacing: .08em; }
  .nav-cta, .nav-connect { width: auto !important; padding: 8px 15px; font-size: 11.5px; }
  .nav-actions { gap: 8px; }
}

/* ---------- 3. Espaces membre & établissement ----------
   Cette section imposait un rail compact en colonne d'icônes de 76 px
   entre 768 et 1024. On y a renoncé : à cette largeur, un libellé de
   deux mots ne tient pas, et un menu qu'on doit deviner ne sert à
   personne. Le hamburger et son tiroir prennent le relais sur toute
   cette plage — ils affichent les libellés en entier.

   Le réglage se trouve désormais dans roary-fluide.css, en un seul
   endroit et avec une seule frontière. */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Contenu : deux colonnes redeviennent lisibles à partir de 900 px */
  .wrap { padding-left: 28px !important; padding-right: 28px !important; }
}

@media (min-width: 900px) and (max-width: 1024px) {
  .cols { grid-template-columns: 1.4fr 1fr !important; }
}

/* ---------- 4. Onboarding : palier intermédiaire ---------- */
@media (min-width: 481px) and (max-width: 1024px) {
  .form-row2 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ---------- 5. Tablette en paysage courte (iPad paysage) ---------- */
@media (min-width: 1025px) and (max-width: 1200px) and (orientation: landscape) {
  .hero { min-height: 520px; height: 88vh; }
  nav { padding: 20px 4vw; }
}

/* ---------- 6. Confort tactile ---------- */
/* Sur écran tactile sans souris, les cibles passent à 44 px et les
   effets de survol sont neutralisés (ils restaient « collés » au doigt). */
@media (hover: none) and (pointer: coarse) {
  .navlinks a, .dropdown a, .rail a.it, .panel .pk a { min-height: 44px; display: flex; align-items: center; }
  .dropdown a { display: block; padding-top: 13px; padding-bottom: 13px; }
  .score-card:hover, .panel:hover { transform: none !important; box-shadow: inherit; }
  .nav-item:hover .dropdown { opacity: 0; visibility: hidden; pointer-events: none; }
  .nav-item.ouvert .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
}