/*
Theme Name: sionsortait
Theme URI: 
*/

/* Bases */
/* 
pour minifier : https://www.cleancss.com/css-minify/ 
deux css minifiées puis fusionnées, la seconde contient les css des différents plugins
la css originale que je minifie
je minifie ensuite celles des différents plugins et empêche leur chargement
chacune sera sur une ligne de la css finale
* 
mes ajouts temporaires : dans un premier temps ajoutés non minifiés à la fin de la css finale
pour tester l'efficacité et l'intérêt : https://gtmetrix.com/
parce que finalement ça ne fait rien de mieux qu'autoptimize ??
*/
* {
  box-sizing: border-box;
}
html {
	height:101%;	/* on a toujours une barre de défilement verticale */
}
body {
	text-align: left;
/*	margin:0;*/
}
body{
	--blanc:#fff;
	--noir:#000;
	--gris:#434343;
	--bleu_sombre:#06569d;
	--bleu_clair:#177fb2;
	--bleu_blanc:#deeff4;
	--orange_sombre:#ff7f00;
	--orange_clair:#fff7eb;
	--orange_clair:#ff7f0029;
	--jaune:#fffb87;
	--fond_body:var(--blanc);
	--fond_wrapper:transparent;
	--fond_cadre:var(--blanc);
	--fond_menu_clair:var(--orange_clair);
	--fond_menu_sombre:var(--orange_sombre);
	--texte_menu:var(--blanc);
	--texte_menu_actif:var(--noir);
	--texte_logo:var(--orange_sombre);
	--fond_header:transparent;
	--fond_cadres_droite:var(--bleu_blanc);
	--fond_cadres_impair:var(--bleu_blanc);
	--fond_cadres_pair:var(--orange_clair);
	--arrondi_bloc:15px;
	--arrondi_bloc2:10px;

	font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
	line-height:1.3em;
/*	font-size:14px;*/
	color:#333;
	background:var(--fond_body);
	margin:10px auto;
	max-width:1200px;
	background-image:linear-gradient(rgba(0,0,0,0),rgba(255,255,255,0)),url(https://www.si-on-sortait.fr/templates/fond/printemps-2022.jpg);
	background-repeat:no-repeat;background-position:50%;background-attachment:fixed;background-size:100%
	}
#page {
	background: #fff;
	margin: 0 auto;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
}
a {
	text-decoration: none;
	color: #45bbe6;
}
img {
	max-width: 100%;
	height: auto;
}

/* header */ 
header {
	height: 200px;
/*	color: white;*/
}
header hgroup{
	height: 200px;
	width:100%;
}
#logo {
  float:left;
  padding: 0;
  width:600px;
  text-align:left;margin-top:8px;
}
#logo p {
	margin: 20px 0;
	padding: 0;
	text-align: center;
	font-size: 1.5em;
	color: var(--texte_logo);
	line-height: 1.8em;
}
#logo a, #logo a:link, #logo a:hover {
	font-size: 3.5em;
	color: var(--texte_logo);
	text-decoration: none;
	font-family: Forte,sans-serif;
}
@font-face {
font-family: 'Forte';
src: url('https://www.si-on-sortait.fr/templates/police/forte.ttf') format('truetype');
/*src: url('https://www.si-on-sortait.fr/templates/police/forte.otf') format('truetype');*/
font-weight: normal;
font-style: normal;
}
.initiale {
  font-size: 120%;
  text-shadow: -2px -4px 3px var(--orange_clair);
}
header nav {
	float: left;
	width:100%;
	background-color: var(--fond_menu_sombre);
}
header nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
header nav li {
	display: inline-block;
}
header nav a {
	display: block;
	color: var(--texte_menu);
	font-weight: bold;
	padding: 20px;
	line-height: 35px;
	transition: color .2s;
}
header nav a:hover{
	color: #5fd249;
	transition: color .5s;
}
/*hgroup p {	position:absolute;	top:0;	left:-10000px;}*/

/* main */ 
main.wp-content {
	display: flex;
	flex-direction:row;
	width: 100%;
	background: #FFF;
}
main.wp-content section {
	flex: 4;
	padding: 20px;
}
main.wp-content aside {
	flex: 1;
	padding: 20px;
	min-width:300px;
	max-width:330px;
	min-height:500px;
}

/* articles */
.blog .post {
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.post h2 a{
	font-weight: normal;
}
.post__metas {
	text-align: center;
	font-size: .8em;
	color: #888;
	margin-bottom: 10px;
} 
.post__link {
	text-align: right;
	margin-bottom: 0;
}
.post__categories ul {
	display: inline-block; 
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.post__categories li {
	display: inline-block; 
	margin: 0;
}

/* WP Content */
.wp-content p{
	margin: 1.2em 0;
}
.wp-content figure {
/*	width: auto !important;*/
}
.wp-content .wp-caption-text {
	text-align: center;
	color: #d7d7d7;
	font-size: 1rem;
}

/* sidebar */
aside > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
aside > ul > li {
	margin-bottom: 40px;
}
aside h2 {
	margin-top: 0;
}

/* single */
.div_thumbnail, figure {
	float:right;
}
.div_thumbnail caption{
	float:right;
}
/*
.thumbnail, figure img {	// images arrondies sur mrk
	border-radius: 10%;
	overflow: hidden;
}
*/
figcaption {
	text-align:center;
	font-size:80%;
}

.posts-nav {
  display: flex;
  margin-top: 40px;
  color: #666;
  padding-top: 20px;
  border-top: 1px solid #DFDFDF;
}
.posts-nav div {
  flex: 1;
}
.posts-nav div:last-child {
  text-align: right; 
}

/* archive */
.post.archive h2 {
	padding-top:0;
	text-align:center !important;
}
.lien-cache {
    cursor: pointer;
}
@supports (grid-area: auto) {
    /* Code qui sera effectué sur la déclaration grid-area: auto est supporté */ 
	.ingrid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-gap: 2rem;
	}
    .article.ingrid {
        margin: initial;
        width: initial;
    }   
    .post__thumbnail{
		margin: 0 auto;
		width:250px;
		height:250px;
		border-radius: 10%;
		overflow: hidden;
    }   
    .post__thumbnail a{
		height:100%;
    }   
}

/* footer */
footer {
  font-size: .9em;
/*  margin: 30px 0 10px 0;*/
  padding: 35px;
  border-top: 1px solid #ccc;
}
footer .credits {
  float: left;
  color: #999;
  margin: 0;
}
footer nav {
  float: right;
}
footer nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
footer nav li {
  display: inline-block;
}
footer nav a {
  display: block;
  color: #888;
  padding: 0 0 0 10px;
  line-height: 35px;
  transition: color .2s;
}
footer nav a:hover {
  color: #45bbe6;
}

img.alignright { margin: 0 0 1em 1em; }
img.alignleft { margin: 0 1em 1em 0; }
img.aligncenter { margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.screen-reader-text {display:none;} 	/* ne pas afficher le texte devant le form de recherche */

/*--------------------------------------------------------------
5.0 Typography
--------------------------------------------------------------*/
html {
	font-size: .625em; /* fallback IE8+ */
	font-size: calc(1em * .625); /* IE9-IE11 math fixing. */
}
body,
button,
input,
select,
textarea {
	color: #333;
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
	font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
/*	font-weight: 400;*/
/*	line-height: 1.66;*/
}
button,
input,
select,
textarea {
	color: #111;	/* couleur des boutons : le blanc du reste du site s'affiche mal */
	}
h1,
h2,
h3,
h4,
h5,
h6 {
/*	clear: both;*/
	line-height: 1.4;
	margin: 0 0 0.75em;
	padding: 1em 0 0;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	padding-top: 0;
}

h1 {
	font-size: 30px;
	font-size: 3rem;
	font-weight: bold;
	letter-spacing: -1px;
	margin-bottom:10px; 
	padding: 0.5em 0 0 0.5em;
	text-align:center;
}
h2, .home.blog .entry-title, p.widget-title {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom:10px; 
}
h3 {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 300;
}
h4 {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 800;
}
h5, h6 {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: normal;
}
h6 {
	text-decoration: underline;
}
p {
	margin: 0 0 1.5em;
	padding: 0;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
blockquote {
	color: #666;
	font-size: 18px;
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.7;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
blockquote cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	margin-top: 0.5em;
}
address {
	margin: 0 0 1.5em;
}
pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}
code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}
abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
mark,
ins {
	background: #eee;
	text-decoration: none;
}
big {
	font-size: 125%;
}
blockquote {
	quotes: "" "";
}
q {
	quotes: "“" "”" "‘" "’";
}
blockquote:before,
blockquote:after {
	content: "";
}
:focus {
	outline: none;
}

/*--------------------------------------------------------------
5.1 gallerie photos
--------------------------------------------------------------*/
#gallerie {
	width:620px;
}
#container {
	margin:0;
	padding:0;
	overflow:auto;
	height:330px;
}
#container ul {
	margin:0;
	padding:0;
	list-style:none;
	display: table-row;
	white-space: nowrap;
}
#container ul li {
	display: table-cell;
	padding:0 10px;
	vertical-align: top;
}
#container img {
/*	max-height:280px;*/
	max-width:280px;
}

/*--------------------------------------------------------------
 tableaux responsive
--------------------------------------------------------------*/
table {
	border: 1px solid #ccc;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
}
table tr {
	background: #f8f8f8;
	border: 1px solid #ddd;
	padding: .35em;
}
table th, table td {
	padding: .625em;
    vertical-align: top;
}
table th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	background-color: #d9edf7;
    font-weight: 700;
    vertical-align: middle;
}
td[data-label="Note"] {
    width:100px;
	text-align: center;
	padding: .625em .3em;
}
table .even td {
    background-color: #fff;
}
table .even td {
    background-color: #f9f9f9;
}
table img {
    margin: 0;
    padding: 0;
    border: none;
    max-width: none;
}
.comparatif h3 {
    margin: 0;
    text-align: center;
    font-weight: 700;
}
/*--------------------------------------------------------------
 fil d'Ariane
--------------------------------------------------------------*/

p#breadcrumbs{margin-top:10px;;font-family:inherit;color:rgb(160, 160, 160);font-size: 80%;}

/*--------------------------------------------------------------
 menu
--------------------------------------------------------------*/
/* http://juliencrego.com/menu-deroulant-horizontal-100-css/ */

#menu-principal, #menu-entest { 
	display:inline;
}
#menu-principal, #menu-principal ul, #menu-entest, #menu-entest ul { /* supprimer puces et marges pour les listes du menu et les sous-menus */
    list-style-type: none; 
    margin: 0px;
    padding: 0px;
	float:left;
}
#menu-entest, #menu-entest ul { /* le menu supp est à droite */
    float:right;
}
#menu-principal ul, #menu-entest ul {	/* masquer les sous-menus  */
    display: none;
}
#menu-principal li, #menu-entest li {	/* positionner les éléments de premier niveau du menu pour qu’ils se positionnent horizontalement */
    display: inline-block;
    position: relative;
}

#menu-principal a, #menu-entest a {		/* mise en forme des liens du menu */
    display: block;
    width: auto;
    line-height: 30px;
    padding: 3px 10px;
    text-align: center;
    font-size:120%;
}
#menu-principal li:hover ul, #menu-entest li:hover ul {	/* forme des sous-menu lorsque une ligne du menu principal est survolée */
    display: block ;
    position: absolute;
    top: 36px; 
    left: 0px; 
    z-index: 100; 
}
#menu-principal ul a, #menu-entest ul a {
    display: block;
}
#menu-principal li, #menu-entest li {
//    background-color: #990031; /* Couleur d'arriere-plan du menu */
}
#menu-principal li a, #menu-entest li a {
//    color: #FFF; /* Couleur du texte du menu */
}
#menu-entest li a {
    color: #F99; /* Couleur du texte du menu de test */
}
#menu-principal li:hover, #menu-entest li:hover {
    background-color: #FFF; /* Couleur d'arriere-plan du menu au survol */
}
#menu-principal li:hover a, #menu-entest li:hover a {
    color: #990031; /* Couleur du texte du menu au survol */
}
#menu-principal ul li, #menu-entest ul li {
    background-color: #FFF; /* Couleur d'arriere-plan des sous-menu */
    width:100%;
}
#menu-principal ul li:hover, #menu-entest ul li:hover {
    background-color: #FFF; /* Couleur d'arriere-plan des sous-menu au survol */
}
#menu-principal ul li a, #menu-entest ul li a {
    color: #990031; /* Couleur du texte des sous-menu */
	text-align: left;
}
#menu-principal ul li:hover a, #menu-entest ul li:hover a {
    color: #AD2 ; /* Couleur du texte des sous-menu au survol */
}

/*--------------------------------------------------------------
 Responsive
--------------------------------------------------------------*/
@media screen and (max-width: 50em) {	/* 800 à 1000px */
	#page {
		max-width: 100%;
	}
	main section {
		display: block;
		width: 100%;
	}
    h1 {font-size:2em;   }
	header p span{
		font-size: 6vw;
    }
}
@media screen and (max-width: 40em) {  /* 640 px */
	#page {
		max-width: 100%;
	}
	main section {
		display: block;
		width: 100%;
	}
    main  {
        flex-direction: column;
    }
    h1 {font-size:1.5em;   }
	header p span, header h1 span{
		font-size: 6vw;
    }
}
@media screen and (max-width: 30em) {  /* 480 px */
	/* layout */
	#page {
		max-width: 100%;
	}
	main {
		display: block;
		width: 100%;
	}
	header hgroup{
		height:17vh;	/* hauteur proportionnelle à la largeur de la page */
	}
	header hgroup p {
		margin:10px;	/*  page */
	}
	/* typo */
    h1 {
        font-size:1.2em;
    }
	header p {
		font-size: 5.4vw;
    }
	.ingrid{
        display: block;
	}
}

.product-container {
	display: flex;
	flex-direction: row;
	border: 1px solid #99e164; 
	border-radius: 6px; 
	box-shadow: 0 5px 6px -6px #99e164;
	padding:0 10px 10px;
}
.product-container-gauche {
	width:310px;
}
.product-container-droite {
	width:calc(100% - 320px);
	padding:0 10px;
}
.productImg {
	margin:2em auto 0;
}

/*-------------------------------------------------*/
/* boutons amazon */
/*-------------------------------------------------*/

.lnk {
    cursor:pointer;
    }
.AmznBtn  {
    display: block;
    height: auto;
    width: fit-content;
    margin: 10px auto;
}
.AmznBtn a {
    color:white;
}
.AmznBtn span {
    padding: .5em .8em;
    margin: .5em;
    display:block;
    text-align: center;
    font-size: 1.4em;
    background: #99e164;
    color:white;
/*    background: linear-gradient( #ff9100,#ffab3d);*/
    border-radius: .6em;
    box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.4);
}

.voirTouteCategorie {
    display: block;
    height: auto;
    width: fit-content;
    margin: 10px auto 15px;
}
.voirTouteCategorie a {
    color:white;
}
.voirTouteCategorie span {
    padding: .5em .8em;
    margin: .5em;
    display:block;
    text-align: center;
    font-size: 1.4em;
/*    background: #99e164;*/
    background: #5da21a;
    color:white;
    border-radius: .6em;
    box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.4);
}

/*-------------------------------------------------*/
/* liste des derniers articles de la PA            */
/*-------------------------------------------------*/
.presPageAccueil   { 
	display: block;
    width: 70%;
    margin: 0 auto;
	}
.pair {
    padding: 0 10px 10px 0;
    background-color: var(--fond_cadres_pair);
	}
.impair {
    padding: 0 10px 10px 0;
    background-color: var(--fond_cadres_impair);
	}
	
#listeCategoriesNews   { 
    display: block;
    height: auto;
    width: fit-content;
    margin: 10px auto;
	}
#listeCategoriesNews h2  { 
    width: fit-content;
    margin: 10px auto;
	}
.listeCategoriesUneNews   { 
    display: block;
    height: auto;
    width: fit-content;
    margin: 10px auto;
	display: grid;
/*	grid-template-columns: 40% calc( 30% - 1rem) calc( 30% - 1rem); */
    grid-template-columns: 40% repeat(auto-fill, minmax(270px, 1fr));
	grid-gap: 1rem;
	}
.listeCategoriesUneNews div  { 
    padding: 5px;
	}
.firstCol   {
    grid-column: 1 / 2;
   	grid-row: span 3; 
}
.secondCol hr  {
    clear:both; 
    visibility: hidden;
}
.vignetteNews   {
    width: 90px;
    float:left;
	margin-right: 10px;
}
.vignetteFirstNews   {
    width: 250px;
    margin:0 auto;
    float:none;
}
h3.categoriesNews {
	padding:0;
	}
h3.categoriesNews a {
	color:black;
	}
@media screen and (max-width: 1000px) {
	.listeCategoriesUneNews   { 
		grid-template-columns: repeat(2, minmax(270px, 1fr));
		grid-gap: 1rem;
		}
	.firstCol   {
		grid-column: span 2; 
	}
	.vignetteFirstNews   {
		margin-right: 10px;
		float:left;
	}
	.vignetteNews   {
		width: 150px;
	}
}
@media screen and (max-width: 700px) {	
	.vignetteNews   {
		width: 90px;
	}
}
@media screen and (max-width: 600px) {	
	.vignetteNews   {
		width: 150px;
		float:none;
		margin:0 auto;
	}
}
@media screen and (max-width: 480px) {	
	.presPageAccueil   { 
		width: 90%;
		}
	.listeCategoriesUneNews   { 
		grid-template-columns: minmax(270px, 1fr);
		}
	.firstCol   {
		grid-column: 1; 
	}
	.vignetteFirstNews   {
		margin:0 auto;
		float:none;
	}
	.vignetteNews   {
		width: 90px;
		margin-right: 10px;
		float:left;
	}
}




/* ==================================== */
/* --- MENU RESPONSIVE (v2025) -------- */
/* ==================================== */
.menu-toggle {
  display: none;
  cursor: pointer;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 10px;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background: #333;
  transition: 0.3s;
}

/* Animation croix */
.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile version */
@media screen and (max-width: 800px) {
  header nav ul {
    display: none;
    flex-direction: column;
/*    background: #f5f5f5;*/
    padding: 10px;
  }
  header nav ul.show {
    display: flex;
  }
  header nav li {
    display: block;
    border-bottom: 1px solid #ddd;
  }
  header nav a {
    padding: 12px 10px;
    display: block;
  }
  .menu-toggle {
    display: block;
  }
}





/* ===== Sidebar responsive propre ===== */

/* Mobile-first (≤ 600px) : pile en colonne, aside en bas, pleine largeur */
main.wp-content{
  display:flex;
  flex-direction:column;        /* <= clé ici */
  align-items:stretch;
}
main.wp-content section{
  order:1;
  width:100%;
  padding:20px;                 /* déjà présent, on confirme */
}
main.wp-content aside{
  order:2;                      /* après le contenu */
  width:100%;                   /* pleine largeur */
  max-width:none;
  min-width:0;                  /* neutralise min-width:300px du style desktop */
  padding:20px;
  margin:0;                     /* pas de marge latérale en mobile */
}

/* ≥ 700px : layout en rangée, aside à droite en colonne fixe */
@media (min-width: 700px){
  main.wp-content{
    flex-direction:row;         /* repasse en ligne à partir de 600px */
    align-items:flex-start;
    gap:0;                      /* optionnel : gère l’écart via la marge de l’aside */
  }
  main.wp-content section{
    order:0;
    flex:1 1 auto;              /* prend l’espace restant */
    width:auto;
  }
  main.wp-content aside{
    order:0;
    flex:0 0 320px;             /* colonne droite d’environ 320px */
    max-width:330px;
    min-width:300px;
    min-height:500px;           /* si tu y tiens, sinon retire */
    margin-left:20px;           /* espace entre contenu et aside */
  }
}

/* Optionnel : aside “collant” sur les écrans plus larges */
@media (min-width: 900px){
  main.wp-content aside{
    position:sticky;
    top:20px;
  }
}