/*
@font-face {
	font-family: "OpenSans";
	src: url("/user/themes/qualiopi/fonts/OpenSans/OpenSans.ttf") format("truetype");
}
*/


@font-face {
	font-family: "NotoSans";
	src: url("/user/themes/qualiopi/fonts/Noto-Sans-regular.woff2") format("woff2");
}

@font-face {
	font-family: "LoveloBlack";
	src: url("/user/themes/qualiopi/fonts/LoveloBlack.woff2") format("woff2");
}



:root {
	--bg-0: #fefcf8;
	--bg-1: #fecc49;
	--bg-2: #d67c63;
	--bg-3: #495F21;
	--bg-4: #414736;
	--c-0: black;
	--c-1: black;
	--c-2: black;
	--c-3: white;
	--c-4: white;
	--title-0: #5c7a2a;
	--title-1: black;
	--title-2: #5c7a2a;
	--title-2: white;
	--title-3: black;
	--title-4: white;
	--header-border: solid var(--title-0);
}

body {
    font-size: 18px;
    font-size: clamp(3px, 4.5vw, 18px);
    letter-spacing: 0.35px;
    font-family: NotoSans, sans-serif;
}

._bg0 {
	background-color: var(--bg-0);
	color: var(--c-0);
}

:is(h1, h2, h3, h4, h5, h6)._bg0, ._bg0 :is(h1, h2, h3, h4, h5, h6), body :is(h1, h2, h3, h4, h5, h6) {
	color: var(--title-0);
}


._bg1 {
	background-color: var(--bg-1);
	color: var(--c-1);
}

:is(h1, h2, h3, h4, h5, h6)._bg1, ._bg1 :is(h1, h2, h3, h4, h5, h6) {
	color: var(--title-1);
}

._bg2 {
	background-color: var(--bg-2);
	color: var(--c-2);
}

:is(h1, h2, h3, h4, h5, h6)._bg2, ._bg2 :is(h1, h2, h3, h4, h5, h6) {
	color: var(--title-2);
}


._bg3 {
	background-color: var(--bg-3);
	color: var(--c-3);
}

:is(h1, h2, h3, h4, h5, h6)._bg3, ._bg3 :is(h1, h2, h3, h4, h5, h6) {
	color: var(--title-3);
}

._bg4 {
	background-color: var(--bg-4);
	color: var(--c-4);
}

._bg3 a {
	color: white;
}

:is(h1, h2, h3, h4, h5, h6)._bg4, ._bg4 :is(h1, h2, h3, h4, h5, h6) {
	color: var(--title-4);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
    text-transform: uppercase;
    font-family: LoveloBlack, sans-serif;
    font-size: 48px;
    font-size: clamp(24px, 6vw, 48px);
}

.website-title {
	display: block;
    text-decoration: none;
    color: var(--title-0);
    font-weight: 600;
    text-transform: uppercase;
    font-family: LoveloBlack, sans-serif;
    line-height: 48px;
	padding-top: 0.15em;
	padding-left: 0.2em;
	padding-left: 0.2em;
	padding-left: clamp(0px, 3vw, 24px);
}

.website-title a {
	display: inline-block;
    text-decoration: none;
    color: var(--title-0);
}

.website-subtitle {
    text-transform: uppercase;
    color: #495f21;
}

h2, .h2 {
    font-size: 32px;
}

h3, .h3 {
    font-size: 24px;
}

h4, .h4 {
    font-size: 22px;
    font-weight: bold;
}

h5, .h5 {
    font-size: 20px;
    font-weight: bold;
}

h6, .h6 {
    font-size: 18px;
    font-weight: bold;
}

hgroup {
    text-align: center;
}

hgroup :is(p, h1, h2, h3, h4, h5, h6) {
    margin: 0;
}

._bg0, ._bg1, ._bg2, ._bg3, ._bg4 {
    padding: var(--gap, 24px);
}

header[class] {
	padding-left: 0;
	padding-right: 0;
}

.website-title img {
  vertical-align: middle;
}

.website-title.left {
  text-align: left;
}

header .right {
  right: 0;
  right: clamp(0px, 3vw, 24px);
  position: absolute;
  top: 30px;
}

._bg1, ._bg2, ._bg3, ._bg4 {
    position: relative;
}

a {
    color: black;
}


ol > li::marker {
  font-size: 32px;
  font-family: LoveloBlack, sans-serif;
}

.training-banner > img {
  width: 100%;
}

.surtitre {
  text-transform: uppercase;
  margin: var(--gap) 0;
}

hgroup.training-title {
  margin: var(--gap) 0;
}

.module-duration {
  margin-left: auto;
}

.illustrations {
  display: grid;
  grid-template-columns: 66% 1fr;
  gap: var(--gap);
  padding-left: var(--gap);
  padding-right: var(--gap);
}
.illustrations img {
  width: 100%;
  height: auto;
  margin-top: var(--gap);
}


.reinsurrance {
  padding: 1em;
  margin: 0 auto 32px auto;
  max-width: 900px;
  font-size: .8em;
}

@media (min-width: 550px) {
	.reinsurrance {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-content: space-evenly;
		align-items: center;
		justify-items: center;
    }
}

.reinsurrance img {
  width: 100%;
  height: auto;
  max-width: 300px;
}

#about {
  margin-top: var(--gap);
}


.instructor-name {
  font-size: 32px;
  text-transform: uppercase;
}

#about .photo {
  margin: var(--gap) 0;
}

section#about .portrait {
    padding-top: 64px;
    padding-bottom: 64px;
}

#faq details[open] {
  background-color: var(--bg-3);
  color: var(--c-3);
}

address {
  font-style: normal;
}

/* PRIX */

.prices-list > div {
  text-align: left;
  display: block;
  padding-left: 24px
}

main .prices-list > div > dd {
  max-width: none;
}

.prices-list > div dt {
font-weight: bold;
margin-bottom: 12px;
}

.prices-list > div dd {
	font-weight: 500;
	text-transform: uppercase;
	font-family: LoveloBlack, sans-serif;
	font-size: 24px;
	color: var(--title-0);
	text-align: center;
}


/* LARGE */

._bg0.large::before, ._bg1.large::before, ._bg2.large::before, ._bg3.large::before, ._bg4.large::before {
	content: "";
	width: 100vw;
	position: absolute;
	background: inherit;
	top: 0;
	display: block;
	height: 100%;
	z-index: -1;
	margin-left: calc(-1 * var(--gap));
}

section[id] {
	scroll-margin-top: var(--header-height, 100px);
}

header {
  margin-bottom: 0;
  height: var(--header-height);
  box-shadow: 0px 0px 10px 1px #00000040;
}

@media (min-width: 1200px) {
	._bg0.large::before, ._bg1.large::before, ._bg2.large::before, ._bg3.large::before, ._bg4.large::before {
		margin-left: calc(-50vw + 600px - var(--gap));
	}
	
	footer [class].large::before {
		width: 120vw;
		margin-left: calc(-50vw + 600px - var(--gap));
	}
	
	header._bg0.large::before  {
		margin-left: calc(-50vw + 600px);
		box-shadow: 0px 0px 10px 1px #00000040;
	}
	
	header {
	  box-shadow: none;
	}
	
}

.stats-box {
  background: white;
}

#page-body, footer > * {
  max-width: 1200px;
  margin: 0 auto;
}


.hero-illustration > img {
  width: 100%;
  height: auto;
}
.hero-illustration {
  padding: calc(2 * var(--gap));
}

@media (min-width: 930px) {

	#content.hero.columns {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	}
	.hero-content {
	  position: relative;
	}
	.hero-content > * {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  -webkit-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  font-size: 1.2em;
	  width: 70%;
	}

}

h2.center {
  margin: 0;
  padding: 24px 0;
  /*
  background: #5c7a2a;
  color: white;
  */
  line-height: 1em;
  
  background: #ffe5cd;
  color: #5c7a2a;
}

.cta {
	background-color: var(--bg-1);
	color: var(--c-1);
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  text-transform: uppercase;
  display: inline-block;
}

.right .cta {
  padding: 10px var(--padding-cta);
  --padding-cta: clamp(12px, 1vw, 24px);
}

._bg1 .cta {
  background-color: white;
  margin-top: 1em;
}
._bg1 .cta:hover, ._bg1 .cta:focus-visible {
  background-color: #6495ed;
}

#pre-suscription-link-help {
  max-width: 350px;
  display: inline-block;
  margin-top: 6px;
}

/*

.stats-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
}

.stats-list > div {
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

dl.stats-list > div {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
}

.stats-list > div:not(:nth-child(3n)) {
	padding-right: .5em;
	padding-left: .5em;
}

.stats-list > div:not(:nth-child(3n))::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 0;
    height: 80%;
    width: 1px;
    background-color: currentColor;
}


.stats-box dl.stats-list > div > dd {
  max-width: none;
  text-align: center;
}

.stats-box .info {
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 2em;
}

*/

dl.stats-list > div {
  display: grid;
}
dl.stats-list > div > dt {
  font-size: 0.8rem;
  font-family: LoveloBlack, sans-serif;
}
dl.stats-list > div > dd {
    max-width: none;
	font-family: LoveloBlack, sans-serif;
}

/* Container de la liste */
.stats-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem auto;
}

/* Le cartouche (chaque groupe de donnée) */
.stats-list > div {
  display: grid;
  /* Col 1 : Image (auto) | Col 2 : Libellé (flexible) | Col 3 : Valeur (auto) */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1rem;
  padding: 0;
}

/* 1. L'Image / Icône à gauche */
.stats-list img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: .5em;
}

/* 2. Le Titre / Libellé (dt) */
.stats-list dt {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

/* 3. La Valeur (dd) alignée à droite */
.stats-list dd {
  margin: 0;
  text-align: right;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  
  /* Permet de nettoyer les espaces/sauts de ligne du HTML */
  white-space: nowrap; 
}

/* Cas particulier si l'image n'a pas de src (évite un décalage si vide) */
.stats-list img[src=""],
.stats-list img:not([src]) {
  width: 24px;
  height: 24px;
  background-color: #f1f5f9;
  border-radius: 4px;
}

#offers {
  margin: 32px var(--gap);
}


@media (min-width: 950px) {

	#offers .columns {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	}

}

#offers .columns > div {
  padding: calc(2 * var(--gap)) var(--gap) calc(var(--gap) + 50px) var(--gap);
  position: relative;
}

#offers hgroup > p {
font-weight: bold;
  padding-top: .5em;
}

#offers .columns > div .cta {
  position: absolute;
  width: calc(100% - 2 * var(--gap));
  left: var(--gap);
  bottom: var(--gap);
}