/**
 * It's Rugby — App Shell : habillage « mode app ».
 *
 * TOUTES les règles sont préfixées html.is-app : sur le web, cette feuille
 * n'a aucun effet (la barre est display:none, la chrome reste intacte).
 * Charte réutilisée depuis itsrugby-common.css : --itsclt-teal / -green /
 * -vanilla / -ink / -sec. Angles droits (jamais de border-radius).
 */

/* ── Barre d'onglets : masquée par défaut (web), affichée seulement en app ── */
.its-app-tabbar {
	display: none;
}

/* ── Bannière Pronos (sous le ticker) : masquée par défaut (web), app only ── */
.its-app-home-promo {
	display: none;
}

html.is-app .its-app-home-promo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 14px;
	background: #1A1A1A; /* identique au fond du ticker (nav.scores-ticker) */
	color: var(--g-bright, #8ED968);
	text-decoration: none;
	font-weight: 800;
	font-size: 14px;
	border-bottom: 2px solid var(--g-bright, #8ED968);
}

/* Couleur portée par les enfants (spans) : le <a> voit son color forcé à
   `inherit` par la règle whitelist .its-v2 a[class]:not(...) de common.css
   (spécificité imbattable sans !important). Les <span>/svg ne sont pas ciblés. */
html.is-app .its-app-home-promo-ico {
	flex: 0 0 auto;
	display: flex;
	color: var(--g-bright, #8ED968);
}

html.is-app .its-app-home-promo-ico svg {
	width: 20px;
	height: 20px;
}

html.is-app .its-app-home-promo-txt {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--g-bright, #8ED968);
}

/* ── Barre de progression de navigation (masquée hors app) ──────────────── */
.its-app-progress {
	display: none;
}

html.is-app .its-app-progress {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 10000;
	background: var(--itsclt-green, #8ED968);
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
	pointer-events: none;
}

html.is-app .its-app-progress.is-active {
	opacity: 1;
	transition: transform 0.2s ease;
}

html.is-app .its-app-progress.is-done {
	opacity: 0;
	transition: transform 0.15s ease, opacity 0.25s ease 0.05s;
}

/* iOS/WKWebView : certaines pages posent body{overflow:hidden auto}, ce qui
   fait du body un conteneur de défilement → position:fixed « décroche » et
   suit le contenu (Chrome desktop l'ignore, iOS non). On normalise SEULEMENT
   en mode app : overflow-x:clip empêche le scroll horizontal SANS créer de
   conteneur de défilement (donc fixed reste ancré à l'écran) ; overflow-y
   visible rend le défilement au document (html), pas au body. */
html.is-app,
html.is-app body {
	/* Fallback pour les WebView Android à Chromium ancien qui n'implémentent PAS
	   overflow:clip : sans lui, clip retombe sur `visible`, rien ne contient la
	   largeur, un débordement transitoire (ticker) déclenche le dézoom
	   overview-mode du WebView → innerWidth grimpe (1706) et casse la tabbar.
	   `hidden` est universellement supporté et borne la page à device-width. */
	overflow-x: hidden;
	overflow-y: visible;
	/* coupe le rebond élastique horizontal iOS (« slide à droite ») */
	overscroll-behavior-x: none;
}
/* Moteurs modernes (Chromium 90+, iOS 16+) : on privilégie clip, qui coupe le
   scroll horizontal SANS faire du body un conteneur de défilement (donc
   position:fixed reste ancré — cf. commentaire ci-dessus). */
@supports (overflow: clip) {
	html.is-app,
	html.is-app body {
		overflow-x: clip;
	}
}

html.is-app .its-app-tabbar {
	display: flex;
	position: fixed;
	/* Barre FLOTTANTE (façon Instagram, mais angles droits — charte) :
	   détachée des bords et posée AU-DESSUS de la safe area → plus de
	   « trou blanc » sous la barre, le contenu défile derrière. */
	left: 12px;
	right: 12px;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
	z-index: 9990;
	/* left + right + width:auto : la barre se cale sur l'écran sans dépendre
	   de l'ICB (100vw/innerWidth déraille si une page déborde en X).
	   Reste correcte même si un débordement transitoire gonfle innerWidth. */
	width: auto;
	/* Fond noir + texte VANILLA (choix Félix 30/07) : lisible sur tous les
	   fonds du site, et raccord avec le ticker. */
	background: #1A1A1A;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
	/* Pilule arrondie : exception à la règle « angles droits » validée par
	   Félix pour CETTE barre uniquement (30/07). !important OBLIGATOIRE :
	   common.css applique la charte via `*{border-radius:0!important}` —
	   même contournement que .media-play et les avatars (50%!important).
	   overflow:hidden pour que le feedback :active ne dépasse pas des coins. */
	border-radius: 999px !important;
	overflow: hidden;
	padding: 0 6px;
	touch-action: manipulation;
}

/* Android : la webview V1 n'est pas edge-to-edge → env(safe-area-inset-bottom)
   vaut 0 ET la barre système de l'OS occupe déjà la zone sous la webview. Les
   12px d'offset s'empilaient dessus : tabbar visuellement plus haute que sur
   iOS (remonté par Félix, 01/08). Offset réduit à 8px — on GARDE un dégagement
   (demande Félix : pas de barre collée), et l'inset reste dans le calc pour le
   jour où l'app passera edge-to-edge (V2 targetSdk 36). iOS ne matche jamais
   .is-app-android : zéro impact. */
html.is-app-android .its-app-tabbar {
	bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
}

html.is-app .its-app-tab {
	flex: 1 1 0;
	/* min-width:0 : sans lui, les libellés longs (« Compétitions ») forcent
	   le débordement horizontal et les onglets se tassent inégalement */
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 54px;
	padding: 8px 2px 6px;
	color: var(--itsclt-vanilla, #F2E5D2);
	font-weight: 600;
	text-decoration: none;
	position: relative;
	/* supprime le délai de tap ~300 ms → clic instantané */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Couleur AUSSI portée par les enfants (svg/label) : sur les pages où
   .its-v2 englobe le footer, la règle whitelist `.its-v2 a[class]:not(...)`
   de common.css force color:inherit sur le <a> (spécificité imbattable sans
   !important — même piège que la bannière promo ci-dessus) → les onglets
   héritaient du teal du site sur fond noir. Les <span>/<svg> ne sont pas
   ciblés par cette règle. */
html.is-app .its-app-tab .its-app-tab-ico,
html.is-app .its-app-tab .its-app-tab-label {
	color: var(--itsclt-vanilla, #F2E5D2);
}

/* Feedback immédiat au tap (avant même la navigation) */
html.is-app .its-app-tab:active {
	background: rgba(255, 255, 255, 0.08);
}

html.is-app .its-app-tab.is-active {
	color: var(--g-bright, #8ED968);
}

html.is-app .its-app-tab.is-active .its-app-tab-ico,
html.is-app .its-app-tab.is-active .its-app-tab-label {
	color: var(--g-bright, #8ED968);
}

/* Repère d'onglet actif : trait g-bright en haut, angle droit */
html.is-app .its-app-tab.is-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
	height: 3px;
	background: var(--itsclt-green, #8ED968);
}

html.is-app .its-app-tab-ico {
	display: block;
	flex: 0 0 auto;
}

html.is-app .its-app-tab-label {
	line-height: 1;
	max-width: 100%;
	font-size: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Paysage : marges latérales de safe area (21/09) ────────────────────────
   viewport-fit=cover (posé par its-app-boot.js pour le portrait) fait
   occuper TOUT l'écran à la page : en paysage l'encoche et les coins arrondis
   passent sur les côtés et mangeaient le contenu (accueil : « …CHES JOUEURS »
   coupé à gauche, bloc « À la une » sous l'encoche à droite). On réserve les
   insets gauche/droite sur le body : en portrait ils valent 0, sans effet.
   Les éléments fixes (barre d'onglets centrée, bande du haut) n'en dépendent
   pas. */
html.is-app body {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}
/* Bandeaux sombres pleine largeur (ticker, bannière Pronos) : ils sortent de
   la réserve du body pour aller d'un bord à l'autre, seul leur contenu reste
   dans la zone sûre. Sans ça ils apparaissaient encadrés de beige. */
html.is-app nav.scores-ticker,
html.is-app .its-app-home-promo {
	margin-left: calc(-1 * env(safe-area-inset-left, 0px));
	margin-right: calc(-1 * env(safe-area-inset-right, 0px));
}
html.is-app nav.scores-ticker {
	/* width:100% + max-width:100% posés par itsrugby-home.css : avec les marges
	   négatives, le ticker se DÉCALAIT à gauche au lieu de s'élargir (bande
	   beige à droite en paysage, 22/09). En auto, il prend toute la largeur. */
	width: auto;
	max-width: none;
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}
html.is-app .its-app-home-promo {
	padding-left: calc(14px + env(safe-area-inset-left, 0px));
	padding-right: calc(14px + env(safe-area-inset-right, 0px));
}

/* ── Largeur plafonnée + barre compacte au défilement (21/09) ──────────────
   Paysage : la barre s'étirait sur toute la largeur de l'écran (remontée
   Félix). Plafond 520 px, centrée : avec left+right posés, margin auto centre
   un élément fixe dès qu'il a une largeur maximale.
   Défilement vers le BAS : la barre se resserre (280 px au plus), perd ses
   libellés et une partie de sa hauteur, façon Instagram ; elle reprend sa
   taille dès qu'on remonte ou qu'on revient en haut. Classe posée par
   app-shell.js. Les libellés restent dans le DOM (opacity, pas display:none) :
   les lecteurs d'écran les lisent toujours. */
html.is-app .its-app-tabbar {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	transition: max-width 0.25s ease;
}
html.is-app .its-app-tab {
	transition: min-height 0.25s ease, padding 0.25s ease, gap 0.25s ease;
}
html.is-app .its-app-tab-label {
	max-height: 12px;
	transition: opacity 0.2s ease, max-height 0.25s ease;
}
html.is-app .its-app-tabbar.is-compact {
	/* 280 px : sur un iPhone en portrait la barre fait déjà ~366 px, un
	   plafond à 340 ne se voyait presque pas. 5 × 56 px, cible tactile OK. */
	max-width: 280px;
}
html.is-app .its-app-tabbar.is-compact .its-app-tab {
	min-height: 44px;
	padding-top: 6px;
	padding-bottom: 6px;
	gap: 0;
}
html.is-app .its-app-tabbar.is-compact .its-app-tab-label {
	opacity: 0;
	max-height: 0;
}
@media (prefers-reduced-motion: reduce) {
	html.is-app .its-app-tabbar,
	html.is-app .its-app-tab,
	html.is-app .its-app-tab-label {
		transition: none;
	}
}

/* ── Hub « Plus » (page /plus/) : raccourcis groupés, style app ──────────── */
.its-app-hub {
	display: block;
	max-width: 680px;
	margin: 0 auto;
}
.its-app-hub-group {
	margin-bottom: 18px;
	background: #fff;
	border: 1px solid var(--itsclt-vanilla, #E8D8C0);
}
.its-app-hub-title {
	padding: 10px 16px;
	background: var(--itsclt-vanilla, #F2E5D2);
	color: var(--itsclt-teal, #1C3D34);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.its-app-hub-item {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 15px 16px;
	border: 0;
	border-top: 1px solid var(--itsclt-vanilla, #E8D8C0);
	background: #fff;
	color: var(--itsclt-teal, #1C3D34);
	font-size: 15px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}
.its-app-hub-title + .its-app-hub-item {
	border-top: 0;
}
.its-app-hub-item::after {
	content: "›";
	margin-left: auto;
	color: var(--itsclt-sec, #9B9382);
	font-size: 20px;
	line-height: 1;
}
.its-app-hub-item:hover {
	background: rgba(28, 61, 52, 0.04);
}
/* En app : liste bord à bord (pleine largeur) */
html.is-app .its-app-hub {
	max-width: none;
}

/* ── Anti-zoom iOS au focus d'un champ ──────────────────────────────────── */
/* iOS/WKWebView zoome automatiquement quand on met le focus sur un champ dont
   la police fait < 16px, puis reste zoomé (→ page décalée, « slide » de 24px
   sur la connexion : inputs à 15px, 390×15/16 = 366). 16px = plus de zoom. */
html.is-app input,
html.is-app textarea,
html.is-app select {
	font-size: 16px;
}

/* ── Anti-débordement horizontal en app ─────────────────────────────────── */
/* Rien de plus large que l'écran : pubs (bannières px), embeds, images.
   Complète overflow-x:clip (qui coupe) en faisant plutôt rétrécir le contenu. */
html.is-app img,
html.is-app iframe,
html.is-app video,
html.is-app embed,
html.is-app object {
	max-width: 100%;
}

/* Page connexion : forcer UNE colonne en app, quelle que soit la largeur de
   layout de la WebView (si elle ne rend pas à device-width, la grille 2 col
   dépasserait l'écran). Sélecteur plus spécifique que la règle de base. */
html.is-app body.pmpro-login .its-login-shell {
	grid-template-columns: 1fr;
}

/* ── Masquage de la chrome « site web » + place pour la barre ────────────── */
html.is-app .site-header,
html.is-app .site-footer {
	display: none;
}

html.is-app body {
	/* Réserve sous le contenu : hauteur de barre (54) + décollement bas (12)
	   + respiration (12), au-dessus de la safe area. */
	padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

/* ── Espace perso : drill-down menu ↔ section (vue app) ───────────────────
   On ne restyle PAS la nav (le responsive mobile natif du thème s'en charge :
   colonne, pleine largeur, accordéon). On sépare juste en 2 vues via l'URL
   (classe posée par app-shell.js) pour ne pas empiler menu + contenu. */

/* VUE MENU (pas de section dans l'URL) : nav plein écran, contenu masqué */
html.is-app.its-app-espace-menu .its-account-content {
	display: none;
}

/* VUE SECTION (?compte_section=… présent) : contenu seul + retour, nav masquée */
html.is-app.its-app-espace-section .its-account-nav {
	display: none;
}
/* Sous-page = pas de gros hero, on maximise le contenu */
html.is-app.its-app-espace-section .page-hero {
	display: none;
}

/* ── Sections profil : formulaires façon app (partagé par toutes) ─────────
   Champs pleine largeur et tappables, CTA pleine largeur, champ tél empilé. */

/* Le cap desktop de 480px donne des champs « à moitié de page » → pleine largeur */
html.is-app .its-account-form,
html.is-app .its-account-form-sep {
	max-width: none;
}

/* Champs plus hauts (confort tactile) + 16px OBLIGATOIRE : la règle générique
   html.is-app input{16px} est battue en spécificité par .its-account-form
   input[type=…]{14px} du thème → les champs profil zoomaient encore au focus
   (cause du « champ à moitié de page » : la WebView reste zoomée). On remet
   16px ici avec une spécificité suffisante. */
html.is-app .its-account-form input[type="text"],
html.is-app .its-account-form input[type="email"],
html.is-app .its-account-form input[type="password"],
html.is-app .its-account-form input[type="tel"],
html.is-app .its-account-form input[type="number"],
html.is-app .its-account-form select,
html.is-app .its-account-form textarea,
html.is-app .its-account-phone-num,
html.is-app .its-account-phone-code {
	padding: 13px 14px;
	font-size: 16px;
}

/* Champ téléphone : code pays + numéro sur UNE seule ligne (côte à côte).
   Le code peut rétrécir (min-width:0) pour toujours tenir avec le numéro. */
html.is-app .its-account-phone-row {
	flex-direction: row;
	align-items: stretch;
}
html.is-app .its-account-phone-code {
	width: auto;
	max-width: none;
	flex: 0 1 150px;
	min-width: 0;
}
html.is-app .its-account-phone-num {
	flex: 1 1 auto;
	min-width: 0;
}

/* Bouton principal (Enregistrer, Mettre à jour…) : pleine largeur, centré */
html.is-app .its-account-form-actions {
	flex-direction: column;
	gap: 8px;
}
html.is-app .its-account-form-actions .its-btn {
	width: 100%;
	justify-content: center;
	padding: 14px 18px;
	font-size: 15px;
}

/* Champs en lecture seule (email affiché…) : pleine largeur cohérente */
html.is-app .its-account-readonly {
	width: 100%;
	box-sizing: border-box;
}

/* Barre « Retour » injectée (visible en vue section uniquement) */
.its-app-espace-back {
	display: none;
}
html.is-app.its-app-espace-section .its-app-espace-back {
	display: flex;
	align-items: baseline;
	gap: 10px;
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 14px 16px;
	background: #fff;
	border-bottom: 1px solid var(--itsclt-vanilla, #E8D8C0);
	text-decoration: none;
}
html.is-app .its-app-espace-back-arrow {
	font-weight: 500;
	color: var(--itsclt-teal, #1C3D34);
}
html.is-app .its-app-espace-back-title {
	color: var(--itsclt-sec, #9B9382);
	font-size: 14px;
}

/* Appui long sur un lien : neutralise le menu natif iOS (« Ouvrir dans Safari »,
   « Copier le lien », aperçu) qui faisait sortir de l'app. Uniquement en app.
   On ne touche PAS à -webkit-user-select → la sélection de texte reste possible.
   NB : complément natif recommandé côté app = WKWebView.allowsLinkPreview = false. */
html.is-app a {
	-webkit-touch-callout: none;
}

/* ── Home app : PAS de réordonnancement CSS ───────────────────────────────────
   03/08 : l'ordre des sections (Ligne 22 en 2e, compétitions groupées…) a été
   déplacé dans l'option its_home_blocks côté serveur → web et app partagent le
   même DOM, l'admin des blocs est la seule source de vérité. L'ancien
   réordonnancement flex gaté .is-app (commit 12f10ee) est retiré : il aurait
   écrasé silencieusement tout réordonnancement fait en admin. */

/* ── Safe area haute : RIEN côté app-shell ────────────────────────────────
   Depuis le build 8 (ios.contentInset:'never'), la webview couvre tout l'écran
   et l'encoche est gérée selon le principe du brief du 16/09 : le padding
   safe-area est porté par l'élément qui porte le FOND (cf. .site-header dans
   itsrugby-common.css), jamais par le body ni par un aplat séparé — les deux
   recréent une bande (verte avec l'aplat, vanilla sans, constaté en prod).
   Supprimés le 16/09 : `html.is-app body{padding-top:env(...)}` et l'aplat
   fixe #its-app-safetop (+ son JS de mesure). Ne pas les remettre. */

/* NEUTRALISATION des règles supprimées ci-dessus, toujours présentes dans le
   <style id="wpr-usedcss"> des ~330 000 pages dont le Used CSS a été généré
   avant le 16/09 (constaté sur la home .fr : réserve safe area comptée deux
   fois, bande teal + bloc vide ~50 pt). Vider le Used CSS en masse est exclu
   (incident du 22/07) : ce fichier est hors RUCSS et servi en entier, donc ces
   annulations s'appliquent partout immédiatement. Le :not(#its-app-x) monte la
   spécificité au-dessus de `html.is-app body` quel que soit l'ordre des feuilles.
   À retirer quand le Used CSS aura été régénéré partout. */
html.is-app:not(#its-app-x) body {
	padding-top: 0;
}
html.is-app:not(#its-app-x) body::after {
	content: none;
	display: none;
}

/* Home : le header étant masqué en app, c'est le TICKER qui porte le fond en
   haut de page. Il prend donc la réserve de safe area : son fond #1A1A1A
   remonte derrière l'heure et la batterie, et seul son CONTENU (compteurs,
   scores) descend juste sous l'encoche. Sans ça, l'heure s'affichait par-dessus
   « 71 311 FICHES JOUEURS ».
   Pas de risque d'écrasement : le ticker n'a qu'un min-height (56px), la
   réserve s'ajoute à sa hauteur au lieu de rogner son contenu.
   Spécificité : itsrugby-home.css déclare `.its-v2 nav.scores-ticker{padding:0}`,
   d'où le préfixe html.is-app qui passe devant. */
html.is-app .its-v2 nav.scores-ticker,
html.is-app nav.scores-ticker {
	padding-top: env(safe-area-inset-top, 0px);
}

/* Même principe pour les autres types de page : c'est le PREMIER BLOC porteur
   de fond qui s'étire derrière l'heure (mesuré le 16/09 sur 13 types de page,
   en 390 px, mode app). On passe par une bordure de la même couleur que le
   fond plutôt que par le padding : ces blocs ont des paddings différents selon
   la feuille (common/team/bar/espace…), la bordure s'ajoute sans y toucher.
   Visuellement identique : même teal, contenu décalé d'exactement l'encoche.

   • Fil d'Ariane teal — archives Matchs/Compétitions/Équipes/Joueurs, fiches
     match/équipe/compétition/joueur, recherche. Les ARTICLES sont exclus : leur
     fil d'Ariane est en absolute par-dessus la photo et gère déjà l'encoche
     (itsrugby-article.css). Remplace le liseré 1px (séparateur d'avec le header,
     masqué en app) posé par team/bar/espace.css. */
html.is-app body:not(.single-post) nav.breadcrumb {
	border-top: env(safe-area-inset-top, 0px) solid var(--itsclt-teal, #1C3D34);
}

/* • Barre Retour fabriquée par app-shell.js — pages sans fil d'Ariane (Pronos,
     Aide, pages légales). Jamais présente en même temps qu'un fil d'Ariane. */
html.is-app .its-app-topbar {
	border-top: env(safe-area-inset-top, 0px) solid var(--itsclt-teal, #1C3D34);
}

/* • Hub « Compte » (/plus/) : aucun bloc de fond en tête, le titre est posé sur
     le beige et l'heure (blanche) y serait illisible. Page courte : une bande
     teal en tête y fait office de barre, comme partout ailleurs. */
html.is-app body:has(.its-app-hub) {
	border-top: env(safe-area-inset-top, 0px) solid var(--itsclt-teal, #1C3D34);
}
/* Le titre du hub démarre pile au bord de la bande (mesuré : 46 px pour une
   encoche de 47) : un peu d'air pour qu'il ne colle pas au teal. */
html.is-app body:has(.its-app-hub) #main-content {
	padding-top: 14px;
}

/* Éléments COLLANTS au haut de l'écran : à top:0 ils se fixaient sous l'heure
   pendant le défilement. On les fait coller juste sous l'encoche.
   (Les sticky internes à une liste — .its-rows__group, .nav-dropdown-sep —
   collent à leur conteneur, pas à l'écran : non concernés.) */
html.is-app .nav-interne,
html.is-app .its-stickybar,
html.is-app.its-app-espace-section .its-app-espace-back {
	top: env(safe-area-inset-top, 0px);
}

/* Bande FIXE derrière l'heure et l'encoche. Les règles ci-dessus ne teintent
   que le PREMIER bloc de la page : dès qu'on défile, le contenu passait sous
   l'horloge (remontée Félix du 21/09 sur une fiche match : en-tête et onglets
   visibles derrière l'heure). La bande reste en place et masque ce qui défile.
   Hauteur 0 hors iOS (env() = 0) → sans effet sur Android et sur le web.
   Accrochée à html::before et non à body::after, neutralisé plus bas pour les
   anciens Used CSS. Sous la barre de progression (10000), au-dessus du reste. */
html.is-app::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: env(safe-area-inset-top, 0px);
	/* NOIR partout, et pas le teal du menu (Félix, 25/09 : « juste la bande
	   noire normale, pas de teal au-dessus »). La bande est arrivée dans l'app
	   ce jour-là seulement, trois jours après avoir été écrite : le ?ver figé
	   de itsrugby-common.css retenait toutes les feuilles. Découverte d'un
	   coup, la bande teal se lisait comme un bandeau ajouté au-dessus du site.
	   Le noir se confond avec le bandeau des annuaires en haut de page et
	   reste discret ailleurs, ce que le teal ne faisait pas.
	   ⚠️ Il y avait ici une exception `html.is-app:has(body.home)::before` pour
	   l'accueil : elle ne prenait PAS dans la webview iOS, d'où la bande verte
	   au-dessus du bandeau noir. Ne pas réintroduire de `:has()` sur cette
	   bande : si une page doit un jour retrouver une autre couleur, l'écrire
	   dans une feuille qui n'est chargée QUE sur cette page. */
	background: #1A1A1A;
	z-index: 9995;
	pointer-events: none;
}

/* La barre de progression est fixe elle aussi, donc déjà sous l'horloge :
   `top: 0` la place pile en dessous, où elle doit être. */
html.is-app .its-app-progress {
	top: 0;
}

/* ── Bouton « Retour » (app uniquement) ─────────────────────────────────────
   Le header du site est masqué en app et iOS n'active pas le geste de retour
   au bord de l'écran (allowsBackForwardNavigationGestures) : depuis une fiche
   joueur ouverte via la compo d'un match, il n'y avait aucun moyen de revenir
   à la feuille de match. Affiché seulement quand app-shell.js a vérifié qu'il
   y a un historique et qu'on n'est pas sur une racine d'onglet — et le JS ne
   retire l'attribut `hidden` qu'en mode app (cf. commentaire côté PHP : c'est
   ce qui protège le web quand le used-css est antérieur à cet ajout).
   Habillage repris de la barre de nav des articles (itsrugby-article.css,
   `.bc-cat`) : pastille carrée 36×36 translucide, bordure vanilla à 18 %,
   chevron vert flash. Le libellé « Retour » reste dans le DOM pour les
   lecteurs d'écran mais passe en font-size:0, comme là-bas. */
.its-app-back {
	display: none;
}

html.is-app .its-app-back.is-ready {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	font-size: 0; /* masque « Retour » à l'œil, pas aux lecteurs d'écran */
	background: rgba(242, 229, 210, 0.12);
	border: 1px solid rgba(242, 229, 210, 0.18);
	color: var(--g-bright, #8ED968);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	/* supprime le délai de tap ~300 ms → clic instantané */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

html.is-app .its-app-back.is-ready:active {
	background: rgba(242, 229, 210, 0.2);
}

/* Couleur portée aussi par l'icône : sur les pages où .its-v2 englobe le
   footer, la charte force color:inherit sur certains descendants (même piège
   que les onglets et la bannière promo). */
html.is-app .its-app-back .its-app-back-ico {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--g-bright, #8ED968);
}

/* Le bouton vit toujours dans une barre : soit le fil d'Ariane de la page, soit
   celle que le JS fabrique quand il n'y en a pas. Donc dans le flux, jamais
   par-dessus le contenu — et l'alignement suit la gouttière du conteneur,
   comme les pastilles des articles. Le `position: fixed` de repli n'existe
   plus : le style de la barre article est le style partout (arbitrage Félix
   11/08, un fond noir opaque avait été refusé). */
html.is-app .breadcrumb.has-app-back .container {
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
}

/* Barre allégée, même logique que sur les articles : la racine « It's Rugby »
   est déjà l'onglet Accueil de la barre du bas, et les séparateurs n'ont plus
   rien à séparer. Le titre courant ne disparaît QUE s'il reste un libellé de
   section derrière (fiches → « ‹ Joueurs », le titre est repris en H1 juste
   dessous) ; sur une page à un seul niveau il devient le titre de la barre
   (« ‹ Carte des clubs »), sinon elle serait vide. */
html.is-app .breadcrumb.has-app-back .container > a:first-of-type,
html.is-app .breadcrumb.has-app-back .container > span[aria-hidden="true"],
html.is-app .breadcrumb.has-app-back .container > a ~ a ~ [aria-current="page"] {
	display: none;
}

html.is-app .breadcrumb.has-app-back .container > [aria-current="page"] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Même allègement SANS bouton Retour (fiche ouverte depuis un onglet, donc
   sans historique) : le fil complet « It's Rugby › Matchs › Union Bordeaux
   Bègles - Stade Français (20 septembre 2026) » tenait sur trois lignes
   (remontée Félix du 21/09). En app : racine et 1er séparateur retirés, une
   seule ligne, titre courant tronqué. Articles exclus (fil d'Ariane propre,
   itsrugby-article.css). */
html.is-app body:not(.single-post) nav.breadcrumb .container {
	white-space: nowrap;
	overflow: hidden;
}
html.is-app body:not(.single-post) nav.breadcrumb .container > a:first-of-type,
html.is-app body:not(.single-post) nav.breadcrumb .container > a:first-of-type + span[aria-hidden="true"] {
	display: none;
}
html.is-app body:not(.single-post) nav.breadcrumb .container > [aria-current="page"] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Articles : pastille de rubrique collée sous le bouton « ‹ » et titre collé
   à « Suivant » (remontée Félix du 21/09). Les boutons sont posés sous
   l'encoche (itsrugby-article.css : top = inset + 8 px, soit 55 à 91 px sur
   iPhone), mais le contenu de la photo démarrait à 58 px du HAUT DE L'ÉCRAN :
   cette cote supposait la réserve de safe area du body, retirée le 16/09
   (neutralisation plus bas). On y ajoute donc l'encoche, et au voile sombre
   aussi. Ici et pas dans itsrugby-article.css : celle-ci passe par RUCSS, les
   articles déjà optimisés ne verraient jamais la correction. Le :not(#its-app-x)
   passe devant la règle d'origine quel que soit l'ordre des feuilles. */
html.is-app:not(#its-app-x) body.single-post .article-hero-overlay {
	padding-top: calc(env(safe-area-inset-top, 0px) + 58px);
}
html.is-app:not(#its-app-x) body.single-post .article-hero::before {
	height: calc(env(safe-area-inset-top, 0px) + 96px);
}
/* Paysage et tablette (> 680 px) : le hero repassait en mise en page bureau,
   hauteur fixe et contenu aligné en BAS de l'overlay en absolute. Un titre
   long débordait alors vers le haut, pastille de rubrique sous le bouton
   « ‹ » (remontée Félix du 21/09, iPhone en paysage). En app, on garde à
   toutes les largeurs l'empilement du mobile (itsrugby-article.css, < 768 px) :
   overlay dans le flux, le hero grandit avec son contenu. */
html.is-app:not(#its-app-x) body.single-post .article-hero {
	min-height: 0;
	display: block;
}
html.is-app:not(#its-app-x) body.single-post .article-hero-img {
	position: absolute;
	inset: 0;
	height: auto;
}
html.is-app:not(#its-app-x) body.single-post .article-hero-overlay {
	position: relative;
	inset: auto;
	padding-bottom: 20px;
}

/* Barre fabriquée par le JS pour les pages sans fil d'Ariane (/pronos/,
   /aide/, pages légales…) : mêmes cotes et même fond que le fil d'Ariane du
   site, pour qu'aucune page ne détonne. Injectée côté client → app only, et à
   safelister RUCSS (invisible à la génération). */
html.is-app .its-app-topbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--itsclt-teal, #1C3D34);
	white-space: nowrap;
	overflow: hidden;
}

html.is-app .its-app-topbar-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: rgba(242, 229, 210, 0.75);
	font-size: 12px;
}