@font-face {
	font-family: 'saira_condensedthin';
  src: url('../ui/font/sairacondensed-thin-webfont.woff2') format('woff2'),
	  url('../css/font/sairacondensed-thin-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	unicode-range: U+000-5FF;
  }

*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: clamp(.85rem, 4.3vw - 1rem, 1.65rem);
	--clr-bg: oklch(0.2264 0.0135 291.83);
	--bg2 : rgb(35,42,55);
  --btn_navig: oklch(0.626 0.0629 135.93);
	--color-link: oklch(0.8094 0.1383 160.78);
	--clr: oklch(0.9889 0.0053 17.25);
	--clr-hdft: oklch(0.2194 0.04 272.1);
	--word-index:1;
	--secs: 3s;
}

body {
	margin: 0;
	color: var(--clr);
	background: var(--clr-bg);
	background-size: cover;
	font-family: 'saira_condensedthin',sans-serif;
  line-height: 1.35;
  }

  h1, h2, h3, dl dt {
    /* Thanks to the league of movable type */
    font-feature-settings: "liga", "clig", "ss01";
  }
  h1,h2,h3 {
    font-weight: 500;
    margin-block: 2.25rem 0.25rem;
  }

  dl dt {
    font-weight: 300;
  }


section article {
  display: flex;
  flex-direction: column;
}

header {
	background : var(--clr-hdft);
	display: flex;
	flex-direction: row;
	place-content: space-between;
	padding-inline: .25rem;
  place-items: baseline;
}


header h1, header h2 {
  font-size:80%;
	margin-block: 0 .25rem;
}

.num_edu::before{
 content: " ";
 display: inline flow-root list-item;
 padding-inline-end: 1.8rem;
 mask: url('img/num_edu_logo.svg') no-repeat;
 mask-size: contain;
 width: 32px;
 height: 32px;
 background: var(--btn_navig);
}

article {
  padding-inline: 0.8rem;
  justify-content: center;
}

	.art_prez {
	display: flex;
	margin-block-end: 8rem;
	flex-direction: column;
	place-content: center;
	place-items: center;
	gap: 1rem;
}

.titre_prez {
  font-size: clamp(2rem, 6.9vw - 1rem, 3.3rem);
  text-wrap:balance;
	text-align:center;
	margin-block-end:7rem;
}

.img_prez {
	width: 35%;
}



.img_temps {
  width:111px;
  align-self: flex-end;
}

article p, article ul, article ol, dl dt, dl dd, footer p {
  max-inline-size:min(45ch,50ch);
  text-align: justify;
  hyphens: auto;
  margin-inline: auto;
  letter-spacing: 0.035rem;
	margin-block: 0.15rem 1rem;
}

.étapes {
	background: oklch(0.3562 0.0959 293.02);
	padding-block: 0.5rem;
	padding-inline: 1.5rem;
	border-radius: 12pt;
	text-align: center;
	width: fit-content;
	margin: 0px auto;
	margin-block-start: 7rem;
}

.englob{
	max-width: 100vw;
	height: 10rem;
	margin-inline:4rem;
}

.step {
	display: flex;
 flex-wrap: wrap;
 max-inline-size: inherit;
}

.step__item {
	flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.step .active::before, .step .active:not(:last-child)::after  {
		background:var(--btn_navig);
}

.step__item::before {
	--size: 2rem;
 content: "";
 position: relative;
 z-index: 1;
 display: block;
 width: var(--size);
 height: var(--size);
 border-radius: 50%;
 margin: 1rem auto 0;
  background-color: lightgrey;
	top:3rem;
}


.step__item:not(:last-child):after {
	content: "";
  position: relative;
  top: 5rem;
  left: 50%;
  height: 2px;
  background-color: #e0e0e0;
  order: -1;
}

.step__title {
	margin:0;
	color:var(--clr-hdft);
	position: relative;
  top: 1.2rem;
	z-index: 1;
}

.modules {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
	list-style: none;
	margin: 0px;
	padding: 0px;
	max-inline-size: unset;

}

.modules li {
	background: oklch(0.3562 0.0959 293.02) url('img/médaillon.svg') no-repeat bottom right;
	color: var(--clr);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	place-items: center;
	box-shadow: 7px 7px 8px var(--color-bg);
	font-size: 75%;
	place-content: space-between;
}

.modules h4 {
	margin-block:0;
	background: oklch(0.4922 0.1505 261.67);
	text-align:center;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	width:100%;
	color: var(--clr);
}

.modules li p {
	padding-inline: 1rem;
	text-align: center;
}

.modules li .temps {
	align-self: flex-start;
	place-self: left;
	background: var(--bg2);
	border-radius: 12px;
	padding: .35rem;
	font-size: medium;
	margin-inline-start: .2rem;
  margin-block-end: .2rem;
}

.offre {
	background: oklch(0.8947 0.0088 17.32);
	color: var(--clr-bg);
	width: 20rem;
	display: flex;
	flex-direction: column;
	border-radius: 25px;
	align-self: center;
  box-shadow: 7px 7px 8px #111;
  margin-block: 2.25rem;
	border: 12px solid var(--btn_navig);
}

.offre h3 {
		margin-block: 0px;
		background: var(--clr-hdft);
		border-top-right-radius: 12px;
		border-top-left-radius: 12px;
		color: var(--clr);
		text-align: center;
}

.offre h3, .inter p {
	font-weight:600;
}

.inter {
	display: flex;
	flex-direction: row;
	gap:.55rem;
	margin-block: 1rem;
	padding-inline:.25rem;
}

.img_inter {
width:120%;
}

.inter p {
	line-height: 1.15;
	text-align: center;
}

.inter p s {
	color:red;
}

footer {
  display: flex;
  flex-direction: column;
}

button {
	width: fit-content;
	padding-block: .8rem;
	padding-inline: .8rem;
	background: rgb(119,145,107);
	border: none;
	border-radius: 12px;
  margin-inline: auto;
  margin-block: 2em;
}

button a {
  color : #221a1a;
  font-size: large;
  text-decoration: none;
  font-weight: bold;
}


dt {
	font-weight: bold;
	font-size: larger;
	margin-block-start: 1.5rem;
}

dt:first-letter {
text-transform: capitalize;
}

@media only screen and (max-width:437px) and (orientation:portrait) {
	.englob{
		margin-inline:unset;
	}

	.art_prez {
	flex-direction: column-reverse;
	gap:.65rem;
}

.img_temps {
	width: 50px;
}

	.offre h3, .inter p {
	font-size: larger;
}

.inter {
	flex-direction: column;
}

.img_inter {
width:auto;
}
	.img_prez {
	width: 181px;
	align-self: center;
}

}