/* ==========================================================================
   BOUTON DE LANGUE FIXE (FR <-> EN), en haut a droite, juste a gauche de l'icone PLEIN ECRAN (nov. 2026)
   --------------------------------------------------------------------------
   Cree par js/lang-switch.js a partir du lien de langue deja present dans la page (menu / pied de page, qui restent en place).
   position: absolute (depuis le 5 nov., 8e passage ; avant : fixed) => il est pose en haut de la page, au-dessus de l'icone plein ecran, et defile avec elle : on retrouve la langue dans le menu et en bas de page. Meme place sur TOUTES les pages desktop (accueil, profil, contact, portfolio, pages projet, FR + EN).
   Position = celle de l'icone plein ecran du slider (#slider-fs), decalee vers la gauche. L'AIR entre le drapeau et l'icone plein ecran
   (bord visible -> bord visible) est le MEME que l'air de l'icone plein ecran avec le bord droit de l'ecran / le bas du bandeau (reglage du 5 nov. :
   30 px sur desktop et tablette, 18 px sur mobile ; il etait de ~17 px, trop serre) :
     desktop (>= 1200 px) : boite de 30 px, a 27 px du bord droit et 27 px sous le bandeau  -> bouton de langue a 80 px du bord droit (air de 30 px)
     tablette (768-1199)  : boite de 48 px, a 18 px du bord droit et du haut                -> 18 px (meme axe que l'icone plein ecran, voir plus haut)
     mobile (<= 767)      : boite de 48 px, a 10 px du bord droit, 18 px du haut            -> 10 px (meme axe que l'icone plein ecran)
   REGLAGES : --lang-right (distance au bord droit), --lang-top (distance au bas du bandeau), --lang-size (boite).
   POUR RETIRER : supprimer la ligne <link ... lang-switch.css> et le <script ... lang-switch.js> des pages.
   ========================================================================== */
.lang-switch {
	--lang-size: 30px;
	--lang-right: 80px;
	--lang-top: 27px;
	position: absolute;   /* (5 nov., 8e passage) PLUS FIXE : il part avec le haut de page quand on defile (on retrouve la langue dans le menu et en bas de page). Meme place que l'icone plein ecran, sur toutes les pages. */
	top: calc(var(--top-banner-height, 34px) + var(--lang-top));
	right: var(--lang-right);
	width: var(--lang-size);
	height: var(--lang-size);
	z-index: 9000;   /* (5 nov.) au PREMIER NIVEAU : au-dessus de la trame / mire du slider, des videos, du logo (1051) et des boutons du slider (1050) ; SOUS le bandeau defilant (9999) pour passer dessous quand il remonte avec la page */
	-webkit-transform: translateZ(0);   /* couche de composition propre : Safari ne la laisse plus passer sous la trame (.g81-scan) ni sous la couche materielle des videos */
	transform: translateZ(0);
	will-change: transform;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	line-height: 0;
	opacity: .85;
	transition: opacity .25s ease;
	-webkit-tap-highlight-color: transparent;
}
.lang-switch:hover,
.lang-switch:focus-visible { opacity: 1; }
.lang-switch:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.lang-switch img {
	display: block;
	width: 23px;       /* (5 nov.) = largeur VISIBLE de l'icone plein ecran (traits de 1 a 23 + 0,5 px de trait de chaque cote dans un carre de 24 px) ; avant : 22 px */
	height: 15.68px;  /* meme proportion que le drapeau d'origine (22 x 15) */
	max-width: none;
	margin: 0;
	border: 0;
}
/* TABLETTE + MOBILE (< 1200 px) : PAS DE BOUTON DE LANGUE FIXE (5 nov. 2026, 7e passage).
   Il doublerait la bascule FR / EN deja presente dans le menu deroulant (et le pied de page) : sur ces ecrans on ne garde que celle du menu.
   Le bouton fixe n'existe que sur desktop (>= 1200 px), au-dessus de l'icone plein ecran. POUR LE REMETTRE : supprimer cette regle. */
@media only screen and (max-width: 1199px) {
	.lang-switch { display: none !important; }
}
/* ==========================================================================
   DESKTOP (>= 1200 px) : CHAQUE ICONE CENTREE SUR L'AXE D'UNE COLONNE D'ICONES UI  (5 nov. 2026, 2e passage)
   --------------------------------------------------------------------------
     - icone PLEIN ECRAN : centree sur l'axe des boutons HAUT DE PAGE / BAS DE PAGE (--logo-center-x du bord droit = 125 px, le meme axe que le hamburger et le logo a gauche)
     - DRAPEAU (bouton de langue) : AU-DESSUS de l'icone plein ecran, sur le meme axe (voir plus bas ; avant : sur l'axe du chevron projet suivant)
     - hauteur DRAPEAU (5 nov., 4e passage) : au MILIEU DE LA DIAGONALE entre l'angle haut droit visible de l'icone plein ecran (113 px du bord, 113 px sous le bandeau) et l'angle du slider (sous le bandeau, au bord droit) = centre a ~54-56 px du bord et ~54-56 px sous le bandeau, donc aussi centre sur l'axe du chevron projet suivant (54 px)
     - hauteur ICONE PLEIN ECRAN : le haut visible a --pair-top sous le bandeau = 113 px = blanc a droite de l'icone plein ecran (bord de l'ecran -> bord visible : 125 - 12 = 113 px), donc blanc en haut = blanc a droite (5 nov., 3e passage)
   Les boites sont de 30 px, centrees sur leur axe : right = axe - 15 px.  Valable sur TOUTES les pages (pages projet, accueil, profil, contact, portfolio, FR + EN).
   REGLAGES : --pair-top (hauteur) ; les axes suivent les variables du site (--logo-center-x, --nav-arrow-left).
   ========================================================================== */
@media only screen and (min-width: 1200px) {
	html {
		--pair-top: 113px;
		--pair-fs-axis: var(--logo-center-x, 125px);
		--pair-flag-axis: calc(var(--nav-arrow-left, 50px) + 4px);
	}
	html:root #slider-fs {
		right: calc(var(--pair-fs-axis) - 15px) !important;
		top: calc(var(--pair-top) - 3px) !important;
	}
	.lang-switch {
		/* (5 nov., 5e passage) DRAPEAU AU-DESSUS DE L'ICONE PLEIN ECRAN : meme axe vertical (125 px du bord), centre a mi-hauteur entre le bas du bandeau et le haut visible de l'icone plein ecran
		   (113 / 2 = 56,5 px) : blanc au-dessus du drapeau = blanc entre le drapeau et l'icone (~49 px). Meme place quelle que soit la hauteur de la fenetre. */
		--lang-right: calc(var(--pair-fs-axis) - 15px);
		--lang-top: calc(var(--pair-top) / 2 - 15px);
	}
}

/* ==========================================================================
   TABLETTE + MOBILE (< 1200 px) : L'ICONE PLEIN ECRAN PASSE AU PREMIER PLAN  (5 nov. 2026)
   --------------------------------------------------------------------------
   Cause : sous 1200 px, le slider (css/epicslider.css : position:relative; z-index:1) forme un empilement a lui seul. Le bouton plein ecran (#slider-fs) est DANS le slider :
   il ne pouvait donc jamais passer devant les calques de la tele de la page PROFIL / CONTACT (.contact-tv i, z-index 4 ; titre 6 ; logos), poses APRES le slider.
   Sur desktop (>= 1200 px) cet empilement est deja retire (css/slider-nav-b.css : .epic-slider:not(.fullscreen){z-index:auto}) : on fait pareil ici, pour les sliders du haut de page
   (profil, contact, accueil), et le bouton monte a 12 (comme les autres boutons du slider, voir css/contact-slider.css). Le plein ecran de secours (.fullscreen) n'est pas touche.
   Le DRAPEAU de langue, lui, est a hauteur de l'icone plein ecran sur tablette et mobile (memes 18 px sous le bandeau) : rien a changer.
   POUR ANNULER : supprimer ce bloc.
   ========================================================================== */
@media only screen and (max-width: 1199px) {
	section.contact-hero .epic-slider:not(.fullscreen),
	.slider-homepage .epic-slider:not(.fullscreen) { z-index: auto; }
	html:root section.contact-hero #slider-fs,
	html:root .slider-homepage #slider-fs { z-index: 12 !important; }
}

/* ==========================================================================
   APPARITION AVEC LES AUTRES ICONES UI + PAGE CONTACT EN NOIR ET BLANC  (5 nov. 2026)
   --------------------------------------------------------------------------
   - Avant : le drapeau etait cree des que le HTML etait lu, donc AVANT les autres icones (chevrons, plein ecran, qui attendent html.pl-scroll-ready, positions calculees)
     et sans fondu : d'une page projet a l'autre il s'eteignait puis se rallumait en decalage. Maintenant (desktop) : invisible tant que le script ne pose pas .is-ready
     (= html.pl-scroll-ready, ou 2 s maximum), puis meme fondu de 0,3 s que l'icone plein ecran.
   - Page CONTACT : drapeau en noir et blanc (niveaux de gris), qui passe d'un coup en couleur au survol (sans transition, donc sans demi-teinte).  POUR LE GARDER EN COULEUR : supprimer les regles html:has(#contactForm) de ce bloc.
   ========================================================================== */
@keyframes lang-switch-in { from { opacity: 0; } to { opacity: .85; } }
@media only screen and (min-width: 1200px) {
	.lang-switch:not(.is-ready) { visibility: hidden; transition: none !important; }
	.lang-switch.is-ready { animation: lang-switch-in .3s ease-out; }
}
html:has(#contactForm) .lang-switch,
html:has(#contactForm) .lang-switch img { transition: none !important; }   /* aucune demi-teinte : pas de fondu entre noir et blanc et couleur */
html:has(#contactForm) .lang-switch img { filter: grayscale(1); }
html:has(#contactForm) .lang-switch:hover img,
html:has(#contactForm) .lang-switch:focus-visible img { filter: none; }   /* au survol : passe directement en couleur */

/* ==========================================================================
   BOUTON PLEIN ECRAN VIDEO (#vimeo-fs, cree par js/lang-switch.js) : pages projet avec une video Vimeo, SANS slider  (desktop >= 1200 px, 5 nov. 2026)
   --------------------------------------------------------------------------
   Meme dessin, meme boite (30 px), meme place que l'icone plein ecran des sliders (axe a --logo-center-x du bord droit, haut visible a --pair-top sous le bandeau) :
   la bascule d'une page projet a l'autre ne bouge pas. Il defile avec la page (comme l'icone du slider). Noir sur le fond de page, blanc quand il passe sur la video
   (.on-video, pose par le script). Opacite 50 % comme l'icone des sliders, 100 % au survol. Le bouton du lecteur Vimeo n'est pas touche.
   POUR LE RETIRER : supprimer ce bloc et initVimeoFs() dans js/lang-switch.js.
   ========================================================================== */
.vimeo-fs { display: none; }
@media only screen and (min-width: 1200px) {
	.vimeo-fs {
		display: flex; align-items: center; justify-content: center;
		position: absolute;
		top: calc(var(--top-banner-height, 34px) + var(--pair-top, 113px) - 3px);
		right: calc(var(--pair-fs-axis, var(--logo-center-x, 125px)) - 15px);
		width: 30px; height: 30px; margin: 0; padding: 0; border: 0; background: none;
		z-index: 9000; cursor: pointer;
		color: #000;
		opacity: .5; transition: opacity .25s ease;
		-webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
		-webkit-transform: translateZ(0); transform: translateZ(0);
	}
	.vimeo-fs svg { display: block; margin: 3px; }
	.vimeo-fs.on-video { color: #fff; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .375)) drop-shadow(0 0 6px rgba(0, 0, 0, .175)); }
	.vimeo-fs:hover, .vimeo-fs:focus-visible { opacity: 1; }
	.vimeo-fs:focus-visible { outline: 1px solid currentColor; outline-offset: -4px; }
	.vimeo-fs:not(.is-ready) { visibility: hidden; transition: none !important; }
	.vimeo-fs.is-ready { animation: vimeo-fs-in .3s ease-out; }
}
@keyframes vimeo-fs-in { from { opacity: 0; } to { opacity: .5; } }

/* plein ecran de secours (classe posee sur le body par le slider) : le bouton s'efface */
body.fullscreen .lang-switch { display: none; }
@media print { .lang-switch { display: none; } }