/*!
Theme Name: kouala
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kouala
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

kouala is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@charset "UTF-8";
/* UTF-8 déclaré avant toute chose */

/******************************************************************
 * RÖCSSTI : une base CSS par Nicolas Hoffmann https://rocssti.net/
 * Builder : https://rocssti.net/builder-css
 * inspiré par http://www.knacss.com/
 *
 * RÖCSSTI est sous licence MIT : https://github.com/nico3333fr/ROCSSTI/blob/master/LICENSE
 * 
 * cette CSS est fournie telle quelle, sans aucune garantie d’aucun type, 
 * l’auteur ne saurait être tenu responsable de quoi que ce soit pour 
 * l’utilisation de RÖCSSTI.
 *
 * convention (à adapter si besoin)
 *  .parent
 *  .parent__enfant
 *  .parent--modifieur  
 * 
 * RTL = Right To Left => 
 * pour adapter un site dans une langue qui se lit de droite à gauche
 * prévu surtout pour sites multilingues avec LTR et RTL
 *
 * 
 * résumé
 * 01 -- reset
 * 02 -- ainsi font font font + structure Hx
 * 03 -- classes utilitaires + fix typos + styles "balises fixes"
 * 04 -- liens + icônes
 * 05 -- layout et modules
 * 06 -- structure (page / skip links / header / main content / footer)
 * 07 -- forms
 * 08 -- dans le contenu
 * 09 -- breakpoints mineurs entre desktop et tablettes
 * 10 -- homo tablettes - breakpoint majeur
 * 11 -- breakpoints mineurs entre tablettes et mobile
 * 12 -- mobile - breakpoint majeur
 * 13 -- breakpoints mineurs tout petit mobile
 * 14 -- print
 * 15 -- fix viewport 
 * 16 -- règles d’état
 * 17 -- bonus : Fixes IE
 */




/*
 *****************************************************************
 * 1 -- reset
 *****************************************************************
 */
 
 :root {
  --color-black : #333;
  --color-white : #fff;
  --color-lightgrey : #f8f8f8; 
  --color-grey : #919191;  
  --color-lightblue: #f5f8ff;
  --color-menublue: #CEEDEE;
  --color-yellow : #FFD700;
  --color-link : #63c5c8;
  --color-yellowlight : #faf4d7;
}

.color-white { color: var(--color-white); }
.color-black { color: var(--color-black); }

.bg-white { background: var(--color-white); }
.bg-lightgrey { background: var(--color-lightgrey); }
.bg-lightblue { background: var(--color-lightblue); }
.bg-yellowlight { background: var(--color-yellowlight); }
.bg-grey { background: var(--color-grey); }

/* spécial HTML 5 */
article, aside, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; }
audio, canvas, progress, video { display: inline-block; }
abbr, eventsource, mark, meter, time, output, bb { display: inline; }

/* à commenter/fallback si vous vous souciez d’IE<8 */
html { box-sizing: border-box; }
*, *:before, *:after {
  box-sizing: inherit;
}

/* reset minimum */
html, body, blockquote, ul, ol, form, button { margin: 0; padding: 0; }
button { border: 0; }
p, ul, ol, dl, blockquote, pre, td, th, label, textarea {
  font-size: 1em; /* equiv 14px */
  line-height: 1.5;
  margin: 1.5em 0;
}

/* reset buttons, bien les styler ensuite dans les forms */
input, select, textarea, optgroup, button {
  background: transparent;
  border: 0;
  font: inherit;
  /* -webkit-appearance: none; */
}

/* fix display img/iframe */
img,
iframe { vertical-align: middle; }

ul, ol { padding-left: 2em; }

.unstyled {
  padding-left: 0;
  list-style-type: none;
}

/* RTL */
[dir="rtl"] ul, 
[dir="rtl"] ol { 
  padding-left: 0; 
  padding-right: 2em;
}
[dir="rtl"] .unstyled {
  padding-right: 0;
}


/* la base correspond à 10px */
html { 
  font-size: 62.5%;
  /* IE9-IE11 math fixing. Voir https://connect.microsoft.com/IE/feedback/details/816709/ */
  /* Merci à @guardian, @victorbritopro, @eQRoeil & Knacss */
  font-size: calc(1em * 0.625);
}
body {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5em; /* taille de base équiv à 14px */
  line-height: 1.5; /* à corriger si besoin est */
}
body.single { background: #fff; }
body.page-id-26 { background-position: 150px -300px; }

.background {
  height: 150px;
  background: #fff url(/wp-content/uploads/2025/07/carbone-bg.webp) no-repeat left bottom;
  background-size: cover;
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  max-width: 2500px;
}

/*
 *****************************************************************
 * 02 -- ainsi font font font + structure Hx
 *****************************************************************
 */ 

/*@font-face {

}*/

/* calculées via https://rocssti.net/builder-css
 * basé sur http://soqr.fr/vertical-rhythm/ merci @goetter & @eQRoeil */

h1,
.h1 {
  display: block;
  font-size: 24px;
  line-height: 24px;
  margin: 0;
}
h2,
.h2 {
  display: block;
  font-size: 1.71429em; /* equiv 24px */
  line-height: 1.75;
  margin: 0 0 .875em 0;
}
h3,
.h3 {
  display: block;
  font-size: 1.57143em;  /* equiv 22px */
  margin: 0 0 0 0;
}
h4,
.h4 {
  display: block;
  font-size: 1.42857em; /* equiv 20px */
  line-height: 1.05;
  margin: 0 0 1.05em 0;
}
h5,
.h5 {
  display: block;
  font-size: 1.28571em;  /* equiv 18px */
  line-height: 1.16667;
  margin: 0 0 1.16667em 0;
}
h6,
.h6 {
  display: block;
  font-size: 1.14286em;  /* equiv 16px */
  line-height: 1.3125;
  margin: 0 0 1.3125em 0;
}

.uppercase {
  text-transform: uppercase;
}

/* autres classes utiles */
.smaller {
  font-size: .71429em; /* equiv 10px */
  line-height: 2.1;
  margin: 2.1em 0;
}
.small {
  font-size: .85714em; /* equiv 12px */
  line-height: 1.75;
  margin: 1.75em 0;
}
.big {
  font-size: 1.14286em; /* equiv 16px */
  line-height: 1.3125;
  margin: 1.3125em 0;
}
.bigger {
  font-size: 1.28571em; /* equiv 18px */
  line-height: 1.16667;
  margin: 1.16667em 0;
}
.biggest {
  font-size: 1.42857em; /* equiv 20px */
  line-height: 1.05;
  margin: 1.05em 0;
}




/*
 *****************************************************************
 * 03 -- classes utilitaires + fix typos + styles "balises fixes"
 *****************************************************************
 */

.noborder,
iframe,
dialog { border: 0; }

/*
 * repris de http://tinytypo.tetue.net/ de @tetue
 * tuné avec l’aide de http://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
 *
 * voir https://en.wikipedia.org/wiki/Quotation_mark#Summary_table pour les références
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(es) > q {
  quotes: "\00AB" "\00BB" "\201C" "\201D";
}
:lang(it) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
}
:lang(de) > q {
  quotes: "\201e" "\201c" "\201a" "\2018";
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

/* éviter interlignage disgracieux */
sup,
sub {
  vertical-align: 0;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}

/* éviter marges supplémentaires sur éléments imbriqués */
li p,
li ul {
  margin-bottom: 0;
  margin-top: 0;
}
/* Vous ne passerez PAS (Gandalf) */
/*textarea,
table,
td,
th,
code,
pre,
samp,
div,
p,*/
.cut {
  word-wrap: break-word;
}
@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
  /*textarea,
  table,
  td,
  th,
  code,
  pre,
  samp,
  div,
  p,*/
  .cut {
    word-wrap: normal;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }
}
/* pour supprimer la césure si besoin */
.nocut {
  word-wrap: normal;
}
@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
  .nocut {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }
}

code,
pre,
samp {
  white-space: pre-wrap;
}
code {
  line-height: 1;
}
kbd {
  border: solid 1px;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
  padding: 0 .25em;
}
table {
  margin-bottom: 1.5em;
  table-layout: fixed;
}
/* j’y tiens, les abbr c’est bon pour la planète */
/* seuls ceux ayant un title sont signalés */
abbr[title] {
  border-bottom: dotted 1px; 
  cursor: help;
  text-decoration: none;
  /* couleur héritée du texte */
} 

/* alignements de textes */
.alignright  { text-align: right; }
.aligncenter { text-align: center; }
.alignleft   { text-align: left; }

/* RTL */
[dir="rtl"] .alignright  { text-align: left; }
[dir="rtl"] .alignleft   { text-align: right; }





/*
 *****************************************************************
 * 04 -- liens + icônes
 *****************************************************************
 */

/* Liens */
a {
  color: var(--color-link);
  cursor: pointer;
  text-decoration: none
}
/* penser au focus */
a:focus,
a:hover,
a:active {
  color: #000;
}
/* éviter la bordure sur une image comprise dans un lien + fix bordure image IE */
a:link img,
a:visited img, 
img {
  border-style: none;
}

.nodecoration {
  text-decoration: none;
}

/* liens avec icônes, on peut utiliser les DATA-URI */

/* pour signaler liens externes */
/*a[href^="http://"],
a[href^="https://"] {

}*/
/* si URL complète sur un lien interne, virer signalement liens externes */
/*a[href^="http://www.mondomaine.com"] {

}*/
/* contact, liens mailto */
/*.mail,
a[href^="mailto:"] {

}*/
/* dont l’URL se termine par .pdf ou ce que vous voulez comme extension */
/*a[href$=".pdf"] {

}*/

/* facto icons */
/*[class*=icon-30] {
display: inline-block;
width: 30px;
height: 30px;
}*/





/*
 *****************************************************************
 * 05 -- layout et modules
 *****************************************************************
 */

/**
 * layout
 */


/* ça dépend, ça dépasse */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
svg {
  height: auto;
  max-width: 100%;
}
/* pas de reset sur embed, object et video, ça fait foirer certains players */

/* utile pour gérer les floattants */
/* contient des floats */
.mod { 
  overflow: auto;
}
.mod--hidden,
.no-scroll { 
  overflow: hidden;
}

/* quelques floattants */
.left {
  float: left;
}
.right {
  float: right;
}


/* clearer les floats */
.clear {
  clear: both;
}
/*
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.clearhidden {
  clear: both;
  margin: 0;
  padding: 0;
  visibility: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
*/

/* RTL */
[dir="rtl"] .left {
  float: right;
}
[dir="rtl"] .right {
  float: left;
}

/*[dir="rtl"] .clearleft {
  clear: right;
}
[dir="rtl"] .clearright {
  clear: left;
}*/


/* gouttière */
.gut {
  height: 1px;
}

/* gestion du table-design en CSS */
.row {
  display: table;
  table-layout: fixed;
}
.inline-row {
  display: inline-table;
  table-layout: fixed;
}
.line {
  display: table-row;
}
.col {
  display: table-cell;
  vertical-align: top;
}
.col-noalign {
  display: table-cell;
}

/* alignements */
.aligntop    { vertical-align: top; }
.alignbottom { vertical-align: bottom; }
.alignmiddle { vertical-align: middle; }

/* block */
.bl {
  display: block;
}

/* inline-block, utile pour les grilles et pas seulement */
.inbl,
.grid {
  display: inline-block;
}

/* grid = élément d’une inline-grid */
.grid {
  vertical-align: top;
}

/* pour relativiser */
.relative {
  position: relative;
}

/* bloc centré */
.center {
  margin-left: auto;
  margin-right: auto;
}

/* activation de l’accélération matérielle */
.hardware-accelerated {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}


/* largeurs de blocks */
.w1   { width: 1%; }
.w2   { width: 2%; }
.w3   { width: 3%; }
.w5   { width: 5%; }
.w10  { width: 10%; }
.w20  { width: 20%; }
.w25  { width: 25%; }
.w30  { width: 30%; }
.w33  { width: 33.333%; }
.w40  { width: 40%; }
.w45  { width: 45%; }
.w49  { width: 49%; }
.w50  { width: 50%; }
.w60  { width: 60%; }
.w66  { width: 66.666%; }
.w70  { width: 70%; }
.w75  { width: 75%; }
.w80  { width: 80%; }
.w90  { width: 90%; }
.w100 { width: 100%; }

/* ici ajouter les largeurs en em */
/*.w960e { width: 60em; }*/

/* ici ajouter les largeurs en pixels */
/*.w500p { width: 500px; }*/

/* ici ajouter les largeurs max en em */
/*.mw960e { max-width: 60em; }*/

/* ici ajouter les largeurs max en pixels */
/*.mw960p { max-width: 960px; }*/

/* margins */
.mt0 { margin-top: 0; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.m0  { margin: 0; }
.m1  { margin: 1em; }
.m2  { margin: 2em; }

.mtauto { margin-top: auto; }
.mrauto { margin-right: auto; }
.mbauto { margin-bottom: auto; }
.mlauto { margin-left: auto; }
.mauto  { margin: auto; }

/* RTL = attention, utiliser avec précaution */
[dir="rtl"] .mr0 { margin-left: 0; }
[dir="rtl"] .mr1 { margin-right: inherit; margin-left: 1em; }
[dir="rtl"] .mr2 { margin-right: inherit; margin-left: 2em; }
[dir="rtl"] .ml0 { margin-right: 0; }
[dir="rtl"] .ml1 { margin-left: inherit; margin-right: 1em; }
[dir="rtl"] .ml2 { margin-left: inherit; margin-right: 2em; }

/* paddings */
.pt0 { padding-top: 0; }
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }
.p0  { padding: 0; }
.p1  { padding: 1em; }
.p2  { padding: 2em; }

/* RTL = attention, utiliser avec précaution */
[dir="rtl"] .pr0 { padding-left: 0; }
[dir="rtl"] .pr1 { padding-right: 0; padding-left: 1em; }
[dir="rtl"] .pr2 { padding-right: 0; padding-left: 2em; }
[dir="rtl"] .pl0 { padding-right: 0; }
[dir="rtl"] .pl1 { padding-left: 0; padding-right: 1em; }
[dir="rtl"] .pl2 { padding-left: 0; padding-right: 2em; }

/* spécial hr de 1px de haut */
hr {
  background-color: #000;
  border: 0;
  color: #000;
  height: 1px;
  margin: 0 0 1em;
  padding: 0;
}

/* pour cacher du texte de manière accessible… toussââââ */
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.nonvisible { visibility: hidden; }

.hidden, [hidden] { display: none; } /* caché partout */
.nodesktop { display: none; } /* caché sur desktop */
/*.noprint   {} /* caché sur print */
/*.notablet  {} /* caché sur tablettes */
/*.nomobile  {} /* caché sur mobile */


/**
 * modules
 */





/*
 *****************************************************************
 * 06 -- structure globale 
 *      (page / skip links / header / contenu principal / footer)
 *****************************************************************
 */

/* === page === */
body::before {
  content: 'desktop';
  display: none;
}

.page {
  margin: 0 auto;
  position: relative;
}

/* === skip links = liens d’évitement === */
.skip {

}
/* skip__link = un lien d’évitement  */
/* idéalement mettez-les visibles pas uniquement au focus */
.skip__link {

}
/* sinon pensez à les rendre visibles au focus */
.skip__link:focus,
.skip__link:hover,
.skip__link:active {

}



/* === header === */
.header {
	position: fixed;
	width: 300px;
	height: 100vh;
}

.header .flex {
	display: flex;
	flex-direction: column;
	padding: 0em;
	height: calc(100vh - 4em);
	border-radius: 10px;
	margin: 2em;
}

.logo {
	text-decoration: none;
	font-size: 25px;
	color: var(--color-black);
	font-weight: 200;
	display: block;
	height: 100px;
}
.logo span {
	font-weight: 600;
}


.menu {
	height: calc(100vh - 175px);
	align-content: center;
	margin: 0;
	padding: 0;
}
.menu-item {
	display: block;
    margin: 5px 0;
}

.menu-item a {
	position: relative;
	overflow: hidden;
	color: var(--color-black);
	text-decoration: none;
	letter-spacing: 0.1em;
	font-weight: normal;
	z-index: 0;
	font-size: 18px;
}

.menu-item a::after {
	transition: all 1.5s ease-in-out;
}

.menu-item a:hover,
.menu-item a:active,
.menu-item a:focus,
.current-menu-item a {
	position: relative;
	overflow: hidden;
	color: var(--color-black);
	text-decoration: none;
}

.menu-item a:hover::after,
.menu-item a:active::after,
.menu-item a:focus::after,
.current-menu-item a::after {
	content: "";
	background: var(--color-menublue);
	position: absolute;
	left: 12px;
	bottom: 0;
	width: calc(100% - 4px);
	height: calc(100% - 8px);
	z-index: -1;
	transition: 0.5s cubic-bezier(0.25, 0.1, 0, 2.05);
}

.menu-item a:hover::after {
	background: var(--color-yellow);
}

.rsalc {
	height: 75px;
}

.rsalc a i {
	color: var(--color-black);
	font-size: 20px;
	font-weight: 200;
	margin: 0 5px 0 0;
}


/* === contenu principal === */
.main {
	margin-left: 275px;
    padding-top: 2em;
    margin-right: 2em;
    max-width: 1900px;
}

.main-center { 
  height: calc(100vh - 4em);
  display: flex;
  align-items: center;
}

.subheader {
	height: 2em;
}

.serie, .web, .ecriture {
	display: flex;
	text-decoration: none;
	color: var(--color-black);
	margin: 0 2em 4em 2em;
}

.web {
	max-width: calc(75% - 3em);
	border-radius: 10px;
	padding: 2em;
}

.intro {
	max-width: 75%;
    border-radius: 10px;
}

.intro img {
	border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0.3px 1px 0px, rgba(0, 0, 0, 0.3) 0px 1px 4px 0px, rgba(0, 0, 0, 0.15) 0px 5px 17px 0px;
	transition: ease-in-out 0.4s all;
}

.intro:hover img {
    box-shadow: rgba(0, 0, 0, 0.024) 0px 0.3px 1px 0px, rgba(0, 0, 0, 0.09) 0px 1px 4px 0px, rgba(0, 0, 0, 0.4) 0px 5px 17px 0px;
}

.infos, .spacer {
	width: 25%;
	padding: 2em 2em 2em 2em;
	font-weight: 200;
	align-content: center;
}

.infos h3 {
	font-weight: 200
}

.web .intro,
.ecriture .intro { 
	width: 75%; 
    display: flex;
}

.web .intro img,
.ecriture .intro img { 
    border-radius: 0 10px 10px 0;
    max-width: 250px;
}

.web .infos,
.ecriture .infos { 
	width: 60%; 
	align-content: flex-start; 
	padding: 2em;
	position: relative; 
	z-index: 0; 
    border-radius: 10px;
}

.web .intro2,
.ecriture .intro2 { 
  width: 40%;
    text-align: right
}

.watermark {
	position: absolute;
	z-index:-1;
	font-size: 200px;
	font-weight: 600;
	text-transform: uppercase;
	left: 20px;
	top:0;
	color: #fffbec;
    opacity: .75;
}

.ecriture .watermark {
	top: auto;
	bottom: 0;
	font-size: 100px;
	color: rgb(236, 236, 250)
}
	
.highlight { 
	border:1px solid var(--color-yellow);
}

.tag a { 
	display: inline-block;
	background: var(--color-lightblue);
	padding: 5px;
	border-radius: 5px;
	font-size: 12px;
	margin-bottom: 4px;
	color: var(--color-black);
	text-decoration: none
}

.grid {
  display: grid;
  grid-template-columns: 48% 48%;
  column-gap: 4%;
  row-gap: 1em;
}

legend {
  font-size: 18px;
  margin-top: 5px;
  color: #999
}

.wp-block-gallery.wp-block-gallery-1,
.wp-block-gallery.wp-block-gallery-2 {
    --wp--style--unstable-gallery-gap: var(--wp--style--gallery-gap-default, var(--gallery-block--gutter-size, var(--wp--style--block-gap, 20px))) !important;
    gap: var(--wp--style--gallery-gap-default, var(--gallery-block--gutter-size, var(--wp--style--block-gap, 20px))) !important;
}

.nav-links { 
  margin-top: 2em;
  padding-top: 1em;
  border-top :1px solid var(--color-grey);
  display: flex;
  position: relative;
}

.nav-next {
  position: absolute;
  right: 0;
  text-align: right;
  width:50%;
}

.nav-previous {
  text-align: left;
  width:50%;
}

.nav-subtitle { display: none; }

.nav-links a {
  color: var(--color-grey);
  text-decoration: none;
}

.introduction {
  color:#999;
  font-size: 18px
}

/* === footer === */
.footer {
	padding: 2em 0 0 2.5em;
}




/*
 *****************************************************************
 * 07 -- forms
 *****************************************************************
 */

/* donne envie de cliquer sur un bouton */
label,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled] {
  cursor: default;
}

/* évite un resize potentiellement foireux */
textarea {
  resize: vertical;
}
/* supprime un bug Firefox sur button */
button::-moz-focus-inner { border: 0; padding: 0; }

label,
button,
input,
select {
  vertical-align: middle;
}

/* à adapter selon le design voulu */
input,
select,
textarea {
  border: 1px solid #000;
  padding: .5em;
  width: 250px;
}

/* pour les textes des champs */
.label {
  display: inline-block;
}

/* à adapter selon le design voulu */
.button {
  background: var(--color-menublue);
	color: var(--color-black);
  padding: 5px 10px;
  color: #000;
  text-decoration: none
}

.button:hover {
	background: var(--color-yellow);
	color: var(--color-black);
}

/* 
 * évite dimensionnement des radios, checkboxes et images
 * et un affichage différent sous IE 
 */
input[type="radio"],
input[type="checkbox"],
input[type="image"] {
  background-color: transparent;
  border: 0;
  width: auto;
}

/* pour annuler la taille des inputs ou autres */
.auto {
  width: auto;
}

/* messages d’erreur ou de confirmation */
.alert,
.alert input,
.alert textarea,
.alert select {
  color: #bf0000;
  font-weight: bold;
}
/* .redborder sert à débugger uniquement */
.alert input,
.alert textarea,
.alert select,
.redborder {
  border: 1px solid #bf0000;
}
.alert img {
  border: 0;
}
/*.ok {

}*/

/* 
 * peut être complété par les attributs HTML5 required
 * exemple avec une couleur, penser à ne pas uniquement transmettre l’info ainsi
 */
/*select:required:invalid,
input:required:invalid,
input:focus:invalid,
textarea:required:invalid,
textarea:focus:invalid {
  background: #fef6f6;
  -moz-box-shadow: none;
}

input:focus:required:valid,
textarea:focus:required:valid,
select:focus:required:valid {
  background: #efe;
  -moz-box-shadow: none;
}*/




/*
 *****************************************************************
 * 08 -- dans le contenu (contenus spécifiques aux pages)
 *****************************************************************
 */

/* home */





/*
 *****************************************************************
 * 09 -- breakpoints mineurs entre desktop et tablettes
 *****************************************************************
 */


@media (max-width: 1700px) {

.main { 
	margin-left: 265px; 
}

.serie .intro {
	max-width: calc(100% - 350px);
}

.ecriture .intro {
	max-width: calc(100% - 350px);
}

.serie .infos, .spacer {
	width: 350px;
	padding: 1em 1em 1em 1.5em;
}

.watermark {
}

}


/*
 *****************************************************************
 * 10 -- homo tablettes - breakpoint majeur
 *****************************************************************
 */ 

@media (max-width: 1200px) { /* equiv 768px */
   
  /**
   * layout/modules
   */

  /* affichage des éléments */
  .nodesktop { display: block; }

  /* cachage des éléments inutiles, chabitte ! */
  .notablet { display: none; }
  
  /* linéarisation contenus flottants/table-layout */
  .autotablet {
    float: none;
    display: block !important;
    width: auto;
  }

  /* margins */
  .ontablet-mt0 { margin-top: 0; }
  .ontablet-mt1 { margin-top: 1em; }
  .ontablet-mt2 { margin-top: 2em; }
  .ontablet-mr0 { margin-right: 0; }
  .ontablet-mr1 { margin-right: 1em; }
  .ontablet-mr2 { margin-right: 2em; }
  .ontablet-mb0 { margin-bottom: 0; }
  .ontablet-mb1 { margin-bottom: 1em; }
  .ontablet-mb2 { margin-bottom: 2em; }
  .ontablet-ml0 { margin-left: 0; }
  .ontablet-ml1 { margin-left: 1em; }
  .ontablet-ml2 { margin-left: 2em; }
  .ontablet-m0  { margin: 0; }
  .ontablet-m1  { margin: 1em; }
  .ontablet-m2  { margin: 2em; }

  /* paddings */
  .ontablet-pt0 { padding-top: 0; }
  .ontablet-pt1 { padding-top: 1em; }
  .ontablet-pt2 { padding-top: 2em; }
  .ontablet-pr0 { padding-right: 0; }
  .ontablet-pr1 { padding-right: 1em; }
  .ontablet-pr2 { padding-right: 2em; }
  .ontablet-pb0 { padding-bottom: 0; }
  .ontablet-pb1 { padding-bottom: 1em; }
  .ontablet-pb2 { padding-bottom: 2em; }
  .ontablet-pl0 { padding-left: 0; }
  .ontablet-pl1 { padding-left: 1em; }
  .ontablet-pl2 { padding-left: 2em; }
  .ontablet-p0  { padding: 0; }
  .ontablet-p1  { padding: 1em; }
  .ontablet-p2  { padding: 2em; }
  
  /* alignements de textes */
  .ontablet-alignleft   { text-align: left; }
  .ontablet-aligncenter { text-align: center; }
  .ontablet-alignright  { text-align: right; }

  /**
   * adaptation structure globale (page / skip links / header / contenu principal / footer)
   */
  body::before {
    content: 'tablet';
  }
  
  /**
   * dans le contenu (contenus spécifiques aux pages)
   */
   
   .header {
	   position: relative;
	   width: calc(100% - 4em);
	   height: auto;
	   display: block;
   }
   
   .header .flex {
	   width: 100%;
	   height: auto;
	   display: flex;
	   flex-direction: row;
     margin-bottom: 0;
   }
   
   .logo {
	   width: 200px;
      height: auto;
   }
   
   .rsalc { display: none; }
   
   .main {
	   margin: 0 2em 2em 2em;
   }
   
   .serie, .web, .ecriture {
     margin: 2em 0;
   }
   
   .web, .ecriture, .infos, .intro {
		width: 100% !important;
		max-width: 100% !important;
	}
  
    .web .intro,
    .ecriture .intro {
      text-align: center;
      margin: 0 auto;
      padding-bottom: 2em;
      position: relative !important;
    }
  
    .web .intro2,
    .ecriture .intro2 {
      text-align: center;
      width: 100%;
    }
	
	.intro img {
		border-radius: 10px 10px 0 0;
		width: 100% !important;
	}
  
    .ecriture .intro img {
		border-radius: 10px ;
    }
    
    .ecriture .infos {
        position: unset !important;
    }
    
    .ecriture .infos-content {
        position: relative;
        z-index: 2
    }
  
	.serie .infos {
		width: 100%;
		padding: 1em;
		background: var(--color-lightgrey);
		border-radius: 0 0 10px 10px ;
	}
  
    .watermark {
        bottom: inherit !important;
        top: 0;
        z-index: 1;
        opacity: .5;
    }
	
	.intro:hover img { box-shadow: none; }
  
  .displaymenu { 
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  top:-1em;
  right: -1em;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 777777;
}

.displaymenu span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: var(--color-black);
  border-radius: 10px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.displaymenu span:nth-child(1) {
  top: 0px;
}

.displaymenu span:nth-child(2) {
  top: 10px;
}

.displaymenu span:nth-child(3) {
  top: 20px;
}

.displaymenu[aria-expanded=true] span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  background: var(--color-black);
}

.displaymenu[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
  left: -60px;
  background: var(--color-black);
}

.displaymenu[aria-expanded=true] span:nth-child(3) {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  background: var(--color-black);
}
  
.navigation-container[aria-hidden=true] {
  transform: translateX(100%);
}

.navigation-container[aria-hidden=false] {
  transform: translateX(0%);
}

.navigation-container {
  position: fixed;
  background: var(--color-white);
  padding: 6em .5em 2em .5em;
  right: 0;
  width: 100%;
  height: 100vh;
  display: block;
  z-index: 888;
  top: 0;
  right: 0;
  transition: transform 0.4s ease;
  text-align: center;
}


   
   .navigation--container {
	   height: auto;
	   display: flex;
	   width: calc(100% - 200px);
	   flex-direction: row-reverse;
   }
   
   .menu .menu-item {
	   margin: 0 0 2em 0 !important;
   }
   
   .menu a {
     font-size: 25px;
   }
   
   .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
     width: 100% !important;
     margin-bottom: 2em;
   }
   
   .background {
     display: none;
   }

}




/*
 *****************************************************************
 * 11 -- breakpoints mineurs entre tablettes et mobile
 *****************************************************************
 */






/*
 *****************************************************************
 * 12 -- mobile - breakpoint majeur
 *****************************************************************
 */

@media (max-width: 40em) { /* equiv 640px */

  /**
   * layout/modules
   */

  /* affichage des éléments */
  .notablet { display: block; }

  /* cachage des éléments inutiles, chabitte ! */
  .nomobile { display: none; }

  /* linéarisation contenus flottants/table-layout */
  .automobile {
    float: none;
    display: block;
    width: auto;
  }
  
  /* margins */
  .onmobile-mt0 { margin-top: 0; }
  .onmobile-mt1 { margin-top: 1em; }
  .onmobile-mt2 { margin-top: 2em; }
  .onmobile-mr0 { margin-right: 0; }
  .onmobile-mr1 { margin-right: 1em; }
  .onmobile-mr2 { margin-right: 2em; }
  .onmobile-mb0 { margin-bottom: 0; }
  .onmobile-mb1 { margin-bottom: 1em; }
  .onmobile-mb2 { margin-bottom: 2em; }
  .onmobile-ml0 { margin-left: 0; }
  .onmobile-ml1 { margin-left: 1em; }
  .onmobile-ml2 { margin-left: 2em; }
  .onmobile-m0  { margin: 0; }
  .onmobile-m1  { margin: 1em; }
  .onmobile-m2  { margin: 2em; }

  /* paddings */
  .onmobile-pt0 { padding-top: 0; }
  .onmobile-pt1 { padding-top: 1em; }
  .onmobile-pt2 { padding-top: 2em; }
  .onmobile-pr0 { padding-right: 0; }
  .onmobile-pr1 { padding-right: 1em; }
  .onmobile-pr2 { padding-right: 2em; }
  .onmobile-pb0 { padding-bottom: 0; }
  .onmobile-pb1 { padding-bottom: 1em; }
  .onmobile-pb2 { padding-bottom: 2em; }
  .onmobile-pl0 { padding-left: 0; }
  .onmobile-pl1 { padding-left: 1em; }
  .onmobile-pl2 { padding-left: 2em; }
  .onmobile-p0  { padding: 0; }
  .onmobile-p1  { padding: 1em; }
  .onmobile-p2  { padding: 2em; }
  
  /* alignements de textes */
  .onmobile-alignleft   { text-align: left; }
  .onmobile-aligncenter { text-align: center; }
  .onmobile-alignright  { text-align: right; }

  /**
   * adaptation structure globale (page / skip links / header / contenu principal / footer)
   */
  body::before {
    content: 'mobile';
  }
  
  /**
   * dans le contenu (contenus spécifiques aux pages)
   */

}




/*
 *****************************************************************
 * 13 -- breakpoints mineurs tout petit mobile
 *****************************************************************
 */

@media (max-width: 20em) { /* equiv 320px */

  /**
   * layout/modules
   */

  /* affichage des éléments */
  /*.nomobile { display: block; }*/

  /* cachage des éléments inutiles ! */
  .notinymobile { display: none; }

  /* linéarisation contenus flottants/table-layout */
  .autotinymobile {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * adaptation structure globale (page / skip links / header / contenu principal / footer)
   */
  body::before {
    content: 'tinymobile';
  }
  
  /**
   * dans le contenu (contenus spécifiques aux pages)
   */

}





/*
 *****************************************************************
 * 14 -- print
 *****************************************************************
 */

@media print {

  /* Fixe un bug délirant de Edge au print */
  html {
      -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  /** 
   * ajouter là-dedans les éléments qui ont besoin d’être
   * resetés de manière très bourrine pour le print
   */
  body,
  html,
  .page,
  .reset4print {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    max-height: none;
    display: block;
  }

  body {
    padding: .5em;
    overflow: auto;
  }

  /* cachage des éléments inutiles, chabitte ! */
  .noprint {
    display: none;
  }
  
  /* affichage éléments spécifiques au print */
  .onprint {
    display: block;
  }
  
  /* éviter saut de page hasardeux */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }
  
  /* affichage des liens, sauf pour image contenue */
  /* attention, penser à vérifier le résultat et penser 
   * à limiter cette possibilité aux liens dans le contenu */
  /*a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }*/

  /* ici fix propriétés particulières */


} /* end print */




/*
 *****************************************************************
 * 15 -- fix viewport
 *****************************************************************
 */

/* fix viewport pour Win8 (snap mode) et préparer le jour 
 * où le viewport sera supporté par tous les moteurs 
 *  
 * Exemples : http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
 * width=device-width   => width: device-width;
 * height=device-height => height: device-height;
 * initial-scale=2      => zoom: 2;
 * maximum-scale=2      => max-zoom: 2;
 * minimum-scale=0.5    => min-zoom: 0.5;
 * user-scalable=no     => user-zoom: fixed;
 * 
 * pour le snap mode de Win8 => seul width: device-width; fonctionne pour l’instant  
 */

@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}




/*
 *****************************************************************
 * 16 -- règles d’état
 *****************************************************************
 */

/*
 * Règles d’état = mises en bas pour être prioritaires
 *
 */

/*
.is-hidden,
[aria-hidden=true] {
  display: none;
}
*/




/*
 *****************************************************************
 * 17 -- bonus : Fixes IE
 *****************************************************************
 */

/*  
 * basé sur les classes conditionnelles sur l’élément HTML
 *  
 * à utiliser seulement si peu de corrections et 
 * pas d’impact sur les perfs sur les autres navigateurs
 *       
 */

/* less than IE 9 */
.oldies .nooldies {
  display: none;
}

.ie6 .noie6 {
  display: none;
}
.ie7 .noie7 {
  display: none;
}
.ie8 .noie8 {
  display: none;
}
.ie9 .noie9 {
  display: none;
}

.ie7 .col,
.ie7 .col-noalign,
.ie6 .col,
.ie6 .col-noalign {
  float: left;
}
.ie7 .row,
.ie6 .row {
  overflow: auto;
}

/* RTL */
[dir="rtl"] .ie7 .col,
[dir="rtl"] .ie7 .col-noalign,
[dir="rtl"] .ie6 .col,
[dir="rtl"] .ie6 .col-noalign {
  float: right;
}