@charset "utf-8";
body {
	margin:0;
	padding:0;
	width:100%;
	color:#212121;
	font:normal 12px/1.8em Arial, Helvetica, sans-serif;
}
html, .main {
	padding:0;
	margin:0;
	background:#f7f7f7 url(images/main_bg.gif) top center repeat-x;
}
.clr {
	clear:both;
	padding:0;
	margin:0;
	width:100%;
	font-size:0;
	line-height:0;
}
.logo {
	padding:20px 0;
	float:left;
	width:450px;
}
.logo img {
	float:left;
	margin:0 10px 0 0;
}
h1 {
	margin:0;
	padding:10px 0 0 0;
	width:420px;
	color:#fff;
	font:normal 46px/1.2em Arial, Helvetica, sans-serif;
	letter-spacing:-2px;
}
h1 a, h1 a:hover {
	color:#fff;
	text-decoration:none;
}
h1 small {
	text-align:left;
	float:right;
	width:130px;
	border-left:1px solid #fff;
	color:#fff;
	display:block;
	padding:15px 0 15px 10px;
	font:normal 12px/1.2em Arial, Helvetica, sans-serif;
	letter-spacing:normal;
}
h2 {
	font:normal 24px Arial, Helvetica, sans-serif;
	padding:8px 0;
	margin:0;
	color:#595959;
}
p {
	margin:8px 0;
	padding:0 0 8px 0;
	font:normal 14px/1.8em Arial, Helvetica, sans-serif;
	color:#212121;
}
p.spec {
	text-align:right;
}
a {
	color:#2cadff;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a.rm, a.com {
	margin-left:8px;
	padding:9px 12px;
	background:repeat-x top;
	text-decoration:none;
	color:#fff;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
	margin:0;
	padding:0;
}
.header {
}
.header_resize {
	margin:0 auto;
	padding:0;
	width:970px;
}
.header_img {
	height:50px;
}
.menu_nav {
	float:right;
	width:500px;
	margin:0;
	padding:30px 0 0 0;
}
.menu_nav ul {
	list-style:none;
	padding:0;
	margin:0;
}
.menu_nav li {
	float:left;
	padding:0 5px;
}
.menu_nav li a {
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#fff;
	display:block;
	float:left;
	padding:10px 0;
}
.menu_nav li a span {
	background:none;
	padding:10px 15px;
}
.menu_nav li a:hover {
	text-decoration:none;
	color:#21a6ff;
	background:url(images/r_menu.gif) no-repeat right;
}
.menu_nav li a:hover span {
	text-decoration:none;
	color:#21a6ff;
	background:url(images/l_menu.gif) no-repeat left;
}
.menu_nav li.active a {
	text-decoration:none;
	color:#21a6ff;
	background:url(images/r_menu.gif) no-repeat right;
}
.menu_nav li.active a span {
	text-decoration:none;
	color:#21a6ff;
	background:url(images/l_menu.gif) no-repeat left;
}
.search form {
	float:right;
	padding:10px 0;
	margin:0 auto;
}
.search span {
	display:block;
	float:left;
	background:#fff;
	width:201px;
	padding:5px 0;
	height:23px;
	border:1px solid #e9e9e9;
}
.search form .keywords {
	width:163px;
	line-height:13px;
	height:13px;
	float:left;
	background:none;
	border:0;
	padding:5px;
	margin:0;
	font:normal 11px Arial, Helvetica, sans-serif;
	color:#bab9b9;
}
.search form .button {
	float:left;
	margin:0;
	padding:0;
	border:0;
	position:relative;
}
.content {
	padding:0;
}
.content_resize {
	margin:0 auto;
	padding:0;
	width:970px;
}
.content .mainbar {
	margin:0;
	padding:0;
	float:left;
	width:620px;
	background:repeat-x bottom;
}
.content .mainbar img {
	float:left;
	padding:4px;
	margin:0 10px 0 0;
	border:1px solid #eaecec;
	background-color:#fff;
}
.content .mainbar .article {
	margin:0;
	padding:10px 0 0 0;
}
.content .mainbar .article span.butons a {
	margin:0 5px 0 0;
	float:right;
	color:#9a9a9a;
	padding:1px 10px;
	text-decoration:none;
	border:1px solid #edebeb;
	background:#fbfbfc;
}
.content .mainbar .article span.butons a:hover {
	border:1px solid #d3edff;
	background:#21a6ff;
	color:#fff;
	text-decoration:none;
}
.content .mainbar .article span.butons a.active {
	border:1px solid #d3edff;
	background:#21a6ff;
	color:#fff;
	text-decoration:none;
}
.content .sidebar {
	margin:0;
	padding:0;
	float:right;
	width:280px;
}
.content .sidebar .gadget {
	margin:0 0 10px 0;
	padding:10px;
}
ul.sb_menu, ul.ex_menu {
	margin:0;
	padding:0;
	list-style:none;
	color:#959595;
}
ul.sb_menu li, ul.ex_menu li {
	margin:0;
	background:url(images/li_a.gif) left no-repeat;
}
ul.sb_menu li {
	padding:4px 0 4px 12px;
	width:220px;
}
ul.ex_menu li {
	padding:4px 0 8px 12px;
}
ul.sb_menu li a, ul.ex_menu li a {
	color:#959595;
	text-decoration:none;
	margin-left:-12px;
	padding-left:12px;
}
ul.sb_menu li a:hover, ul.ex_menu li a:hover {
	color:#2cadff;
	text-decoration:underline;
}
ul.sb_menu li a:hover {
	text-decoration:underline;
}
ul.ex_menu li a:hover {
	text-decoration:none;
}
.content .mainbar .comment {
	margin:0;
	padding:16px 0 0 0;
}
.content .mainbar .comment img.userpic {
	border:1px solid #dedede;
	margin:10px 16px 0 0;
	padding:0;
	float:left;
}
.fbg {
	padding:40px 0 0 0;
	background:#302e28 url(images/fbg_bg.gif) top repeat-x;
}
.fbg_resize {
	margin:0 auto;
	padding:0 20px;
	width:930px;
}
.fbg h2 {
	color:#595959;
}
.fbg img {
	padding:4px;
	border:1px solid #cfd2d4;
	background-color:#fff;
}
.fbg .col {
	margin:0;
	float:left;
}
.fbg .c1 {
	padding:0 16px 0 0;
	width:266px;
}
.fbg .c2 {
	padding:0 16px;
	width:300px;
}
.fbg .c3 {
	padding:0 0 0 16px;
	width:260px;
}
.fbg .c1 img {
	margin:8px;
}
.fbg .c3 img {
	margin:8px 16px 4px 0;
	float:left;
}
.footer {
	width:920px;
	margin:0 auto;
	padding:40px 0;
	color:#888787;
}
.footer p {
	margin:0;
	padding:4px 0;
	line-height:normal;
	color:#888787;
}
.footer a {
	color:#888787;
	padding:inherit;
	text-decoration:underline;
}
.footer a:hover {
	text-decoration:none;
}
.footer .lf {
	float:left;
}
.footer .rf {
	float:right;
}
ol {
	list-style:none;
}
ol li {
	display:block;
	clear:both;
}
ol li label {
	display:block;
	margin:0;
	padding:16px 0 0 0;
}
ol li input.text {
	width:480px;
	border:1px solid #c0c0c0;
	margin:2px 0;
	padding:5px 2px;
	height:16px;
	background:#fff;
}
ol li textarea {
	width:480px;
	border:1px solid #c0c0c0;
	margin:2px 0;
	padding:2px;
	background:#fff;
}
ol li .send {
	margin:16px 0 0 0;
}


/* ===== Responsive + footer 3 colonnes (ajoute 2026) ===== */
*,*::before,*::after{box-sizing:border-box;}
img,iframe,object,embed,table{max-width:100%;}
.header_resize,.content_resize,.fbg_resize,.footer{width:auto;max-width:970px;}
.header_resize,.content_resize{padding-left:15px;padding-right:15px;}
.footer{padding:30px 15px;}
.logo{width:auto;max-width:70%;}
h1{width:auto;}
.menu_nav{width:auto;}
.content .mainbar{float:none;width:auto;}
.content .mainbar img{height:auto;}
.content .mainbar table{width:100%;}
.fbg_resize{display:flex;flex-wrap:wrap;gap:24px;margin:0 auto;padding:24px 20px 0;}
.fbg .col,.fbg .c1,.fbg .c2,.fbg .c3{float:none;width:auto;margin:0;padding:0;flex:1 1 0;min-width:0;}
.fbg .col h2{color:#fff;font-size:18px;padding:0 0 8px;margin:0 0 10px;border-bottom:1px solid rgba(255,255,255,.2);}
.fbg .col p{color:#c9ccce;margin:4px 0;padding:0;font-size:13px;}
.fbg .col a{color:#8fd3ff;}
.fbg .col a:hover{color:#fff;}
.fbg .col img{border:0;background:none;padding:0;}
@media (max-width:760px){
  .logo{float:none;max-width:100%;padding:16px 0 6px;}
  h1{font-size:28px;}
  .menu_nav{float:none;padding:0 0 8px;}
  .menu_nav li{float:none;display:inline-block;}
  .fbg_resize{flex-direction:column;gap:20px;}
  .fbg .col,.fbg .c1,.fbg .c2,.fbg .c3{flex:1 1 100%;}
}

/* ===== Titres des pages regionales (ajoute 2026) =====
   h1 est blanc parce qu'il sert au logo, dans l'en-tete sombre.
   Le titre de contenu heritait de ce blanc sur fond clair : il etait invisible.
   On ne touche pas au logo, on ne corrige que les titres du contenu. */
.line h1, .margin h1{
  color:#212121;
  width:auto;
  font:normal 32px/1.25 Arial, Helvetica, sans-serif;
  letter-spacing:normal;
  padding:0 0 6px;
}
.line h2, .margin h2{color:#2b2b2b;font-size:22px;line-height:1.3;}
.line h3, .margin h3{
  color:#2b2b2b;
  font:normal 19px/1.35 Arial, Helvetica, sans-serif;
  margin:14px 0 6px;
  padding:0;
}
@media (max-width:760px){
  .line h1, .margin h1{font-size:26px;}
}

/* ------------------------------------------------------------------
   Grille du contenu editorial (ajoute 2026)

   Les pages regionales de ce site utilisent une grille (line / margin /
   s-12 m-12 l-4 l-6) heritee d'un autre gabarit, dont AUCUNE regle
   n'existait dans cette feuille de style. Le contenu s'affichait donc
   pleine largeur, sans marge ni respiration entre les blocs.

   On retablit ces regles, en une seule colonne centree et de largeur de
   lecture limitee. Le bandeau du haut garde ses deux colonnes (l-6).
   ------------------------------------------------------------------ */

main[role="main"] article { max-width: 1140px; margin: 0 auto; padding: 0 15px; }

.line { width: 100%; margin: 0 auto; }
.line::after, .margin::after { content: ""; display: table; clear: both; }
.text-center { text-align: center; }

.margin > .s-12,
.margin > .m-12,
.margin > .l-4 {
  float: none;
  width: 100%;
  max-width: 780px;
  margin: 0 auto 2.5rem;
}
.margin > *:last-child { margin-bottom: 0; }

.line > .l-6 { box-sizing: border-box; }
@media (min-width: 992px) {
  .line > .l-6 { float: left; width: 50%; padding: 0 15px; }
}

.section { display: block; padding: 1.5rem 0; }
.background-white { background-color: #fff; }
.padding-2x { padding: 2rem; }
.margin-bottom { margin-bottom: 1.5rem; }
.margin-bottom-0 { margin-bottom: 0; }
.text-size-16 { font-size: 1rem; line-height: 1.6; }
.text-size-12 { font-size: .8125rem; line-height: 1.5; }
.text-dark { color: #212121; }

.line img, .margin img { max-width: 100%; height: auto; }
.margin iframe { max-width: 100%; border: 0; }

.margin p { margin-bottom: 1rem; }


/* ==================================================================
   TAILLE DU TEXTE

   Le corps de texte etait a 12 px : trop petit pour une lecture
   confortable, et en dessous des 16 px attendus sur telephone.
   On le remonte a 16 px. Les elements d'en-tete et de menu,
   dimensionnes en em et souvent places dans des blocs a hauteur
   fixe, sont figes a leur taille actuelle pour ne pas bouger.
   ================================================================== */

body { font-size: 16px; line-height: 1.6; }
body, th, td, input, textarea, select { font-size: 16px; }
p, li, dd, blockquote { font-size: inherit; }
img, iframe, video, table { max-width: 100%; }
img { height: auto; }