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

: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);
  --fond-trans: oklch(0.202 0.0079 285.67 / 85%);
  --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);
  --rad:13pt;

}

* {
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.15rem, 5.1vw - 1rem, 1.5rem);*/
    font-size: clamp(1rem, 4.8vw - 1.1rem, 1.9rem);
}

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: contain;
  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 h4, .splash header h3 {
  background: var(--fond);
	align-self: center;
  padding: 1.05rem;
	border-top-left-radius: var(--rad);
	border-top-right-radius: var(--rad);
}

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

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

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

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

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

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

.splash-malv header {
  background: url('../img/splash3.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;
  align-items:center;
}

.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;

}

.splash-head {
  display: flex;
  flex-direction: row;
  place-content: space-between;
  background: var(--fond-trans);
}

.splash-head a {
	flex-direction: column;
	display: flex;
	place-content: center;
  padding-inline-start: 1em;
}

.splash-head a span {
  	align-self: center;
  	letter-spacing: 0.17rem;
}


.présentation {
  list-style-type: none;
  background:var(--fd-clair);
  margin-block:2rem;
  border-radius:var(--rad);
}

.présentation li {
	margin-block: 1rem;
	background: var(--fond-trans);
  padding: 1em;
	border-radius: var(--rad);
	display: flex;
	flex-direction: row;
  place-content: space-between;
  flex-wrap: wrap;
	gap: .25em;
}

.initiation::before, .web::before, .wp::before, .ia::before, .lbr::before, .sec::before {
content: " ";
width: 50px;
height: 50px;
background: var(--texte);
}

.initiation::before {
  mask: url(../img/éducation.svg) no-repeat;
  mask-size: contain;
}

.web::before {
  mask: url(../img/rédaction.svg) no-repeat;
  mask-size: contain;
}

.wp::before {
  mask: url(../img/wordpress.svg) no-repeat;
  mask-size: contain;
}

.ia::before {
  mask: url(../img/ia.svg) no-repeat;
  mask-size: contain;
}

.lbr::before {
  mask: url(../img/libre.svg) no-repeat;
  mask-size: contain;
}

.sec::before {
  mask: url(../img/sec.svg) no-repeat;
  mask-size: contain;
}

.présentation li a {
	align-self: center;
	text-decoration: none;
	background: oklch(0.4252 0.1633 269.83);
	padding: .95rem;
	border-radius: var(--rad);
	width: 16rem;
	text-align: center;
	font-weight: bold;
	font-size: medium;
	font-family: arial;
	text-wrap:balance;
}

.présentation li a:hover {
    background: var(--vert);
    transition : 1.21s ease-in-out;
    cursor: pointer;
}

.présentation li a:not(hover){
    transition : 1.21s ease-in-out;
}

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

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

dl {
  font-size: 90%;
  margin-block:4rem;
}



dl dt {
  font-weight: bold;
	padding: .35rem;
	width: fit-content;
	align-self: flex-end;
  border-top-left-radius: var(--rad);
  border-bottom-left-radius: var(--rad);
}

.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);
}

section[class|="splash"] h3 {
  padding: .55rem;
  border-radius: var(--rad);
  background: var(--vert);
  margin-block-start: 1.2rem;
  font-size: clamp(1.2rem, 5.3vw - 1.1rem, 2.2rem);
}

dl dt.meta {
  align-self: flex-start;
  border-top-right-radius: unset;
  border-bottom-right-radius: var(--rad);
  border-top-left-radius: var(--rad);
  border-bottom-left-radius: unset;
}


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

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

.sec li {
  margin-block: 1.85rem;
  padding-inline-start:1.25rem;
}

.sec li::before {
content: " ";
width: 30px;
height: 30px;
background: var(--texte);
display: inline-flex;
padding-inline-end: .35rem;
}

li.cyber::before {
  mask: url(../img/info.svg) no-repeat;
  mask-size: contain;
}

li.sms::before {
  mask: url(../img/sms.svg) no-repeat;
  mask-size: contain;
}

li.courrier::before {
  mask: url(../img/courrier.svg) no-repeat;
  mask-size: contain;
}

.malv {
  counter-reset: chapt;
}

.malv h3::before {
  counter-increment: chapt;
  content: counter(chapt, decimal-leading-zero) ")";
  padding-inline-end: .35rem;
  font-size: inherit;
  color: inherit;
}

/******************* tdm ************************/

.toc {
    padding: 1.55rem;
    background: var(--fd-clair);
    align-self: auto;
    border-radius: var(--rad);
    font-size: 1.5rem;
    ol {
      li {
        padding: 0.15em;
      }
    }
  }


/* details and summary*/

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

/*

from css-tricks

https://css-tricks.com/css-animations-that-leverage-the-parent-child-relationship/
*/

details {
  margin-block: 20px;
  summary {
    display: flex;
    align-items: center;
    column-gap: 20px;
    font-weight: 500;
    text-decoration: underline;
    .icon {
      height: 20px;
      aspect-ratio: 1;
      contain: layout;
      transition: all .3s;
      .icon-square {
        width: 50%;
        aspect-ratio: 1;
        position: absolute;
        transition: inherit;
        background-color: hsl(from var(--c) h s var(--l));
        &:nth-last-of-type(1) { --l: 25%; }
        &:nth-last-of-type(2) { --l: 50%; right: 0; }
        &:nth-last-of-type(3) { --l: 75%; bottom: 0; }
        &:nth-last-of-type(4) { --l: 90%; right: 0; bottom: 0; }
      }
    }
    &:hover {
      cursor: pointer;
    }
  }
  p {
    margin-top: 0;
    transform: translateX(40px);

  }
  h4 {
    margin-block-start: .85rem;
  }
  /*&:nth-of-type(1) {*/
  &:nth-child(n) {
    --c: moccasin;
    &[open] .icon {
      transform: rotate(180deg) scale(1.5);
      .icon-square { transform: scale(1) rotate(-45deg); border-radius: 50%; }
    }
  }
}



a {
  color: currentColor;
  padding-inline: .25rem;
}

/* 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: var(--rad);
    text-decoration: none;
    align-self: center;
    border:unset;
}


.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: var(--rad);
  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;
}

dialog > p span {
  font-family: verdana, sans-serif;
  color: var(--texte);
	font-weight: bolder;
}
/*---------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:767px) and (orientation:portrait) {

    section {
        flex-wrap: wrap;
    }

    .splash-head {
      flex-direction: column;
    }

    .splash-head img {
      align-self:center;
    }

    .splash-head h2 {
      text-align: center;
    }

    .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');
    }

    .présentation li {
      flex-flow: row;
      align-items: center;
    }


    .toc {
      font-size: medium;
    }

    footer {
      flex-direction: column;
    }


  }