@charset "UTF-8";
/* mobile.css (/common/css/, commun à tous les sites) - version 1.8.0 --EPSU/03.11.26 - historique des versions en fin de fichier
 * Version mobile du front office : couche adaptative sur les mêmes pages (mêmes adresses, même contenu).
 * Chargée après front-office.css et front-office2.css, avant le site.css du site. Toutes les règles de mise en page
 * sont dans @media (max-width: 959px) : au-delà (ordinateurs, tablettes en paysage), le site de bureau est inchangé.
 * Classes posées par les gabarits : table.pg-layout (tableaux de mise en page, page.html.inc.php et barres de
 * navigation), tr.pg-flags, tr.pg-shadow. Éléments ajoutés par /common/js/mobile.js : .m-only (bouton menu, menu
 * déroulant, bouton « Dans cette rubrique »).
 */

/* éléments propres au mobile : jamais affichés sur le site de bureau */
.m-only { display:none; }

@media screen and (max-width: 959px) {

	/*---------- base */
	html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
	body { margin:0; overflow-x:hidden; }
	img { max-width:100%; height:auto; }
	iframe, video, embed, object { max-width:100%; }

	/*---------- tableaux de mise en page => blocs empilés, largeur de l'écran */
	table.pg-layout,
	table.pg-layout > tbody,
	table.pg-layout > tbody > tr,
	table.pg-layout > tbody > tr > td {
		display:block;
		width:auto !important;
		height:auto !important;
		box-sizing:border-box;
	}
	tr.pg-flags, tr.pg-shadow, #page-left-border, #page-right-border { display:none !important; }

	/*---------- en-tête : logo + bouton menu */
	#NavigationTop { position:relative; }
	#NavigationTop > tbody > tr > td { padding:10px 64px 10px 14px !important; }
	#NavigationTitle { float:none !important; margin:0 !important; padding:0 !important; display:flex; align-items:center; gap:12px; }
	#NavigationTitle a { display:block; flex:none; }
	#NavigationTitle a + a { flex:1 1 auto; min-width:0; }   /* titre du site (ex. /matu/) à côté du logo */
	#NavigationTitle img { display:block; height:40px !important; width:auto !important; margin:0 !important; }
	/* EPSU/03.11.26 - site avec un titre (ex. /matu/ : logo suivi du titre) : logo coupé après le carré EPSU, sans le nom de l'école ;
	   image de 521 × 113 px (celle du site principal), coupe à la colonne 140 => 140 × 40 / 113 = 50 px à 40 px de haut */
	#NavigationTitle a:has(+ a) { width:50px; overflow:hidden; margin-left:0; }   /* margin-left : annule le -17 px du bureau */
	#NavigationTitle a:has(+ a) img { max-width:none !important; }   /* image entière, coupée par le lien (sinon réduite à 48 px de large) */
	#NavigationTitle span, #NavigationTitle a + a span { display:block; margin:0 !important; font-size:17px !important; line-height:1.2; }   /* écart : gap */
	#NavigationTop ul { display:none; }                       /* liens repris dans le menu déroulant */
	#NavigationTop td > div[style*="float:right"] { display:none !important; }
	#NavigationSup { display:none; }                           /* onglets repris dans le menu déroulant */
	td.BN { height:auto !important; }

	.m-burger {
		display:flex; align-items:center; justify-content:center;
		position:absolute; top:50%; right:10px; transform:translateY(-50%);
		width:44px; height:44px; padding:0; margin:0;
		border:1px solid rgba(255,255,255,.35); border-radius:6px; background:transparent; color:#fff; cursor:pointer;
	}
	.m-burger svg { display:block; }
	.m-burger .m-close { display:none; }
	body.m-menu-open .m-burger .m-open { display:none; }
	body.m-menu-open .m-burger .m-close { display:block; }
	.m-burger:focus-visible { outline:2px solid #fff; outline-offset:2px; }

	.m-menu { display:none; background:#262E38; padding:4px 0 12px; text-align:left; }
	body.m-menu-open .m-menu { display:block; }
	.m-menu a, .m-menu a:link, .m-menu a:visited {
		display:block; padding:13px 18px; color:#fff; text-decoration:none; background:none;
		font-size:15px; line-height:1.3; border-top:1px solid #363E48;
	}
	.m-menu a.m-tab { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-size:14px; }
	.m-menu a.m-current { background:#363E48; box-shadow:inset 4px 0 0 #fff; }
	.m-menu a:hover, .m-menu a:focus { background:#363E48; }
	.m-menu .m-sep { height:8px; }

	/*---------- cadre de la page */
	#NavigationBorderBottom { display:none; }

	/*---------- colonne gauche : titre de la rubrique + sous-menu replié */
	td.ColonneGauche { padding:0 14px !important; }
	td.ColonneGauche table { width:100% !important; margin-left:0 !important; }
	td.ColonneGauche td.TitreColonneGauche { height:auto !important; padding:16px 0 8px !important; }
	.TitreColonneGauche { font-size:22px; }
	/* sous-menu fermé : tout sauf le titre et le bouton */
	td.ColonneGauche.m-has-lnav:not(.m-lnav-open) > *:not(:first-child):not(.m-lnav-btn) { display:none !important; }
	td.ColonneGauche.m-has-lnav > :first-child { display:none !important; }   /* titre de la rubrique : repris par le bouton */
	.m-lnav-btn {
		display:flex; align-items:center; justify-content:space-between; gap:10px;
		width:100%; margin:14px 0 6px; padding:11px 14px; box-sizing:border-box;
		font:inherit; font-size:17px; font-weight:600; color:#262E38; text-align:left;
		background:#f1f2f1; border:1px solid #dfe1e5; border-radius:6px; cursor:pointer;
	}
	.m-lnav-btn .m-caret { transition:transform .15s; flex:none; }
	td.ColonneGauche.m-lnav-open .m-lnav-btn .m-caret { transform:rotate(180deg); }
	td.ColonneGauche.m-lnav-open .m-lnav-btn { border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; }
	td.ColonneGauche.m-lnav-open { padding-bottom:8px !important; }
	.ColonneGaucheSR, .ColonneGaucheSR-selected, .ColonneGauche-selected-noexpand { font-size:15px; }
	div.ColonneGaucheSR, div.ColonneGaucheSR-selected, div.ColonneGaucheSR-selected-noexpand { padding-top:9px !important; padding-bottom:9px !important; }

	/*---------- colonne centrale : marges réduites, texte lisible */
	td.ColonneCentrale { padding-top:6px !important; }
	/* tableaux d'encadrement du texte en blocs : un contenu large ne peut plus élargir la page */
	td.ColonneCentrale > table, td.ColonneCentrale > table > tbody, td.ColonneCentrale > table > tbody > tr, td.ColonneCentrale > table > tbody > tr > td,
	table.ContenuCentral, table.ContenuCentral > tbody, table.ContenuCentral > tbody > tr, table.ContenuCentral > tbody > tr > td {
		display:block; width:auto !important; box-sizing:border-box;
	}
	td.ColonneCentrale > table { height:auto !important; background-image:none !important; }
	td.ColonneCentrale > table > tbody > tr > td { padding:0 14px !important; }
	table.ContenuCentral > tbody > tr > td { padding:8px 0 16px !important; }
	.ContenuCentral, td.ColonneDroite { overflow-wrap:break-word; word-wrap:break-word; }
	.ContenuCentral a, td.ColonneDroite a { overflow-wrap:anywhere; }   /* longues adresses affichées en lien : coupées plutôt que d'élargir la colonne */
	.ContenuCentral blockquote { margin-left:0; margin-right:0; }
	.ContenuCentral form { max-width:100%; }
	.ContenuCentral input, .ContenuCentral select, .ContenuCentral textarea { max-width:100%; box-sizing:border-box; }
	.ContenuCentral { font-size:15px; line-height:1.5; }
	.ContenuCentral p, .ContenuCentral li { font-size:15px !important; line-height:1.5 !important; }
	.ContenuCentral h1 { font-size:24px !important; line-height:1.25 !important; }
	.ContenuCentral h2 { font-size:19px !important; line-height:1.3 !important; }
	.ContenuCentral h3 { font-size:17px !important; }
	/* tableaux du contenu : défilement horizontal plutôt que débordement de la page */
	.ContenuCentral td table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
	.ContenuCentral img { height:auto !important; }
	.ContenuCentral [style*="width:"] { max-width:100% !important; box-sizing:border-box; }
	.ContenuCentral [style*="float:right"], .ContenuCentral [style*="float: right"],
	.ContenuCentral [style*="float:left"], .ContenuCentral [style*="float: left"] { float:none !important; margin-left:0 !important; margin-right:0 !important; }
	a.link-button { display:inline-block; padding:10px 16px !important; font-size:15px !important; }
	/* EPSU/03.11.26 - codes QR de paiement (ex. /fr/paiements) et leur agrandissement : inutiles sur le téléphone qui devrait les scanner */
	.ContenuCentral img.QR-thumb, .QR-modal { display:none !important; }
	/* EPSU/03.11.26 - bandeau de l'accueil (<img class="bandeau-accueil">, « Chemins vers l'uni ») : toute la largeur du texte, proportions gardées */
	.ContenuCentral img.bandeau-accueil { display:block; width:100% !important; height:auto !important; }
	/* paragraphe sur une ligne (p.ligne-unique, front-office2.css : resserré par font-stretch sous 430 et 360 px, largeurs
	   calculées à la taille du bureau) : 13 px comme au bureau, au lieu des 15 px du texte en mobile (sinon il dépasse de l'écran) */
	.ContenuCentral p.ligne-unique { font-size:13px !important; }
	/* EPSU/03.11.26 - cartes sombres (table.menu / table.menu2c, ex. « Accélérée » / « Classique » sur /matu/) : 2 px au bureau,
	   trop serré avec le texte agrandi du mobile */
	.ContenuCentral table.menu tr:not(.comments) td, .ContenuCentral table.menu2c tr:not(.comments) td { padding-top:12px !important; padding-bottom:12px !important; }

	/*---------- colonne droite : sous le texte, pleine largeur */
	/* EPSU/03.11.26 - colonne elle-même seulement : la cellule intérieure du contenu porte aussi la classe ColonneDroite */
	table.pg-layout > tbody > tr > td.ColonneDroite { padding:8px 14px 0 !important; border-top:1px solid #e5e7ea; }
	td.ColonneDroite table { width:100% !important; }
	table.pg-layout > tbody > tr > td.ColonneDroite > table > tbody > tr > td { padding-left:0 !important; padding-right:0 !important; }
	td.ColonneDroite p, td.ColonneDroite li { font-size:15px !important; line-height:1.5 !important; }
	/* en-tête sans titre (titre vide + espacement de 10 px) : retiré */
	table.pg-layout > tbody > tr > td.ColonneDroite > table:has(td.ColonneDroiteTitre:empty) { display:none; }
	/* illustration en tête de colonne (ex. « Visez l'excellence ! ») : tout ce qui précède les tableaux de la colonne */
	table.pg-layout > tbody > tr > td.ColonneDroite > :not(table) { display:none !important; }

	/*---------- pied de page */
	table.PiedPage, td.PiedPage { width:100% !important; }
	td.PiedPage { padding:10px 14px !important; line-height:1.6; }
	.PiedPage2 { display:block; padding:0 14px; font-size:13px; line-height:1.6; }
}

/* EPSU/03.11.26 - téléphone en paysage (et petites tablettes) : colonne droite de nouveau à droite du texte ;
 * le sous-menu de la rubrique (replié) reste sur toute la largeur, au-dessus */
@media screen and (max-width: 959px) and (min-width: 600px) and (orientation: landscape) {
	/* align-items:stretch : texte et colonne droite de même hauteur (la plus grande des deux), filet de séparation sur toute la hauteur */
	table.pg-layout > tbody > tr:has(> td.ColonneCentrale) { display:flex !important; flex-wrap:wrap; align-items:stretch; }
	tr:has(> td.ColonneCentrale) > td.ColonneGauche { flex:0 0 100%; }
	tr:has(> td.ColonneCentrale) > td.ColonneCentrale { flex:1 1 300px; min-width:0; }   /* base 300 px : passe sous le sous-menu, à côté de la colonne droite */
	/* 300 px (bureau : 259 px) : boutons agrandis en mobile (15 px au lieu de 13 px), « Étudier en Suisse : notre guide » mesure
	   259 px et tient sur une ligne ; texte à 10 px des bords comme au bureau ; filet en ombre : ne prend pas de largeur */
	table.pg-layout > tbody > tr:has(> td.ColonneCentrale) > td.ColonneDroite { flex:0 0 300px; min-width:0; border-top:none; box-shadow:-1px 0 0 #e5e7ea; padding:14px 0 0 !important; }   /* haut aligné sur le texte (6 + 8 px) */
	table.pg-layout > tbody > tr:has(> td.ColonneCentrale) > td.ColonneDroite > table { margin-top:0 !important; }
	table.pg-layout > tbody > tr:has(> td.ColonneCentrale) > td.ColonneDroite > table > tbody > tr > td { padding-left:10px !important; padding-right:10px !important; }
	td.ColonneDroite a.link-button { white-space:normal; max-width:100%; box-sizing:border-box; }   /* bouton sur deux lignes si besoin */
}

/*========== HISTORIQUE DES VERSIONS ==========
   Format : MAJEURE.MINEURE.CORRECTIF

   1.8.0 - 03.11.26 - EPSU
     - Cartes table.menu / table.menu2c : 12 px en haut et en bas

   1.7.4 - 03.11.26 - EPSU
     - Titre du site : marge du bureau (20 px) annulée, écart géré par gap

   1.7.3 - 03.11.26 - EPSU
     - En-tête : marge intérieure du bureau (site avec titre) annulée

   1.7.2 - 03.11.26 - EPSU
     - Logo coupé (site avec titre) : image du site principal, 50 px de large

   1.7.1 - 03.11.26 - EPSU
     - Logo coupé (site avec titre) : décalage de -9 px du bureau annulé

   1.7.0 - 03.11.26 - EPSU
     - Classe bandeau-accueil : image sur toute la largeur du texte
     - p.ligne-unique à 13 px (taille du bureau) : tient sur une ligne jusqu'à 320 px de large

   1.6.0 - 03.11.26 - EPSU
     - Codes QR de paiement (img.QR-thumb) et leur agrandissement (.QR-modal) masqués

   1.5.0 - 03.11.26 - EPSU
     - En-tête d'un site avec titre (ex. /matu/) : logo coupé après le carré EPSU (sans le nom de l'école)

   1.4.1 - 03.11.26 - EPSU
     - Paysage : colonnes de même hauteur, filet de séparation sur toute la hauteur

   1.4.0 - 03.11.26 - EPSU
     - Colonne droite : règles limitées à la colonne elle-même (la cellule intérieure, aussi .ColonneDroite, recevait un
       second filet et ses tableaux perdaient leurs marges) ; en-tête vide (titre + espacement) retiré
     - Paysage : colonne droite à 300 px, sans espace supplémentaire en haut

   1.3.2 - 03.11.26 - EPSU
     - Paysage : colonne droite à 290 px

   1.3.1 - 03.11.26 - EPSU
     - Paysage : colonne droite à 280 px (boutons agrandis en mobile : le bouton du guide tient sur une ligne)

   1.3.0 - 03.11.26 - EPSU
     - Paysage : colonne droite de la largeur du bureau (259 px, marges intérieures de 10 px), filet en ombre

   1.2.0 - 03.11.26 - EPSU
     - Bouton du sous-menu : porte le titre de la rubrique (mobile.js 1.1.0), en 17 px gras ; titre au-dessus masqué

   1.1.0 - 03.11.26 - EPSU
     - Paysage (600 à 959 px) : colonne droite à droite du texte, sous-menu de la rubrique au-dessus
     - Liens du contenu et de la colonne droite coupés n'importe où (longues adresses, ex. /fr/epfl)

   1.0.1 - 03.11.26 - EPSU
     - Illustration en tête de la colonne droite masquée

   1.0.0 - 02.11.26 - EPSU
     - Création : mise en page mobile (moins de 960 px) par-dessus la mise en page de bureau : tableaux de mise en
       page empilés, en-tête logo + menu déroulant, sous-menu de la rubrique replié, colonne droite sous le texte
==============================================*/