/* =========================================================================
   UCP — 05 · ADAPTATIONS TABLETTE ET MOBILE
   -------------------------------------------------------------------------
   Les maquettes ont été dessinées en desktop uniquement : aucune ne contient
   de media query. Tout le comportement responsive du site est défini ici.

   Les points de rupture reprennent ceux de Divi, pour que ce qu'on règle en
   CSS et ce qu'on règle dans le constructeur basculent au même moment :
     1100 px  grands écrans intermédiaires
      980 px  tablette      (breakpoint « Tablet » de Divi)
      767 px  téléphone     (breakpoint « Phone » de Divi)
      480 px  petit téléphone

   Les tailles de police, elles, n'apparaissent pas ici : elles sont fluides
   via `clamp()` dans 01-tokens.css et s'ajustent en continu.
   ========================================================================= */


/* -------------------------------------------------------------------------
   ≤ 1100 px — on desserre les grilles les plus denses
   ------------------------------------------------------------------------- */

@media (max-width: 1100px) {

	.ucp-grid--4 { grid-template-columns: repeat(3, 1fr); }

	/* Les flèches des carrousels débordaient de 10 px sur les côtés, ce qui est
	   élégant quand la page a des marges et fâcheux quand elle n'en a plus : la
	   fiche séjour s'affiche pleine largeur, les flèches sortaient donc de
	   l'écran et la page entière glissait de deux pixels sous le doigt.
	   Un débordement décoratif ne doit jamais pouvoir créer un défilement. */
	.ucp-carousel--inset .ucp-carousel__btn--prev { left: 0; }
	.ucp-carousel--inset .ucp-carousel__btn--next { right: 0; }

	.ucp-footer {
		grid-template-columns: 200px 1fr 1fr;
		gap: var(--ucp-space-8) var(--ucp-space-8);
	}

	.ucp-footer__logo { max-width: 200px; }

	/* La colonne newsletter passe sous les autres et reprend toute la largeur. */
	.ucp-newsletter-col { grid-column: 1 / -1; }
}


/* -------------------------------------------------------------------------
   ≤ 980 px — tablette
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {

	/* --- En-tête ------------------------------------------------------- */

	/* La navigation horizontale ne tient plus : on la passe sous le logo.
	   Au-delà de trois ou quatre entrées de menu, préférez le module Menu de
	   Divi, qui gère le repli en menu hamburger (voir README, § En-tête). */
	.ucp-header {
		flex-wrap: wrap;
		gap: var(--ucp-space-4);
	}

	.ucp-header__logo { margin-right: auto; }
	.ucp-header__logo img { height: 52px; }

	.ucp-nav {
		order: 3;
		width: 100%;
		gap: var(--ucp-space-6);
		margin-right: 0;
		padding-top: var(--ucp-space-3);
		border-top: 1px solid var(--ucp-border);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ucp-nav a { white-space: nowrap; }

	/* --- Heros --------------------------------------------------------- */

	.ucp-hero { min-height: 460px; }

	.ucp-hero--sejour { min-height: 78vh; min-height: 78svh; }

	.ucp-hero__info { gap: var(--ucp-space-5) var(--ucp-space-8); }

	/* --- Grilles ------------------------------------------------------- */

	.ucp-grid--4,
	.ucp-grid--3        { grid-template-columns: repeat(2, 1fr); }

	.ucp-pillars        { grid-template-columns: repeat(2, 1fr); gap: var(--ucp-space-8); }
	.ucp-guarantees     { grid-template-columns: repeat(2, 1fr); }
	.ucp-team           { grid-template-columns: repeat(2, 1fr); }
	.ucp-contact-grid   { grid-template-columns: 1fr; }
	.ucp-carousel-page  { grid-template-columns: repeat(2, 1fr); }

	/* Les filets verticaux entre garanties deviennent horizontaux. */
	.ucp-guarantee:nth-child(2n)   { border-right: none; }
	.ucp-guarantee:nth-child(-n+2) { border-bottom: 1px solid var(--ucp-border-invert); }

	/* --- Carte séjour large -------------------------------------------- */

	/* Photo au-dessus, texte en dessous : le format 60/40 ne fonctionne
	   plus une fois la colonne de texte sous les 300 px. */
	.ucp-sejour-wide {
		flex-direction: column;
		min-height: 0;
	}

	.ucp-sejour-wide__media { flex: 0 0 auto; height: 280px; }

	/* --- Fiche séjour --------------------------------------------------- */

	/* `.ucp-sejour-page` en préfixe, et ce n'est pas de la coquetterie.
	   04-integrations.css pose une grille à quatre colonnes sur
	   `.ucp-sejour-page .ucp-layout`, qui pèse deux classes. Une règle sur
	   `.ucp-layout` seul n'en pèse qu'une : elle perdait, la grille restait à
	   quatre colonnes sur téléphone, et la colonne de texte se retrouvait
	   écrasée à quelques dizaines de pixels. Le texte sortait alors à trois
	   lettres par ligne, à la verticale.
	   C'est le genre de règle qu'on croit inoffensive parce qu'elle marche sur
	   l'écran qu'on a sous les yeux. */
	/* Les marges latérales reviennent avec la colonne unique, et c'est le point
	   important de cette règle.

	   Sur ordinateur, la fiche n'a pas de rembourrage : ses marges sont deux
	   colonnes de grille, la première et la quatrième, qui encadrent le texte et
	   absorbent l'espace des grands écrans. En repliant la grille sur une seule
	   colonne, on supprimait ces deux colonnes — et donc les marges avec elles.
	   Le texte se retrouvait collé aux deux bords de l'écran, sans un pixel de
	   respiration. À la lecture, la première lettre de chaque ligne touche le
	   bord de la vitre : l'oeil n'a plus de repère pour retrouver le début de la
	   ligne suivante, et le texte à drapeau donne en prime l'impression d'être
	   décalé vers la gauche.

	   Une marge supprimée par une autre règle ne se voit pas dans la règle
	   fautive. C'est pour ça qu'on la remet ici, au même endroit que le repli. */
	.ucp-layout,
	.ucp-sejour-page .ucp-layout {
		grid-template-columns: 1fr;
		gap: var(--ucp-space-10);
		padding-left: var(--ucp-gutter);
		padding-right: var(--ucp-gutter);
	}

	.ucp-sejour-page .ucp-layout > .ucp-content,
	.ucp-sejour-page .ucp-layout > .ucp-sidebar {
		grid-column: 1;
	}

	/* La barre collante occupe le bas de l'écran : on dégage la hauteur qu'elle
	   recouvre, sinon elle mange la fin de la fiche. */
	.ucp-sejour-page {
		padding-bottom: 84px;
	}

	.ucp-mobile-cta {
		display: flex;
	}

	/* En une colonne, une colonne latérale collante suivrait le lecteur sur
	   toute la page : on la libère. Le bandeau d'appel à l'action en fin de
	   fiche prend le relais — c'est lui qui rattrape le parcours mobile. */
	.ucp-sidebar { position: static; }

	/* Deux vignettes par vue au lieu de trois : à 700 px de large, trois
	   photos côte à côte font des timbres-poste. */
	.ucp-carousel-page { grid-template-columns: repeat(2, 1fr); }

	/* Un tableau ne se replie pas : on le laisse défiler dans sa boîte plutôt
	   que de couper la colonne des montants hors de l'écran. */
	.ucp-sejour-page .ucp-content-section table,
	.ucp-sejour-page .ucp-table-wrap {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Le bloc de téléchargement passe en colonne : « Télécharger » à côté d'un
	   titre sur deux lignes sortait de l'écran. */
	.ucp-doc {
		flex-wrap: wrap;
		gap: var(--ucp-space-3);
	}

	.ucp-doc__body   { flex: 1 1 100%; order: 2; }
	.ucp-doc__action { order: 3; }

	/* --- Calendrier de saison ------------------------------------------- */

	.ucp-months { grid-template-columns: repeat(6, 1fr); }

	/* --- Pied de page --------------------------------------------------- */

	.ucp-footer { grid-template-columns: repeat(2, 1fr); }

	.ucp-footer__logo-col { grid-column: 1 / -1; }
}


/* -------------------------------------------------------------------------
   ≤ 767 px — téléphone
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* --- Heros --------------------------------------------------------- */

	.ucp-hero { min-height: 420px; }

	/* --- La couverture d'une fiche séjour sur téléphone -------------------

	   Sur ordinateur, la photo occupe tout le cadre et le texte passe par-dessus.
	   Ce cadre-là est large : la photo, cadrée en paysage, y entre sans effort.

	   Un écran de téléphone est l'inverse, étroit et haut. Poser la même photo
	   en fond de tout le cadre oblige à l'agrandir jusqu'à ce qu'elle remplisse
	   la hauteur, et il ne reste alors qu'une bande verticale au centre : sur un
	   iPhone, moins de la moitié de la largeur d'origine. Le sujet survit, le
	   paysage autour de lui disparaît. Or c'est le paysage qui fait vendre le
	   séjour.

	   On renonce donc au fond plein écran, et seulement sur téléphone. La photo
	   reprend sa boîte à elle, en 3:2, sa proportion d'origine : elle est
	   montrée ENTIÈRE, rien n'est coupé, ni sur les côtés ni en haut. Le texte
	   descend juste en dessous, sur le fond sombre du hero.

	   Ce qu'on perd : le titre n'est plus écrit sur la photo. Ce qu'on gagne :
	   la photo est entière, et le titre est lisible sur un fond qui ne lui fait
	   pas concurrence. Sur un écran de 6 pouces, c'est le bon échange.

	   Aucune bande noire au passage : la place sous la photo n'est pas perdue,
	   elle porte le titre et les caractéristiques. */

	.ucp-hero--sejour {
		display: block;
		min-height: 0;
	}

	/* La proportion est portée par le cadre, pas par l'image.

	   Posée sur l'image, elle disparaît le jour où la photo ne se charge pas :
	   le navigateur remplace alors l'image par une simple ligne de texte et
	   ignore la proportion demandée. La couverture s'écrase à trente pixels et
	   la page paraît cassée, alors que seule la photo manquait.
	   Sur le cadre, la hauteur est réservée quoi qu'il arrive. */
	.ucp-hero--sejour .ucp-hero__bg {
		position: relative;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.ucp-hero--sejour .ucp-hero__bg img,
	.ucp-hero--sejour .ucp-hero__bg video { object-position: center; }

	/* Le voile du hero existe pour rendre un titre lisible par-dessus la photo.
	   Le titre n'y est plus : le voile n'a plus qu'à raccorder le bas de la
	   photo au fond sombre, sans assombrir l'image. */
	.ucp-hero--sejour .ucp-hero__bg::after {
		background: linear-gradient(180deg, rgba(30, 30, 32, 0.30) 0%, rgba(30, 30, 32, 0) 30%, rgba(30, 30, 32, 0) 70%, rgba(30, 30, 32, 0.45) 100%);
	}

	.ucp-hero__ctas { flex-direction: column; align-items: stretch; gap: var(--ucp-space-3); }

	.ucp-hero__ctas > * { width: 100%; text-align: center; }

	/* Le CTA fantôme est un lien souligné : centré, il paraît décalé. */
	.ucp-btn--ghost.ucp-btn--ghost { padding: 14px 0; }

	/* Le fil d'Ariane reste en surimpression, mais sur la photo, où il a
	   maintenant toute la place. Il chevauchait le sur-titre du pays tant que le
	   texte remplissait la couverture : les deux s'écrivaient l'un sur l'autre,
	   et aucun ne se lisait. */
	.ucp-breadcrumb--overlay { top: 16px; }

	/* Les caractéristiques passent en deux colonnes.

	   En une seule colonne, six lignes de « intitulé + valeur » font 490 px de
	   haut : elles poussent le titre hors de la couverture, mangent la photo, et
	   demandent trois gestes de défilement pour un contenu qui tient en un coup
	   d'oeil. Deux colonnes ramènent le bloc à 245 px.

	   Grille et non plus `flex-wrap` : avec la grille, les six cases ont la même
	   largeur et les intitulés s'alignent en deux vraies colonnes. En `flex`,
	   chaque case se dimensionnait sur son propre texte et la deuxième colonne
	   avançait ou reculait selon la longueur des mots. */
	.ucp-hero__info {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ucp-space-5) var(--ucp-space-5);
		margin-top: var(--ucp-space-6);
	}

	/* La valeur descend d'un cran : « 12 000 € / chasseur » en corps 20 dans une
	   demi-largeur d'écran repasserait à la ligne. */
	.ucp-hero__info-value { font-size: 1.0625rem; }

	/* --- Grilles : tout passe en une colonne ---------------------------- */

	.ucp-grid--4,
	.ucp-grid--3,
	.ucp-grid--2       { grid-template-columns: 1fr; }

	.ucp-pillars       { grid-template-columns: 1fr; gap: var(--ucp-space-6); }
	.ucp-team          { grid-template-columns: 1fr; }
	.ucp-portes        { grid-template-columns: 1fr; }
	.ucp-info-grid     { grid-template-columns: 1fr; }
	.ucp-inclus        { grid-template-columns: 1fr; }
	.ucp-form-row      { grid-template-columns: 1fr; }
	.ucp-carousel-page { grid-template-columns: 1fr; }
	.ucp-guarantees    { grid-template-columns: 1fr; }

	.ucp-porte { margin-right: 0; margin-bottom: -1px; }

	.ucp-guarantee {
		border-right: none;
		border-bottom: 1px solid var(--ucp-border-invert);
	}

	.ucp-guarantee:last-child { border-bottom: none; }

	/* --- Filtres -------------------------------------------------------- */

	/* Deux filtres par ligne : un par ligne donnerait une colonne de cinq
	   `select` qui repousse les résultats hors de l'écran. */
	.ucp-filters { gap: var(--ucp-space-3); }

	.ucp-filter { flex: 1 1 calc(50% - var(--ucp-space-3)); min-width: 0; }

	.ucp-filters__reset { flex: 1 1 100%; }
	.ucp-btn-reset      { width: 100%; }

	.ucp-search input[type="search"],
	.ucp-search input[type="text"] { padding: 15px 20px 15px 48px; }

	/* --- Carrousels ----------------------------------------------------- */

	.ucp-sejour-wide__media { height: 220px; }

	/* Sur mobile on navigue au doigt (le JS gère le balayage) : les flèches
	   passent sous le carrousel plutôt que par-dessus le contenu. */
	.ucp-carousel__btn {
		position: static;
		transform: none;
		width: 44px;
		height: 44px;
	}

	.ucp-carousel__nav {
		display: flex;
		justify-content: center;
		gap: var(--ucp-space-3);
		margin-top: var(--ucp-space-4);
	}

	.ucp-carousel--bleed .ucp-carousel__viewport { margin: 0; }

	.ucp-media-tile,
	.ucp-media-tile--tall,
	.ucp-media-placeholder,
	.ucp-media-placeholder--tall { height: 220px; }

	/* --- Programme jour par jour ---------------------------------------- */

	.ucp-day { flex-direction: column; gap: var(--ucp-space-2); }
	.ucp-day__label { flex: 0 0 auto; }

	/* La flèche des atouts se rapproche de son texte : 28 px d'indentation
	   derrière le rembourrage du cadre et la marge de la page, ça faisait rentrer
	   les lignes de 72 px sur un écran qui n'en fait que 390. */
	.ucp-atouts li { padding-left: 22px; }

	/* --- FAQ ------------------------------------------------------------ */

	.ucp-faq__question { gap: var(--ucp-space-3); padding: 16px var(--ucp-space-4); }
	.ucp-faq__answer p { margin-left: var(--ucp-space-4); margin-right: var(--ucp-space-4); }

	/* --- Étapes de méthode ---------------------------------------------- */

	.ucp-step { gap: var(--ucp-space-4); }
	.ucp-step__num { flex: 0 0 56px; }

	/* --- Bandeau devis --------------------------------------------------- */

	.ucp-devis-band { flex-direction: column; align-items: stretch; gap: var(--ucp-space-5); }
	.ucp-devis-band .ucp-btn { width: 100%; }

	/* `flex: 1 1 320px` sur le bloc de texte. Les 320 px sont une largeur de
	   base, et c'est vrai tant que le bandeau est en ligne. Passé en colonne,
	   l'axe principal devient la verticale et les 320 px deviennent une
	   HAUTEUR : le bandeau se retrouvait avec 320 px de vert vide entre son
	   texte et son bouton.
	   C'est le piège classique de `flex-basis` : la valeur ne change pas de
	   sens, c'est l'axe qui change sous elle. Dès qu'on retourne un conteneur
	   flex, toutes ses bases sont à revoir. */
	.ucp-devis-band__text { flex: 0 0 auto; }

	/* --- Pied de page ---------------------------------------------------- */

	.ucp-footer { grid-template-columns: 1fr; gap: var(--ucp-space-8); }

	.ucp-footer__legal { flex-direction: column; align-items: flex-start; }
	.ucp-footer__legal-right { gap: var(--ucp-space-4); }

	.ucp-social { gap: var(--ucp-space-3); }
	.ucp-social__icon { width: 38px; height: 38px; }
}


/* -------------------------------------------------------------------------
   ≤ 480 px — petit téléphone
   ------------------------------------------------------------------------- */

@media (max-width: 480px) {

	.ucp-header__logo img { height: 44px; }
	.ucp-header__name     { font-size: 0.75rem; letter-spacing: 0.2em; }

	.ucp-months { grid-template-columns: repeat(4, 1fr); }

	/* Les caractéristiques restent à deux colonnes, même à 320 px.
	   Elles passaient ici en pleine largeur, une par ligne. C'était l'intention
	   d'origine — laisser respirer — et c'était une erreur : sur un iPhone de
	   390 px, donc sous ce seuil, les six lignes empilées occupaient toute la
	   couverture. Deux colonnes serrées se lisent mieux qu'une colonne longue,
	   parce que l'oeil embrasse les six caractéristiques d'un seul regard au
	   lieu de les découvrir en défilant. */
	.ucp-hero__info { gap: var(--ucp-space-4); }

	.ucp-sejour-wide__body { padding: var(--ucp-space-6) var(--ucp-space-5); }

	/* La ligne de prix se casse en deux plutôt que de comprimer le montant. */
	.ucp-sejour__price-row { flex-wrap: wrap; }
	.ucp-sejour__price     { flex: 1 1 100%; }
}


/* -------------------------------------------------------------------------
   IMPRESSION
   Un client imprime un devis ou une fiche séjour plus souvent qu'on ne croit.
   ------------------------------------------------------------------------- */

@media print {

	.ucp-header,
	.ucp-footer,
	.ucp-nav,
	.ucp-cta-final,
	.ucp-devis-band,
	.ucp-carousel__btn,
	.ucp-carousel__dots,
	.ucp-finder,
	.ucp-sidebar,
	.ucp-hero__video,
	.ucp-mobile-cta { display: none; }

	.ucp-layout { grid-template-columns: 1fr; padding: 0; }

	/* Une FAQ imprimée doit être lisible entièrement, pas repliée. */
	.ucp-faq__answer { grid-template-rows: 1fr; }
	.ucp-faq__toggle { display: none; }

	body.ucp { background: #FFFFFF; color: #000000; }
}