@charset "utf-8";
/* Tatoo.css - reproduction du style d'origine, graphismes recréés en CSS (aucun lien externe) */

body
{
    background-color:#FFFFFF;
    padding: 0px;
    margin-top:5px;
    border: none;
    font-family: arial,verdana,helvetica;
	font-size: 11px;
	color: #000000;
}

a { text-decoration:none; color:#000; }

/* ---- barres dégradées vert -> orange (ex-fildariane / fildubas) ---- */
.chemin
{
	background-image: linear-gradient(to right, #fab71d 0%, #f6a800 30%, #213769 100%);
	width:100%;
	padding:8px 25px 6px 25px;
	font-size: 11px;
	font-weight:bold;
	color: #000000;
}

.zoneCentre { background-color:#000000; padding:12px; }

.liensbas
{
	background-image: linear-gradient(to right, #fab71d 0%, #f6a800 30%, #213769 100%);
	width:100%;
	padding:9px 25px 8px 25px;
	font-size: 11px;
	font-weight:bold;
	color: #FFFFFF;
}

/* ---- cartouches de titre ---- */
.topMenu
{
	background-color:#fab71d;
	padding-left:18px;
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
}

.topActu
{
	background-image: linear-gradient(to right, #f9b000 0%, #ed7000 100%);
	padding-left:18px;
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
}

.topContenu
{
	background-image: linear-gradient(to bottom, #3a3a3a 0%, #000000 100%);
	padding-left:18px;
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
	color:#FFFFFF;
}

/* ---- colonnes ---- */
.tdContenu
{
	border-left: 1px #979797 solid;
	border-right: 1px #979797 solid;
	border-bottom: 1px #979797 solid;
	background-color:#ffffff;
}

.tdActu
{
	border-left: 1px #979797 solid;
	border-right: 1px #979797 solid;
	border-bottom: 1px #979797 solid;
	background-color:#4d4d4d;
}

.actuTitre { font-weight:bold; font-size:11px; }
.actuResume { font-weight:bold; font-size:11px; color:#FFFFFF; }
.actuFond { background-color:#4d4d4d; }

.tdMenu
{
	border-left: 1px #979797 solid;
	border-right: 1px #979797 solid;
	border-bottom: 1px #979797 solid;
	background-color:#000000;
	font-size:11px;
	font-weight:bold;
	padding-left:10px;
	vertical-align:top;
}

/* ---- items de menu ---- */
.itemMenuNiv1Prem { border-bottom: 1px #2a2a2a solid; color:#e9fb02; }
.itemMenuNiv1PremOn { border-bottom: 1px #2a2a2a solid; color:#EE446B; }
.itemMenuNiv1 { padding-top:7px; border-bottom: 1px #2a2a2a solid; color:#e9fb02; }
.itemMenuNiv1On { padding-top:7px; border-bottom: 1px #2a2a2a solid; color:#EE446B; }
.itemMenuNiv2 { padding-top:7px; border-bottom: 1px #2a2a2a solid; color:#eea21f; font-size:10px; font-weight:normal; padding-left:10px; }
.itemMenuNiv2On { padding-top:7px; border-bottom: 1px #2a2a2a solid; color:#EE446B; font-size:10px; font-weight:normal; padding-left:10px; }

.txtOrange { color:#eea21f; }
.txtVert { color:#c8da1f; }
.txtBlanc { color:#FFFFFF; }

.textbox { width:200px; font-size:10px; font-family:Arial, Helvetica, sans-serif; }
.FormulaireChamp { width:70%; text-align:right; }
.FormulaireLabel { width:30%; text-align:left; vertical-align:top; left:10px; float:left; }
.titre1 { font-size:14px; font-weight:bold; color:#F9BA00; }
.txt10px { font-size:10px; }
.txt12px { font-size:12px; }
.txt8px { font-size:10px; }

/* ============ structure / mise en page ============ */
*{box-sizing:border-box;}
.page{width:100%;max-width:1000px;margin:0 auto;}
.banner img{display:block;width:100%;height:auto;}
table.layout{width:100%;border-collapse:collapse;}
table.layout > tbody > tr > td{vertical-align:top;padding:0;}
.colMenu{width:150px;}
.colActu{width:200px;}
.topMenu,.topActu,.topContenu{height:26px;line-height:26px;}
.menuBody{padding:6px 10px 14px;}
.menuBody a{display:block;color:inherit;}
.menuBody .itemMenuNiv1 a:hover,.menuBody .itemMenuNiv1Prem a:hover,.menuBody .itemMenuNiv2 a:hover{color:#EE446B;}

/* puces carrées recréées en CSS */
.sq{display:inline-block;width:7px;height:7px;margin-right:6px;vertical-align:middle;}
.sq-menu{background:#eea21f;}
.sq-actu{background:#eea21f;}
.sq-bar{background:#ffffff;border:1px solid #7a7a00;}

.contenu{padding:16px 20px;min-height:380px;}
.actuBody{padding:12px;}
.actuItem{padding:8px 0 14px;}
.actuItem img.thumb{display:block;border:1px solid #fff;margin:4px 0;max-width:100%;}
.info{color:#c8da1f;font-weight:bold;}
.note{font-size:10px;color:#333;margin-top:14px;}
.heroHome{background-image:url('images/imageducentre.jpg');background-repeat:no-repeat;background-position:center top;background-size:cover;background-color:#bcd3e6;min-height:420px;padding:20px;}
.heroBox{background:rgba(255,255,255,.72);padding:18px;max-width:560px;}
.heroBox h2{font-size:14px;color:#000;margin:0 0 10px;}
.pager{float:left;margin:0 16px 8px 0;}
.specs{border-collapse:collapse;margin:10px 0;width:100%;}
.specs td{border-bottom:1px solid #cfcfcf;padding:4px 8px;font-size:11px;}
.specs td.k{font-weight:bold;width:50%;background:#f3f3f3;}
.dist{margin:8px 0;padding-bottom:8px;border-bottom:1px solid #cfcfcf;}
.dist b{color:#000;}
.footerLinks a{color:#FFFFFF;margin-right:4px;}
.footerLinks .sep{color:#FFFFFF;margin:0 8px;}
h1.section{font-size: 2.5em; color: #ff5500; font-weight: 800; letter-spacing: -1px; margin-bottom: 30px;}
.contenu p{margin:0 0 10px;line-height:1.5;}
.contenu h3{font-size:12px;color:#000;margin:14px 0 4px;}
form.demande label{display:block;font-weight:bold;margin:8px 0 2px;}
form.demande input,form.demande select,form.demande textarea{font-size:11px;padding:3px;width:260px;max-width:100%;}
form.demande textarea{width:100%;height:90px;}
form.demande .btn{width:auto;background:#000;color:#e9fb02;font-weight:bold;border:0;padding:6px 18px;cursor:pointer;}
form.demande .req{color:#c00;}

/* ============ responsive ============ */
/* tablettes : on relâche les largeurs fixes des colonnes */
@media (max-width:900px){
	.colMenu{width:130px;}
	.colActu{width:170px;}
	.contenu{min-height:0;}
	.heroHome{min-height:0;}
}

/* mobile : empilement des colonnes du tableau de mise en page */
@media (max-width:680px){
	.chemin,.liensbas{padding-left:14px;padding-right:14px;}
	.zoneCentre{padding:8px;}

	table.layout,
	table.layout > tbody,
	table.layout > tbody > tr,
	table.layout > tbody > tr > td{
		display:block;
		width:100%;
	}
	.colMenu,.colActu{width:100%;}

	/* espace entre les blocs empilés */
	table.layout > tbody > tr > td + td{margin-top:12px;}

	.heroBox{max-width:none;}
	.heroHome{padding:14px;}
	.contenu{padding:12px 14px;}

	/* puces / liens menu plus confortables au doigt */
	.menuBody a{padding:4px 0;}

	/* formulaire pleine largeur */
	.FormulaireChamp,.FormulaireLabel{width:100%;float:none;text-align:left;}
	form.demande input,form.demande select{width:100%;}
	.textbox{width:100%;}

	/* footer : liens qui passent à la ligne proprement */
	.footerLinks{line-height:1.9;}
}
/* --- SÉCURITÉ POUR AFFICHAGE MOBILE (TABLEAUX + SCHÉMAS) --- */
@media (max-width: 768px) {
  /* 1. On force les colonnes du tableau à s'empiler verticalement */
  table.layout, 
  table.layout tbody, 
  table.layout tr, 
  table.layout td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 2. Ajustement des espaces pour les blocs empilés */
  .colMenu, .tdContenu, .colActu {
    padding: 15px !important;
    margin-bottom: 10px;
  }

  /* 3. LA SOLUTION POUR LES SCHÉMAS : On force les images à s'adapter à la largeur du mobile */
  .tdContenu img, 
  .heroHome img {
    max-width: 100% !important;
    height: auto !important; /* Conserve les proportions d'origine sans déformer le schéma */
  }
}