@font-face {
  font-family: 'saira_condensedthin';
  src: url('font/sairacondensed-thin-webfont.woff2') format('woff2'),
    url('font/sairacondensed-thin-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

:root {
  --pourpre: oklch(0.39 0.1327 291.29);
  --vert: oklch(0.4 0.0637 167.42);
  --fond: oklch(0.2 0.0079 285.67);
  --texte: oklch(0.9266 0.0676 81.38);
  --bordures: 2px solid oklch(0.9266 0.0676 81.38);
  --ombre-bordures: 0 2px 8px oklch(0.16 0.0045 128.78);
  --anim: 1.2s 0.1s cubic-bezier(0.35, 0, 0.07, 1);
  --fd-clair: oklch(0.27 0.0063 258.36);
}

* {
margin:0;
padding:0;
box-sizing:border-box;
}

html {
    font-size: 100%;
    height: 100%;
}

body {

    line-height: 1.35;
    color: var(--texte);
    font-family: 'saira_condensedthin', sans-serif;
background: var(--fond);
}


main {
    font-size: clamp(1.25rem, 2.25vw, 1.5rem);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    height: 100vh;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

section {
    line-height: 1.4;
    width: 100vw;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
}

section header {
height: auto;
}

section[class|="splash"] header {
  background-size: auto;
  background-position:center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  justify-content: space-between;

}


.splash header {
background: url('../img/splashm.avif');
}

.splash article {
counter-reset: titres3;
}


.splash article h3::before{
counter-increment: titres3;
content: counter(titres3)") ";
}

.splash-1 header {
  background: url('../img/splash1.avif');
}

.splash-1 header h3, .splash header h3 {
  background: var(--fond);
	align-self: center;
  padding: 1.05rem;
	border-top-left-radius: 13pt;
	border-top-right-radius: 13pt;
}

.splash-2 header {
  background: url('../img/splash2.avif');
}

.splash-3 header {
  background: url('../img/splash4a.avif');
}

.splash-5 header {
  background: url('../img/splash5.avif');
}

.numer {
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: fit-content;
  background: #222;
  border-bottom-right-radius: 26pt;
  text-wrap:balance;
  padding-inline-end: .75rem;
}

.numer p {
  width: inherit;
}

.numer h1, .numer h2, .numer h4, .numer p {
  padding-inline-start: .5rem;
  padding-block: inherit;
}

.numer img {
  width:8vw;
}

section article, section article dl {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section header h1, .splash header h1 {
    letter-spacing: .09rem;
    font-size: clamp(1rem, 3cqi + 1rem,2.65rem);

}



section header {
  display: flex;
  flex-direction: column;

}


section h3 {
	font-weight: bolder;
  align-self: flex-start;
	padding-inline-start: 1rem;
	margin-block-start: 1.2rem;
  text-wrap:balance;
}



h2, h5, p, ul {
    padding: 1em;
}

p, dl, dl dt, dl dd, ul {
  width: clamp(32ch,50vw,48ch);
  text-align: justify;
  hyphens: auto;
}

dl {
  background: var(--fd-clair);
  margin-block: .55rem
}



dl dt {
	font-weight: bold;
	margin-block-start: .8rem;
	margin-block-end: .3rem;
	padding: .35rem;
	width: fit-content;
	align-self: flex-end;
  border-top-left-radius: 13pt;
  border-bottom-left-radius: 13pt;
}

.tpe dl dt {
    background: var(--vert);
}

.part dl dt {
    background: var(--pourpre);
}

.tpe dl dt.meta {
  background: var(--pourpre);
}

.part dl dt.meta {
    background: var(--vert);
}

dl dt.meta {
  align-self: flex-start;
  border-top-right-radius: 13pt;
  border-bottom-right-radius: 13pt;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}


dl dd {
	padding-inline-start: 1rem;
	margin-block-start: .55rem;
	font-size: 1.15rem;
	text-align: justify;
	text-align-last: auto;
  padding:.35rem;
}

dl dd::before {
  content: '*';
  padding-inline-end: .5rem;
}

/* details and summary*/

article.faq {
align-items:unset;
width: 90vw;

}

summary {
  background: var(--fd-clair);
  border-radius:12px;
  margin-block: 1rem;
  padding: .85rem;
}

summary:hover {
cursor:pointer;
}

summary {
  position: relative;
}
summary::marker {
  content: none;
}
summary::before,
summary::after {
  content: '';
}
summary::before,
summary::after {
    width: .75em;
    height: 0;
    border-bottom: 2px solid;
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    transform: translateY(-50%);
  }
summary::after {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  transition: var(--anim);

}
[open] summary::after {
  transform: rotate(0deg);
  transition: var(--anim);
}



a {
  color: currentColor;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
en français : https://developer.mozilla.org/fr/docs/Web/CSS/:focus-visible*/
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid #00ff7c;
	background: transparent;
}



/*******************

Actions

*******************/

.action {
    padding: .5em;
    font-size: 1em;
    background: var(--pourpre);
    text-align: center;
    color: snow;
    margin: 1em;
    border-radius: 13pt;
    box-shadow: 1px 1px 2px #111;
    text-decoration: none;
    align-self: center;
}


.action:hover {
    background: var(--vert);
    transition : 1.21s ease-in-out;
    cursor: pointer;
}

.action:not(hover){
    transition : 1.21s ease-in-out;
}

.pourpre {
  border-bottom: 5px solid var(--pourpre);
}

.vert {
  border-bottom: 5px solid var(--vert);
}

dialog {
  background: var(--fond);
	color: var(--texte);
	border-radius: 13pt;
  border: var(--bordures);
  box-shadow: var(--ombre-bordures);
  position:relative;
  top:50%;
  left:50%;
  translate: -50% -50%;
  padding:3rem;
}


dialog::backdrop {
  background:oklch(0.618 0.0575 267.09 / 50%);
  backdrop-filter: blur(3px);
}

.fermer {
	align-self: end;
	background: var(--fond);
	color: var(--texte);
	border: none;
	padding: .75rem;
  position: absolute;
  right:.55rem;
}

.fermer:hover {
  cursor: pointer;
}

/*Cette partie - Copyright (c) 2025 by Ana Tudor (https://codepen.io/thebabydino/pen/azzjyMM)
 avec quelques adapations personnelles*/

dialog p.at {
  place-self: center;
}

dialog p.at {
  --hov: 0;
  position: relative;
  z-index: var(--hov);
  text-decoration: none;
}

dialog p.numemor {
  --img: url('../img/numemor.avif');
}

dialog p.courmemor {
--img: url('../img/courmemor.avif');
}

dialog p.at::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 15em;
  aspect-ratio: 500/207;
  translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
  scale: var(--hov);
  background: var(--img) 50%/cover;
  border-radius: 12px;
  pointer-events: none;
  transition: translate 0.2s ease-out, scale calc(var(--hov)*.3s) ease-out;
  content: "";
}
dialog p.at:is(:hover) {
  --hov: 1 ;
  cursor: pointer;
}
/*---------fin-----------------*/


footer {
  background: var(--fd-clair);
  display: flex;
  place-items: center;
  padding: .85rem;
}

footer img {
  width: max(19%, min(35%, 40%));
}

  @media only screen and (max-width:880px) and (orientation:portrait) {

    section {
        flex-wrap: wrap;
    }

    .splash header {
    background: url('../img/splashm-min.avif');
    }


    .splash-1 header {
      background: url('../img/splash1-min.avif');
    }


    .splash-2 header {
      background: url('../img/splash2-min.avif');
    }

    .splash-3 header {
      background: url('../img/splash4a-min.avif');
    }

    .splash-5 header {
      background: url('../img/splash5-min.avif');
    }

    footer {
      flex-direction: column;
    }


  }