/* #PRODUIRE{fond=css/spip.css,lesenateur=39}
   md5:c230c965de14e4bf94a85ef557832aa6 */
/*  */

// 
// Feuille de style basique -  ne doit pas utiliser de preprocesseur

html {
  -ms-text-size-adjust: 100%; // 2
  -webkit-text-size-adjust: 100%; // 2
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, sectionarticle, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block; }
[hidden], template {display: none; }

body {	margin: 0;}
body * { background-repeat: no-repeat; }
	/*  */
body #cookie-bar, body #cookieChoiceInfo {
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	background:#fff;
	top: inherit !important;
	bottom: 0;
	font-size: 18px;
}
body #cookie-bar .cb-enable, body #cookieChoiceInfo .cb-enable,
body #cookie-bar #cookieChoiceDismiss, body #cookieChoiceInfo #cookieChoiceDismiss {
	font-weight:bold;
	border-radius: 2px;
	&:hover {color:#fff; }
}

// html, body 	{	height: 100%; }
.content 		{	overflow-x: hidden; }

/*  */

.box_mediabox, .lity-container	{
	padding: 0;
	background-color: transparent;
	// display: table-cell; Probleme avec Neptune grand large
	vertical-align: middle;
	overflow: hidden;
}
.box_mediabox body, .lity-container body, .box_mediabox iframe, .lity-container iframe { margin: 0; }

#cboxTitle, .lidy-Title { display: none !important; }
.box_mediabox, #cboxOverlay   { background: rgba(0,0,0,.9); }
.lity-content>iframe, #cboxLoadedContent>iframe {
	width: 84vw !important;
	height: 84vh !important;
	min-width: 84vw !important;
	min-height: 84vh !important;
}

@media screen and (max-width:680px){
	.lity-content>iframe, #cboxLoadedContent>iframe {
		width: 86vw !important;
		height: 86vh !important;
		min-width: 86vw !important;
		min-height: 86vh !important;
	}
}

h1,h2,h3,h4,h5 {font-weight:normal; }
a,a:focus {
	line-height: 110%;
	transition-property: all;
	transition-duration: .3s;
	transition-timing-function: cubic-bezier(.25,.46,.45,.94);
	text-decoration:none;
}
a:active, a:hover {
	outline: 0;
	background: transparent;
}

/* ========================== BOITE A OUTILS TRADI ========================== */

.module {
	display: inline;
	float: left;
	overflow: hidden;
}
.bloc {
	display: block;
	overflow: hidden;
}
.affix 				{ position: fixed; }
.show 			{ display: block; }
.oh			 			{ overflow: hidden; }
div .invisible, .invisible, .hide, .hidden, .js .js-hide, .no-js .no-js-hide, .none	{
	display: none ;
}
/* Non visible a l'ecran */
.nonvisible, .offscreen 		{
	position: absolute;
	left: -999em; height: 1%; }
.gras,b,strong 										{ font-weight: bold;}
.italic,i,em,q, address 				{ font-style: italic;}
.majuscules, .capitale				{ text-transform: uppercase;}
.caps 																	{ font-variant: small-caps; }
small 																	{ font-size: 80%; }
abbr[title] 													{ border-bottom: 1px dotted; }
dfn {
	font-weight: bold;
	font-style: italic;
}
del, .del {
	background-color: #FFDDDD;
	border-color: #CC0000;
	color: #CC0000;
	text-decoration: line-through;
}
ins, .ins {
	background-color: #DDFFDD;
	border-color: #00AA00;
	color: #00AA00;
	text-decoration: none;
}
sup, sub {
  position: relative;
  vertical-align: baseline;
	font-size: .8em;
	font-variant: normal;
	line-height: 0;
}
sub {bottom: -0.25em; }
sup {
	vertical-align: super;
	top:-0.25em;
}
img.puce {vertical-align: baseline; }
.large 																						{	width: 100%;}
.pull-left, .gauche, .left										{	float: left; }
.pull-right, .droite, .right									{	float: right; }
.centre, .center 	{
		text-align: center;
		margin-right: auto;
		margin-left: auto;
}
.margo 														{	margin-top: 1em; }
.relatif															{	position: relative; }
.fondblanc												{ 	background-color: #fff; }

/* Curseurs */
abbr[title], acronym[title], abbr[data-original-title] {
	border-bottom: .1em dotted #aaa;
	cursor: help;
}
[role="button"] {cursor: pointer; }

/* Espaceur de blocs */
.clear { clear: both; }
br.clear, .nettoyeur { clear: both; margin: 0; padding: 0; border: 0; height: 0; line-height: 1px; font-size: 1px; }
hr.clear { visibility: hidden; }

.sardine {
	margin: 0!important;
	padding: 0!important;
	border: 0!important;
	font-size: 0!important;
}

/* ============ IMAGES, VIDEO, AUDIO, IFRAME ============ */

/* ------ Images ----- */
figure 					{ margin: 0; }
img 							{
	vertical-align: middle;
	border: 0;
  color: transparent;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
  height: auto;
}
svg:not(:root) {overflow: hidden; }
img.ronde 		{ border-radius: 50%; }

/* ------ Audio ----- */
audio, canvas, progress, video {
  display: inline-block; // 1
  vertical-align: baseline; // 2
}
audio:not([controls]) {
  display: none;
  height: 0;
}

/* ------ Video ----- */
#animation_container { 	margin:auto; }

/* ------ Iframe ----- */
iframe{ border: none;  }

/* ============ IMPRESSION ============ */

@media print {
  *, *:before, *:after {
      background: transparent !important;
      color: #000 !important; // Black prints faster: h5bp.com/s
      box-shadow: none !important;
      text-shadow: none !important;
      overflow: visible;
  }
	* { position: static; }
	abbr[title]:after 																											{ content: " (" attr(title) ")"; }
  blockquote 																														{ page-break-inside: avoid; }
  thead 																																		{ display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img 																																		{ page-break-inside: avoid; }
  @page 																																	{ margin: 0.5cm; }
  p, h2, h3 																																{ orphans: 3; widows: 3; }
  h2, h3 																																		{ page-break-after: avoid; }
  a, a:visited 																														{text-decoration: underline; }
	#letexte a.spip_out:after, #letexte a[href]:after, #letexte	a.spip_url:after 	.letexte a.spip_out:after, .letexte a[href]:after, .letexte a.spip_url:after 			{ content: " (" attr(href) ")"; }
	a[href^="#"]:after, a[href^="javascript:"]:after 	{content: ""; }
	.article pre, .article blockquote.spip, .article blockquote.spip_poesie  {
    border: 2px solid #999;
    page-break-inside: avoid;
	}
  .navbar, .btn, .asidedroite, .footer, .liste-grille, .atss-righ, .titpage, .pagination, #spip-admin	{ display: none; }
  .colgauche { width: 95%; }
	.page_auteur .titpage, .page_auteurs .titpage {display: block; }
	#bicolonnes, .colgauche {
		padding: 0;
		margin: 0;
	}
	.content .page_type_contenu #bicolonnes .chapo { padding: 0; }
	.content .page_type_contenu #bicolonnes .colgauche .date { padding-left: 0; }
}

/* ============ Cesure pour petits écrans ============ */

@media (max-width: 640px) {
  /* gestion des mots longs */
  textarea, table, td, th { word-wrap: break-word; /* cesure forcee */ }
}

/* ============ Admin de Spip ============ */

/* Boutons action */
.bouton_action_post,.bouton_action_post > div 	{ display: inline;}
#debug-nav 																												{ line-height: 2em; }
/* Boutons d'admin */
.ie6 .spip-admin,.ie6 #spip-admin 											{ display: none;}// 
//
// Mixins
// --------------------------------------------------

// Vendor Prefixes
//
// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
// Autoprefixer in our Gruntfile. They have been removed in v4.

// - Animations
// - Backface visibility
// - Box shadow
// - Box sizing
// - Content columns
// - Hyphens
// - Placeholder text
// - Transformations
// - Transitions
// - User Select


// Animations
.animation(@animation) {
  -webkit-animation: @animation;
       -o-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}
.animation-fill-mode(@fill-mode) {
  -webkit-animation-fill-mode: @fill-mode;
          animation-fill-mode: @fill-mode;
}

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Defaut value is `visible`, but can be changed to `hidden`

.backface-visibility(@visibility) {
  -webkit-backface-visibility: @visibility;
     -moz-backface-visibility: @visibility;
          backface-visibility: @visibility;
}

// Drop shadows
//
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
// supported browsers that have box shadow capabilities now support it.

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

// Box sizing
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}

// CSS3 Content Columns
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
  -webkit-column-count: @column-count;
     -moz-column-count: @column-count;
          column-count: @column-count;
  -webkit-column-gap: @column-gap;
     -moz-column-gap: @column-gap;
          column-gap: @column-gap;
}

// Optional hyphenation
.hyphens(@mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: @mode;
     -moz-hyphens: @mode;
      -ms-hyphens: @mode; // IE10+
       -o-hyphens: @mode;
          hyphens: @mode;
}

// Placeholder text
.placeholder(@color: @input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: @color;
    opacity: 1; // Override Firefox's unusual defaut opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

// Transformations
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
      -ms-transform: scale(@ratio); // IE9 only
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.scale(@ratioX; @ratioY) {
  -webkit-transform: scale(@ratioX, @ratioY);
      -ms-transform: scale(@ratioX, @ratioY); // IE9 only
       -o-transform: scale(@ratioX, @ratioY);
          transform: scale(@ratioX, @ratioY);
}
.scaleX(@ratio) {
  -webkit-transform: scaleX(@ratio);
      -ms-transform: scaleX(@ratio); // IE9 only
       -o-transform: scaleX(@ratio);
          transform: scaleX(@ratio);
}
.scaleY(@ratio) {
  -webkit-transform: scaleY(@ratio);
      -ms-transform: scaleY(@ratio); // IE9 only
       -o-transform: scaleY(@ratio);
          transform: scaleY(@ratio);
}
.skew(@x; @y) {
  -webkit-transform: skewX(@x) skewY(@y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
       -o-transform: skewX(@x) skewY(@y);
          transform: skewX(@x) skewY(@y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
       -o-transform: rotate(@degrees);
          transform: rotate(@degrees);
}
.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
       -o-transform: rotateX(@degrees);
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
       -o-transform: rotateY(@degrees);
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}


// Transitions

.transition(@transition) {
  -webkit-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}


// User select
// For selecting text on the page

.user-select(@select) {
  -webkit-user-select: @select;
     -moz-user-select: @select;
      -ms-user-select: @select; // IE10+
          user-select: @select;
}
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.

.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
  // Color the label and help text
  .help-block,
  .control-label,
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline,
  &.radio label,
  &.checkbox label,
  &.radio-inline label,
  &.checkbox-inline label  {
    color: @text-color;
  }
  // Set the border and box shadow on specific inputs to match
  .form-control {
    border-color: @border-color;
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
    &:focus {
      border-color: darken(@border-color, 10%);
      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
      .box-shadow(@shadow);
    }
  }
  // Set validation states also for addons
  .input-group-addon {
    color: @text-color;
    border-color: @border-color;
    background-color: @background-color;
  }
  // Optional feedback icon
  .form-control-feedback {
    color: @text-color;
  }
}


// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defauts to the `@input-border-focus` variable.
//
// We highly encourage you to not customize the defaut value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's defaut styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the defaut bleu border and shadow to white for better
// contrast against a dark gris background.
.form-control-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus {
    border-color: @color;
    outline: 0;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }
}

// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  height: @input-height;
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;

  select& {
    height: @input-height;
    line-height: @input-height;
  }

  textarea&,
  select[multiple]& {
    height: auto;
  }
}

// WebKit-style focus

.tab-focus() {
  // Defaut
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
// MIXINS Button variants
//
// Easily pump out defaut styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:focus,
  &.focus {
    color: @color;
    background-color: darken(@background, 10%);
        border-color: darken(@border, 25%);
  }
  &:hover {
    color: @color;
    background-color: darken(@background, 10%);
        border-color: darken(@border, 12%);
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    color: @color;
    background-color: darken(@background, 10%);
        border-color: darken(@border, 12%);

    &:hover,
    &:focus,
    &.focus {
      color: @color;
      background-color: darken(@background, 17%);
          border-color: darken(@border, 25%);
    }
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus,
    &.focus {
      background-color: @background;
          border-color: @border;
    }
  }

  .badge {
    color: @background;
    background-color: @color;
  }
}

// Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
}

// Base styles
// --------------------------------------------------

.btn {
  display: inline-block;
  margin-bottom: 0; // For input.btn
  font-weight: @btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none; // Reset unusual Firefox-on-Android defaut style; see https://github.com/necolas/normalize.css/bootstrapleger/issues/214
  border: 1px solid transparent;
  white-space: nowrap;
  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
  .user-select(none);

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      .tab-focus();
    }
  }

  &:hover,
  &:focus,
  &.focus {
    color: @btn-defaut-color;
    text-decoration: none;
  }

  &:active,
  &.active {
    outline: 0;
    background-image: none;
    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: @cursor-disabled;
    .opacity(.65);
    .box-shadow(none);
  }

}

@media screen and (max-width: @screen-xs-max) {
	// RETAR
	.btn{white-space: normal; }
}

// Alternate buttons
// --------------------------------------------------

.btn-defaut {
  .button-variant(@btn-defaut-color; @btn-defaut-bg; @btn-defaut-border);
}
.btn-secondaire {
  .button-variant(@btn-defaut-color; @btn-defaut-bg; @btn-defaut-border);
}
// Vert appears as vert
.btn-vert {
  .button-variant(@btn-vert-color; @btn-vert-bg; @btn-vert-border);
}
// Info appears as bleu-vert
.btn-jaune {
  .button-variant(@btn-jaune-color; @btn-jaune-bg; @btn-jaune-border);
}
// Orange appears as orange
.btn-orange {
  .button-variant(@btn-orange-color; @btn-orange-bg; @btn-orange-border);
}
// Rouge and error appear as red
.btn-rouge {
  .button-variant(@btn-rouge-color; @btn-rouge-bg; @btn-rouge-border);
}

.btn-bleu {
  .button-variant(@btn-bleu-color; @btn-bleu-bg; @btn-bleu-border);
}

.btn-violet {
  .button-variant(@btn-violet-color; @btn-violet-bg; @btn-violet-border);
}

.btn-blanc{
  .button-variant(@couleur-defaut; #fff; darken(#fff, 5%));
  color: black;
}

// Button Sizes
// --------------------------------------------------

.btn-petit {
  // line-height: ensure even-numbered height of button next to large input
  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
}
.btn-moyen {
  // line-height: ensure proper height of button next to small input
  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
}
.btn-grand {
  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
}

// /* boutons admin forum */
// .boutons.modererforum .submit {.btn-petit}
// .boutons.modererforum .poubelle .submit {.btn-rouge;}
// .boutons.modererforum .spam .submit {.btn-orange;}

/* boutons action de Spip */

.bouton_action_post.btn{
	.submit{
		background-color: transparent;
		border: none;
	}
}


/* boutons d'admin */
body .spip-admin-bloc, body .spip-admin-float {z-index: @zindex-navbar-fixed + 1;}
// 

// Layout
// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.

.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
    }
  }
  .col(1); // kickstart it
}

.float-grid-columns(@class) {
  .col(@index) { // initial
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .col(1); // kickstart it
}

.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .col-@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .col-@{class}-push-0 {
    left: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .col-@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .col-@{class}-pull-0 {
    right: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
}

// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}

// Create grid for specific class
.make-grid(@class) {
  .float-grid-columns(@class);
  .loop-grid-columns(@grid-columns, @class, width);
  .loop-grid-columns(@grid-columns, @class, pull);
  .loop-grid-columns(@grid-columns, @class, push);
  .loop-grid-columns(@grid-columns, @class, offset);
}
// Grid system
//
// Generate semantic grid columns with these mixins.

// Centered container element
.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));
  padding-right: ceil((@gutter / 2));
  &:extend(.clearfix all);
}

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  ceil((@gutter / -2));
  margin-right: floor((@gutter / -2));
  &:extend(.clearfix all);
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  float: left;
  width: percentage((@columns / @grid-columns));
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
}

// Ajout Laurent : crée une marge supplementaire
// égale au pourcentage que prend la goutière sur un portable;
.margesup{
  width: calc( 100% - percentage( @grid-gutter-width / @screen-xs-min )  );
  margin-left: auto;
  margin-right: auto;
}
.make-xs-column-offset(@columns) {
  margin-left: percentage((@columns / @grid-columns));
}
.make-xs-column-push(@columns) {
  left: percentage((@columns / @grid-columns));
}
.make-xs-column-pull(@columns) {
  right: percentage((@columns / @grid-columns));
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

@media (min-width: @screen-sm-min) {
  .margesup{
    width: calc( 100% - percentage( @grid-gutter-width / @screen-sm-min ) * 4  );
    margin-left: auto;
    margin-right: auto;
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

@media (min-width: @screen-md-min) {
  .margesup{
    width: calc( 100% - percentage( @grid-gutter-width / @screen-md-min ) * 4  );
    margin-left: auto;
    margin-right: auto;
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

@media (min-width: @screen-lg-min) {
  .margesup{
    width: calc( 100% - percentage( @grid-gutter-width / @screen-lg-min ) * 4  );
    margin-left: auto;
    margin-right: auto;
  }
}

// ============== IMAGES ===============

// Responsive image
.img-responsive(@display: block) {
  display: @display;
  max-width: 100%; // Part 1: Set a maximum relative to the parent
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}

// Retina image
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url('https://ericbocquet.fr/@{file-1x}');
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url('https://ericbocquet.fr/@{file-2x}');
    background-size: @width-1x @height-1x;
  }
}

// ============== OPACITE ===============

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

// ============== BORDS ARRONDIS ===============

// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Center-align a block level element

.centrer {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.centrerflex {
	align-self: center;
	align-items: center;
	justify-content: center;
	display: flex;
}
.centrervertical {
	align-self: center;
	align-items: center;
	display: flex;
}


// Single Corner Border Radius
.border-top-left-radius(@radius) {
  -webkit-border-top-left-radius: @radius;
      -moz-border-radius-topleft: @radius;
          border-top-left-radius: @radius;
}
.border-top-right-radius(@radius) {
  -webkit-border-top-right-radius: @radius;
      -moz-border-radius-topright: @radius;
          border-top-right-radius: @radius;
}
.border-bottom-right-radius(@radius) {
  -webkit-border-bottom-right-radius: @radius;
      -moz-border-radius-bottomright: @radius;
          border-bottom-right-radius: @radius;
}
.border-bottom-left-radius(@radius) {
  -webkit-border-bottom-left-radius: @radius;
      -moz-border-radius-bottomleft: @radius;
          border-bottom-left-radius: @radius;
}

// Single Side Border Radius
.border-top-radius(@radius) {
  .border-top-right-radius(@radius);
  .border-top-left-radius(@radius);
}
.border-right-radius(@radius) {
  .border-top-right-radius(@radius);
  .border-bottom-right-radius(@radius);
}
.border-bottom-radius(@radius) {
  .border-bottom-right-radius(@radius);
  .border-bottom-left-radius(@radius);
}
.border-left-radius(@radius) {
  .border-top-left-radius(@radius);
  .border-bottom-left-radius(@radius);
}

// Drop shadows
.box-shadow(@shadow : 4px 4px 4px rgba(0, 0, 0, 0.2) ) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
     -moz-transition-delay: @transition-delay;
       -o-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
     -moz-transition-duration: @transition-duration;
       -o-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}

.animation(@temps:1s, @quoi: all, @apres:0.01s ){
	.transition(@quoi @temps cubic-bezier(.25,.46,.45,.94) @apres);
}

// Transformations
.rotation(@degrees) {
  -webkit-transform: rotate(@degrees);
     -moz-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees);
       -o-transform: rotate(@degrees);
          transform: rotate(@degrees);
}
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
     -moz-transform: scale(@ratio);
      -ms-transform: scale(@ratio);
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
     -moz-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y);
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
}
.skew(@x, @y) {
  -webkit-transform: skew(@x, @y);
     -moz-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
       -o-transform: skew(@x, @y);
          transform: skew(@x, @y);
  -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319
}
.translate3d(@x, @y, @z) {
  -webkit-transform: translate3d(@x, @y, @z);
     -moz-transform: translate3d(@x, @y, @z);
       -o-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}
.transform-origin(@pos) {
  -webkit-transform-origin: @pos;
  	-ms-transform-origin: @pos;
    	transform-origin: @pos;
}

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Defaut value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){
  -webkit-backface-visibility: @visibility;
     -moz-backface-visibility: @visibility;
          backface-visibility: @visibility;
}

// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
.background-clip(@clip) {
  -webkit-background-clip: @clip;
     -moz-background-clip: @clip;
          background-clip: @clip;
}

// Background sizing
.background-size(@size) {
  -webkit-background-size: @size;
     -moz-background-size: @size;
       -o-background-size: @size;
          background-size: @size;
}

// Box sizing
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}

// User select
// For selecting text on the page
.user-select(@select) {
  -webkit-user-select: @select;
     -moz-user-select: @select;
      -ms-user-select: @select;
       -o-user-select: @select;
          user-select: @select;
}

// Resize anything
.resizable(@direction) {
  resize: @direction; // Options: horizontal, vertical, both
  overflow: auto; // Safari fix
}

// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
  -webkit-column-count: @columnCount;
     -moz-column-count: @columnCount;
          column-count: @columnCount;
  -webkit-column-gap: @columnGap;
     -moz-column-gap: @columnGap;
          column-gap: @columnGap;
}

// Optional hyphenation
.cesure(@mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: @mode;
     -moz-hyphens: @mode;
      -ms-hyphens: @mode;
       -o-hyphens: @mode;
          hyphens: @mode;
}

// Opacity
.opacity(@opacity) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}

// =========  BACKGROUNDS  ==========

// Add an alphatransparency value to any background or border color (via Elyse Holladay)

.transparentbg(@color: @white, @alpha: 1) {
  background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.transparentbd(@color: @white, @alpha: 1) {
  border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
  .background-clip(padding-box);
}

// Laurent : background image transparent
// ex : transparentbgimage( url('https://ericbocquet.fr/squ/sites/senateurs.lhumaindabord.fr/ergo/bg.jpg'), @bleuDark);
.transparentbgimage(@image, @couleur) {
	position:relative;
	background-color: @couleur;
	&>* {
		z-index: 1;
		position: relative;
	}
	&:before {
			content:"";
			position:absolute;
			width:100%;
			height:100%;
			top:0;
			left:0;
			background: @image 0 0 no-repeat;
			background-size:cover;
			opacity: .2;
			z-index: 0;
	}
}

// =========  DEGRADES  ==========

// Pour annuler un dégradé sous IE9
.reset-filter() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

.deg_h(@startColor: #555, @endColor: #333, @debut:0, @fin:100%, @image : rien) {
  background-image: -moz-linear-gradient(left, @startColor @debut, @endColor @fin), url('https://ericbocquet.fr/@{image}'); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor @debut), to(@endColor @fin), url('https://ericbocquet.fr/@{image}')); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, @startColor @debut, @endColor @fin), url('https://ericbocquet.fr/@{image}'); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, @startColor @debut, @endColor @fin), url('https://ericbocquet.fr/@{image}'); // Opera 11.10
  background-image: linear-gradient(to right, @startColor @debut, @endColor @fin), url('https://ericbocquet.fr/@{image}'); // Standard, IE10
  background-repeat: repeat-x;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.deg_v(@startColor: #555, @endColor: #333, @debut:0, @fin:100%) {
  background-image: -moz-linear-gradient(top, @startColor @debut, @endColor @fin); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor @debut), to(@endColor @fin)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, @startColor @debut, @endColor @fin); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, @startColor @debut, @endColor @fin); // Opera 11.10
  background-image: linear-gradient(to bottom, @startColor @debut, @endColor @fin); // Standard, IE10
  background-repeat: repeat-x;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.deg_dir(@startColor: #555, @endColor: #333, @deg: 45deg) {
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
  background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
  background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.deg_hor3(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
  background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
  background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
  background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
  background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
  background-repeat: no-repeat;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.deg_ver3(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
  background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
  background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
  background-repeat: no-repeat;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.deg_dir3(@startColor: transparent, @midColor: #fff, @colorStop: 50%, @endColor: transparent, @dir: 45deg) {
  background-image: -webkit-gradient(@dir, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
  background-image: -webkit-linear-gradient(@dir, @startColor, @midColor @colorStop, @endColor);
  background-image: -moz-linear-gradient(@dir, @startColor, @midColor @colorStop, @endColor);
  background-image: -o-linear-gradient(@dir, @startColor, @midColor @colorStop, @endColor);
  background-image: linear-gradient(@dir, @startColor, @midColor @colorStop, @endColor);
  background-repeat: no-repeat;
}
.deg_hor5(@color1: #00b3ee, @color2: #7a43b6, @colorStop2: 25%, @color3: #7a43b6, @colorStop3: 50%, @color4: #7a43b6, @colorStop4: 25%, @color5: #c3325f) {
  background-image: -webkit-linear-gradient(left, @color1, @color2 @colorStop2, @color3 @colorStop3, @color4 @colorStop4, @color5);
  background-image: -moz-linear-gradient(left, @color1, @color2 @colorStop2, @color3 @colorStop3, @color4 @colorStop4, @color5);
  background-image: -o-linear-gradient(left, @color1, @color2 @colorStop2, @color3 @colorStop3, @color4 @colorStop4, @color5);
  background-image: linear-gradient(to right, @color1, @color2 @colorStop2, @color3 @colorStop3, @color4 @colorStop4, @color5);
  background-repeat: no-repeat;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@color1),argb(@color2),argb(@color3),argb(@color4),argb(@color5))); // IE9 and down, gets no color-stop at all for proper fallback
}
.deg_ver5(@color1: #00b3ee, @color2: #7a43b6, @colorStop2: 25%, @color3: #7a43b6, @colorStop3: 50%, @color4: #7a43b6, @colorStop4: 25%, @color5: #c3325f) {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@color1), color-stop(@colorStop2, @color2), color-stop(@colorStop3, @color3), color-stop(@colorStop4, @color4), to(@color5));
  background-image: -webkit-linear-gradient(@color1, @color2 @colorStop2, @color3 @colorStop3, @color4 @colorStop4, @color5);
  background-image: -moz-linear-gradient(top, @color1, @color2 @colorStop2, @color3 @colorStop3, @color4 @colorStop4, @color5);
  background-image: -o-linear-gradient(@color1, @color2 @colorStop2, @color3 @colorStop3, @color4 @colorStop4, @color5);
  background-image: linear-gradient(@color1, @color2 @colorStop2, @color3 @colorStop3, @color4 @colorStop4, @color5);
  background-repeat: no-repeat;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@color1),argb(@color2),argb(@color3),argb(@color4),argb(@color5))); // IE9 and down, gets no color-stop at all for proper fallback
}



.deg_radial(@innerColor: #555, @outerColor: #333) {
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
  background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
  background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
  background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
  background-repeat: no-repeat;
}
.deg_hachures(@color: #555, @angle: 45deg) {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}

// Boutons
// ------------------
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  .gradientBar(@startColor, @endColor, @textColor, @textShadow);

  // in these cases the gradient won't cover the background, so we override
  &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
    color: @textColor;
    background-color: @endColor;
    *background-color: darken(@endColor, 5%);
  }

  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
  &:active,
  &.active {
    background-color: darken(@endColor, 10%) e("\9");
  }
}

.titencadre() {
	display: table;
	overflow: hidden;
	background: @couleur-defaut;
	color: #fff;
	padding: .2em 2.5%;
	a { color: #fff; }
}

.titencadre{ .titencadre() }

.carre(@cote) {
	width: @cote;
	height: @cote;
}

.pucecarre(@taille: .8em, @couleur: @couleur-defaut){
	&::before{
		content: "";
		.carre(@taille);
		display: inline-block;
		background-color: @couleur-defaut;
		margin: 0 3% 0 -8%;
		line-height: 100%;
		top: .05em;
		position: relative;
	}
}

.pucecarre{ .pucecarre(); }

.pucetriangle(@taille: .4em, @couleur: @couleur-defaut){
	&:before{
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: @taille 0 @taille @taille * 1.5 ;
		border-color: transparent transparent transparent @couleur;
		position: absolute;
		left: 0;
		top: .1em;
	}
}

.pucefleche(@taille: .5em, @couleur: @couleur-defaut, @epaisseur: 2px){
	&::before {
	  content: " ";
	  display: block;
	  overflow: hidden;
	  background: transparent;
	  height: @taille;
	  width: @taille;
	  border: @epaisseur solid @couleur;
	  border-width: 2px 2px 0 0;
	  transform: rotate(45deg);
	  float: left;
	  margin: 0.5em 0.9em 0 0;
	}
}

.filetapres(@hauteur:2px,@largeur:@container-treslarge-desktop - @grid-gutter-width,@couleur:@couleur-defaut) {
	position: relative;
	&:after{
		content: "";
		display: block;
		width: @largeur;
		height: @hauteur;
		background: @couleur;
		bottom: 0;
		position: absolute;
		left: 50%;
		transform: translate(-50%);
	}
}// 
// ------ Couleurs ------

@black:         						#000;
@white:             				#fff;

@gris-base:         	 	#000;
@gris-darker:       		lighten(@gris-base, 13.5%); // #222
@gris-dark:          	 	lighten(@gris-base, 40%);   // #333
@gris:                  	 	lighten(@gris-base, 70%); // #555
@gris-light:          		#f0f1f2; // #777
@gris-lighter:       	 	lighten(@gris-base, 90.9%); // #e8e8e8
@gris-extralighter:  	#F5F5F5; // #e8e8e8

// Adaptateur BS2
@grisDarker: 					@gris-darker;
@grisDark:    					@gris-dark;
@grisLight:    					@gris-light;
@grisLighter: 				@gris-lighter;
@grisExtraLighter:	@gris-extralighter;

@bleu:            				#005977;
@bleuLight:        		#D9E7F0;
@bleuDark:    				#005977;
@vert:          					#2B8E12;
@vertLight:        		#BED444;
@rougeLight:      		#ec1e24;
@rouge:              		#DC1E39;
@rougeDark:      		#B30005;
@jaune:         					#EB9E05;
@orange:        				#DD6E00;
@orangeLighter:  	lighten(@orange, 30%);
@orangeLight:      	lighten(@orange, 15%);
@orangeDark:   			darken(@orange, 15%);
@rose:              			#FF5798;
@violet:           				#A65EE3;
@turquoise:						#3ABCA2;

@bleu_fb:								#4D68A1;
@bleu_tw:							#25AAE1;

@couleur-defaut : 						@jaune;
@couleur-secondaire : 		@bleuDark;
@couleur-defautLight: 			lighten(@couleur-defaut, 15%);
@couleur-defautDark: 				darken(@couleur-defaut, 15%);

// Scaffolding
@bodyBackground:         @white;
@textColor:                     @grisDark;

// Links
@linkColor:                   @rouge;
@linkColorHover:          @rouge;

// Adaptateur BS2
@brand-defaut:   				@rouge;
@brand-primary:   			@bleu;
@brand-vert:   						@vert;
@brand-jaune:         			@jaune;
@brand-orange:     		@orange;
@brand-rouge:      			@rouge;
@body-bg:                 @bodyBackground;
@text-color:              	@textColor;
@link-color:              	@linkColor;
@link-hover-color:     @bleuDark;
@link-hover-decoration: none;

// ===  Typography ===

@sansFontFamily: 			   	'Nunito Sans', Verdana, sans-serif;
@serifFontFamily:  			 	Georgia, Cambria, Times New Roman, Times, serif;
@monoFontFamily:    		"Courier New", Courier, monospace;

@baseFontSize:     			18px;
@baseFontFamily: 			@sansFontFamily;
@baseLineHeight:     		24px;
@altFontFamily:     			@sansFontFamily;
@labeur: 											@baseFontFamily;

@headingsFontFamily:    @baseFontFamily; // empty to use BS defaut, @baseFontFamily
@headingsFontWeight: 		normal;    // instead of browser defaut, bold
@headingsColor:         			inherit; // empty to use BS defaut, @textColor
@titraille: 												@baseFontFamily;

// Adaptateur BS2
@font-family-sans-serif:  			@sansFontFamily;
@font-family-serif:       				@serifFontFamily;
@font-family-monospace:   	@monoFontFamily;
@font-family-base:  						  @font-family-serif;
@font-size-base:          				@baseFontSize;
@font-size-large:     							@fontSizeLarge; // ~18px
@font-size-small:     						@fontSizeSmall; // ~12px

@font-size-h1:            floor((@font-size-base * 2));
@font-size-h2:            floor((@font-size-base * 1.5));
@font-size-h3:            ceil((@font-size-base * 1.25));
@font-size-h4:            ceil((@font-size-base * 1.1));
@font-size-h5:            @font-size-base;
@font-size-h6:            @font-size-base;

//** Unit-less `line-height` for use in components like buttons.
@line-height-base:        unit(@baseLineHeight / @baseFontSize);
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed:    @baseLineHeight; // ~20px

//** By defaut, this inherits from the `<body>`.
@headings-font-family: 		@headingsFontFamily;
@headings-font-weight: 	@headingsFontWeight;
@headings-line-height: 		1.1;
@headings-color:          		@headingsColor;

//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

//** Load fonts from this directory.
@icon-font-path:          "../fonts/";
//** File name for all font files.
@icon-font-name:          "glyphicons-halflings-regular";
//** Element ID within SVG icon file.
@icon-font-svg-id:        "glyphicons_halflingsregular";

// ==== Component sizing ====

@fontSizeLarge: 									@baseFontSize * 1.25; // ~18px
@fontSizeSmall: 									@baseFontSize * 0.85; // ~12px
@fontSizeMini:    									@baseFontSize * 0.75; // ~11px

@paddingLarge: 									.2em .5em; // 44px
@paddingSmall: 									2px 10px;  // 26px
@paddingMini:   									0 6px;   // 22px

@baseBorderRadius:     				.2em;
@borderRadiusLarge:    			.2em;
@borderRadiusSmall:    			.4em;

@padding-base-vertical:   		0.4em;
@padding-base-horizontal:  12%;

@padding-large-vertical:    	0.2em;
@padding-large-horizontal: .7em;

@padding-small-vertical:    	.4em;
@padding-small-horizontal: .6em;

@padding-xs-vertical:       		1px;
@padding-xs-horizontal:     	5px;

@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small:         1.5;

// Adaptateur BS2
@border-radius-base:   				@baseBorderRadius;
@border-radius-large:  				@borderRadiusLarge;
@border-radius-small:  				@borderRadiusSmall;

//** Global color for active items (e.g., navs or dropdowns).
@component-active-color:    #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg:       @brand-primary;

//** Width of the `border` for generating carets that indicator dropdowns.
@caret-width-base:          4px;
//** Carets increase slightly in size for larger components.
@caret-width-large:         5px;


// Tables
@tableBackground:               @grisLighter; // overall background-color
@tableBackgroundAccent:    #f9f9f9; // for striping
@tableBackgroundHover:     #f5f5f5; // for hover
@tableBorder:                       #ddd; // table and cell border

//** Padding for `<th>`s and `<td>`s.
@table-cell-padding:            8px;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding:  5px;

// Adaptateur BS2
@table-bg:                      		@tableBackground;
@table-bg-accent:     				  @tableBackgroundAccent;
@table-bg-hover:              	@tableBackgroundHover;
@table-bg-active:      				@table-bg-hover;
@table-border-color: 					@tableBorder;


// Buttons

@btnBackground:                							@couleur-defaut;
@btnBackgroundHighlight:  							darken(@couleur-defaut, 10%);
@btnBorder:                        							#bbb;

@btnPrimaryBackground:                	@linkColor;
@btnPrimaryBackgroundHighlight:  	spin(@btnPrimaryBackground, 20%);

@btnJauneBackground:             						lighten(@bleu, 5%);
@btnJauneBackgroundHighlight:  				darken(@bleu, 5%);

@btnVertBackground:              		lighten(@vert, 5%);
@btnVertBackgroundHighlight:   darken(@vert, 5%);

@btnOrangeBackground:            			lighten(@orange, 15%);
@btnOrangeBackgroundHighlight: 	@orange;

@btnRougeBackground:               		@rouge;
@btnRougeBackgroundHighlight:    darken(@rouge, 5%);

@btnBleuBackground:               		@bleu;
@btnBleuBackgroundHighlight:     darken(@bleu, 5%);

@btnVioletBackground:               		@violet;
@btnVioletBackgroundHighlight:     darken(@violet, 5%);

@btnInverseBackground:              #444;
@btnInverseBackgroundHighlight:   @grisDarker;

// Adaptateur BS2
@btn-font-weight:              				normal;
@btn-defaut-color:            					#fff;
@btn-defaut-bg:               					@btnBackground;
@btn-defaut-border:        					darken(@btn-defaut-bg, 5%);
@btn-primary-color:           			  #fff;
@btn-primary-bg:              			  @btnPrimaryBackground;
@btn-primary-border:        			  darken(@btn-primary-bg, 5%);
@btn-vert-color:           			  			#fff;
@btn-vert-bg:              			  			@btnVertBackground;
@btn-vert-border:        			  			darken(@btn-vert-bg, 5%);
@btn-jaune-color:                 			#fff;
@btn-jaune-bg:                    			@brand-jaune;
@btn-jaune-border:              			darken(@btn-jaune-bg, 5%);
@btn-orange-color:          			  	#fff;
@btn-orange-bg:              			  	@btnOrangeBackground;
@btn-orange-border:        			  	darken(@btn-orange-bg, 5%);
@btn-rouge-color:            			  	#fff;
@btn-rouge-bg:                			 		@btnRougeBackground;
@btn-rouge-border:         			  	darken(@btn-rouge-bg, 5%);
@btn-bleu-color:            			  		#fff;
@btn-bleu-bg:                			 			@btnBleuBackground;
@btn-bleu-border:         			  			darken(@btn-bleu-bg, 5%);
@btn-violet-color:            			  	#fff;
@btn-violet-bg:                			 		@btnVioletBackground;
@btn-violet-border:         			  		darken(@btn-violet-bg, 5%);
@btn-link-disabled-color:   			  @gris-light;
@btn-border-radius-base:  			  @border-radius-base;
@btn-border-radius-large: 			  @border-radius-large;
@btn-border-radius-small: 			  @border-radius-small;

// ==== Filigrane ====

@filigrane : 																url('');

// ==== Forms ====

// --- Couleurs ---
@formActionsBackground:        #f5f5f5;
@inputBackground:            				@white;
@inputBorder:                   					#ccc;
@inputDisabledBackground:     @grisLighter;
@placeholderText:         						@grisLight;
@input-border-focus:             #66afe9;
@legend-color:                   				@gris-dark;
@legend-border-color:            		#e5e5e5;
@input-group-addon-bg:           @gris-lighter;

// --- Hauteurs ---
@inputHeight:                   					@baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@form-group-margin-bottom:   0;

@cursor-disabled:                not-allowed;

// Adaptateur BS2
@input-group-addon-border-color: @input-border;
@input-bg:                       					@inputBackground;
@input-bg-disabled:              			@inputDisabledBackground;
@input-color:                    					@gris;
@input-border:                   				@inputBorder;
@input-border-radius:            		@inputBorderRadius;
@input-color-placeholder:        @placeholderText;
@input-border-radius-large:      @border-radius-large;
@input-border-radius-small:      @border-radius-small;
@inputBorderRadius:             		@baseBorderRadius;


// ==== Dropdowns ====
@dropdownBackground:            	@white;
@dropdownBorder:                			rgba(0,0,0,.2);
@dropdownDividerTop:            		#e5e5e5;
@dropdownDividerBottom:         @white;

@dropdownLinkColor:             			@grisDark;
@dropdownLinkColorHover:        	@white;
@dropdownLinkColorActive:       	@white;

@dropdownLinkBackgroundActive:  	@linkColor;
@dropdownLinkBackgroundHover:   	@dropdownLinkBackgroundActive;

// Adaptateur BS2
@dropdown-bg:                    				@dropdownBackground;
@dropdown-border:                			@dropdownBorder;
@dropdown-fallback-border:       #ccc;
@dropdown-divider-bg:            		@dropdownDividerTop;
@dropdown-link-color:            			@dropdownLinkColor;
@dropdown-link-hover-color:      	@dropdownLinkColorHover;
@dropdown-link-hover-bg:         	@dropdownLinkBackgroundHover;
@dropdown-link-active-color:     	@dropdownLinkColorActive;
@dropdown-link-active-bg:        	@dropdownLinkBackgroundActive;
@dropdown-link-disabled-color:  @gris-light;
@dropdown-header-color:          	@gris-light;
@dropdown-caret-color:           		#000;



// ==== Z-index master list ====
@zindexDropdown:          				1000;
@zindexPopover:           					1010;
@zindexTooltip:           						1030;
@zindexFixedNavbar:       				1030;
@zindexModalBackdrop:   				1040;
@zindexModal:             						1050;

// Adaptateur border-style: 2px;
@zindex-navbar:            					1000;
@zindex-dropdown:          				@zindexDropdown;
@zindex-popover:           					@zindexPopover;
@zindex-tooltip:           						@zindexTooltip;
@zindex-navbar-fixed:      				@zindexFixedNavbar;
@zindex-modal-background:  	@zindexModalBackdrop;
@zindex-modal:             					@zindexModal;

// ============================= GRILLE =============================

// Grille par defaut
@gridColumns:             							12;
@gridColumnWidth:      							60px;
@gridGutterWidth:         						50px;
@gridRowWidth:            						(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@fluidGridColumnWidth: 						percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    					percentage(@gridGutterWidth/@gridRowWidth);
// Adaptateur BS2
@grid-columns:              						@gridColumns;
@grid-gutter-width:         						@gridGutterWidth;
@grid-float-breakpoint:     					@navbarCollapseDesktopWidth;
@grid-float-breakpoint-max: 			(@grid-float-breakpoint - 1);

// Extra small screen / phone
@screen-xs:                  		480px;
@screen-xs-min:             @screen-xs;
@screen-phone:              @screen-xs-min;

// Small screen - 768px max ( tablette debout )
@screen-sm:                  	768px;
@screen-sm-min:            	@screen-sm;
@screen-tablet:              	@screen-sm-min;

// Medium screen - 992 max ( tablettes paysage )
@screen-md:                  	992px;
@screen-md-min:            	@screen-md;
@screen-desktop:           	@screen-md-min;

// Large - 1280px max ( petits écrans tradi )
@screen-lg:                  		1280px;
@screen-lg-min:              	@screen-lg;
@screen-lg-desktop:       	@screen-lg-min;

// Extra Large - 1366px max ( petits écrans 16:9 )
@screen-xl:                  		1366px;
@screen-xl-min:              	@screen-xl;
@screen-xl-desktop:       	@screen-xl-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:            	(@screen-sm-min - 1);
@screen-sm-max:           	(@screen-md-min - 1);
@screen-md-max:           	(@screen-lg-min - 1);
@screen-lg-max:           		(@screen-xl-min - 1);

// Small screen / tablet
@container-tablet:             				(720px + @grid-gutter-width);
@container-sm:                 					@container-tablet;

// Medium screen / desktop
@container-desktop:            			(950px + @grid-gutter-width);
@container-md:                 				@container-desktop;

// Large screen / wide desktop
@container-large-desktop:      		(1200px + @grid-gutter-width);
@container-lg:                 					@container-large-desktop;

// Trés largeLarge screen / wide desktop
@container-treslarge-desktop:   (1306px + @grid-gutter-width);
@container-xl:                 						@container-treslarge-desktop;

@navbarCollapseWidth:             			767px;
@navbarCollapseDesktopWidth:     @navbarCollapseWidth + 1;
@navbarHeight:                    						140px;
@navbarBackgroundHighlight:       #ffffff;
@navbarBackground:       								@bleu;
@navbarBorder:               								lighten(@navbarBackground, 12%);
@navbarText:                   								@white;
@navbarLinkColor:           								@white;
@navbarLinkColorHover:  								@grisDark;
@navbarLinkColorActive:  								@gris;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
@navbarBrandColor:                				@navbarLinkColor;

// ------ Menu navba: r negatif ------

@navbarInverseBackground:                					#111111;
@navbarInverseBackgroundHighlight:       		#222222;
@navbarInverseBorder:                    							#252525;
@navbarInverseText:                    									@grisLight;
@navbarInverseLinkColor:             								@grisLight;
@navbarInverseLinkColorHover:   									@white;
@navbarInverseLinkColorActive:   								@navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover:       	transparent;
@navbarInverseLinkBackgroundActive:      		@navbarInverseBackground;
@navbarInverseSearchBackground:          		lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus:    @white;
@navbarInverseSearchBorder:              				@navbarInverseBackground;
@navbarInverseSearchPlaceholderColor:    	#ccc;
@navbarInverseBrandColor:                					@navbarInverseLinkColor;

// Ajout Laurent
@navbarsupHeight:                    			42px;

// Adaptateur BS2
// Basics of a navbar
@navbar-height:                    @navbarHeight;
@navbar-margin-bottom:             @line-height-computed;
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height:       340px;
@navbar-defaut-color:             @navbarText;
@navbar-defaut-bg:                @navbarBackground;
@navbar-defaut-border:            @navbarBorder;
// Navbar links
@navbar-defaut-link-color:               					@navbarLinkColor;
@navbar-defaut-link-hover-color:          		@navbarLinkColorHover;
@navbar-defaut-link-hover-bg:             		@navbarLinkBackgroundHover;
@navbar-defaut-link-active-color:    					@navbarLinkColorActive;
@navbar-defaut-link-active-bg:        					@navbarLinkBackgroundActive;
@navbar-defaut-link-disabled-color:       	#ccc;
@navbar-defaut-link-disabled-bg:    					transparent;
// Navbar brand label
@navbar-defaut-brand-color:               @navbarBrandColor;
@navbar-defaut-brand-hover-color:         darken(@navbar-defaut-brand-color, 10%);
@navbar-defaut-brand-hover-bg:            transparent;
// Navbar toggle
@navbar-defaut-toggle-hover-bg:       				#ddd;
@navbar-defaut-toggle-icon-bar-bg:   				#888;
@navbar-defaut-toggle-border-color:  				#ddd;

//=== Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color:                    						@navbarInverseText;
@navbar-inverse-bg:                        						@navbarInverseBackground;
@navbar-inverse-border:                  						@navbarInverseBorder;
// Inverted navbar list-style: 						;
@navbar-inverse-link-color:              						@navbarInverseLinkColor;
@navbar-inverse-link-hover-color:    						@navbarInverseLinkColorHover;
@navbar-inverse-link-hover-bg:            				@navbarInverseLinkBackgroundHover;
@navbar-inverse-link-active-color:        			@navbarInverseLinkColorActive;
@navbar-inverse-link-active-bg:           				@navbarInverseLinkBackgroundActive;
@navbar-inverse-link-disabled-color:    				#444;
@navbar-inverse-link-disabled-bg:        			transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color:            					@navbarInverseBrandColor;
@navbar-inverse-brand-hover-color:  					#fff;
@navbar-inverse-brand-hover-bg:      					transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg:     					#333;
@navbar-inverse-toggle-icon-bar-bg: 					#fff;
@navbar-inverse-toggle-border-color:					#333;


//== Tabs
@nav-tabs-border-color:                     #ddd;
@nav-tabs-link-hover-border-color:          @gris-lighter;
@nav-tabs-active-link-hover-bg:             @body-bg;
@nav-tabs-active-link-hover-color:          @gris;
@nav-tabs-active-link-hover-border-color:   #ddd;
@nav-tabs-justified-link-border-color:            #ddd;
@nav-tabs-justified-active-link-border-color:     @body-bg;

//== Pills
@nav-pills-border-radius:                   @border-radius-base;
@nav-pills-active-link-hover-bg:            @component-active-bg;
@nav-pills-active-link-hover-color:         @component-active-color;


// ==== Pagination =====
@paginationBackground:                #fff;
@paginationBorder:                    #ddd;
@paginationActiveBackground:          #f5f5f5;

// Adaptateur BS2
@pagination-color:                 						@link-color;
@pagination-bg:                     						@paginationBackground;
@pagination-border:               						@paginationBorder;
@pagination-hover-color:       						@link-hover-color;
@pagination-hover-bg:           						@gris-lighter;
@pagination-hover-border:     						#ddd;
@pagination-active-color:       						#fff;
@pagination-active-bg:           						@brand-primary;
@pagination-active-border:    						@brand-primary;
@pagination-disabled-color:   						@gris-light;
@pagination-disabled-bg:       						#fff;
@pagination-disabled-border:						#ddd;


// ==== Pager (BS2) ====

@pager-bg:                    									@pagination-bg;
@pager-border:             									  @pagination-border;
@pager-border-radius:   									15px;
@pager-hover-bg:          									@pagination-hover-bg;
@pager-active-bg:         									@pagination-active-bg;
@pager-active-color:     									  @pagination-active-color;
@pager-disabled-color:  									@pagination-disabled-color;

/* ==== Form states and alerts ==== */

@orangeText:             				#c09853;
@orangeBackground:       	#fcf8e3;
@orangeBorder:           			darken(spin(@orangeBackground, -10), 3%);
@rougeText: 													#b94a48;
@rougeBackground: 							#f2dede;
@rougeBorder: 											darken(spin(@rougeBackground, -10), 3%);
@vertText: 										#468847;
@vertBackground: 				#dff0d8;
@vertBorder: 								darken(spin(@vertBackground, -10), 5%);
@jauneText: 													#3a87ad;
@jauneBackground: 								#d9edf7;
@jauneBorder: 												darken(spin(@jauneBackground, -10), 7%);

/* Adaptateur BS2 */

@state-vert-text: 					@vertText;
@state-vert-bg: 					    @vertBackground;
@state-vert-border: 			@vertBorder;
@state-jaune-text: 					     		@jauneText;
@state-jaune-bg: 					       		@jauneBackground;
@state-jaune-border: 					   	@jauneBorder;
@state-orange-text: 					@orangeText;
@state-orange-bg: 					  @orangeBackground;
@state-orange-border: 			@orangeBorder;
@state-rouge-text: 					  @rougeText;
@state-rouge-bg: 					    @rougeBackground;
@state-rouge-border: 				@rougeBorder;

/* ==== Tooltips and popovers ==== */

@tooltipColor:            					#fff;
@tooltipBackground:      			#000;
@tooltipArrowWidth:      			5px;
@tooltipArrowColor:       			@tooltipBackground;
@popoverBackground:   			#fff;
@popoverArrowWidth:   			10px;
@popoverArrowColor:    			#fff;
@popoverTitleBackground: 	darken(@popoverBackground, 3%);

/* Adaptateur BS2 */
@tooltip-max-width:           	200px;
@tooltip-color:               			@tooltipColor;
@tooltip-bg:                  				@tooltipBackground;
@tooltip-opacity:             			.9;
@tooltip-arrow-width:         	@tooltipArrowWidth;
@tooltip-arrow-color:         	@tooltipArrowColor;


/* ==== Special enhancement for popovers ==== */
@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
@popoverArrowOuterColor:  rgba(0,0,0,.25);

/* Adaptateur BS2 */
@popover-bg:                          							@popoverBackground;
@popover-max-width:                   					276px;
@popover-border-color:               					fadeout(@popoverArrowOuterColor, 5%);
@popover-fallback-border-color:     				#ccc;
@popover-title-bg:                    							@popoverTitleBackground;
@popover-arrow-width:                 				@popoverArrowWidth;
@popover-arrow-color:                 					@popover-bg;
@popover-arrow-outer-width:         				@popoverArrowOuterWidth;
@popover-arrow-outer-color:          				@popoverArrowOuterColor;
@popover-arrow-outer-fallback-color:  	darken(@popover-fallback-border-color, 20%);

/* ==== Labels (BS2) ==== */

@label-defaut-bg:            		@gris-light;
@label-primary-bg:            	@brand-primary;
@label-vert-bg:           	 	@brand-vert;
@label-jaune-bg:               			@brand-jaune;
@label-orange-bg:            	@brand-orange;
@label-rouge-bg:             	@brand-rouge;
@label-color:                 				#fff;
@label-link-hover-color:      	#fff;

/* ==== Modals (BS2) ==== */

// Padding applied to the modal body
@modal-inner-padding:         15px;
// Padding applied to the modal title
@modal-title-padding:         15px;
// Modal title line-height
@modal-title-line-height:     @line-height-base;
// Background color of modal content area
@modal-content-bg:                             #fff;
// Modal content border color
@modal-content-border-color:                   rgba(0,0,0,.2);
// Modal content border color **for IE8**
@modal-content-fallback-border-color:          #999;
// Modal backdrop background color
@modal-backdrop-bg:           #000;
// Modal backdrop opacity
@modal-backdrop-opacity:      .5;
// Modal header border color
@modal-header-border-color:   #e5e5e5;
// Modal footer border color
@modal-footer-border-color:   @modal-header-border-color;
@modal-lg:                    			900px;
@modal-md:                    		600px;
@modal-sm:                    			300px;


/* ==== Alerts (BS2) ==== */

@alert-padding:              			15px;
@alert-border-radius:         	@border-radius-base;
@alert-link-font-weight:      	bold;

@alert-vert-bg:           		@state-vert-bg;
@alert-vert-text:         		@state-vert-text;
@alert-vert-border:     		@state-vert-border;

@alert-jaune-bg:               			@state-jaune-bg;
@alert-jaune-text:             			@state-jaune-text;
@alert-jaune-border:         			@state-jaune-border;

@alert-orange-bg:            	@state-orange-bg;
@alert-orange-text:          	@state-orange-text;
@alert-orange-border:      	@state-orange-border;

@alert-rouge-bg:             		@state-rouge-bg;
@alert-rouge-text:           	@state-rouge-text;
@alert-rouge-border:         @state-rouge-border;


/* ==== Progress bars (BS2) ==== */

// Background color of the whole progress component
@progress-bg:                 #f5f5f5;
// Progress bar text color
@progress-bar-color:          #fff;
// Variable for setting rounded corners on progress bar.
@progress-border-radius:      @border-radius-base;
// Defaut progress bar color
@progress-bar-bg:             @brand-primary;
// Vert progress bar color
@progress-bar-vert-bg:     @brand-vert;
// Orange progress bar color
@progress-bar-orange-bg:     @brand-orange;
// Rouge progress bar color
@progress-bar-rouge-bg:      @brand-rouge;
// Info progress bar color
@progress-bar-jaune-bg:        @brand-jaune;

/* ==== Thumbail (BS2) ==== */

@thumbnail-padding:           			4px;
@thumbnail-bg:                					@body-bg;
@thumbnail-border:            				#ddd;
@thumbnail-border-radius:     		@border-radius-base;
@thumbnail-caption-color:     		@text-color;
@thumbnail-caption-padding:   	9px;


/* ==== Wells ===== */
@wellBackground:                  #f5f5f5;

// Adaptateur BS2
@well-bg:                     							@wellBackground;
@well-border:                 						darken(@well-bg, 7%);


/* ==== Badges (BS2) ==== */

@badge-color:                 						#fff;
@badge-link-hover-color:      			#fff;
@badge-bg:                    						@gris-light;
@badge-active-color:          				@link-color;
@badge-active-bg:             				#fff;
@badge-font-weight:           			bold;
@badge-line-height:           				1;
@badge-border-radius:         			10px;

/* ==== Carousel (BS2) ==== */

@carousel-text-shadow:                			 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color:                			#fff;
@carousel-control-width:               			 15%;
@carousel-control-opacity:            			.5;
@carousel-control-font-size:          			 20px;
@carousel-indicator-active-bg:      			#fff;
@carousel-indicator-border-color:  			#fff;
@carousel-caption-color:               			#fff;


/* ==== Close (BS2) ==== */

@close-font-weight:           bold;
@close-color:                 #000;
@close-text-shadow:           0 1px 0 #fff;


/* ==== Code  (BS2) ==== */

@code-color:                  #c7254e;
@code-bg:                     #f9f2f4;

@kbd-color:                   #fff;
@kbd-bg:                      #333;

@pre-bg:                      #f5f5f5;
@pre-color:                   @gris-dark;
@pre-border-color:            #ccc;
@pre-scrollable-max-height:   340px;

/* ==== Type  (BS2) ==== */

/* Horizontal offset for forms and lists. */
@component-offset-horizontal: 180px;
/* Text muted color */
@text-muted:                  @gris-light;
/* Abbreviations and acronyms border color */
@abbr-border-color:           @gris-light;
/* Headings small color */
@headings-small-color:        @gris-light;
/* Blockquote small color */
@blockquote-small-color:      @gris-light;
/* Blockquote font size */
@blockquote-font-size:        inherit;
/* Blockquote border color */
@blockquote-border-color:     @gris-lighter;
/* Page header border color */
@page-header-border-color:    @gris-lighter;
/* Width of horizontal description list titles */
@dl-horizontal-offset:        @component-offset-horizontal;
/* Point at which .dl-horizontal becomes horizontal */
@dl-horizontal-breakpoint:    @grid-float-breakpoint;
/* Horizontal line color. */
@hrBorder:                @grisLighter;
@hr-border:                @hrBorder;


/* ==== Sprite icons path ==== */
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

/* ==== Horizontal forms & lists ==== */
@horizontalComponentOffset:       180px;

/* ==== Hero unit ==== */
@heroUnitBackground:              @grisLighter;
@heroUnitHeadingColor:            inherit;
@heroUnitLeadColor:               inherit;

/* Typo SPIP */
@emFontSize : 1em * (@font-size-base / 16);
@emLineHeight : 1em * (@line-height-base);
@emVertMargin : @emLineHeight;

@indentStep : (@container-md / @grid-columns) / 2;
@indentStep1200 : (@container-lg / @grid-columns) / 2;
@indentStep768 : (@container-sm / @grid-columns) / 2;

@font-size-large-em : 1em * @font-size-large / @font-size-base;
@font-size-small-em : 1em * @font-size-small / @font-size-base;
@font-size-h1-em: 1em * @font-size-h1 / @font-size-base;
@font-size-h2-em: 1em * @font-size-h2 / @font-size-base;
@font-size-h3-em: 1em * @font-size-h3 / @font-size-base;
@font-size-h4-em: 1em * @font-size-h4 / @font-size-base;
@font-size-h5-em: 1em * @font-size-h5 / @font-size-base;
@font-size-h6-em: 1em * @font-size-h6 / @font-size-base;/*  */
//
// Glyphicons for Bootstrap
//
// Since icons are fonts, they can be placed anywhere text is placed and are
// thus automatically sized to match the surrounding child. To use, create an
// inline element with the appropriate classes, like so:
//
// <a href="#"><span class="icon icon-star"></span> Star</a>

// Importer la typo :
// Ne pas mettre de balise CHEMIN permet de gagner du temps
// @font-face {
// 	font-display: block;
//   font-family: 'bootstrap-icons';
//   src: 	url('https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff2') format('woff2'),
//        		url('https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff') format('woff');
// }
@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url('https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff2?7141511ac37f13e1a387fb9fc6646256') format("woff2"),
url('https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff?7141511ac37f13e1a387fb9fc6646256') format("woff");
}

// Catchall baseclass
.icon {
  position: relative;
  &::before {
	  display: inline-block;
	  font-family: bootstrap-icons !important;
	  font-style: normal;
	  font-weight: normal !important;
	  font-variant: normal;
	  text-transform: none;
	  line-height: 1;
	  vertical-align: -.125em;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
  }
}

// Individual icons
.icon-asterisk            										  { &:before { content: "\002a"; } }
.icon-plus                  											{ &:before { content: "\002b"; } }
.icon-euro,
.icon-eur                  												{ &:before { content: "\20ac"; } }
.icon-moins               										  { &:before { content: "\2212"; } }
.icon-envelope          										  { &:before { content: "\f32f"; } }
.icon-music               										  { &:before { content: "\e002"; } }
.icon-search              										  { &:before { content: "\F52A"; } }
.icon-coeur                 										{ &:before { content: "\e005"; } }
.icon-star                 												{ &:before { content: "\e006"; } }
.icon-star-blanche								        	{ &:before { content: "\e007"; } }
.icon-user               											  { &:before { content: "\e008"; } }
.icon-film                												{ &:before { content: "\e009"; } }
.icon-fenetre          										  	{ &:before { content: "\e010"; } }
.icon-grille             										    	{ &:before { content: "\e011"; } }
.icon-liste              		 											{ &:before { content: "\e012"; } }
.icon-ok                  											 	{ &:before { content: "\e013"; } }
.icon-croix              											 	{ &:before { content: "\e014"; } }
.icon-engrenage     							        	{ &:before { content: "\e019"; } }
.icon-poubelle        							       		{ &:before { content: "\e020"; } }
.icon-accueil           								       	{ &:before { content: "\e021"; } }
.icon-fichier            								     		{ &:before { content: "\e022"; } }
.icon-horloge          								       	{ &:before { content: "\f293"; } }
.icon-download2    								 		   		{ &:before { content: "\e025"; } }
.icon-download   									        	{ &:before { content: "\e026"; } }
.icon-upload        									     			{ &:before { content: "\e027"; } }
.icon-inbox          									     			{ &:before { content: "\e028"; } }
.icon-recharge     										    		{ &:before { content: "\e029"; } }
.icon-recharge2   			  					       		{ &:before { content: "\e030"; } }
.icon-recharge3   			  					      		{ &:before { content: "\e031"; } }
.icon-list2            												 		{ &:before { content: "\e032"; } }
.icon-cadenas      									        	{ &:before { content: "\e033"; } }
.icon-camera       														{ &:before { content: "\e059"; } }
.icon-image         							 					  	{ &:before { content: "\e060"; } }
.icon-marker        							 					 		{ &:before { content: "\e062"; } }
.icon-export     							     					 		{ &:before { content: "\e066"; } }
.icon-check      							     					 		{ &:before { content: "\e067"; } }
.icon-expand   							     					    { &:before { content: "\e068"; } }
.icon-eject       							   								{ &:before { content: "\e078"; } }
.icon-plus-rond            			 							{ &:before { content: "\e081"; } }
.icon-moins-rond             								{ &:before { content: "\e082"; } }
.icon-croix-rond        											{ &:before { content: "\e083"; } }
.icon-croix-rond2 				     							  { &:before { content: "\F62A"; } }
.icon-ok-rond            											{ &:before { content: "\e084"; } }
.icon-interrogation-rond   							{ &:before { content: "\e085"; } }
.icon-random       						          			{ &:before { content: "\e110"; } }
.icon-bulle            						 				   		{ &:before { content: "\e111"; } }
.icon-lien              												  { &:before { content: "\e144"; } }
.icon-phone          												  { &:before { content: "\e145"; } }
.icon-dollard         												  { &:before { content: "\e148"; } }
.icon-case              													{ &:before { content: "\e157"; } }
.icon-fleche-gauche        					    	{ &:before { content: "\e091"; } }
.icon-fleche-droite       	   								{ &:before { content: "\e092"; } }
.icon-fleche-haut         					  				{ &:before { content: "\e093"; } }
.icon-fleche-bas         			  							{ &:before { content: "\e094"; } }
.icon-fleche-gauche2      								{ &:before { content: "\e079"; } }
.icon-fleche-droite2        								{ &:before { content: "\f138"; } }
.icon-fleche-haut2       										{ &:before { content: "\e113"; } }
.icon-fleche-bas2        								   	{ &:before { content: "\e114"; } }
.icon-fleche-gauche3 									    { &:before { content: "\e250"; } }
.icon-fleche-droite3    									  { &:before { content: "\e251"; } }
.icon-fleche-haut3      									 	{ &:before { content: "\e252"; } }
.icon-fleche-bas3       									   	{ &:before { content: "\e253"; } }
.icon-fleche-gauche4        				    	{ &:before { content: "\e257"; } }
.icon-fleche-droite4           							{ &:before { content: "\F285"; } }
.icon-fleche-bas4              							{ &:before { content: "\F282"; } }
.icon-fleche-haut4             							{ &:before { content: "\e260"; } }
.icon-fleche-droite-rond  						  	{ &:before { content: "\e131"; } }
.icon-fleche-gauche-rond					     	{ &:before { content: "\e132"; } }
.icon-fleche-haut-rond    					   		{ &:before { content: "\e133"; } }
.icon-fleche-bas-rond     								{ &:before { content: "\e134"; } }
.icon-fleche-droite-case        			  	{ &:before { content: "\e158"; } }
.icon-fleche-bas-case          						{ &:before { content: "\e159"; } }
.icon-fleche-haut-case      							{ &:before { content: "\e160"; } }

// icones après
.btn-asterisk            										  { &:after { content: "\002a"; } }
.btn-plus                  											{ &:after { content: "\002b"; } }
.btn-euro,
.btn-eur                  												{ &:after { content: "\20ac"; } }
.btn-moins               										  { &:after { content: "\2212"; } }
.btn-envelope          										  { &:after { content: "\2709"; } }
.btn-music               										  { &:after { content: "\e002"; } }
.btn-search              										  { &:after { content: "\e003"; } }
.btn-coeur                 										{ &:after { content: "\e005"; } }
.btn-star                 												{ &:after { content: "\e006"; } }
.btn-star-blanche								        	{ &:after { content: "\e007"; } }
.btn-user               											  { &:after { content: "\e008"; } }
.btn-film                												{ &:after { content: "\e009"; } }
.btn-fenetre          										  	{ &:after { content: "\e010"; } }
.btn-grille             										    	{ &:after { content: "\e011"; } }
.btn-liste              		 											{ &:after { content: "\e012"; } }
.btn-ok                  											 	{ &:after { content: "\e013"; } }
.btn-croix              											 	{ &:after { content: "\e014"; } }
.btn-engrenage     							        	{ &:after { content: "\e019"; } }
.btn-poubelle        							       		{ &:after { content: "\e020"; } }
.btn-accueil           								       	{ &:after { content: "\e021"; } }
.btn-fichier            								     		{ &:after { content: "\e022"; } }
.btn-horloge          								       	{ &:after { content: "\e023"; } }
.btn-download2    								 		   		{ &:after { content: "\e025"; } }
.btn-download   									        	{ &:after { content: "\e026"; } }
.btn-upload        									     			{ &:after { content: "\e027"; } }
.btn-inbox          									     			{ &:after { content: "\e028"; } }
.btn-recharge     										    		{ &:after { content: "\e029"; } }
.btn-recharge2   			  					       		{ &:after { content: "\e030"; } }
.btn-recharge3   			  					      		{ &:after { content: "\e031"; } }
.btn-list2            												 		{ &:after { content: "\e032"; } }
.btn-cadenas      									        	{ &:after { content: "\e033"; } }
.btn-camera       														{ &:after { content: "\e059"; } }
.btn-image         							 					  	{ &:after { content: "\e060"; } }
.btn-marker        							 					 		{ &:after { content: "\e062"; } }
.btn-export     							     					 		{ &:after { content: "\e066"; } }
.btn-check      							     					 		{ &:after { content: "\e067"; } }
.btn-expand   							     					    { &:after { content: "\e068"; } }
.btn-eject       							   								{ &:after { content: "\e078"; } }
.btn-plus-rond            			 							{ &:after { content: "\e081"; } }
.btn-moins-rond             								{ &:after { content: "\e082"; } }
.btn-croix-rond        											{ &:after { content: "\e083"; } }
.btn-ok-rond            											{ &:after { content: "\e084"; } }
.btn-interrogation-rond   							{ &:after { content: "\e085"; } }
.btn-random       						          			{ &:after { content: "\e110"; } }
.btn-bulle            						 				   		{ &:after { content: "\e111"; } }
.btn-lien              												  { &:after { content: "\e144"; } }
.btn-phone          												  { &:after { content: "\e145"; } }
.btn-dollard         												  { &:after { content: "\e148"; } }
.btn-case              													{ &:after { content: "\e157"; } }
.btn-fleche 					        					    	{ &:after { content: "\f138"; } }
.btn-fleche-gauche        					    	{ &:after { content: "\e091"; } }
.btn-fleche-droite       	   								{ &:after { content: "\e092"; } }
.btn-fleche-haut         					  				{ &:after { content: "\e093"; } }
.btn-fleche-bas         			  							{ &:after { content: "\e094"; } }
.btn-fleche-gauche2      								{ &:after { content: "\e079"; } }
.btn-fleche-droite2        								{ &:after { content: "\f138"; } }
.btn-fleche-haut2       										{ &:after { content: "\e113"; } }
.btn-fleche-bas2        								   	{ &:after { content: "\e114"; } }
.btn-fleche-gauche3 									    { &:after { content: "\e250"; } }
.btn-fleche-droite3    									  { &:after { content: "\e251"; } }
.btn-fleche-haut3      									 	{ &:after { content: "\e252"; } }
.btn-fleche-bas3       									   	{ &:after { content: "\e253"; } }
.btn-fleche-gauche4        				    	{ &:after { content: "\e257"; } }
.btn-fleche-droite4           							{ &:after { content: "\e258"; } }
.btn-fleche-bas4              							{ &:after { content: "\e259"; } }
.btn-fleche-haut4             							{ &:after { content: "\e260"; } }
.btn-fleche-droite-rond  						  	{ &:after { content: "\e131"; } }
.btn-fleche-gauche-rond					     	{ &:after { content: "\e132"; } }
.btn-fleche-haut-rond    					   		{ &:after { content: "\e133"; } }
.btn-fleche-bas-rond     								{ &:after { content: "\e134"; } }
.btn-fleche-droite-case        			  	{ &:after { content: "\e158"; } }
.btn-fleche-bas-case          						{ &:after { content: "\e159"; } }
.btn-fleche-haut-case      							{ &:after { content: "\e160"; } }


.icon-arrow-90deg-down, .icon-fleche-90deg-bas    { &:before { content: "\f10e"; } }
.icon-arrow-90deg-left, .icon-fleche-90deg-gauche    { &:before { content: "\f10f"; } }
.icon-arrow-90deg-right, .icon-fleche-90deg-droite    { &:before { content: "\f110"; } }
.icon-arrow-90deg-up, .icon-fleche-90deg-haut    { &:before { content: "\f111"; } }
.icon-arrow-bar-down, .icon-fleche-bar-bas    { &:before { content: "\f112"; } }
.icon-arrow-bar-left, .icon-fleche-bar-gauche    { &:before { content: "\f113"; } }
.icon-arrow-bar-right, .icon-fleche-bar-droite    { &:before { content: "\f114"; } }
.icon-arrow-bar-up, .icon-fleche-bar-haut    { &:before { content: "\f115"; } }
.icon-arrow-clockwise, .icon-recharge    { &:before { content: "\f116"; } }
.icon-arrow-counterclockwise, .icon-fleche-counterclockwise    { &:before { content: "\f117"; } }
.icon-arrow-down-circle-fill, .icon-fleche-bas-rond-plein    { &:before { content: "\f118"; } }
.icon-arrow-down-circle, .icon-fleche-bas-rond    { &:before { content: "\f119"; } }
.icon-arrow-down-left-circle-fill, .icon-fleche-bas-gauche-rond-plein    { &:before { content: "\f11a"; } }
.icon-arrow-down-left-circle, .icon-fleche-bas-gauche-rond    { &:before { content: "\f11b"; } }
.icon-arrow-down-left-square-fill, .icon-fleche-bas-gauche-carre-plein    { &:before { content: "\f11c"; } }
.icon-arrow-down-left-square, .icon-fleche-bas-gauche-carre    { &:before { content: "\f11d"; } }
.icon-arrow-down-left, .icon-fleche-bas-gauche    { &:before { content: "\f11e"; } }
.icon-arrow-down-right-circle-fill, .icon-fleche-bas-droite-rond-plein    { &:before { content: "\f11f"; } }
.icon-arrow-down-right-circle, .icon-fleche-bas-droite-rond    { &:before { content: "\f120"; } }
.icon-arrow-down-right-square-fill, .icon-fleche-bas-droite-carre-plein    { &:before { content: "\f121"; } }
.icon-arrow-down-right-square, .icon-fleche-bas-droite-carre    { &:before { content: "\f122"; } }
.icon-arrow-down-right, .icon-fleche-bas-droite    { &:before { content: "\f123"; } }
.icon-arrow-down-short, .icon-fleche-bas-court    { &:before { content: "\f124"; } }
.icon-arrow-down-square-fill, .icon-fleche-bas-carre-plein    { &:before { content: "\f125"; } }
.icon-arrow-down-square, .icon-fleche-bas-carre    { &:before { content: "\f126"; } }
.icon-arrow-down-up, .icon-fleche-bas-haut    { &:before { content: "\f127"; } }
.icon-arrow-down, .icon-fleche-bas    { &:before { content: "\f128"; } }
.icon-arrow-left-circle-fill, .icon-fleche-gauche-rond-plein    { &:before { content: "\f129"; } }
.icon-arrow-left-circle, .icon-fleche-gauche-rond    { &:before { content: "\f12a"; } }
.icon-arrow-left-right, .icon-fleche-gauche-droite    { &:before { content: "\f12b"; } }
.icon-arrow-left-short, .icon-fleche-gauche-court    { &:before { content: "\f12c"; } }
.icon-arrow-left-square-fill, .icon-fleche-gauche-carre-plein    { &:before { content: "\f12d"; } }
.icon-arrow-left-square, .icon-fleche-gauche-carre    { &:before { content: "\f12e"; } }
.icon-arrow-left, .icon-fleche-gauche    { &:before { content: "\f12f"; } }
.icon-arrow-repeat, .icon-fleche-repeat    { &:before { content: "\f130"; } }
.icon-arrow-return-left, .icon-fleche-return-gauche    { &:before { content: "\f131"; } }
.icon-arrow-return-right, .icon-fleche-return-droite    { &:before { content: "\f132"; } }
.icon-arrow-right-circle-fill, .icon-fleche-droite-rond-plein    { &:before { content: "\f133"; } }
.icon-arrow-right-circle, .icon-fleche-droite-rond    { &:before { content: "\f134"; } }
.icon-arrow-right-short, .icon-fleche-droite-court    { &:before { content: "\f135"; } }
.icon-arrow-right-square-fill, .icon-fleche-droite-carre-plein    { &:before { content: "\f136"; } }
.icon-arrow-right-square, .icon-fleche-droite-carre    { &:before { content: "\f137"; } }
.icon-arrow-right, .icon-fleche-droite    { &:before { content: "\f138"; } }
.icon-arrow-up-circle-fill, .icon-fleche-bas-rond-plein    { &:before { content: "\f139"; } }
.icon-arrow-up-circle, .icon-fleche-bas-rond    { &:before { content: "\f13a"; } }
.icon-arrow-up-left-circle-fill, .icon-fleche-bas-gauche-rond-plein    { &:before { content: "\f13b"; } }
.icon-arrow-up-left-circle, .icon-fleche-bas-gauche-rond    { &:before { content: "\f13c"; } }
.icon-arrow-up-left-square-fill, .icon-fleche-bas-gauche-carre-plein    { &:before { content: "\f13d"; } }
.icon-arrow-up-left-square, .icon-fleche-bas-gauche-carre    { &:before { content: "\f13e"; } }
.icon-arrow-up-left, .icon-fleche-bas-gauche    { &:before { content: "\f13f"; } }
.icon-arrow-up-right-circle-fill, .icon-fleche-bas-droite-rond-plein    { &:before { content: "\f140"; } }
.icon-arrow-up-right-circle, .icon-fleche-bas-droite-rond    { &:before { content: "\f141"; } }
.icon-arrow-up-right-square-fill, .icon-fleche-bas-droite-carre-plein    { &:before { content: "\f142"; } }
.icon-arrow-up-right-square, .icon-fleche-bas-droite-carre    { &:before { content: "\f143"; } }
.icon-arrow-up-right, .icon-fleche-bas-droite    { &:before { content: "\f144"; } }
.icon-arrow-up-short, .icon-fleche-bas-court    { &:before { content: "\f145"; } }
.icon-arrow-up-square-fill, .icon-fleche-bas-carre-plein    { &:before { content: "\f146"; } }
.icon-arrow-up-square, .icon-fleche-bas-carre    { &:before { content: "\f147"; } }
.icon-arrow-up, .icon-fleche-haut    { &:before { content: "\f148"; } }
.icon-arrows-angle-contract, .icon-fleches-angle-contract    { &:before { content: "\f149"; } }
.icon-arrows-angle-expand, .icon-fleches-angle-expand    { &:before { content: "\f14a"; } }
.icon-arrows-collapse, .icon-fleches-collapse    { &:before { content: "\f14b"; } }
.icon-arrows-expand, .icon-fleches-expand    { &:before { content: "\f14c"; } }
.icon-arrows-fullscreen, .icon-fleches-plein-ecran    { &:before { content: "\f14d"; } }
.icon-arrows-move, .icon-fleches-move    { &:before { content: "\f14e"; } }
.icon-asterisk, .icon-asterisk    { &:before { content: "\f151"; } }
.icon-box-arrow-down-left, .icon-box-fleche-bas-gauche    { &:before { content: "\f1b7"; } }
.icon-box-arrow-down-right, .icon-box-fleche-bas-droite    { &:before { content: "\f1b8"; } }
.icon-box-arrow-down, .icon-box-fleche-bas    { &:before { content: "\f1b9"; } }
.icon-box-arrow-in-down-left, .icon-box-fleche-in-bas-gauche    { &:before { content: "\f1ba"; } }
.icon-box-arrow-in-down-right, .icon-box-fleche-in-bas-droite    { &:before { content: "\f1bb"; } }
.icon-box-arrow-in-down, .icon-box-fleche-in-bas    { &:before { content: "\f1bc"; } }
.icon-box-arrow-in-left, .icon-box-fleche-in-gauche    { &:before { content: "\f1bd"; } }
.icon-box-arrow-in-right, .icon-box-fleche-in-droite    { &:before { content: "\f1be"; } }
.icon-box-arrow-in-up-left, .icon-box-fleche-in-bas-gauche    { &:before { content: "\f1bf"; } }
.icon-box-arrow-in-up-right, .icon-box-fleche-in-bas-droite    { &:before { content: "\f1c0"; } }
.icon-box-arrow-in-up, .icon-box-fleche-in-haut    { &:before { content: "\f1c1"; } }
.icon-box-arrow-left, .icon-box-fleche-gauche    { &:before { content: "\f1c2"; } }
.icon-box-arrow-right, .icon-log-out    { &:before { content: "\f1c3"; } }
.icon-box-arrow-up-left, .icon-box-fleche-bas-gauche    { &:before { content: "\f1c4"; } }
.icon-box-arrow-up-right, .icon-box-fleche-bas-droite    { &:before { content: "\f1c5"; } }
.icon-box-arrow-up, .icon-box-fleche-haut    { &:before { content: "\f1c6"; } }
.icon-camera-fill, .icon-camera-plein    { &:before { content: "\f219"; } }
.icon-camera-reels-fill, .icon-camera-reels-plein    { &:before { content: "\f21a"; } }
.icon-camera-reels, .icon-camera-reels    { &:before { content: "\f21b"; } }
.icon-camera-video-fill, .icon-camera-video-plein    { &:before { content: "\f21c"; } }
.icon-camera-video-off-fill, .icon-camera-video-off-plein    { &:before { content: "\f21d"; } }
.icon-camera-video-off, .icon-camera-video-off    { &:before { content: "\f21e"; } }
.icon-camera-video, .icon-camera-video    { &:before { content: "\f21f"; } }
.icon-camera, .icon-camera    { &:before { content: "\f220"; } }
.icon-camera2, .icon-camera2    { &:before { content: "\f221"; } }
.icon-envelope-open-fill, .icon-envelope-ouvrir-plein    { &:before { content: "\f32d"; } }
.icon-envelope-open, .icon-envelope-ouvrir    { &:before { content: "\f32e"; } }
.icon-heart-fill, .icon-coeur-plein    { &:before { content: "\f415"; } }
.icon-heart-half, .icon-coeur-moitie    { &:before { content: "\f416"; } }
.icon-heart, .icon-coeur    { &:before { content: "\f417"; } }
.icon-house-fill, .icon-accueil-plein    { &:before { content: "\f424"; } }
.icon-house, .icon-accueil    { &:before { content: "\f425"; } }
.icon-hr, .icon-hr    { &:before { content: "\f426"; } }
.icon-image-alt, .icon-image-alt    { &:before { content: "\f428"; } }
.icon-image-fill, .icon-image-plein    { &:before { content: "\f429"; } }
.icon-image, .icon-image    { &:before { content: "\f42a"; } }
.icon-images, .icon-images    { &:before { content: "\f42b"; } }
.icon-info-circle-fill, .icon-info-rond-plein    { &:before { content: "\f430"; } }
.icon-info-circle, .icon-info-rond    { &:before { content: "\f431"; } }
.icon-info-square-fill, .icon-info-carre-plein    { &:before { content: "\f432"; } }
.icon-info-square, .icon-info-carre    { &:before { content: "\f433"; } }
.icon-info, .icon-info    { &:before { content: "\f434"; } }
.icon-mailbox, .icon-mailbox    { &:before { content: "\f47c"; } }
.icon-mailbox2, .icon-mailbox2    { &:before { content: "\f47d"; } }
.icon-map-fill, .icon-map-plein    { &:before { content: "\f47e"; } }
.icon-mask, .icon-mask    { &:before { content: "\f482"; } }
.icon-megaphone-fill, .icon-megaphone-plein    { &:before { content: "\f483"; } }
.icon-megaphone, .icon-megaphone    { &:before { content: "\f484"; } }
.icon-menu-app-fill, .icon-menu-app-plein    { &:before { content: "\f485"; } }
.icon-menu-app, .icon-menu-app    { &:before { content: "\f486"; } }
.icon-menu-button-fill, .icon-menu-button-plein    { &:before { content: "\f487"; } }
.icon-menu-button-wide-fill, .icon-menu-button-wide-plein    { &:before { content: "\f488"; } }
.icon-menu-button-wide, .icon-menu-button-wide    { &:before { content: "\f489"; } }
.icon-menu-button, .icon-menu-button    { &:before { content: "\f48a"; } }
.icon-menu-down, .icon-menu-bas    { &:before { content: "\f48b"; } }
.icon-menu-up, .icon-menu-haut    { &:before { content: "\f48c"; } }
.icon-pen, .icon-pen    { &:before { content: "\f4c8"; } }
.icon-pencil-fill, .icon-pencil-plein    { &:before { content: "\f4c9"; } }
.icon-pencil-square, .icon-pencil-carre    { &:before { content: "\f4ca"; } }
.icon-pencil, .icon-pencil    { &:before { content: "\f4cb"; } }
.icon-person-badge-fill, .icon-user-badge-plein    { &:before { content: "\f4d2"; } }
.icon-person-badge, .icon-user-badge    { &:before { content: "\f4d3"; } }
.icon-person-bounding-box, .icon-user-bounding-box    { &:before { content: "\f4d4"; } }
.icon-person-check-fill, .icon-user-ok-plein    { &:before { content: "\f4d5"; } }
.icon-person-check, .icon-user-ok    { &:before { content: "\f4d6"; } }
.icon-person-circle, .icon-user-rond    { &:before { content: "\f4d7"; } }
.icon-person-dash-fill, .icon-user-dash-plein    { &:before { content: "\f4d8"; } }
.icon-person-dash, .icon-user-dash    { &:before { content: "\f4d9"; } }
.icon-person-fill, .icon-user-plein    { &:before { content: "\f4da"; } }
.icon-person-lines-fill, .icon-user-lines-plein    { &:before { content: "\f4db"; } }
.icon-person-plus-fill, .icon-user-plus-plein    { &:before { content: "\f4dc"; } }
.icon-person-plus, .icon-user-plus    { &:before { content: "\f4dd"; } }
.icon-person-square, .icon-user-carre    { &:before { content: "\f4de"; } }
.icon-person-x-fill, .icon-user-x-plein    { &:before { content: "\f4df"; } }
.icon-person-x, .icon-user-croix    { &:before { content: "\f4e0"; } }
.icon-person, .icon-user    { &:before { content: "\f4e1"; } }
.icon-phone-fill, .icon-tel-plein    { &:before { content: "\f4e2"; } }
.icon-phone-landscape-fill, .icon-tel-landscape-plein    { &:before { content: "\f4e3"; } }
.icon-phone-landscape, .icon-tel-landscape    { &:before { content: "\f4e4"; } }
.icon-phone-vibrate-fill, .icon-tel-vibrate-plein    { &:before { content: "\f4e5"; } }
.icon-phone-vibrate, .icon-tel-vibrate    { &:before { content: "\f4e6"; } }
.icon-phone, .icon-tel    { &:before { content: "\f4e7"; } }
.icon-plus-circle-dotted, .icon-plus-rond-dotted    { &:before { content: "\f4f8"; } }
.icon-plus-circle-fill, .icon-plus-rond-plein    { &:before { content: "\f4f9"; } }
.icon-plus-circle, .icon-plus-rond    { &:before { content: "\f4fa"; } }
.icon-plus-square-dotted, .icon-plus-carre-dotted    { &:before { content: "\f4fb"; } }
.icon-plus-square-fill, .icon-plus-carre-plein    { &:before { content: "\f4fc"; } }
.icon-plus-square, .icon-plus-carre    { &:before { content: "\f4fd"; } }
.icon-plus, .icon-plus    { &:before { content: "\f4fe"; } }
.icon-printer-fill, .icon-printer-plein    { &:before { content: "\f500"; } }
.icon-printer, .icon-print    { &:before { content: "\f501"; } }
.icon-question-circle-fill, .icon-question-rond-plein    { &:before { content: "\f504"; } }
.icon-question-circle, .icon-question-rond    { &:before { content: "\f505"; } }
.icon-question-diamond-fill, .icon-question-diamond-plein    { &:before { content: "\f506"; } }
.icon-question-diamond, .icon-question-diamond    { &:before { content: "\f507"; } }
.icon-question-octagon-fill, .icon-question-octagon-plein    { &:before { content: "\f508"; } }
.icon-question-octagon, .icon-question-octagon    { &:before { content: "\f509"; } }
.icon-question-square-fill, .icon-question-carre-plein    { &:before { content: "\f50a"; } }
.icon-question-square, .icon-question-carre    { &:before { content: "\f50b"; } }
.icon-question, .icon-question    { &:before { content: "\f50c"; } }
.icon-telephone-fill, .icon-telephone-plein    { &:before { content: "\f5b4"; } }
.icon-telephone-forward-fill, .icon-telephone-next-plein    { &:before { content: "\f5b5"; } }
.icon-telephone-forward, .icon-telephone-next    { &:before { content: "\f5b6"; } }
.icon-telephone-inbound-fill, .icon-telephone-inbound-plein    { &:before { content: "\f5b7"; } }
.icon-telephone-inbound, .icon-telephone-inbound    { &:before { content: "\f5b8"; } }
.icon-telephone-minus-fill, .icon-telephone-minus-plein    { &:before { content: "\f5b9"; } }
.icon-telephone-minus, .icon-telephone-minus    { &:before { content: "\f5ba"; } }
.icon-telephone-outbound-fill, .icon-telephone-outbound-plein    { &:before { content: "\f5bb"; } }
.icon-telephone-outbound, .icon-telephone-outbound    { &:before { content: "\f5bc"; } }
.icon-telephone-plus-fill, .icon-telephone-plus-plein    { &:before { content: "\f5bd"; } }
.icon-telephone-plus, .icon-telephone-plus    { &:before { content: "\f5be"; } }
.icon-telephone-x-fill, .icon-telephone-x-plein    { &:before { content: "\f5bf"; } }
.icon-telephone-x, .icon-telephone-croix    { &:before { content: "\f5c0"; } }
.icon-telephone, .icon-telephone    { &:before { content: "\f5c1"; } }
.icon-toggle-off, .icon-toggle-off    { &:before { content: "\f5d5"; } }
.icon-toggle-on, .icon-toggle-on    { &:before { content: "\f5d6"; } }
.icon-toggle2-off, .icon-toggle2-off    { &:before { content: "\f5d7"; } }
.icon-toggle2-on, .icon-toggle2-on    { &:before { content: "\f5d8"; } }
.icon-toggles, .icon-toggles    { &:before { content: "\f5d9"; } }
.icon-toggles2, .icon-toggles2    { &:before { content: "\f5da"; } }
.icon-tools, .icon-outil    { &:before { content: "\f5db"; } }
.icon-x-circle-fill, .icon-x-rond-plein    { &:before { content: "\f622"; } }
.icon-x-circle, .icon-x-rond    { &:before { content: "\f623"; } }
.icon-x-diamond-fill, .icon-x-diamond-plein    { &:before { content: "\f624"; } }
.icon-x-diamond, .icon-x-diamond    { &:before { content: "\f625"; } }
.icon-x-octagon-fill, .icon-x-octagon-plein    { &:before { content: "\f626"; } }
.icon-x-octagon, .icon-x-octagon    { &:before { content: "\f627"; } }
.icon-x-square-fill, .icon-x-carre-plein    { &:before { content: "\f628"; } }
.icon-x-square, .icon-x-carre    { &:before { content: "\f629"; } }
.icon-x, .icon-croix    { &:before { content: "\f62a"; } }
.icon-check-lg, .icon-ok-lg    { &:before { content: "\f633"; } }
.icon-envelope-check-1, .icon-envelope-ok-1    { &:before { content: "\f68a"; } }
.icon-envelope-check-fill, .icon-envelope-ok-plein    { &:before { content: "\f68b"; } }
.icon-envelope-check, .icon-envelope-ok    { &:before { content: "\f68c"; } }
.icon-envelope-dash-1, .icon-envelope-dash-1    { &:before { content: "\f68d"; } }
.icon-envelope-dash-fill, .icon-envelope-dash-plein    { &:before { content: "\f68e"; } }
.icon-envelope-dash, .icon-envelope-dash    { &:before { content: "\f68f"; } }
.icon-envelope-exclamation-1, .icon-envelope-exclamation-1    { &:before { content: "\f690"; } }
.icon-envelope-exclamation-fill, .icon-envelope-exclamation-plein    { &:before { content: "\f691"; } }
.icon-envelope-exclamation, .icon-envelope-exclamation    { &:before { content: "\f692"; } }
.icon-envelope-plus-fill, .icon-envelope-plus-plein    { &:before { content: "\f693"; } }
.icon-envelope-plus, .icon-envelope-plus    { &:before { content: "\f694"; } }
.icon-envelope-slash-1, .icon-envelope-slash-1    { &:before { content: "\f695"; } }
.icon-envelope-slash-fill, .icon-envelope-slash-plein    { &:before { content: "\f696"; } }
.icon-envelope-slash, .icon-envelope-slash    { &:before { content: "\f697"; } }
.icon-envelope-x-1, .icon-envelope-x-1    { &:before { content: "\f698"; } }
.icon-envelope-x-fill, .icon-envelope-x-plein    { &:before { content: "\f699"; } }
.icon-envelope-x, .icon-envelope-croix    { &:before { content: "\f69a"; } }

.icon-balloon-fill, .icon-balloon-plein    { &:before { content: "\f706"; } }
.icon-balloon-heart-fill, .icon-balloon-coeur-plein    { &:before { content: "\f707"; } }
.icon-balloon-heart, .icon-balloon-coeur    { &:before { content: "\f708"; } }
.icon-balloon, .icon-balloon    { &:before { content: "\f709"; } }
.icon-box2-fill, .icon-box2-plein    { &:before { content: "\f70a"; } }
.icon-box2-heart-fill, .icon-box2-coeur-plein    { &:before { content: "\f70b"; } }
.icon-box2-heart, .icon-box2-coeur    { &:before { content: "\f70c"; } }
.icon-box2, .icon-box2    { &:before { content: "\f70d"; } }
.icon-braces-asterisk, .icon-braces-asterisk    { &:before { content: "\f70e"; } }
.icon-calendar-heart-fill, .icon-calendar-coeur-plein    { &:before { content: "\f70f"; } }
.icon-calendar-heart, .icon-calendar-coeur    { &:before { content: "\f710"; } }
.icon-calendar2-heart-fill, .icon-calendar2-coeur-plein    { &:before { content: "\f711"; } }
.icon-calendar2-heart, .icon-calendar2-coeur    { &:before { content: "\f712"; } }

.icon-envelope-heart-fill, .icon-envelope-coeur-plein    { &:before { content: "\f736"; } }
.icon-envelope-heart, .icon-envelope-coeur    { &:before { content: "\f737"; } }
.icon-envelope-open-heart-fill, .icon-envelope-ouvrir-coeur-plein    { &:before { content: "\f738"; } }
.icon-envelope-open-heart, .icon-envelope-ouvrir-coeur    { &:before { content: "\f739"; } }
.icon-envelope-paper-fill, .icon-envelope-paper-plein    { &:before { content: "\f73a"; } }
.icon-envelope-paper-heart-fill, .icon-envelope-paper-coeur-plein    { &:before { content: "\f73b"; } }
.icon-envelope-paper-heart, .icon-envelope-paper-coeur    { &:before { content: "\f73c"; } }
.icon-envelope-paper, .icon-envelope-paper    { &:before { content: "\f73d"; } }
.icon-heart-pulse-fill, .icon-coeur-pulse-plein    { &:before { content: "\f76e"; } }
.icon-heart-pulse, .icon-coeur-pulse    { &:before { content: "\f76f"; } }
.icon-heartbreak-fill, .icon-coeurbreak-plein    { &:before { content: "\f770"; } }
.icon-heartbreak, .icon-coeurbreak    { &:before { content: "\f771"; } }
.icon-hearts, .icon-coeurs    { &:before { content: "\f772"; } }
.icon-house-heart-fill, .icon-accueil-coeur-plein    { &:before { content: "\f775"; } }
.icon-house-heart, .icon-accueil-coeur    { &:before { content: "\f776"; } }
.icon-person-heart, .icon-user-coeur    { &:before { content: "\f77a"; } }
.icon-person-hearts, .icon-user-coeurs    { &:before { content: "\f77b"; } }
.icon-phone-flip, .icon-tel-flip    { &:before { content: "\f77c"; } }
.icon-trash3-fill, .icon-poubelle3-plein    { &:before { content: "\f78a"; } }
.icon-trash3, .icon-poubelle3    { &:before { content: "\f78b"; } }// 
// 

 // 

 // 

.c_site 						{ color: 											@couleur-defaut; }
.bg_site 					{ background-color: 	@couleur-defaut; }
.fill_site 					{ fill: 													@couleur-defaut; }
.stroke_site 		{ stroke: 										@couleur-defaut; }

 // 

.margebas { margin-bottom:@gridGutterWidth; }
.filetbas {
	padding-bottom: 0.5em;
	margin-bottom: 1.4em;
	border-bottom: 1px solid @grisLight;
}
.filethaut {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid @grisLight;
}

// 

a.btn 				{ color: #fff; }
.btn-petit	{ font-size: .9em; }
.btn-fleche:after{
	content: "\f285";
	font-family: 'bootstrap-icons';
	font-weight: 600;
	margin-left: 5px;
	font-size: .7em;
 }
 // Les boutons aux couleurs les plus sombres
.boutons, .bouton {
	 .submit {
		.transition(all .2s ease-out);
		.btn();
	}
}
.btn-vert 			{ .button-variant(#fff,@vert, @vert); }
.btn-bleu	 		{ .button-variant(#fff,@bleu, @bleu); }
.btn-rouge 		{ .button-variant(#fff,@rouge, @rouge); }
.btn-jaune 		{ .button-variant(#fff,@jaune, @jaune); }
.btn-orange 	{ .button-variant(#fff,@orange, @orange); }
.btn-rose		 	{ .button-variant(#fff,@rose, @rose); }
.btn-violet 		{ .button-variant(#fff,@violet, @violet); }
.btn-gris 			{ .button-variant(#fff,@gris, @gris); }
.btn-grisLight	{
	.button-variant(#fff,@grisLight, @grisLight);
	color: #000 !important;
}

// 

.grille {
	display: flex;
	flex-wrap: wrap;
}

.liste-item, .liste-items{
 &.row, & >.row{
	.grille;
	text-align: left;
	}
}

// 

.liste-items {
	 &.row, & >.row{
		.grille;
		text-align: left;
	}
	.item {
		.margebas;
		.surtit{
			line-height: 130%;
			padding: .4em 3%;
		}
		.tit {line-height: 1.2em; }
		.date{
			font-size: 1.15em;
			color: @couleur-defaut;
			margin: 0 0 0.4em;
		}
		.logo {
			min-width: 100%;
			display: block;
			overflow: hidden;
		}
		.desc, .introduction {
			font-weight: 400;
			line-height: 1.5em;
			p {
				margin: 0 0 .5em;
				line-height: 1.5em;
			}
		}
		.btn{
			color: #fff;
			clear: both;
		}
	}
}

.liste-grille {
	margin-top: 3em;
	.item {
		background-clip: content-box;
		height: 15em;
		text-align: center;
		background-position: center;
		background-size: cover;
		.margebas;
		.tit {
			display: flex;
			align-items: center;
			height: 100%;
			background: #00000055;
			color: #fff;
			text-align: center;
			font-size: 1.9em;
			padding: 1em;
			font-weight: 600;
			line-height: 1.3em;
			justify-content: center;
			border-bottom: 6px solid @couleur-defaut;
			&.petit { font-size: 1.3em; }
		}
	}
	.lrub {margin: 0 0 2em; }
}

// 

.item {
	.box-sizing(border-box);
	overflow: hidden;
}
.item:before, .item:after {		.box-sizing(border-box); }

 // 

.item-auteur {
	text-align: center;
	position: relative;
	a {
		cursor: pointer;
		&:hover { text-decoration: none; }
	}
	.logo {
		border-bottom: none;
		width: 100%;
		position: relative;
		background: transparent center no-repeat url('https://ericbocquet.fr/squ/squelettes/ergo/svg/user.svg') ;
		background-size: cover;
		.absolute, .spip_logos {
			position: absolute;
			top: 0;
			left: 0;
			&, img {
				width: 100%;
				height: auto;
			}
		}
		&::after {
		  content: '';
		  display: block;
		  padding-bottom: 100%;
		}
	}
	.tit{
		line-height: 1.1em;
		font-size: 1.2em;
		font-weight: 700;
		color: #000;
		text-transform: uppercase;
		width: 100%;
		&::first-line{text-transform: none; }
	}
	.details	{
		font-size: 0.75em;
		line-height: 1.5em;
		font-style: italic;
		margin-top: 0.7em;
	}
	.message{
		img {
			width: auto;
			height: 21px;
			margin: 0 2px;
		}
		p { margin-bottom: 0; }
		margin-bottom: 0;
	}
}

// 

.filtre {
	background-color: @grisLighter;
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 1.1em;
	margin: 2em 0;
	a {
		margin: 0 .8em;
		font-weight: 500;
		&:hover { color: @couleur-defaut; }
	}
	.tit {margin-bottom: .3em; }
	.titselect {
		display: inline-block;
		text-align: right;
		padding: 1em;
	 	width: 8%;
	}
	select {
		padding: .1em .3%;
		border-radius: .2em 0 0 .2em;
		&.selectdate{margin-right: 6%; }
	}
}

// 

/* -------------- Page Auteurs -------------- */

.page_auteurs {
	.item-auteur {
		overflow: visible;
		.formulaire_contact_libre {
			position: absolute;
			z-index: 10;
			box-shadow: 5px 5px 12px #0004;
			border-top:5px solid @couleur-defaut;
			margin-bottom: 5em;
			&::before {
				content: '';
				width: 30px;
				height: 30px;
				background: @grisExtraLighter;
				display: block;
				border: 5px solid @couleur-defaut;
				border-width: 5px 5px 0 0;
				position: absolute;
			}
			form {
				legend {
					background-color: transparent;
					font-size: 1.5em;
					color: @couleur-defaut;
				}
				&::before {
					content: 'x';
					position: absolute;
					top: 0;
					right: 0;
					padding: 10px 17px;
					cursor:pointer;
					display: block;
					overflow: hidden;
					font-size: 27px;
					color:	#458;
				}
				& > div {
					//  On detourne un objet pour en faire une croix de fermeture
					display: block;
					overflow: hidden;
					top: 0;
					right: 0;
					position: absolute;
					width: 40px;
					height: 40px;
					cursor: pointer;
					float: right;
					font-size: 1.4em;
				  font-weight: 200;
				  color: @gris;
					&:hover{ color: @couleur-defaut; }
				}
			}
			fieldset{ width: 100%;  }
			.previsu {
				border: 1px solid #dd0;
				border-radius: 5px;
				padding: 0.6em 1em 0;
				background: #ffd;
				margin: 1em 0 2em;
				h2 {
					font-size: 30px;
					border-bottom: 1px solid #cc9;
					margin: 0 0 0.4em;
					padding: 0 0 .2em;
				}
			}
		}
	}
	#laliste, .laliste {
		.row > div {
			&:nth-of-type(6n), &:nth-of-type(7n){
				.formulaire_contact_libre {
					right:0;
					&:before{
						transform: rotate(-45deg) translate(-14px,-61px);
						right:0;
					}
				}
			}
		}
	}
}

/* -------------- Accueil du compte -------------- */

.grosboutons {
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	min-width: 100%;
	.grosbouton{
		position: relative;
		min-height: 17em;
		margin-bottom: 2em;
		* {	.animation(.5s); }
		.ico, svg{
			width: 70%;
			height: auto;
			margin: 0 auto;
			text-align: center;
			cursor: pointer;
		}
		.legende{
			position: absolute;
			color: @grisDark;
			bottom: 0;
			left: 50%;
			height: 2.6em;
			width: 100%;
			transform: translate(-50%, -50%);
			.titit{
				text-transform: uppercase;
				font-size: 1.2em;
				margin: 0.2em 0;
				font-weight: 500;
				display: block;
			}
		}
		&:hover {
			 .ico, svg	{
			 	width: 80%;
			 	margin-top: -10px;
			 	}
			 .legende 	{ color: @rouge; }
		}
	}
}

/* -------------- Page Paiement  -------------- */

.page_paiement .contenu, .formulaire_paiement {
		text-align: center;
		p {font-size: .9em;}
	.payer_modes{
	  margin-bottom: 19px;
	  text-align: center;
		.item  {
			margin-top: 3em;
			box-shadow: 0px 0px 40px #0005;
		}
	}
	.intertit {
		.titencadre();
		.filetapres;
		padding: 0.2em 2%;
		margin: 2.5em auto 1.9em;
		font-size: 1.4em;
		line-height: 180%;
		font-weight: 400;
		&::after {
			margin-top: -0.5em;
		}
	}
	.annuler .note { display: none; }
	.h4{
		margin-bottom: 0.7em;
		font-weight: 500;
		font-size: 1.1em;
	}
	.selectionnez{
		.titencadre;
		display: inline-table;
		margin: 2em 0 2.5em;
		padding: 0.5em 0.8em;
		background-color: @jaune;
	}
	.commande {
		caption { color:#000; }
		padding: 2.3vw;
	}
	#formulaire_mode_paiement{ 	text-align: center; }
	.payer_modes {
		.grille();
	   justify-content: center;
		.item {
			background-size: 40%;
			padding-top: 147px;
			background-position: center 1.2em;
			background-repeat: no-repeat;
			background-size: 40%;
			text-align: center;
			border: 1px solid #ccc;
			border-radius: 5px;
			padding-top: 40%;
			padding: 19% 1em 1em;
			background-position: center 20px;
			margin: 3em 1em 2em;
			h4 { margin: .7em auto; }
			&.cheque { 				background-image: url('https://ericbocquet.fr/squ/squelettes/ergo/svg/paiement/cheque.svg'); 		}
			&.virement {			background-image: url('https://ericbocquet.fr/squ/squelettes/ergo/svg/paiement/virement.svg'); 		}
			&.internetplus { background-image: url('https://ericbocquet.fr/squ/squelettes/ergo/svg/paiement/internet.svg'); 		}
			&.paypal {					background-image: url('https://ericbocquet.fr/squ/squelettes/ergo/svg/paiement/paypal.svg'); 		}
			&.cmcic, &.ogone, &.paybox, &.payzen, &.sips, &.sipsv2, &.stripe, &.systempay {
				background-image: url('https://ericbocquet.fr/squ/squelettes/ergo/svg/paiement/carte.svg');
			}
			button img { display: none; }
		}
	}
	.boutons .submit {
		.btn-defaut();
		font-size: 1em;
		margin-bottom: 1em;
	}
	.bouton {
		.filethaut();
		overflow: hidden;
		display: block;
		width: 100%;
		padding: 3em 0;
		float: left;
		text-align: center;
		.submit { 	.btn-rouge(); }
	}

}

/* -------------- PAGE PANIER -------------- */

.page_panier .contenu {
	.btn, .formulaire_spip form button.submit {
		font-size: 18px;
		padding: 0.4em 2%;
	}
	.btn-prev 		{ 							float: left; }
	.btn-fleche { 							float: right; }
	.formulaire_panier {
		margin-bottom: 2em;
		thead th, td 													{ font-size: 16px; }
		thead th 															{ font-weight: 600; }
		thead #panier_quantite 			{ text-align: center; }
		input.quantite 		{ padding: 0; }
		.quantite {
			text-align: center;
			.btn_supprimer {
				padding-top: .1em;
				span  	{ font-size: 13px; }
			}
			.quantite-groupe 					{
				justify-content: center;
				padding-top: 1em;
			}
			.btn:hover { color: @couleur-defaut; }
		}
		.panier-vide {
		  padding: @alert-padding;
		  margin-top: @line-height-computed;
		  border: 1px solid transparent;
		  font-size: 16px;
		  text-align: center;
		  border-radius: @alert-border-radius;
		  background-color: @alert-rouge-bg;
		  border-color: @alert-rouge-border;
		  color:  @alert-rouge-text;
		  overflow: hidden;
		  min-width: 10%;
		}
	}
}

@keyframes urgence {
  0% {
  	margin-bottom: -1000px;
  	opacity: 0;
  }
  10% {
  	margin-bottom: -1000px;
  	opacity: 0;
  }
  10% {
  	margin-bottom: 0;
  	opacity: 100;
  }
}

.alerte_urgence {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #b91f1fee;
	text-align: center;
	font-size: 18px;
	color: #fff;
	z-index: 999999;
	padding: 1em 0.7em;
	text-align: center;
	animation: urgence 25s 1;
	a,.cnt, .desc, .lls { color: #fff; }
	h3.spip {
		text-transform: uppercase;
		font-size: 1.6em;
		text-align: center;
		color: #fff;
		line-height: 1.2em;
		margin: 0.3em 1em;
		display: block;
	}
	p {
		line-height: 1.4em;
	}
	.lls {
		margin-top: .7em;
		text-align: center;
		text-decoration: underline;
		font-weight: 400;
	}
	.fermer { margin-top: -.5em; }

}

#debug-nav { line-height: 16px; }

// 
// test
/*  */

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.eot');
  src: url('https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.svg#n-font-svg-id') format('svg');
}

/*  */

body {
	background-color: #fff;
	font-size: 1.1em;
	line-height: 1.2em;
	color: #221F1F;
	font-family: @sansFontFamily;
	background-clip: padding-box;
}

.page {
	text-align: left;
	background-color: transparent;
	font-size: 16px;
	margin-bottom: 0;
	.content {
		position: relative;
		min-height: 440px;
	}
}

.container{
	text-align: center;
	overflow: visible;
	 .row{
		overflow: hidden;
		min-width: 51%;
	}
}

/*  */

.navsup {
	min-height: 38px;
	text-align: center;
	padding: 8px;
	border: 0;
	.contact {
		background: url() 6px 16px no-repeat ;
		padding-left: 22px;
	}
	.btsearch {
		.deplie {
			padding: 0;
			outline: 0;
		}
	}
	li > a {
		color: @grisDark;
		&:hover {
			color: @couleur-defaut;
			img { .opacity(80); }
		}
	}
	.nav {
		text-align: right;
		&.pull-right { width: 60%; }
		li a { padding: .5em .0em .3em; }
		li.pp {
			background: url() 8px 11px no-repeat ;
			padding-left: 31px;
			a { padding-bottom: .3em;}
		}
	}
	.nav .icones {
		li a { padding: .6em 0 0 10px; }
    // Equivalent à first-child associé à une class
    .btico a { padding:  3px 3px 0 11px; } // On crée la régle pour le first child
    .btico ~ .btico a { padding: 0.3em 3px 0 0px; } // On l'annule pour le reste
  }
  .formvisible{
  	background-color: @grisLighter;
  	max-height: 49px;
  }
  .active > a {
  	background-color: transparent;
  	box-shadow: none;
  	font-weight: 600;
  }
}

.header {
	background-position: center center;
	z-index: 1000; // Doit pouvoir passer au dessus d'une Googlemap
	background-color: @couleur-defaut;
	width: 100%;
	overflow:hidden;
	padding: 0 0 0;
	.interieur {
		padding-left: 0;
		padding-right: 0;
		.logo {
		  text-indent: -9999px;
		  background: transparent url('') center;
		  background-size: cover;
		  z-index: 5;
		  position: relative;
		  height: @navbarHeight;
		  width: 403px;
		  float: left;
		  margin: 0;
		}
	}

	.formvisible{
		#formulaire_recherche {
			transition-property: all;
			transition-duration: .3s;
			transition-timing-function: cubic-bezier(.25,.46,.45,.94);
			form {
				width: auto;
				background-color: transparent;
				border: 0px solid #fff;
				.text {
					border-radius: 0;
					border: 0 solid #fff;
					text-transform: uppercase;
				}
				.btn{
					box-shadow: 0 0 rgba(0,0,0,0);
					border: 0 solid #fff;
					color: #fff;
				}
			}
		}
	}

	.menu-liste {
		padding: 0;
		ul {
			margin: 0 auto;
			height: 45px;
		}
	}
}


.header, .nav-collapse, .navsup {
	.menu-toggle  {
		height:40px;
		background-image:url();
		background-repeat: no-repeat;
		display:none;
		padding-left: 45px;
		width:100%;
		text-align:left;
		cursor:pointer;
		background-color: #D9D9D9;
		color:#333;
		span {
			padding-top:10px;
			display:inline-block;
		}
	}

	ul {
		position: relative;
	}

	li {
		position: relative;
		display: inline-block;
		height: 45px;
		vertical-align: top;
		text-align: center;
		a, span {
			display: block;
			padding: 15px 0px 14px 24px;
			color: #FFF;
			text-align: left;
			font: 300 1.2em/100% @sansFontFamily;
			line-height: 1.2em;
			&.glyphicon{
				font-family: 'Glyphicons Halflings';
				padding: 0;
			}
		}
	}

	li li {
		display: block;
		margin-bottom: 5px;
		width: auto;
		background: none;
		font-size: 14px;
		height: inherit;
		font-family: @sansFontFamily;
		a {
			padding: 5px 10px 5px 20px;
			width: 170px;
			text-align: left;
			text-transform: none;
			font-size: 14px;
		}
	}

	ul ul {
		position: absolute;
		top: 45px;
		left: 0;
		z-index: 100;
		display: none;
		margin: 0;
		width: auto;
		height: auto;
		background-color: #fff;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
		a:hover { 	color:#A0171F;}
	}

	.header_fond .gauche {    	width: 10.5%;}
	li#header_titre {
		position: absolute;
		left: 50%;
		width: 33.33%;
		transform: translate(-50%, 0);
	}

}

.nav-collapse .ssmenu ul li { padding: 0.4em 0em; }



/*  */

div sup.typo_exposants { font-size: 50%; }

/*  */

.rouge 			{ color: @rouge; }
.vert 				{ color: @vert; }
.bleu 				{ color: @bleu; }
.jaune 			{ color: @jaune; }

/*  */

a {
	color: @couleur-defaut;
	&:hover { color: @couleur-defautDark; }
	.cnt, .desc { 	color: #000; }
}

.lls {
	padding-bottom: .5em;
	font-weight: 500;
	padding-right: 20px;
	color: #000;
	display: block;
	margin-top: 2em;
}

/*  */

.grotit {
	font-size: 2.2em;
	text-transform: uppercase;
	margin: 0 0 .8em;
	&.violet { 		border-color: @violet; }
	&.orange { 	border-color: @orange; }
	&.vert { 				border-color: @vert; }
	&:first-letter{ text-transform: uppercase; }
}

.intertit {
	font-size: 1.8em;
	font-weight: 600;
	margin: 0.4em 0 .5em;
}

.frise{
	background-color: @grisLighter;
	text-align: center;
	padding: 2em 0 0;
	margin-top: 3em;
	margin-bottom: 3em;
	.grotit { font-size: 2.4em; }
}

//  TItre avec un double soulignement assez esthétique ( ma foi )
.tit_doubleliseret {
	text-align: left;
	margin: 0 0 1em;
	position: relative;
	border-bottom: 8px solid @grisLighter;
	padding-bottom: 0.4em;
	font-size: 2.3em;
	color: @grisDark;
	background: #fff;
	color: #000;
	font-weight: 300;
	padding: 0 0 0.4em;
	width: auto;
	line-height: .9em;
	& a{
		color: @grisDarker;
		padding-bottom: 0;
	}
	&:after{
    content: '';
    width: 92vw;
    display: block;
    border-bottom: 1px solid @gris;
    float: left;
    margin-top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}


/*  */

/* ------- GENERAL ------- */

.item {
	overflow: hidden;
	min-width: 12px;
	.surtit {
		font-weight: 500;
		margin-bottom: .8em;
		text-transform: uppercase;
	}
	.entourelogo{
		text-align: center;
		margin-bottom: 1.4em;
	}
	.auteur{
		font-style: italic;
		a {
			color: #000;
			font-style: italic;
			font-size: 1em;
			display: inline-block;
		}
	}
	.box-sizing(border-box);
	&:before, &:after {		.box-sizing(border-box); }
}

/*  UTILE pour les descriptifs mis en forme : Fonction pour adapter du texte formaté spip dans une balise */
.textespipdedans(){
		// a:focus, a:hover, a:active { text-decoration: underline; }
		p{ margin: 0 0 0.5em; }
		p:last-of-type { margin-bottom: 0; }
		sc{ font-variant: small-caps; }
		h3.spip, h4.spip {
			font-size: 1.4em;
			margin-bottom: .3em;
		}
		h4.spip {margin: .4em 0; }
		h5.spip {
			font-size: .9em;
			margin: 0.2em 0 .1em
		}

		ul.spip, ol.spip { margin: 0 0 0.3em 0.4em; }
		ul.spip {
			list-style: none;
			position: relative;
			margin: 0;
			padding-left: 0;
			li {
				padding: .1em 0 .3em .8em;
				line-height: 140%;
				margin-bottom: .3em;
				position: relative;
				&:before {
					content: " ";
					background-color: @couleur-defaut;
					top: 0.1em;
					width: 0.5em;
					height: .5em;
					left: 0px;
					position: absolute;
					margin: 0.6em .1em 0 0;
					border-radius: 50%;
				}
			}
		}
		ol.spip li {
		  margin:0 0 1.2em .3em;
		  &:before {
				padding: 0.1em 0.5em 0 0.7em;
				margin-top: -1.15em;
				line-height: 150%;
				font-size: .9em;
		  }
		}
		.spip_out, .spip_glossaire, .spip_in { font-size: .95em; }
		.spip_out, .spip_glossaire{background-position:0.5em 0.4em; }
		.caractencadre-spip     {
			font-size: .95em;
			padding: 0.1em 0.2em;
		}
		.cs_blocs {
			float: none;
			width: 100%;
			padding: 0;
			margin-bottom: 0;
			border-left: 0 solid #458;
			.blocs_titre {
				font-size: 1.2em;
				&:before {
					top: -.05em;
					padding: .4em;
				}
			}
		}
}

/**/
.content {
	.item .cnt, .item .desc, .chapo { .textespipdedans(); }
}

/* ------- SEULEMENT TITRE ET LOGO ------- */

.liste-titrelogo {
	display: flex; // A tester
	flex-flow: row wrap; // A tester
	text-align: left;
	min-width: 1%;
	.item  {
		padding-top: 0;
		position: relative;
		font-size: 1.4em;
		overflow: hidden;
		display: block;
		.legende{
			position: absolute;
			left: 0;
			top: 0;
			min-height: 4.5em;
			border-bottom: 3px solid #fff;
			background-size: cover;
			line-height: 1.2em;
			font-size: 1.2em;
			background-color: @couleur-defaut;
			transition-duration: .5s;
			.surtit {
				line-height: 1.3em;
				font-weight: 300;
				text-transform: none;
				margin: 0;
				display: block;
				color: #fff;
			}
			.tit {
				color: #fff;
				display: block;
				font-weight: 500;
				line-height: 1.2em;
			}
		}
		.logo {
			min-width: 100%;
			display: block;
			margin-top: 4.5em;
			overflow: hidden;
			transition: .5s;
			img { transition: .5s; }
		}
		.desc { display: none;	}
	}
	.item a:hover {
		img {
			max-width: 110% !important;
			margin-left: -5%;
		}
	}
}

/* ------- EVENEMENTS ------- */

.item-evt {
	text-align: left;
	margin-bottom: 1em;
	.date {
		font-weight: 400;
		font-size: 1.4em;
		line-height: 1.2;
		margin-bottom: 8px;
		display: block;
	}
	.couleur{
		border-left: 5px solid @couleur-defaut;
		>* {margin-left: 14px; }
		.stit{
			background-color: @couleur-defaut;
			text-transform: uppercase;
			color: #fff;
			font-size: 1em;
			margin-left: 0;
			padding: 0.3em 0.6em 0.3em 0.3em;
			display: inline-block;
		}
		.tit{
			font-size: 1.3em;
			line-height: 107%;
			font-weight: 600;
			margin-bottom: 0.4em;
			margin-top: 0.4em;
		}
		.introduction{
			color: @gris;
			font-size: .9em;
			font-weight: 400;
			p { margin-bottom: .5em; }
			h3 { margin-bottom: .5em; }
		}
		.lienlieu {display: block;}
	}
	.lls{ margin-top: .5em; }
	.couleurnum(@couleur) {
		border-left: 5px solid @couleur;
		.stit{ background-color: @couleur;}
	}
}

/* ------- VIDEO ------- */

.content .item-video {
	text-align: left;
	.tit {
		// margin: 1em 0 .5em; Problematique pour Dunkerque centre
		// color: #000; Problematique pour Dunkerque centre
		font: 700 1.5em @labeur;
		// line-height: 130%;
	}
	.btn, .lls {
		text-transform: none;
		font-size: 600 0.9em @labeur;
		margin-top: 1em;
	}
	.lls {
		// padding: 0 0 1em; Problematique pour Dunkerque centre
		.btn-fleche-bas4;
		&::after {
			font-family: 'Glyphicons Halflings';
			color: @couleur-defaut;
			vertical-align: top;
	    margin-left: .3em;
		}
	}
	.bt-play {
		position: absolute;
		transform-origin: 50%;
		top: 50%;
		left: 50%;
		transform: translatex(-50%) translatey(-50%);
	}
	.btcache{
		.btn-fleche-haut4;
		&::after {font-family: 'Glyphicons Halflings'; }
	}

	.mediainterieur  {
		// padding-bottom: 0; Annulation suite à problème Dunkerque centre
	  max-height: 65%;
	  // width: 17%; Annulation suite à problème chemin vert
		transition: .5s;
		img 				{ width: 100%; }
		svg 				{
			width: 100%;
			height: auto;
			overflow: visible;
			.fill_site {
				stroke: #fff;
				stroke-width: 3px;
			}
		}
		// &:hover { width: 20%; } Annulation suite à problème chemin vert
		iframe 		{ padding-bottom: 0; }
	}

	.btcache { margin: 0; }

}

/* ------- BREVE ------- */

.item-breve {
	.article {
		h3.spip{
			font-size: 1.5em;
			margin-bottom: 0.4em;
			padding: 0 0 0.15em;
			width: 93%;
			margin-top: 0;
		}
	}
}

/* ------- Documents ------- */

.credits {
	text-transform: none;
	font-size: 0.7em;
	line-height: 1.5em;
	font-weight: 300;
	font-style: italic;
}

.liste-doc {
	&> .row { display: flex; }
	.spip_logo{
		width: 100%;
		height: auto;
		margin: 0 0 .3em;
	}
	.item{
		background: @grisLighter;
		padding: 0.6em 0.4em 0.6em;
		border-radius: 0.2em;
		margin-bottom: 1.1em;
		.tit {
	    padding: 0.6em;
			font-size: 1em;
	    margin-top: 0;
	    text-align: center;
		}
	}
	.coldroite { margin-top: .2em; }
}

.liste-doc.galerie {
	.grotit-doc { margin-bottom: 1.1em; }
	.item { 	padding: 0; }
	.entourelogo {
		 width: 100%;
		 margin-bottom: 40px;
	}
	.hasbox{
		position: relative;
		// margin-bottom: 0; Nuit à la galerie en dessous des articles des sénateurs nord
		transition: .5s;
		&::after {
			content: "";
			background-repeat: no-repeat;
			background-position: center;
			background-image:url('https://ericbocquet.fr/squ/squ-z/ergo/agrandir.png') ;
			background-size: 40% ;
			.animation(.5s);
			width: 40%;
			height: 40%;
			display: block;
			position: absolute;
			top: 30%;
			left: 30%;
			z-index: 20;
		}
		&:hover {
			opacity: .8;
			img { background-color: @couleur-defaut; }
			&::after {
				background-size: 50% ;
			}
		}
	}
}
#contenu, .contenu {
	.liste-doc.galerie .spip_logo { margin: 0; }
}

/* ------- MOTS ------- */

.liste-mot{
	background: @grisLighter;
	overflow: hidden;
	margin-bottom: 3em;
	padding: 1em 1em .3em;
	.tit-mot, .mc {
		display: inline-block;
	}
	.tit-mot {
		font-size: 1.2em;
		font-weight: 500;
		margin: 0 .3em 0 0.3em;
		text-transform: uppercase;
		color: @grisDark;
		line-height: 160%;
		vertical-align: middle;
	}
	.mc{
		background: #fff;
		padding: 0.5em 0.7em .4em;
		margin: 0 .7em .7em 0;
		border-radius: .2em;
		text-transform: uppercase;
		&:hover {
			background-color: @couleur-defaut;
			color: #fff !important;
		}
	}
}

/*  */

.ancrepagin, .comment.hreview > a, a[name="ajax_ancre"], a[name*="pagination"] {
	position: relative;
	top: -@navbarHeight - 80px;
}

/*  */


/*  */

.notes > div {
	position:relative;
	top: -@navbarHeight - 80px;
	p {
		position: relative;
		top: @navbarHeight + 80px;
	}
}

.spip_note_ref a {
	position:relative;
	padding-top: @navbarHeight + 80px;
}

/*  */

/*  */

.owl-carousel {
	margin-bottom: 4em;
	.item {
		border-bottom: 4px solid @couleur-defaut;
		margin-top: 1em;
		.logo {	img {height: auto; } }
		.legende {
			position: absolute;
			bottom: -2px;
			left: 0;
			display: block;
			width: 60%;
			text-align: center;
			padding: 2% 20% 1%;
			font-size: 1.2em;
			.tit {
				font-size: 2em;
				line-height: 1.2;
				margin: .1em 0;
			}
			.desc {
				font-size: 1.3em;
				line-height: 140%;
				font-weight: 400;
				color: #000;
				padding-bottom: 1%;
				* { color: #000; }
			}
		}
	}
	.owl-next, .owl-prev {
		height: 80px;
		margin-top: -20px;
		font-weight: 100;
		color: #000;
		border: 0 solid #ffffff;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		font-size: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		background: transparent url('https://ericbocquet.fr/squ/squelettes/ergo/svg/fleche.svg') center bottom no-repeat ;
		.opacity(100);
		&:hover { .opacity(80); }
	}
	.owl-prev {left: -4.5%; }
	.owl-next {right: -4.5%; }
}
.owl-dots .owl-dot {
  span{
  	width: 14px;
    height: 14px;
    background-color: #000;
  }
  &:hover, &.active {
  	span { background-color: @couleur-defaut; }
  }
}

/*  */

.contenu {
	text-align: left;
	font-weight: 400;
	position: inherit;
	margin-top: 0 ;
	line-height: 160%;
	p {
		margin-top: 0;
		margin-bottom: 1em;
		line-height: 140%;
	}
}

/*  */

.asidedroite {
	.grotit{
		background: @couleur-defaut;
		color: #fff;
		font-weight: 500;
		width: 100%;
		font-size: 1.5em;
		line-height: 1.2em;
		text-transform: none;
		padding: 0.4em .5em .3em;
		a { color: #fff }
	}
	.encartcompte {
		.item{
			margin-bottom: 1.8em;
			padding:1em;
			background: #f5f5f5;
			.champ { margin-bottom: .4em;}
			.label {
				display: inline-block;
				border-bottom: 3px solid #bacbcc;
				margin-right: 0.3em;
				font-weight:600;
			}
			ul.nav{
				padding: 0;
				list-style: none;
				.btico{margin-bottom : .5em; }
			}
		}
		.grotit{ padding: 0.6em 4%; }
	}
	.liste-doc{
		.tit {
			text-align: left;
			padding: .2em 0 0.3em;
			font-size: 1.1em;
			color: #000;
		}
		.spip_logo{		margin-top: .25em; }
		.extension { margin: 0 0 0.5em; }
	}
	.icones, .nav, .btico { img { max-width: 22px; } }
}
.encart > .item {
	padding: 1em;
	ul.nav{
		padding: 0;
		list-style: none;
		li {
			margin-bottom : .5em;
			display: block;
			width: 100%;
		}
	}
}

/*  */

.chemin{
	margin-bottom: .3em;
	.item-chemin {
		color: @grisDark;
		font-weight: 400;
		&::before {
			content: ">";
			display: inline-block;
			margin: 0 .5em .2em;
			color: @couleur-defaut;
			vertical-align: middle;
		}
		&:hover { color: @couleur-defaut; }
	}
	a:hover {
		background-color: transparent;
		text-decoration: underline;
	}
	a.item-chemin:first-of-type{
		.icon;
		.icon-accueil-plein;
		&::before {
			font-size: 0.85em;
			vertical-align: baseline;
			line-height: 1em;
			margin-right: 1em;
			color: @gris-light;
		}
		&:hover::before { color: @couleur-defaut; }
	}
}

/*  */

.chapo {
	margin-bottom: .6em;
	font-weight: 500;
	font-size: 1.4em;
 	p { 		margin-top: 0; 	}
 	p + p { 		margin-top: .6em; 	}
	h3 {
		margin: 1.5em 0 1em;
		font-weight: 600;
		font-size: 1.6em;
	}
}

.intro {
	margin-bottom: 2em;
	overflow: hidden;
	.grosurtit, .grosoustit {
		text-align: left;
		font-weight: 400;
		color: #000;
		font-size: 2.3em;
	}
	.grosurtit { margin-top: .7em;}
	.grotit {
		font-size: 3.2em;
		font-weight: 600;
	}
	.chapo {
		margin-bottom: 1.8em;
		text-align: left;
	}
}

/*  */


.laliste {
	.filtre {
		margin: 2em -100%;
		width: 300%;
		.select-design{
			display: inline-block;
			.titselect{
				width: auto;
				font-weight: 500;
			}
			select {
				max-width: 15em;
				padding: 0.1em .8em;
				border-radius: 0.2em 0 0 .2em;
				border: 1px solid @bleu;
				height: 2.4em;
				font-size: 0.9em;
				display: inline-block;
				min-width: 14em;
			}
		}
	}
	.date {
		font-weight: 400;
		font-size: 1.5em;
		line-height: 1.2;
		margin-bottom: 0;
		display: block;
	}
	.item{
		text-align: left;
		margin-bottom: 2em;
		clear: none;
		.spip_logos {margin: 0 1.5em 0 0; }
	}

	.spip_logos { border-bottom: 0px solid #fff; }

	// Liste de type sites partenaires :

	.item-site {
		.tit a{font-size: 1.1em; }
		.spip_logo {
			text-align: center;
			margin: .3em auto .5em;
			text-align: center;
			width: auto;
			padding: 10% ;
			max-height: 200px;
			height: auto;
			float: none;
		}
		.centre {
			.liensite {
				background-color: @grisLighter;
				padding: 0.2em 0.6em 0.3em;
				margin: 1.1em 0 0;
				text-align: center;
				font-style: italic;
				font-weight: 600;
				font-size: .9em;
				display: inline-block;
			}
		}
	}
}

.content .titagenda {
	background: @couleur-defaut;
	color: #fff;
	padding: 0.5em .8em .6em;
	font-size: 1.8em;
	margin-bottom: 0;
	a { color: #fff; }
}

.spip_modele {
	display: block;
	float: right;
	width: 25%;
	border: 1px dotted #666;
}

/*  */

/*  */

/* -------- Exemple : listes d'événements sous articles -------- */

.page_type_contenu {

	.asidedroite {
		overflow: hidden;
		.encart {
			background: @grisLighter;
			padding: .1em 1em 1em;
			max-width: 100%;
			margin-bottom: 2em;
			// font-weight: 500; (supprimé suit eà incohérence sur liberté )
			.date {
				font-size: 1.5em;
				font-weight: 600;
				margin: 0.6em 0 0.7em 0;
				padding: 0;
				display: block;
				background-color: transparent;
				border: 0 solid transparent;
			}
			.icones, .nav {
				vertical-align: middle;
				img {
					max-width: 22px;
					margin-right: 0.3em;
					vertical-align: middle;
				}
			}
			h3 {
				font-weight: 600;
				margin: 0.7em 0 0.3em;
				border-bottom: 3px solid #ccc;
				display: table;
				font-size: 1.2em;
				clear: both;
				padding-bottom: 0.2em;
			}
			p {margin: 0; }
			.labeur p { margin-bottom: .7em; }
			ul.spip li { padding-top: 0; }
		}
	}

}

/*  */

.content {

	.article {

		.soustit{
			color: @bleuDark;
			margin: 0 0 1.3em;
			font-size: 2.2em;
		}
		.texte 												{ margin-bottom: 4em; }
		.logo_article 							{ margin-bottom: 1.2em; }
		.liste-doc .grotit-doc		{ margin-bottom: 1em; }

	}

}

.content .article, .mep_article {
	/*  */
	/* --------- mixins --------- */

@font-face {
	font-display: block;
  font-family: 'bootstrap-icons';
  src: 	url(https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff2) format('woff2'),
       		url(https://ericbocquet.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff) format('woff');
}

.gradient-directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
  background-color: @endColor;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
  background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
  background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}

// Catchall baseclass
.icon {
  position: relative;
  &::before {
  	display: inline-block;
	  font-style: normal;
	  line-height: 1;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
		margin-right: 0.5em;
	  font-family: bootstrap-icons !important;
	  font-weight: normal !important;
	  font-variant: normal;
	  text-transform: none;
  }
}
.icon-box-arrow-up-right, .icon-box-fleche-bas-droite    { &:before { content: "\f1c5"; } }

/*--------------- Texte spip --------------*/

strong, b 												{ font-weight: 600; }
i, em, .italique 								{ font-style: italic; }
strong i 													{ font-weight: bold;}
.spip_document iframe 	{ margin: 0; }
a																			{ line-height: 120%; }
img {
	// Important pour éviter les images trop grandes dans la partie privée
	max-width: 100%;
	height: auto;
}
sup.typo_exposants { line-height: 99%; }
sup a {
	font-weight:bold;
	color:#CF0911;
}

span + .autobr 	{ display: none; }

/*--------------- Marges   --------------*/

// Marge pou séparer les paragraphes des titres sauf en tête d'article
p, ul.spip, ol.spip, table, .texteencadre-spip, .spip_cadre, .spip_code {
	margin-bottom: calc( ~"@baseLineHeight * 1.5" );
}

/* --------- Titres --------- */

h2.spip, h3.spip, h4.spip, h5.spip, h6.spip, .titre.h3, .titre.h4, .titre.h5, .titre.h6 {
	line-height: 120%;
	overflow: hidden;
	hyphens: none;
	margin: .5em 0 1.1em;
	border-left: 0 solid #fff;
	a { padding: 0; }
	font-weight: 500;
	font-style: normal;
	font {
		font-weight: 600;
		line-height: 120%;
		margin-left: 5px;
	}
}
h2.spip, .titre.h2, h3.spip, .titre.h3 {
	display: table;
	border-bottom: 3px solid @couleur-defaut;
	margin-bottom: .8em;
	font-size: 2em;
	padding: 0 0 0.15em;
	font, font * {font-weight: bold;}
}
h4.spip, .titre.h4, h5.spip, .titre.h5 {
	border-bottom: 1px solid @gris;
	margin: .7em 0;
}
h4.spip, .titre.h4 {
	border-bottom: 1px solid @gris;
	display: table;
	font: normal 500 1.8em/1.5em @labeur;
	padding: 4px 2px 6px 0;
	a { padding: 0; }
}
h5.spip, .titre.h5 {
	display: table;
	font: normal 500 1.4em/1.65em @labeur;
	margin: .5em 0 1em;
	padding: .4em 0 .3em ;
	color: @grisDarker;
	background-color: transparent;
	.spip_dic {color: #fff; }
}
h6.spip, .titre.h6 {
		border-bottom: 1px solid @grisLighter;
		display: table;
		font: 500 1.2em/120% @labeur;
		overflow: hidden;
		padding: 3px 0 4px;
}
/*--------------- Marges   --------------*/

// Marge pou séparer les paragraphes des titres sauf en tête d'article
p, ul.spip, ol.spip, table, .texteencadre-spip, .spip_cadre,
.spip_code, .spip-block-right, .spip-block-center {
	margin-bottom: calc( @baseLineHeight * 1.2 );
	font-weight: inherit;
}
p, ul.spip, ol.spip, div, table {
	& + h3.spip, & + h4.spip, & + h5.spip, & + h6.spip {
		margin-top: 1.8em ;
	}
}

* .spip_dic {
	margin: 0 0 0 6px;
	line-height: 95%;
}

/*--------------- Listes   --------------*/

li, p { line-height: 1.6em; }

ul.spip {
	border-width: 0;
	padding-left: 0.5em;
	& > li {
		padding-left : 1.2em;
		list-style: none;
		position: relative;
		padding-top: .4em;
		margin: 0 0 9px;
		&::before{
			content: " ";
			display: block;
			width: 0.5em;
			height: .5em;
			position: absolute;
			border-radius: 50%;
			float: left;
			left: 0;
			top: 0.4em;
			margin: 0.5em .1em 0 0;
			background-color: @couleur-defaut;
		}
	}
	& > li { margin-left: 0; }
}

ul.spip ul.spip, ol.spip ul.spip, ul.spip ol.spip {
	margin-left: 10px;
	margin-bottom: 1.7em;
	li {
		padding-top: 0.2em;
		margin: 0 0 .1em;
	}
}

ol { list-style: decimal inside !important;}
ol.spip {
		counter-reset: repas;
	  margin: 0.5em 0 1.9em 1.9em;
		&>li {
				list-style-type: none;
				counter-increment: repas; /* on incrémente le compteur à chaque nouveau li */
				margin-bottom: 10px;
		}
		& li:before {
				content: counter(repas); /* on affiche le compteur */
				padding: 2px 8px 2px;
				margin-right: 1em;
				vertical-align: top;
				background: @couleur-defaut;
				font-weight: bold;
				font-size: 1em;
				color: white;
		}

		& ul li:before {content: none; }
}
li.spip ul.spip {margin: 0;}

/*--------------- Liens  --------------*/

a.spip_out, a.spip_in, a.spip_glossaire, p.spip_note a, p.spip a, .spip_in, .spip_note, .spip_dic sup, .larticle a {
	font-weight:500;
	color: @couleur-defaut;
}
.spip_out:hover, p.spip_note a:hover, p.spip a:hover, .spip_in:hover, .spip_glossaire:hover, .spip_out:hover {
	text-decoration:underline;
}
.spip_out {
	.icon;
	.icon-box-arrow-up-right;
	padding-right: 0.3em;
	&::before {
		font-size: .6em;
		vertical-align: baseline;
	}
}

/*--------------- Mise en forme de caractères  --------------*/

.caractencadre-spip     { color: @rouge; }
.caractencadre2-spip   { color: @jaune; }
sc, .sc								   					{ font-variant: small-caps; }

/*--------------- Mise en forme de paragraphes  --------------*/

.spip_cadre, .spip_code {
	padding: .6em 1em .7em;
	display: block;
}
code, kbd, pre, samp {font-family: @font-family-monospace; }
.spip_code, code {
	font-family: @font-family-monospace !important;
	color: #fff;
	font-weight: 500;
	font-size: .85em;
  background-color: @code-bg;
	white-space:inherit;
}

// User input typically entered via keyboard
kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: @kbd-color;
  background-color: @kbd-bg;
  border-radius: @border-radius-small;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);

  kbd {
    padding: 0;
    font-size: 100%;
    font-weight: bold;
    box-shadow: none;
  }
}

// Blocks of code
pre {
  display: block;
  overflow: auto;
  padding: ((@line-height-computed - 1) / 2);
  margin: 0 0 (@line-height-computed / 2);
  font-size: (@font-size-base - 1); // 14px to 13px
  line-height: @line-height-base;
  word-break: break-all;
  word-wrap: break-word;
  color: @pre-color;
  background-color: @pre-bg;
  border: 1px solid @pre-border-color;
  border-radius: @border-radius-base;
  /* Cf.: http://perishablepress.com/press/2010/06/01/wrapping-content/ */
  white-space: pre;           /* CSS 2.0 */
  white-space: pre-wrap;      /* CSS 2.1 */
  white-space: pre-line;      /* CSS 3.0 */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap;  /* HP Printers */
  word-wrap: break-word;      /* IE 5+ */

  // Account for some code outputs that place code tags in pre tags
  code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
  }
}

.texteencadre-spip		{
	color: #fff;
	border: 0px solid #fff;
	padding: 0.6em 1em 0.8em;
	a { color: #fff;}
}

.cs_blocs {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd ;
	border-bottom: 1px solid #ccc;
	padding: 0.8em 0.9em;
	background-color: #e8e8e8;
	clear: both;
	.gradient-directional( @grisDark, #fff, 180deg );
	.blocs_titre {
		font-size: 1.2em;
		background-image: none;
		padding: 0 0 0 33px;
		position: relative;
		a {
			text-decoration: none;
			color: @couleur-defaut;
		}
		&:before {
			transition-property: all;
			transition-duration: .3s;
			transition-timing-function: cubic-bezier(.25,.46,.45,.94);
			content: url();
			display: inline-block;
			transform: rotate(90deg);
			display: inline-block;
			position: absolute;
			left: 7px;
		}
	}
	.blocs_replie:before { transform: rotate(0); }
	&:last-of-type 					{ border-bottom: 1px solid #ddd; }
	.blocs_destination 		{ padding: .7em 2.1em ; }
}

a[href*="javascript:"] 												 {
	background-color: inherit;
	&::before, &::after { display: none; }
}

/*--------------- Encadrés  --------------*/

blockquote.spip, blockquote.spip_poesie {
	background-color: #F2F1F1;
	font-size: 1.4em;
	line-height: 144%;
	font-style:italic;
	margin: 1em 0 ;
	padding: 0.7em 1.3em 1em ;
	min-height: 40px;
	position: relative;
	p:last-of-type {margin-bottom: 0; }
}
blockquote.spip {
	padding: 1em 3em ;
	text-align: center;
	&:before {
		color: @couleur-defaut;
		content: "«";
		font-size: 2.6em;
		left: .3em;
		position: absolute;
		top: .2em;}
	&:after {
		bottom: .35em;
		color: @couleur-defaut;
		content: "»";
		font-size: 2.6em;
		position: absolute;
		right: .3em;
	}
}

/*--------------- Filets et tableaux  --------------*/

hr.spip {
	border-bottom: 1px solid #DDDDDD;
	margin: 27px 0;
}

/* -------- Tableaux ------- */

table {
	cellpadding: 0;
	cellspacing: 0;
	border-collapse:collapse;
	border-spacing:0
}

table.spip, table.spip td, table.spip th {
	border-collapse: collapse;
	font-size: 14px;
	margin: 20px 0 25px;
	padding: 3px 10px;
	text-align: center;
}

table.spip {
	width:100%;
	display:table;
	margin: 2px 0 8px;
	border-width: 1px 1px 1px;
 	border: 1px solid @couleur-defaut;
	th {
		color: #FFFFFF;
		font-size: 1.1em;
		font-weight: 600;
		line-height: 120%;
		padding: 8px 5px 7px;
		text-align: center;
		strong { margin:4px 10px; }
	}
	th 												{ background-color: @couleur-defaut; }
	td 												{ border: 0 solid #fff; }
	.row_odd, .odd			{ background-color: #fff; }
	.row_even						{ background-color: @grisLighter; }
	.row_odd:hover 		{ background-color: @grisLight; }
	.row_even:hover 	{ background-color: @grisLight; }
}

/*--------------- Formulaires  --------------*/

.boutons 	{ margin-top: 1.3em; }
textarea 	{ border: 1px solid #ddd; }

/* ---- Notes ---- */

.note, .notes {
	.pintertitre {
		font-size: 1.5em;
		border-bottom: 1px solid #ddd;
		padding: 0.7em 0 0.5em;
		margin-bottom: 1.5em;
		color: @couleur-defaut;
	}
	padding: .4em 0 .8em;
	margin: .8em 0 0;
	border-top: 1px solid @couleur-defaut;
	display:block;
	zoom :1;
  color: @grisDark;
	overflow:hidden;
	width:100%;
	font-size: 1em;
	max-width: 100%;
	div > p  { font-weight: 400; }
}

/* ---- Documents ---- */

.spip_documents {
	background:@grisExtraLighter;
	color: #333333;
	display: inline-block;
	padding: 0.2em;
	margin: 0 auto;
	text-align:center;
	&.spip_documents_left,
	&.spip_documents_right,
	&.spip_documents_center{
		// Distinction entre images alignées et images non alignés qui peuvent se caser entre les caractères.
		margin-top: 1em;
		margin-bottom: 1em;
		padding: 1em;
	}
	.spip_doc_legende {
		margin: 1.1em 0 0.2em;
		width: 100%;
		max-width: 100%;
	}
	.spip_doc_titre {
		margin: 0 17px;
		padding: 0 0 .5em;
		line-height: 1.2em;
		display: block;
	}
	.spip_doc_descriptif, .spip_doc_credits {
		line-height: 140%;
		padding: 0;
		margin: .4em .5em 0;
		p {
			margin-bottom: 1em;
			&:last-of-type { margin-bottom: 0; }
		}
	}
	.spip_doc_credits {
		font-size: 0.8em;
		font-style: italic;
		font-weight: 400;
	}
	dt.spip_doc_titre + dd.spip_doc_descriptif {margin: 0 .5em 0; }
	&.oembed_video {
		margin: 5px;
		min-width: 200px;
	}
	&.audio audio {
		margin-left: auto;
  	margin-right: auto;
	}
	&.spip_documents_center{
		margin : 15px auto;
		padding: 15px;
		width: 100%;
		display: block;
		overflow: hidden;
		* 	{ text-align:center; }
		.spip_doc_descriptif, .spip_doc_titre 	{ width: auto !important;}
		.spip_doc_titre 	{
			font: 1.2em;
			margin-top: 1em;
			strong {
				line-height: 1.2em;
				display: block;
			}
		}
	}
	&.spip_documents_left 							{
		margin : .2em 4% 2.5em 0;
		float: left;
	}
	&.spip_documents_right 						{
		margin : .2em 0 2.5em 4%;
		float: right;
	}
	&.spip_documents_left, &.spip_documents_right	{
		max-width: 46%;
		.oe-video { float: none; }
	}
	&.spip_documents_center.oembed_video {
		width: auto;
		padding: 40px 15px;
		margin: 2em 0;
		.oembed{
			width: 100%;
			max-width: 700px !important;
			padding: 0;
		}
	}
	.oe-play-button button{
		margin-left: -33px;
		margin-top: -33px;
		left : calc(~"50%");
		top : calc(~"50%");
	}
	&.oembed_twitter {
		width: auto;
		display: block;
		padding-bottom: 1.3em;
		margin: 2em auto;
		.twitter-tweet {
			text-align: left;
			padding-left: 16%;
			background:url() no-repeat 2.4% .3em;
			background-size: 11%;
			p {
				font-size: 1.5em;
				padding: 1px 4% 0;
				text-align: left;
				border-left: 1px solid #ddd;
				margin: 0.8em 0;
			}
		}
		.oembed 		{ padding-bottom: 1em; }
	}
	img 							{ max-width: 100%; }
	p.spip 					{ margin: 0 !important;}
}
.spip_documents.lecteurpdf { width: 100%; }
.toutlargeur {
	width: auto;
	.oembed_video{ width: 100%; }
}

.minivideo {width: 100%; }

/* Cartes GIS */

.carte_gis {margin-bottom: 1.5em; }

/* ---- Colorisation par défaut ----- */

h3.spip ,h6.spip 																	{ border-bottom-color: @couleur-defaut; }
h5.spip, li:before, ol li:before,
.spip_code, .texteencadre-spip 						{
	background-color: @couleur-defaut;
	a {
		color : contrast(@couleur-defaut, #000000, #ffffff);
		text-decoration: underline;
	}
}
.spip_out, .spip_in, .spip_ancre  					{ color: @couleur-defaut; }
.larticle table.spip {
 	border: 1px solid @couleur-defaut;
	td 		 																									{ 	border-right: 1px solid @couleur-defaut; }
	thead 			 																					{ 	background-color: @couleur-defaut;  }
}
.note .pintertitre, .notes .pintertitre			{ color: @couleur-defaut; }

/* --------- Listes --------- */
ul.spip li { margin: 0 0 .3em; }

/* --------- Styles FAQ --------- */
dl.faq.js {
	dt {
		background-position: 0.5em 0.6em;
		padding-left: 2.2em;
	}
	dd {
		margin-top: 1em;
		padding: 0.4em 0 0 1.1em;
	}
}

/* ---------- pas de marges devant les premiers éléments */

.spip, blockquote, p {&:first-child{ margin-top:0; } }

@media screen and (max-width: @screen-xs-max ) {
	.texte {
		.spip_documents.spip_documents_left, .spip_documents.spip_documents_right, .cs_blocs {
			max-width: 100%;
			margin-left: 0;
			margin-right: 0;
		}
		.cs_blocs { width: 100%; }
	}
	.spip_documents.oembed_video { min-width: 0; }
}

@media screen and (max-width: @screen-lg) and (min-width: @screen-xs) {
	.texte {
		.spip_documents.spip_documents_right, .cs_blocs { margin-left: 5%; }
		.spip_documents.spip_documents_left { margin-right: 5%; }
	}
}

/*  */
/*--------------- Texte spip --------------*/

text-align: left;
font-family: @labeur;

/* --------- Titres --------- */

h5.spip, .titre.h5 {
	font-size: 1.4em;
	font-style: normal;
	padding: .4em 0 .3em ;
	margin-bottom: 1em;
	color: @gris-darker;
	background-color: transparent;
}
h6.spip, .titre.h6 {
		border-bottom: 1px solid #D60712;
		font-size: 1.4em;
		padding: 3px 0 4px;
}

/*--------------- Listes   --------------*/

ul.spip {
	ul.spip, ol.spip {
		.spip_documents { vertical-align: top; }
	}
	ol.spip {
		left: 1em;
		margin-bottom: 2.3em;
		margin-top: 0.5em;
	}
}

ol.spip, ul.spip {
	ol.spip {
		li {
			padding: 0.4em 1.2em 0.5em 1.3em;
			margin-bottom: 0.1em;
			box-shadow: none;
			border: none;
			background-color: transparent;
			&:before {
				border-radius: 50%;
				margin-top: -0.1em;
				width: 1.8em;
				height: 1.8em;
				line-height: 1.8;
				text-align: center;
				padding: 0;
				font-size: 0.9em;
			}
		}
	}
}
ol.spip {
	margin-top: 1em;
	margin-bottom: 2.5em;
	position: relative;
	padding-left: 0.1em;
	& > li {
		display: table;
		margin: 0 0.5em 1.2em 0.2em;
		background: @grisLighter;
		padding: 1em 1.4em 1.1em 1.2em;
		border-left: 6px solid @couleur-defaut;
		box-shadow: #ddd 6px 5px 5px;
		&:before {
			padding: 0.1em 0.3em 0 0.7em;
			line-height: 1.55em;
		  position: absolute;
		  // margin-right: 0;
		  margin-top: -1em;
		  left: -1.1em;
		  border-radius: 0.8em 0 0 0.8em;
		  height: 1.7em;
		}
		&:hover {
			box-shadow: #ddd 2px 2px 6px;
			transition: .2s;
		}
	}
	/* La liste dans la numerotation */
	ul.spip {
		margin: 0.2em 0;
		padding-left: 0;
		& > li {
			padding: 0.4em 1.2em 0.5em 1.3em;
			margin-bottom: 0.1em;
			box-shadow: none;
			border: none;
			background-color: transparent;
			&::before{
				content: " ";
				height: .5em;
				padding: 0;
				border-radius: 50%;
				left: 0;
				margin: 0.5em .1em 0 0;
			}
		}
	}
	ol.spip {
		margin: .6em 0 0 1.3em;
	}
}

/*--------------- Liens  --------------*/

a.spip_out, a.spip_in, a.spip_glossaire, p.spip_note a, p.spip a, .spip_in, .spip_note, .spip_dic sup, .larticle a {
	&::after { content: none; }
}
.spip_note_ref a, .spip_note a {
	position: relative;
	padding-top: calc(@navbarHeight + 80px);
}

/*--------------- Mise en forme de caractères  --------------*/

.caractencadre-spip, .caractencadre2-spip     {
	color: @couleur-defaut;
	font-style: italic;
	font-size: .95em;
	font-weight: 500;
	border-bottom: 4px solid #fff;
	background-color: #fff;
	padding: 0.2em 0.4em 0;
	border-radius: 0.3em;
	margin: 0 0.3em 0;
	box-shadow: 0 0 5px #0003;
}
.caractencadre2-spip {color: @grisDarker; }

/*--------------- Mise en forme de paragraphes  --------------*/

.texteencadre-spip		{ background-color: @couleur-defaut; }
.spip_code, code {
  color: @code-color;
  background-color: @code-bg;
	font-weight: 600;
	margin-bottom: 1.8em;
	padding: 0.4em 1em 0.4em;
	display: inline-block;
	vertical-align: unset;
}
code {border-radius: @border-radius-base; }
p > .spip_code, p > code { margin-bottom: 0; } // Si le code est sur une seule ligne
.spip_code > code {
	border: none;
	padding: 0;
	background: none;
	color:inherit
}

samp { 	font-weight: bold; }
var {			font-style: italic; }

@media print {
  pre { page-break-inside: avoid; }
}

.cs_blocs {
	background: transparent;
	border-width: 0 0 0 8px;
	margin-bottom: 1.5em;
	padding: 0 0 0 33px;
	.blocs_titre {
		font-size: 1.5em;
		text-transform: uppercase;
		font-weight: 600;
		color: @couleur-defaut;
		p:last-of-type{ padding-bottom:0; }
		&:before {content: url(https://ericbocquet.fr/squ/squelettes/ergo/fleche/d_moyen.png); }
	}
}

/*--------------- Encadrés  --------------*/

blockquote{
	&.spip, &.spip_poesie {
		line-height: 160%;
		margin: 1.5em auto ;
	}
}

/*--------------- Filets et tableaux  --------------*/

hr.spip {width: 100%; }

/* -------- Tableaux ------- */

caption, .tablesorter-default > caption {
	background-color: #fff;
	padding: 1.8em 1em 1.8em;
	text-align: center;
	font-size: 1.5em;
	color: #000;
	font-weight: 600;
	font-family: @labeur;
}
table.spip {
	margin: .1em 0 .3em;
	border-width: 1px 1px 1px 2px;
	&, td,  th {
		border-collapse: collapse;
		font-size: 14px;
		margin: 20px 0 25px;
		padding: .6em .4em;
		border: 1px solid #ddd;
		text-align: center;
		vertical-align: middle;
	}
}

/* ---- Notes ---- */

.note, .notes {
	.pintertitre {color: @couleur-defaut; }
  border-top: 1px solid @couleur-defaut;
  padding-top: 3em;
  color: @grisDark;
  font-size: 1em;
}

/* ---- Documents ---- */

.spip_documents {
	img 							{ max-width: 100%; }
	p.spip 						{ margin: 0 !important;}
	.spip_doc_titre {
		padding: 0 0 .1em;
		line-height: 1.2em;
		display: block;
	}
	.spip_doc_credits {font-size: .85em; }

	// Vidéos

	.oe-play-button button{
		margin-left: -33px;
		margin-top: -33px;
		left : calc(~"50%");
		top : calc(~"50%");
	}

	// Alignements

	&.spip_documents_center{
		margin : 3em auto;
		padding: 1em;
		& > * { text-align:center; }
		img 	{ margin : 0 auto;	}
		.spip_doc_legende {	margin: 1.5em 0 0.6em;	}
	}
	&.spip_documents_left, &.spip_documents_right	{
		max-width: calc(~"46%");
		// On s'arrange que les liens sur les doc soient cliquables en les positionnant au dessus :;
		position: relative;
		z-index: 1;
		&.oembed_video 	{ width: calc(46%); }
	}
	&.inline {
		&, figure, img {
			display: inline;
			float: inherit;
			overflow: inherit;
			margin: 0;
			padding: 0;
			vertical-align: top;
		}
	}
	.oembed_video { margin-bottom: 2em; }

	// Tweets

	&.lecteurpdf 	{ padding: 30px; }
	&.spip_document_text {
		display: block; // Permet au tableau csv de prendre toute la largeur
		.table { margin-bottom: 0; }
	}
	&.spip_document_file {
		box-shadow: 2px 2px 13px #0003;
		background-color: #fff;
		display: table;
		width: auto;
		padding: 20px 22px 20px 12px;
		figure {
			  display: flex;
			  align-items: center;
			  .spip_doc_legende {
			  	margin: 0 0 0 10px;
			  	div {
			  		text-align: left;
			  		margin-left: 0;
			  		margin-right: 0;
			  		margin-top: 0;
			  	}
			  	.spip_doc_descriptif  { font-size: .9em; }
			  	.spip_doc_credit  { font-size: .8em; }
			  }
		}
		&.spip_documents_left { margin: .2em calc(~"4% - 13px") 2.5em 13px; }
		&.spip_documents_right { margin: .2em 13px 2.5em calc(~"4% - 13px"); }
	}

}

/* --------- formidable --------- */

.item_picker img { width: inherit; }

/* --------- Iframe --------- */

iframe 			{ padding: 0 0 2.5em; }

/* ---------- Responsive ------------ */

@media screen and (max-width: @screen-xs-max ) {
		blockquote {&.spip, &.spip_poesie { font-size: 1em; } }
	  code, pre, samp {
	  	word-wrap: break-word;
	  	white-space: pre-line; /* passage a la ligne specifique pour les elements a chasse fixe */
	  }
	  blockquote.spip, blockquote.spip_poesie {font-size: 1.2em; }
		blockquote.spip {
			&::before, &::after { font-size: 2.2em; }
		}
		table.spip { width: auto; }
}

/*  */
/*--------------- Texte spip --------------*/

p{
	font-size: 1em;
	font-weight: inherit;
}

.autobr { margin-bottom: 1em; }

/* --------- Titres --------- */

h2.spip, h3.spip, .titre.h3 {
	font-size: 2em;
	margin-bottom: .8em;
	padding: 0 0 0.15em;
}
h4.spip { font-size: 1.8em; }
h5.spip { font-size: 1em; }

/*--------------- Listes et liens  --------------*/

ul.spip {
	border-width: 0;
	padding-left: 0.4em;
	& > li { margin-left: 0; }
	li { padding-top: .4em; }
}

ol.spip > li {margin-bottom: 1em; }
ol.spip {
	position: relative;
	padding-left: 0.1em;
	margin: 1em 0 1.9em 4em;
	li {
	margin: 0 0.5em 1.3em 0.2em;
	background: @grisLighter;
	padding: 1em 1.4em 1.1em 1.2em;
	border-left: 6px solid @couleur-defaut;
	box-shadow: #ddd 6px 5px 5px;
	&:before {
	  position: absolute;
	  margin-right: 0em;
	  margin-top: -1em;
	  left: -1.1em;
	  border-radius: 0.8em 0 0 0.8em;
	  height: 1.7em;
		padding: 0.1em 0.3em 0 0.7em;
		line-height: 1.55em;
	}
	&:hover {
		box-shadow: #ddd 2px 2px 6px;
		transition: .2s;
	}
	}
	& > li {margin-bottom: 1em; }
}

/*--------------- Code  --------------*/

.spip_code {
	&:extend(code);
	background-color: @grisLighter;
	color: @grisDarker;
	padding: 0.4em 0.9em 0.4em;
}
.spip_code >code {
	border: none;padding: 0;
	background: none;color:inherit
}

.cs_blocs  {
	padding-left: 2%;
}

.blocs_titre  {
	margin-bottom: .6em;
}

/*--------------- Filets et tableaux  --------------*/

hr.spip { margin: 2.7em 0; }

table.spip {
	width:100%;
	display:table;
}

/* ---- Documents ---- */

.spip_documents {
	// &.spip_documents_left, &.spip_documents_right	{ max-width: 48%; }
	&.portrait{
		max-width: 39.5%;
		&.spip_documents_left			{ margin-right: 5.6%; }
		&.spip_documents_right	{ margin-left: 5.6%; }
	}
	.spip_doc_titre, .spip_doc_descriptif 	{	margin: 0 auto; }
	.spip_doc_titre 																		{	font-size: 1em; }
	.spip_doc_descriptif {
		font-size: 0.9em;
		font-weight: 400;
		font-style: italic;
	}
	&.media_file{
		padding: 0.6em 0.9em;
		margin-top: 1.5em;
		.logo {
			float: left;
			padding-right: 0.8em;
			img { max-height: 6em; }
		}
		.spip_doc_titre, .spip_doc_descriptif, .credits 	{
			text-align: left;
			margin-left: 143px;
		}
		.spip_doc_titre + .spip_doc_descriptif {margin: 0 0 0 143px; }
		.spip_doc_titre 		{ margin-top: 0; }
		dt 											{ padding-bottom: .35em; }
		dd 											{ padding-bottom: .6em; }
	}
}
.spip_documents.spip_documents_center.oembed_video { padding: 15px 15px; }

iframe {
	overflow: hidden;
	html { overflow: hidden; }
}}

/*  */

.contenu {

	.liste-doc{
		width: 100%;
		margin-bottom: 1em;
		overflow: hidden;
		.grotit-doc{
			font-size: 1.6em;
			font-weight: 500;
			margin-bottom: 0.7em;
			width: 100%;
			border-bottom: 1px solid @grisLight;
			padding-bottom: 0.5em;
		}
		.coldroite {
			.tit{
				padding: .1em 0 0;
				text-align: left;
				font-size: 1.1em;
			}
			.cnt {
				font-size: .95em;
				width: 95%;
			}
			.lls{
				border-top: 1px solid #bbb;
				padding-top: 0.5em;
				display: block;
				margin: 0.6em 0 0.2em;
				width: 95%;
				font-style: italic;
				font-size: .95em;
			}
			.extension{
				font-style: italic;
				color: #555;
				font-size:.9em;
				margin-bottom: .2em;
			}
		}
		&:not(.galerie){
			.entourelogo{
				margin-right: 1em 1em 1.4em;
				padding-right: 0;
			}
		}
		&.galerie {
			overflow: visible;
			* { overflow:visible; }
			&> .row { margin-top: 1em; }
			img { box-shadow: 0 0 15px @couleur-defaut }
		}
	}
	.galerie {
		.row, .col-sm-4 {
			padding-left: floor( @gridGutterWidth / 4 ) ;
			padding-right: floor( @gridGutterWidth / 4 ) ;
		}
		.item { padding: 0; }
	}
	.content #contenu .liste-doc .spip_logo { margin: 0 0 0 11%; }

	.minivideo 			{ height: 27.2em; }
	.oembed_file{
		margin-bottom: 2.2em;
		.oe-rich {background-image: none !important; }
		.oe-title, .oembed-author {
			margin: .5em 27% .3em;
	    display: block;
	    font-size: .9em;
		}
		.oe-author {
			margin: .5em .4em .3em 27%;
	    font-size: .9em;
		}
	}
	.oe-play-button {
		// background-image: none !important;
		&::before {
			background-color: @couleur-defaut;
			&:hover{ background-color: darken(@couleur-defaut, 15%) }
		}
	}

}

/*  */

.bicolonnes .colgauche .petition_container{
	.date {
		padding: .5em;
		padding: 0.4em .6em;
		margin: 1.4em 0;
		font-weight: 500;
		border-bottom: 3px solid @couleur-defaut;
	}
	.numero {
		background: @grisLighter;
		padding: 0.2em .5em;
		display: block;
		overflow: hidden;
		margin: 0 0.6em 0 0;
		font-size: .9em;
		width: 36px;
		text-align: center;
	}
	.signature-message {
		font-style: italic;
		margin: -0.3em 0 1.1em 2.8em;
	}
}

/*  */

.page_auteur .contenu {
	.fiche {
		background-color: @grisLighter;
		span {
			font-weight: 600;
			span {font-weight: 500; }
		}
	}
}

/*  */

.page_infolettre .asidedroite {
  margin-top: 4.1em;
}

/*  */

.page_contact {
	.formulaire_formidable form {
		.editer_odd:first-of-type, .editer_odd:first-of-type + .editer_even {
		width: 44.6%;
		margin-left: 5%;
		display: inline-block;
		@media (max-width:@screen-xs-min) { width: 94%; }
		}
	}
}

/*  */

.page_type_liste {
	.titsuite {margin-top: 1em; }
}

/*  */

.page_recherche .content .page_type_liste {
	.chapo h3 { margin: 0 0 1em; }
	.bicolonnes {
		.asidedroite {
			margin-top: 1.7em;
			.formulaire_spip { padding-top: 2em; }
			.marginputbas{ margin-bottom: 1em; }
		}
		.intro {
			.grotit {
				font-size: 2.8em;
				margin: 0 0 0.8em;
				color: #000;
				i {color: @couleur-defaut; }
			}
		}
	}
}

.contenu #formulaire_recherche2 {
	padding-top: 2em;
	& > div { width: 100%; }
	.text{
		padding: 1.3em;
		width: 98%;
	}
	.text, .btn {
		font-size: 18px;
		height: 28px;
		border-radius: .2em;
	}
	.submit {
		margin: 0 0 0 1.3em;
		padding: .5em 2%;
		border-radius: .2em;
		font-size: 18px;
	}
	.saisie_input {
		width: 65%;
		display: inline-block;
	}
}

/*  */

/*  */

/*  */

.page_videos, .page_video, .page_galerie{
	.intro .grosoustit {
		text-align: center;
	  margin-top: 1em;
	}
	.item {
		.tit {
			text-align: left;
			min-height: 2em;
		}
		.btn {margin-top: 1.5em; }
		.entourelogo { margin-bottom: 1.2em; }
		.logo img { max-width: 100%; }
	}
}

/*  */

.page_auteurs {
	.item-auteur {
		overflow: visible;
	}
}

/*  */

.page_plan{
	#laliste {
		.titsuite {
			padding-bottom: .2em;
			border-bottom: 5px solid @couleur-defaut;
		}
		.liste-items {
			margin-top: 3em;
			line-height: 130%;
		}
		text-align: left;
		.item {
			.tit a{ color: #000; }
			min-height: 100px;
			.titit{margin: .3em 0 .2em; }
			.evt {
				margin-left: 1.2em;
				color: #000;
				font-weight: 500;
			}
		}
		.btn {margin-top: 1em; }
	}
}

/*  */

	.grosboutons {
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		// 	width: 100%;
		.grosbouton{
			position: relative;
			min-height: 17em;
			margin-bottom: 2em;
			* {	.animation(.5s); }
			.ico, svg{
				width: 70%;
				height: auto;
				margin: 0 auto;
				text-align: center;
				cursor: pointer;
			}
			.legende{
				position: absolute;
				color: @grisDark;
				bottom: 0;
				left: 50%;
				height: 2.6em;
				width: 100%;
				transform: translate(-50%, -50%);
				.titit{
					text-transform: uppercase;
					font-size: 1.2em;
					margin: 0.2em 0;
					font-weight: 500;
					display: block;
				}
			}
			&:hover {
				 .ico, svg	{
				 	width: 80%;
				 	margin-top: -10px;
				 	}
				 .legende 	{ color: @rouge; }
			}
		}
	}

.page_compte, .page_abonnement {

	.contenu{

		.grotit { margin-bottom: .6em; }
		.chapo {
			background: @grisLighter;
			padding: 0.7em 2.5%;
			margin-bottom: 2em;
		}

		.filetbas {
			margin-bottom: 15px;
			padding-bottom: 0;
	    border-bottom: 1px solid #d7d6d6;
	    font-size: 1.1em;
	    font-weight: 500;
	    line-height: 140%;
	  }

		.factures {
			.grotit {
				overflow: hidden;
				width: 100%;
				padding: 0.1em;
			}
			.droite { margin-top: .4em; }
		}
		#coldroite, #asidedroite {
			margin-top: 0;
			.deconnect{margin: 0.1em 0 1.7em; }

			/* Encarts spécifiques à la colonne de droite du compte client */
			.encartcompte {
				margin-top: 8em;
				.grotit {
					margin-bottom: 0;
					font-size: 1.1em;
					font-weight: 500;
					color: #000;
					text-transform: uppercase;
					padding-top: 0.8em;
					background: @jaune;
					border-radius: .2em .2em 0 0;
	  		}
	  		.tit{
	  			font-size: 1.1em;
	  			margin-bottom: 0.3em;
			    border-bottom: 1px solid #ddd;
			    padding-bottom: 0.4em;
			    display: table;
	  		}
	  		.boutons{
	  				text-align: right;
						margin-right: 1em;
	  		}
			}

		}

		/* --------------  PAGE CONSULTER EN PDF -------------- */

		&.mode-pdf_consulter, &.mode-pdf_achat {
			.spip_logo 										{ margin-bottom: .5em; }
			.liste-doc .item 						{
				position: relative;
				min-height: 21em;
				.offre_prix, .btnpanier{
					color: #000;
					position: absolute;
					top: 5.9em;
					text-align: center;
					left: calc(~"50% - 2.5em");
					width: 5em;
					padding: .5em 0;
					.box-shadow(0em 0em 2.7em #000);
					.animation(.3s);
					&:hover{
						background: @rouge;
						color: #fff;
					}
				}
				.btnpanier{
					 text-align: center;
					 background: transparent;
					 margin: 0;
					 padding: 0;
					 &>div{
					 	display: inline-block;
						text-align: center;
						margin: 0 auto;
						width: 100%;
					}
					.submit{
						background-color: @couleur-defaut;
						display: inline;
						padding: 0.6em;
						color: #fff;
						font-size: 1.1em;
						cursor: pointer;
						border: 1px solid #0000;
						.animation();
					}
					&:hover .submit { background-color: @rougeDark; }
				}
			}
			#coldroite, #asidedroite {
				#pubcarre  { margin: 8.2em 0 0 5%; }
			}
		}

		/* --------------  APERCU PDF   -------------- */

		&.mode-pdf_apercu{
			.item { overflow: visible; }
			.logo { border: 1px solid @gris; }
			.introboutons  .btn-petit {
				padding: 0.6em 0.6em;
				vertical-align: top;
				margin-left: 0.6em;
			}
		}

	}

	.item-commande {
		.titit {margin-top: .5em;}
		ul {
			padding-left: 0;
			margin-top: 0;
			li { list-style: none; }
		}
	}

	#formulaire_inscription {
		.boutons 												{
			margin: 2em 0 .5em;
			text-align: center;
		}
	}

	.formulaire_editer_auteur {
		.editer_bio, .editer_pgp, .editer_liens_sites, .champs_extra, .fieldset_fichier_client  {
			display: none;
		}
	}

	.contenu {

		/* --------------  COORDONNEES AVANT ACHAT  -------------- */

		&.mode-coordonneesavantachat {
			.champs_extras {display: block;}
		}

		/* --------------  PAGE ABONNEMENT   -------------- */

		.liste-items .item .tit {	margin: 0 0 0.7em; }
		.item-offre {
			width: 100%;
			.boutons{
				width: 95%;
				.formulaire_spip {
					padding: 0;
					background-color: transparent;
					margin:0;
					form {
						.saisie_input {width: auto; }
						button.submit {
							padding: 0.4em 4%;
							font-size: 1em;
						}
					}
				}
			}
		}
		.offre_paiement {
			padding: 0.6em .1em 0.2em;
		}

		.offre_perso{
			background: @grisLighter;
			overflow: hidden;
			display: block;
			float: left;
			width: 100%;
			padding: 0.7em;
			margin: 0.3em 0 2.7em;
			legend{
				font-size: .9em;
				margin: 0;
				top: 0;
				display: block;
				float: left;
				width: 60%;
				border: none;
				padding: 0;
			}
			.ui-button{
				padding: .4em 0.6em;
				text-align: left;
				margin: 0 0 0 0.7em;
			}
		}
		.item-offre:last-of-type .item { border-bottom:  solid #fff; }

		.offre_prix{
	    font-size: 1.2em;
	    font-weight: 600;
	    background: @jaune;
	    padding: 0.4em 0.7em;
	    display: inline-table;
	    margin-bottom: 0.4em;
	    border-radius: .2em;
		}
		.offre_duree{
			display: inline-table;
			margin-left: 0.8em;
			max-width: 100px;
			line-height: 104%;
			vertical-align: middle;
			font-style: italic;
			font-size: 0.8em;
			background: @grisLighter;
			padding: 0.5em 0.7em;
			margin-bottom: 0.3em;
			font-weight: 600;
		}

	}

	.reponse_formulaire_ok .btn {
		margin: 1.4em 17% 1em;
		text-align: center;
		width: 64%;
		display: block;
		overflow: hidden;
		padding: 0.5em;
		color: #fff;
 }

}

/* --------------  Page abonnement seulement -------------- */

.page_abonnement .content #contenu {
	#coldroite, #asidedroite{
		 #pubcarre {
			margin-top: 8.1em;
			.item{ margin-top: 2.2em; }
		}
	}
}

.formulaire_editer_auteur {
	.valider-panier{
		padding: 1.1em;
		text-align: center;
	}
}

/*  */

select {
	display: block;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
	padding: 0.5em 0.6em;
	&::-ms-expand {display: none; }
	&:hover { border-color: #888; }
	&:focus {
		color: #222;
		outline: none;
	}
	option {	font-weight:normal; }
}

/* --------------  INSCRIPTIONS -------------- */

.formulaire_inscription, #formulaire_login {
	.editer_password p.details 											{	margin-top: 0.9em; }
	.saisie_nom_inscription      											{	vertical-align: top; }
}

.connect {
	.titconnect {
		font-weight: 400;
		font-size: 2em;
		color: @couleur-defaut;
		margin: 0 0 0.5em;
	}
	.preamb {
		display: block;
		margin-bottom: 1.3em;
		min-height: 4.5em;
		.textespipdedans();
	}
}

/* -------------- MODIFICATION DE FICHE AUTEUR -------------- */

.formulaire_editer_auteur {
	padding-bottom: 1.5em;
	margin-bottom: 2.9em;
	form {margin-left: 0;}
	.editer-groupe {
		.text {margin-bottom: 0;}
	}
	.boutons {
		display: inline-block;
		text-align: center;
		width: 100%;
	}
	.editer_new_pass {	vertical-align: top; }
	.editer_new_pass2 {
		margin-top: 1.6em;
		.reset_password{
			width: 100%;
			padding: 0.5em 0;
			margin-top: 1.6em;
		}
	}
}

.formulaire_editer_mdp {
	text-align:left;
	.editer_nom {display: none;}
	.fieldset {
		margin-left: 0;
		width: 100%;
		.editer-groupe {
			margin-bottom: .6em;
			.editer {
				display: inline-block;
				width: 44%;
				margin-left: 5%;
				input { width: 92%;}
				&.editer_new_pass2 {
					label { height: 2.5em;}
				}
			}
		}
	}
}

/* -------------- FORMULAIRE EDITER GIS -------------- */

.formulaire_editer_gis_public form {
	padding: 2.2em;
	> div {
		margin-left: -5%;
		.editer_import { display: none; }
		.rechercher_adresse {
			text-align: center;
			label {
				text-align: left;
				width: 100%;
			}
		}
		#editer_gis__rechercher_geocodage, #editer_gis_oui_rechercher_geocodage {
			.btn;
			.btn-bleu;
			margin: 1.5em auto 1.5em;
			padding: 0.7em 8%;
		}
		p.boutons{
			text-align: center;
			margin-left: 3.5%;
		}
		.leaflet-draw-draw-polyline, .leaflet-draw-draw-polygon, .leaflet-draw-draw-rectangle{
			display: none;
		}
	}
}

/* -------------- FORMULAIRE FORUM -------------- */

.formulaire_forum form {

	.qui .explication {
		color: @couleur-defaut;
		padding: 0 0 1.5em;
		font-weight: 400;
		font-style: normal;
	}
	.deconnect a {color: @rouge; }

	legend {
		font-size: 1.5em;
		margin-bottom: 1.3em;
		margin-top: 1em;
		padding-bottom: 0.4em;
		font-weight: 500;
		color: @couleur-defaut;
	}

	.editer { overflow: hidden; }

	label {
		float: left;
		width: 20%;
	}

	input.text, input.password, input.email, input.date, select, .markItUp {
		float: right;
		width: 80%;
	}

	.saisie_texte .explication {
		margin: 0.3em auto 0.5em;
		font-size: .9em;
		color: @grisDark;
	}
	.saisie_document_forum{ margin-bottom: 2.5em; }

	input.submit {
		padding: 0.7em 3em;
		margin-left: 1.5em;
	}

	.previsu {
		border-bottom: 5px solid #fff;
		margin-bottom: 2.5em;
		.legend {
			margin-top: 0;
			margin-bottom: 0.3em;
		}
		.forum {
			margin: 0;
			padding: 0;
		}
		.boutons {
			text-align: left;
			border-top: 1px solid #ddd;
			padding: 1.8em 0;
			margin: 1.4em 0;
	 	}
	 	input.submit {
		 	padding: 0.4em 2% 0.4em;
			font-size: 1.1em;
		}
	}

}

.formulaire_editer_responsable {
	.editer_nom {display: none;}
	padding-top: 1.7em ;
}

&.autre .formulaire_editer_evenement .date {font-size: 18px; }

.formulaire_editer_coordonnees {
	.inscription_logo, .editer_nom, .editer_nom_famille, .editer_prenom 	{ display: none; }
	.editer_slogan 															{ width: 95%; }
	.editer_liens_sites .editer 						{ width: 100%; }
}
#modiffiche .btfiche{
	color: #fff;
	margin-top: 1em;
}
.formulaire_editer_responsable {
	.inscription_logo, .editer_adresse, .editer_code_postal, .editer_ville, .editer_telephone, .editer_fax, .editer_slogan {	display: none; }
}

/* -------------- INSCRIPTION NEWSLETTER EN UNE LIGNE -------------- */

.contenu .formulaire_newsletter_subscribe3 {
	background-color: @couleur-defaut ;
	form {
		& > div {	.make-row(); }
		.editer-groupe { .make-xs-column(10); }
	}
}

/* -------------- FILS DE COMMENTAIRES -------------- */

.comments {
	.comment-item {list-style:none; }
	p {font-size: 1em; }
}

#contenu .comments-posts {
	h2 {
		margin-top: 20px;
		float: left;
		border-bottom: 3px solid @couleur-defaut;
	}
	> .comments-ul > .comment-li {
		border-bottom: 1px solid @grisLight;
		margin-bottom: 2em;
	}
	.comments-ul {
		clear: both;
		margin-top: 1em;
		padding: 1em 0 0 0em;
		.comment-li .hreview {
			display: flex;
			margin-bottom: 2em;
		}
		.comment-meta {
			width: 210px;
			flex: 1;
			margin-right: 1em;
			background: @gris-lighter;
			margin-bottom: 0;
			padding: 0.9em .9em;
			position: relative;
			.spip_in .fn, .dtreviewed{
				font-size: 17px;
				text-decoration: none;
				line-height: 1.2em;
				font-weight: normal;
			}
			.vcard							{ display: block; }
			.item 							{ display: none; }
			.dtreviewed		{ font-weight: normal; }
		}
		.comment-content {
			flex: 6;
			.comment-texte, .comment-texte p{font-size: 1em; }
			h3.comment-texte, h3.comment-texte * {
				font-size: 22px;
				font-weight: bold;
				margin-bottom: .4em;
			}
		}
		.comment-reply {
			display: block;
			margin-top: 1em;
			a {
				.btn;
				background: #fff;
				padding: .5em 0.8em;
				font-size: 0.9em;
			}
		}
		.comments-ul							{
			padding-left: 3em;
			margin-top: -2em;
		}
	}
}

/*  */

.footer {
	clear: both;

	.grotit{
		margin: 3em auto 0;
		border-bottom: 5px solid @couleur-defaut;
		width: auto;
		padding-bottom: .6em;
		text-align: center;
		border-bottom: none;
		position: relative;
		.filetapres(5px,2.6em);
	}

	.pied {
		padding-top: 4em;
		padding-bottom: 4em;
		background-color: @grisLighter;
		overflow: hidden;
		.btn { background: @couleur-defaut; }
		.row { margin-bottom: 0; }
	}
	.container { text-align: center; }
	h2.contact, .tit {
		text-transform: uppercase;
		display: inline-block;
		padding: 0.7em;
		font-size: 1.2em;
		font-weight: 600;
		color: @couleur-defaut;
		margin: 0 0 1em;
	}
	h2.contact, .tit { padding-bottom: .5em };
	#adresse, #infolettre{font-size: 1.1em; }
	#adresse {
		margin-bottom: 2em;
		border-right: 1px solid #fff;
		.supplement {
			font-style: italic;
			font-weight: 500;
			font-size: .9em;
		}
		.adresse {
			margin-bottom: 1.2em;
			font-size: 1em;
			line-height: 1.7em;
		}
		.telephone {
			color: @couleur-defaut;
			font-size: 1.4em;
			margin: .4em;
		}
	}
	.btn::before { margin-right: 0.3em; }
	#infolettre{
		.formulaire_spip, .editer-groupe {
			background-color: transparent;
			padding: 0 0;
			margin: 0;
			.editer_nom, .editer_session_email {
				width: 100%;
				margin-left: 0;
			}
		}
		.formulaire_spip {padding: 0 0 1em; }
		.text {
				border-radius: 4px 4px 4px 4px;
				color: #555555;
				font-size: 16px;
				border-radius: .3em;
				margin: 0 auto;
				padding: 0.7em 2% 0.6em;
				text-align: center;
				width: 50%;
		}
		.boutons{margin-top: 0; }
	}
	.btn, .boutons .submit {
		margin-top: 1.4em;
		padding: .3em 1em ;
		border-radius: .3em;
		font-size: 16px;
		font-weight: 400;
		&:hover{
			background:@rougeDark;
			color: #fff;
		}
		.icon-envelope{
			background-image: url('https://ericbocquet.fr/squ/squ-z/ergo/bt_contact.png');
			background-position: 0;
			font-style: normal;
			margin:0 0.2em 0 0.1em;
		}
	}

  .logopied .row {
  	.centrerflex;
  	margin-top: 70px;
  	.item-site {margin: 70px 40px;}
  }

	#navpied, .menu-liste {
		text-align: center;
		li {
			display: inline-block;
			list-style: none;
			a {
				display: inline-block;
				padding-right: 1.2em;
				margin-left: 1em;
				font-weight: normal;
				color: #000;
				font-size: .9em;
			}
			img {
				margin: 0 5px .2em 0;
			  height: 24px;
			}
			.btinfolettre img {
				padding: 4px;
				margin-right: 3px;
			}
			.btyt img {
				margin-left: 1px;
				padding: 1px;
			}
			.btsearch img {
				height: 24px;
			}
			&:last-of-type a{border-right: 0 solid @gris; }
		}
	}
	.nav { 				padding: .7em 0 0; }
	.navpied {		margin-bottom: 0; }
	.menu-liste {
	 	margin-top: .5em;
		margin-bottom: 2.5em;
		li a { 	border-right: 1px solid @gris; }
	}

}

/*  */

/*  */

@keyframes depliantbas {
	0%   { bottom: -160px; }
	100% { bottom: 0px; }
}

.depliantbas, .depliantdroite {
	background: none repeat scroll 0% 0% #FFF;
	margin: 0px !important;
	position: fixed !important;
  z-index: 2;
}

.depliantbas {
	padding: 0px 20px 30px;
	border-top: 5px solid @couleur-defaut;
	height: 160px;
	width: 100%;
	left: 0px;
	box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.1);

	&.ouvert {
		bottom:0px;
		animation:depliantbas 2s 1 ease-in-out;
	}

	&.ferme { display: none; }

	.fermer {
		position: absolute;
		bottom: 153px;
		right: 98px;
		background: none repeat scroll 0% 0% @couleur-defaut;
		color: #FFF;
		text-transform: uppercase;
		font-weight: 600;
		padding: 1px 8px 4px;
		border-radius: 0px 0px 5px 5px;
		display: inline-block;
		width: auto;
		font-size: 0.9em;
		margin-bottom: 15px;
		z-index:1000;
	}

	h2 {
		background: none repeat scroll 0% 0% @couleur-defaut;
		color: #FFF;
		text-transform: uppercase;
		font-weight: 600;
		padding: 5px 10px 7px;
		border-radius: 0px 0px 5px 5px;
		display: inline-block;
		width: auto;
		font-size: 1.1em;
		margin-bottom: 15px;
	}

	.surtit {
		font-size: 1.5em;
		font-weight: 700;
		display: block;
		margin: 5px;
	}

	h3 {
		font-size: 1.5em;
		margin: 3px 0 3px;
	}

	.ps {
		display: inline-block;
		color: rgb(0, 0, 0);
		font-size: 0.9em;
		font-weight: 700;
		margin-left: 5px;
	}

}

@keyframes depliantdroite {
	0%   { right: -160px; }
	100% { right: 0px; }
}

.depliantdroite {
	top: 50%;
	transform: translateY(-50%);
	height: auto;
	width: 100px;
	background: none repeat scroll 0% 0% #FFF;
	right: 0px;
	font-size: 1em;
	transition: .5s;
  padding: .5em .9em .5em 1em;
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.2);
  border-radius: 5px 0 0 5px ;
  font-size: 1.4em;

	&.ouvert {
		right:0px;
		animation:depliantdroite 2s 1 ease-in-out;
	}
	&.ferme {
		transform: translate(100%,-50%);
	}
	.fermer {
		position: absolute;
		left: -38px;
		background: @couleur-defaut;
		width: 38px;
		color: #fff;
		height: 38px;
		border: none;
		border-radius: 5px 0 0 5px;
		padding: 0;
		font-size: 0.9em;
		top: 11px;
	}
	.item {padding: .3em 0; }
	.tit {
		text-align: center;
		font-size: 0.7em;
		padding: 0;
		width: 100%;
	}
	.logo {
		border-radius: 50%;
		display: block;
		overflow: hidden;
	}
	a.active, a:hover, a:focus, a:active, a:target {
		.logo {
			border-width: 4px;
			border-style: solid;
		}
	}
}


.page_sommaire .depliantbas .container {
	text-align:left;
	padding-top:0;
}

body {
	#tarteaucitronRoot * { font-family: @labeur !important; }
	#tarteaucitron {
		.tarteaucitronBorder, #tarteaucitronServices .tarteaucitronMainLine {
			border-color: @couleur-defaut !important;
			&:hover { border-color:darken(@couleur-defaut,5%) !important; }
		}
		#tarteaucitronServices .tarteaucitronMainLine {
			background-color: @couleur-defaut;
			&:hover { background-color: darken(@couleur-defaut,5%); }
		}
	}
	#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer 	#tarteaucitronCookiesList {
		&, .tarteaucitronCookiesListMain, .tarteaucitronHidden { border-color: @couleur-defaut;  }
	}
	#tarteaucitron {
		#tarteaucitronServices .tarteaucitronDetails {
			background-color: #fff;
			color: @couleur-defaut;
		}
		#tarteaucitronInfo {
			color: #fff;
			background-color: @couleur-defaut;
			border-width:0;
		}
	}
	#cookie-bar, #tarteaucitronRoot #tarteaucitronAlertBig {
	padding-top: 1em;
	background:@couleur-defaut;
	#tarteaucitronDisclaimerAlert {
		font-weight: 400;
		font-size: 1.1em;
 }
	button 														  					{
		background: #fff;
		font-weight: 500;
		border-radius: .1em;
		margin: 0 .35em .3em;
	}
	.cb-disable, .tarteaucitronDeny	{ &, span:before { color: @rouge; } }
	.tarteaucitronAllow											{ &, span:before { color: @vert; } }
	}
}

/*  */

#debug-nav { line-height: 16px; }
body {
	.spip-admin-bloc, .spip-admin-float {
		margin-right: 3px;
		right: 0;
		display: table;
		z-index: 3000000;
		font-size: .9em;
		top: 8px;
		a {
			border-radius: 0;
			&:first-of-type{
				background-color: @jaune;
				color: #000;
			}
			&:last-of-type{background-color: @rouge; }
		}
	}
}

/*  */

.partage_toolbox {
	.partage_button_facebook {
		background-color: @bleu_fb;
		border-color: @bleu_fb;
	}
	.partage_button_twitter {
		background-color: @bleu_tw;
		border-color: @bleu_tw;
	}
}
html #at4-share, html #at4-soc 																											{ top: 215px;}
html.page_sommaire #at4-share, html.page_sommaire #at4-soc 	{ top: 348px;}

// 
//

 /*  */

.sanscadre() {
	height: auto;
	overflow: visible;
}

body #header {
	height: 121px;
	margin-top: 0;
	z-index: 2000;
	overflow: visible;
	background-color: @grisLighter;
	.box-shadow();
	.btdroite {
  	text-transform: uppercase;
  	padding : .5em .1em .3em;
	}

	.interieur {

		.menuprincipal{
			border:none;
			margin: 0;
			z-index: 200;
			position: relative;
			transition-property: all;
			transition-duration: .6s;
			top: 0;
			border-radius: 0;
			float: right;
			overflow: hidden;
			height: 58px;
			width: 100%;
			background: #fff;

			ul>li:first-child>a {margin-left: 0; }

			.nav-collapse {
				text-align: left;
				height: 57px;
				border:none;
				.sanscadre();
				float: right;
				background: #fff;
				width: auto;
				font-size: 0.8em;
				margin: 1.2em 1.2em 0;
				ul {
					position: static;
					width: 100%;
					height: 57px;
					margin: 0;
					z-index:100;
					text-align: right;
					float: none;
					font-size: 0;
					.sanscadre();
					>li {
						float: none;
						border-top: 20px;
						padding: .9em 0 0 ;
						height: 3.5em;
						margin: 0;
						line-height: 200%;
						display: inline-block;
						position: relative;
						font-size: 15px;
						.sanscadre();

						>a, >span {
							text-shadow: none;
							padding: 0 0 .2em;
							float: left;
							border-bottom: 3px solid transparent;
							font-weight: 400;
							margin: 0 1em	;
							font-size: 1.4em;
							text-transform: none;
							background-color: transparent;
						}
						// Faciliter le création de ppicto dans le menu
						
							&.video >a {
								padding-left: 58px;
								
								&:hover{
									
								}
							}
						
							&.rezo >a {
								padding-left: 58px;
								
								&:hover{
									
								}
							}
						
							&.blog >a {
								padding-left: 58px;
								
								&:hover{
									
								}
							}
						
						&:hover, &.active {
							a {
								border-bottom: 5px solid @couleur-defaut;
								padding-bottom: 16px;
							}
						}
						&:hover {
							.ssmenu {
								top: 3.8em;
								height: 4.2em;
								border-bottom: 5px solid @couleur-defaut;
								li::after { display: none; }
							}
						}
						&.bleu, &.vert, &.violet, &.jaune, &.orange {
							background-color: #fff;
							border: none;
							a {
								border-bottom: 4px solid #456;
								padding-bottom: .3em;
								font-weight: 700;
							}
						}
						&.jaune a			{		border-color: @jaune;	}
						&.bleu a				{		border-color: @bleu;	}
						&.vert a 				{		border-color: @vertLight;	}
						&.orange a 	{		border-color: @orange;	}
						&.violet a 		{		border-color: @violet;	}
			  		&:after{
			  			content: "|";
			  			font-weight: 300;
			  			color: @couleur-defaut;
							margin-top: -.2em;
							vertical-align: top;
							display: inline-block;
			  		}
						&.menu-entree:last-of-type {
							&:after {color: transparent;}
						}
						&.active{
							a{
								border-bottom: 3px solid @couleur-defaut;
								padding-bottom: 6px;
							}
						}
					}
					>li:last-child:after {content: ""; }
					.ssmenu {
						display: block;
						position: absolute;
						top: 3.5em;
						height: 0em;
						left: 0;
						width: 100%;
						z-index: -1;
						background: rgba(0,0,0,.05);
						overflow: hidden;
						border: 0;
						max-width: 300px;
						ul {
							display: flex;
							flex-direction: column;
							li {
								display: table-col;
								padding: 0.4em 0em;
								height: auto;
								a {
									margin: 0;
									color: @couleur-defaut;
									border: 0px solid #fff;
									padding-bottom: 0;
								}
							}
						}
					}
				}

				li {float: left; }

			}

			.formvisible {
				float: right;
				width:0;
				max-height: 5em;
				#formulaire_recherche  {
					display: block;
					overflow: hidden;
					margin: 0.5em 0;
					form {
						padding: .2em;
						padding: 0.55em 0.7em 0;
						label.muted { display: none; }
						.text {
							width: 63%;
							float: right;
							margin-left: 1%;
							background: #fff url('https://ericbocquet.fr/squ/sites/senateurs.lhumaindabord.fr/ergo/svg/ico_search.svg') right no-repeat;
							padding: .1em .6em;
							font-weight: 400;
							color: #000;
							border: 1px solid #aaa;
							line-height: 1.3em;
							padding: 0.6em 0.7em;
							border-radius: .2em 0 0 .2em;
							background: #fff;
							width: 85%;
							margin-right: 0;
							float: left;
						}
					}
					.btn{
						border-radius: 0 0.3em 0.3em 0;
						padding: 0.63em 3.3%;
						background: @couleur-defaut;
						display: block;
					}
				}
			}
			.sanscadre();
			height: 84px;
		}
		.navbar {
			margin-bottom: 0;
			min-height: auto;
		}
		background: #fff;
		.titsite {
			width: 210px;
			background-size: 95%;
			margin: .4em;
			padding: 14px 0 0;
			height: 1.9em;
			background-repeat: no-repeat;
			background-position: 0.4em 0.4em;
			float: left;
		}
		li { a, span { color: #000; } }
		#navsup {
			background: @grisLight;
			z-index: 5;
			padding: 0 0 0 8px;
			width: 100%;
			border: 0;
			.nav {
				margin: 0;
				height: 38px;
				text-align: right;
				&.pull-right { width: 80%; }
				&.pull-left {padding: 0;}
				li 					{
					height: 38px;
					a {
						padding: 0.4em 0 .3em;
						font-size: 0.9em;
					}
			    &.btcompte{
			   		background-image: url('https://ericbocquet.fr/squ/squelettes/ergo/svg/ico_user.svg');
						background-position: 0.2em .1em;
						padding-left: 45px;
			    	a {
							font-size: 1em;
							padding: 0.5em 0;
							font-weight: 400;
			    	}
			    }
			    &.btpanier{
			   		background-image: url('https://ericbocquet.fr/squ/squelettes/ergo/svg/ico_panier.svg');
						background-position: 0.2em 0;
						background-size: 24%;
						padding-left: 45px;
			    	a {
							font-size: 1em;
							padding: 0.5em 0;
							font-weight: 400;
							.nb_produit{
								float: left;
								background: @couleur-defaut;
								width: 1.4em;
						    height: 1.4em;
						    border-radius: 50%;
						    padding: 0.4em;
						    color: #fff;
						    text-align: center;
						    font-weight: 500;
						    vertical-align: middle;
						    line-height: 0.6em;
						    font-size: 0.8em;
						    display: block;
						    top: -0.4em;
						    position: relative;
						    left: -0.8em;
							}
			    	}
			    }
			  	&.btdroite {
						background: @couleur-defaut;
				    padding: 0.2em 0.8em;
				    line-height: 1.3em;
			  		a {
			  			color: #fff;
			  			font-weight: 500;
			  		}
			  	}
					&.btico{
						margin: 1px 0 0;
						padding: 0;
						width: 29px;
						img {width: 100%; }
					}

					&.btfb, &.bttw, &.btyt {
						img {height: 23px; }
					}

					&.btfb { width: 26px; }

					&.btcontact img { display: none; }
				  .btinfolettre{ margin:0;  }
					&.liaccueil {
						float: left;
						margin-right: .2em;
					}
				}
			}
		  .btinfolettre{
				margin: 7px 10px;
				&:hover{ color: @jaune;  }
		  }
		}
	}
}

//  Max Résolution

@media screen and (max-width: @screen-lg-max) {
}

@media screen and (max-width: @screen-sm-max) {
}

@media screen and (max-width: @screen-sm-max) {
	body .page #header .interieur {
		.logo {
	    width: 60px;
	    background-size: 200px;
	  }
   	#nav.menuprincipal .nav-collapse {
   		margin: 1.2em 1.2em 1.2em 0;
   		ul > li {
   			 > span,  > a {
			    margin: 0 0.6em;
			  }
			}
   	}
  }
}

@media screen and (max-width: @screen-xs-max ) {

	.navbar-toggle {
		svg { fill: @couleur-defaut; }
		&:hover, &:active {
			background-color: @couleur-defaut;
			svg { fill: #fff;  }
		}
	}

	body .page #header {
		position: relative;
		padding: 0 0 @navbarsupHeight;
		overflow: visible;
		height: @navbarsupHeight;

		.interieur {
			.logo {
				top: 2.9em;
				background-position: 6vw -2vw;
				background-size: 108%;
				width: 100vw;
				height: 35vw;
				a, h1{
						height: 8em;
				    width: 100vw;
				    display: block;
				    overflow: hidden;
				}
				h1 { height: 4em;  }
			}
			.container .logo {
		    background-position: 0;
		    background-size: 105%;
		  }

			#navsup {
				height: 4em;
				position: fixed;
				z-index: 10;
				height: @navbarsupHeight;
				min-height: 0;
				padding: 0;
				background-color: #000;

				ul { height: @navbarsupHeight + 1; }
				.nav{
					width: 100vw;
					// padding: 0;
					// padding-right: (@navbarsupHeight - 35) / 2;
					padding: 0 2vw 0 2vw;
					.btn-navbar{
						// width: 10vw;
						float: left;
						margin-right: 5px;
						margin-top: (@navbarsupHeight - 35) / 2;
						height: 34px;
						padding: 0 0.3em;
						&:hover, &:focus, &:active { svg { fill: #fff; } }
					}
					.btico {
						padding: 0;
						margin-top: 7.5px;
						a {
							padding: 0;
							img {
								margin: 0.15em -0.1em;
								width: 33px;
							}
						}
					}
					.langs a {	padding : (@navbarsupHeight - 28) / 2 1vw 0; }
					.langs + .langs { a {		padding-left : 0 ; } }
					.btabonne{
						margin: 0.5em 1%;
						padding: 0.3em 0;
						a {
							padding: 0.1em 0.4em 0.1em;
							font-size: .8em;
						}
					}
				}
				.nav li .btinfolettre { margin: 4px 5px; }
				.bt_droite:hover			{ opacity: .8; }
				.btcompte{
					background-position: 1px 9px;
					a {
						width: 100%;
						height: 70%;
					}
				}
				.btcontact, .btsearch {
					height: @navbarsupHeight;
					a {
						padding: 0;
						img {width: 100%; }
					}
				}
				.btcontact {
					padding: 0.35em 0.8em;
				}
				.btsearch{
					background-size: 100%;
					width: 43px;
				}
				.contact 	a 																{ font-size:0;}
				.formvisible 															{ padding-right: 30px; }
				#formulaire_recherche form 		{ padding: 0.55em 1.5em 0 .7em; }
			}

			.menuprincipal {
				display: none;
				position: absolute;
				background: rgba(0,0,0,0);
				float: left;
				.box-shadow(0 30px 37px #000000);
				width: 100vw;
				height: auto;
				margin: 46px 0 0;
				z-index:1100;
				overflow: visible;
				.btn-navbar {
					float:left;
					background: #fff;
					padding: 9px 8px;
					border-radius: 0;
					.icon-bar {
					    display: block;
					    width: 23px;
					    height: 4px;
					    background-color: #999;
					}
					.menu-liste, .plus { display: none; }
				}
				.nav-collapse {
					width: 100%;
					border-top : 7px solid @couleur-defaut;
					border-bottom : 15px solid @couleur-defaut;
					 .menu-liste {
						background: @couleur-defaut;
						width: 100%;
						overflow: hidden;
						height: auto;
						display: flex;
						flex-direction: column;
						> li {
							width: 100%;
							height: 3.1em;
							display: block;
							order: 2;
							transition: all .5s;
							&:after { display: none; }
							&:hover { margin-left: .8em; }
							> a, > span {
								color: #fff;
								font-size: 1.4em;
								margin: 0 4.7vw;
								padding: 0 0 0.1em;
								border-bottom: 4px solid transparent;
								height: auto;
								text-align: left;
								overflow: hidden;
								display: block;
							}
						}
						.visible-xs{
							background: @rougeDark;
							order: 1;
							padding-top: 1.1em;
							height: 3.9em;
							a:hover { color: @jaune; }
						}

					}
					.search{ display: none; }
				}
			}
		}
		.content {
			margin: 0;
			border-top: 7px solid @couleur-defaut;
		}

		#navsup .nav .btn-navbar {
			// width: 1.82em;
			text-align: center;
			padding: inherit;
			a { text-align: center; }
		}
		.interieur {
			.container .logo {
		    background-position: 0;
		    background-size: 105%;
		  }
			#nav.menuprincipal {
				overflow: visible;
				margin: 42px 0 0;
				.ssmenu{ display: none; }
				.nav-collapse {
					position: absolute;
					width: 100vw;
					margin: 0;
					// border-top: 2px solid @couleur-defaut;
				}
			}
			#navsup{
				background-color: #fff;
				box-shadow: 5px 5px 5px #0002;
				.nav {
					padding: 0 0 0 .5vw;
					.btico a img	{
						margin: .05em 0 .15em;
					}
					.btsearch {
						margin-right: .2em;
						a{ font-size: 0; }
					}
					li.btico { margin-top: 0.45em; }
					li .btinfolettre {
						margin: 1px 0;
						width: 32px;
						img { width: 32px; }
					}
					li.btcontact {
						padding: 0.35em 0.8em;
						a {
					    height: 42px;
					    font-size: 0;
					    &:before {
								content: 'contact';
								font-size: 16px;
								padding: 0.9em .1em;
								display: block;
					    }
					  }
			  	}
				}
			}
		}
		.logo{ display: none; }
  }
}

@media screen and ( max-width: 358px ) {
	body .page #header .interieur #navsup .nav li.btcontact {
    padding: 0.35em 0.3em;
		a::before {
	    font-size: 13px;
	    padding: 1.2em 0;
    }
  }
}

//  Min Résolution
@media screen and ( min-width: @screen-xs ) {
  body .page #header  .interieur #nav.menuprincipal .nav-collapse ul > li {
		&:hover {
			a{
				border-bottom: 5px solid @couleur-defaut;
				padding-bottom: 26px;
			}
			.ssmenu {
				height: auto;
				overflow: hidden;
				left: 0.9em;
				top: 4.7em;
				width: 100vw;
				padding: 1.2em 1.8em;
				background-color: @couleur-defaut;
				ul {
					background-color: transparent;
					box-shadow: 0 0 rgba(0,0,0,0);
					>li:hover a {
					  padding-left: 12px;
					  border-left: 3px solid #fff;
					  border-bottom-width: 0;
					  margin-bottom: 5px;
					}
				}
				li {
					background-color: transparent;
					float: none;
					a {
						background-color: transparent;
						margin: 0 1.5em	0 0;
						font-weight: 400;
						width: auto;
						color: #fff;
						padding-top: 0;
						padding-bottom: 0;
					}
				}
			}
			&:last-of-type:hover .ssmenu {
				right: .9em;
				left: inherit;
			}
		}
	 > a, &:active a, &:hover a { height: auto; }
	}
  body .page #header .interieur #navsup .nav li.btsearch{
    width: 173px;
    text-transform: uppercase;
    font-weight: 700;
    background: #ccc;
    padding: .1em 0.5em;
    margin: 0 -5px 0 5px;
    a {
    	font-weight: 600;
    	font-size: .95em;
    }
    img{
			width: 33px;
			margin: -3px 0 0;
    }
  	&.btsearch:focus-within {background:@gris !important; }
  }

	.page_auteurs {
		.laliste, .laliste { .item-auteur {text-align: center; } }
		.message { text-align: center; }
	}

	.atss.atss-right .at4-share-title {
		transform: rotate(-90deg) translate(1.4em,1.5em);
		background: #fff;
		transform-origin: center;
		padding: 0.8em;
		font-weight: 600;
	}
}

@media screen and ( min-width: @screen-sm ) {
	body #header .interieur #navsup .nav li.liaccueil {
		background: #c9c9c9;
		padding: 2px 10px 0;
		border-radius: 0;
	}
}

@media screen and ( min-width: @screen-lg ) {
	body .page #header .interieur #nav.menuprincipal .nav-collapse ul > li:hover {
		.ssmenu { left: 1.4em; }
		&:last-of-type:hover .ssmenu {	right: 1.4em; }
	}
}

//  Entre deux Résolution
@media screen and (min-width: @screen-sm) and (max-width: @screen-sm-max) {
	body .page #header .interieur #navsup {
		padding: 0;
		.btico {
			padding-left: 0;
			padding-right: 0;
		}
		.btnl { padding: 7px 2px; }
		.btcompte {
			background-position: 5px 4px;
			a {
				width: 42px;
				height: 42px;
				display: block;
				padding: 10px;
				overflow: hidden;
				float: left;
			}
		}
	}
}

@media screen and (min-width: @screen-xs ) and (max-width: @screen-xs-max ) {
	.page #header .interieur #navsup .nav {
    width: 53%;
    padding: 0;
	}
	body #header {
		height: 19vw;
		margin: 0;
		.interieur {
			.logo {
				background-size: 60%;
				width: 100vw;
				height: 27vw;
				background-repeat: no-repeat;
				background-position: 62% top;
			}
		}
	}
  body .page #header .interieur #navsup .nav li.btsearch{
  	padding: .6em 0 .3em;
  	img { margin-left: 7px; }
  }
}

// ======== TABLETTES PAYSAGE =========
@media screen and (min-width: @screen-md ) and (max-width: @screen-md-max) {
	body #header .interieur .menuprincipal .nav-collapse ul > li {
		& > a,  & > span {margin: 0 .3em; }
	}
}
 /*  */

// ======= GENERALITES =======

.grotit{
	text-align: center;
	display: table;
	border-bottom: 2px solid @couleur-defaut;
	text-transform: none;
	padding: 0 0 0em;
	margin: 0 auto 1em;
	font-weight: 300;
	font-size: 2.4em;
	&.filetapres {
		border-bottom: none;
		.filetapres(3px, 4.3em);
	}
}

/* ======= LISTES D'ELEMENTS ======= */

.liste-logofond .item {
	* {
		transition-property: all;
		transition-duration:  .5s;
	}
	.logo img { width: 100%; }
  .legende{
  	margin: 0 auto;
  	left: 0;
		bottom: 0;
		padding: .2em 3%;
		z-index: 1;
		// 
		position: absolute;
		width:calc( ~'100% - 50px ');
		.tit, .surtit, .desc{
			display: inline-block;
			padding: .4em 3%;
			line-height: 110%;
			font-weight: 500;
		}
		.tit {font-size: 1.45em; }
		.tit, .desc {
			max-width: 94%;
			// 
			position: absolute;
			left: 3%;
			margin: 0;
			bottom: .7em;
		}
		.desc{
			color: @grisDarker;
			background-color: #fff;
			padding: 0 3%;
			font-size: 1em;
			line-height: 140%;
			height: 0;
			line-height: 140%;
		}
  }
}

.liste-grille {
	margin-top: 3em;
	.item {
		background-clip: content-box;
		height: 15em;
		text-align: center;
		background-position: center;
		background-size: cover;
		.margebas;
		.tit {
			display: flex;
			align-items: center;
			height: 100%;
			background: #00000055;
			color: #fff;
			text-align: center;
			font-size: 1.9em;
			padding: 1em;
			font-weight: 600;
			line-height: 1.3em;
			justify-content: center;
			border-bottom: 6px solid @couleur-defaut;
			&.petit { font-size: 1.3em; }
		}
	}
	.lrub {margin: 0 0 2em; }
}

.liste-mot{
	background-color: transparent;
	.grotit{
		margin-bottom: 1.53em;
		padding-bottom: .5em;
	}
	.item {
		display: inline-block;
		border-bottom: 0.25em solid @couleur-defaut;
		margin: 0 1em .5em 0;
		padding: 0.4em 0.6em 0.3em;
		font-size: 1.5em;
		color: #000;
		background: @grisLighter;
		border-radius: 0.1em 0.1em;
	}
}

.content .chapo {
	font-weight: 600;
	padding: 1.4em;
	background-color: @gris-extralighter;
	p { margin: 0 0 1em; }
}

.bicolonnes{

	// === COLONNE DE GAUCHE ===

	.colgauche {
		.grotitrub, .grosurtit {
			text-transform: uppercase;
			color: @couleur-defaut;
			margin: 0 0 1em;
			font-size: 1.4em;
		}

		.grotit{
			text-align: left;
			border-bottom: none;
			font-size: 2.5em;
			margin: 0 0 0.8em;
			font-weight: 600;
			color: #000;
		}
		.grosurtit{
			margin: 1em 0 0.1em;
			font-size: 1.6em;
			line-height: 120%;
			color: @grisDark;
		}
		.grosoustit{
			margin-top: -0.9em;
			margin-bottom: 0.6em;
		}
		.date{
			.titencadre;
			padding: 0.3em 2.5%;
			margin-bottom: 1.6em;
			font-size: 1.3em;
			outline: none;
			text-decoration: none;
			border-bottom: none;
		}

		.liste-doc:not(.galerie) .item {
		  background: @grisLighter;
		  padding: .9em 1em;
			.tit 						{ margin-bottom: 0.3em; }
			.coldroite { padding-bottom: 2.4em; }
			.desc {
			  line-height: 1.2;
			  margin-bottom: 0.8em;
			}
			.btn {
				position: absolute;
			  margin-right: 0;
			  bottom: 0;
			  right: 2em;
			}
		}

		// Liste d'articles

		.item-art {
			margin-bottom: 1.8em;	clear: none;
			padding-bottom: 2.4em;
			border-bottom: 1px solid @grisLight;
			.date { margin: 0 0 .9em; }
			.tit{
				font-size: 1.7em;
				font-weight: 700;
				width: 100%;
				line-height: 1.3;
				overflow: visible;
				margin: 0;
				line-height: 1.2em;
				margin: 0 0 .2em;
				a 					{ color: #000; }
				.surtit 	{ color: #fff; }
			}
			.surtit{
				font-size: .7em;
				display: block;
				padding: 0;
				font-weight: 700;
				color: @grisDark;
				margin: 0;
			}
			.stitmot{
				font-size: 0.45em;
				display: inline-block;
				padding:.1em .5em .05em;
				font-weight: 700;
				color: #fff;
				margin: 0.3em 0.7em 0 0;
				float: left;
				line-height: 1.8em;
			}
			.boutons{
				position: absolute;
				bottom: 0;
			}
			.publication{
				font-size: 1em;
				margin: 0 0 1.2em;

				.date-pub, .date-modif {
					text-transform: uppercase;
					color: @couleur-defaut;
					font-style: normal;
					font-weight: 600;
				}
				.date{
					margin-bottom: 0;
					font-size: 1.5em;
				}
				.date-pub::before { 			content: "Le " }
				.date-modif::before { 	content: "| Mis à jour le " }
				.author{
					font-weight: 700;
					color: #000;
				}
			}
			.entourelogo {
				margin-top: 0;
				position: relative;
				.spip_logo{
					width: 100%;
					height: auto;
					min-height: 100px;
					border-bottom: 8px solid #456;
				}
				.titlogo{
					color: #000;
					position: absolute;
					bottom: 1.4em;
					left: 25px;
					background: #fff;
					padding: 0.5em 0.8em;
					border-left-style: solid;
					border-left-width: 10px;
					text-transform: uppercase;
					font-size: 0.9em;
					font-weight: 600;
				}
			}
			.introduction{
				font-size: .9em;
				line-height: 150%;
				margin-bottom: .8em;
			}
			.introboutons{
				min-height: 210px;
				img { color: inherit; }
			}
		}
		.col-sm-12:last-of-type > .item-art { border-bottom: 0 solid #fff; }

	}

	.btn {
		display: inline-block;
		text-transform: uppercase;
		line-height: initial;
		border-radius: 0;
		margin: 0 .9em 0 0;
	}

	// === 2 COLONNES  ===

	.colgauche, .asidedroite {
		overflow: hidden;

		.grotit { .tit_doubleliseret; }

		.item{ width: 100%; }
		.logoauteur{
			padding: auto;
			.titlogo {
			  padding: 0.6em 0 0;
			  display: block;
			  font-weight: 700;
			  font-size: 1.1em;
			  line-height: 1.2em;
				&:before {
				  content: 'par';
				  display: block;
				  font-size: 1em;
				  font-style: italic;
				  font-size: 0.9em;
				  font-weight: 500;
				  color: #000;
				}
			}
		}
		.item-auteur:hover .legende .tit a { color: @couleur-defaut; }

		.liste-mot{
			padding: 0;
			margin-bottom: 5.2em;
			.item {
				width: auto;
				padding: 0.4em 0.6em 0.3em;
				background: @grisExtraLighter;
				font-size: 1.3em;
				&:hover {color: #fff; }
			}
		}

	}

	// === COLONNE DE DROITE  ===

	.asidedroite {

		.grotit {.tit_doubleliseret; }
		.grosurtit{
			padding: 0.4em 4% .6em;
			color: #fff;
			font-size: 1.4em;
			width: auto;
			display: inline-block;
			margin: 0 0 1em;
			margin: -0.7em 0 1em;
		}

		.minilien{
			background: #ddd url('') .7em center no-repeat;
			background-size: 2.9em;
			display: block;
			padding: 0.7em 5% 0.7em 5.1em;
			margin-bottom: 3em;
			color: #000;
			font-size: 1.1em;
			line-height: 1.4;
		}

		.item {
			background: transparent;
			padding: 0;
		}
		#videos{
			margin-bottom: 3em;
			overflow: hidden;
		}
		.lls {
			text-transform: none;
			font-size: 0.9em;
			font-weight: 600;
			padding: 0 0 1em;
			margin-top: 1em;
		}

		.liste-items, .liste-evt {
			margin-bottom: 3em;
			overflow: hidden;
			.btn{
				margin: 1.1em 10% 1.1em 0;
				font-size: 0.8em;
			}
			.llsrub{
				margin: 1.1em 10% 0 0;
				font-size: 1.1em;
			}
			.date {
				.titencadre();
				font-size: .8em;
				margin-bottom: .6em;
			}
			.lieu {
				color: @bleu;
				font-weight: 500;
				margin-bottom: .4em;
				display: block;
			}
		}
		.accordeon {
			.cnt, .date, .tit, .lieu { margin-left: 36px; }
		}

		#twitter{
			margin: 2em 0 3em;
			overflow: hidden;
			width: 100%;
			.grotit{
				font-weight: 600;
				font-size: 2.1em;
				color: @couleur-defaut;
				border-bottom: none;
			 }
		}

		.llsrub{
			margin-left: 0;
			font-size: 1.1em;
		}

		.item-auteur{
			.legende{
				&::before {
				    content: 'Par';
				    color: @couleur-defaut;
				    font-weight: 600;
				}
				.tit {
					font-weight: 800;
					a {color: #000;}
				}
				.circo{
					line-height: 1.2;
					margin: 0.6em 0;
				}
				.details {
					border-bottom: 1px solid #aaa;
					padding: 1em 0;
				}
			}
			&.deuxcolonnes{
				flex-direction: row-reverse;
				display: flex;
				width: auto;
				overflow: visible;
				.tit {
					min-height: 2.4em;
					border-top: 1px solid #aaa;
					padding: 1em 0 0;
				}
				.message{margin-top: .7em; }
			}
			&:not(.deuxcolonnes){
				.legende {
					padding: 0.4em 0 0.7em;
					border-bottom: 1px solid #aaa;
				}
				br { float: left;	}
			}
		}

		.message{
			margin-top: 1.7em;
			padding: 0;
			.mail { cursor: pointer; }
			.btn{
				margin: 0 1em 1em 0;
				padding: 0.5em 0.8em .4em;
				font-size: 0.8em;
			}
			.fb .btn {
				margin-right: 0;
				background-color: #4267B2;
				border-color: #4267B2;
				&:hover{
					background-color: #3257A2;
					border-color: #3257A2;
				}
			}
		}

		.formulaire_contact_libre {
			margin-top: 2.9em;
			margin-bottom: 0;
			z-index: 2;
			.editer{ width: 95%; }
		}

		.alaune, #alaune {
			margin: 0 0 2em;
			overflow: hidden;
			.item {
				.legende {
					height: 98%;
					width: 100%;
				}
			}
		}

	}
}

/* ======= PAGE TYPE CONTENU ======= */

.page_type_contenu {
	.asidedroite {
		.icones, .nav {
			vertical-align: middle;
			img {
				max-width: 22px;
				margin-right: 0.3em;
				vertical-align: middle;
			}
		}
	}
	.autre { overflow: hidden; }
}

/* ======= PIED ======= */

.page {
		.liste-grille, .videospied {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 3em;
		.grotit{
			margin-bottom: 1.53em;
			padding-bottom:.5em;
			width: 100%;
			text-align: center;
		}
	}
}
.liste-grille, .videospied, #laliste {
	width: 100%;
	.llsrub{
		.filetapres(3px, 4.3em);
		color: #000;
		text-transform: none;
		padding: 0 0 0.5em;
	}
}

.videospied{
	text-align: center;
	margin-top: 2em;
	.grotit a { color: #000; }
}

// ======== SMARTPHONE + TABLETTES + PETITS ECRANS (TRADI) =========
@media screen and (max-width: @screen-md-max) {

  .content .page_type_liste .bicolonnes .asidedroite { margin-top: 0.3em; }

	/*  */
	.liste-grille .lrub {
    margin: 1.5em 0 0;
    float: left;
  }

	.asidedroite .accordeon {
		.cnt, .date, .tit, .lieu {width: 90%; }
	}

}

// ======== SMARTPHONE + TABLETTES  =========
@media screen and (max-width: @screen-sm-max) {

	/*  */
	.content .page_type_liste .bicolonnes, #contenu.page_type_contenu {
		.asidedroite		{ margin-top: 2.5em; }
		.bicolonne 			{ padding-top: 3.8vw; }
	}

	/*  */
	.bicolonnes .asidedroite {
		#alaune, .alaune {
			.item {
				.lien					{ max-height: 14.4em; }
			}
			.minilien {
				background-size: 1.8em;
		    padding: 0.7em 5% 0.7em 3.5em;
		    br { float: left; }
			}
		}
	}

	/*  */
	body .page .content .page_type_contenu #intro .grotit { margin: 0 0 5vw; }

}

// ======== SMARTPHONES + TABLETTES DEBOUT =========
@media screen and (max-width: @screen-xs-max ) {

	body .page #header .interieur #nav.menuprincipal .nav-collapse {
		border-top: 5px solid @couleur-defaut;
		border-bottom: 14px solid @couleur-defaut;
	}

	/*  */

	.grotit{
	  padding: 0 5vw 0.2em;
		line-height: 110%;
		font-weight: 500;
		font-size: 1.7em;
	}

	body .page .content {
		margin-top: 2.2em;
		.contenu 				{	padding-top: 0; }
		.bicolonnes			{	padding-top: .8em; }
		.grotit							{	margin: 0.5em auto 0.9em ; }
		.contenu #intro, .contenu .intro {
	    font-size: 0.8em;
	    .grotit {padding: 0 0 .6em; }
	    .grosoustit{
				font-size: 1.6em;
				line-height: 130%;
				margin-top: 0.3em;
	    }
			.chapo {
				font-size: 1.1em;
				line-height: 150%;
			}
  	}
	}

	/*  */


	/*  */
	.bicolonnes {

		.btn {	margin: 0 .9em 1em 0; }

		.colgauche, .asidedroite {
			.grotit {
				font-size: 1.6em;
				text-align: center;
				&::after {
					float: none;
					left: calc(~"50% - 40vw");
				}
			}
		}

		.colgauche {
			.grotitrub 		{ margin:0.6em 0 0.8em; }
			.item-art {
				margin-bottom: 1.2em;
				padding-bottom: 1.2em;
				.stitmot {
					display: table;
					clear: both;
					float: none;
					margin: 1.4em 0 .6em;
					font-size: 0.5em;
				}
				.introboutons { min-height: auto; }
				.boutons {
					position: static;
					margin: 1em 0 0;
				}
				.entourelogo {
				  max-height: 40vh;
				  overflow: hidden;
				  margin-bottom: 1.4em;
				  .spip_logo{ margin-top: -7vh; }
				}
			}
		}
		.asidedroite .grotit{ font-size: 2.2em; }

	}

	.liste-grille {
		margin: 0;
		.item{ margin-bottom: 34px; }
	}

	.liste-imagesfond .item:hover .legende .desc {
		padding: 0;
		height: 0;
	 }

	.liste-logofond.row .item .legende { height: 16em; }

	/*  */

  .page .content .contenu.page_type_liste {
    .intro .grotit, #intro .grotit {
    	font-size: 3em;
			padding: 0 0 .6em;
		}
		.chapo {
			padding: 0.4em;
			font-weight: 600;
		}
	}

	/*  */

	/* ***************************** PAGES DE TYPE CONTENU ***************************** */

	.page_type_contenu {

		#intro 			{ text-align: left;}
		.chemin 		{ display: none; }
		#intro .grotit{
			text-align: left;
			border-bottom: none;
			margin: 0 0 0.8em;
			font: 600 2.5em/110% @titraille;
			color: #000;
			&::after{ display: none; }
		}
	}

}

// ======== GROS SMARTPHONES ET TABLETTES DEBOUT =========
// :::::::::::::::: 480 px -> 992 px :::::::::::::::::
@media screen and (max-width: @screen-sm-max) {
	.bicolonnes .asidedroite .grotit::after {width: 78vw; }
}

// ======== TABLETTES =========
// :::::::::::::::: 768 px -> 1280 px :::::::::::::::::
@media screen and (min-width: @screen-sm ) and (max-width: @screen-md-max) {
  .bicolonnes {
  	.asidedroite {
	  	.grotit		{ font-size: 1.7em; }
	  	.llsrub		{ font-size: 1em; }
	  }
		.colgauche .item-art .introboutons {padding-bottom: 2em; }
	}
}

// ======== ECRANS TRADITIONNELS =========
// :::::::::::::::: + 768 px  :::::::::::::::::
@media screen and (min-width: @screen-sm ) {
	.bicolonnes .colgauche .item-art .entourelogo {
	  padding-right: 0;
	}
}// 
/* ======== INCLUSIONS  ========== */

/*  */

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap');
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: local('Fira Sans Thin Italic'), local('FiraSans-ThinItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9A4kDNxMZdWfMOD5VvkrCqUT7fcWTP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: local('Fira Sans Thin Italic'), local('FiraSans-ThinItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9A4kDNxMZdWfMOD5VvkrCqUTDfcQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: local('Fira Sans ExtraLight Italic'), local('FiraSans-ExtraLightItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrAGQCf2VFn2lg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: local('Fira Sans ExtraLight Italic'), local('FiraSans-ExtraLightItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrAGQCf4VFk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local('Fira Sans Light Italic'), local('FiraSans-LightItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrBiQyf2VFn2lg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local('Fira Sans Light Italic'), local('FiraSans-LightItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrBiQyf4VFk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Italic'), local('FiraSans-Italic'), url(https://fonts.gstatic.com/s/firasans/v10/va9C4kDNxMZdWfMOD5VvkrjHYTLHdQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Italic'), local('FiraSans-Italic'), url(https://fonts.gstatic.com/s/firasans/v10/va9C4kDNxMZdWfMOD5VvkrjJYTI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Medium Italic'), local('FiraSans-MediumItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrA6Qif2VFn2lg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Medium Italic'), local('FiraSans-MediumItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrA6Qif4VFk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans SemiBold Italic'), local('FiraSans-SemiBoldItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrAWRSf2VFn2lg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans SemiBold Italic'), local('FiraSans-SemiBoldItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrAWRSf4VFk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Fira Sans Bold Italic'), local('FiraSans-BoldItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrByRCf2VFn2lg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Fira Sans Bold Italic'), local('FiraSans-BoldItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrByRCf4VFk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: local('Fira Sans ExtraBold Italic'), local('FiraSans-ExtraBoldItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrBuRyf2VFn2lg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: local('Fira Sans ExtraBold Italic'), local('FiraSans-ExtraBoldItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrBuRyf4VFk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: local('Fira Sans Black Italic'), local('FiraSans-BlackItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrBKRif2VFn2lg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: local('Fira Sans Black Italic'), local('FiraSans-BlackItalic'), url(https://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrBKRif4VFk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Fira Sans Thin'), local('FiraSans-Thin'), url(https://fonts.gstatic.com/s/firasans/v10/va9C4kDNxMZdWfMOD5Vn9LjHYTLHdQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Fira Sans Thin'), local('FiraSans-Thin'), url(https://fonts.gstatic.com/s/firasans/v10/va9C4kDNxMZdWfMOD5Vn9LjJYTI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local('Fira Sans ExtraLight'), local('FiraSans-ExtraLight'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnWKneSBf6TF0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local('Fira Sans ExtraLight'), local('FiraSans-ExtraLight'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnWKneRhf6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Fira Sans Light'), local('FiraSans-Light'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKreSBf6TF0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Fira Sans Light'), local('FiraSans-Light'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKreRhf6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5VvmYjLeTY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5Vvl4jL.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnZKveSBf6TF0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnZKveRhf6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnSKzeSBf6TF0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnSKzeRhf6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eSBf6TF0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Fira Sans Bold'), local('FiraSans-Bold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eRhf6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7eSBf6TF0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Fira Sans ExtraBold'), local('FiraSans-ExtraBold'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7eRhf6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Fira Sans Black'), local('FiraSans-Black'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnFK_eSBf6TF0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Fira Sans Black'), local('FiraSans-Black'), url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnFK_eRhf6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ***************************** MISE EN PAGE ***************************** */

@media screen {

	#wrapper{
		margin-top: 121px;
		padding-bottom: 9em;
		background: #fff;
		padding-top: 327px;
		background-repeat: no-repeat, no-repeat, repeat-y;
		&:after {width: 76px; }
	}

	.page_interieure #wrapper {
		padding-top: 235px;
		margin-bottom: 0;
	}

	.site-eric {
		#wrapper{
			background-image: url('https://ericbocquet.fr/squ/sites/senateurs.lhumaindabord.fr/ergo/eric_seul.png'),
				url('https://ericbocquet.fr/squ/sites/senateurs.lhumaindabord.fr/ergo/bg.jpg'),
				url('https://ericbocquet.fr/squ/sites/senateurs.lhumaindabord.fr/ergo/deg.jpg');
			background-size: 413px,2005px,2005px;
			background-position: calc(~"50% - 435px")  0.7em, center -0.6em, center -0.6em;
		}
		.page_interieure #wrapper {
		  background-position: calc(~"50% - 440px") 0.4em, center -6.8em, center -0.6em;
		  background-size: 379px,2005px,2005px;
		}
	}

	.site-michelle {
		#wrapper{
			background-image: url('https://ericbocquet.fr/squ/sites/senateurs.lhumaindabord.fr/ergo/michelle_seule_mir.png'),
				url('https://ericbocquet.fr/squ/sites/senateurs.lhumaindabord.fr/ergo/bg_michelle.jpg'),
				url('https://ericbocquet.fr/squ/sites/senateurs.lhumaindabord.fr/ergo/deg_michelle.jpg');
			background-size: 366px, 2005px, 2005px;
			background-position: calc(~"50% - 450px")  1.2em, center -0.6em, center -0.6em;
		}

		.page_interieure #wrapper {
			background-size: 279px, 2005px, 2005px;
			background-position: calc(~"50% - 450px") 0.5em, center -0.6em, center -0.6em;
		}
	}

	.fondblanc {
		padding: @grid-gutter-width 60px 2em;
		overflow: hidden;
	}

}

.margesup { width: 100%; }

/* ***************************** HEADER / BANDEAU ***************************** */

.sanscadre() {
	height: auto;
	overflow: visible;
}

.titpage {
	margin-top: 273px;
	padding-bottom: 34px;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-weight: 900;
	color: #fff;
	font-size: 2.8em;
	font-weight: 700;
	font-family: 'Fira Sans', Verdana, sans-serif;
	.filetapres(7px,4em);
	position: absolute;
	a { color: #fff; }
}

.titsenateur {
	margin-top: calc(~"7.3% + 55px");
	padding-right: 3.4%;
	text-align: right;
	color: #fff;
	border-right: 1px solid #fff;
	font-size: 2.5em;
	font-family: 'Fira Sans', Verdana, sans-serif;
	position: absolute;
	right: 0;
	line-height: 1.5em;
	*{ 							display: block; }
	.prenom{ 	font-size: 1em; }
	.nom{
		text-transform: uppercase;
		font-size: 1.7em;
		font-weight: 600;
		margin-bottom: 0.2em;
	}
	.titre{
		text-transform: uppercase;
		font-size: 0.7em;
		padding: 0em 5%;
	}
}

.passerelle {
		text-align: right;
		color: #fff;
		background: #00000050;
		float: right;
		font-size: 0.4em;
		font-weight: 300;
		padding: .5em .7em;
		line-height: 1.4em;
		margin: 0.8em 0 0;
		padding: .5em .7em ;
		line-height: 1.3em;
		.nom {
			text-transform: none;
			font-size: 1.2em;
			font-weight: 500;
			color: #fff;
		}
		.fleche { display: inline; }
	&:hover{color: #fff; }
}

.site-michelle .passerelle {
		background: #00000060;
	.nom { color: #fff; }
}

body .page { overflow-x: hidden; }

body .page #header .interieur {
	.titsite {
		width: auto;
		padding: 27px 0 0;
		margin: 0 17px;
		height: 84px;
		font-family: 'Fira Sans', Verdana, sans-serif;
		color: #000;
		font-size: .9em;
		&>span, h1 {
			line-height: 1.5;
			font-family: 'Fira Sans', Verdana, sans-serif;
			font-size: 2em;
		}
		&::after { border-radius: 3px 3px 0 0; }
		.gras {
			text-transform: uppercase;
			font-weight: 800;
		}
	}
	#navsup { padding: 0; }
	#nav.menuprincipal .nav-collapse > ul {
		& > li > a {
			text-transform: uppercase;
			font-weight: 700;
			font-size: 1.1em;
			.gras {
				font-size: 1em;
				display: inline;
				font-weight: 500;
				padding: 0;
			}
			&:hover { padding-bottom: 29px; }
		}
		li {
			&:hover {
				.ssmenu {
					top: 4.5em;
					left: 18px;
				}
				a { padding-bottom: 29px; }
			}
		}
		ul li::after { content: none; }
	}
}

body.site-michelle #header .interieur .titsite {.filetapres(5px,100%,@couleur-defaut); }
body.site-eric #header .interieur .titsite {
	.filetapres(5px,100%,@turquoise);
	&::after { .deg_h(@turquoise,@bleu); }
}

/* ***************************** COULEURS DYNAMIQUES ***************************** */

.c_rub { 															color : @couleur-defaut !important; }
.bg_rub { 														background-color : @couleur-defaut !important; }
.bgalpha_rub {										.transparentbg(@couleur-defaut,.7) !important; }
.bd_rub, .deg_rub_a .surtit, .couleur .entourelogo .titlogo, .couleur .spip_logo {		border-color : @couleur-defaut !important; }
.deg_rub { 													.deg_v(transparent, @couleur-defaut)}
.deg_h_rub { 											.deg_h(transparent, @couleur-defaut)}
.bg_rub_h:hover { 							background-color : @couleur-defaut !important; }
.c_rub_b::before { 							color : @couleur-defaut !important; }
.partage_inline_share_toolbox > div::before,
.bg_rub_b::before { 						background-color : @couleur-defaut !important; }
.bd_rub_b::before { 						border-color : @couleur-defaut !important; }
.c_a_rub::after { 								color : @couleur-defaut !important; }
.bg_rub_a::after { 							background-color : @couleur-defaut !important; }
.bd_rub_a::after { 							border-color : @couleur-defaut !important; }
.deg_h_a_rub::after {
		.deg_h(transparent, @couleur-defaut);
		content: "";
		width: 100%;
		height: 101%;
		position: absolute;
		top: 0;
		left: 0;
}


	.c_rub30,
	#contenu.bd_rub30 .texte a,
	.c_rub30 a  { 																color : #396F92 !important; }
	.bg_rub30 { 																background-color : #396F92 !important; }
	.conditionsup.bgalpha_rub30 {		background-color : #396F9270 !important; }
	.bd_rub30, .deg_rub_a30 .surtit, .couleur30 .entourelogo .titlogo, .couleur30 .spip_logo,
	#contenu.bd_rub30 .texte h3.spip,
	.btn.bg_rub30  { 													border-color : #396F92 !important; }
	.deg_rub30 { 															.deg_v(transparent, #396F92)}
	.deg_h_rub30 { 														.deg_h(transparent, #396F92)}
	.bg_rub_h30:hover { 										background-color : #396F92 !important; }
	.c_rub_b30::before 	{ 									color : #396F92 !important; }
	.bd_rub30 .partage_inline_share_toolbox > div::before,
	.bg_rub_b30::before { 									background-color : #396F92 !important; }
	.bd_rub_b30::before { 									border-color : #396F92 !important; }
	.c_rub_a30::after { 											color : #396F92 !important; }
	.bg_rub_a30::after { 										background-color : #396F92 !important; }
	.bd_rub_a30::after { 										border-color : #396F92 !important; }
	.deg_h_rub_a30::after {
		.deg_h(#396F92, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub34,
	#contenu.bd_rub34 .texte a,
	.c_rub34 a  { 																color : #901717 !important; }
	.bg_rub34 { 																background-color : #901717 !important; }
	.conditionsup.bgalpha_rub34 {		background-color : #90171770 !important; }
	.bd_rub34, .deg_rub_a34 .surtit, .couleur34 .entourelogo .titlogo, .couleur34 .spip_logo,
	#contenu.bd_rub34 .texte h3.spip,
	.btn.bg_rub34  { 													border-color : #901717 !important; }
	.deg_rub34 { 															.deg_v(transparent, #901717)}
	.deg_h_rub34 { 														.deg_h(transparent, #901717)}
	.bg_rub_h34:hover { 										background-color : #901717 !important; }
	.c_rub_b34::before 	{ 									color : #901717 !important; }
	.bd_rub34 .partage_inline_share_toolbox > div::before,
	.bg_rub_b34::before { 									background-color : #901717 !important; }
	.bd_rub_b34::before { 									border-color : #901717 !important; }
	.c_rub_a34::after { 											color : #901717 !important; }
	.bg_rub_a34::after { 										background-color : #901717 !important; }
	.bd_rub_a34::after { 										border-color : #901717 !important; }
	.deg_h_rub_a34::after {
		.deg_h(#901717, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub195,
	#contenu.bd_rub195 .texte a,
	.c_rub195 a  { 																color : #69C5EC !important; }
	.bg_rub195 { 																background-color : #69C5EC !important; }
	.conditionsup.bgalpha_rub195 {		background-color : #69C5EC70 !important; }
	.bd_rub195, .deg_rub_a195 .surtit, .couleur195 .entourelogo .titlogo, .couleur195 .spip_logo,
	#contenu.bd_rub195 .texte h3.spip,
	.btn.bg_rub195  { 													border-color : #69C5EC !important; }
	.deg_rub195 { 															.deg_v(transparent, #69C5EC)}
	.deg_h_rub195 { 														.deg_h(transparent, #69C5EC)}
	.bg_rub_h195:hover { 										background-color : #69C5EC !important; }
	.c_rub_b195::before 	{ 									color : #69C5EC !important; }
	.bd_rub195 .partage_inline_share_toolbox > div::before,
	.bg_rub_b195::before { 									background-color : #69C5EC !important; }
	.bd_rub_b195::before { 									border-color : #69C5EC !important; }
	.c_rub_a195::after { 											color : #69C5EC !important; }
	.bg_rub_a195::after { 										background-color : #69C5EC !important; }
	.bd_rub_a195::after { 										border-color : #69C5EC !important; }
	.deg_h_rub_a195::after {
		.deg_h(#69C5EC, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub188,
	#contenu.bd_rub188 .texte a,
	.c_rub188 a  { 																color : #B6BC9D !important; }
	.bg_rub188 { 																background-color : #B6BC9D !important; }
	.conditionsup.bgalpha_rub188 {		background-color : #B6BC9D70 !important; }
	.bd_rub188, .deg_rub_a188 .surtit, .couleur188 .entourelogo .titlogo, .couleur188 .spip_logo,
	#contenu.bd_rub188 .texte h3.spip,
	.btn.bg_rub188  { 													border-color : #B6BC9D !important; }
	.deg_rub188 { 															.deg_v(transparent, #B6BC9D)}
	.deg_h_rub188 { 														.deg_h(transparent, #B6BC9D)}
	.bg_rub_h188:hover { 										background-color : #B6BC9D !important; }
	.c_rub_b188::before 	{ 									color : #B6BC9D !important; }
	.bd_rub188 .partage_inline_share_toolbox > div::before,
	.bg_rub_b188::before { 									background-color : #B6BC9D !important; }
	.bd_rub_b188::before { 									border-color : #B6BC9D !important; }
	.c_rub_a188::after { 											color : #B6BC9D !important; }
	.bg_rub_a188::after { 										background-color : #B6BC9D !important; }
	.bd_rub_a188::after { 										border-color : #B6BC9D !important; }
	.deg_h_rub_a188::after {
		.deg_h(#B6BC9D, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub189,
	#contenu.bd_rub189 .texte a,
	.c_rub189 a  { 																color : #E42626 !important; }
	.bg_rub189 { 																background-color : #E42626 !important; }
	.conditionsup.bgalpha_rub189 {		background-color : #E4262670 !important; }
	.bd_rub189, .deg_rub_a189 .surtit, .couleur189 .entourelogo .titlogo, .couleur189 .spip_logo,
	#contenu.bd_rub189 .texte h3.spip,
	.btn.bg_rub189  { 													border-color : #E42626 !important; }
	.deg_rub189 { 															.deg_v(transparent, #E42626)}
	.deg_h_rub189 { 														.deg_h(transparent, #E42626)}
	.bg_rub_h189:hover { 										background-color : #E42626 !important; }
	.c_rub_b189::before 	{ 									color : #E42626 !important; }
	.bd_rub189 .partage_inline_share_toolbox > div::before,
	.bg_rub_b189::before { 									background-color : #E42626 !important; }
	.bd_rub_b189::before { 									border-color : #E42626 !important; }
	.c_rub_a189::after { 											color : #E42626 !important; }
	.bg_rub_a189::after { 										background-color : #E42626 !important; }
	.bd_rub_a189::after { 										border-color : #E42626 !important; }
	.deg_h_rub_a189::after {
		.deg_h(#E42626, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub190,
	#contenu.bd_rub190 .texte a,
	.c_rub190 a  { 																color : #88B649 !important; }
	.bg_rub190 { 																background-color : #88B649 !important; }
	.conditionsup.bgalpha_rub190 {		background-color : #88B64970 !important; }
	.bd_rub190, .deg_rub_a190 .surtit, .couleur190 .entourelogo .titlogo, .couleur190 .spip_logo,
	#contenu.bd_rub190 .texte h3.spip,
	.btn.bg_rub190  { 													border-color : #88B649 !important; }
	.deg_rub190 { 															.deg_v(transparent, #88B649)}
	.deg_h_rub190 { 														.deg_h(transparent, #88B649)}
	.bg_rub_h190:hover { 										background-color : #88B649 !important; }
	.c_rub_b190::before 	{ 									color : #88B649 !important; }
	.bd_rub190 .partage_inline_share_toolbox > div::before,
	.bg_rub_b190::before { 									background-color : #88B649 !important; }
	.bd_rub_b190::before { 									border-color : #88B649 !important; }
	.c_rub_a190::after { 											color : #88B649 !important; }
	.bg_rub_a190::after { 										background-color : #88B649 !important; }
	.bd_rub_a190::after { 										border-color : #88B649 !important; }
	.deg_h_rub_a190::after {
		.deg_h(#88B649, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub191,
	#contenu.bd_rub191 .texte a,
	.c_rub191 a  { 																color : #2E9CB5 !important; }
	.bg_rub191 { 																background-color : #2E9CB5 !important; }
	.conditionsup.bgalpha_rub191 {		background-color : #2E9CB570 !important; }
	.bd_rub191, .deg_rub_a191 .surtit, .couleur191 .entourelogo .titlogo, .couleur191 .spip_logo,
	#contenu.bd_rub191 .texte h3.spip,
	.btn.bg_rub191  { 													border-color : #2E9CB5 !important; }
	.deg_rub191 { 															.deg_v(transparent, #2E9CB5)}
	.deg_h_rub191 { 														.deg_h(transparent, #2E9CB5)}
	.bg_rub_h191:hover { 										background-color : #2E9CB5 !important; }
	.c_rub_b191::before 	{ 									color : #2E9CB5 !important; }
	.bd_rub191 .partage_inline_share_toolbox > div::before,
	.bg_rub_b191::before { 									background-color : #2E9CB5 !important; }
	.bd_rub_b191::before { 									border-color : #2E9CB5 !important; }
	.c_rub_a191::after { 											color : #2E9CB5 !important; }
	.bg_rub_a191::after { 										background-color : #2E9CB5 !important; }
	.bd_rub_a191::after { 										border-color : #2E9CB5 !important; }
	.deg_h_rub_a191::after {
		.deg_h(#2E9CB5, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub192,
	#contenu.bd_rub192 .texte a,
	.c_rub192 a  { 																color : #13820C !important; }
	.bg_rub192 { 																background-color : #13820C !important; }
	.conditionsup.bgalpha_rub192 {		background-color : #13820C70 !important; }
	.bd_rub192, .deg_rub_a192 .surtit, .couleur192 .entourelogo .titlogo, .couleur192 .spip_logo,
	#contenu.bd_rub192 .texte h3.spip,
	.btn.bg_rub192  { 													border-color : #13820C !important; }
	.deg_rub192 { 															.deg_v(transparent, #13820C)}
	.deg_h_rub192 { 														.deg_h(transparent, #13820C)}
	.bg_rub_h192:hover { 										background-color : #13820C !important; }
	.c_rub_b192::before 	{ 									color : #13820C !important; }
	.bd_rub192 .partage_inline_share_toolbox > div::before,
	.bg_rub_b192::before { 									background-color : #13820C !important; }
	.bd_rub_b192::before { 									border-color : #13820C !important; }
	.c_rub_a192::after { 											color : #13820C !important; }
	.bg_rub_a192::after { 										background-color : #13820C !important; }
	.bd_rub_a192::after { 										border-color : #13820C !important; }
	.deg_h_rub_a192::after {
		.deg_h(#13820C, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub193,
	#contenu.bd_rub193 .texte a,
	.c_rub193 a  { 																color : #DE7735 !important; }
	.bg_rub193 { 																background-color : #DE7735 !important; }
	.conditionsup.bgalpha_rub193 {		background-color : #DE773570 !important; }
	.bd_rub193, .deg_rub_a193 .surtit, .couleur193 .entourelogo .titlogo, .couleur193 .spip_logo,
	#contenu.bd_rub193 .texte h3.spip,
	.btn.bg_rub193  { 													border-color : #DE7735 !important; }
	.deg_rub193 { 															.deg_v(transparent, #DE7735)}
	.deg_h_rub193 { 														.deg_h(transparent, #DE7735)}
	.bg_rub_h193:hover { 										background-color : #DE7735 !important; }
	.c_rub_b193::before 	{ 									color : #DE7735 !important; }
	.bd_rub193 .partage_inline_share_toolbox > div::before,
	.bg_rub_b193::before { 									background-color : #DE7735 !important; }
	.bd_rub_b193::before { 									border-color : #DE7735 !important; }
	.c_rub_a193::after { 											color : #DE7735 !important; }
	.bg_rub_a193::after { 										background-color : #DE7735 !important; }
	.bd_rub_a193::after { 										border-color : #DE7735 !important; }
	.deg_h_rub_a193::after {
		.deg_h(#DE7735, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub196,
	#contenu.bd_rub196 .texte a,
	.c_rub196 a  { 																color : #F46060 !important; }
	.bg_rub196 { 																background-color : #F46060 !important; }
	.conditionsup.bgalpha_rub196 {		background-color : #F4606070 !important; }
	.bd_rub196, .deg_rub_a196 .surtit, .couleur196 .entourelogo .titlogo, .couleur196 .spip_logo,
	#contenu.bd_rub196 .texte h3.spip,
	.btn.bg_rub196  { 													border-color : #F46060 !important; }
	.deg_rub196 { 															.deg_v(transparent, #F46060)}
	.deg_h_rub196 { 														.deg_h(transparent, #F46060)}
	.bg_rub_h196:hover { 										background-color : #F46060 !important; }
	.c_rub_b196::before 	{ 									color : #F46060 !important; }
	.bd_rub196 .partage_inline_share_toolbox > div::before,
	.bg_rub_b196::before { 									background-color : #F46060 !important; }
	.bd_rub_b196::before { 									border-color : #F46060 !important; }
	.c_rub_a196::after { 											color : #F46060 !important; }
	.bg_rub_a196::after { 										background-color : #F46060 !important; }
	.bd_rub_a196::after { 										border-color : #F46060 !important; }
	.deg_h_rub_a196::after {
		.deg_h(#F46060, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub197,
	#contenu.bd_rub197 .texte a,
	.c_rub197 a  { 																color : #194D56 !important; }
	.bg_rub197 { 																background-color : #194D56 !important; }
	.conditionsup.bgalpha_rub197 {		background-color : #194D5670 !important; }
	.bd_rub197, .deg_rub_a197 .surtit, .couleur197 .entourelogo .titlogo, .couleur197 .spip_logo,
	#contenu.bd_rub197 .texte h3.spip,
	.btn.bg_rub197  { 													border-color : #194D56 !important; }
	.deg_rub197 { 															.deg_v(transparent, #194D56)}
	.deg_h_rub197 { 														.deg_h(transparent, #194D56)}
	.bg_rub_h197:hover { 										background-color : #194D56 !important; }
	.c_rub_b197::before 	{ 									color : #194D56 !important; }
	.bd_rub197 .partage_inline_share_toolbox > div::before,
	.bg_rub_b197::before { 									background-color : #194D56 !important; }
	.bd_rub_b197::before { 									border-color : #194D56 !important; }
	.c_rub_a197::after { 											color : #194D56 !important; }
	.bg_rub_a197::after { 										background-color : #194D56 !important; }
	.bd_rub_a197::after { 										border-color : #194D56 !important; }
	.deg_h_rub_a197::after {
		.deg_h(#194D56, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub198,
	#contenu.bd_rub198 .texte a,
	.c_rub198 a  { 																color : #3D9437 !important; }
	.bg_rub198 { 																background-color : #3D9437 !important; }
	.conditionsup.bgalpha_rub198 {		background-color : #3D943770 !important; }
	.bd_rub198, .deg_rub_a198 .surtit, .couleur198 .entourelogo .titlogo, .couleur198 .spip_logo,
	#contenu.bd_rub198 .texte h3.spip,
	.btn.bg_rub198  { 													border-color : #3D9437 !important; }
	.deg_rub198 { 															.deg_v(transparent, #3D9437)}
	.deg_h_rub198 { 														.deg_h(transparent, #3D9437)}
	.bg_rub_h198:hover { 										background-color : #3D9437 !important; }
	.c_rub_b198::before 	{ 									color : #3D9437 !important; }
	.bd_rub198 .partage_inline_share_toolbox > div::before,
	.bg_rub_b198::before { 									background-color : #3D9437 !important; }
	.bd_rub_b198::before { 									border-color : #3D9437 !important; }
	.c_rub_a198::after { 											color : #3D9437 !important; }
	.bg_rub_a198::after { 										background-color : #3D9437 !important; }
	.bd_rub_a198::after { 										border-color : #3D9437 !important; }
	.deg_h_rub_a198::after {
		.deg_h(#3D9437, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub199,
	#contenu.bd_rub199 .texte a,
	.c_rub199 a  { 																color : #1E3BD5 !important; }
	.bg_rub199 { 																background-color : #1E3BD5 !important; }
	.conditionsup.bgalpha_rub199 {		background-color : #1E3BD570 !important; }
	.bd_rub199, .deg_rub_a199 .surtit, .couleur199 .entourelogo .titlogo, .couleur199 .spip_logo,
	#contenu.bd_rub199 .texte h3.spip,
	.btn.bg_rub199  { 													border-color : #1E3BD5 !important; }
	.deg_rub199 { 															.deg_v(transparent, #1E3BD5)}
	.deg_h_rub199 { 														.deg_h(transparent, #1E3BD5)}
	.bg_rub_h199:hover { 										background-color : #1E3BD5 !important; }
	.c_rub_b199::before 	{ 									color : #1E3BD5 !important; }
	.bd_rub199 .partage_inline_share_toolbox > div::before,
	.bg_rub_b199::before { 									background-color : #1E3BD5 !important; }
	.bd_rub_b199::before { 									border-color : #1E3BD5 !important; }
	.c_rub_a199::after { 											color : #1E3BD5 !important; }
	.bg_rub_a199::after { 										background-color : #1E3BD5 !important; }
	.bd_rub_a199::after { 										border-color : #1E3BD5 !important; }
	.deg_h_rub_a199::after {
		.deg_h(#1E3BD5, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub200,
	#contenu.bd_rub200 .texte a,
	.c_rub200 a  { 																color : #43ABA4 !important; }
	.bg_rub200 { 																background-color : #43ABA4 !important; }
	.conditionsup.bgalpha_rub200 {		background-color : #43ABA470 !important; }
	.bd_rub200, .deg_rub_a200 .surtit, .couleur200 .entourelogo .titlogo, .couleur200 .spip_logo,
	#contenu.bd_rub200 .texte h3.spip,
	.btn.bg_rub200  { 													border-color : #43ABA4 !important; }
	.deg_rub200 { 															.deg_v(transparent, #43ABA4)}
	.deg_h_rub200 { 														.deg_h(transparent, #43ABA4)}
	.bg_rub_h200:hover { 										background-color : #43ABA4 !important; }
	.c_rub_b200::before 	{ 									color : #43ABA4 !important; }
	.bd_rub200 .partage_inline_share_toolbox > div::before,
	.bg_rub_b200::before { 									background-color : #43ABA4 !important; }
	.bd_rub_b200::before { 									border-color : #43ABA4 !important; }
	.c_rub_a200::after { 											color : #43ABA4 !important; }
	.bg_rub_a200::after { 										background-color : #43ABA4 !important; }
	.bd_rub_a200::after { 										border-color : #43ABA4 !important; }
	.deg_h_rub_a200::after {
		.deg_h(#43ABA4, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub201,
	#contenu.bd_rub201 .texte a,
	.c_rub201 a  { 																color : #4E9EB4 !important; }
	.bg_rub201 { 																background-color : #4E9EB4 !important; }
	.conditionsup.bgalpha_rub201 {		background-color : #4E9EB470 !important; }
	.bd_rub201, .deg_rub_a201 .surtit, .couleur201 .entourelogo .titlogo, .couleur201 .spip_logo,
	#contenu.bd_rub201 .texte h3.spip,
	.btn.bg_rub201  { 													border-color : #4E9EB4 !important; }
	.deg_rub201 { 															.deg_v(transparent, #4E9EB4)}
	.deg_h_rub201 { 														.deg_h(transparent, #4E9EB4)}
	.bg_rub_h201:hover { 										background-color : #4E9EB4 !important; }
	.c_rub_b201::before 	{ 									color : #4E9EB4 !important; }
	.bd_rub201 .partage_inline_share_toolbox > div::before,
	.bg_rub_b201::before { 									background-color : #4E9EB4 !important; }
	.bd_rub_b201::before { 									border-color : #4E9EB4 !important; }
	.c_rub_a201::after { 											color : #4E9EB4 !important; }
	.bg_rub_a201::after { 										background-color : #4E9EB4 !important; }
	.bd_rub_a201::after { 										border-color : #4E9EB4 !important; }
	.deg_h_rub_a201::after {
		.deg_h(#4E9EB4, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub203,
	#contenu.bd_rub203 .texte a,
	.c_rub203 a  { 																color : #AA844B !important; }
	.bg_rub203 { 																background-color : #AA844B !important; }
	.conditionsup.bgalpha_rub203 {		background-color : #AA844B70 !important; }
	.bd_rub203, .deg_rub_a203 .surtit, .couleur203 .entourelogo .titlogo, .couleur203 .spip_logo,
	#contenu.bd_rub203 .texte h3.spip,
	.btn.bg_rub203  { 													border-color : #AA844B !important; }
	.deg_rub203 { 															.deg_v(transparent, #AA844B)}
	.deg_h_rub203 { 														.deg_h(transparent, #AA844B)}
	.bg_rub_h203:hover { 										background-color : #AA844B !important; }
	.c_rub_b203::before 	{ 									color : #AA844B !important; }
	.bd_rub203 .partage_inline_share_toolbox > div::before,
	.bg_rub_b203::before { 									background-color : #AA844B !important; }
	.bd_rub_b203::before { 									border-color : #AA844B !important; }
	.c_rub_a203::after { 											color : #AA844B !important; }
	.bg_rub_a203::after { 										background-color : #AA844B !important; }
	.bd_rub_a203::after { 										border-color : #AA844B !important; }
	.deg_h_rub_a203::after {
		.deg_h(#AA844B, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub206,
	#contenu.bd_rub206 .texte a,
	.c_rub206 a  { 																color : #E6BB7E !important; }
	.bg_rub206 { 																background-color : #E6BB7E !important; }
	.conditionsup.bgalpha_rub206 {		background-color : #E6BB7E70 !important; }
	.bd_rub206, .deg_rub_a206 .surtit, .couleur206 .entourelogo .titlogo, .couleur206 .spip_logo,
	#contenu.bd_rub206 .texte h3.spip,
	.btn.bg_rub206  { 													border-color : #E6BB7E !important; }
	.deg_rub206 { 															.deg_v(transparent, #E6BB7E)}
	.deg_h_rub206 { 														.deg_h(transparent, #E6BB7E)}
	.bg_rub_h206:hover { 										background-color : #E6BB7E !important; }
	.c_rub_b206::before 	{ 									color : #E6BB7E !important; }
	.bd_rub206 .partage_inline_share_toolbox > div::before,
	.bg_rub_b206::before { 									background-color : #E6BB7E !important; }
	.bd_rub_b206::before { 									border-color : #E6BB7E !important; }
	.c_rub_a206::after { 											color : #E6BB7E !important; }
	.bg_rub_a206::after { 										background-color : #E6BB7E !important; }
	.bd_rub_a206::after { 										border-color : #E6BB7E !important; }
	.deg_h_rub_a206::after {
		.deg_h(#E6BB7E, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub207,
	#contenu.bd_rub207 .texte a,
	.c_rub207 a  { 																color : #F7A824 !important; }
	.bg_rub207 { 																background-color : #F7A824 !important; }
	.conditionsup.bgalpha_rub207 {		background-color : #F7A82470 !important; }
	.bd_rub207, .deg_rub_a207 .surtit, .couleur207 .entourelogo .titlogo, .couleur207 .spip_logo,
	#contenu.bd_rub207 .texte h3.spip,
	.btn.bg_rub207  { 													border-color : #F7A824 !important; }
	.deg_rub207 { 															.deg_v(transparent, #F7A824)}
	.deg_h_rub207 { 														.deg_h(transparent, #F7A824)}
	.bg_rub_h207:hover { 										background-color : #F7A824 !important; }
	.c_rub_b207::before 	{ 									color : #F7A824 !important; }
	.bd_rub207 .partage_inline_share_toolbox > div::before,
	.bg_rub_b207::before { 									background-color : #F7A824 !important; }
	.bd_rub_b207::before { 									border-color : #F7A824 !important; }
	.c_rub_a207::after { 											color : #F7A824 !important; }
	.bg_rub_a207::after { 										background-color : #F7A824 !important; }
	.bd_rub_a207::after { 										border-color : #F7A824 !important; }
	.deg_h_rub_a207::after {
		.deg_h(#F7A824, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub208,
	#contenu.bd_rub208 .texte a,
	.c_rub208 a  { 																color : #D8639D !important; }
	.bg_rub208 { 																background-color : #D8639D !important; }
	.conditionsup.bgalpha_rub208 {		background-color : #D8639D70 !important; }
	.bd_rub208, .deg_rub_a208 .surtit, .couleur208 .entourelogo .titlogo, .couleur208 .spip_logo,
	#contenu.bd_rub208 .texte h3.spip,
	.btn.bg_rub208  { 													border-color : #D8639D !important; }
	.deg_rub208 { 															.deg_v(transparent, #D8639D)}
	.deg_h_rub208 { 														.deg_h(transparent, #D8639D)}
	.bg_rub_h208:hover { 										background-color : #D8639D !important; }
	.c_rub_b208::before 	{ 									color : #D8639D !important; }
	.bd_rub208 .partage_inline_share_toolbox > div::before,
	.bg_rub_b208::before { 									background-color : #D8639D !important; }
	.bd_rub_b208::before { 									border-color : #D8639D !important; }
	.c_rub_a208::after { 											color : #D8639D !important; }
	.bg_rub_a208::after { 										background-color : #D8639D !important; }
	.bd_rub_a208::after { 										border-color : #D8639D !important; }
	.deg_h_rub_a208::after {
		.deg_h(#D8639D, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub209,
	#contenu.bd_rub209 .texte a,
	.c_rub209 a  { 																color : #AEDB76 !important; }
	.bg_rub209 { 																background-color : #AEDB76 !important; }
	.conditionsup.bgalpha_rub209 {		background-color : #AEDB7670 !important; }
	.bd_rub209, .deg_rub_a209 .surtit, .couleur209 .entourelogo .titlogo, .couleur209 .spip_logo,
	#contenu.bd_rub209 .texte h3.spip,
	.btn.bg_rub209  { 													border-color : #AEDB76 !important; }
	.deg_rub209 { 															.deg_v(transparent, #AEDB76)}
	.deg_h_rub209 { 														.deg_h(transparent, #AEDB76)}
	.bg_rub_h209:hover { 										background-color : #AEDB76 !important; }
	.c_rub_b209::before 	{ 									color : #AEDB76 !important; }
	.bd_rub209 .partage_inline_share_toolbox > div::before,
	.bg_rub_b209::before { 									background-color : #AEDB76 !important; }
	.bd_rub_b209::before { 									border-color : #AEDB76 !important; }
	.c_rub_a209::after { 											color : #AEDB76 !important; }
	.bg_rub_a209::after { 										background-color : #AEDB76 !important; }
	.bd_rub_a209::after { 										border-color : #AEDB76 !important; }
	.deg_h_rub_a209::after {
		.deg_h(#AEDB76, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub210,
	#contenu.bd_rub210 .texte a,
	.c_rub210 a  { 																color : #B78ED2 !important; }
	.bg_rub210 { 																background-color : #B78ED2 !important; }
	.conditionsup.bgalpha_rub210 {		background-color : #B78ED270 !important; }
	.bd_rub210, .deg_rub_a210 .surtit, .couleur210 .entourelogo .titlogo, .couleur210 .spip_logo,
	#contenu.bd_rub210 .texte h3.spip,
	.btn.bg_rub210  { 													border-color : #B78ED2 !important; }
	.deg_rub210 { 															.deg_v(transparent, #B78ED2)}
	.deg_h_rub210 { 														.deg_h(transparent, #B78ED2)}
	.bg_rub_h210:hover { 										background-color : #B78ED2 !important; }
	.c_rub_b210::before 	{ 									color : #B78ED2 !important; }
	.bd_rub210 .partage_inline_share_toolbox > div::before,
	.bg_rub_b210::before { 									background-color : #B78ED2 !important; }
	.bd_rub_b210::before { 									border-color : #B78ED2 !important; }
	.c_rub_a210::after { 											color : #B78ED2 !important; }
	.bg_rub_a210::after { 										background-color : #B78ED2 !important; }
	.bd_rub_a210::after { 										border-color : #B78ED2 !important; }
	.deg_h_rub_a210::after {
		.deg_h(#B78ED2, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub211,
	#contenu.bd_rub211 .texte a,
	.c_rub211 a  { 																color : #D28E8E !important; }
	.bg_rub211 { 																background-color : #D28E8E !important; }
	.conditionsup.bgalpha_rub211 {		background-color : #D28E8E70 !important; }
	.bd_rub211, .deg_rub_a211 .surtit, .couleur211 .entourelogo .titlogo, .couleur211 .spip_logo,
	#contenu.bd_rub211 .texte h3.spip,
	.btn.bg_rub211  { 													border-color : #D28E8E !important; }
	.deg_rub211 { 															.deg_v(transparent, #D28E8E)}
	.deg_h_rub211 { 														.deg_h(transparent, #D28E8E)}
	.bg_rub_h211:hover { 										background-color : #D28E8E !important; }
	.c_rub_b211::before 	{ 									color : #D28E8E !important; }
	.bd_rub211 .partage_inline_share_toolbox > div::before,
	.bg_rub_b211::before { 									background-color : #D28E8E !important; }
	.bd_rub_b211::before { 									border-color : #D28E8E !important; }
	.c_rub_a211::after { 											color : #D28E8E !important; }
	.bg_rub_a211::after { 										background-color : #D28E8E !important; }
	.bd_rub_a211::after { 										border-color : #D28E8E !important; }
	.deg_h_rub_a211::after {
		.deg_h(#D28E8E, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub212,
	#contenu.bd_rub212 .texte a,
	.c_rub212 a  { 																color : #9FDA90 !important; }
	.bg_rub212 { 																background-color : #9FDA90 !important; }
	.conditionsup.bgalpha_rub212 {		background-color : #9FDA9070 !important; }
	.bd_rub212, .deg_rub_a212 .surtit, .couleur212 .entourelogo .titlogo, .couleur212 .spip_logo,
	#contenu.bd_rub212 .texte h3.spip,
	.btn.bg_rub212  { 													border-color : #9FDA90 !important; }
	.deg_rub212 { 															.deg_v(transparent, #9FDA90)}
	.deg_h_rub212 { 														.deg_h(transparent, #9FDA90)}
	.bg_rub_h212:hover { 										background-color : #9FDA90 !important; }
	.c_rub_b212::before 	{ 									color : #9FDA90 !important; }
	.bd_rub212 .partage_inline_share_toolbox > div::before,
	.bg_rub_b212::before { 									background-color : #9FDA90 !important; }
	.bd_rub_b212::before { 									border-color : #9FDA90 !important; }
	.c_rub_a212::after { 											color : #9FDA90 !important; }
	.bg_rub_a212::after { 										background-color : #9FDA90 !important; }
	.bd_rub_a212::after { 										border-color : #9FDA90 !important; }
	.deg_h_rub_a212::after {
		.deg_h(#9FDA90, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub214,
	#contenu.bd_rub214 .texte a,
	.c_rub214 a  { 																color : #B2DEDC !important; }
	.bg_rub214 { 																background-color : #B2DEDC !important; }
	.conditionsup.bgalpha_rub214 {		background-color : #B2DEDC70 !important; }
	.bd_rub214, .deg_rub_a214 .surtit, .couleur214 .entourelogo .titlogo, .couleur214 .spip_logo,
	#contenu.bd_rub214 .texte h3.spip,
	.btn.bg_rub214  { 													border-color : #B2DEDC !important; }
	.deg_rub214 { 															.deg_v(transparent, #B2DEDC)}
	.deg_h_rub214 { 														.deg_h(transparent, #B2DEDC)}
	.bg_rub_h214:hover { 										background-color : #B2DEDC !important; }
	.c_rub_b214::before 	{ 									color : #B2DEDC !important; }
	.bd_rub214 .partage_inline_share_toolbox > div::before,
	.bg_rub_b214::before { 									background-color : #B2DEDC !important; }
	.bd_rub_b214::before { 									border-color : #B2DEDC !important; }
	.c_rub_a214::after { 											color : #B2DEDC !important; }
	.bg_rub_a214::after { 										background-color : #B2DEDC !important; }
	.bd_rub_a214::after { 										border-color : #B2DEDC !important; }
	.deg_h_rub_a214::after {
		.deg_h(#B2DEDC, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub215,
	#contenu.bd_rub215 .texte a,
	.c_rub215 a  { 																color : #973434 !important; }
	.bg_rub215 { 																background-color : #973434 !important; }
	.conditionsup.bgalpha_rub215 {		background-color : #97343470 !important; }
	.bd_rub215, .deg_rub_a215 .surtit, .couleur215 .entourelogo .titlogo, .couleur215 .spip_logo,
	#contenu.bd_rub215 .texte h3.spip,
	.btn.bg_rub215  { 													border-color : #973434 !important; }
	.deg_rub215 { 															.deg_v(transparent, #973434)}
	.deg_h_rub215 { 														.deg_h(transparent, #973434)}
	.bg_rub_h215:hover { 										background-color : #973434 !important; }
	.c_rub_b215::before 	{ 									color : #973434 !important; }
	.bd_rub215 .partage_inline_share_toolbox > div::before,
	.bg_rub_b215::before { 									background-color : #973434 !important; }
	.bd_rub_b215::before { 									border-color : #973434 !important; }
	.c_rub_a215::after { 											color : #973434 !important; }
	.bg_rub_a215::after { 										background-color : #973434 !important; }
	.bd_rub_a215::after { 										border-color : #973434 !important; }
	.deg_h_rub_a215::after {
		.deg_h(#973434, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	
	
	
	
	
	
	
	
	
	
	
	
	
	

	.c_rub217,
	#contenu.bd_rub217 .texte a,
	.c_rub217 a  { 																color : #4D7FAE !important; }
	.bg_rub217 { 																background-color : #4D7FAE !important; }
	.conditionsup.bgalpha_rub217 {		background-color : #4D7FAE70 !important; }
	.bd_rub217, .deg_rub_a217 .surtit, .couleur217 .entourelogo .titlogo, .couleur217 .spip_logo,
	#contenu.bd_rub217 .texte h3.spip,
	.btn.bg_rub217  { 													border-color : #4D7FAE !important; }
	.deg_rub217 { 															.deg_v(transparent, #4D7FAE)}
	.deg_h_rub217 { 														.deg_h(transparent, #4D7FAE)}
	.bg_rub_h217:hover { 										background-color : #4D7FAE !important; }
	.c_rub_b217::before 	{ 									color : #4D7FAE !important; }
	.bd_rub217 .partage_inline_share_toolbox > div::before,
	.bg_rub_b217::before { 									background-color : #4D7FAE !important; }
	.bd_rub_b217::before { 									border-color : #4D7FAE !important; }
	.c_rub_a217::after { 											color : #4D7FAE !important; }
	.bg_rub_a217::after { 										background-color : #4D7FAE !important; }
	.bd_rub_a217::after { 										border-color : #4D7FAE !important; }
	.deg_h_rub_a217::after {
		.deg_h(#4D7FAE, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	
	
	
	
	
	
	
	
	
	
	
	
	
	

	.c_rub219,
	#contenu.bd_rub219 .texte a,
	.c_rub219 a  { 																color : #99BBC3 !important; }
	.bg_rub219 { 																background-color : #99BBC3 !important; }
	.conditionsup.bgalpha_rub219 {		background-color : #99BBC370 !important; }
	.bd_rub219, .deg_rub_a219 .surtit, .couleur219 .entourelogo .titlogo, .couleur219 .spip_logo,
	#contenu.bd_rub219 .texte h3.spip,
	.btn.bg_rub219  { 													border-color : #99BBC3 !important; }
	.deg_rub219 { 															.deg_v(transparent, #99BBC3)}
	.deg_h_rub219 { 														.deg_h(transparent, #99BBC3)}
	.bg_rub_h219:hover { 										background-color : #99BBC3 !important; }
	.c_rub_b219::before 	{ 									color : #99BBC3 !important; }
	.bd_rub219 .partage_inline_share_toolbox > div::before,
	.bg_rub_b219::before { 									background-color : #99BBC3 !important; }
	.bd_rub_b219::before { 									border-color : #99BBC3 !important; }
	.c_rub_a219::after { 											color : #99BBC3 !important; }
	.bg_rub_a219::after { 										background-color : #99BBC3 !important; }
	.bd_rub_a219::after { 										border-color : #99BBC3 !important; }
	.deg_h_rub_a219::after {
		.deg_h(#99BBC3, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub220,
	#contenu.bd_rub220 .texte a,
	.c_rub220 a  { 																color : #DADCDD !important; }
	.bg_rub220 { 																background-color : #DADCDD !important; }
	.conditionsup.bgalpha_rub220 {		background-color : #DADCDD70 !important; }
	.bd_rub220, .deg_rub_a220 .surtit, .couleur220 .entourelogo .titlogo, .couleur220 .spip_logo,
	#contenu.bd_rub220 .texte h3.spip,
	.btn.bg_rub220  { 													border-color : #DADCDD !important; }
	.deg_rub220 { 															.deg_v(transparent, #DADCDD)}
	.deg_h_rub220 { 														.deg_h(transparent, #DADCDD)}
	.bg_rub_h220:hover { 										background-color : #DADCDD !important; }
	.c_rub_b220::before 	{ 									color : #DADCDD !important; }
	.bd_rub220 .partage_inline_share_toolbox > div::before,
	.bg_rub_b220::before { 									background-color : #DADCDD !important; }
	.bd_rub_b220::before { 									border-color : #DADCDD !important; }
	.c_rub_a220::after { 											color : #DADCDD !important; }
	.bg_rub_a220::after { 										background-color : #DADCDD !important; }
	.bd_rub_a220::after { 										border-color : #DADCDD !important; }
	.deg_h_rub_a220::after {
		.deg_h(#DADCDD, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub221,
	#contenu.bd_rub221 .texte a,
	.c_rub221 a  { 																color : #D98024 !important; }
	.bg_rub221 { 																background-color : #D98024 !important; }
	.conditionsup.bgalpha_rub221 {		background-color : #D9802470 !important; }
	.bd_rub221, .deg_rub_a221 .surtit, .couleur221 .entourelogo .titlogo, .couleur221 .spip_logo,
	#contenu.bd_rub221 .texte h3.spip,
	.btn.bg_rub221  { 													border-color : #D98024 !important; }
	.deg_rub221 { 															.deg_v(transparent, #D98024)}
	.deg_h_rub221 { 														.deg_h(transparent, #D98024)}
	.bg_rub_h221:hover { 										background-color : #D98024 !important; }
	.c_rub_b221::before 	{ 									color : #D98024 !important; }
	.bd_rub221 .partage_inline_share_toolbox > div::before,
	.bg_rub_b221::before { 									background-color : #D98024 !important; }
	.bd_rub_b221::before { 									border-color : #D98024 !important; }
	.c_rub_a221::after { 											color : #D98024 !important; }
	.bg_rub_a221::after { 										background-color : #D98024 !important; }
	.bd_rub_a221::after { 										border-color : #D98024 !important; }
	.deg_h_rub_a221::after {
		.deg_h(#D98024, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub229,
	#contenu.bd_rub229 .texte a,
	.c_rub229 a  { 																color : #305D95 !important; }
	.bg_rub229 { 																background-color : #305D95 !important; }
	.conditionsup.bgalpha_rub229 {		background-color : #305D9570 !important; }
	.bd_rub229, .deg_rub_a229 .surtit, .couleur229 .entourelogo .titlogo, .couleur229 .spip_logo,
	#contenu.bd_rub229 .texte h3.spip,
	.btn.bg_rub229  { 													border-color : #305D95 !important; }
	.deg_rub229 { 															.deg_v(transparent, #305D95)}
	.deg_h_rub229 { 														.deg_h(transparent, #305D95)}
	.bg_rub_h229:hover { 										background-color : #305D95 !important; }
	.c_rub_b229::before 	{ 									color : #305D95 !important; }
	.bd_rub229 .partage_inline_share_toolbox > div::before,
	.bg_rub_b229::before { 									background-color : #305D95 !important; }
	.bd_rub_b229::before { 									border-color : #305D95 !important; }
	.c_rub_a229::after { 											color : #305D95 !important; }
	.bg_rub_a229::after { 										background-color : #305D95 !important; }
	.bd_rub_a229::after { 										border-color : #305D95 !important; }
	.deg_h_rub_a229::after {
		.deg_h(#305D95, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub223,
	#contenu.bd_rub223 .texte a,
	.c_rub223 a  { 																color : #9548A1 !important; }
	.bg_rub223 { 																background-color : #9548A1 !important; }
	.conditionsup.bgalpha_rub223 {		background-color : #9548A170 !important; }
	.bd_rub223, .deg_rub_a223 .surtit, .couleur223 .entourelogo .titlogo, .couleur223 .spip_logo,
	#contenu.bd_rub223 .texte h3.spip,
	.btn.bg_rub223  { 													border-color : #9548A1 !important; }
	.deg_rub223 { 															.deg_v(transparent, #9548A1)}
	.deg_h_rub223 { 														.deg_h(transparent, #9548A1)}
	.bg_rub_h223:hover { 										background-color : #9548A1 !important; }
	.c_rub_b223::before 	{ 									color : #9548A1 !important; }
	.bd_rub223 .partage_inline_share_toolbox > div::before,
	.bg_rub_b223::before { 									background-color : #9548A1 !important; }
	.bd_rub_b223::before { 									border-color : #9548A1 !important; }
	.c_rub_a223::after { 											color : #9548A1 !important; }
	.bg_rub_a223::after { 										background-color : #9548A1 !important; }
	.bd_rub_a223::after { 										border-color : #9548A1 !important; }
	.deg_h_rub_a223::after {
		.deg_h(#9548A1, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	
	
	
	
	
	
	
	
	
	
	
	
	
	

	.c_rub227,
	#contenu.bd_rub227 .texte a,
	.c_rub227 a  { 																color : #CE2929 !important; }
	.bg_rub227 { 																background-color : #CE2929 !important; }
	.conditionsup.bgalpha_rub227 {		background-color : #CE292970 !important; }
	.bd_rub227, .deg_rub_a227 .surtit, .couleur227 .entourelogo .titlogo, .couleur227 .spip_logo,
	#contenu.bd_rub227 .texte h3.spip,
	.btn.bg_rub227  { 													border-color : #CE2929 !important; }
	.deg_rub227 { 															.deg_v(transparent, #CE2929)}
	.deg_h_rub227 { 														.deg_h(transparent, #CE2929)}
	.bg_rub_h227:hover { 										background-color : #CE2929 !important; }
	.c_rub_b227::before 	{ 									color : #CE2929 !important; }
	.bd_rub227 .partage_inline_share_toolbox > div::before,
	.bg_rub_b227::before { 									background-color : #CE2929 !important; }
	.bd_rub_b227::before { 									border-color : #CE2929 !important; }
	.c_rub_a227::after { 											color : #CE2929 !important; }
	.bg_rub_a227::after { 										background-color : #CE2929 !important; }
	.bd_rub_a227::after { 										border-color : #CE2929 !important; }
	.deg_h_rub_a227::after {
		.deg_h(#CE2929, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.c_rub228,
	#contenu.bd_rub228 .texte a,
	.c_rub228 a  { 																color : #FF854F !important; }
	.bg_rub228 { 																background-color : #FF854F !important; }
	.conditionsup.bgalpha_rub228 {		background-color : #FF854F70 !important; }
	.bd_rub228, .deg_rub_a228 .surtit, .couleur228 .entourelogo .titlogo, .couleur228 .spip_logo,
	#contenu.bd_rub228 .texte h3.spip,
	.btn.bg_rub228  { 													border-color : #FF854F !important; }
	.deg_rub228 { 															.deg_v(transparent, #FF854F)}
	.deg_h_rub228 { 														.deg_h(transparent, #FF854F)}
	.bg_rub_h228:hover { 										background-color : #FF854F !important; }
	.c_rub_b228::before 	{ 									color : #FF854F !important; }
	.bd_rub228 .partage_inline_share_toolbox > div::before,
	.bg_rub_b228::before { 									background-color : #FF854F !important; }
	.bd_rub_b228::before { 									border-color : #FF854F !important; }
	.c_rub_a228::after { 											color : #FF854F !important; }
	.bg_rub_a228::after { 										background-color : #FF854F !important; }
	.bd_rub_a228::after { 										border-color : #FF854F !important; }
	.deg_h_rub_a228::after {
		.deg_h(#FF854F, transparent);
		content: "";
		width: 100%;
		height: 130%;
		position: absolute;
		top: 0;
		left: 0;
	}


/* *****************************  LISTES D'ITEMS ET ELEMENTS  ***************************** */

/* -------------- BOUTONS -------------- */

.site-michelle .btn-defaut {.button-variant(#fff,#056B6F,#056B6F); }
.site-eric	.btn-defaut {.button-variant(#fff,@couleur-defaut, @couleur-defaut); }

.btn-turquoise {
 	.button-variant(#fff,@turquoise, @bleu);
 	.deg_h(@turquoise, @bleu);
 	 border-image-source: -webkit-linear-gradient(left, @turquoise, @bleu);
 	 border-image-source: -o-linear-gradient(left, @turquoise, @bleu);
 	 border-image-source: linear-gradient(to right, @turquoise, @bleu);
 	 border-image-slice: 1;
 	 &:hover  {
	 	 border-image-source: -webkit-linear-gradient(left, @bleu, @turquoise);
	 	 border-image-source: -o-linear-gradient(left, @bleu, @turquoise);
	 	 border-image-source: linear-gradient(to right, @bleu, @turquoise);
 	 }
}
.site-michelle .btn-turquoise {
	background: @couleur-defaut;
	border-color: @couleur-defaut;
	border-image-source: none;
	&:hover {
		background: darken(@couleur-defaut,10%);
		border-color: darken(@couleur-defaut,10%);
	}
}
body {
	&.site-michelle, &.site-eric {
		.btn-fb{ .button-variant(@bleu_fb; @bleu_fb; darken(@bleu_fb, 5%)); }
		.btn-tw{.button-variant(#000; #000; #333); }
		.contenu {
			.btn-fb, .btn-tw {
				padding: 0.15em 0 0px 1em;
				&:after {color: #fff;}
			}
			.at-icon-wrapper, .at-icon {
				height: 24px !important;
				width: 24px !important;
			}
		}
	}
}

a.btn_print{
	float: right;
	background: @grisLighter url('https://ericbocquet.fr/squ/sites/senateurs.lhumaindabord.fr/ergo/svg/ico_print.svg') .2em no-repeat;
	border-width: 0.4em .4em .4em 0.3em;
	border-style: solid;
	border-color: @grisLighter;
	margin-top: 1.8em;
	font-size: 1em;
	background-clip: padding-box;
	padding: 0.2em .2em 0.1em 2.6em;
	background-size: contain;
	&:hover{
		background: @couleur-defaut url('https://ericbocquet.fr/squ/sites/senateurs.lhumaindabord.fr/ergo/svg/ico_print.svg') .2em  no-repeat;
		background-size: contain;
		border-color: @couleur-defaut;
		color: #fff;
	}
}

/* -------------- FLECHES -------------- */

/* -------------- LIENS -------------- */

.lls, .llsrub {
 	border-radius: 0;
 	text-transform: uppercase;
 	padding: 0.2em 0.4em;
	font-size: 0.8em;
}

.llsrub { font-size: 1.2em; }

/* -------------- TITRES -------------- */

.site-michelle .titsenateur .titre { background-color: @couleur-defaut; }
.site-eric .titsenateur .titre 				{.deg_h(@turquoise,@bleu); }

.grotit{
	text-align: center;
	display: table;
	border-bottom: 2px solid @couleur-defaut;
	text-transform: none;
	padding: 0 0 0em;
	margin: 0 auto 1em;
	font-weight: 300;
	font-size: 2.4em;
	&.filetapres {
		border-bottom: none;
		.filetapres(3px, 4.3em);
	}
}

.tit_doubleliseret {
	text-align: left;
	margin: 0 0 1em;
	position: relative;
	border-bottom: 8px solid @grisLighter;
	padding-bottom: 0.4em;
	font-size: 2.3em;
	color: @grisDark;
	background: #fff;
	color: #000;
	font-weight: 300;
	padding: 0 0 0.4em;
	width: auto;
	line-height: .9em;
	& a{
		color: @grisDarker;
		padding-bottom: 0;
	}
	&:after{
    content: '';
    width: 92vw;
    display: block;
    border-bottom: 1px solid @gris;
    float: left;
    margin-top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.content .chapo {
	font-weight: 600;
	padding: 1.4em;
	background-color: @gris-extralighter;
	margin-bottom: 1.5em;
	p {
		margin: 0 0 1em;
		&:last-of-type { margin-bottom: 0; }
	}
	ul.spip li::before {
		width: 0.4em;
  	height: 0.4em;
	}
}

#letexte { overflow: hidden; }

/* -------------- LISTES D'ELEMENTS -------------- */

.liste-items, .liste-titrelogo {
	.item {
	 .margebas;
	 .lieu {
			margin: 0 0 0.2em;
			font-size: 1.4em;
			color: @couleur-secondaire;
			line-height: 1.6em;
			display: block;
	 }
	 .logo {
			border-bottom: 0 solid transparent;
			margin-bottom: 0;
	 }
	}
}

#alaune .grosurtit {
	padding-top: .5em;
	a { color: #fff; }
}
.alaune .item {
	* {
		transition-property: all;
		transition-duration:  .5s;
	}
	.lien{
		overflow: hidden;
		display: block;
	}
	.logo img { width: 100%; }
  .legende{
  	margin: 0 auto;
  	left: 0;
		bottom: 0;
		padding: .2em 3%;
		z-index: 1;
		width:calc( ~'100% - 10px ');
		.tit, .surtit, .desc{
			background-color: #fff;
			display: inline-block;
			padding: .4em 3%;
			line-height: 110%;
			font-weight: 500;
		}
		.tit, .desc {
			color: #fff;
			background-color: fade(@couleur-defaut,90%);
			font-size: 1.45em;
			bottom: 0.5em;
			// position: absolute;
			margin: 0;
			max-width: 94%;
			left: 3%;
		}
		.surtit{
			max-width: 90%;
			margin-left: -3.4%;
			font-size: 1.1em;
			color: @grisDarker;
			.box-shadow();
			border-left-width: 10px;
			border-left-style: solid;
		}
		.date {
			font-size: .7em;
			display: block;
			padding: 0;
			font-weight: 700;
			color: @grisDark;
			margin: 0;
		}
		.desc{
			color: @grisDarker;
			background-color: #fff;
			position: absolute;
			padding: 0 3%;
			font-size: 1em;
			line-height: 140%;
			bottom: .7em;
			height: 0;
			line-height: 140%;
		}
  }
	&.col-sm-6 {
		height: 17.7em;
		.legende{ height: 17em; }
	}

	&.col-sm-4 {
		height: 17em;
		.legende{
			height: 16em;
			.tit { font-size: 1.4em; }
			.desc { font-size: 1.05em; }
		}
	}
}

.liste-items.row .item .legende {
	left: 25px;
	height: 17.6em;
}

.liste-grille {
	margin-top: 3em;
	.item {
		background-clip: content-box;
		height: 15em;
		text-align: center;
		background-position: center;
		background-size: cover;
		.margebas;
		.tit {
			display: flex;
			align-items: center;
			height: 100%;
			background: #00000055;
			color: #fff;
			text-align: center;
			font-size: 1.9em;
			padding: 1em;
			font-weight: 600;
			line-height: 1.3em;
			justify-content: center;
			border-bottom: 6px solid @couleur-defaut;
			&.petit { font-size: 1.3em; }
		}
	}
	.lrub {margin: 0 0 2em; }
}

.liste-mot{
	background-color: transparent;
	.grotit{
		margin-bottom: 1.53em;
		padding-bottom: .5em;
	}
	.item {
		display: inline-block;
		border-bottom: 0.25em solid @couleur-defaut;
		margin: 0 1em .5em 0;
		padding: 0.4em 0.6em 0.3em;
		font-size: 1.5em;
		color: #000;
		background: @grisLighter;
		border-radius: 0.1em 0.1em;
	}
}

.bicolonnes .colgauche .liste-doc {
	display: block;
	.grotit, .grotit-doc{
		.tit_doubleliseret;
		min-width: 100%;
		margin-top: 1em;
	}
	&:not(.galerie) {
		.item {
			background-color: #eee;
			padding: 0.9em 1em 1.1em;
			margin-bottom: 20px;
			.tit {
				padding: 0 0 0.6em 0;
				text-align: left;
				background: transparent;
			}
			.cnt {
				padding-bottom: 1.5em;
				.desc { margin-bottom: .4em; }
				a { color: #555; }
			}
		}
	}
}

/* ------- LISTE PAR DEFAUT ------- */

/* ------- VIDEOS ------- */

.item-video{
	text-align: left;
	.margebas;
	.tit { font-size: 1.3em; }
}

/* ------- SEULEMENT TITRE ET LOGO ------- */

/* ------- SERRES ------- */

/* ------- EVENEMENTS ------- */

.page_evenement {
	.asidedroite .item-evt { margin-bottom: 0; }
}

/* ------- LOGO D'ARTICLES MEDIABOX ------- */

/* -------------- ENCART MESSAGE -------------- */

/* -------------- PAGINATION -------------- */

/* ***************************** PAGE D'ACCUEIL ***************************** */

.page_sommaire {
	.asidedroite {
		overflow: visible;
		.grotit::after { max-width: 364px; }

		.chronique {
				margin-bottom: 1em;
			.grotit {
				background: #eee;
				padding: 1.3em 30px .9em;
				margin: -60px -90px 1.6em 0;
				font-size: 1.9em;
				width: calc(~"100% + 60px");
				border: none;
				.gras, &.gras {
					color: @bleu;
					font-weight: 600;
				}
				&:after {
					top: 100%;
					left: 30%;
					border: solid transparent;
					content: " ";
					height: 0;
					width: 0;
					position: absolute;
					pointer-events: none;
					border-color: rgba(136, 183, 213, 0);
					border-top-color: #eee;
					border-left-color: #eee;
					border-width: 15px;
					margin-left: -30px;
				}
			}
			&>.item, .item-obj {
				padding: 0 0 0 10%;
				border-left: 1px solid #ddd;
				margin-bottom: 1.8em;
				.tit {
					font-size: 1.8em;
					font-style: italic;
					font-weight: 600;
					margin-bottom: .7em;
					a { color: @bleu; }
				}
				.cnt .btn {
					display: table;
					margin-top: 1.2em;
				}
			}
		}

	}
}

.container >.bicolonnes{
	overflow: visible;
	.row { overflow: visible; }

	.colgauche {
		.item-art {
			.entourelogo {
				position: relative;
				.spip_logo 		{ border-bottom: 0 solid transparent; }
				.titlogo 				{ bottom: 1.7em; }
			}
			.tit .surtit						{
				color: #666;
				font-weight: 400;
				text-transform: uppercase;
				margin-bottom: 0.3em;
				font-size: 0.68em;
				&::first-letter{
					font-size: 1.2em;
					font-weight: 300;
				}
			}
		}
	}

	.asidedroite{

		.logo .spip_logo 													{ margin-bottom: 2em; }
		.liste-logofond .logo .spip_logo 	{ margin-bottom: 0; }

		.agenda_futur .preambule{
				font-size: 1.2em;
				color: #000;
				display: block;
				font-weight: 600;
				position: relative;
				margin-right: 4%;
				cursor: pointer;
				font-weight: 700;
				.icon-fleche-bas4;
				.icon;
				&:before{
					color: @couleur-defaut;
					position: absolute;
					top: 0;
					left: 0;
				}
			a {color: #000; }
		}
		.agenda_futur, .agenda_passes{
				overflow: hidden;
				.liste-items, .liste-evt { margin-bottom: 0; }
				.tit {
					margin-bottom: .3em;
					font-weight: 600;
					a {
						color:  #000;
						font-weight: 600;
					}
				}
				.item-art, .item-evt { margin-bottom: 2.2em; }
				.btn { margin: 1.1em 10% 1.1em; }
		}
		.agenda_passes {
			.itel 																							{ margin-bottom: 40px; }
			.cnt, .date, .tit, .lieu, .btn-fleche 	{ margin-left: 0; }
			.lieu 																							{
				margin-bottom: 0;
				font-size: 1.2em
			}
			.date{
				padding: 0.45em 2.5% 0.35em;
				margin-bottom: .15em; }
		}

		.message{
			margin-top: 1.7em;
			padding: 0;
			.mail { cursor: pointer; }
			.btn{
				margin: 0 1em 1em 0;
				padding: 0.5em 0.8em .4em;
				font-size: 0.8em;
			}
			.fb .btn {
				margin-right: 0;
				background-color: #4267B2;
				border-color: #4267B2;
				&:hover{
					background-color: #3257A2;
					border-color: #3257A2;
				}
			}
		}

		.formulaire_contact_libre {
			margin-top: 2.9em;
			margin-bottom: 0;
			z-index: 2;
			.editer{ width: 95%; }
		}

		#twitter_fil {	margin-bottom: 2em; }

	}
}

.site-michelle .bicolonnes .colgauche .item-art .entourelogo {
	.filetapres(9px,100%, @couleur-defaut);
}
.site-eric .bicolonnes .colgauche .item-art {
	.entourelogo {
		.filetapres(9px,100%, @turquoise);
		&::after { background-image: none; }
	}
	&.couleur .entourelogo::after { .deg_h(@turquoise,@bleu); }
}

/* ***************************** PAGES INTERIEURES ***************************** */

.bicolonnes .asidedroite {

	.alaune, #alaune {
		.item {
			.desc {font-size: 0.9em; }
			.tit {font-size: 1.2em; }
			&:hover {
		  	.desc{
					padding: 0.6em 3%;
					height: 102px;
					line-height: 1.6em;
		  	}
				.logo img	{	filter: blur(5px); }
				.tit 						{	bottom: 109px; }
			}
		}
	}

}

/* ***************************** PAGES DE TYPE CONTENU ***************************** */

.page_type_contenu{
	#intro, .intro 			{
		text-align: left;
		.grotit {
			line-height: 113%;
			color: #000;
			font-size: 2.9em;
		}
		.grosurtit{
			margin-top: 0;
			margin-bottom: 0.4em;
			color: #666;
			font-size: 1.6em;
			line-height: 120%;
		}
	}
	.chemin 				{ display: none; }
	.notes 					{ margin-top: 2em; }
}

/* ***************************** PAGES DE TYPE LISTE ***************************** */

.page_type_liste{

	.chapo {
		padding: 0 0 1em 0;
		border-bottom: .5px solid #aaa;
		background: #fff;
		margin-bottom: 1.7em;
		font-size: 1.3em;
	}

	#laliste {
		.filtre {
			margin-left: 0;
			margin-right: 0;
			width: 100%;
			padding: 1em;
			overflow: hidden;
			.grostit{
				border-bottom: 2px solid @couleur-defaut;
				padding-bottom: 0.1em;
				display: inline-block;
				margin: .2em 0.4em;
			}
			select{
				padding: .1em 0.3% .1em 0.6em;
				width: 100%;
			}
		}
	}

	.asidedroite{
		.filtrer {
			padding-bottom: 1.5em;
			overflow: hidden;
			.grotit{ margin: 0 0 0.6em; }
			.item{
				text-align: left;
				color: #000;
				font-size: 1.1em;
				text-indent: 0;
				margin: 0.7em 0;
				display: block;
				a {
					font-size: 1.3em;
					font-weight: 600;
					font-family: @labeur;
					color: #000;
				}
				&:before{
					float: left;
					margin: 0.2em 0.3em 0 0;
					color: @couleur-defaut;
				}
			}
			&.thematique .item {
				&:before { display: none; }
				a{
					border-left-width: 3px;
					border-left-style: solid;
					padding-left: 4%;
				}
			}
		}
	}

	.pagination {
		border-top: none;
		.pages .sep { margin-top: 1.2em; }
	}

	.details {
		.titit {
		display: block;
		font-weight: 700;
		border-bottom: 2px solid @couleur-defaut;
		display: table;
		margin: 0.8em 0 0.4em;
		padding-bottom: 0em;
		}
		ul.spip {
			padding-left: .2em;
			margin: .2em 0 1.4em;
			li { padding: 0.3em 0 .1em 1em; }
		}
		.prof, .mandats {
			font-size: .9em;
			font-weight: 300;
		}
	}

}

html .page_type_liste , html.page_sommaire {
	.bicolonnes .colgauche .item-art .row {
		.boutons{ 				bottom: 1em; }
		.logoauteur { 	padding-right: 0; }
		.introboutons	{
			min-height: 197px;
			padding-bottom: 2em;
			.btn-petit											{ font-size: 0.8em; }
			.partage_toolbox .btn {
				padding: 0.2em .5em;
				img 		{ height: 24px; }
			}
		}
	}
}

/*  */

.page_videos{

	.grosoustit {
		font-size: 1.9em;
		width: 100%;
		text-align: center;
		margin: -1em 0 2em;
	}

	.liste-items .item-video .tit {
		font-size: 1.3em;
		font-weight: 700;
		a {	color: #000; }
	}

	#laliste .item, .autre .item { margin-bottom: 6em; }
}

/*  */

.page_mots{
	.liste-grille { margin-top: 0; }
}

/* --------------  PAGE RECHERCHE -------------- */

.page_recherche {

	.content .page_type_liste {

		#bicolonnes #intro, .bicolonnes #intro{

			.grotit{
				font-size: 1.6em;
				margin: 0 0 0.8em;
				color: @grisDark;
				text-transform: uppercase;
				font-weight: 300;
				border: none;
				text-align: left;
				.guillemet{
					vertical-align: text-bottom;
					font-size: 1.9em;
					margin: 0 0.1em;
				}
				i {
					color: @couleur-defaut;
					font-size: 2.3em;
					text-transform: none;
					font-weight: 500;
					line-height: 120%;
					vertical-align: middle;
				}
			}
			.chapo {margin-bottom: 1.3em; }

		}

		#formulaire_recherche2 {
	    padding: 1em;
	    margin: 2em 0 2.5em;
			form { text-align: center; }
			.saisie_input { width: 80%; }
			.submit {
				margin: 0 0;
				padding: 0.45em;
				font-size: 1.1em;
			}
		}

		.bicolonnes .asidedroite { margin-top: 12.3em; }

	}

	.chapo{
		border-bottom: 0 solid #fff;
		padding: 0;
	}
	.intertit{
		.tit_doubleliseret;
		margin: 25px;
		&::after{ bottom: -9px; }
	}

	.ui-rangeSlider {
		.ui-rangeSlider-handle {
			background: @couleur-defaut;
			cursor: col-resize;
		}
		.ui-rangeSlider-innerBar {
			height: 11px;
			margin: 6px 6px;
			background: @grisDark ;
		}
		.ui-rangeSlider-label {
			background: @couleur-defaut;
			color: #fff;
			font-size: 14px;
			padding: 1px 6px 1px;
			border-radius: 2px;
		}
	}
	#formulaire_recherche #recherche { color: #000; }

	.ui-rangeSlider-withArrows .ui-rangeSlider-container {margin: 0; }

	.marginputbas{
		margin-bottom: 15px;
		select { color: #000; }
	}
	.contenu .formulaire_spip form > div > ul.lesdates {
		margin: 45px 0;
		li { margin: 0 8%; }
	}

}

/* --------------  PAGE AUTEUR -------------- */

.page_auteur {
	.asidedroite .logo { margin-bottom: 0; }
}

.formulaire_contact_libre {
	margin-top: 1em;
	margin-bottom: 4em;
	.bugajaxie 			{ display: none; }
	.saisie_input 	{ width: 95%; }
	.boutons 				{ padding-bottom: 0; }
	.reponse_formulaire_erreur { margin-top: 2em; }
}

/* --------------  PAGE AGENDA -------------- */

.page_agenda {
	.bicolonnes {
		.colgauche {
			.cnt { margin-bottom: 1em ; }
			.grotit { border-width: 0 0 9px 0; }
		}
		.asidedroite { .item { margin-bottom: 10px; } }
	}
}

/* --------------  PAGE EVENEMENT -------------- */

/* --------------  PAGE ANNUAIRE -------------- */

/* --------------  PAGE VIDEO -------------- */

/* --------------  PAGE EVENEMENT -------------- */

/* --------------  PAGE PLAN DU SITE -------------- */

/* ***************************** PAGE ABONNEMENT  ***************************** */

/* ***************************** PAGE COMPTE UTILISATEUR ***************************** */

/* --------------  PAGE ABONNEMENT SEULEMENT -------------- */

/* --------------  PAGE D'ACCUEIL DU COMPTE -------------- */

/* ***************************** PIED DE PAGE ***************************** */

#piedinterieur{
	padding-top: 4em;
	overflow: hidden;
	min-width: 100%;
	.grotit {
		margin-left: 0;
		border-bottom: 5px solid @couleur-defaut;
		padding-bottom: 5px;
		text-align: left;
		&::first-letter { text-transform: uppercase; }
		a {
			color: #000;
			&:hover { color: @couleur-defaut; }
		}
	}
	.liste-syndic {
		.item {
			margin-bottom: 29px;
			.date {
				.titencadre;
				color: #fff;
				padding: 0.3em 1% .2em;
				text-transform: uppercase;
				font-size: .9em;
			}
			.tit {
				font-size: 1.6em;
				font-weight: 600;
				color: #000;
				border-left: 2px solid #ddd;
				padding-left: 21px;
				padding-top: 0px;
				margin-top: 0.7em;
			}
			.surtit { padding: 0;  }
		}
	}
}

.thematiques, .formulaire_pied {
	.grotit{
		height: 1.6em;
		font-weight: 600;
		font-size: 2.8em;
		// color: @couleur-secondaire;
		margin-top: -3.9em;
		margin-bottom: 1.4em;
		.filetapres(5px, 80px, @couleur-defaut);
	}
}
.thematiques {
	.container { margin-top: 4.5em; }
	.grotit {margin-top: -4em;}
	overflow: visible;
	padding-top: 2em;
	padding-bottom: 10em;
}
.formulaire_pied {
	.row { overflow: visible; }
	margin-top: 0;
	padding-top: 6.1em;
	padding-bottom: 10em;
	background-color: @couleur-secondaire;
	.grotit {
		padding-bottom: 0.7em;
		color: @bleu;
	}
	.editer-groupe { width: 94.7%; }
	.formulaire_spip {
		margin-top: 4em;
		form {
			.editer { margin-left: 4%; }
			.saisie_input {
				width: 29%;
				margin-left: 4%;
				color: #000;
			}
		  .saisie_case .choix {
		    margin: 0 10%;
		    overflow: hidden;
		  }
 			p.boutons { border-top: 0 solid #f0f1f2; }
			.editer_textarea_2  label {
				.grotit;
				font-size: 1.8em;
				color: #000;
				margin-top: 1em;
				margin-bottom: 0;
				padding-bottom: .8em;
				border-bottom-width: 4px;
				.obligatoire {
					display: none;
					font-size: 0.7em;
					text-align: center;
				}
			}
			 
			label, .editer_textarea_2 label { color: #fff; }
			
			label {
			  max-width: 82%;
			  text-align: left;
			}
			input.text {color: #000; }
			&::placerholder{color: #000; }
			.saisie_case { float: left; }
			input[type="radio"], input[type="checkbox"] { float: left; }
			input.submit {
				float: right;
				margin-right: 4em;
				background: @couleur-defaut;
				border-color: @couleur-defaut;
				&:hover {
					background: darken(@couleur-defaut,10%);
					border-color: darken(@couleur-defaut,10%);
				}
			}
			div.choix 	{ padding-top: 1.5em; }
			.boutons 	{ padding-top: 1.1em; }
		}
	}

}

.page #footer	.content { min-height: 0;  }
#footer{
	.grotit{
		padding-bottom: .4em;
		margin-top: .4em;
		border-bottom: none;
		.filetapres(5px,2.6em);
	}
	#infolettre {
		.text {
	    color: #000;
	    border-radius: 0;
	    padding: 0.6em 2% 0.5em;
	    border-color: #fff;
	  }
		.boutons .submit{
			padding: .5em 1.3em;
			font-size: 0.9em;
			border-radius: .3em;
			box-shadow: 1px 1px 5px #0005;
		}
	}
	#pied{
		background-color: @couleur-secondaire;
		padding: 5.4em 0 4em;
		.btn{
			background: @couleur-defaut;
			margin: 0.9em;
			padding: 0.4em 1em .3em;
			color: #fff;
			text-indent: 0;
			border-radius: 5px;
			box-shadow: 2px 2px 2px #0000001a;
		}
		h2.contact, .tit {
			color: #000;
			   color: #fff;  
			font-size: 1.1em;
			font-weight: 700;
		}

		.adresse{
			line-height: 1.4em;
			color: @couleur-defaut;
			padding: 0 0 0.7em;
		}
		.titelephone{
			font-size: 1em;
			color: #000;
		}
		.telephone{
			font-size: 1.3em;
			font-weight: 700;
		}
	}
	.navbar {min-height: 0; }
	.navbar-nav & > li {
		border-color: @couleur-defaut;
		> a {
			color: #555;
			margin-bottom: 0;
		}
	}
	#partenaires{
		text-align: center;
		.item{
			height: 4em;
			display: inline-block;
			margin: 0 1.3%;
			img {
				height: 100%;
				width: auto;
			}
		}
	}
	#navpied{
		margin: 0;
		padding-bottom: 3em;
		.icones{margin-bottom: 0; }
		li a {
			color: #000;
			border-right: none;
			margin: 0;
		}
		.btcontact a img { width: 33px; }
	}
	li a {color: #000; }

}

/* ***************************** FENETRES, ELEMENTS FIXES ET DEPLIANTS ***************************** */

/* --------------  VOLET DEPLIANT DE BAS DE PAGE -------------- */

/*  */

body .spip-admin-float {
	z-index: 2000;
	margin-top: 0;
	top: 0;
	left: 1px;
	.spip-admin-boutons{
		float: left;
		padding: 0.6em 1em 0.7em;
	}
}

/* --------------  ADDTHIS -------------- */

html {
	#at4-share, #at4-soc{
			top: calc(~' 34.1vw - 132px' );
			bottom: auto;
	}
}
.at-branding-logo { display: none; }

/* ******************** RESPONSIVE ******************** */

/* ******************** DEBOGAGE ******************** */// 
.mobile_intertitre(){
	font-size: 2em;
	text-align: center;
	text-transform: none;
	line-height: 120%;
	border-bottom-width: 6px;
	border-bottom-style: solid;
	display: table;
	margin: 0 auto 1.4em;
	float: none;
	padding-bottom: 0.2em;
	color: #555;
	&::before {content: none; }
}

@media screen and (max-width: @screen-lg-max) {
	// .owl-carousel.owl-drag .owl-item {max-height: 35em; }
	.content {
		#myCarousel{
			.owl-next, .owl-prev 			{ margin: 3.6em 0; }
			&:hover .legende .desc 	{ height: 9em; }
		}
		#agenda 				{margin-top: 4.6em; }
		#reste 						{margin-top: 1.5em; }
	}
}

@media screen and (min-width: @screen-lg) and (max-width: @screen-lg-max) {
	body .contenu .grosboutons .grosbouton { min-height: 15em; }
}

@media screen and (min-width: @screen-md) and (max-width: @screen-md-max) {
	body .contenu .grosboutons .grosbouton { min-height: 13em; }
	.content #myCarousel {
		.owl-next, .owl-prev { margin: 2.8em 0; }
		.owl-carousel .item .legende .tit {font-size: 1.6em;}
	}
}

@media screen and (max-width: @screen-md-max) {
	.content #formulaire_recherche2 {
		.saisie_input { width: 58%; }
	}
	body #tarteaucitronRoot {
		span#tarteaucitronDisclaimerAlert {
			width: calc(~"100% - 20px");
			text-align: center;
			margin-bottom: 1em;
		}
		button { margin: 0 .35em .7em; }
	}
		body .spip-admin-float {
	    bottom: 7px ;
			top: inherit;
		}
	.depliantbas { display:none;}
}

@media screen and (min-width: @screen-md)  {
	/*  */
	.page_videos{
		.liste-videos .tit {
			min-height: 2.8em;
			font-weight: 500;
			// font-size: 1.4em; Problematique sur Dunkerque Centre
		}
	}
	.page_auteurs	.item-auteur .formulaire_contact_libre {min-width: 580px; }
}

@media screen and (min-width: @screen-sm) and (max-width: @screen-sm-max) {

	/*  */

  #footer, .footer {
		#pied #infolettre .text {width: 70%; }
  	#pied {
  		margin-top: 0;
  		// padding: 3.4em 0 1.5em;
	 		#adresse .telephone { font-size: 1.2em; }
  	}
		#navpied li, .menu-liste li { margin-top: 0em;}
  }

	body .contenu .grosboutons .grosbouton { min-height: 11em; }
}

@media screen and (min-width: @screen-sm) and (max-width: 1000px) {
}

@media screen and (max-width: @screen-sm-max) {
	.container {
		padding-left: 4%;
		padding-right: 4%;
	}
	.content #bicolonnes .asidedroite .grotit { width: 100%; }
	.content #formulaire_recherche2 {
		.saisie_input { width: 47%; }
	}
	.content .item-video {
		width: 100%;
		.mediainterieur{
			max-height: 100%;
		}

	}
	.page_videos .item .tit {
		margin-top: 0;
		min-height: 0;
	}
	.footer {
		#pied #infolettre .text 	{ text-align: center; }
		.grotit {
			margin-top: 1.4em;
			font-size: 2em;
		}
	}
}


@media screen and (min-width: @screen-xs ) and (max-width: @screen-xs-max ) {
	.container{ overflow: hidden; }
	#infolettre{
		width: 60%;
		margin: 9% 20% 0;
	}
}

@media screen and (max-width: @screen-xs-max ) {

	/*  */

	
	/*  */
	
	img { height: auto; }
	iframe { max-width: 100%; }
	.page #wrapper{
		margin-top: 0;
		top: 6vw;
	}
	// Quand on est en col-sm-12, il vaut mieux prendre oute la place pour bien aligner les grilles
	// Sinon, les col-xs peuvent prendre le dessus
	.col-sm-6, .col-sm-12, .col-sm-4 		{ width: 100%; }
	.content .margesup 			{ width: 94%; }
	.encart-message {
		line-height: 150%;
		padding: 0;
		text-align: center;
		font-size: 1.4em;
		background-position: top;
		font-weight: 300;
		hyphens: auto;
		.spip_logos { max-width: 80%; }
		.coldroite .desc {
			line-height: 150%;
			margin-top: 1em;
			display: block;
		}
	}
	
	.frise {
		padding: 0;
		.carreblanc {padding: 1em 1em 0; }
	}
	.titsuite, .page .content .contenu h3.spip 	   { font-size: 1.8em;}
	.frise, .content h2 										{ margin: 0; }
	.llsrub:before 												  { display: none; }
	
	/*  */
	
	.pagination {
		margin: 0 0 8vw;
		.pages {
			strong, a {
				width: 1.4em;
				border: 0 solid #fff;
				border-top: .4em solid #fff;
			}
		}
	}

 	.titsuite 								{font-size: 1.8em;}
	// .content 	h2 				{ margin: 0; } // ( trop general - casse la mise en page)
	.llsrub:before				{ display: none; }

	/*  */

	.contenu .formulaire_spip {
		form {
			.saisie_case{ width: 100%; }
			legend, .legend{
				font-size: 1.5em;
				line-height: 170%;
				font-weight: 500;
			}
			label{ font-size: 1em; }
			fieldset {
				legend, .legend, .row-fluid {width: 95%; }
			}
		}
	}

	.formulaire_login form{
		#pass_securise{ display: none; }
	}

	/*  */

	/*  */

	body {

		.chemin {
			// RETAR Pas de fil d'ariane sur mobile
			display: none;
			margin: 1em 0 0em;
		}
		#intro, .intro {
			float: none;
			margin-bottom: 1em;
			.grotit {
				font-size: 2.3em;
				margin: 0.6em auto 0;
				line-height: 110%;
			}
			.chapo { margin-bottom: 1.5em;}
		}

	}

	.content {

		margin-top: 0.5em;

		#bicolonnes {

			/*  */

		 	.colgauche {
		 		.blocrub {
		 				width: auto;
		 				margin-bottom: 2em;
		 		}
			 	.llsrub{
					display: table;
					text-align: center;
					margin: 0 auto;
					font-size: 1em;
					padding: .5em 0 1em;
					text-decoration: none;
					background: transparent url('https://ericbocquet.fr/squ/squelettes/ergo/fleche/b_gras.svg') no-repeat center bottom;
			 	}
		 	}

		}

		/*  */

		.asidedroite {
			.lls {margin: 2em auto 0; }
			.item {
				border-left: none;
				padding-left: 0;
			}
			.llsrub {
				margin: 2em auto 0;
				display: table;
				text-align: center;
			}

			.item-breve{
				border-bottom: none;
				padding-bottom: 0;
			}

			#podcasts .grotit { background-size: 36%; }

			.oe-play-button button {
				padding: 0 0 0;
				left: 0;
				margin-left: 2%;
			}
			.oembed_file {
				margin-bottom:  1em;
				.oe-title, .oembed-author {margin-right: 0; }
			}

			.pubcarre{
				margin-bottom: 0;
				border-bottom: none;
			}

		}

	}

	/*  */

	.content {
		.liste-mot{
			.mc:first-of-type{ margin-left:0;  }
			.tit-mot{ margin-bottom: .2em; }
		}
	}

	.liste-mot .item 		{ font-size: 1.2em; }
	.liste-grille .item 	{
		display: block;
		min-width: 100%;
	}

	/*  */

 	#footer, .footer {
 		padding: 0;
 		margin: 0;
		.nav {
			padding-left: 0;
			padding-right: 0;
		}
 		#pied {
 			margin: 0;
 			padding-top: 2em;
 			#adresse { border-right: none; }
			#infolettre {
				.text {
			 		width: 100%;
					height: 2.7em;
				}
				.boutons{
					font-size: 1.3em;
					.submit {
						margin-top: 0;
						background: darken(@couleur-defaut,3);
						color: #fff;
						width: 100%;
						padding-top: .7em;
						padding-bottom: .7em;
						border: 0 solid @couleur-defaut;
						&:hover, &:focus {
							background:#fff;
							color: darken(@couleur-defaut,3);
							border-width: 1px;

						}
					}
				}
			}
 		}
		#navpied, .navpied {
			.icones{
				padding: 7px 0 ;
				font-size: 0;
				margin: 0;
				li {
					margin-top: 9px;
					a {
						padding-right: 10px;
						margin-left: 3px;
						img { width: 33px; }
					}
				}
			}
			.menu-liste {
				padding: 0.6em 0 1em;
				background: @grisLighter;
				font-size: .9em;
				line-height: 70%;
				display: block !important;
				margin: 1em 0 3em;
				li { margin-top: 0.7em; }
			}
		}

 		#services .item {
    			height: 55vw;
    			background-position: 0 7vw;
    			.tit {
    				height: 12vw;
    				text-align: center;
    				background-position: bottom;
    			}
		}
		#partenaires {padding: 1em 0; }

		.container {
			margin: 4%;
			width: 92%;
			font-size: 0.8em;
			line-height: 140%;
			img {
				margin: 16px 0 10px;
				max-width: 70%;
			}
		}
	 	#membres {
	 		 img {
				margin: 0;
				max-width: 100%;
			}
	 		.lls {
	 			margin: 0 0 4em;
	 			padding-right: 20px;
	 		}
			.logo {border: 2px solid @grisLight; }
	 	}

	}

	/*  */

	.content {

		#myCarousel {
			margin: 0;
			.item {
				margin: 0;
				height: 100vw;
				overflow: hidden;
				.logo {
					overflow: hidden;
					display: block;
					img {
						max-width: inherit;
						height: calc(~"100vh - 170px");
						width: 100%;
						object-fit: cover;
						object-position: center center;
					}
				}
				.legende{
					width: 90%;
					padding: 2% 0% 25%;
					background-color: transparent;
					font-size: .8em;
					// margin: 0 5% 5vw;
					.surtit {
						margin: 0 auto;
						display: table;
						max-width: 80%;
						// font-size: 1.4em;
					}
					.tit {
						font-size: 2em;
						line-height: 1.2;
						margin: 0 auto 0.3em;
						text-align: center;
						display: table;
						font-weight: 500;
					}
					.soustit {
						margin-top: -0.5em;
						max-width: 95%;
					}
					.desc {display: none; }
					.btn { display: none; }
				}
			}
			.owl-nav{ display: none;}
		}

		.banniere_une{
			height: 20vw !important;
			margin-bottom: 0;
		}

		#agenda {
				width: 100vw;
				margin-top: 3.5em;
				.titagenda{
					padding: 0.2em 5% .4em;
					top: 0;
					margin: 0 0 1.2em;
				}
				.margesup { overflow: hidden; }
				.item {
					padding:0;
					display: block;
					margin-bottom: 0.7em;
					.logo{
						overflow: visible;
						height: auto;
						&:after{
							margin:0;
							width: auto;
						}
					}
					img {width: 100%; }
					.tit{
						left: 5%;
						bottom: 0.7em;
						font-size: 1.4em;
						width: 90%;
						padding: 0.5em 0.7em;
					}
					.legende{ padding: 0.3em 3%; }
					.dateetlieu{
					 	font-size: 0.8em;
					 	width: 90%;
						left: 5%;
					 	.date{ min-width: 75px; }
					 	.adresse{ display: none; }
					}
					.item-evt {
						margin-bottom: 1.8em;
						.btn {
							font-size: 0.8em;
							margin-top: 1em;
						}
					}
				}
				.evtmineurs 		{
					margin-top: 0.5em;
					.item-evt {
						margin-bottom: 0;
						.tit{ width: 100%; }
						.btn { margin-top: 0; }
						.lieu {
							margin: 0.7em 0 0;
							font-size: 1.1em;
							font-weight: 600;
						}
					}
				}
				.couleur .stit 	{ width: 100%; }
				.llsrub{
					margin: 0 17% 0;
					padding: 0.7em;
					width: 64%;
				}
		}

	}

	/*  */

	#coldroite .grotit, .asidedroite .grotit { text-align: center; }
	.page .content {
		margin-top: 3.2em;
		.bloctit, #intro, .intro {
			margin-top: 0;
			margin-bottom: 1.1em;
			.grotit{
				font-size: 2.2em;
				margin-top: .2em;
				margin-bottom: 0.3em;
			}
		}
		.contenu {
			padding-top: 0.5em;

			.chemin {
				font-size: 1.2em;
				line-height: 100%;
				width: 100%;
			}


			h3.spip {font-size: 1.8em;}
			.droite{
				margin: 0;
				width: 100%;
				margin: 0 0 1em;
				max-width: 100%;
				.spip_logo, .logo_article {
					width: 100%;
					margin: 0;
				}
			}
			// On met le logo d'article en pleine largeur
			.asidedroite.droite {
				width: 100vw;
		    margin: -1.6em -5vw 1em;
		    max-width: 100vw;
			}
			.date{
				font-size: 1em;
				margin: 0;
				&:first-of-type{ margin: 0 0 0.2em; }
			}

			.chapo{
				font-size: 16px;
				font-weight: 500;
			}

			.texte p { font-size: 1em; }

			.grotit{ margin: 1em auto 1.5em; }

		  .liste-doc {
		  	.grotit-doc {
		  		font-size: 1.6em;
		  	}
		  	.tit {
			    font-size: 1em;
					word-wrap: break-word;
			  }
			}

		}
	}

	/*  */

	body .content .page_type_liste {

		.intro {
			.grotit {margin: 0.6em 0;}
			.chapo { margin-bottom: 0.2em; }
		}

		.laliste {
			.grotit{ .mobile_intertitre(); }
			 .filtre {
				margin: 0 -4% 2em;
				padding: 0.6em 1em;
				text-align: center;
				font-weight: 300;
				width: inherit;
				.intro{
					color: #000;
					font-size: 1em;
					font-weight: 400;
					border-bottom-width: 3px;
				}
				a {
					margin: 0 0.2em;
					color: @couleur-defaut;
				}
				.titselect {
					padding: 0.8em 1em 0.4em;
					width: 38vw;
				}
				.select-design {width: 90vw; }
			}
			select {
				height: 2.1em;
				width: 50vw;
			}
		}

		.laliste, .liste-logofond, .liste-items {
			.item {
				.surtit{
					line-height: 123%;
					font-size: .5em;
				}
			 .tit {
					width: 100%;
					float: none;
				}
				.cnt { overflow: hidden; }
				.date-pub, .date-modif { font-size: .9em; }
				.boutons {
					bottom: inherit;
					top: 144px;
					.btn { margin: 0 0 0.6em; }
					.partage_toolbox {
						width: 100%;
						.btn {
							margin-bottom: .8em;
							&:last-of-type{ margin-bottom: .2em;  }
						}
					}
				}
				.entourelogo{
					min-height: 130px;
				}
			}
			.col-sm-12:last-of-type{margin-bottom: 0; }
		}

		.asidedroite{
			margin-top: 0em;
			// &>.row {
			// 	margin-left: 0;
			// 	margin-right: 0;
			// }
			.grotit{ 	margin: 0 auto 1em; }
			// .row {			margin-left: 0; }
		}

	}

	/*  */

	.page_recherche .content .page_type_liste {
		#intro .grotit 										{ font-size: 2.2em; }
		.chapo 															{ text-align: center; }
		#formulaire_recherche2{
			margin-top: 0;
			padding: 1em 0;
			form{
				text-align: center;
				.saisie_input {
					margin: 0 0 1.1em;
					width: 90%;
			    width: 92%;
			    margin-left: 5%;
					.text {
						text-align: center;
						margin: 0 0;
					}
				}
			  .submit {
			  	width: 90%;
			  	margin: 0 0 0 5%;
			  }
			}
		}
		#bicolonnes .liste-items .item .cnt { min-height: 12em; }
	}

	.content #formulaire_recherche2 {
	}

	/*  */

	.page_annuaire body {
		#intro .grotit {
			font-size: 2.2em;
			line-height: 100%;
			margin-bottom: .6em;
		}
		.titsuite {
			font-size: 1.45em;
			text-align: left;
			padding-bottom: 0.7em;
		}
		#membres, #membres2 {
			.liste-items{
				.col-sm-4{
					width: 50%;
					.item {
						padding: 2vw 0;
						.logo {
							margin: 15px auto 0;
							border: 2px solid @grisLight;
						}
						.entry h3.tit, .introduction, .btn {
							display: none;
						}
					}
				}
			}
		}
	}

	/*  */

	.page_auteurs .page	{
		.item-auteur {
			text-align: center;
			.formulaire_contact_libre {
				width: calc(~"200% + 58px");
				&::before { transform: rotate(-45deg) translate(49px); }
			}
		}

		.laliste .row > div {
			&:nth-of-type(2n+1){
				.formulaire_contact_libre {
					right:0;
					&:before{
						transform: rotate(-45deg) translate(-20px,-69px);
						right:0;
					}
				}
			}
			&:nth-of-type(2n){
				.formulaire_contact_libre {
					left:0;
					&:before{
						transform: rotate(-45deg) translate(49px);
						left:0;
					}
				}
			}
		}

	}

	/*  */

	// ça va pas de soit, mais c'est  élégant :
	// marge supplémentaire sur les pages de type contenu;
	.contenu.page_type_contenu {
			.intro, .corps {
				margin-right: -15px;
				margin-left: -15px;
				margin-bottom: 1.5em;
	  }
	}

	/*  */

	.page_auteur body {
		.contenu {
			h4.spip {font-size: 1.3em;}
			.btn {
				font-size: 1em;
				margin-bottom: .5em;
				width: 100%;
				padding: 0.3em 0 .4em;
			}
		}
	}

	/*  */

	.page_compte .page .content #intro .grotit {font-size: 2.1em; }

	body .contenu .grosboutons {
		width: auto;
		padding: 0 8vw;
		.grosbouton {
	    font-size: 15px;
			padding: 0 0 26%;
			margin-bottom: 2em;
			margin-top: 2em;
			min-height: 14em;
    	.ico, svg { top: 2em; }
    	.legende .titit {
				font-size:  15px;
				font-weight: 600;
				width: 100%;
				line-height: 1.4em;
			}
  	}
	}

	.page_compte, .page_abonnement {

	/*  */

		.connect .titconnect {
			font-size: 1.9em;
			line-height: 120%;
			margin-top: .4em;
		}
		#formulaire_inscription{
			width: 100%;
			.saisie_nom_inscription {margin-bottom: 1em; }
			.boutons{ margin-top: -2.4em; }
		}

	/*  */

		.content .contenu {

			&.page_type_liste #bicolonnes .liste-items .item {
				.tit { margin-bottom: 0.5em; }
				.entourelogo {
					padding: 0 10px;
					margin: 0;
					width: 41.6%;
					.spip_logo {
						margin-left: 0;
						height: auto;
						width: 100%;
					}
				}
				.introduction {
					padding: 0 0 .5em;
					width: 100%;
				}
				p { margin-bottom: .5em; }
				ul.spip {
					font-size: 0.9em;
					line-height: 140%;
					padding: 0 0 0 1em;
				}

			}

			/* Col de droite  */

			#coldroite, .asidedroite {

				.encartcompte {
					margin: 0;
					width: 100%;
				}

				#pubcarre {
			    margin: 2.2em 0 0;
			    width: 100%;
			    overflow: hidden;
				}

				.colreduite {
					margin-top: 0;
					overflow: hidden;
					margin-top: 0.2em;
					width: 100%;
					margin-left: 0;
					.grotit {
						text-align: center;
						padding-top: 0.7em;
					}
				}

				.deconnect {
					background: #ddd;
					padding: 0.7em 4%;
					border-radius: 0.3em;
					color: #000;
					text-align: center;
					text-transform: uppercase;
					font-size: 1em;
					font-weight: 500;
					margin-bottom: 2em;
				}

			}

		}
	}

	/*  */

	.page_panier {
	  .page {
	  	overflow-x: visible;
	  	.content {
	  		overflow-x: visible;
	  	 .contenu {
	  	 	overflow: visible;
				.grotit:before { width:41px; }
	  	 }
	  	}
	  }
		.container .row { overflow: visible; }
		.chapo { padding: 0 0 .5em; }
		.contenu .formulaire_panier{
			margin-left: -30px;
			margin-right: -30px;
			padding: 1em 5vw 3.2em;
			.description p { margin: 0; }
			form .btn_vider::before { width: 34px; }
			.emplette td {
		    padding: 0.7em 0.2em;
			  text-align: center;
			  line-height: 1.3em;
			}
			thead th, td {
				font-size: 14px;
				&.montant {
					width: 0;
					padding: 0;
				}
			}
			thead th, .total_ttc td {
			  line-height: 1.1em;
			  text-align: center;
		    font-size: 14px;
		    padding: 1.4em .3em 1.3em;
			  width: 3px;
			}
			button.submit{
				padding: 0.4em 5.2%;
				&.recalcul { float: right; }
			}
		}
		.bouton_action_post, .bouton_action_post > div {
		  display: block;
		  text-align: center;
		  width: 100%;
			.btn {
				padding: 0.2em 4% .2em;
				float: none;
				margin: 0 auto;
			}
		}

	}

	/*  */

		.page_paiement .content {
			.article {
				padding: 0;
				margin: 0;
			}
			.payer .note { display: none; }
			.item 						{ width: 100%; }
			#colgauche { padding: 0; }
		}

	/*  */

	body .spip-admin-float {
		bottom: 8px;
		width: 96%;
		.spip-admin-boutons{ border-radius: 0; }
	}

	.partage_inline_share_toolbox{ display: none; }
}

@media screen and (max-width: @screen-sm-max ) { .page #wrapper .content {margin-top: 8vw; } }
@media screen and (max-width: 320px) { .page .content {margin-top: 1.5em; } }

@media screen and (min-width: 386px) {
	.content {
		#myCarousel, .owl-carousel {
			.owl-next, .owl-prev { width: 55px; }
		}
	}
}

//  Variables pour position de background répétitives
@bgpos-eric :  center -0.6em;
@bgposy-eric : .7em;
@bgsize-eric :  2005px, 2005px;
@bgpos-michelle :  center -0.6em;
@bgposy-michelle :  1.2em;
@bgsize-michelle :  2005px, 2005px;

// ======== SMARTPHONE + TABLETTES + PETITS ECRANS (TRADI) =========
@media screen and (max-width: @screen-md-max) {

	/*  */

	.page_type_contenu #bicolonnes {
		.colgauche .liste-doc .item .btn {
	    position: static;
			margin: 0.6em 0 0;
	  }
  	.asidedroite .item-auteur.deuxcolonnes {
  		.tit { padding: 0.5em 0 0; }
  		.legende .details {
  			padding: 0.1em 0 0.3em;
  			margin-top: 0.4em;
  		}
  		.message { margin-top: 0.4em; }
  	}
  }


	/*  */

	.page_type_liste .asidedroite .filtrer {
		padding-bottom: 2.4em;
		.item a 	{ font-size: 1.2em; }
	}

	/*  */

	.page_auteur {
		.item-auteur .message img { width: 20px; }
	}

	/*  */

	.page_recherche {
		.intertit { font-size: 1.9em; }
		.content .page_type_liste #formulaire_recherche2 {
			.saisie_input 	{ width: 71.3%; }
			.submit 					{ font-size: 1.14em; }
		}
	}

	/*  */

  html #at4-share, html #at4-soc { top: 252px; }
}

// ======== SMARTPHONE + TABLETTES  =========
@media screen and (max-width: @screen-sm-max) {

	/*  */

	.titpage {
    margin-top: calc(~'7.3% + 1.85em');
    padding-bottom: calc(~'0.5% + 0.4em');
    font-size: 2.1em;
	}

	.page_sommaire .asidedroite .chronique .grotit {
		padding-top: .9em;
		margin-top: 0;
	}

	/*  */

	body .content .contenu.page_type_liste #bicolonnes .asidedroite .alaune .item {
		max-height: 18em;
    .surtit { font-size: .9em; }
		.legende{padding-top: 2%; }
		&:hover {
			.tit 			{ bottom: 53%; }
			.desc 	{ height: 50%; }
		}
	}

	.bicolonnes .colgauche .liste-doc:not(.galerie) .col-sm-12 { width: 100%; }
	.formulaire_pied {
		padding-bottom: 3em;
		.formulaire_spip form {
			.saisie_input, .saisie_case .choix { width: 80%; }
			textarea{ width: 82%; }
			.saisie_textarea { margin-bottom: 0; }
			input.submit {
				float: none;
				margin: .5em 0 0;
				padding: 0.3em 7%;
			}
		}
	}
	.bicolonnes .asidedroite .alaune .item {
		.lien { max-height: inherit; }
		.legende { height: 99%; }
	}

}

// ======== SMARTPHONES + TABLETTES DEBOUT =========
@media screen and (max-width: @screen-xs-max ) {

	/*  */

	body .page .titsite { display: none; }
	.formvisible {
		background: #fff;
		padding-bottom: 0.6em;
	}
	body .page #header .interieur #nav.menuprincipal .nav-collapse {
		.menu-liste > li {
			height: 2.4em;
			padding: 0.5em 0;
		}
		& > ul > li > a .gras {
			color: #fff;
			font-weight: bold;
		}
	}

	#wrapper{padding-top: 40%; }
	.titsenateur{
		font-size: calc(~'3vw + 12px');
		margin-top: calc(~'6% - 9px');
		right: 3%;
	}

	/*  */

	a.btn_print {
		float: none;
		display: table;
		margin: 2.7em auto 5em;
		font-size: 1em;
	}
	.contenu  .chapo p {
		line-height: 150%;
		font-size: 1.1em;
	}

	/*  */

	.agenda_passes{
		.grotit 			{ margin-bottom: 1em; }
		.date 				{ width: 100%; }
		.item-evt 	{ text-align: center; }
	}
	.liste-evt > div {
		margin-left: auto;
		margin-right: auto;
	}
	.page .content .contenu .colgauche .date { margin-bottom: .7em; }
	.page .content .contenu .aside .date {
		font-size: .7em;
		&:first-of-type { margin: 0 0 0.2em 36px;  }
		&:before {
			top: .3em;
			font-size: .8em;
		}
	}
	.bicolonnes .asidedroite .alaune .item {
		&:hover {
			.desc 	{ height: 110px; }
			.tit			{ bottom: 120px; }
		}
	}

	// Essayer de généraliser ceci à l'occasion
	.container {
		.legende { height: 99%; }
	}
	.fondblanc { padding: 0px 4% 0; }

	/*  */

	.partage_toolbox .btn img {
    height: 21px;
    margin: 0;
	}

	/*  */

	#footer{
		margin: 2em 0 0;
		padding: 0 0 3em;
		.grotit		{ margin-top: 0; }
		#pied 	{
			padding: 0 0 0.5em;
			.content{ margin-top: 2.2em; }
		}
		#navpied {
			margin: 1em 0;
			.icones li {margin-top: .2em; 	}
		}
		.menu-liste {
			padding: 0;
			li {
				margin-top: 0;
				a {
					padding-right: 0.4em;
					border-right: 0;
					margin-left: 0.4em;
				}
			}
		}
	}

	/*  */

	.page_interieure {
		margin-top: 0;
		#wrapper 			{ padding-top: 19vw; }
		.titpage{
			margin-top: -2.1%;
			font-weight: 800;
			font-size: 1.6em;
			padding-bottom: .2em;
			min-height: 29.1vw;
			line-height: 1.05;
			display: flex;
			font-size: 7vw;
			flex-direction: column;
			justify-content: center;
			justify-content: end;
			padding: 0 .1em .6em;
			&::after {  height: 5px; }
		}
	}

	/*  */

	body .page .content .page_type_contenu  {
		#intro .grotit 					{ padding: .1em 0 0; }
		.colgauche .date 		{ padding: .2em 2.8%; }
	}
	.page_type_contenu #bicolonnes .asidedroite .item-auteur.deuxcolonnes  {
		.tit 												{ padding: .7em 0; }
	 	.legende .details 	{ padding: .3em 0 .5em; }
	}

	/*  */

	.page_videos  {
		#intro, .intro { display: none; }
	}

	/*  */

	.page_auteur  {

		body #contenu .btn {
			width: auto;
			padding: 0.3em 0.6em .4em;
			margin-right: 0.8em;

		}
		#bicolonnes {
			display: flex;
			flex-direction: column;
			.colgauche { order: 2; }
			.asidedroite {
				order: 1;
				.message	{
					text-align: center;
					.btn, .fb .btn 																												{ margin: 0 1em 1em; }
				}
				#twitter, #alaune 																									{ display: none; }
			}
		}
		.content .page_type_liste #bicolonnes .asidedroite 	{ margin-top: .1em;  }

	}


	/*  */

	.logoauteur{
		max-width: 42%;
		float: left;
		margin-top: 0.4em;
	}
	html:not(.page_auteur) .content .contenu.page_type_liste {
		#laliste .filtre select {
	    height: 2.1em;
	    width: 89vw;
	    margin: 1em 0 0;
	  }
	  .colgauche .item-art .introboutons 	{
	  	padding-bottom: 0;
	  	min-height: auto;
	  }
	  #bicolonnes .liste-items .item .tit 		{ margin-bottom: 0; }
	}

	/*  */

	.page_mots .liste-mot {
		text-align: center;
		margin-bottom: 0;
		.item { margin: 0 0.4em .5em; }
	}

	/*  */

	.page_recherche body .content {
		margin-left: 0;
		margin-right: 0;
		.contenu.page_type_liste #bicolonnes {
			#intro .grotit {
				margin: 0.3em 0 1.1em;
				font-size: 1.4em;
				line-height: 1.1;
				border-bottom: 1px solid #ccc;
				width: 100%;
				padding: 0 0 0.9em;
			}
			.liste-items .intertit {
		    margin-top: 0.5em;
		    margin-bottom: 0.9em;
		    font-size: 1.8em;
		    b { display: block; }
	    }
  		#formulaire_recherche2 form .saisie_input {
  			float: left;
				width: 77%;
				margin: 0 0 0 2%;
  		}
	  }
	}

	/*  */

	body .spip-admin-float {
		bottom: 8px;
		width: 96%;
		.spip-admin-boutons{ border-radius: 0; }
	}
	body .page_interieure ~ .spip-admin-float {bottom: 55px; }
}

// ======== SMARTPHONES  =========
@media screen and (max-width: @screen-xs ) {
	/*  */

	.site-eric {
		#wrapper {
			background-size: 286px,218%,2005px;
			background-position: -85px 0.5em,@bgpos-eric,@bgpos-eric;
		}
		.page_interieure #wrapper {
			background-size: 156px,218%,2005px;
			background-position: -200px 0.5em,center -18vw ,@bgpos-eric;
		}
	}
	.site-michelle {
		#wrapper 			{
			background-size: 196px,218%,2005px;
			background-position: -8px 0.5em,@bgpos-michelle,@bgpos-michelle;
		}
		.page_interieure #wrapper {
			background-size: 156px,218%,2005px;
			background-position: -200px 0.5em,center 0 ,@bgpos-michelle;
		}
	}

	#piedinterieur {
		.grotit {
			text-align: center;
			width: 65%;
			margin: 0 auto 2em;
			padding: 0 0 0.4em;
			font-size: 2em;
		}

		.liste-syndic 		{ margin-bottom: 3em; }
		.asidedroite {
			.grotit { width: 42%; }
			#twitter .grotit {
				width: inherit;
    		padding: .3em 1em 0.2em;
			}
		}
	}

}

// ======== GROS SMARTPHONES ET TABLETTES DEBOUT =========
// :::::::::::::::: 480 px -> 992 px :::::::::::::::::
@media screen and (min-width: @screen-xs ) and (max-width: @screen-sm-max)  {

	/*  */
	.container { overflow: visible; }
	#wrapper { padding-top: 14em; }
	.site-eric #wrapper 	{
		background-size: 286px,218%,2005px;
		background-position: -85px 0.5em,@bgpos-eric,@bgpos-eric;
 }
	.site-michelle #wrapper 			{
		background-size: 286px,218%,2005px;
		background-position: -30px 0.6em,@bgpos-michelle,@bgpos-michelle;
	}
	.page_interieure #wrapper 	{ padding-top: 15%; }
	.titpage {
		margin-top: 18.2%;
		font-size: 2.2em;
	}
	/*  */

	body #header .interieur .menuprincipal .nav-collapse ul > li { padding: 0; }

	/*  */

  .formulaire_pied .formulaire_spip form .saisie_case { margin-left: 9%; }
  #footer {
  	#pied {
  		margin-top: 0;
  		padding: 3.4em 0 1.5em;
	 		#adresse .telephone { font-size: 1.2em; }
  	}
  	.grotit {
  		margin-top: 1.4em;
  		font-size: 2em;
  	}
		#navpied li, .menu-liste li { margin-top: 0em;}
  }

	/*  */
	.liste-grille .item {
		height: 11em;
		.tit{ font-size: 1.3em; }
	}

#bicolonnes .asidedroite {
	.alaune, #alaune {
		.liste-items .item {
			.legende {
			  padding: .2em 3%;
				.tit, .desc {
				  max-width: 97%;
				  left: 1.5%;
				  padding-left: .4em;
				  padding-right: .4em;
				}
			  .desc {
			    font-size: 0.9em;
				  line-height: 1.6em;
				  width: 98%;
			  }
			  .tit {
			    font-size: 1.1em;
			    line-height: 1.4em;
			  }
			}
			&:hover {
				.desc {
					height: 63px;
				  padding: 0.4em 1%;
				}
			  .tit { 			bottom: 73px; }
			}
		}
	}
}



}

// ======== MENU EN 2 LIGNES  =========
// :::::::::::::::: 480 px -> 1147 px :::::::::::::::::
@media screen and (min-width: @screen-xs ) and (max-width: 1147px )  {
	body .page #header .interieur #nav.menuprincipal .nav-collapse > ul li:hover {
		a { padding-bottom: 2px; }
		.ssmenu { display: none; }
	}
}

// ======== TABLETTES DEBOUT  =========
// :::::::::::::::: 768 px -> 992 px :::::::::::::::::
@media screen and (min-width: @screen-sm ) and (max-width: @screen-sm-max) {
	.titsenateur 		{ font-size: 2.1em; }
	.titpage 					{ margin-top: calc(~"22% + 68px") ; }
	body .page #header .interieur #nav.menuprincipal .nav-collapse > ul {
		& > li > a:hover { padding-bottom: 0; }
		li:hover .ssmenu { display: none; }
	}
	.titsenateur{
		margin-top: calc(~'7.3% + 122px');
		right: 25px;
	}

	.titpage {
		margin: calc(~"16% + 68px") 0 0 30%;
		width: 70%;
		padding: 0 3% 0.6em;
		float: right;
		display: block;
	}

  .site-eric .page_interieure #wrapper {
    background-position: calc(~"50% - 250px") 0.4em, center -6.8em, center -0.6em;
    background-size: 273px,2005px,2005px;
  }
  .site-michelle .page_interieure #wrapper {
    background-position: calc(~"50% - 250px") 0.4em, center -6.8em, center -0.6em;
    background-size: 243px,2005px,2005px;
  }


}

// ======== TABLETTES =========
// :::::::::::::::: 768 px -> 1280 px :::::::::::::::::
@media screen and (min-width: @screen-sm ) and (max-width: @screen-md-max)  {

	/*  */
	.site-eric #wrapper{
		background-size: 395px, @bgsize-eric;
		background-position: calc(~"50% - 160px") @bgposy-eric, @bgpos-eric, @bgpos-eric;
	}

	.site-michelle #wrapper {
		background-size: 355px, @bgsize-michelle;
		background-position: calc(~"50% - 160px") @bgposy-michelle, @bgpos-michelle, @bgpos-michelle;
	}

	/*  */
	body #header .interieur .menuprincipal .nav-collapse {
		width: calc(~"100vw - 1.2em - 320px");
		ul > li {
			&>a, &>span {
				margin: 0 0.6em;
				font-size: 1.25em;
			}
			&.active a { padding-bottom: .2em; }
		}
	}
  #bicolonnes .asidedroite {
		#alaune .liste-items .item {
			.tit 			{ font-size: 1em; }
			.desc 	{ font-size: @bgposy-eric; }
			&:hover {
				.desc 	{ height: 100px; }
				.tit 			{ bottom: 107px; }
			}
		}
  }
}

// ======== TABLETTES PAYSAGE =========
@media screen and (min-width: @screen-md ) and (max-width: @screen-md-max) {
	body .page #header .interieur .titsite {
		padding: 27px 0 0 12px;
		margin: 0 10px 0 0;
		&:after { border-top-left-radius: 0 ; }
	}
	.titsenateur{
		margin-top: calc(~'7.3% + 78px');
		right: 25px;
	}
	// bcp moins de place sur la col de droite dans cette résolution, dont on diminue le typos
	.bicolonnes .asidedroite {
		.liste-items .date { font-size: 0.63em; }
		.alaune .item {
			.tit 			{
				font-size: .9em;
				line-height: 1.4em;
			}
			.desc 	{ font-size: .7em; }
		}
	}
}

// ======== TABLETTES PAYSAGE + PETITS ECRANS (16:9) =========
@media screen and (min-width: @screen-md ) and (max-width: @screen-lg-max)  {
	.site-eric #wrapper{
		background-size: 395px, @bgsize-eric;
		background-position: calc(~"50% - 280px") @bgposy-eric, @bgpos-eric, @bgpos-eric;
	}

	.site-michelle #wrapper {
		background-size: 395px, @bgsize-michelle;
		background-position: calc(~"50% - 280px") @bgposy-michelle, @bgpos-michelle, @bgpos-michelle;
	}
	.titpage{
		// margin-top: calc(~'7.3% + 1.45em');
		// font-size: 2.3em;
	}
	.page_type_contenu #bicolonnes .colgauche .liste-doc .coldroite {padding-bottom: 0.5em; }
}

@media screen and (min-width: @screen-md ) and (max-width: 1147px)  {
	//  Adaptation en fonction de la taille du menu
	body #header .interieur .menuprincipal .nav-collapse ul > li { padding: 0; }
}
// ======== PETITS ECRANS ( 4:3 et 16:9 ) =========
@media screen and (min-width: @screen-lg ) and (max-width: @screen-lg-max)  {
	.site-eric #wrapper{
		background-size: 407px, @bgsize-eric;
		background-position: calc(~"50% - 390px") @bgposy-eric, @bgpos-eric, @bgpos-eric;
	}

	.site-michelle #wrapper {
		background-size: 367px, @bgsize-michelle;
		background-position: calc(~"50% - 400px") @bgposy-michelle, @bgpos-michelle, @bgpos-michelle;
	}
	.titsenateur 																													{ margin-top: calc(~'7.3% + 60px'); }
	#footer #pied 																											{ margin-top: 0;}
	.bicolonnes .asidedroite .alaune .item .legende 	{ height: 15.2em; }
}

@media screen and (min-width: @screen-xl )  {
	.bicolonnes .asidedroite .alaune .item:hover {
		.desc 	{ height: 132px; }
		.tit 			{ bottom: 142px; }
	}
}

@media screen and (min-width: @screen-md )  {
	html .page_type_liste , html.page_sommaire {
		.bicolonnes .colgauche .item-art .row {
			.cnt {
				margin-bottom: 2.2em;
				min-height: 9.1em;
			}
		}
	}
}