/*==========================================================================*/
/*=========================== AFFICHAGE RESPONSIVE =========================*/
/*==========================================================================*/

/*=============================== TABLETTES ================================*/

@media (min-width: 701px) and (max-width: 1200px) {

    /* Portrait retiré : Identification et Access se partagent ses 45 % */
    main {
        grid-template-columns: 22.5% 22.5% 55%;
        grid-template-rows:
            minmax(270px, auto)
            minmax(90px, auto)
            minmax(190px, auto)
            minmax(70px, auto)
            minmax(170px, auto)
            minmax(210px, auto);
        grid-template-areas:
            "identification access skill"
            "contact contact skill"
            "contact contact biometric"
            "contact contact transporter"
            "holodeck holodeck transporter"
            "holodeck holodeck activity"; }

    .portrait { display: none; }

    /* Universal Translator retiré ; clavier et commandes récupèrent l'espace */
    .comm-translator { display: none; }

	.contact-console-body { grid-template-columns: 42fr 58fr; }

	.comm-action {
        font-size: 10px;
        letter-spacing: 0;
        padding-left: 7px;
        padding-right: 5px;
        gap: 5px; }

    /* Holodeck : 4 cartes seulement */
    .holodeck-images {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr)); }

    .holodeck-card:nth-child(n+5) { display: none; }

    /* Transporter : 4 destinations seulement */
    .transporter-image-row > .destination-item:nth-child(n+5) { display:none; }
	/* Transporter : le doigt sur la bulle */
	.destination-pointer-touch { display:inline; }

	/* Traducteur universel */
	.mobile-translator {
		display: block;
		margin: 16px 3vw 8px;
		text-align: center; }

	.mobile-translator-title {
		margin-bottom: 8px;
		color: var(--bleu-ciel);
		font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase; }

	.mobile-translator-flags {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 12px; }

	.mobile-translator-flag {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px; }

	.mobile-translator-flag a,
	.mobile-translator-flag img,
	.mobile-translator-flag .translator-light { display: block; }

	.mobile-translator-flag img {
		width: 32px;
		height: auto; }

}


/*================================ MOBILES ================================*/

@media (max-width: 700px) {

	/* Identification : OFFLINE s'affiche dans le bandeau, à droite du titre */
	.identification .name-offline-label { display:none !important; }
	.identification .mobile-offline-title {
		display:none;
		margin-left:auto;
		color:#ff3030;
		font-family:"Courier New",monospace;
		font-size:12px;
		font-weight:bold;
		letter-spacing:1px;
		text-shadow:0 0 6px rgba(255,48,48,.85); }
	.identification .mobile-offline-title.is-visible { display:inline-block; }


    body { overflow-x: hidden; }

	.page {
        min-height: 100vh;
        display: block; }
		
	.site-header {
		margin: 0 12px;
		padding: 4px 0 8px; }

	.header-title {
		font-size: 14px;
		letter-spacing: .7px; }

	.header-title-row {
		width: fit-content;
		max-width: 70vw;
		gap: 5px; }

	.header-info {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 45px;
		height: 45px;
		min-width: 40px;
		min-height: 40px;
		flex: 0 0 24px;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		box-sizing: border-box;
		font-weight: 800;
		font-size: 30px; }
	
	/* Pages infos */
	.info-popup { align-items: flex-start; padding-top: 60px; }
	
		/* Boutons de navigation entre les pages sur une ligne */
		.info-popup-actions {
			flex-wrap:nowrap;
			gap: 6px; }

				.info-popup-actions a {
					padding: 4px 6px;
					font-size: 14px;
					white-space: nowrap; }
		
				.info-popup-actions a:not(.info-popup-close) {
					padding: 4px 6px;
					font-size: 10px;
					white-space: nowrap; }

		/* Les boutons actifs ne sont pas affichés sur mobile */
		#apropos:target .info-popup-actions a[href$="#apropos"],
		#quisuisje:target .info-popup-actions a[href$="#quisuisje"],
		#mentions:target .info-popup-actions a[href$="#mentions"] {
			display: none; }

	/* Titres des infos (à propos, qui suis-je, etc.) */
	.info-popup-card h2 { font-size: 18px; }
	
	/* Image tapered non affichée */
	.paragAvecImage-imagecontainer { display: none; }
	.paragAvecImage { flex-direction: column; }

    /* Logo Optionweb MD */
    .header-logo {
        height: 65px;
        margin: 4px 8px -10px 4px;
        object-fit: contain; }

			/* Libellé du logo non affiché */
			.logo-intit, #skill-logo-credit { display: none; }

    /*
       Deux demi-colonnes uniquement pour la première ligne ;
       tous les autres blocs occupent toute la largeur
    */
    main {
		margin: 0 10px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows:
			270px
			210px
			auto
			360px
			250px;
		grid-template-areas:
			"identification access"
			"biometric biometric"
			"skill skill"
			"contact contact"
			"transporter transporter"; }

    .portrait, .holobrief-zone, .activity { display: none; }

    .identification { grid-area: identification; }
    .access         { grid-area: access; }
    .skill          { grid-area: skill; }
    .biometric      { grid-area: biometric; }
    .contact        { grid-area: contact; }
    .transporter    { grid-area: transporter; }

    /* Chaque bloc occupe exactement sa ligne de grille mobile */
    .identification, .access, .skill, .biometric, .contact, .transporter {
        height: 100%;
        min-height: 0; }


	/* Ligne d'avertissement */
	.mobile-interface-warning {
		display:block;
		width:100%;
		max-width:100vw;
		margin-top: 10px;
		margin-bottom: 10px;
		overflow:hidden;
		color:var(--orange);
		font-family:"Courier New",monospace;
		font-size:20px;
		line-height:18px;
		white-space:nowrap;
		text-indent:100%;
		animation:mobileInterfaceWarning 15s linear infinite; }

			@keyframes mobileInterfaceWarning {
				from { text-indent:100%; }
				to { text-indent:-170%; } }

	#transporter-websites-toggle {
		pointer-events:none;
		cursor:default; }

			.skill .transporter-websites-prompt,
			.transporter .transporter-websites-prompt { display:none; }


    /* Ligne Identification / Access : titres et contenus plus compacts */
    .identification .titre-bloc, .access .titre-bloc { min-width: 0; }

    .identification .titre-bloc span, .access .titre-bloc span { font-size: clamp(10px, 3vw, 14px); }
	.identification-contenu, .access-contenu { min-width: 0; }
	.small-titles, .small-values { overflow-wrap: anywhere; }

	/* Lien Contact sur Identification : */
	.mobile-contact {
		display:inline-block;
		margin-top: 10px;
		margin-bottom: 20px;
		color:var(--vert-fluo);
		font-family: "Arial Narrow",Arial,sans-serif;
		font-size:12px;
		font-weight:bold;
		text-decoration:none;
		text-transform:none;
		white-space:nowrap; }

    /* Biometric plus compact sur mobile */
    .biometric { min-height: 0; }
    .contact { min-height: 0; }

		/* Résultat scans biométriques (match) */
		.standard-scan-status, .retinal-status { font-size: 24px; }

		/* Texte machine à écrire résultats scans biométriques */
		.standard-scan-text, .retinal-text {
			font-size: 15px;
		line-height: 1.1; }
		
		
	/* Formulaire de contact (subspace message) :
	   remplace uniquement Contact + Transporter */
	main.contact-form-expanded .contact {
		grid-column: 1 / -1;
		grid-row: 4 / 6;
		height: 100%;
		min-height: 0;
		z-index: 12; }

			main.contact-form-expanded .transporter { display: none; }

			main.contact-form-expanded .contact .comm-contact-form {
				top: 70px;
				left: 4%;
				width: 92%;
				height: calc(100% - 76px);
				overflow-y: auto; }

    
	/* Universal Translator retiré ; clavier et boutons occupent toute la console */
    .comm-translator { display: none; }

    .contact-console-body {
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
        gap: 6px; }
		
	
	/* Keypad */
	.comm-keypad {
		gap: 10px;
		left: 0px;
		right: 10px; }		
	.comm-key {
		width: 40px;
		height: 40px; }
	
	/* Boutons d'actions */
	.comm-actions {
		height: 20px;
		gap: 0px; }
	.comm-action { font-size: 11px; }
	

	/* Skill : 'Design & PAO' non affiché */	
	#designskill1 { display: none; }
	#designskill2 { display: none; }

    /* Skill : le bloc entier tient sur la largeur mobile */
    .skill {
        height: auto;
        min-height: 0; }

			.skill-matrix {
				position: relative;
				inset: auto;
				width: 92%;
				margin: 74px 4% 12px;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				grid-template-rows: auto auto; }

			.skill-column { padding-bottom: 12px; }
			.skill-column:nth-child(2n) { border-right: 0; }
			
			/* Pas de briques sur mobile */
			.skill-level-image, .skill-level-image img  { display:none; }
			

	/* SERVICE & SKILL : affichage détail sur mobile */

	.skill-matrix.skill-detail-active {
		grid-template-columns: 1fr;
		grid-template-rows: max-content max-content;
		align-content: start; }

		.skill-detail p, .skill-intro { font-size: 14px; }

		/* Le h3 sélectionné + ses puces occupent toute la première ligne */
		.skill-matrix.skill-detail-active .skill-column.skill-selected {
			display:block;
			grid-column:1;
			grid-row:1;
			width:100%;
			border-right:0; }

		/* Le texte occupe toute la deuxième ligne */
		.skill-matrix.skill-detail-active .skill-detail.skill-detail-visible {
			display:block;
			grid-column:1;
			grid-row:2;
			width:100%;
			padding:18px 28px 20px 18px;
			overflow:visible; }


	/* Icônes désactivés (Skill et Transporter) */
	.skill .titre-bloc > img,
	.transporter .titre-bloc > img {
		pointer-events: none;
		cursor: default; }

			/* Prompts induits non affichés */
			.transporter .transporter-websites-prompt { display: none; }

			/* Liens à la place */
			.mobile-title-link {
				display:inline-block;
				margin-left:auto;
				color:var(--orange);
				font-family:"Courier New",monospace;
				font-size:14px;
				font-weight:normal;
				text-decoration:none;
				text-transform:none;
				white-space:nowrap; }

			main.websites-expanded .transporter .mobile-title-link { display:none; }

    /* Transporter : 4 destinations seulement */
    .transporter { min-height: 250px; }


	/* Défilement horizontal des destinations */

	.transporter { min-height: 250px; }

	.transporter-image-row {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		gap: 6px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		left: 4%;
		right: 4%; }

			/* 4 images visibles simultanément */
			.transporter-image-row .destination-item {
				flex: 0 0 calc((100% - 18px) / 4);
				min-width: calc((100% - 18px) / 4);
				height: 100%;
				scroll-snap-align: start; }

			/* Toutes les destinations restent affichées */
			.transporter-image-row > .destination-item:nth-child(n+5) { display: flex; }

			/* Masque visuellement la barre de scroll */
			.transporter-image-row { scrollbar-width: none; }
			.transporter-image-row::-webkit-scrollbar { display: none; }


    .transporter-image-row { gap: 6px; }

			/* Galerie Transporter : reste entièrement dans la fenêtre mobile */
			main.websites-expanded .transporter {
				position: fixed;
				inset: 10px;
				width: auto;
				height: auto;
				min-height: 0;
				grid-column: auto;
				grid-row: auto;
				z-index: 6000; }

			main.websites-expanded .skill,
			main.websites-expanded .biometric,
			main.websites-expanded .activity { display: none; }

	.destination-pointer-touch { display:inline; }


	/* Traducteur universel */
	.mobile-translator {
		display: block;
		margin: 16px 10px 8px;
		text-align: center; }

	.mobile-translator-title {
		margin-bottom: 8px;
		color: var(--bleu-ciel);
		font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: bold;
		text-transform: uppercase; }

	.mobile-translator-flags {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 8px; }

	.mobile-translator-flag {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px; }

	.mobile-translator-flag a,
	.mobile-translator-flag img,
	.mobile-translator-flag .translator-light { display: block; }

	.mobile-translator-flag img {
		width: 50px;
		height: auto; }

    /* Footer */
    .responsive-footer {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 16px;
        margin: 18px 10px 12px;
        padding: 12px 8px;
        border-top: 1px solid rgba(117,215,240,.35);
        font-family: "Courier New", monospace;
        font-size: 16px;
        text-align: center; }

    .responsive-footer a {
        color: var(--bleu-ciel);
        text-decoration: none; }

    .responsive-footer a:hover { color: var(--orange); }
}

/* Transporter : bulle mobile ancrée à l'image sans être coupée par le défilement */
@media (max-width: 1100px) {
	.destination-item.destination-armed .destination-survol {
		position:fixed;
		left:var(--destination-bubble-left, 50vw) !important;
		right:auto !important;
		top:var(--destination-bubble-top, 50vh) !important;
		--survol-x:-50%;
		max-width:calc(100vw - 24px);
		white-space:normal;
		box-sizing:border-box;
		z-index:7000; }
}