/*
Theme Name: SFR site d'assistance Support fonctionnel V3
Theme URI: https://assistance.utilisateur-relationclient.sfrbusiness.fr/
Author: Matthew Lalloué et Laurent Saniel.
Description: Refonte graphique du site visant à améliorer l’accessibilité numérique, en conformité avec les standards WCAG/RGAA, tout en garantissant une expérience utilisateur optimale sur tous les supports : ordinateurs, smartphones et tablettes.
Version: 1.0
*/

/* Déclarations @font-face */
@font-face {
	font-family: 'SFR-Bold';
	src: url(//static.s-sfr.fr/media/sfr-bold.woff2) format("woff2"),
		 url(https://static.s-sfr.fr/media/v2/assets/fonts/SFR-Bold.woff) format("woff"),
		 url(https://static.s-sfr.fr/media/v2/assets/fonts/SFR-Bold.ttf) format("truetype"),
		 url('https://static.s-sfr.fr/media/v2/assets/fonts/SFR-Bold.svg#SFRBold') format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SFR-Regular';
	src: url(//static.s-sfr.fr/media/sfr-regular.woff2) format("woff2"),
		 url(https://static.s-sfr.fr/media/v2/assets/fonts/SFR-Regular.woff) format("woff"),
		 url(https://static.s-sfr.fr/media/v2/assets/fonts/SFR-Regular.ttf) format("truetype"),
		 url('https://static.s-sfr.fr/media/v2/assets/fonts/SFR-Regular.svg#SFRRegular') format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SFR-Black';
	src: url(//static.s-sfr.fr/media/sfr-black.woff2) format("woff2"),
		 url(https://static.s-sfr.fr/media/v2/assets/fonts/SFR-Black.woff) format("woff"),
		 url(https://static.s-sfr.fr/media/v2/assets/fonts/SFR-Black.ttf) format("truetype"),
		 url('https://static.s-sfr.fr/media/v2/assets/fonts/SFR-Black.svg#SFRBlack') format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: SFR-Regular;
	src: url(//static.s-sfr.fr/media/sfr-regular.woff2) format("woff2");
}

@font-face {
	font-family: SFR-Bold;
	src: url(//static.s-sfr.fr/media/sfr-bold.woff2) format("woff2");
}

@font-face {
	font-family: SFR-Black;
	src: url('//static.s-sfr.fr/resources/font/sfr-1.0-black-webfont.woff') format("woff");
}

@font-face {
	font-family: SFR-Thin;
	src: url('//static.s-sfr.fr/resources/font/sfr-1.0-thin-webfont.woff') format('woff');
}

@font-face {
	font-family: SFR-Light;
	src: url('//static.s-sfr.fr/resources/font/SFR-Light.woff') format('woff');
}

:root {
	--background-bottomnav: #ffffff;
	--color-bottomnav: #000000;
	--color-h2centre: #000000;
	--back-lafiche: #ffffff;
	--color-lafiche: #000000;
	--color-back-signature: #ffffff;
	--color-sommaire: #000000;
	--color-sommairehover: #e2001a;
	--color-basarticle: #3d3846;
	--largeur-fleche: 100px;
	--fleche-navrapide: #ffffff;
	--background-article: #ffffff;
	--color-article: #000000;
	--color-firstot: #555753;
	--color-balisea: #0000ee;
}

body {
	font-family: 'SFR-Regular', Arial, sans-serif;
	margin:0;
	padding:0;
	background-color: #ffffff;
}

body.dark-mode {
	--background-bottomnav: #555753;
	--color-bottomnav: #ffffff;
	--color-h2centre: #ffffff;
	--back-lafiche: #000000;
	--color-lafiche: #ffffff;
	--color-back-signature: #000000;
	--color-sommaire: #ffffff;
	--color-sommairehover: #9a9996;
	--color-basarticle: #888a85;
	background-color: #2e3436;
	--sfr-white: #888a85;
	--fleche-navrapide: #000000;
	--background-article: #000000;
	--color-article: #ffffff;
	--color-firstot: #ffffff;
	--color-balisea: #ffffff;
}

.cdp-copy-loader-overlay {
	display: none;
}

header {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 110px;
	background-color: var(--background-bottomnav);
	color: var(--color-bottomnav);
	border-bottom: solid 1px #000;
}


.le-only {
	display: none;
}

#top-nav {
	margin: 0 0 0 0;
	text-align: right;
	font: 11px/30px SB,Arial;
	height: 30px;
	padding: 0;
	background: #000;
	color: #fff;
} 

#top-nav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	float: right;
	margin: 0;
	padding-bottom: 0;
	list-style-type: none;
	text-transform: capitalize;
	font-size: 0.75rem;
	font-weight: bold;
}

#top-nav ul li {
	padding-left: 24px;
	padding-right: 10px;
}

#top-nav ul li a, #top-nav ul li a:link, #top-nav ul li a:visited, #top-nav ul li a:hover, #top-nav ul li a:active	{
	color: #fff;
	text-decoration: none;
	font-size: 0.7rem;
	margin: 1px;
}

#bottom-nav {
	width: 100%;
	padding: 0;
	margin: 0;
	margin: 10px 0 0 0;
	padding-top: 16px;
	display: flex;
	align-items: stretch;
}

#bottom-nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#bottom-nav li {
	float: left;
	margin-left: 20px;
	color: var(--color-bottomnav);
}

.search-form {
	display: flex;
	align-items: center;
	border-radius: 10px;
	overflow: hidden;
	background-color: #212223;
	width: 540px;
	height: 59px;
	margin: -15px auto 0 auto;
	transform: translateX(120px);
	padding: 0;
	box-shadow: -3px 1px 3px rgb(108 99 99 / 63%);
	border: solid 1px #000;
}

.search-select {
	border: 2px solid transparent;
	background-color: #212223;
	color: white;
	padding: 10px;
	appearance: none;
	font-size: 1.2rem;
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
}


.search-select:focus search-form {
/*	border: 1px solid blue;*/
	background-color: none;
	border: none;
	outline: auto;
	outline-offset: 2px;
	z-index: 1;
}

.search-select option:hover {
	border: 2px solid #ffffff;
}

.search-input {
	border: none;
	padding: 10px;
	flex-grow: 1;
	font-size: 1.2rem;
	height: 40px;
	z-index: 10000;
}

.search-input:focus {
	outline: auto;
	outline-offset: -2px;
	z-index: 1;
}

.search-button {
	border: none;
	background-color: #212223;
	padding: 0;
	margin: 0;
	cursor: pointer;
	width: 50px;
	z-index: 1000;
}

.search-button img {
	min-width: 30px;
	height: 30px;
}

.search-button:focus search-form{
	outline: auto;
	outline-offset: 6px;
	z-index: 1;
}

.spacer2 {
	flex-grow: 0.7;
}

.bordinferieur a, .bordinferieur a:link, .bordinferieur a:visited, .bordinferieur a:hover, .bordinferieur a:active {
	color: var(--color-bottomnav);
	padding-bottom: 25px;
	text-decoration: none;
}

.bordinferieur a:hover{
	border-bottom:4px solid #dd0000;
	padding-bottom: 20px;
	text-decoration: none;
}

#LogoSFR {
	margin-left: 10px;
}

#LogoSFR img {
	height: 54px;
	margin-top: -15px;
	margin-left: 30px;
}

#mobileMenu {
	display: none;
}

.formrecherche {
	width: 25%;
	margin:0;
	margin-top:-10px;
	margin-left:15%;
	padding: 0;
	border-left: 1px solid black;
	border-right: 0;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-radius: 15px;
	color: #babdb6;
}

.selectcategorie {
	appearance: none;
	border: none;
	background-color: #ffffff;
	cursor: pointer;
	color: #000000;
	font-size: 1rem;
	text-align: center;
	border-right: 1px solid #000000;
}

.selectcategorie option:hover {
	background-color: red;
	color: white;
}

.search-btn {
	height: 51px;
	width: 48px;
	border-left: 0;
	border-right: 1px solid black;
	border-top: 1px solid red;
	border-bottom: 1px solid red;
	border-radius: 0 11px 11px 0;
	background-color: red;
	margin: 0 0 0 2px;
	padding: 0;
}

.search-btn img {
	margin-left: 5px;
}

.inputchamps, .inputchamps:hover, .inputchamps:focus, .inputchamps:active {
	border: none;
	width: 75%;
	margin: 0 0 0 10px;
	font-size: 1rem;
}

.inputchamps::placeholder{
	color: #babdb6;
}

#nav-droite li{
	margin: 6px;
}


.bouton, .bouton:hover, .boutoncentre {
	font-size: 1rem;
	font-weight: bold;
	padding: 12px 12px;
	margin: -6px 0 0;
	color: white;
	width: auto;
	border-radius: 8px;
	background: #e2001a;
	box-shadow: 0 4px 8px #9003;
	transition: box-shadow .2s;
	text-decoration: none;
	user-select: none;
}

.boutoncentre {
	margin: 0 auto;
}

#conmenuhaut {
	margin-right: 30px;
}

#btn-menu {
	margin-right: 23px;
	margin-top: -9px;
}
/* Styler le conteneur du checkbox */
.custom-checkbox {
	width: 127px;
	height: 43px;
	display: flex;
	align-items: center;
	cursor: pointer;
}


/* Masquer la case à cocher par défaut */
.custom-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.custom-checkbox input[type="checkbox"]:focus {
/*	border: 2px solid #0060df;*/
	outline: auto;
}


/* Styler l'image du checkbox */
.checkbox-image {
	width: 127px;
	height: 41px;
	background-image: url('img/DarkMode.png'); 
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 10px;
}

/* Changer l'image lorsque le checkbox est coché */
.custom-checkbox input[type="checkbox"]:checked + .checkbox-image {
	width: 127px;
	height: 41px;
	background-image: url('img/LightMode.png'); 
	border: 0;
}

.custom-checkbox input[type="checkbox"]:focus + .checkbox-image {
/*	border: 2px solid #0060df;*/
	outline: auto;

}


.titre_home {
	font-family: SFR-Bold, Arial;
	padding:0;
	margin:0;
	margin: 20px 20px 0px 20px;
	font-size: 3.2rem;
}

.les-solutions {
	font-family: 'SFR-Bold', Arial, sans-serif;
	background-image: url('img/fondSF_v3.jpg');
	background-size: cover;
	font-size: 1.25rem;
	color: #fff;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin:0;
	margin-top: 100px;
}

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 10px; 
	margin-top: 0px;
	width: 220px;
	height: 180px; 
	border: 4px solid transparent; 
	border-radius: 10px;
	box-sizing: border-box; 
}


.item a, .item a:link, .item a:visited, .item a:active {
	color: #ffffff;
	text-decoration: none;
	outline:none;
}

.item a:hover, .item a:focus {
	margin: 0;
	padding:0;
	margin-top: -11px;
	padding: 6px;
	width: 220px;
	height: 180px; 
	border: 4px solid #ffffff; 
	border-radius: 10px;
	box-sizing: border-box; 
	transform: scale(1.15);
}

.item img {
	max-width: 100px; 
	height: auto;
	width: 60px;
	margin-bottom: 10px;
}

.item p {
	margin: 10px 0 0;
	font-size: 1.25rem;
	font-family: 'SFR-Black', Arial, sans-serif;
	text-transform:uppercase;
}

.alert-container {
	position: relative;
	display: inline-block;
	cursor: pointer;
	font-weight: 100;
	font-family: Arial;
	width: 100%;
	margin-top: 5px;
}

.alert {
	padding: 10px;
	background-color: #e2001a;
	border-radius: 8px 8px 0 0;
	color: #ffffff;
	font-weight: bold;
	padding: 5px 10px;
	width: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	text-transform:uppercase;
	font-size: 1rem;
}

.alert::after {
	content: '▼'; 
	position: absolute;
	right: 5px;
	margin-left: 10px;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #ffffff;
	color: #000000;
	font-weight: normal;
	font-size: .9rem;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1000;
	padding: 10px;
	width: 90%;
	text-align: left;
}

.dropdown-content a, .dropdown-content a:link, .dropdown-content a:hover, .dropdown-content a:visited, .dropdown-content a:focus {
	color: black;
	border: none;
	margin:0;
	padding:0;
	scale: 1;
}

.dropdown-content a:hover
{
	color: blue;
}

.alert-container:hover .dropdown-content {
	display: block;
}

.alert-container:focus-within .dropdown-content {
	display: block;
}

.dropdown-content a:focus {
/*	border: 1px solid blue;*/
		outline: auto;
/*	border-radius: 0;*/
}

.bouton-journuit {
	padding:0;
	margin: 0;
	margin-top: -12px;
	width: 127px;
	height: 41px;
	border: none;
	border-radius: 9px;
}

.bouton-journuit:hover {
	cursor: pointer;
}


.listefiches{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: start;
	justify-content: center;
	padding: 10px 0 0 0;
	border-radius: 8px;
	max-width: 80%;
	row-gap: 50px;
	column-gap: 25px;
}

.listefiches a, .listefiches a:link, .listefiches a:hover, .listefiches a:active, .listefiches a:visited {
	color: #ffffff;
	text-decoration: none;
	outline:none;
	text-align: left;
	border: solid grey 0.9px;
}

.listefiches a:focus {
	color: #ffffff;
	text-decoration: none;
	outline:auto;
	text-align: left;
/*	border: solid 2px blue;*/
}


.lafiche, .lafichebasarticle {
	background-color: var(--back-lafiche);
	color: var(--color-lafiche);
	padding: 0;
	margin: 5px;
	margin-top: 0px;
	border-radius: 10px;
	text-align: center;
	max-width: 25%;
	width: 23rem;
	max-width: 23rem;
	height: 25rem;
	max-height: 25rem;
	overflow: hidden;
	border: 1px solid #babdb6;
	position: relative;
}

.lafiche {
	 box-shadow: -10px 1px 20px rgba(0, 0, 0, 0.2);
}

.lafichebasarticle {
	height: 16rem;
	max-height: 16rem;
}


.lafiche, .lafichebasarticle {
	width: 100%;
	display: block;
}

.lafiche:focus, .lafichebasarticle:focus {
/*	border: 2px solid #0060df;*/
	outline: auto;
	width: 99%;
}

.lafiche:hover, .lafichebasarticle:hover {
	transform: scale(1.1);
}

.lafiche:focus-within {
/*  border: 1px solid #e2001a;*/
/*  box-shadow: 0 0 0 3px rgba(226, 0, 26, 1);*/
}


.wp-block-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

p a img {
  width: 100%;
  height: auto;
  max-width: 250px;
  display: block;
  margin: 0 auto;
}

.fiche-illustration {
	width: 100%;
}

.image-container {
	position: relative;
	display: inline-block; 
	border: none;
	width: 100%;
}

.image-container img {
	object-fit: cover;
	display: block; 
	width: 100%; 
	height: auto;
	max-height: 200px;
}

.containtitre-basarticle {
	top: 0;
	left: 0;
	right: 0;
	border: none;
	width: 100%;
	background-color: #e2001a;
	padding: 5px;
}

.containtitre-basarticle img {
	height: 45px;
}

.titre-solutionbasarticle {
	display: flex;
	justify-content: center;
	align-items: center;
}

.fiche-logo {
	position: absolute;
	bottom: 0; 
	left: 0;
	right: 0;
	background: #e2001a;
	color: white; 
	text-align: center; 
	padding: 10px;
	box-sizing: border-box;
}

.fiche-logo img {
	width: 2rem;
	display: inline;
	vertical-align: middle;
}

.fiche-contenu {
	margin: 0;
	padding: 0 0.5rem;
	word-break: keep-all;
}

.fiche-contenu h3 {
	font-size:1rem;
	font-weight: 700;
	color: var(--color-lafiche);
	word-break: keep-all;
}

.fiche-contenu p {
	font-size:1rem;
	font-weight: 400;
	color: var(--color-lafiche);
}

.basarticle {
	color: var(--color-basarticle);
	display: flex;
	justify-content: space-between;
	position: absolute;
	bottom: 0;
	width: 100%;
}

.lecture {
	margin-left: 10px;
	margin-bottom: 5px;
} 

.vignettetutoriel, .vignettefaq, .vignettevideo, .vignettee-learning {
	margin-right: 10px;
	margin-bottom: 5px;
	background-color: #204a87;
	color: #ffffff; 
	padding: 2px 20px;
	border-radius: 10px;
	text-transform: uppercase;
}

.vignettevideo {
	background-color: #cc0000;
}

.vignettefaq {
	background-color: #174e30;
}

.vignettee-learning {
	background-color: #75507b;
}


.qfrequentes, .qvideo {
	max-width: 99.9%;
	background-color: #ffffff;
	margin:0;
	padding: 15px;
}

.qvideo {
	padding: 20px 0 20px 0;
}

#idnavrapide {
	padding-top:0px;
	background-color: #eeeeec;
}

.choixpage {
	list-style-type: none; 
	text-align: center; 
	padding: 0;
	margin: 10px auto;
	display: flex;
	justify-content: center;
	gap: 30px;
}

.choixpage li {
	display: inline; 
	margin: 0 5px; 
}

.choixpage li a, ul.choixpage li span {
	display: inline-block;
	padding: 10px 15px;
	background-color: #f0f0f0;
	text-decoration: none;
	color: #333; 
	border-radius: 5px; 
	transition: background-color 0.3s, transform 0.3s;
}

.choixpage li a:hover {
	background-color: #e2001a; 
	color: white; 
}

.choixpage li span.active {
	background-color: #e2001a; 
	color: white; 
	border: 2px solid #a40000; 
	transform: scale(1.5); 
}

.qfrequentes.dark-mode, .qvideo.dark-mode, .choixpage.dark-mode {
	background-color: #2e3436;
}

.dressources {
	max-width: 99.9%;
	margin:0;
	background-color: #f2f2f2;
	padding: 15px 0 10px 0;
}

.dressources.dark-mode {
	background-color: #000000;
}

.h2centre {
	font-size: 2.5rem;
	font-family: SFR-Bold;
	width: 40%;
	margin:0px auto 10px auto;
	text-align: center;
	color: var(--color-h2centre);
}

.h2basarticle {
	font-size: 2rem;
	font-family: SFR-Bold;
	margin: 20px auto 10px auto;
	text-align: center;
	color: 	var(--color-h2centre);
}

.listefiches {
	width:100%;
	margin: 0 auto 0 auto;
}

.boutonvideo {
	font-size: 1rem;
	font-weight: bold;
	padding: 12px 24px;
	color: white;
	width: auto;
	border-radius: 8px;
	background: #e2001a;
	box-shadow: 0 4px 8px #9003;
	transition: box-shadow .2s;
	text-decoration: none;
	max-height: 1rem;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 10px;
	margin-left: 10px;
	display: none;
}

#nav-droite-petit, #nav-droite-smenu {
	display: none;
	align-items: center;
	margin-left: auto;
}

#nav-droite-petit img {
	height: 35px;
  margin: 0;
  padding: 0;
  margin-top: -7px;
  margin-right: 1rem;
}

.container-textesolution {
	width: 82%;
	margin: 1.5rem auto .5rem auto;
	text-align: center;
	font-weight: normal;
	font-size: 1rem;
	height: 9rem;
	background-color: rgba(0, 0, 0, .42 );
	border-radius: 10px;
	padding: 0 0 5px 10px;
}

.container-textesolution span {
    font-size: 1rem !important;
	text-align: center;
  }
  
 .container-textesolution p{
	display: block !important;
 }

.container-textesolution a, .container-textesolution a:visited, .container-textesolution a:hover, .container-textesolution a:focus, .container-textesolution a:link {
	color: #ffffff;
	
}

.ongletsolution {
	width: 80%;
	margin: 0 auto; 
}

.ongletsolution ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
	list-style-type: none;
}

.ongletsolution ul li {
	position: relative;
}

.dropdown-onglet {
	opacity: 0;
	position: absolute;
	background-color: #ffffff;
	color: #000000;
	font-size: 1rem;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
	border-radius: 0 0 10px 10px;
	z-index: 1000;
	padding: 0 10px 10px 10px;
	width: 103%;
	margin: 0;
	text-align: left;
	font-family: 'SFR-Regular', Arial, sans-serif;
	font-weight: normal;
}

.ongletsolution ul li:hover .dropdown-onglet, .ongletsolution ul li:focus-within .dropdown-onglet {
	opacity: 1;
}

.ongletchoix {
	padding: 10px;
	background-color: rgba(0, 0, 0, .5);
	border: 1px solid #ffffff;
	border-radius: 8px 8px 0 0;
	color: #ffffff;
	padding: 5px 20px;
	width: 90%;
	display: flex;
	justify-content: left;
	align-items: center;
	position: relative;
	text-transform:uppercase;
	font-size: 1rem;
}

.ongletchoix::after {
	content: '▼';
	position: absolute;
	right: 5px;
	margin-left: 30px;
}

.background-custom {
	background-color: #000000;
	height: calc(var(--largeur-fleche) * 2);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
  flex-direction: column;
  margin-top: -14px;
 }

.h2navrapide {
	font-size: 2.5rem;
	font-family: SFR-Bold;
	text-align: center;
	color: #ffffff;
	display: block;
	margin: 0 0 20px 0;
	padding:0;
	text-shadow: 2px 5px 5px rgba(0, 0, 0);
}

.menu-solus {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 0px;
	z-index: 1;
	flex-wrap: wrap;   
	justify-content: center;
}

.item2 {
	margin: 5px 0;
	padding: 5px;
	text-align: center;
/*	border: 4px solid transparent;*/
	width: 140px;
}

.item2span {
	display: block;
	text-shadow: 2px 5px 5px rgba(0, 0, 0);
	text-decoration: underline #000000;
	outline:none;
	color: #ffffff;
	font-size: 1.2rem;
}

.item2 img {
	width: auto;
	height: 56px;
}

/*a .item2, a:link.item2, a:visited .item2, a:active .item2 {*/
.item2 a, .item2 a:link, .item2 a:visited, .item2 a:active {
	color: #ffffff;
	text-decoration: none;
	outline:none;
}

.item2 a {
	display: block;
	width: 100%;
	height: 100%;
	border: 4px solid transparent;
	padding-top: 2px;
	margin-top: -2px;
}

/*a .item2:hover, a .item2:focus {*/
.item2 a:hover, .item2 a:focus {
	border: 4px solid #ffffff;
	border-radius: 10px;
	color: #ffffff;
	text-decoration: none;
	outline:none;
	padding-top: 2px;

}
.item2 a:focus {
	outline:auto;
}

.arrow-left {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: var(--largeur-fleche) solid transparent;
	border-bottom: var(--largeur-fleche) solid transparent;
	border-right: var(--largeur-fleche) solid var(--fleche-navrapide);
	z-index: 0;
}


.itemsolution {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 10px;
	margin-top: 20px;
	width: 220px;
	height: 180px;
	border: 4px solid transparent;
	border-radius: 10px;
	box-sizing: border-box; 
}

.itemsolution a, .itemsolution a:link, .itemsolution a:visited, .itemsolution a:active {
	color: #ffffff;
	text-decoration: none;
	outline:none;
}

.itemsolution a:hover, .itemsolution a:focus {
	margin: 0;
	padding:0;
	margin-top: -11px;
	padding: 6px;
	width: 220px;
	height: 180px;
}

.itemsolution a:hover {
	border: 4px solid #ffffff;
	border-radius: 10px;
	box-sizing: border-box;
	transform: scale(1.15);
}

.itemsolution a:focus {
	outline: auto;
}


.fieldelerte {
	border: 4px solid #e2001a;
	border-radius: 10px;
	height: 7.8rem;
	padding: 10px;
	margin-top: -0.5rem;
	margin-left: -7px;
}

.fieldelerte legend {
	margin-left: 2rem;
	padding: 5px 10px;
	font-weight: bold;
	font-size: 1.2rem;
	background-color: #e2001a;
	color: #ffffff;
}

.articlevideo {
	width: 70%;
	margin: 30px auto 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
/*	border: 1px solid red;*/
}


.fondvideo {
	display: block;
	width: 30%;
	background: url('img/photovideo.png');
	background-position: center;
	background-repeat: no-repeat;
	color: white;
	border-radius: 8px; 
    overflow: hidden; 
	font-size: 20px;
	font-weight: bold;
	padding: 20px;
	margin-right: 20px;
/*	border: 1px solid yellow;*/
}

.fondvideo:last-of-type {
  margin-right: 0;
}

.fondvideo img {
	border-radius: 10px;
}
.boxvideo {
	margin-top:180px;
	text-align: center;
}

.categoriecomplete {
	width: 100%;
	overflow:hidden;
	margin: 30px auto 0 auto;
	padding: 0;
}

.h2sommaire {
	font-size: 2.5rem;
	font-family: SFR-Bold;
	width: 100%;
	margin: 20px auto 10px auto;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-h2centre);
	padding: 0 0 10px 0;
/*	border-bottom: 2px solid #d1caca;*/
}

.hrmenusol {
	border: none;
	border-bottom: 2px solid #d1caca;
	width: 80%;
	height: 2px;
}

.categorieflex {
	display: flex;
	justify-content: space-around;
	width: 100%;
}

.categoriegauche, .categoriecentre, .categoriedroite {
	width: 30%;
}

.categoriegauche h3, .categoriecentre h3, .categoriedroite h3, .categmenu h3 {
	font-family: SFR-Bold;
	color: #e2001a;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.3rem;
	margin: 0;
	padding: 40px 0 0 0;
	scroll-margin-top: 120px;
	text-align: center;
	word-break: keep-all;

}
.categoriegauche h3:first-of-type, .categoriedroite h3:first-of-type, .categoriecentre h3:first-of-type {
	border-top: none; 
}

.categoriegauche ul, .categoriecentre ul, .categoriedroite ul, .categmenu ul{
	list-style-type: none;
	text-transform: uppercase;
	text-align: left;
}

.categoriegauche li, .categoriecentre li, .categoriedroite li, .categmenu li{
	margin-bottom: 10px;
}

.litousarticles {
	font-family: SFR-Bold;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: underline;
}

.collapsible {
	padding: 20px;
	font-family: Arial;
	color: var(--color-sommaire);
	padding: 20px;
	border-bottom: 1px solid var(--color-sommaire);
	border-top: none;
	border-left: none;
	border-right: none;
	text-align: left;
	outline: none;
	font-size: 16px;
	margin: -1px 0 0 -1px;
	text-transform: uppercase;
	font-weight: 600;
	background: none;
	line-height: 2;
	width: auto;
}

.newcollapsible, .newcollapsiblefin {
	padding: 20px;
	font-family: Arial;
	color: var(--color-sommaire);
	cursor: pointer;
	padding: 20px;
	border-bottom: 1px solid var(--color-sommaire);
	border-top: none;
	border-left: none;
	border-right: none;
	text-align: left;
	outline: none;
	font-size: 16px;
	margin: -1px 0 0 -1px;
	text-transform: uppercase;
	font-weight: 600;
	background: none;
	line-height: 2;
	width: auto;
}

.newcollapsiblefin {
	border: none;
}

.categoriecomplete a {
 	text-decoration: none;
	color: var(--color-sommaire);
	font-size: 0.8rem;
 }

.categoriecomplete a:hover .newcollapsible {
 	text-decoration: none;
	font-size: 22px;
	border: 4px solid var(--color-sommaire);
	transition: font-size 0.3s, border 0.3s;
 }

.autresQuestions {
	display: none;
}

.formticket {
	width:50%;
	margin: 0 auto;
	padding: 0;
	color: var(--color-h2centre);
}

.avertis {
	width:80%;
	margin: 0 auto;
	display: flex;
	color: var(--color-h2centre);
}

.avertis p {
	width: 90%;
	margin: 0 auto;
}

.formticket h2 {
	font-size: 2rem;
	margin: 40px 0 20px 0;
}

.formticket h2:first-child{
	margin: 0 0 20px 0;
}

.formticket p {
	font-size: 1.2rem;
}

.obligatoir {
	color: #e2001a;
	margin-left: .5rem;
}

.formticket input, .formticket textarea, .formticket select {
	font-size: 1.2rem;
	width: 80%;
}
 
.formticket p.remarque {
	font-size: .9rem;
	text-align: right;
	margin: 0;
	padding: 0;
}

.formticket input[type="submit"], .formticket input[type="submit"]:hover {
	font-size: 1.2rem;
	width: 80%;
	cursor: pointer;
}

.formticket fieldset {
	border: none;
	margin: 0 0 40px 0;
	padding: 0;
}

.formticket fieldset legend {
	font-size: 2rem;
	font-weight: bold;
}

#solution {
	color: var(--color-article);
}

/*#solution:invalid{*/
/*	color: #878787;*/
/*}*/

#solution option{
	color: #000000;
}

#solution option[disabled]{
	color: #878787;
}

.my-article {
	width: 90%;
	max-width: 1050px;
	margin: 20px auto 0 auto;
	border-radius: 10px;
	background-color: var(--background-article);
	color: var(--color-article);
	padding: 10px;
	overflow-wrap: break-word;
	box-sizing: border-box;
	border: 1px solid #d1caca;
	font-size: 1.2rem;
	line-height: 24px;
	text-align: left;
}

.my-article a, .my-article a:link, .my-article a:visited, .my-article a:active {
	color: var(--color-balisea);
}

.wp-block-image, .wp-block-gallery {
	width: fit-content;
	block-size: fit-content;
	height: auto;
	margin: 20px auto;
	border: 1px solid #d1caca;
}



.wp-block-video {
	text-align: center;
}

.wp-block-video video {
	width: 80%;
	margin: 0 auto;
}


.wp-element-caption {
	margin: 0;
	padding: 0 5px 5px 5px;
	font-style: italic;
	font-size: 1rem;
	line-height: 20px;
}

.my-article p {
	width: 100%;
	margin: 20px 0;
	overflow: hidden;
	word-wrap: break-word;
}

.my-article > p:first-of-type {
	font-style: italic;
	color: var(--color-firstot);
	font-weight: bold;
	text-align: justify;
	font-size: 1.3rem;
}

.my-article h2 {
	margin: 35px 0 20px 0;
}

.my-article h3 {
	margin: 25px 0 15px 0;
}
.my-article h4 {
	margin: 20px 0 0px 0;
}
.my-article h5 {
	margin: 15px 0 0px 0;
}
.my-article h6 {
	margin: 10px 0 0px 0;
}


#print img {
	border: none;
	float: right;
	margin: 0;
	height: 35px !important;
	width: auto;
}

.meta-article {
	width: 1050px;
	margin: 0 auto;
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 10px;
}

.btn-vignette {
	text-decoration: none;
	border: 2px solid #ffffff;
	border-radius: 10px;
	padding: 10px;
	color: #ffffff;
}

.btn-vignette:hover {
	border: 4px solid #ffffff;
	transform: scale(1.15);

}
.btn-vignette:focus {
	border: none;
	outline:auto;
}

.container-soustitre {
	margin-top: 10px;
}

.traitsep {
	width: 50%;
	margin: 4.5rem auto 0 auto;
	height: 4px;
	color: #ffffff;
	background-color: #ffffff;
}

.hrseparation {
	width: 25%;
	margin: 20px auto 10px auto;
	border-top: 1px solid red;
}

.titre_article {
	margin-top: 2.5rem;
	font-size: 3rem;
	font-style: italic;
}

.my-article.auteur-article{
	border: none;
}

.auteur-article {
	background-color: transparent;
}

.signatureart {
	text-align: center;
	color: 	var(--color-h2centre);
	font-size: 1rem;
}	


.signatureart p {
	width: 30%;
	text-align: center;
	margin: 0 auto;
}

.signatureart img {
	border-radius: 10px;
}

.sectionaide {
	margin-top: 30px;
	width: 100%;
	height: 200px;
	background: #EDEDF4;
	text-align: center;
}

.signaturearticle {
	text-align: center;
	min-height: 225px;
/*	background: var(--color-back-signature);*/
}

.signaturearticle h3 {
	font-family: 'SFR-Bold', Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 200;
	text-transform: uppercase;
	margin-bottom: 38px;
	color: 	var(--color-h2centre);
	word-break: keep-all;
}

.boutonsectionaide {
	font-size: 16px;
	font-weight: bold;
	padding: 12px 24px;
	margin: 2rem;
	color: #e2001a;
	width: auto;
	border: 1px solid #e2001a;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 4px 8px #9003;
	transition: box-shadow .2s;
	margin-left: 20px;
	margin-right: 20px;
	cursor: default;
}

.boutonsectionaide:hover {
	color: #ffffff;
	border-color: #e2001a;
	background-color: #e2001a;
	cursor: pointer;
}

#formetoile {
	display: none;
}

#formetoile label {
	color: var(--color-article);
}



#formeval {
	margin-top: 2rem;
}

.rate {
	width: 100%;
	float: left;
}

.rate input[type="radio"] {
	opacity: 0;
	width: 0;
	height: 0;
}

[name="rate"] ~ label {
	font-size:40px;
	border: 1px solid transparent;
	color: #707070;
	cursor: pointer;
	padding: 4px 10px;
}

[name="rate"]:checked + label {
	border: 1px solid #e2001a;
	color: 	#e2001a;
}

[name="rate"]:hover + label {
	border: 1px solid #e2001a;
	color: 	#e2001a;
}

[name="rate"]:focus + label {
/*	border: 1px solid blue;*/
	border: none;
	outline: auto;
}

.img404 {
	margin: 20px 0;
	padding-left: 25%;
	transform: translateX(60px);
}

.wp-block-quote {
	border-left: 5px solid #e2001a;
	margin-left: 15px;
	padding-left: 20px;
}

/*.wp-block-table {*/
/*	width: 100%;*/
/*	margin:0;*/
/*	padding: 0;*/
/*}*/

/*.wp-block-table table{*/
/*	width: 90%;*/
/*	border-collapse: collapse;*/
/*	margin: 0 auto;*/
/*}*/

/*.wp-block-table .has-fixed-layout {*/
/*	table-layout: fixed;*/
/*}*/

/*.wp-block-table th, .wp-block-table td {*/
/*	border: 1px solid #d1caca;*/
/*	padding: 4px;*/
/*	word-wrap: break-word;*/
/*}*/

/*.wp-block-table th {*/
/*	text-align: center;*/
/*	font-weight: bold;*/
/*}*/

/*.wp-block-table .has-fixed-layout {*/
/*	table-layout: fixed;*/
/*	width: 100%;*/
/*}*/

/******************************************************************
*
*												MEDIAS 
*
******************************************************************/



/* SMARTPHONE */
@media (max-width: 599.99px) {


	#form {
		display: none;
	}

	#nav-droite {
		display: none;
	}

	#nav-droite-petit {
		display: block;
	}

	#nav-droite-smenu {
		position: absolute;
	}

	#nav-droite-smenu.visible {
		display: block;
	}

	#btn-smenu {
		background: none;
		border: none;
		cursor: pointer;
	}

header {
	height: 0px;
	position: relative;
	border: none;
}

#top-nav{
	display: none
}

#bottom-nav {
	width: 100%;
	padding: 0;
	margin: 0;
	margin: 10px 0 0 0;
	padding-top: 10px;
	display: flex;
	align-items: stretch;
	min-height: auto;
}

#LogoSFR {
	margin-left:0;
}

#LogoSFR img {
	height: 24px;
	margin-top: -12px;
	margin-left: 10px;
}
#nav-droite-petit img{
	margin-top: -15px;
}

/* Empêcher les changements d'état sur le hover, focus, et active */
#nav-droite-smenu a:hover,
#nav-droite-smenu a:active {
	text-decoration: none; /* Pas de soulignement même au survol */
}

#nav-droite-smenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav-droite-smenu li {
  display: block; /* Chaque élément li occupe une ligne */
	color: black; /* Toujours noir même lors du survol ou du focus */
	background-color: white; /* Toujours fond blanc */
}

#nav-droite-smenu a {
	color: black;
	background-color: white;
	text-decoration: none;
	padding: 10px 0 10px 10px;
	display: block;
	white-space: nowrap;
	overflow: visible;
	position: relative;
	margin-left: -84%;
	width: 165px;
	text-align: right;
}

#btn-smenu {
  cursor: pointer;
}


.qfrequentes{
	padding: 0px;
}

#idlessolutions {
    background-image: none !important;
    background-color: #1B3A68;
  }

.meta-article{
	width: auto;
}

.les-solutions{
	margin-top:35px;
	background-size: cover;
	height: fit-content;
}
	
.titre_home{
	font-size: 1.5rem;
	margin-top:10px;
	margin-bottom: 35px;
}

.container{
	margin-left: -30px;
}
.item{
	padding:0;
	margin-top: 0px;
	margin: -20px;
	width: 170px;
	height: 180px;
	border: 3px solid transparent;
}

.item:last-of-type{
margin-bottom: -80px;}

.item a:hover, .item a:focus {
	margin-top: -11px;
	padding: 6px;
	width: 170px;
	height: 125px;
	border: 1px solid #ffffff; 
	transform: scale(1.05);
}

.item img {
	max-width: 100px;
	width: 50px;
	margin-bottom: 10px;
}

.item p {
	margin:5px 0 0;
	font-size: 1rem;
}

.alert {
    display: none;
}

.h2centre {
    font-size: 1.2rem;
	margin-top: -5px;
	width: 100%;
}

.listefiches {
width: 100%;
gap: 0px;
}

.fiche-logo img{
	display: none;
}

.lafiche, .lafichebasarticle {
    margin: 5px;
    max-width: 15rem;
    height: fit-content;
    border: 1px solid #babdb6;
    position: relative;
	font-size: 0.6rem;
	margin-bottom: 30px;
}

.basarticle{
	display: none;
}

.fiche-logo {
	padding: 1px;
	font-size: 1rem;
}

.item2{
	width: 150px;
}

.categorieflex{
	width: 100%;
	display: flex;
  flex-wrap: wrap;
}

.categorieflex, .categoriegauche, .categoriecentre, .categoriedroite, ul, li, h3 {
  word-break: break-all;
}

.categoriecomplete{
	margin: -30px 0 0 0;
	width: 98%;
}

.categoriegauche, .categoriecentre, .categoriedroite {
    width: 100%;
}

.categoriegauche h3, .categoriecentre h3, .categoriedroite h3{
		scroll-margin-top: 0px;
}

.image-container {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  margin-top: -130px;
}
.fiche-illustration{
  display: none;
}

.fiche-logo img {
	width: 1.8rem;
}
.fiche-contenu h3 {
font-size: 0.8rem;
margin-top: -4px;
}
.fiche-contenu p {
font-size: 0.7rem;
}
.fiche-contenu {
padding: 0.3rem;
}

.container-textesolution {
    display: none;
}
.ongletsolution {
	margin-top: -20px;
}
.ongletchoix {
    display: none;
}

.dropdown-onglet{
	display: none;
}

.background-custom{
	display: none;
}

.h2sommaire{
	font-size: 1.3rem;
	text-align: center;
}

.categoriecomplete a{
	font-size: 0.6rem;
	word-break: keep-all;
}

.articlevideo{
	width: 90%;
}

.fondvideo{
height: 3rem;}

  .video-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }
  
  article.my-article img{
	  max-height: 80%;
  }

  .video-container video {
    width: 100%;
    height: auto;
    display: block;
    max-width: 650px;
  margin: 0 auto;}

article.my-article {
  width: 99%; 
  }
  .form-note{
  font-size: 0.5rem;
  margin-top: -20px;
  }
  
 .signaturearticle h3{
	 font-size: 1rem;
 }
  
 #coord-section{
    font-size: 1.4rem;
	margin-top: 15px;
}

.container h2{
	font-size: 1.4rem;
}

#print img{
	display: none;
}

.my-article > p:first-of-type{
	font-size: 0.9rem;
	line-height: 14px;
	margin-top: 0px;
}

article.my-article p, article.my-article h2, article.my-article ul{
	font-size: 0.9rem;
}

.boutonsectionaide{
	font-size: 0.6rem;
	margin: 15px auto;
}

.signatureart img{
	width: 40px;
	margin-top: -40px;
}

.signatureart p{
	width: 80%;
	font-size: 0.7rem;
}

.h2basarticle{
	font-size: 0.9rem;
}

.containtitre-basarticle img{
	display: none;
}
.titre-solutionbasarticle{
	font-size: 1rem;
}

.avertis{
display: none;}
}


/* TABLETTE */
@media (min-width: 600px) and (max-width: 1079.99px) {

	#form {
		display: none;
	}

	#nav-droite {
		display: none;
	}

	#nav-droite-petit {
		display: block;
	}

	#nav-droite-smenu {
		position: absolute;
	}

	#nav-droite-smenu.visible {
		display: block;
	}

	#btn-smenu {
		background: none;
		border: none;
		cursor: pointer;
	}

header {
	height: 0px;
	position: relative;
	border: none;
}

#top-nav{
	display: none
}
#bottom-nav {
	width: 100%;
	padding: 0;
	margin: 0;
	margin: 10px 0 0 0;
	padding-top: 10px;
	display: flex;
	align-items: stretch;
	min-height: auto;
}

#LogoSFR {
	margin-left:0;
}

#LogoSFR img {
	height: 44px;
	margin-top: -12px;
	margin-left: 10px;
}

#nav-droite-petit img{
	margin-top: -15px;
	height: 44px;
}

/* Empêcher les changements d'état sur le hover, focus, et active */
#nav-droite-smenu a:hover,
#nav-droite-smenu a:active {
	text-decoration: none; /* Pas de soulignement même au survol */
}

#nav-droite-smenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav-droite-smenu li {
  display: block; /* Chaque élément li occupe une ligne */
	color: black; /* Toujours noir même lors du survol ou du focus */
	background-color: white; /* Toujours fond blanc */
}

#nav-droite-smenu a {
	color: black;
	background-color: white;
	text-decoration: none;
	padding: 10px 0 10px 10px;
	display: block;
	white-space: nowrap;
	overflow: visible;
	position: relative;
	margin-left: -84%;
	width: 165px;
	text-align: right;
}

#btn-smenu {
  cursor: pointer;
}
.les-solutions{
	margin-top:50px;
	height: fit-content;
	background-size: cover;
}

.h2centre{
	width: 100%;
}

.titre_home{
	font-size: 2.5rem;
	margin-top:20px;
}

.avertis{
display: none;}

.container{
	margin-top: 80px;
}

.item {
	padding:0;
	margin-top: 10px;
	width: 170px;
	height: 180px;
	border: 3px solid transparent;
}

.item a:hover, .item a:focus {
	margin-top: -11px;
	padding: 6px;
	width: 170px;
	height: 125px;
	border: 3px solid #ffffff; /* Ajoutez un cadre */
	transform: scale(1.05);
}

.vignettetutoriel, .vignettefaq, .vignettevideo {
display: none;}

.lecture {
	margin: 0 auto;
}

.item img {
	max-width: 100px;
	width: 50px;
	margin-bottom: 10px;
}

.item p {
	margin:5px 0 0;
	font-size: 1rem;
}

.alert {
    padding: 5px 10px;
    width: 70%;
    font-size:0.8rem;
	margin-left: 30px;
}

.alert-container {
	width: 100%;
	margin-top: 5px;
	margin-left: -27px;
}

.alert::after {
	content: '▼'; 
	position: absolute; 
	right: 5px; 
	margin-left: 10px;
}

.dropdown-content {
	font-size: .8rem;
	width: 70%;
	margin-left: 30px;
	font-size: 0.6rem;
}

p span {
  font-size: 1rem;
}

.h2centre {
    font-size: 1.6rem;
	margin-top: -5px;
}

.h2sommaire{
	margin: 50px;
}

.listefiches {
width: 100%;
}

.lafiche, .lafichebasarticle {
    margin: 5px;
    max-width: auto;
    height: fit-content;
    border: 1px solid #babdb6;
    position: relative;
	font-size: 0.6rem;
	margin-bottom: 30px;
}
.fiche-logo {
	padding: 4px;
	font-size: 0.8rem;
}

.item2{
	width: 8rem;
	margin: 5px 0;
	margin-top: -20px;
}

.categorieflex{
	width: 100%;
	display: flex;
  flex-wrap: wrap;
}

.categorieflex, .categoriegauche, .categoriecentre, .categoriedroite, h3 {
  word-break: break-all;
}

.categoriecomplete{
	margin: -30px 0 0 0;
	width: 98%;
}

.categoriegauche, .categoriecentre, .categoriedroite {
    width: 100%;
}

.categoriegauche h3, .categoriecentre h3, .categoriedroite h3{
	margin-left: 30px;
}

.categoriegauche ul, .categoriecentre ul, .categoriedroite ul{
	text-align: center;
}

.image-container {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}
.fiche-illustration img{
  width: 50%;
  height: 50%;
  object-fit: cover;
  display: block;
}

.fiche-logo img {
	width: 1.8rem;
}
.fiche-contenu h3 {
font-size: 0.9rem;
}
.fiche-contenu p {
font-size: 0.8rem;
}
.fiche-contenu {
padding: 0.5rem;
}

.background-custom{ 
	height: auto;
}

.arrow-left{
	border-right: var(--largeur-fleche) solid #000;
}

.h2navrapide {
	padding: 10px;
}

.container-textesolution {
    height: fit-content;
    font-size: 0.8rem;
	margin-top: 14px;
}
.container-textesolution span {
  font-size: 1rem !important;
}

.ongletsolution {
	margin-top: 0px;
	width: 100%;
}
.ongletchoix {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-transform: uppercase;
    font-size: 0.6rem;
	padding: 8px 12px;
}

.ongletchoix::after{
display: none;}

.dropdown-onglet {
    font-size: 0.7rem;
    width: 70%;
	padding: 2px;
}

article.my-article {
  width: 99%; }
}


/* LAPTOP */
@media (min-width: 1080px) and (max-width: 1490.99px) {
header {
	height: 90px;
}

#bottom-nav {
	width: 100%;
	padding: 0;
	margin: 0;
	padding-top: 15px;
	display: flex;
	align-items: stretch;
	min-height: auto;
}
	/*barre de recherche */
	.search-form {
	align-items: center;
	border-radius: 10px;
	width: 365px;
	height: 42px;
	margin-top: -6px;
	transform: translateX(90px);
	border: solid 1px #000;
}

.search-select {
	border: 2px solid transparent;
	padding: 10px;
	padding-right: 15px;
	font-size: 1rem;
}


.search-input {
	padding: 0 5px 0;
	font-size:0.8rem;
	height: 45px;
	border: solid 1px #000;
}

.search-button {
  padding:5px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
}

.search-button img {
	min-width: 25px;
	height: 25px;
}
.bouton, .bouton:hover, .boutoncentre {
	font-size:.8rem;
	font-weight: 600;
	padding: 8px 8px;
	margin: -6px 0 0;
}


.checkbox-image {
	width: auto;
	height:30px;
	margin-right: 0px;
}

.bouton-journuit {
	width: 80px;
	height: 27px;
	border: none;
	border-radius: 9px;
	margin-right: 7px;
	margin-top: -10px;
}

#nav-droite li {
  margin: 5px;
  padding: 0;
}

#nav-droite li:last-of-type {
  margin: 10px;
  padding: 0;
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-image {
	width: 108px;
	height: 35px;
	border: 0;
}
.bordinferieur a, .bordinferieur a:link, .bordinferieur a:visited, .bordinferieur a:hover, .bordinferieur a:active {
	font-size: 0.8rem;
	font-weight: 500;
}

.bordinferieur a:hover{
	border-bottom:4px solid #dd0000;
	padding-bottom: 15px;
	text-decoration: none;
}

#LogoSFR {
	margin-left:0;
}

#LogoSFR img {
	height: 44px;
	margin-top: -6px;
	margin-left: 30px;
}

.les-solutions{
	margin-top: 85px;
	height: 237px;
	background-size: cover;
}
	
.titre_home{
	font-size: 2rem;
	margin-top:10px;
}
.item {
	padding:0;
	margin-top: 10px;
	width: 220px;
	height: 180px;
	border: 3px solid transparent;
	margin-left: -20px;
}

.item a:hover, .item a:focus {
	margin-top: -11px;
	padding: 6px;
	width: 170px;
	height: 125px;
	border: 3px solid #ffffff; /* Ajoutez un cadre */
	transform: scale(1.05);
}

.item img {
	max-width: 100px;
	width: 50px;
	margin-bottom: 10px;
}

.item p {
	margin:5px 0 0;
	font-size: 1rem;
}

.alert {
    padding: 5px 10px;
    width: 60%;
    font-size:0.8rem;
	margin-left: 30px;
}

.alert-container {
	width: 100%;
	margin-top: 5px;
}

.alert::after {
	content: '▼'; 
	position: absolute; 
	right: 5px; 
	margin-left: 10px;
}

.dropdown-content {
	font-size: .8rem;
	width: 60%;
	margin-left: 30px;
	font-size: 0.8rem;
}
.dropdown-onglet {
	width: 90%;
}

.h2centre {
    font-size: 2rem;
	margin-top: -5px;
}

.listefiches {
width: 100%;}

.lafiche, .lafichebasarticle {
    margin: 5px;
    max-width: 18rem;
    height: 20rem;
    border: 1px solid #babdb6;
    position: relative;
	font-size: 0.8rem;
	margin-bottom: 30px;
}
.fiche-logo {
	padding: 4px;
}

.image-container {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}
.fiche-illustration img{
  width: 50%;
  height: 50%;
  object-fit: cover;
  display: block;
}

.fiche-logo img {
	width: 1.8rem;
}
.fiche-contenu h3 {
font-size: 0.9rem;
}
.fiche-contenu p {
font-size: 0.8rem;
}
.fiche-contenu {
padding: 0.5rem;
}

.container-textesolution {
    width: 85%;
    font-size: 0.9rem;
	margin-top: 14px;
}
.ongletsolution {
	margin-top: -20px;
}
.ongletchoix {
    width: 75%;
    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;
    text-transform: uppercase;
    font-size: 0.8rem;
}

article.my-article {
width: 80%;}}