/* ============================================================
   stylerespon.css - Cyber Expert
   Adaptation mobile / tablette.
   Au-dessus de 1010px : rien ne change, le site reste comme avant.
   Ce fichier doit être chargé EN DERNIER (après cms.css et
   informatique.css) : voir template.php.
   ============================================================ */

/* ------------------------------------------------------------
   TABLETTE et petits écrans (moins de 1010px)
   ------------------------------------------------------------ */
@media screen and (max-width: 1010px) {

/* Images et vidéos : jamais plus larges que leur conteneur */
#main img, #main iframe, #main object, #main embed, #main video { max-width: 100%; }
#main img { height: auto; }

/* La page prend toute la largeur au lieu des 1000px fixes */
#page, #top, #mid, #bot { width: auto; }
#page { border: 0 none; margin: 0; overflow: visible; }

/* --- Bandeau du haut (deco/top.jpg) ---
   L'image fait 1000 x 208 : le haut (150px) est la photo,
   le bas est la bande du menu + le haut du cadre blanc.
   On l'étire à la largeur de l'écran et on ne garde que la photo
   (150/1000 = 15% de la largeur). */
#top {
	height: 15vw;
	background-size: 100% auto;
	background-position: left top;
	background-color: #437ABB;
	position: relative;
	overflow: hidden;
}
#logo { margin: 0.2vw 0 0 1.5vw; }
#logo img { width: 36vw; height: auto; }   /* 360px sur 1000px */
#top h1 { display: none; }                  /* le titre "." ne sert à rien */
#top h2 {
	position: absolute;
	right: 6vw;
	bottom: 1.2vw;
	padding: 0;
	font-size: 1.3vw;
}

/* --- Menu horizontal : il n'est plus posé sur l'image --- */
#menu_horizontal {
	position: static;
	margin: 0;
	padding: 4px 0;
	background-color: #437ABB;
	text-align: center;
}
#menu_horizontal a { display: inline-block; margin: 2px 4px; padding: 4px 8px; }
#menu_horizontal li.zli1 { display: inline-block; }   /* permet le retour à la ligne entre les rubriques */

/* --- Zone centrale : menu latéral + contenu côte à côte --- */
#mid {
	background-image: none;          /* deco/mid.jpg est prévu pour 1000px */
	background-color: #437ABB;
	display: flex;
	padding: 0 10px 10px 0;
}
#side { float: none; width: 190px; flex-shrink: 0; }
#oppside { float: none; }
#main {
	float: none;
	width: auto;
	flex: 1;
	min-width: 0;                    /* évite que le contenu élargisse la page */
	background-color: #FFFFFF;
	border-radius: 8px;
	padding: 10px 15px;
	overflow-x: auto;                /* un tableau trop large défile dans le cadre */
}
#break { display: none; }

/* --- Pied de page --- */
#bot { padding: 10px; border-bottom: 0 none; background-image: none; }   /* deco/bot.jpg (bas du cadre blanc) est prévu pour 1000px */

/* --- Éléments à largeur fixe dans les pages de contenu --- */
#main table { max-width: 100%; }
.titrecadre { padding-right: 5px; }
.page_script_bg, .fond_menu_tabs, .tab_container, .tab_content_bg,
.tabs_btm, ul#tabing, .achat_fond p { width: auto; max-width: 100%; }
}


/* ------------------------------------------------------------
   TÉLÉPHONE (moins de 640px)
   ------------------------------------------------------------ */
@media screen and (max-width: 640px) {

body, td { font-size: 11pt; }        /* un peu plus grand pour lire au doigt */
h1 { font-size: 15pt; }
h2 { font-size: 13pt; }

/* Bandeau : hauteur fixe de 90px, on montre la partie gauche
   de la photo (celle qui est derrière le logo) */
#top {
	height: 90px;
	background-size: auto 125px;     /* 208 x 0.6 : la photo fait 90px */
	background-position: left top;
}
#logo { margin: 2px 0 0 8px; }
#logo img { width: 207px; }          /* 360 x 0.6 (hauteur ~86px) */
#top h2 { display: none; }

/* Menu horizontal : boutons plus grands pour le doigt */
#menu_horizontal { font-size: 12pt; }
#menu_horizontal a { padding: 6px 10px; white-space: nowrap; }   /* pas de coupure dans un intitulé */

/* Le menu latéral passe au-dessus du contenu, sur toute la largeur */
#mid { display: block; padding: 0 0 10px 0; }
#side { width: auto; padding: 0 8px 6px 8px; text-align: center; }
#side ul.zul { margin: 0; }
#side p { margin: 0; }               /* supprime les paragraphes vides du panneau latéral */
#side li { display: inline-block; margin: 2px; }
#side li.zli1, #side li.zli5 { display: none; }   /* comme sur ordinateur */
#side li a {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 5px;
}
#main {
	margin: 0 6px;
	padding: 10px;
	text-align: left;                /* le justifié fait des trous sur petit écran */
}

/* Images posées à gauche ou à droite du texte : centrées */
#main img[align], #main img[style*="float"] {
	float: none !important;
	display: block;
	margin: 0 auto 10px auto !important;
}
}