/* #PRODUIRE{fond=css/spip.css}
   md5:9675cc72b96896bbdfd6d9287d8db346 */
/*  */

// 
// 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://c-real.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://c-real.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://c-real.fr/squ/sites/c-real.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://c-real.fr/@{image}'); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor @debut), to(@endColor @fin), url('https://c-real.fr/@{image}')); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, @startColor @debut, @endColor @fin), url('https://c-real.fr/@{image}'); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, @startColor @debut, @endColor @fin), url('https://c-real.fr/@{image}'); // Opera 11.10
  background-image: linear-gradient(to right, @startColor @debut, @endColor @fin), url('https://c-real.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, 20%);   // #333
@gris:                  	 	lighten(@gris-base, 33.5%); // #555
@gris-light:          		lighten(@gris-base, 46.7%); // #777
@gris-lighter:       	 	lighten(@gris-base, 90.9%); // #e8e8e8
@gris-extralighter:  	lighten(@gris-base, 95%); // #e8e8e8

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

@bleu:                							#00969c;
@bleuLight:        							#7fc3ea;
@bleuDark:        							#044769;
@vert:           										#6fbd47;
@vertLight:           						#cbda42;
@rouge:                						#ec1e24;
@rougeLight:      							lighten(@rouge, 15%);
@rougeDark:      							darken(@rouge, 15%);
@jaune:          									#f0b214;
@orange:            							#ff3c00;;
@orangeLighter:   						#ed9140;
@orangeLight:     						#d2791d;
@orangeDark:    							#DE3700;
@rose:                							#c3325f;
@violet:            								#7C57A2;
@turquoise: 										#00BEDF;

@bleu_fb:													#5267AA;
@bleu_tw:												#26BBED;

@couleur-defaut : 					@orange;
@couleur-defautLight: 	lighten(@couleur-defaut, 15%);
@couleur-defautDark: 		darken(@couleur-defaut, 15%);

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

// Links
@linkColor:                   @bleuDark;
@linkColorHover:          @bleu;

// 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:     @linkColorHover;
@link-hover-decoration: none;

// ===  Typography ===

@sansFontFamily: 			   	'Baloo Chettan 2', Verdana, sans-serif;
@labeur: 												@sansFontFamily;
@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;

// Utilisé pour les boutons
@padding-base-vertical:   		0.4em;
@padding-base-horizontal:  .8em;

@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:         						60px;
@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 )
@screen-sm:                  	768px;
@screen-sm-min:            	@screen-sm;
@screen-xs-max:            	(@screen-sm-min - 1);
@screen-tablet:              	@screen-sm-min;

// Medium screen - 992 max
@screen-md:                  	992px;
@screen-md-min:            	@screen-md;
@screen-sm-max:           	(@screen-md-min - 1);
@screen-desktop:           	@screen-md-min;

// Large - 1280px max
@screen-lg:                  		1280px;
@screen-lg-min:              	@screen-lg;
@screen-md-max:           	(@screen-lg-min - 1);
@screen-lg-desktop:       	@screen-lg-min;

// Extra Large - 1366px max
@screen-xl:                  		1366px;
@screen-xl-min:              	@screen-xl;
@screen-lg-max:           		(@screen-xl-min - 1);
@screen-xl-desktop:       	@screen-xl-min;

// So media queries don't overlap when required, provide a maximum

// 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;

// ============================= MENU =============================

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

// Ajout Laurent
@navbarsupHeight:                    			45px;

// ------ 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;


// 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:       				transparent;
@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:     					transparent;
@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:           	 			@vert;
@label-jaune-bg:               	@jaune;
@label-orange-bg:            	@orange;
@label-rouge-bg:             	@rouge;
@label-bleu-bg:             			@bleu;
@label-violet-bg:             		@violet;
@label-rose-bg:             			@rose;
@label-turquoise-bg:         	@turquoise;
@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://c-real.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff2') format('woff2'),
//        		url('https://c-real.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff') format('woff');
// }
@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url('https://c-real.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff2?7141511ac37f13e1a387fb9fc6646256') format("woff2"),
url('https://c-real.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://c-real.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://c-real.fr/squ/squelettes/ergo/svg/paiement/cheque.svg'); 		}
			&.virement {			background-image: url('https://c-real.fr/squ/squelettes/ergo/svg/paiement/virement.svg'); 		}
			&.internetplus { background-image: url('https://c-real.fr/squ/squelettes/ergo/svg/paiement/internet.svg'); 		}
			&.paypal {					background-image: url('https://c-real.fr/squ/squelettes/ergo/svg/paiement/paypal.svg'); 		}
			&.cmcic, &.ogone, &.paybox, &.payzen, &.sips, &.sipsv2, &.stripe, &.systempay {
				background-image: url('https://c-real.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;
  }
}

body .alerte_urgence {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: @couleur-defaut;
	text-align: center;
	font-size: 18px;
	color: #fff;
	z-index: 999999;
	padding: 1em 0.7em 2em;
	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://c-real.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.eot');
  src: url('https://c-real.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('https://c-real.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('https://c-real.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('https://c-real.fr/squ/squelettes/css/bootstrapleger/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('https://c-real.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 {
		.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://c-real.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://c-real.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://c-real.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff2) format('woff2'),
       		url(https://c-real.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://c-real.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; }
}

/*  */
.spip_documents {
		&.spip_documents_right	 { margin: .2em 0 1.2em calc(~"8%"); }
		&.spip_documents_right, &.spip_documents_left	 { width: 42%; }
}}

/*  */

.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 {
	.chapo 					{margin-bottom: 2em; }
	.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 -------------- */

// Ceci a été déplacé dans mobile.css
// .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://c-real.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;}

// 
//

//// 
@charset "utf-8";
/* CSS Document */

// ------ Couleurs ------

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

@gris-base:         	 		#000;
@gris-darker:       		lighten(@gris-base, 13.5%); // #222
@gris-dark:          	 	lighten(@gris-base, 20%);   // #333
@gris:                  	 	lighten(@gris-base, 33.5%); // #555
@gris-light:          		lighten(@gris-base, 46.7%); // #777
@gris-lighter:       	 	lighten(@gris-base, 90.9%); // #e8e8e8
@gris-extralighter:  	lighten(@gris-base, 95%); // #e8e8e8

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

@bleu:                							#00969c;
@bleuLight:        							#7fc3ea;
@bleuDark:        							#044769;
@vert:           										#6fbd47;
@vertLight:           						#cbda42;
@rouge:                						#ec1e24;
@rougeLight:      							lighten(@rouge, 15%);
@rougeDark:      							darken(@rouge, 15%);
@jaune:          									#f0b214;
@orange:            							#ff3c00;;
@orangeLighter:   						#ed9140;
@orangeLight:     						#d2791d;
@orangeDark:    							#DE3700;
@rose:                							#c3325f;
@violet:            								#7C57A2;
@turquoise: 										#00BEDF;

@bleu_fb:													#5267AA;
@bleu_tw:												#26BBED;

@couleur-defaut : 					@orange;
@couleur-defautLight: 	lighten(@couleur-defaut, 15%);
@couleur-defautDark: 		darken(@couleur-defaut, 15%);

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

// Links
@linkColor:                   @bleuDark;
@linkColorHover:          @bleu;

// 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:     @linkColorHover;
@link-hover-decoration: none;

// ===  Typography ===

@sansFontFamily: 			   	'Baloo Chettan 2', Verdana, sans-serif;
@labeur: 												@sansFontFamily;
@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;

// Utilisé pour les boutons
@padding-base-vertical:   		0.4em;
@padding-base-horizontal:  .8em;

@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:         						60px;
@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 )
@screen-sm:                  	768px;
@screen-sm-min:            	@screen-sm;
@screen-xs-max:            	(@screen-sm-min - 1);
@screen-tablet:              	@screen-sm-min;

// Medium screen - 992 max
@screen-md:                  	992px;
@screen-md-min:            	@screen-md;
@screen-sm-max:           	(@screen-md-min - 1);
@screen-desktop:           	@screen-md-min;

// Large - 1280px max
@screen-lg:                  		1280px;
@screen-lg-min:              	@screen-lg;
@screen-md-max:           	(@screen-lg-min - 1);
@screen-lg-desktop:       	@screen-lg-min;

// Extra Large - 1366px max
@screen-xl:                  		1366px;
@screen-xl-min:              	@screen-xl;
@screen-lg-max:           		(@screen-xl-min - 1);
@screen-xl-desktop:       	@screen-xl-min;

// So media queries don't overlap when required, provide a maximum

// 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;

// ============================= MENU =============================

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

// Ajout Laurent
@navbarsupHeight:                    			45px;

// ------ 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;


// 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:       				transparent;
@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:     					transparent;
@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:           	 			@vert;
@label-jaune-bg:               	@jaune;
@label-orange-bg:            	@orange;
@label-rouge-bg:             	@rouge;
@label-bleu-bg:             			@bleu;
@label-violet-bg:             		@violet;
@label-rose-bg:             			@rose;
@label-turquoise-bg:         	@turquoise;
@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;.article { /* --------- mixins --------- */

@font-face {
	font-display: block;
  font-family: 'bootstrap-icons';
  src: 	url(https://c-real.fr/squ/squelettes/css/bootstrapleger/fonts/bootstrap-icons.woff2) format('woff2'),
       		url(https://c-real.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://c-real.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; }
}

/*  */
.spip_documents {
		&.spip_documents_right	 { margin: .2em 0 1.2em calc(~"8%"); }
		&.spip_documents_right, &.spip_documents_left	 { width: 42%; }
} }

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2:400,500,600,700,800&display=swap&subset=latin-ext');
body {
	background-color: #fff;
	font-family: @labeur, sans-serif;
}

/* ------ Mixins ------ */

.typoetroite {
	transform: scaleX(97%);
	transform-origin: left;
}

.btn {
	background: @couleur-defaut;
	padding: 0.2em 0.6em 0.3em;
	color: #fff;
	display: inline-block;
	margin: 1.3em 0.7em 0 0;
	font-weight: 400;
	font-size: .9em;
	transition: all 1s;
	&:hover {
		background: darken(@couleur-defaut, 30%);
	}
}

/* ------ Couleur ------ */

@orange: 		#ef4036;
@rouge: 		#BE1E2D;
@grischaud: 	#645c59;

body 										{ font-family: @labeur, sans-serif;  }
*::selection 					{
	background-color: @couleur-defaut;
	color: #fff;
}
p 													{ margin-top: 0; }
.tal 											{ text-align: left; }
.logo .spip_logos 	{ float: none;}
.tac {
	width: 100%;
	text-align: center;
}

#header {
	background-image: linear-gradient(to right, #bc3605, #d9450f);
	text-align: center;
	a:hover {	background: transparent;}
	.suite{
    position: absolute;
    margin-left: -30px;
    padding-top: .7em;
		img { width: 44px; }
	}
	h1 {
		text-align:center;
		margin: 0px 6px 40px 0px;
	}
	&:after {
		background:
			url('https://c-real.fr/squ/sites/c-real.fr/ergo/brume.png') no-repeat scroll -10px bottom ,
			url('https://c-real.fr/squ/sites/c-real.fr/ergo/bg.jpg') no-repeat scroll 0 66% ;
		background-size: 101vw auto;
  	opacity: 1;
		bottom: 0;
		content: "";
		display: block;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
	 }
	 .container {
			position: relative;
		  z-index: 100;
		  .lead { color:#fff; }
	 }
}
.page_sommaire #header {
	padding: 23vh 0 0;
	height: 99vh;
}
#qsn { outline: none; }
#baseline {
	font-size: 22px;
	font-style: italic;
	margin-top: 40px;
}

/* Généralités */

.page 					{    background-color: #fff;}
.contenu 	{    min-height: 0;}

#lienemail {
	color: #555;
	line-height:30px;
	&:hover {
		color:#ea5131;
		font-style:italic;
		background: #fff;
	}
}

.intro {
	font-size: 1.3em;
	.btn {
		display: inline-table;
	}
	.suite {
		display: block;
		margin: 1em;
		img{
			width: 1.3em;
			border-radius: 50%;
		}
		&:hover{
			background: transparent;
			img{ background: #fff4ec; }
		}
	}
}

#titcontact {
    color: #ea5131;
    font-size: 1.6em;
    line-height: 1.2em;
    margin-bottom: 0;
}

.gtit{
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	margin: 5vw 0 4.54vw;
	padding-top: 2.3vw;
	font-family: @labeur, sans-serif;
	font-size: 2.3em;
	.gris{
		display: block;
		font-weight: bold;
		&:after{
			content: " ";
			display: block;
			width: 82px;
			height: 1px;
			background: @gris;
			margin: 5px auto;
			overflow: hidden;
		}
	}
	.stit-orange{
		display: block;
		font-weight: 400;
		color:@orange;
	}
}

h2.tit {
	text-align:center;
	color:@couleur-defaut;
	font-family: @labeur, sans-serif;
	font-size: 3em;
	margin-top: 1em;
	margin-left: 6em;
	margin-right: 6em;
	width: 100%;
	font-weight: 400;
}

a.llsrub{
	color: @orange;
	margin-top: 4em;
	margin-bottom: 3em;
	display: block;
	overflow: hidden;
	&:hover{
		color:@orange;
		background: transparent;
	}
}

/* Boutons */

.btn-default{
	border-color: @orange;
	color: @orange;
	transition: all .5s ease-out;
	&:hover{
		background-color: lighten(@orange, 5%);
		border-color: @orange;
	}
}

.btnproduit{
	text-transform: uppercase;
	text-align: center;
	border: 1px solid #bbb;
	border-radius: 11px;
	padding: 2em 0em 2em;
	margin: 1%;
	width: 23%;
	transition: all .5s ease-out;
	.logo{
		transform-origin: 50% 50%;
		transition: all 1s ease-out ;
		position: relative;
		width: 100%;
		height: 9em;
		img {
			transition: all 1s ease-out;
			position: absolute;
			&.brouillon {
				top: 1.5em;
				left: 24%;
			}
			&.fini {
				top: 1em;
				left: 35%;
			}
			&.outil {
				top: 2.4em;
				left: 43%;
			}
		}
	}
	.noir, .stit-orange {font-size: 1.4em; }
	.stit-orange  { color: @orange; }
	.noir{
		margin-top: 1em;
		font-weight: 700;
	}
	.stit-orange	{margin-top: .2em; }
	span		{ display: block; }
	&:hover{
		background: transparent;
		border-color: transparent;
		.logo {
			transform: scale(1.3);
			text-transform: uppercase;
		}
	}
	&:focus {background: transparent;}
}

/* ------ MENU ------ */

#nav {
	background: #0004;
	z-index: 1111111;
	&:after {
		content: "";
		display: block;
		overflow: hidden;
		background: linear-gradient(to right,transparent, transparent, white, transparent,transparent);
		height: 1px;
		position: absolute;
		bottom: -2px;
		width: 100%;
	}
	.navbar-nav {
		padding-left: 0;
		display: flex;
		justify-content: center;
		.item {
			padding: 0 1em;
			text-align: center;
			font-size: 0.9em;
			text-transform: uppercase;
			list-style: none;
			a:hover {
				background: transparent;
				color: @orange;
			}
		}
	}
	&.affix {
		background-color: #fff;
		box-shadow: 0 7px 15px #0005;
		.navbar-nav .item a {
			color: #555;
			&:focus, &:focus-within, &:active, &:hover {
			 color: @orange;
			 background-color: transparent;
			}
		}
	}
}

/* ------ ACCUEIL ------ */


.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{
			&:hover .legende .desc 	{ height: 9em; }
		}
		#agenda 				{margin-top: 4.6em; }
		#reste 						{margin-top: 1.5em; }
	}
	#footer, .footer {
		#pied 	{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 (max-width: @screen-lg-max) {
}

@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; }
	}
}

@media screen and (min-width: @screen-md)  {
	#header, .nav-collapse {ul li:hover ul { display: block;} }
	/*  */
	.page_videos{
		.liste-videos .tit {	min-height: 4.4em; }
	}
	.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%; }
	}
  #footer, .footer {
  	#pied #infolettre .text 	{ text-align: center; }
  	.grotit {
  		margin-top: 1.4em;
  		font-size: 2em;
  	}
  }


	/*  */

	.page_site body {
		#myCarousel.apercu {
			margin: 5%;
			width: 90%;
			overflow: hidden;
			a {
				padding: 1em;
			}
		}
	}

}

@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;
	}
	.content .margesup { width: 94vw; }
	.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;
		margin: 0;
		.carreblanc {padding: 1em 1em 0; }
	}

	/*  */

	.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; }
	.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; }
	}

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

	/*  */

	/*  */

	// body {
	// 	.chemin {
	// 		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%;
	// 		}
	// 	}
	// }

	.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://c-real.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;
		  img {
				margin: 16px auto 10px;
				max-width: 45%;
			}
		}

		.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; }
	 	}

	}

	/*  */

	.page_sommaire .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, .btn 	{ display: none; }
				}
			}
			.owl-nav{ display: none;}
		}

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

	}

	/*  */

	.contenu #coldroite .grotit, .contenu .asidedroite .grotit { text-align: center; }

	// .page .content {
	// 	margin-top: 3.2em;
	// 	.contenu {
	// 		padding-top: 0.5em;
	// 		.chemin {
	// 			font-size: 1.2em;
	// 			line-height: 100%;
	// 			width: 100%;
	// 		}
	// 		.bloctit, #intro, .intro {
	// 			margin-top: 0;
	// 			margin-bottom: 1.1em;
	// 			.grotit{
	// 				font-size: 2.2em;
	// 				margin-top: .2em;
	// 			}
	// 		}
	// 		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; }
	// 		#lireaussi .liste-items .item {
	// 			margin-bottom: 2em;
	// 			padding-bottom: 0.7em;
	// 		}
	// 	}
	// }

	/*  */

	body .content .contenu.page_type_liste {

		.laliste {
			select {
				height: 2.1em;
				width: 50vw;
			}
		}

		#laliste, .laliste {
			 .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; }
			}
		}

		#bicolonnes {
			// #intro, .intro {
			// 	.grotit 	{ margin: 0.6em 0;}
			// 	.chapo 	{ margin-bottom: 0.2em; }
			// }
			#laliste, .laliste { .grotit{ .mobile_intertitre(); } }
			.liste-items {
				.item {
					.surtit{
						line-height: 123%;
						font-size: .5em;
					}
				 .tit {
						width: 100%;
						float: none;
						margin-bottom: 0.4em;
					}
					.cnt { overflow: hidden; }
					.date-pub, .date-modif { font-size: .9em; }
					.boutons {
						bottom: inherit;
						top: 144px;
						.btn { margin: 0 0 0.6em; }
						.addthis_toolbox {
							width: 100%;
							.btn {
								margin-bottom: .8em;
								&:last-of-type{ margin-bottom: .2em;  }
							}
						}
					}
					.entourelogo{
						min-height: 130px;
						.spip_logo {
							height: 130px;
							margin-left: -30%;
					    width: auto;
						}
					}
				}
				.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; }
				#pubcarre {
					padding-bottom: 0;
					.item {
						margin: 0 auto 1em;
						border: 0;
					}
				}
			}
		}
	}

	/*  */

	.page_recherche .content .contenu.page_type_liste #bicolonnes{
		#intro .grotit {
			margin: 0;
			font-size: 2em;
		}
 		#laliste, .laliste {
	 		 .grotit {
				font-size: 1.5em;
				border-bottom: 3px solid @couleur-defaut;
				font-weight: 500;
				margin-bottom: .9em;
	 		}
	 	}
	}

	/*  */

	/*  */

	.page_auteur body {
		#contenu {
			h4.spip {font-size: 1.3em;}
			.btn {font-size: 1em; }
		}
	}

	.depliantbas { display:none;}

	/*  */

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

	body #contenu .grosboutons {
		width: auto;
		.grosbouton {
	    min-height: calc(~"45vw + 20px");
	    margin-bottom: 1em;
	    font-size: 15px;
    	.ico, svg { top: 2em; }
    	.legende .titit {
	    	font-size: 1.1em;
				margin: .2em 0.5em;
			}
  	}
	}

	.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;
				}

				.offre_prix{ 	margin-left: -40vw; }
				.offre_prix{ 	margin-top: -1px; }
			}


			.offre_paiement{
				padding: 0.6em .1em 0.2em;
				display: block;
				overflow: hidden;
				width: 90vw;
				position: relative;
				left: -40vw;
				top: 0.7em;
				ul {
					margin-top: 0.3em;
					padding-left: 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;
				}

			}

		}
	}

	/*  */

	body .spip-admin-float {
    bottom: 61px ;
    left: 2vw ;
		top: inherit;
		.spip-admin-boutons{ border-radius: 0; }
	}

	.addthis_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-next, .owl-prev { width: 55px; }
	}
}

@media screen and (min-width: @screen-xs) {
	.contenu {
		.formulaire_spip { padding-bottom: 1.5em; }
		.formulaire_newsletter_subscribe3 {
			background-color: @couleur-defaut ;
			form {
				overflow: hidden;
				& > div {							.make-row(30px); }
				.editer-groupe {
					.make-xs-column(10);
					.editer { margin-bottom: 0; }
				}
				.boutons {
					.make-xs-column(2);
					width: 21.66%;
					padding: 0 20px 0 10px;
					.submit {
						width: 100%;
					}
				}
			}
		}
	}

	// Egaliser les items dans du multicolonne
  .page_type_liste .item-produit {
  	.tit {min-height: 3.8em;}
  }

}

@media screen and (min-width: 992px) {

	#sites, #video, .liste-sites{
		.item {
	    padding: 0;
	    margin-top: 8em;
	    margin-bottom: 6em;
	    transition: .5s;
	    &:hover{
	    	margin-top: 6em;
	    	margin-bottom: 8em;
	    }
		}
		.desctit {
		    position: absolute;
		    top: 0;
		    left:0;
		    background: #fff;
		    height: 5em;
		    overflow: hidden;
		    width: 100%;
		}
		h3.spip {
			padding: 0 1vw;
			width: 98%;
			a {
				height: 60px;
			}
			.bloc {
				line-height: 113%;
				color: #000;
			}
		}
		.cnt { display: none; }
	}

	/* ------ LISTES ------ */

	.liste-grille .mix {

		.item{

			.itemlogo {
				display: block;
				overflow: hidden;
				height: 68%;
				transition-property: all;
				.tmp_lazy {
					transition-duration: .5s;
					position:relative;
					top: -0.1px; }
			}
			.cnt {padding: 19px 27px; }
			h3 {
				transition-property: all;
				.bloc { padding: 0 8%; }
			}

			&:hover {
				transition-property: background,height, margin-top;
				position:absolute;
				z-index:2000;
				height: 702px;
				top:0;
				left:0;
				margin-left: 30px;
				margin-right: 30px;
				h3.spip 								{ margin-bottom: 0; }
				.liendirect:hover 	{ text-decoration:underline; }
				a, p, h3,div 					{ background: transparent; }
				.itemlogo {
					height: 0;
					.tmp_lazy { top: -60px; }
				}
				h3 {
					.bloc {
						margin-top: .3em;
						font-size: 1.2em;
						line-height: 1.1em;
						color: #222;
						font-weight: 500;
					}
					.label {font-size: 66%; }
				}
				.cnt {
					font-size: 1.3em;
					line-height: 1.45em;
				}

			}
		}
	}

	.liste-strate {
		.item {
			padding-bottom: 2.6em;
			.make-row;
			.itemlogo {		.make-sm-column(4); }
			.desctit { 			.make-sm-column(8); }
		}
		div:nth-of-type(odd) .item {
			display: flex;
			flex-direction: row-reverse;
		}
	}

	.liste-grille .col-sm-3 .item {
		height: 297px;
		&:hover { height: 660px; }
	}

	//  ---- Pages intérieure  ----

	html:not(.page_prepa_sommaire) .page_interieure #header {
	    padding: 2.8em 0 0.1em;
	}

	//  ---- Pages type liste ----

	.page_type_liste {

		.chapo {
			.col-sm-12 {
				margin-left: auto;
				margin-right: auto;
				width: 75%;
			}
			&.surlignable strong {padding-bottom: 0.3em; }
			p { margin-bottom: 1.2em; }
		}

		//  Gros Intertitres

		.entouretit {
			border-bottom: 1px solid @gris-lighter;
			position: relative;
			margin-top: 5em;
			margin-bottom: 3em;
			h2.grotit {
				position: absolute;
				bottom: -1.7em;
				font-size: 1.5em;
				left: 50%;
				transform: translate(-50%);
			}
		}

		.liste-items 														{
			min-width: 100%;
		}

		.article .liste-items h3.spip a 	{ padding: .5em 1em 1em; }
	}

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

	.page_mot {
		.chapo {
			margin-top: 0;
			.col-sm-12 { width: 85%; }
		}
		.mix.col-sm-3 .item:hover {height: 570px; }
	}

}

@media screen and (min-width: 1366px) {
	.liste-grille .mix {
		.item:hover {
			height: 784px;
		}
		&:nth-last-of-type(1), &:nth-last-of-type(2), &:nth-last-of-type(3) {
			.item:hover { margin-top: -372px; }
		}
	}
	.page_mot	.mix.col-sm-3 .item  {
		.itemlogo { height: 58%; }
		&:hover {
			height: 654px;
			.itemlogo { height: 0; }
		}
	}
	.owl-next, .owl-prev 			{ margin: 3.6em 0; }
}
@media screen and (min-width: 1600px) {
	#header { padding: 8.6em 0; }
}
@media screen and (min-width: 1900px) {
	#header 	{ padding: 11.3em 0; }
}


@media screen and (max-width: @screen-lg-max) {
	.mix .item:hover { min-width: inherit; }
}

@media screen and (max-width: 1280px) {
	#header { padding: 5.6em 0; }
}

@media screen and (max-width: 768px) {

	body { padding: 0; }
	/*
		sur smartphone, un phrase peut vite prendre plusieur ligne,
		et un simple retour à la ligne devra être intervprété comme un saut de paragraphe.
	*/
	.manualbr {
		line-height: 190%;
		vertical-align: top;
	}
	.lead {
		line-height: 138%;
		margin-top: 1em;
		.dbfleches {
			content: url('');
			width: 15px;
			display: block;
			text-align: center;
			margin: .9em auto 0;
		}
	}
	.page_sommaire .container > .row {
		margin-right: 0;
		margin-left: 0;
		width: 100%;
	}
	.liste-items {
		min-width: 100%;
		.item {
			margin-bottom: 0;
			height: auto;
			padding-bottom: 20px;
		}
		h3.spip a { padding: 0 1vw 5px; }
	}
	#header { padding: 11.6em 0; }
	.btnproduit{
		padding: 2em 0em 2em;
		margin: 1%;
		width: 48%;
	}
	#qfn { padding-bottom: 20vw; }
	#sites { padding-top: 6vw; }
	#sites, #graph, #video, #propa {

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

	#nav { display: none; }
	#header { padding: 1.3em 0; }
	.page_sommaire {
		text-align: center;
		#header {
			margin-bottom: 4vw;
			height: 90vh;
			padding: 0;
			.container {
				padding-left: 5vw;
				padding-right: 5vw;
				margin: 9vh 0;
				width: 100%;
			}
			&::after { background-size: 103% ,cover; }
		}
	}

	/* ---- Accueil ---- */

	.btnproduit{
		padding: 2em 0em 2em;
		margin: 1%;
		width: 98%;
	}

	html {
		#sites, #video {
			.item {
		    height: 110vw;
		    padding-top: 115px;
		    margin-top: 0;
		  }
		  .descriptif {
		  	margin: 0.9em 5% 4em;
				line-height: 138%;
		  }
		  h3.spip {
		  	a 				{	margin: 0; }
		  	.bloc 	{ 	font-size: 1em; }
		  }
		  .desctit.adroite {
		  	padding: 0 5vw;
		  	background-color: transparent;
		  }
		  .owl-theme .owl-nav {
		  	.owl-next, .owl-prev {
					top: 40vw;
					font-size: 3.5em;
					height: 45px;
		  	}
		  }
	  	.carousel { margin-bottom:  4em; }
	  }
	  a.llsrub { width: 100%; }
  }

  .owl-carousel {
  	overflow: visible;
  	.owl-stage-outer { overflow: visible; }
  	.owl-dots { display: none; }
  }

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

	.liste-grille h3.spip a {
		font-size: 26px;
    padding-top: 10px;
	}
	.liste-items {
		.lls, .liendirect {
			.btn;
			display: table;
			margin-left: auto;
			margin-right: auto;
			font-size: 1.1em;
		}
		.liendirect {margin-left: 15px; }
	}

	/* ---- Page interieure ---- */

	html:not(.page_prepa_sommaire) .page_interieure .content .contenu {
		h2.tit, .grotit {
			margin-top: 0;
			font-size: 2.3em;
			margin-bottom: 0.4em;
			line-height: 100%;
		}
	}

	/* ---- Page type_contenu ---- */

	.apercu { padding: .1em 0; }
	.page_type_contenu .apercu .tit {
		border-width: 5px;
		padding: 0;
	}

	/* ---- Page type liste ---- */

	.page_type_liste .contenu .texte {
	 width: auto;
	 line-height: 1.37em;
	 p { margin-top: 0; }
	}

	.controls .control { margin-bottom: 0.8em; }
}

@media screen and (max-width: 519px) {
	.owl-nav {
    margin: 0px;
    display: none;
    .owl-next, .owl-prev {
      width: 10px;
      margin-top: -15px;
			top: 30%;
    }
		.owl-prev { left: -24px; }
		.owl-next { right: -24px; }
	}
}

@media screen and (min-width: 386px) {
	.owl-nav {
		.owl-next, .owl-prev { width: 55px; }
	}
	// Pour éviter le double scenceur au survol
	html:not(.page_prepa_sommaire) .page_interieure { overflow: visible; }
}

@media screen and (max-width: 360px) {
	#header { padding: 2em 0; }
}


@media screen and (min-width: @screen-md) and (max-width: @screen-md-max) {
	.owl-next, .owl-prev { margin: 2.8em 0; }
	.liste-items .item {height: 284px;}
}
@media screen and (min-width: 1280px) and (max-width: 1366px) {
	.liste-grille .mix .item .itemlogo { height: 63%; }
}.page_sommaire {
	.gtit {padding-top: 4.3vw; }
	.intro {
		padding: 3em 0;
		text-align: center;
		line-height: 1.5;
		margin-bottom: 50px;
	}
}

#qfn{
	background-image: url('https://c-real.fr/squ/sites/c-real.fr/ergo/papier.jpg');
	background-repeat: no-repeat;
	background-position: 0 bottom ;
	background-size: 100%;
	padding-bottom:  20em;
	.btnproduit{
		text-transform: uppercase;
		text-align: center;
		&.dev {
			.brouillon{
				top: 1.6em;
				left: 24%;
			}
			.fini {
				top: .8em;
				left: 35%;
			}
			.outil {
				top: 3.2em;
				left: 47%;
			}
		}
		&.graph {
			.brouillon{	top: .9em; }
			.fini {		top: 0; }
			.fini2 {
			    top: 1.6em;
			    left: 32%;
			}
			.outil {
				top: 1.2em;
				left: 52%;
			}
		}
		&.video {
			.brouillon{
				top: 1.3em;
				left: 17%;
			}
			.fini {
				top: .8em;
				left: 33%;
			}
			.outil {
				left: 44%;
				top: 2.8em;
				transform: rotate(-8deg);
			}
			.outil2 {
				top: 1.6em;
				left: 58%;
			}
		}
		&.propa {
			.brouillon{
				top: 1.2em;
				left: 20%;
			}
			.fini {
				top: .8em;
				left: 38%;
			}
			.fini2 {
				top: 1.8em;
				left: 32%;
			}
			.outil {
				top: 1.2em;
				left: 58%;
			}
		}

		&.dev:hover {
			.brouillon {	transform: rotate(0deg) translate(-8%,0); }
			.fini {		transform: rotate(0deg) translate(0) ; }
			.outil {		transform: rotate(0deg) translate(4%, -9%) scale(1.1); }
		}
		&.graph:hover {
			.brouillon{	transform: rotate(-10deg) translate(-10%,0); }
			.fini {		transform: rotate(0deg) translate(0); }
			.fini2 {		transform: rotate(-5deg) translate(-2%,4%); }
			.outil {		transform: rotate(8deg) translate(5%, -6%) scale(1.2); }
		}
		&.video:hover {
			.brouillon{	transform: rotate(0deg) translate(-7%, -3%); }
			.fini {		transform: rotate(0deg) translate(0); }
			.outil {		transform: rotate(0) translate(10%,0); }
			.outil2 {	transform: rotate(-13deg) translate(18%, -21%) scale(1.2); }
		}
		&.propa:hover {
			.brouillon{	transform: rotate(0) translate(-10%,0); }
			.fini {		transform: rotate(0deg) translate(0); }
			.fini2 {		transform: rotate(-5deg) translate(0); }
			.outil {		transform: rotate(6deg) translate(16%, -12%) scale(1.1); }
		}

	}
}

.owl-theme {
	.owl-item img {
		max-height: 80vh;
		width: auto;
		margin: 0 auto;
	}
	.owl-nav button{
		&.owl-prev, &.owl-next {
			position: absolute;
			top: 2.2em;
			opacity: .8;
			padding: 0.15em 0.23em 0.35em 0.2em;
			width: inherit;
			color: #fff;
			font-size: 4.5em;
			background-color: @orange;
			transition: .5s;
			&:hover{
				opacity: 1;
				background-color: @orange;
			}
		}
		&.owl-prev { left: 0; }
		&.owl-next {
			right: 0;
			padding: 0.15em 0.2em 0.35em 0.23em;
		}
	}
	.owl-dots {
		margin-top: 1em;
		width: 100%;
	}
}

.page_sommaire .owl-theme .owl-item img {
	max-height: none;
}

html {
	text-align: center;
	#sites, #graph, #video, #propa {
		text-align: center;
		clear: both;
		outline: none;
		.gtit		{ margin: 2vw 0 2.54vw; }
		.descriptif	{
			font-size: 1.2em;
			margin: 0 5% 4em;
			text-align: center;
			line-height: 150%;
		 }
		.carousel{
			margin: 0 3%;
			width: 94%;
			.item{
				overflow: hidden;
				img 	{
					width: 100%;
					height: auto;
				}
			}
		}
	}
	.contenu {
		#sites, #graph, #video, #propa {
			.carousel{
				margin: 0;
				width: 100%;
			}
		}
	}

	#sites, #video {
		.col-sm-6 .item { max-height: 25em }
		.item {
			height: 28vw;
	    padding: 0;
	    margin-top: 10em;
	    transition: .5s;
	    &:hover{ margin-top: 8em; }
		}
		.desctit {
		    position: absolute;
		    top: 0;
		    left:0;
		    background: #fff;
		    height: 8em;
		    overflow: hidden;
		    width: 100%;
		}
		h3.spip {
			padding: 0 1vw;
			width: 98%;
			.bloc {
				font-size: 1.4vw;
				line-height: 113%;
				color: #000;
			}
		}
		.owl-theme .owl-nav {
			.owl-prev, .owl-next {top: 17vw; }
		}

	}
	#graph{
		.descriptif {margin: 0 10% 0;}
	}

	 #footer {
	 		margin-top: 60px;
	 		padding: 60px;
	 }

		h2.tit {
			font-size: 1.9em;
			margin-bottom: .2em;
			margin-top: 0.2em;
		}
}

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

#content { margin-top: 22px; }
html .page_interieure {

	font-family: @labeur;

	#header{
		padding: 1.9em 0 0.1em;
		position: relative;
		 &:after{
				background-size: 110% 50px, 100% auto;
				background-position: 48% bottom , center;
	   }
		.spip_logo{width: 8%; }
	}

	.grosurtit {
		text-align: center;
		font-size: 1.9em;
		color: @orange;
		margin-bottom: -1em;
	}

	h1.grotit, h2.tit {
    color: @gris;
		font-weight: 500;
		font-style: normal;
		line-height: 1.2;
		text-align: center;
		text-transform: none;
		font-size: 3.1em;
		margin-top: .7em;
		&::after{
			display: block;
			height: 4px;
			overflow: hidden;
			width: 140px;
			background-color: @couleur-defaut;
			content: " ";
			text-align: center;
			margin: 20px auto;
		}
	}

	.chapo {
		font-size: 1.1em;
		margin-bottom: 4em;
		margin-top: 3em;
	}

	.texte {
		font-size:1.3em;
		font-family: @labeur;
	}

}

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

.contenu .breadcrumb {
    padding: 2px 0 5px;
    list-style: none;
    line-height: 30px;
    text-align: left;
    &>li, &>a {
    	float: left;
    	padding-right: 10px;
    	line-height: 30px;
    }
}
.chemin {
	margin-bottom: 4.1em;
	border-bottom: 1px solid #eee;
	padding-bottom: 0.4em;
}

.cartouche {
	overflow: hidden;
	width: 100%;
}
.cartouche .spip_logos, .hero-unit .spip_logos, .entry-title .spip_logos {
	margin: 60px 0px 11px 19px;
}

h2.grotit {
	background-color: @couleur-defaut;
	display: inline-table;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 0.4em 0.8em;
	font-size: 1.9em;
	color: #fff;
}

/* ------ PAGE ARTICLE ------ */

html .page_interieure {
	h2.tit {
		margin-left: 0;
		margin-right: 0;
	}
	.chapo, .texte { margin-bottom: 2em; }
	.contenu .owl-theme .owl-nav {
		.owl-prev, .owl-next {
			top: 34%;
			width: 1em;
			background-image: none;
		}
	}
}

/* ------ PAGE SITE ------ */

.page_site{
	.article .chapo { font-size:1.4em; }
	.apercu{
		padding: 1em 0;
		text-align: center;
		a {
			border: 0px solid @gris-lighter;
			margin: 1em auto;
			display: block;
			padding-top: 10em;
			padding-bottom: 10em;
			cursor: pointer;
			background-color: #fff9f4;
			&:hover { background-color: #f5f5f5; }
		}
	}
	.owl-theme .owl-item img	{ max-height:100%; }
}

/* ------ PAGE TYPE LISTE ------ */

html .page_interieure .page_type_liste {

	.chapo {
		font-size: 1.27em;
		line-height: 1.6em;
		.col-sm-12 {text-align: center; }
		&.surlignable strong { color: #000; }
	}

	//  Gros Intertitres

	.entouretit {
		border-bottom: 1px solid @gris-lighter;
		position: relative;
		margin-top: 5em;
		margin-bottom: 3em;
		h2.grotit {
			position: absolute;
			bottom: -1.7em;
			font-size: 1.5em;
			left: 50%;
			transform: translate(-50%);
		}
	}

}

.controls {
	text-align: center;
	margin: 0 auto;
	.control {
		border: 0 solid #fff;
		border-radius: 3px;
		margin: 0 7px;
		padding: 4px 11px 3px;
		border-bottom: 3px solid @gris;
		transition: .5s;
		&:hover { background: #fff; }
	}
	.bd-vert 						{ border-color: @vert; }
	.bd-jaune 					{ border-color: @jaune; }
	.bd-orange			 	{ border-color: @orange; }
	.bd-turquoise 	{ border-color: @turquoise; }
}

// Toute les listes

.liste-items {
	line-height: 1.2em;
	h3.spip {
		margin: 0 0 .4em;
		padding: 0;
		display: table;
		width: 100%;
		a {
			color: #7d7c7c;
			font-family: @labeur, sans-serif;
			margin: 0 10px;
			padding-top: 5px;
			text-rendering: optimizelegibility;
			display: table-cell;
			width: 100%;
			clear: both;
		}
	}
	.cnt {
		text-align: left;
		color: #000;
	}
	h3.spip a:hover { background:transparent; }
	.item {
		color: #777;
		font-size: 14px;
		line-height: 20px;
		margin-top: 50px;
		margin-bottom: 10px;
		padding: 0;
		overflow:hidden;
		text-align: center;
		transition-delay: 0s;
		transition-duration: 0.5s;
		transition-property: background;
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
		z-index: 1000;
		p { margin-bottom: 1em; }
		strong {
			-o-hyphens: auto;
			-ms-hyphens: auto;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			hyphens: auto;
		}
		.label {
			margin: 0em 0 0.6em ;
			font-size: 56%;
			font-weight: 500;
		}
	}

	&.col-sm-3 .item  {
		height: 20em;
		h3.spip .bloc { padding: 0 1em; }
	}

}

// Listes de type grille

.liste-grille  {

	h3.spip {
		font-size: 22px;
		font-weight: 700;
		a {
			font-size: 22px;
			font-weight: 400;
			padding-top: 5px;
			text-align: center;
			height: 103px;
			vertical-align: middle;
		}
	}
	.cnt {
		color: #666;
		padding: 10px 20px;
	}

	.item {
		background-color: #FFF;
		box-shadow: #aaa 0px 7px 24px 0px;
		height: 362px;
		min-height: 1px;
		min-width: 75%;
		max-width: 100%;
		line-height: 20px;
		text-align: center;
		z-index: 1000;
	}

	.mix h3 .bloc { padding: 0 5%; }

}

// Dans le cas où l'on a 4 sites par colonne, on diminue la hauteur

.liste-strate {

	h3.spip {
		a {
			margin: 0 0 .3em;
			font-size: 37px;
			font-weight: 400;
			color: #000;
			padding: 0 0 8px;
			text-align: left;
			.typoetroite;
			.label-bleu { color: @bleu; }
			.label-vert { color: @vert; }
			.label-orange { color: @orange; }
			.label {
				display: table;
				margin-bottom: 1.3em;
				background: transparent;
				vertical-align: top;
				padding: 0;
				border-radius: 0;
				margin-top: 0;
				&:before {
					content: "/// ";
					font-weight: 300;
					margin-right: 0.3em;
				}
			}
		}
	}

	.cnt {font-size: 17px; }
	.lls, .liendirect {
		.btn;
		float: left;
	}

}

// .item_cp, .item_cg, .item_truc {
// 	.item { padding: .6em; }
// }

/* ------ PAGE TYPE MOT ------ */

.page_mot .page_type_liste {
	.liste-grille h3.spip a {
		// height: 60px;
	}
}

/* ================ OUTILS JS ================= */

/* Mediabox */

#cboxContent {
	.adroite {margin: 10px; }
	.spip_logos { margin: 0px 25px 10px 10px; }
  h3.spip { font-size: 30px; }
}

/* Lazyload */


.tmp_lazy {
	background-image: url('https://c-real.fr/sites/c-real.fr/local/cache-gd2/93/d1684ba34c1136462be34c07c3ad70.gif?1762775067');
	background-size: cover;
	background-position: center;
	display: inline-block;
	overflow: hidden;
}
.mix .item img, img {
   transition: opacity 1s;
   max-width: 100%;
  &.lazy {opacity: 0; }
  &.loaded {opacity: 1; }
 	&:not([src]) {visibility: hidden; }
}

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

.bloc {
	display:block;
	overflow:hidden;
	zoom:1;}
.row {
	display: flex;
	flex-wrap: wrap;
	width: calc(~"100% + 60px");
}
.container .row { 	overflow: visible; }
.invisible			{display:none; }
.gras, b, strong 			{font-weight: 600 !important;}
.italic, i, em						{font-style:italic !important;}
.majuscules 						{font-variant:small-caps; color:#5497e2; }
.margegauche 				{margin-left: 10px;}
.large 										{width: 100%;}
.droite										{float:right;}
.relative 									{position: relative; }

.rouge 				{color: @rouge;}
.noir				{color: #000; }
.gris				{color: @gris; }
.orange			{color: @orange; }
.blanc 				{color:#fff;}
.grischaud			{color:@grischaud;}
.bgblanc 			{background:#fff ;}


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

.alert {
	display:block;
	border: 2px solid #d61b2c;
	padding: 5px 0px ;
	margin: 10px auto 0px;
	text-transform:uppercase;
	font : bold 1em Arial, Helvetica, sans-serif;
	color: #fff;
	text-align:center;
	width: 680px;
	background: #ff7602 ;
}// 
.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{
			&:hover .legende .desc 	{ height: 9em; }
		}
		#agenda 				{margin-top: 4.6em; }
		#reste 						{margin-top: 1.5em; }
	}
	#footer, .footer {
		#pied 	{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 (max-width: @screen-lg-max) {
}

@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; }
	}
}

@media screen and (min-width: @screen-md)  {
	#header, .nav-collapse {ul li:hover ul { display: block;} }
	/*  */
	.page_videos{
		.liste-videos .tit {	min-height: 4.4em; }
	}
	.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%; }
	}
  #footer, .footer {
  	#pied #infolettre .text 	{ text-align: center; }
  	.grotit {
  		margin-top: 1.4em;
  		font-size: 2em;
  	}
  }

	/*  */

	.page_site body {
		.owl-next, .owl-prev { display:none; }
		#myCarousel.apercu {
			margin: 0;
			padding: 0;
			width: 100%;
			overflow: hidden;
			a {
				padding: 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;
	}
	.content .margesup { width: 94vw; }
	.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;
		margin: 0;
		.carreblanc {padding: 1em 1em 0; }
	}

	/*  */

	.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; }
	.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; }
	}

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

	/*  */

	/*  */

	body {
		.chemin {
			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://c-real.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;
		  img {
				margin: 16px auto 10px;
				max-width: 45%;
			}
		}

		.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; }
	 	}

	}

	/*  */

	.page_sommaire .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, .btn 	{ display: none; }
				}
			}
			.owl-nav{ display: none;}
		}

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

	}

	/*  */

	.contenu #coldroite .grotit, .contenu .asidedroite .grotit { text-align: center; }

	.page .content {
		margin-top: 3.2em;
		.contenu {
			padding-top: 0.5em;
			.chemin {
				font-size: 1.2em;
				line-height: 100%;
				width: 100%;
			}
			.bloctit, #intro, .intro {
				margin-top: 0;
				margin-bottom: 1.1em;
				.grotit{
					font-size: 2.2em;
					margin-top: .2em;
				}
			}
			h3.spip {
		    font-size: 1.5em;
		    text-align: center;
		    line-height: 1.1em;
		    padding-bottom: 0.9em;
		    margin-bottom: 1.2em;
			}
			.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; }
			#lireaussi .liste-items .item {
				margin-bottom: 2em;
				padding-bottom: 0.7em;
			}
		}
	}

	/*  */

	body .content .contenu.page_type_liste {

		.laliste {
			select {
				height: 2.1em;
				width: 50vw;
			}
		}

		#laliste, .laliste {
			 .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; }
			}
		}

		#bicolonnes {
			#intro, .intro {
				.grotit 	{ margin: 0.6em 0;}
				.chapo 	{ margin-bottom: 0.2em; }
			}
			#laliste, .laliste { .grotit{ .mobile_intertitre(); } }
			.liste-items {
				.item {
					.surtit{
						line-height: 123%;
						font-size: .5em;
					}
				 .tit {
						width: 100%;
						float: none;
						margin-bottom: 0.4em;
					}
					.cnt { overflow: hidden; }
					.date-pub, .date-modif { font-size: .9em; }
					.boutons {
						bottom: inherit;
						top: 144px;
						.btn { margin: 0 0 0.6em; }
						.addthis_toolbox {
							width: 100%;
							.btn {
								margin-bottom: .8em;
								&:last-of-type{ margin-bottom: .2em;  }
							}
						}
					}
					.entourelogo{
						min-height: 130px;
						.spip_logo {
							height: 130px;
							margin-left: -30%;
					    width: auto;
						}
					}
				}
				.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; }
				#pubcarre {
					padding-bottom: 0;
					.item {
						margin: 0 auto 1em;
						border: 0;
					}
				}
			}
		}
	}

	/*  */

	.page_recherche .content .contenu.page_type_liste #bicolonnes{
		#intro .grotit {
			margin: 0;
			font-size: 2em;
		}
 		#laliste, .laliste {
	 		 .grotit {
				font-size: 1.5em;
				border-bottom: 3px solid @couleur-defaut;
				font-weight: 500;
				margin-bottom: .9em;
	 		}
	 	}
	}

	/*  */

	/*  */

	.page_auteur body {
		#contenu {
			h4.spip {font-size: 1.3em;}
			.btn {font-size: 1em; }
		}
	}

	.depliantbas { display:none;}

	/*  */

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

	body #contenu .grosboutons {
		width: auto;
		.grosbouton {
	    min-height: calc(~"45vw + 20px");
	    margin-bottom: 1em;
	    font-size: 15px;
    	.ico, svg { top: 2em; }
    	.legende .titit {
	    	font-size: 1.1em;
				margin: .2em 0.5em;
			}
  	}
	}

	.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;
				}

				.offre_prix{ 	margin-left: -40vw; }
				.offre_prix{ 	margin-top: -1px; }
			}


			.offre_paiement{
				padding: 0.6em .1em 0.2em;
				display: block;
				overflow: hidden;
				width: 90vw;
				position: relative;
				left: -40vw;
				top: 0.7em;
				ul {
					margin-top: 0.3em;
					padding-left: 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  .content  {
		.chapo { padding: 0 0 .5em; }
		.formulaire_panier{
			margin-left: -30px;
			margin-right: -30px;
			.description p { margin: 0; }
			button.submit{
				padding: 0.4em 5.2%;
				&.recalcul { float: right; }
			}
		}
		.btn {
			padding: 0.2em 4% .2em;
			float: none;
		}
	}

	/*  */


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

	/*  */

	body .spip-admin-float {
    bottom: 61px ;
    left: 2vw ;
		top: inherit;
		.spip-admin-boutons{ border-radius: 0; }
	}

	.addthis_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-next, .owl-prev { width: 55px; }
	}
}

@media screen and (min-width: @screen-xs) {
	.contenu {
		.formulaire_spip { padding-bottom: 1.5em; }
		.formulaire_newsletter_subscribe3 {
			background-color: @couleur-defaut ;
			form {
				overflow: hidden;
				& > div {							.make-row(30px); }
				.editer-groupe {
					.make-xs-column(10);
					.editer { margin-bottom: 0; }
				}
				.boutons {
					.make-xs-column(2);
					width: 21.66%;
					padding: 0 20px 0 10px;
					.submit {
						width: 100%;
					}
				}
			}
		}
	}

	// Egaliser les items dans du multicolonne
  .page_type_liste .item-produit {
  	.tit {min-height: 3.8em;}
  }

}

@media screen and (min-width: 992px) {

	#sites, #video, .liste-sites{
		.item {
	    padding: 0;
	    margin-top: 8em;
	    margin-bottom: 6em;
	    transition: .5s;
	    &:hover{
	    	margin-top: 6em;
	    	margin-bottom: 8em;
	    }
		}
		.desctit {
		    position: absolute;
		    top: 0;
		    left:0;
		    background: #fff;
		    height: 5em;
		    overflow: hidden;
		    width: 100%;
		}
		h3.spip {
			padding: 0 1vw;
			width: 98%;
			a {
				height: 60px;
			}
			.bloc {
				line-height: 113%;
				color: #000;
			}
		}
		.cnt { display: none; }
	}

	/* ------ LISTES ------ */

	.liste-grille .mix {

		.item{

			.itemlogo {
				display: block;
				overflow: hidden;
				height: 68%;
				transition-property: all;
				.tmp_lazy {
					transition-duration: .5s;
					position:relative;
					top: -0.1px; }
			}
			.cnt {padding: 19px 27px; }
			h3 {
				transition-property: all;
				.bloc { padding: 0 8%; }
			}

			&:hover {
				transition-property: background,height, margin-top;
				position:absolute;
				z-index:2000;
				height: 702px;
				top:0;
				left:0;
				margin-left: 30px;
				margin-right: 30px;
				h3.spip 								{ margin-bottom: 0; }
				.liendirect:hover 	{ text-decoration:underline; }
				a, p, h3,div 					{ background: transparent; }
				.itemlogo {
					height: 0;
					.tmp_lazy { top: -60px; }
				}
				h3 {
					.bloc {
						margin-top: .3em;
						font-size: 1.2em;
						line-height: 1.1em;
						color: #222;
						font-weight: 500;
					}
					.label {font-size: 66%; }
				}
				.cnt {
					font-size: 1.3em;
					line-height: 1.45em;
				}

			}
		}
	}

	.liste-strate {
		.item {
			padding-bottom: 2.6em;
			.make-row;
			.itemlogo {		.make-sm-column(4); }
			.desctit { 			.make-sm-column(8); }
		}
		div:nth-of-type(odd) .item {
			display: flex;
			flex-direction: row-reverse;
		}
	}

	.liste-grille .col-sm-3 .item {
		height: 297px;
		&:hover { height: 660px; }
	}

	//  ---- Pages intérieure  ----

	html:not(.page_prepa_sommaire) .page_interieure #header {
	    padding: 2.8em 0 0.1em;
	}

	//  ---- Pages type liste ----

	.page_type_liste {

		.chapo {
			.col-sm-12 {
				margin-left: auto;
				margin-right: auto;
				width: 75%;
			}
			&.surlignable strong {padding-bottom: 0.3em; }
			p { margin-bottom: 1.2em; }
		}

		//  Gros Intertitres

		.entouretit {
			border-bottom: 1px solid @gris-lighter;
			position: relative;
			margin-top: 5em;
			margin-bottom: 3em;
			h2.grotit {
				position: absolute;
				bottom: -1.7em;
				font-size: 1.5em;
				left: 50%;
				transform: translate(-50%);
			}
		}

		.liste-items 														{
			min-width: 100%;
		}

		.article .liste-items h3.spip a 	{ padding: .5em 1em 1em; }
	}

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

	.page_mot {
		.chapo {
			margin-top: 0;
			.col-sm-12 { width: 85%; }
		}
		.mix.col-sm-3 .item:hover {height: 570px; }
	}

}

@media screen and (min-width: 1366px) {
	.liste-grille .mix {
		.item:hover {
			height: 784px;
		}
		&:nth-last-of-type(1), &:nth-last-of-type(2), &:nth-last-of-type(3) {
			.item:hover { margin-top: -372px; }
		}
	}
	.page_mot	.mix.col-sm-3 .item  {
		.itemlogo { height: 58%; }
		&:hover {
			height: 654px;
			.itemlogo { height: 0; }
		}
	}
	.owl-next, .owl-prev 			{ margin: 3.6em 0; }
}
@media screen and (min-width: 1600px) {
	#header { padding: 8.6em 0; }
}
@media screen and (min-width: 1900px) {
	#header 	{ padding: 11.3em 0; }
}


@media screen and (max-width: @screen-lg-max) {
	.mix .item:hover { min-width: inherit; }
}

@media screen and (max-width: 1280px) {
	#header { padding: 5.6em 0; }
}

@media screen and (max-width: 768px) {

	body { padding: 0; }
	/*
		sur smartphone, un phrase peut vite prendre plusieur ligne,
		et un simple retour à la ligne devra être intervprété comme un saut de paragraphe.
	*/
	.manualbr {
		line-height: 190%;
		vertical-align: top;
	}
	.lead {
		line-height: 138%;
		margin-top: 1em;
		.dbfleches {
			content: url('');
			width: 15px;
			display: block;
			text-align: center;
			margin: .9em auto 0;
		}
	}
	.page_sommaire .container > .row {
		margin-right: 0;
		margin-left: 0;
		width: 100%;
	}
	.liste-items {
		min-width: 100%;
		.item {
			margin-bottom: 0;
			height: auto;
			padding-bottom: 20px;
		}
		h3.spip a { padding: 0 1vw 5px; }
	}
	#header { padding: 11.6em 0; }
	.btnproduit{
		padding: 2em 0em 2em;
		margin: 1%;
		width: 48%;
	}
	#qfn { padding-bottom: 20vw; }
	#sites { padding-top: 6vw; }
	#sites, #graph, #video, #propa {

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

	#nav { display: none; }
	#header { padding: 1.3em 0; }
	.page_sommaire {
		text-align: center;
		#header {
			margin-bottom: 4vw;
			height: 90vh;
			padding: 0;
			.container {
				padding-left: 5vw;
				padding-right: 5vw;
				margin: 9vh 0;
				width: 100%;
			}
			&::after { background-size: 103% ,cover; }
		}
	}

	/* ---- Accueil ---- */

	.btnproduit{
		padding: 2em 0em 2em;
		margin: 1%;
		width: 98%;
	}

	html {
		#sites, #video {
			.item {
		    height: 110vw;
		    padding-top: 115px;
		    margin-top: 0;
		  }
		  .descriptif {
		  	margin: 0.9em 5% 4em;
				line-height: 138%;
		  }
		  h3.spip {
		  	a 				{	margin: 0; }
		  	.bloc 	{ 	font-size: 1em; }
		  }
		  .desctit.adroite {
		  	padding: 0 5vw;
		  	background-color: transparent;
		  }
		  .owl-theme .owl-nav {
		  	.owl-next, .owl-prev {
					top: 40vw;
					font-size: 3.5em;
					height: 45px;
		  	}
		  }
	  	.carousel { margin-bottom:  4em; }
	  }
	  a.llsrub { width: 100%; }
  }

  .owl-carousel {
  	overflow: visible;
  	.owl-stage-outer { overflow: visible; }
  	.owl-dots { display: none; }
  }

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

	.liste-grille h3.spip a {
		font-size: 26px;
    padding-top: 10px;
	}
	.liste-items {
		.lls, .liendirect {
			.btn;
			display: table;
			margin-left: auto;
			margin-right: auto;
			font-size: 1.1em;
		}
		.liendirect {margin-left: 15px; }
	}

	/* ---- Page interieure ---- */

	html:not(.page_prepa_sommaire) .page_interieure .content .contenu {
		h2.tit, .grotit {
			margin-top: 0;
			font-size: 2.3em;
			margin-bottom: 0.4em;
			line-height: 100%;
		}
	}

	/* ---- Page type_contenu ---- */

	.apercu { padding: .1em 0; }
	.page_type_contenu .apercu .tit {
		border-width: 5px;
		padding: 0;
	}

	/* ---- Page type liste ---- */

	.page_type_liste .contenu .texte {
	 width: auto;
	 line-height: 1.37em;
	 p { margin-top: 0; }
	}

	.controls .control { margin-bottom: 0.8em; }
}

@media screen and (max-width: 519px) {
	.owl-nav {
    margin: 0px;
    display: none;
    .owl-next, .owl-prev {
      width: 10px;
      margin-top: -15px;
			top: 30%;
    }
		.owl-prev { left: -24px; }
		.owl-next { right: -24px; }
	}
}

@media screen and (min-width: 386px) {
	.owl-nav {
		.owl-next, .owl-prev { width: 55px; }
	}
	// Pour éviter le double scenceur au survol
	html:not(.page_prepa_sommaire) .page_interieure { overflow: visible; }
}

@media screen and (max-width: 360px) {
	#header { padding: 2em 0; }
}


@media screen and (min-width: @screen-md) and (max-width: @screen-md-max) {
	.owl-next, .owl-prev { margin: 2.8em 0; }
	.liste-items .item {height: 284px;}
}
@media screen and (min-width: 1280px) and (max-width: 1366px) {
	.liste-grille .mix .item .itemlogo { height: 63%; }
}