/* ===========================================================================
   photo-aerienne-france.fr — correctifs mobile
   ---------------------------------------------------------------------------
   Le thème du site est un gabarit acheté, livré avec un `style.css` de 465 Ko
   dont il ne reste que ce que le site utilise (lot 7). Ses points de rupture
   traitent bien la grille et la navigation, mais laissent passer trois choses
   sur un écran de téléphone : le bandeau supérieur garde sa typographie de
   bureau et déborde à droite, les listes de vignettes s'affichent en une seule
   colonne très haute, et plusieurs cibles tactiles font moins de 32 px.

   Ce fichier est chargé APRÈS `style.css` et ne contient que des règles sous
   media query : à partir de 992 px, il ne s'applique plus du tout et le thème
   reste intact. Il n'est pas régénéré par `_docker/bin/assets-reduire.sh`,
   contrairement à `style.css` — c'est la raison d'un fichier séparé plutôt
   que d'un ajout en fin de feuille purgée.
   ======================================================================== */

@media (max-width: 991px) {

  /* --- Bandeau supérieur ------------------------------------------------
     « Demande d'infos » et « Mon panier » héritaient d'une taille de police
     de bureau : deux lignes de 28 px alignées à droite, qui mordaient sur le
     bord de l'écran et mangeaient 180 px avant même le premier contenu. Ils
     tiennent désormais sur une ligne, à une taille lisible. */
  .rd-navbar-top-panel-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    flex-wrap: nowrap;
  }
  .rd-navbar-top-panel-inner .left-side,
  .rd-navbar-top-panel-inner .right-side { flex: 0 1 auto; min-width: 0; }
  .rd-navbar-top-panel-inner .center-side { display: none; }

  /* `html .page .group` (0,2,1) pose une gouttière négative de -15 px,
     héritée de la grille du thème : sans cette remise à zéro, « Demande
     d'infos » sort du bandeau par la gauche et colle au bord de l'écran.
     Le sélecteur ci-dessous pèse autant et passe après. */
  html .page .rd-navbar-top-panel-inner .group,
  html .page .rd-navbar-top-panel-inner .cart { margin: 0; }

  .rd-navbar-top-panel-inner .demande a,
  .rd-navbar-top-panel-inner .cart a {
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;          /* cible tactile */
  }
  .rd-navbar-top-panel-inner .cart img { width: 18px; height: 18px; flex: none; }

  /* --- Barre de navigation ---------------------------------------------- */
  .rd-navbar-fixed .rd-navbar-panel { padding: 0 10px; }
  .rd-navbar-fixed .mobile-brand img { max-width: 130px; height: auto; }

  /* Les entrées du menu déroulant se touchent au doigt. */
  .rd-navbar-fixed .rd-nav-link,
  .rd-navbar-fixed .rd-dropdown-link {
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  /* --- Listes de vignettes ----------------------------------------------
     Les pages de département, de localité, de thème, de sous-thème et de
     recherche servent une carte par photo dans une grille Bootstrap
     `col-12 col-sm-6 col-md-3` : en dessous de 576 px, `col-12` donne une
     seule colonne, et la page de Nîmes fait 12 600 px de haut pour trente
     photos. Deux colonnes divisent cette hauteur par deux sans rendre la
     vignette illisible — 165 px de large sur un écran de 390.

     La règle vise les cartes de `.themes`, pas toutes les colonnes du site :
     les blocs de texte et les formulaires doivent rester pleine largeur. */
  .themes > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 6px;
    padding-right: 6px;
  }
  .themes.gap-3 { gap: 0 !important; }
  .themes .bloc-image { margin-bottom: 14px; }

  /* La légende sous la vignette passait à la ligne sur trois hauteurs. */
  .themes .legende {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .themes img,
  .dep2, .image-cms {
    max-width: 100%;
    height: auto;
  }

  /* --- Cibles tactiles ---------------------------------------------------
     44 px est la recommandation d'Apple, 48 dp celle de Google. 40 px est le
     compromis retenu : au-delà, les listes de communes — 238 liens sur la
     page des départements — deviennent interminables. */
  .lien-achat,
  .bouton-principal,
  .bouton-secondaire,
  .pagination a,
  .pagination span {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Formulaires -------------------------------------------------------
     Une police inférieure à 16 px déclenche le zoom automatique de Safari
     iOS à la mise au point du champ, et la page reste zoomée ensuite. */
  input[type=text], input[type=email], input[type=tel], input[type=search],
  input[type=password], input[type=number], select, textarea {
    font-size: 16px;
    min-height: 44px;
  }
  textarea { min-height: 96px; }

  /* --- Tableaux ----------------------------------------------------------
     Les tableaux du tunnel (panier, récapitulatif) dépassent la largeur de
     l'écran. Plutôt que de les réduire jusqu'à l'illisible, ils défilent
     horizontalement, avec l'élan tactile. */
  .table-responsive-mobile {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Pied de page ------------------------------------------------------ */
  .footer-links a { min-height: 34px; display: inline-flex; align-items: center; }
}

/* Écrans très étroits : une seule colonne de vignettes redevient préférable
   en dessous de 360 px, la carte n'ayant plus la place d'afficher sa légende. */
@media (max-width: 359px) {
  .themes > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* --- Pied de page ------------------------------------------------------- */
@media (max-width: 575px) {
  /* Les trois liens du bas tenaient sur une ligne en `flex-row` : sur un
     téléphone, « Conditions Générales de Ventes » se coupait en deux et
     « Plan du Site » passait sous le bouton haut-de-page. */
  .page-footer-corporate .inter-tirets {
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 0 16px;
    text-align: center;
  }
  .page-footer-corporate .inter-tirets > li { white-space: nowrap; }
  /* Le tiret de séparation est posé en absolu, calé sur une ligne unique :
     dès que les liens passent à la ligne, il flottait au-dessus du vide. */
  .page-footer-corporate ul.inter-tirets > li:not(:last-child)::after { content: none; }
  .page-footer-corporate p.text-center { padding: 0 16px; }
  /* Adresse, téléphone et courriel étaient disposés en `display: table` :
     sur 360 px, la cellule de droite se retrouvait à 150 px et coupait le
     numéro en deux. En ligne et centrés, ils occupent toute la largeur. */
  .page-footer-corporate .page-footer-corporate-top > .col-12 > ul > li { width: 100%; }
  .page-footer-corporate .list-desc { display: block; margin: 0; text-align: center; }
  .page-footer-corporate .list-desc > * { display: inline; padding: 0; }
  .page-footer-corporate .list-desc dd { margin: 0 0 0 6px; }
  .page-footer-corporate .list-desc dd a { overflow-wrap: break-word; }
  /* Le bouton haut-de-page recouvrait le dernier lien. */
  #ui-to-top { bottom: 96px; }
}

/* ===========================================================================
   Le tiroir de navigation
   --------------------------------------------------------------------------
   Deux boutons dans l'en-tête : le menu hamburger à gauche, et à droite un
   troisième point vertical — `rd-navbar-collapse-toggle` — qui ouvre
   `.rd-navbar-collapse`. Ce conteneur mesure 0 par 0 et n'a aucun contenu sur
   ce site : le bouton ne fait donc rien, tout en occupant une cible de 55 px
   dans un en-tête qui n'en a pas de trop. Un contrôle visible qui ne répond
   pas est pire qu'un contrôle absent — on le presse, on recommence, on croit
   la page cassée.
   ======================================================================== */
@media (max-width: 991px) {
  .rd-navbar-collapse-toggle { display: none !important; }

  /* L'intertitre qui sépare le menu du site des rubriques du catalogue. */
  .tiroir-titre {
    padding: 18px 20px 6px;
    border-top: 1px solid rgba(0, 0, 0, .07);
    margin-top: 10px;
    font: 600 11.5px/1.4 "Poppins", "Lato", sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8a939c;
  }

  /* Le tiroir laissait la page visible à sa droite sans rien pour dire
     qu'elle est inactive : on tape dedans et il se referme sans qu'on
     comprenne pourquoi. Un voile le dit. */
  .rd-navbar-fixed .rd-navbar-nav-wrap::after { content: none; }
  body.rd-navbar-nav-wrap-active::after,
  .rd-navbar-fixed.rd-navbar--is-opened ~ *::after { content: none; }
}

/* Le tiroir couvrait 70 % de la largeur, sans ombre ni voile : rien ne disait
   que la page derrière est inactive, et un lien resté visible à droite
   invitait à la taper. Plus large, et détaché par une ombre. */
@media (max-width: 991px) {
  .rd-navbar-fixed .rd-navbar-nav-wrap { width: 86%; max-width: 340px; }

  /* Le voile est porté par l'état ouvert, et lui seul : le tiroir reste
     dans le document quand il est rangé, et une ombre de 100vmax posée
     sans condition grisait la page entière, panier compris. */
  .rd-navbar-fixed .rd-navbar-nav-wrap.active {
    overflow-y: auto;
    box-shadow: 0 0 0 100vmax rgba(15, 27, 35, .42), 0 0 30px rgba(15, 27, 35, .25);
  }
}

/* ===========================================================================
   Le tunnel de vente sur téléphone
   --------------------------------------------------------------------------
   « Commander » arrivait sous « Continuer mes achats », en bas d'une colonne
   où les deux boutons font la même taille : l'action qui rapporte était la
   moins visible, et il fallait descendre pour la trouver. Sur un téléphone
   l'ordre visuel décide, alors on inverse — l'action principale d'abord, et
   sur toute la largeur.
   ======================================================================== */
@media (max-width: 767px) {
  .tunnel-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }
  .tunnel-actions > * { width: 100%; }
  .tunnel-actions .bouton-principal,
  .tunnel-actions .edito-action {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .tunnel-actions .bouton-secondaire {
    display: inline-block;
    text-align: center;
  }
  .tunnel-actions > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .tunnel-actions > div .lien-discret { margin-left: 0 !important; padding: 8px 0; }

  /* Le champ de recherche du tiroir gardait la largeur du bandeau du bureau
     et dépassait du panneau. */
  .rd-navbar-fixed .mobileSearch,
  .rd-navbar-fixed .mobileSearch .search-box { max-width: 100%; }
  .rd-navbar-fixed .mobileSearch .search-box { padding: 0 16px; box-sizing: border-box; }
  .rd-navbar-fixed .mobileSearch input { max-width: 100%; }
}

/* ===========================================================================
   La barre du haut sur téléphone
   --------------------------------------------------------------------------
   Deux rangées se partageaient le haut de l'écran : le menu et le logo dans
   la première, puis « Demande d'infos », « Mon compte » et « Mon panier »
   dans une seconde, haute de soixante pixels. Sur un écran de 844 px de haut,
   c'est sept pour cent de la page consacrés à trois liens, avant la moindre
   photo. Et le logo, poussé par le seul bouton du menu, n'était pas centré.

   Une seule rangée désormais : menu à gauche, logo au centre, compte et
   panier en icônes à droite. « Demande d'infos » rejoint le tiroir, où il
   est à sa place avec le reste de la navigation.
   ======================================================================== */
@media (max-width: 991px) {
  /* La seconde rangée disparaît entièrement. */
  .rd-navbar-fixed .rd-navbar-top-panel { display: none !important; }

  /* Le panneau devient la barre : trois zones, le logo au milieu. */
  .rd-navbar-fixed .rd-navbar-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 6px;
  }
  .rd-navbar-fixed .rd-navbar-toggle { flex: 0 0 auto; margin: 0; }

  /* Centré sur la barre, et non sur ce qui reste entre les deux côtés :
     le bouton du menu et les deux icônes n'ont pas la même largeur. */
  .rd-navbar-fixed .rd-navbar-brand.mobile-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
  }
  .rd-navbar-fixed .rd-navbar-brand.mobile-brand img { max-width: 150px; height: auto; }

  .barre-mobile {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .barre-mobile__lien {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;              /* cible tactile : 44 px, pas l'icône seule */
    height: 44px;
    color: #4a5760;
    text-decoration: none;
  }
  .barre-mobile__lien:active { color: #3B94B6; }
  .barre-mobile__compteur {
    position: absolute;
    top: 5px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #b4462c;
    color: #fff;
    font: 700 11px/17px "Poppins", "Lato", sans-serif;
    text-align: center;
  }
}

/* Au-delà, les deux icônes n'ont pas lieu d'être : le bandeau du bureau porte
   déjà « Mon compte » et « Mon panier », en toutes lettres. */
@media (min-width: 992px) { .barre-mobile { display: none; } }