/* ==========================================================================
   SKYWAY TRAVELERS — normalisation responsive
   Chargée en dernier sur toutes les pages.

   Les feuilles de page reproduisent la maquette au pixel : elles positionnent
   en absolu et fixent des largeurs. En dessous de 1200 px, ce calage n'a plus
   de sens — ce fichier remet tout dans le flux, garantit des textes lisibles
   (>= 14 px) et des cibles tactiles conformes (>= 44 px, WCAG 2.5.8).
   ========================================================================== */

/* ==========================================================================
   TABLETTE ET EN DESSOUS
   ========================================================================== */
@media (max-width:1199px){

  /* ---------- aucune image ne dépasse jamais son conteneur ---------- */
  main img,
  .footer img{ max-width:100%; }

  /* images dimensionnées en dur par les feuilles de page */
  .reseau__map, .reseau__logo, .reseau__photo,
  .cmap, .cphoto,
  .tdmap, .tdgal img,
  .pf, .pt-photo, .step__media,
  .mosaic img, .logos img,
  .why2__photo, .trust__photo,
  .article__media, .article__gallery img,
  .tourcard__photo, .svc__photo{
    max-width:100%;
  }
  .reseau__map, .cmap, .tdmap{ width:100% !important; height:auto !important; }
  .reseau__logo{ width:auto !important; max-height:8rem; }

  /* ---------- décors qui débordent volontairement : masqués ---------- */
  .deco, .blog-page__woman, .tiers-page__map, .svc-page__deco,
  .why2__leaf, .steps__line, .footer__monuments{ display:none !important; }
  .footer__plane{ display:none; }

  /* ---------- blocs de texte encore contraints en largeur ---------- */
  .fiche__text, .fiche__text--one, .fiche__text--two, .fiche__text--right,
  .fiche--v7 .fiche__text, .fiche--voy .fiche__text,
  .tdtext, .book, .reseau__intro, .article__body, .article__title,
  .step__body, .steps__intro, .why2__text, .ident__intro, .ident__col{
    position:static !important;
    width:100% !important;
    max-width:100%;
  }
  .step__media, .tourcard__media{ width:100% !important; }

  /* ---------- formulaire de contact ---------- */
  .cform__grid{ width:100%; box-sizing:border-box; }
  .cform input, .cform textarea{ min-height:5.6rem; }


  /* ---------- remise dans le flux du calage pixel-perfect ----------
     Les feuilles de page positionnent tout en absolu pour coller à la
     maquette 1920. En dessous de 1200 px on annule ce calage d'un bloc,
     puis chaque feuille de page reprend la main pour l'empilement. */
  .ident__intro, .ident__col, .pill,
  .why2__leaf, .why2__photo, .why2__text,
  .trust__photo, .trust__list,
  .steps__intro, .steps__line, .step, .step__media, .step__body,
  .tiers-page__bg, .tiers-page__map, .pt-photo, .pt-tilt, .tier-card,
  .svc-page__deco,
  .fiche__text, .mosaic, .mosaic img, .logos, .logos img, .pf,
  .fiche__lead, .fiche__panel, .fiche__cta,
  .posts-grid, .side, .blog-page__woman,
  .article__media, .article__tag, .article__title, .article__meta,
  .article__body, .article__gallery, .article__gallery img, .article__side,
  .trip-grid, .pager,
  .tdgal, .tdgal img, .tdtext, .tdmap, .book, .tdtrust__more,
  .cform, .cform__grid, .cform__submit, .cphoto, .ccards, .cmap,
  .reseau__intro, .reseau__logo, .reseau__photo, .reseau__map,
  .reseau__panel, .reseau__list{
    position:static !important;
    left:auto !important; right:auto !important;
    top:auto !important; bottom:auto !important;
    width:auto !important; height:auto !important;
    max-width:100%;
    transform:none !important;
  }
  .mosaic img, .logos img, .article__gallery img, .tdgal img,
  .pf, .pt-photo, .cphoto, .reseau__photo, .step__media{ width:100% !important; }
  .reseau__logo{ width:auto !important; max-height:8rem; }

  /* les sections perdent leur hauteur fixe */
  .ident, .why2, .trust, .steps, .quotes--page, .tiers-page, .svc-page,
  .fiche, .blog-page, .article, .trip-page, .trip-detail, .tdtrust,
  .contact-page, .reseau, .crumb{ height:auto !important; }

  /* l'adresse de la barre de contact reste masquée (place insuffisante) */
  .topbar__item--addr{ display:none !important; }

  /* la forme rouge du blog est un décor 1920 : fond plein à la place */
  .blog__bg{ display:none !important; }
  .blog{ background:var(--red) !important; }
  .blog::before, .blog::after{ display:none; }

  /* boutons de commande : cible tactile garantie */
  .burger{ min-width:44px; min-height:44px; }
  .skip{ min-height:44px; }
  .side__search button, .article__side .side__search button{ width:44px !important; height:44px !important; }
  .cform__submit{ min-height:44px !important; }


  /* ---------- correctifs ciblés relevés par l'audit ---------- */

  /* les feuilles de page dimensionnent en content-box (calage 1920) ;
     hors maquette, la bordure et le rembourrage doivent rentrer dans la largeur */
  *, *::before, *::after{ box-sizing:border-box; }

  /* un enfant de grille ne doit jamais imposer sa largeur mini au conteneur :
     sans min-width:0, un mot long ou une rangée fixe élargit toute la colonne */
  .partner, .figures, .trip-detail, .contact-page,
  .about__in, .fiche, .blog-page, .article, .reseau{
    grid-template-columns:minmax(0, 1fr) !important;
  }
  .partner > *, .figures > *, .trip-detail > *, .contact-page > *,
  .about__in > *, .blog-page > *, .article > *{ min-width:0; }

  /* accueil : le collage, le badge et la colonne de texte restaient calés sur 1920 */
  .about__visual{ position:static !important; margin-left:0 !important; width:100% !important; }
  .about__collage{ width:100% !important; max-width:100% !important; }
  .badge{
    position:static !important;
    width:16rem !important; height:16rem !important;
    margin:2rem auto 0 !important;
  }
  .about__text{ margin-left:0 !important; }
  .about__shots{
    position:static !important; height:auto !important;
    display:grid; grid-template-columns:1fr 1fr; gap:2rem;
  }
  .about__shots img{
    position:static !important; left:auto !important; top:auto !important;
    width:100% !important; height:22rem !important;
  }
  .tiers{ flex-wrap:wrap; }
  .tier{ width:auto !important; flex:1 1 16rem; }
  .figures{ padding-left:0 !important; padding-right:0 !important;
            width:min(var(--wrap), 92%); margin-inline:auto; }
  .atouts{ grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)) !important; width:100%; }
  .stats{ grid-template-columns:repeat(auto-fit, minmax(16rem, 21.2rem)) !important; justify-content:center; }

  /* le cadre en demi-cercle du bloc « devenir partenaire » */
  .partner__photo{
    position:relative !important; margin-left:0 !important;
    width:100% !important; height:auto !important;
    border-radius:0 20rem 20rem 0; overflow:hidden;
  }
  .partner__photo img{
    position:static !important; left:auto !important; top:auto !important;
    width:100% !important; height:auto !important; border-radius:inherit;
  }

  /* Bloc « nos voyages récents » : sur la maquette il est en absolu, à cheval
     sur le bas du héros. Une fois le formulaire de recherche remis dans le
     flux, ce bloc lui passait par-dessus et masquait les filtres. Il rejoint
     donc le flux, juste après la recherche, dans l'ordre du HTML. */
  .hero{ padding-bottom:6rem !important; }
  .trips{
    /* `relative` et non `static` : en statique le z-index est ignoré et le
       diaporama du héros, lui positionné, repasserait par-dessus les cartes */
    position:relative !important;
    left:auto !important; right:auto !important; bottom:auto !important;
    width:min(var(--wrap), 92%) !important;
    margin:4rem auto 0 !important;
  }

  /* Le rail des témoignages porte un retrait négatif calé sur 1920 : hors de
     cette largeur il sortait la carte active de l'écran, coupée à gauche. */
  .quotes__track{ margin-left:0 !important; padding-left:4%; }

  /* l'onglet « nos voyages » avait la largeur de la maquette */
  .trips__label{ width:auto !important; max-width:100%; }

  /* fil d'Ariane large : partenaire.css le recalait sur 1920 après apropos.css */
  .crumb--wide{ left:auto !important; width:min(49.2rem, 92%) !important; }

  /* cartes de contact : un mot long ne doit pas élargir la colonne */
  .ccards > *{ min-width:0; }
  .ccard h2, .ccard p{ overflow-wrap:anywhere; }

  /* sélecteur de langue : deux drapeaux de 26 px, sous la cible tactile */
  .langs a{ display:inline-flex; align-items:center; justify-content:center;
            min-width:44px; min-height:44px; }

  /* boutons : le reset leur a retiré leur hauteur fixe */
  .btn, .cform__submit, .book__submit, .svc__cta{ min-height:44px !important; }
  .post-card__title a{ display:inline-flex; align-items:center; min-height:44px; }

  /* champs de la recherche du héros */
  .search input, .search select, .search__label{ font-size:15px !important; }

  /* galerie du détail Trip tour et grilles de contact */
  .tdgal{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)) !important; gap:2rem; }
  .tdgal img{ width:100% !important; height:24rem !important; object-fit:cover; }
  .tdtext .checks{ margin-left:0 !important; }
  .tdtext .checks li{ height:auto !important; }
  .ccards{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(24rem, 1fr)) !important; gap:6rem 3rem; }
  .ccard{ height:auto !important; padding-bottom:3rem; }
  .cform{ box-sizing:border-box; padding:3rem 2rem 4rem !important; }
  .cform__grid{ padding:0 !important; }
  .cform__submit{ width:100% !important; margin:3rem 0 0 !important; }

  /* page partenaire : les trois niveaux s'empilent proprement */
  .tiers-page{ display:grid !important; gap:5rem; }
  .tier-card{ width:100% !important; box-sizing:border-box; }
  .checks--wide li{ white-space:normal !important; }

  /* ---------- gouttières : plus rien ne colle aux bords de l'écran ----------
     Une fois le calage absolu de la maquette annulé, les blocs remis dans le
     flux prenaient 100 % de la largeur, texte compris. On leur redonne la
     gouttière du site (celle de `.wrap`), sauf aux éléments volontairement
     pleine largeur : bande de la carte, pistes de carrousel, fonds décoratifs. */
  main > section > *,
  main > article > *{
    max-width:min(var(--wrap), 92%) !important;   /* passe devant les `width:100%` du reset */
    margin-inline:auto !important;
  }
  main > section > .tdmap-band,
  main > section > .quotes__viewport,
  main > section > .services__viewport,
  main > section > .trips,
  main > section > [class$="__bg"]{
    max-width:none !important; margin-inline:0 !important;
  }

  /* ---------- lisibilité : plancher en pixels absolus ----------
     (le rem vaut ici 8 px : l'exprimer en rem ne garantirait rien) */
  .post-card__tag, .article__tag{ font-size:14px !important; height:auto; padding:.5rem 1.4rem; }
  .post-card__excerpt, .post-card__meta, .post-card__by, .post-card__meta time,
  .post-card__src, .side__recent time, .side__recent b,
  .post__text, .trips__label, .search__label,
  .tourcard__from, .footer__copy, .side__tags li a, .side__search input,
  .cform input, .cform textarea, .cform__submit, .book__forms div,
  .footer__contact, .footer__nav, .topbar__in, .crumb__path{
    font-size:15px !important;
  }
  .trip__name, .tourcard__name{ font-size:16px !important; }
  main p, main li{ font-size:max(15px, 1em); }

  /* ---------- cibles tactiles ---------- */
  .topbar__item,
  .footer__nav a,
  .footer__contact a,
  .footer__contact span,
  .crumb__path a,
  .submenu a,
  .side__tags li a,
  .pager a,
  .carousel-nav button,
  .post-card__play,
  .article__play,
  .book__count button{
    min-height:44px;
    display:inline-flex; align-items:center;
  }
  .soc{ width:44px !important; height:44px !important; padding:10px; }
  .socials{ gap:2px; }
  .pager a, .carousel-nav button, .post-card__play, .article__play{ min-width:44px; }
  .book__count button{ min-width:44px; justify-content:center; }

  /* champs de formulaire : hauteur de doigt */
  input, textarea, select, .side__search input, .cform input{
    min-height:44px; font-size:16px;                 /* 16 px : pas de zoom auto iOS */
  }
  textarea{ min-height:88px; }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width:767px){

  /* la barre de contact devient une simple pile centrée */
  .topbar{ height:auto; padding:.8rem 0; }
  .topbar__in{ flex-direction:column; gap:.4rem; text-align:center; }
  .topbar__item{ justify-content:center; }
  .topbar__sep{ display:none; }
  .topbar .socials{ margin-left:0 !important; justify-content:center; }

  /* grilles de cartes : une colonne */
  .posts-grid, .trip-grid, .svc-grid, .ccards,
  .article__gallery, .tdgal, .mosaic,
  .cform__grid, .book__forms{
    grid-template-columns:1fr !important;
  }
  .logos{ justify-content:center; }

  /* le pied de page se met en colonne */
  .footer__contact{ flex-direction:column; align-items:center; gap:1.2rem; text-align:center; }
  .footer__contact span:not(.ico){ white-space:normal; }
  .footer__sep{ display:none; }
  .footer__legal{ flex-direction:column; gap:2.4rem; }

  /* le fil d'Ariane ne déborde plus */
  .crumb{ width:min(92%, 46rem) !important; height:auto; padding:2.4rem 2rem; }
  .crumb__title{ font-size:2.4rem; line-height:1.25; text-align:center; }
  .crumb__path{ flex-wrap:wrap; justify-content:center; }

  /* titres de section : on plafonne pour rester lisible */
  .title{ font-size:clamp(2.8rem, 7.5vw, 4.6rem); line-height:1.15; }
  .title--sm{ font-size:clamp(2.4rem, 6vw, 3.4rem); line-height:1.2; }
}

/* ==========================================================================
   PRÉFÉRENCES UTILISATEUR
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}