/**::selection {}*/
:root
{
--marges: 10vmin;
--bleu: #79abca;
background: #79abca url(Fonds/FondB.webp) no-repeat center / cover fixed;
color: black;
font-family: 'Inter', Sans-Serif;
font-weight: 400;
font-size: 18px;
}
h1, h2, h3, h4, h5, h6, summary
{
color: inherit;
font-family: 'Cabin Condensed', Sans-Serif;
font-weight: 400;
font-size: 2em;
text-transform: uppercase;
& > em {display: block; font-size: 0.65em; font-style: normal;}
}
p {}
ul {list-style: none;}
a {color: inherit;}
hr
{
width: 50%;
max-width: 25em;
margin: calc(var(--marges) * 0.75) auto;
background: black;
}
.infobulle:before
{
--fond: rgba(0,0,0,0.9)/*white*/;
--texte: white/*rgb(50,50,50)*/;
}

/* 404 */
#erreur404
{
width: 320px;
margin: auto;
text-align: center;
}
#erreur404 strong
{
font-size: 1.5em;
font-weight: 800;
line-height: 1.5em;
}
#erreur404 strong span
{
display: block;
font-size: 2em;
}
#erreur404 p {margin: 1em 0;}
#erreur404 a
{
display: inline-block;
padding: 0.25em;
border-radius: 0.25em;
font-size: 0.9em;
}

/* Transition de page */
body
{
--x: 50vw;
--y: 50vh;
--taille: 400vmin;
}
body:after
{
z-index: 20;
content: '';
display: block;
position: fixed;
width: var(--taille);
height: var(--taille);
left: calc((var(--taille) * -0.5) + var(--x));
top: calc((var(--taille) * -0.5) + var(--y));
background: radial-gradient(var(--bleu) 65%, transparent 65%) no-repeat center;
background-size: 0% 0%;
backdrop-filter: blur(50px);
border-radius: 100%;
transform: scale(0);
transition: transform 1s 0.25s, background 1.25s;
}
body.transition:after
{
background-size: 100% 100%;
transform: scale(1);
transition: transform 1.25s, background 1s 0.25s;
}
body.pastransition:after {transition: 0s !important;}

/* TÉLÉPHONE */

#telephone
{
z-index: 1;
display: flex;
position: fixed;
min-width: 48px;
height: 48px;
right: 12px;
top: 72px;
place-items: center;
place-content: center;
background: rgb(200,50,50);
border-radius: 12px;
color: white;
font-size: 1.2em;
font-weight: 600;
transition: padding 0.5s;
& i {filter: saturate(0) brightness(3);}
& em
{
max-width: 0em;
padding-left: 0em;
overflow: hidden;
font-size: 0.7em;
font-style: normal;
white-space: nowrap;
transition: max-width 0.5s, padding 0.5s;
}
&:hover
{
padding-left: 0.5em;
padding-right: 0.5em;
}
&:hover em
{
max-width: 8em;
padding-left: 0.25em;
}
}

/* Bouton retour (pages) */
main > a.retour
{
display: inline-block;
margin: 1em;
padding: 0.75em 1.25em;
background: rgba(0,0,0,0.25);
border-radius: 2em;
font-size: 0.8em;
font-weight: 800;
text-transform: uppercase;
color: white;
text-shadow: 0 0.15em 0.35em rgba(0,0,0,0.5);
& i {margin-right: 0.25em; font-size: 1.25em;}
&:hover {background: white; color: black;}
}
main#accueil > a.retour {display: none;}

/* SECTIONS */

main > section :is(h1, h2, h3, h4, h5, h6)
{
margin-bottom: calc(var(--marges) / 2);
color: white;
text-shadow: 0 0.1em 0.25em rgba(0,0,0,0.5);
}
main:not(#accueil) > section h2
{
margin-top: calc(var(--marges) / 2);
font-size: 1.5em;
}
main:not(#accueil) > section h3
{
margin-top: calc(var(--marges) / 4);
margin-bottom: calc(var(--marges) / 4);
font-size: 1.25em;
}
main > section
{
position: relative;
box-sizing: border-box;
width: 100%;
padding: var(--marges);
text-align: center;
}
main > section p
{
max-width: 45em;
margin: auto;
text-align: justify;
text-align-last: center;
&.important
{
box-sizing: border-box;
margin-top: calc(var(--marges) * 0.5);
margin-bottom: calc(var(--marges) * 0.5);
padding: 2em;
background: var(--bleu) url(Important.svg) repeat;
border-radius: 2em;
outline: 4px solid rgba(0,0,0,0.25);
outline-offset: -8px;
color: rgba(0,0,0,0.5);
font-weight: 600;
}
& > img
{
display: block;
width: calc(100% - 6px);
margin-left: 3px;
margin-bottom: 1em;
border-radius: 2em;
outline: 1px solid black;
outline-offset: 2px;
}
}

/* Listes à puces */
main > section p + :is(ul, ol) {margin-top: calc(var(--marges) * 0.25);}
main > section :is(ul, ol) + p {margin-top: calc(var(--marges) * 0.5);}
main > section ul
{
display: flex;
flex-wrap: wrap;
place-content: center;
justify-items: center;
align-items: start;
gap: 1.5em;
& li {max-width: 30vw; text-wrap: balance;}
& li a
{
z-index: 1;
display: block;
position: relative;
transition: transform 0.35s;
}
& li a:after
{
--taille: 0;
content: '';
z-index: -1;
display: block;
position: absolute;
height: 100%;
aspect-ratio: 1;
left: 50%;
top: 0;
background: white;
border-radius: 100%;
transform: translateX(-50%) scale(var(--taille));
transition: transform 0.35s;
}
& li a:hover
{
transform: scale(0.9) rotate(-3deg);
&:after {--taille: 1.4;}
}
& li i {margin-bottom: 0.25em; font-size: 2.5em;}
& li i img {display: block; height: 1.5em;}
& li em {display: block; font-size: 0.7em;}
& li strong {display: block; margin-bottom: 0.5em;}
}
main > section ul.vertical
{
@media (max-width: 600px) {
flex-direction: column;
gap: 1em;
& li {max-width: initial; text-wrap: nowrap; text-align: left;}
& li i {float: left; margin-left: -1em; margin-right: 0.25em; font-size: 1.5em;}
}
}
main > section ul:is(.composants, .malwares)
{
padding-top: 1em;
gap: 2em;
& li {
text-align: justify;
text-align-last: center;
}
& li img
{
display: block;
overflow: hidden;
width: 6em;
height: 6em;
margin: auto;
margin-bottom: 1em;
border-radius: 35%;
object-fit: contain;
outline: 1px solid black;
outline-offset: 2px;
transform: rotate(-10deg);
&:hover {animation: tremble2 0.25s linear infinite;}
}
}
main > section ul.composants li
{
@media (max-width: 800px) {
position: relative;
overflow: hidden;
min-width: 100%;
max-height: 50em;
transition: max-height 2s;
&:not(.on) {
max-height: 14em;
& > span
{
display: block;
mask: linear-gradient(to bottom, black 0em, transparent 4.5em);
}
&:after
{
content: '▾';
display: block;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
font-size: 2em;
cursor: pointer;
}
}
}
}
main > section ul.malwares li
{
text-align: center;
@media (max-width: 600px) {max-width: initial;}
& em
{
display: inline-block;
padding: 1em 1em 0 1em;
&:after
{
content: attr(data-puces);
display: block;
font-size: 1.75em;
font-style: normal;
}
}
}

/* Listes ordonnées */
main> section ol
{
list-style: none;
}
main> section ol li
{
}
main> section ol li + li:before
{
content: '↓';
display: block;
padding: 0.5em;
}

/* Pied */
footer
{
box-sizing: border-box;
width: 100%;
padding: 3em 1em;
background: rgba(45,45,60,0.6);
box-shadow: inset 0 1em 2em rgba(0,0,0,0.25);
color: rgba(255,255,255,0.65);
font-weight: 600;
text-align: center;
text-wrap: balance;
}
footer > p:first-of-type
{
margin: auto;
margin-bottom: 1em;
max-width: 30em;
& strong
{
color: white;
font-weight: 600;
}
}
footer ul li
{
display: inline-block;
margin: 0.5em;
}
footer ul li a
{
display: block;
padding: 0.5em;
border: 1px solid white;
border-radius: 8px;
font-size: 1.15em;
font-weight: 600;
&:hover {background: white; color: rgba(45,45,60,0.75);}
}
footer .mention
{
display: block;
width: fit-content;
margin: auto;
padding: 0.5em;
&:hover {text-decoration: underline;}
}
footer hr
{
margin: 1em auto;
background: white;
}
footer [alt="Sospel Informatique"], [alt="Tetralyre"]
{
height: 1.25em;
margin: 0.25em;
vertical-align: middle;
}
footer .tetralyre_a {display: inline-flex;}
footer > em
{
display: block;
margin-top: 1em;
font-size: 0.9em;
font-weight: 300;
line-height: 2em;
}