/* ═══════════════════════════════════════════════════════════════════
   VERSION MOBILE

   Jusqu'ici le téléphone était traité par exceptions, dispersées dans
   cinq fichiers au gré des besoins. Chaque écran corrigé en découvrait
   un autre, parce qu'aucune règle générale ne garantissait l'essentiel :
   du texte qui ne touche pas le bord, des colonnes qui retombent, rien
   qui déborde sur le côté.

   Ce fichier pose ces garanties, une fois, pour toutes les pages. Il est
   chargé en dernier et ne s'applique qu'en dessous de 760 pixels : il
   l'emporte donc sur tout ce qui précède, sans toucher au grand écran.

   Trois principes :

   1. Une marge de côté partout. Sur un téléphone, du texte collé au
      bord est illisible : l'œil n'a pas de point de retour en fin de
      ligne, et le pouce masque le début des mots.
   2. Une seule colonne, sauf quand deux se justifient vraiment.
      Un titre et son texte côte à côte dans trois centimètres donnent
      un ruban de quatre mots de large, long de deux écrans.
   3. Rien ne déborde horizontalement. Une page qui glisse de côté
      donne l'impression d'un site cassé, même quand tout le reste va.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

  /* ---------------------------------------------- 1. Les marges de côté
     Le conteneur général porte déjà 20 px, mais plusieurs blocs les
     annulaient avec un raccourci « padding » qui remet les côtés à zéro.
     On rétablit la marge sur le conteneur et on neutralise la cause. */
  .wrap { padding-left: 18px; padding-right: 18px; }

  .ds-body, .fv-body, .u-liste, .fa, .gr, .ilx, .cf-f {
    padding-left: 0; padding-right: 0;
  }

  /* Les blocs de texte long respirent un peu plus que le reste. */
  .ds-txt, .fv-txt, .xp-txt { font-size: 16px; line-height: 1.72; }

  /* --------------------------------------- 2. Les paires étiquette/valeur
     Un intitulé et sa valeur côte à côte tiennent sur un ordinateur.
     Sur un téléphone, l'intitulé mange la moitié de la largeur et la
     valeur tombe en colonne étroite. On les empile. */
  .gr-d, .ds-rep, .xp-rep, .fh-ch-f, .sd-rg {
    grid-template-columns: 1fr !important;
    display: grid;
    gap: 2px 0;
  }

  .gr-d dt, .ds-rep dt { margin-top: 12px; }
  .gr-d dt:first-child, .ds-rep dt:first-child { margin-top: 0; }
  .gr-d dd, .ds-rep dd { margin: 0 0 4px; }

  /* L'encadré de dossier : filet à gauche, titre et texte dessous. */
  .ds-enc {
    grid-template-columns: 3px minmax(0, 1fr) !important;
    padding: 16px 16px 16px 14px;
  }

  /* ------------------------------------------ 3. Les grilles trop serrées
     Quatre colonnes sur trois centimètres donnent des colonnes de huit
     millimètres. Deux, au plus, et une seule pour les galeries. */
  .fiche-g, .fiche-faits, .mois-row, .fl-cond-g, .options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fiche-gal, .fv-gal, .ds-autres-g, .au-g, .f-grid, .eq-grid, .sgrid, .agrid,
  .plans {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Les cartes d'offre se lisent une par une : mises à deux de front,
     la liste de ce que comprend la formule devient une colonne de trois
     mots de large, et c'est justement cette liste qui décide l'achat. */
  .plan { max-width: none; }

  /* Le calendrier des saisons garde ses douze mois : c'est une frise,
     elle se lit d'un coup d'œil et perdrait tout sens repliée. On la
     laisse défiler sur elle-même plutôt que de la casser. */
  .sai-m-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sai-m { min-width: 520px; }

  /* ------------------------------------------------- 4. Aucun débordement
     Un mot très long, un tableau, un bloc de code ou une image hors
     cadre suffisent à faire glisser toute la page de côté. */
  html, body { overflow-x: hidden; }

  .ds-txt, .fv-txt, .xp-txt, .gr-c, .ds-enc, .fh-ch-b {
    overflow-wrap: break-word; word-break: normal; hyphens: auto;
  }

  .ds-txt table, .fv-txt table, .fiche-tb {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  .ds-txt img, .fv-txt img, .xp-txt img { max-width: 100%; height: auto; }

  /* Les intitulés qui refusaient de se couper peuvent le faire ici :
     mieux vaut deux lignes qu'une colonne qui déborde. */
  .fiche-tb th, .sd-pr-l em, .vr-band-i { white-space: normal; }

  /* -------------------------------------------------- 5. Les titres
     Les tailles calculées pour un écran large écrasent un téléphone. */
  h1 { font-size: clamp(27px, 7.6vw, 38px); line-height: 1.12; }
  h2 { font-size: clamp(21px, 5.6vw, 27px); line-height: 1.18; }
  .ds-txt h2 { margin-top: 34px; }
  .head p, .ds-chapo { font-size: 15.5px; line-height: 1.62; }

  /* --------------------------------------------------- 6. Le toucher
     Quarante-quatre pixels est la plus petite cible qu'un pouce atteint
     sans viser. En dessous, on rate, on revient, on s'agace. */
  .btn, .vr-btn, .gr-b, .fv-geo a, .cf-c a, .tabbar a {
    min-height: 44px;
  }

  .btn { padding: 14px 22px; }
  .fv-geo { gap: 10px; }
  .fv-geo a { padding: 10px 14px; }
}

/* ═══════════════════════════ LA BARRE DU BAS, EN COULEUR
   Cinq icônes grises alignées se ressemblent : l'œil doit lire les mots
   pour choisir, et sur un téléphone on ne lit pas, on vise. Chaque
   rubrique porte donc sa teinte, reprise du reste du site : le
   turquoise de la marque, le vert des randonnées, l'ocre des sites à
   voir, le rose du carnet, le violet du compte.

   La teinte reste sourde tant qu'on n'est pas dans la rubrique, et
   s'allume quand on y est : la barre indique où l'on se trouve sans
   avoir à lire. La pastille active reprend la même couleur, fondue
   derrière l'icône, plutôt qu'un simple trait au-dessus. */
@media (max-width: 860px) {
  .tabbar a { color: #6E838C; }
  .tabbar a svg { color: var(--t, #0E8189); opacity: .62; transition: opacity .18s, transform .16s; }
  .tabbar a span { transition: color .18s; }

  .tabbar a:active svg { transform: scale(.88); }

  .tabbar a[aria-current] { color: var(--t, #0E8189); font-weight: 600; }
  .tabbar a[aria-current] svg { opacity: 1; }

  /* La pastille derrière l'icône de la rubrique ouverte. */
  .tabbar a[aria-current]::after {
    content: ""; position: absolute; top: 5px; left: 50%;
    width: 38px; height: 30px; transform: translateX(-50%);
    border-radius: 11px; background: var(--t, #0E8189); opacity: .13; z-index: -1;
  }

  /* Le trait du haut reprend la teinte de la rubrique. */
  .tabbar a[aria-current]::before { background: var(--t, #0E8189); }
}

/* ═══════════════════ LE BOUTON CENTRAL DE RECHERCHE
   La recherche n'est pas une destination parmi d'autres : c'est l'action
   du site. Elle sort donc du rang, posée en relief au milieu de la
   barre, là où le pouce tombe sans viser. Les quatre autres onglets
   restent des repères plats ; celui-ci est un bouton. */
@media (max-width: 860px) {
  .tabbar { overflow: visible; }

  .tabbar a.tb-c { color: #0E3A4A; font-weight: 600; }

  .tabbar a.tb-c svg {
    width: 26px; height: 26px; color: #fff; opacity: 1;
    background: linear-gradient(145deg, #13A0A8, #0C6E74);
    border-radius: 50%; padding: 11px; box-sizing: content-box;
    margin-top: -24px;
    box-shadow: 0 6px 16px -4px rgba(12,110,116,.55), 0 0 0 5px #fff;
  }

  .tabbar a.tb-c span { margin-top: -2px; }

  /* Pas de pastille derrière le bouton : il en est déjà une. */
  .tabbar a.tb-c[aria-current]::after { display: none; }
  .tabbar a.tb-c[aria-current]::before { display: none; }
  .tabbar a.tb-c:active svg { transform: scale(.92); }

  /* La barre se creuse un peu pour laisser dépasser le bouton. */
  .tabbar { padding-top: 4px; }
}

/* L'en-tête garde la seule icône du compte, puisqu'il a quitté la barre.
   La recherche et les favoris y sont, inutile de les répéter en haut. */
@media (max-width: 860px) {
  .nav-r .icon-b-compte { display: inline-flex; }
}