/* =========================================
   PORTFOLIO — Boris Miletic
   Palette "ciment & cobalt" + grand titre Unbounded variable
   ========================================= */

:root {
   --ciment: #e6e9ed;      /* fond principal */
   --papier: #f6f7f9;      /* surfaces claires */
   --encre: #15161d;       /* texte et blocs sombres */
   --gris: #5a606e;        /* texte secondaire */
   --trait: #c6ccd5;       /* bordures fines */
   --cobalt: #2b3fff;      /* accent principal */
   --cobalt-clair: #dfe3ff;
   --signal: #ff3b30;      /* pastille "disponible", rappel de l'ancien rouge */

   --f-titre: "Unbounded", system-ui, sans-serif;
   --f-texte: "Instrument Sans", system-ui, sans-serif;

   --marge: clamp(1rem, 4vw, 3.5rem);
   --largeur: 1320px;
   --rayon: 6px;
}

html {
   scroll-padding-top: 5rem;
}

body {
   background: var(--ciment);
   color: var(--encre);
   font-family: var(--f-texte);
   font-size: 1.0625rem;
   line-height: 1.6;
   overflow-x: hidden;
}

/* Grille de fond très légère, comme un plan */
body::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
   background-image:
      linear-gradient(to right, rgba(21, 22, 29, .045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(21, 22, 29, .045) 1px, transparent 1px);
   background-size: 48px 48px;
   pointer-events: none;
}

::selection {
   background: var(--cobalt);
   color: #fff;
}

a {
   color: inherit;
}

:focus-visible {
   outline: 3px solid var(--cobalt);
   outline-offset: 3px;
   border-radius: 2px;
}

h1, h2, h3 {
   font-family: var(--f-titre);
   line-height: 1.1;
   font-weight: 600;
}

.skip {
   position: absolute;
   left: -999px;
   top: 1rem;
   background: var(--encre);
   color: #fff;
   padding: .6rem 1rem;
   z-index: 100;
}

.skip:focus {
   left: 1rem;
}

/* =========================================
   NAVIGATION
   ========================================= */
.nav {
   position: fixed;
   top: 1rem;
   left: 50%;
   translate: -50% 0;
   z-index: 50;
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: .4rem .4rem .4rem .9rem;
   background: rgba(246, 247, 249, .78);
   backdrop-filter: blur(14px) saturate(1.4);
   -webkit-backdrop-filter: blur(14px) saturate(1.4);
   border: 1px solid var(--trait);
   border-radius: 999px;
   box-shadow: 0 10px 30px -18px rgba(21, 22, 29, .5);
   transition: translate .4s ease, opacity .4s ease;
}

.nav.cachee {
   translate: -50% -150%;
   opacity: 0;
}

.nav-logo {
   font-family: var(--f-titre);
   font-weight: 800;
   font-size: .95rem;
   text-decoration: none;
   margin-right: .4rem;
}

.nav-liens {
   display: flex;
   gap: .15rem;
}

.nav-liens a {
   display: block;
   padding: .45rem .8rem;
   border-radius: 999px;
   font-size: .92rem;
   font-weight: 500;
   text-decoration: none;
   color: var(--gris);
   transition: color .2s, background .2s;
}

.nav-liens a:hover {
   color: var(--encre);
}

.nav-liens a.actif {
   background: var(--encre);
   color: #fff;
}

.nav-cv {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   padding: .45rem .9rem;
   border-radius: 999px;
   background: var(--cobalt);
   color: #fff;
   font-size: .92rem;
   font-weight: 600;
   text-decoration: none;
}

.nav-cv:hover {
   background: var(--encre);
}

/* Bouton menu : visible seulement sur tablette et mobile */
.nav-menu {
   display: none;
   width: 2.4rem;
   height: 2.4rem;
   border: 0;
   border-radius: 50%;
   background: transparent;
   cursor: pointer;
   position: relative;
}

.nav-menu span {
   position: absolute;
   left: .7rem;
   right: .7rem;
   height: 2px;
   border-radius: 2px;
   background: var(--encre);
   transition: translate .3s, rotate .3s;
}

.nav-menu span:first-child { translate: 0 -4px; }
.nav-menu span:last-child { translate: 0 4px; }

.nav.ouverte .nav-menu span:first-child { translate: 0; rotate: 45deg; }
.nav.ouverte .nav-menu span:last-child { translate: 0; rotate: -45deg; }

/* =========================================
   HERO — le moment fort de la page
   ========================================= */
.hero {
   display: flex;
   flex-direction: column;
   padding: 6.5rem var(--marge) clamp(3rem, 8vh, 5rem);
   max-width: var(--largeur);
   margin: 0 auto;
}

.hero-statut {
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   align-self: flex-start;
   padding: .35rem .9rem .35rem .7rem;
   border: 1px solid var(--trait);
   border-radius: 999px;
   background: var(--papier);
   font-size: .9rem;
   color: var(--gris);
   margin-bottom: 1.5rem;
}

.pastille {
   width: .55rem;
   height: .55rem;
   border-radius: 50%;
   background: var(--signal);
   box-shadow: 0 0 0 0 rgba(255, 59, 48, .5);
   animation: pouls 2.4s ease-out infinite;
}

@keyframes pouls {
   70% { box-shadow: 0 0 0 .55rem rgba(255, 59, 48, 0); }
   100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

.hero-nom {
   font-size: clamp(3.6rem, 17.5vw, 17rem);
   font-weight: 300;
   line-height: .88;
   letter-spacing: -.045em;
   margin-left: -.06em;
   user-select: none;
}

.hero-nom .ligne {
   display: block;
   white-space: nowrap;
}

.hero-nom .ligne + .ligne {
   color: var(--cobalt);
   padding-left: clamp(0rem, 9vw, 9rem);
}

/* Chaque lettre a son propre poids, piloté par le JS */
.hero-nom .lettre {
   display: inline-block;
   font-weight: var(--poids, 300);
   transition: font-weight .35s cubic-bezier(.2, .7, .2, 1);
}

.hero-bas {
   display: grid;
   grid-template-columns: minmax(0, 34rem) auto;
   justify-content: space-between;
   align-items: end;
   gap: 2rem;
   margin-top: clamp(2rem, 5vh, 3.5rem);
   padding-top: 1.5rem;
   border-top: 1px solid var(--encre);
}

.hero-texte {
   font-size: 1.15rem;
   color: var(--gris);
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: .6rem;
}

.btn {
   display: inline-flex;
   align-items: center;
   padding: .8rem 1.3rem;
   border: 1px solid var(--encre);
   border-radius: 999px;
   font-weight: 600;
   font-size: .95rem;
   text-decoration: none;
   transition: background .2s, color .2s;
}

.btn:hover {
   background: var(--encre);
   color: #fff;
}

.btn-plein {
   background: var(--encre);
   color: #fff;
}

.btn-plein:hover {
   background: var(--cobalt);
   border-color: var(--cobalt);
}

/* =========================================
   SECTIONS
   ========================================= */
.section {
   max-width: var(--largeur);
   margin: 0 auto;
   padding: clamp(4rem, 10vw, 8rem) var(--marge);
}

.section-tete {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   flex-wrap: wrap;
   gap: .5rem 2rem;
   margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section h2 {
   font-size: clamp(1.9rem, 6vw, 4.2rem);
   font-weight: 700;
   letter-spacing: -.035em;
}

.section-tete p {
   color: var(--gris);
   max-width: 28rem;
}

/* =========================================
   PROJETS
   ========================================= */
.projet {
   display: grid;
   grid-template-columns: 1.15fr 1fr;
   gap: clamp(1.5rem, 4vw, 3.5rem);
   align-items: center;
   padding: clamp(1.5rem, 3vw, 2.5rem) 0;
   border-top: 1px solid var(--trait);
}

.projet:nth-of-type(even) .projet-visuel {
   order: 2;
}

.projet-visuel {
   border-radius: var(--rayon);
   overflow: hidden;
   aspect-ratio: 16 / 10;
}

.capture {
   background: var(--encre);
   border: 1px solid var(--trait);
}

.capture img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
   transition: scale .6s cubic-bezier(.2, .7, .2, 1);
}

.projet:hover .capture img {
   scale: 1.04;
}

.projet-meta {
   font-size: .9rem;
   color: var(--gris);
   margin-bottom: .4rem;
}

.projet h3 {
   font-size: clamp(1.5rem, 3vw, 2.2rem);
   letter-spacing: -.025em;
   margin-bottom: .8rem;
}

.projet-texte > p {
   max-width: 34rem;
}

.tags {
   display: flex;
   flex-wrap: wrap;
   gap: .4rem;
   margin: 1.1rem 0 1.3rem;
}

.tags li {
   padding: .2rem .65rem;
   border: 1px solid var(--trait);
   border-radius: 999px;
   font-size: .85rem;
   background: var(--papier);
}

.note {
   font-size: .9rem;
   color: var(--gris);
   margin-bottom: 1.2rem;
}

.lien-projet {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   font-weight: 600;
   text-decoration: none;
   border-bottom: 2px solid var(--cobalt);
   padding-bottom: .1rem;
   transition: color .2s, gap .2s;
}

.lien-projet:hover {
   color: var(--cobalt);
   gap: .75rem;
}

.lien-projet i {
   font-size: .8em;
}

/* --- Cartes de projet : chacune aux couleurs de son projet --- */
.projet-vedette {
   --carte: var(--encre);
   --texte-doux: #a9aec0;
   --bord: #3a3d4c;
   --accent: var(--cobalt);
   --accent-clair: #9aa6ff;
   --vitrine: #1d1f2a;
   --fenetre: #0f1016;
   --fenetre-bord: #2c2f3d;
   --incl: -8deg;

   background: var(--carte);
   color: var(--papier);
   border: 0;
   border-radius: calc(var(--rayon) * 2);
   padding: clamp(1.25rem, 3vw, 2.5rem);
   margin: 1.5rem 0;
}

/* L'image à droite penche dans l'autre sens */
.projet-vedette:nth-of-type(even) {
   --incl: 8deg;
}

.projet-vedette .projet-meta,
.projet-vedette .projet-texte > p {
   color: var(--texte-doux);
}

.projet-vedette .tags li {
   background: transparent;
   border-color: var(--bord);
   color: var(--papier);
}

.projet-vedette .lien-projet {
   color: #fff;
   border-color: var(--accent);
}

.projet-vedette .lien-projet:hover {
   color: var(--accent-clair);
}

/* Tag qui signale un projet vibecodé avec l'IA */
.projet-vedette .tags .tag-ia {
   border-color: var(--accent);
   color: var(--accent);
}

/* Capture du projet dans une fenêtre inclinée */
.vitrine {
   background: var(--vitrine);
   display: grid;
   place-items: center;
   padding: clamp(1.25rem, 4vw, 2.75rem);
   aspect-ratio: auto;
}

.fenetre {
   width: 100%;
   max-width: 26rem;
   background: var(--fenetre);
   border: 1px solid var(--fenetre-bord);
   border-radius: 10px;
   box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .8);
   transform: perspective(900px) rotateY(var(--incl)) rotateX(4deg);
   transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.projet-vedette:hover .fenetre {
   transform: perspective(900px) rotateY(0) rotateX(0);
}

.fenetre-barre {
   display: flex;
   align-items: center;
   gap: .3rem;
   padding: .55rem .7rem;
   border-bottom: 1px solid var(--fenetre-bord);
}

.fenetre-barre span {
   width: .5rem;
   height: .5rem;
   border-radius: 50%;
   background: var(--fenetre-bord);
}

.fenetre-barre em {
   font-style: normal;
   font-size: .72rem;
   color: var(--texte-doux);
   margin-left: .6rem;
}

.fenetre img {
   width: 100%;
   border-radius: 0 0 10px 10px;
}

.liens-projet {
   display: flex;
   flex-wrap: wrap;
   gap: .8rem 1.6rem;
}

/* MW4 Camo Tracker : vert sombre, vert "débloqué" et or (thème sombre du tracker) */
.projet-mw4 {
   --carte: #121614;
   --texte-doux: #9aa49d;
   --bord: #2e3732;
   --accent: #7cc46e;
   --accent-clair: #a9e09c;
   --fenetre: #121614;
   --fenetre-bord: #2e3732;
   --vitrine:
      radial-gradient(120% 90% at 0% 0%, #3f7a3a 0%, transparent 55%),
      radial-gradient(90% 90% at 100% 100%, #a57d12 0%, transparent 55%),
      #1b211e;
}

/* ASCII Local : noir profond et vert citron de l'interface, rose et orange des rendus */
.projet-ascii {
   --carte: #0d0d10;
   --texte-doux: #a3a3ad;
   --bord: #2a2a31;
   --accent: #d4ff3a;
   --accent-clair: #e8ff99;
   --fenetre: #0d0d10;
   --fenetre-bord: #2a2a31;
   --vitrine:
      radial-gradient(110% 90% at 100% 0%, #e2457a 0%, transparent 55%),
      radial-gradient(90% 90% at 0% 100%, #f08a3a 0%, transparent 55%),
      #18181d;
}

/* Climbscope : ardoise et orange du site */
.projet-climb {
   --carte: #243241;
   --texte-doux: #b9c4d0;
   --bord: #3f5367;
   --accent: #ff6a2b;
   --accent-clair: #ffa070;
   --fenetre: #1a252f;
   --fenetre-bord: #3f5367;
   --vitrine:
      radial-gradient(120% 90% at 100% 0%, #ff4500 0%, transparent 55%),
      radial-gradient(90% 90% at 0% 100%, #7a2a00 0%, transparent 60%),
      #2c3e50;
}

/* Dishonored : noir, or vieilli et rouge sang du site fan */
.projet-dish {
   --carte: #1a1a1a;
   --texte-doux: #b3ab9b;
   --bord: #3b362c;
   --accent: #c5a059;
   --accent-clair: #ffd68b;
   --fenetre: #111;
   --fenetre-bord: #3b362c;
   --vitrine:
      radial-gradient(120% 90% at 0% 100%, #b10101 0%, transparent 55%),
      radial-gradient(90% 90% at 100% 0%, #6e5526 0%, transparent 60%),
      #222;
}

/* =========================================
   À PROPOS
   ========================================= */
.apropos {
   display: grid;
   grid-template-columns: minmax(0, 22rem) 1fr;
   gap: clamp(2rem, 6vw, 5rem);
   align-items: start;
}

.apropos-photo {
   position: sticky;
   top: 6rem;
   border-radius: var(--rayon);
   overflow: hidden;
   background: var(--cobalt-clair);
   aspect-ratio: 4 / 5;
}

.apropos-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: grayscale(1) contrast(1.05);
   mix-blend-mode: multiply;
   transition: filter .5s;
}

.apropos-photo.visible img {
   filter: none;
   mix-blend-mode: normal;
}

.apropos-texte h2 {
   margin-bottom: 1.5rem;
}

.apropos-texte p {
   max-width: 38rem;
   margin-bottom: 1rem;
}

.apropos-texte .grand {
   font-size: clamp(1.25rem, 2.2vw, 1.55rem);
   line-height: 1.4;
   font-weight: 500;
}

.faits {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   border-top: 1px solid var(--encre);
   margin: 2rem 0 1.5rem;
   max-width: 38rem;
}

.faits div {
   padding: .9rem 0;
   border-bottom: 1px solid var(--trait);
}

.faits dt {
   font-size: .85rem;
   color: var(--gris);
}

.faits dd {
   font-weight: 600;
}

.interets {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: .4rem 1.2rem;
   color: var(--gris);
}

.interets i {
   color: var(--cobalt);
   margin-right: -.8rem;
}

/* =========================================
   PARCOURS — frise chronologique
   ========================================= */
.frise {
   position: relative;
   margin-left: .3rem;
}

/* Ligne de fond + ligne qui se remplit au scroll */
.frise::before,
.frise::after {
   content: "";
   position: absolute;
   left: 0;
   top: .5rem;
   bottom: .5rem;
   width: 2px;
}

.frise::before {
   background: var(--trait);
}

.frise::after {
   background: var(--cobalt);
   transform-origin: top;
   transform: scaleY(var(--progression, 0));
}

.etape {
   position: relative;
   display: grid;
   grid-template-columns: 11rem 1fr;
   gap: 1.5rem;
   padding: 0 0 2.5rem 2rem;
}

.etape::before {
   content: "";
   position: absolute;
   left: -5px;
   top: .45rem;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--ciment);
   border: 2px solid var(--trait);
   z-index: 1;
   transition: background .3s, border-color .3s;
}

.etape.atteinte::before {
   border-color: var(--cobalt);
   background: var(--cobalt);
}

.etape.en-cours::before {
   box-shadow: 0 0 0 5px var(--cobalt-clair);
}

.etape-date {
   font-size: .92rem;
   color: var(--gris);
   padding-top: .1rem;
   font-variant-numeric: tabular-nums;
}

.etape h3 {
   font-size: clamp(1.05rem, 2vw, 1.3rem);
   letter-spacing: -.015em;
   margin-bottom: .25rem;
}

.etape-contenu > p {
   color: var(--gris);
}

.badge {
   display: inline-block;
   vertical-align: middle;
   font-family: var(--f-texte);
   font-size: .75rem;
   font-weight: 600;
   letter-spacing: 0;
   padding: .15rem .55rem;
   margin-left: .4rem;
   border-radius: 999px;
   background: var(--cobalt);
   color: #fff;
}

details {
   margin-top: .7rem;
   max-width: 38rem;
}

summary {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: .45rem;
   font-weight: 600;
   font-size: .92rem;
   color: var(--cobalt);
   list-style: none;
}

summary::-webkit-details-marker {
   display: none;
}

summary::before {
   content: "+";
   display: inline-grid;
   place-items: center;
   width: 1.2rem;
   height: 1.2rem;
   border-radius: 50%;
   border: 1.5px solid currentColor;
   font-size: .9rem;
   line-height: 1;
   transition: rotate .3s;
}

details[open] summary::before {
   rotate: 45deg;
}

details ul {
   margin: .8rem 0 0 .2rem;
}

details li {
   position: relative;
   padding-left: 1.1rem;
   margin-bottom: .35rem;
}

details li::before {
   content: "";
   position: absolute;
   left: 0;
   top: .7em;
   width: .45rem;
   height: 2px;
   background: var(--cobalt);
}

details p {
   margin-top: .6rem;
   color: var(--gris);
}

/* =========================================
   COMPÉTENCES
   ========================================= */
.competences-grille {
   display: grid;
   grid-template-columns: 1.6fr 1fr;
   gap: clamp(2rem, 5vw, 4rem);
   align-items: start;
}

.niveaux li {
   display: grid;
   grid-template-columns: 1fr auto 7.5rem;
   align-items: center;
   gap: 1.2rem;
   padding: 1rem 0;
   border-bottom: 1px solid var(--trait);
}

.niveaux li:first-child {
   border-top: 1px solid var(--encre);
}

.techno {
   font-weight: 600;
}

.techno i {
   width: 1.4rem;
   color: var(--gris);
}

.jauge {
   display: flex;
   gap: 4px;
}

.jauge i {
   width: 1.6rem;
   height: .5rem;
   border-radius: 2px;
   background: var(--trait);
   transition: background .3s;
}

/* Les cases se remplissent une à une quand la section apparaît */
.competences.visible .jauge i:nth-child(1) { background: var(--cobalt); transition-delay: .0s; }
.competences.visible li[style*="--n:2"] .jauge i:nth-child(-n+2),
.competences.visible li[style*="--n:3"] .jauge i:nth-child(-n+3),
.competences.visible li[style*="--n:4"] .jauge i:nth-child(-n+4),
.competences.visible li[style*="--n:5"] .jauge i { background: var(--cobalt); }
.jauge i:nth-child(2) { transition-delay: .12s; }
.jauge i:nth-child(3) { transition-delay: .24s; }
.jauge i:nth-child(4) { transition-delay: .36s; }
.jauge i:nth-child(5) { transition-delay: .48s; }

.niveau {
   font-size: .9rem;
   color: var(--gris);
   text-align: right;
}

.savoir-etre {
   background: var(--encre);
   color: var(--papier);
   border-radius: calc(var(--rayon) * 2);
   padding: 1.75rem;
}

.savoir-etre h3 {
   font-size: 1.15rem;
   margin-bottom: 1.1rem;
}

.savoir-etre ul {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
}

.savoir-etre li {
   padding: .35rem .85rem;
   border: 1px solid #3a3d4c;
   border-radius: 999px;
   font-size: .95rem;
}

/* =========================================
   CONTACT / FOOTER
   ========================================= */
.contact {
   background: var(--cobalt);
   color: #fff;
   padding: clamp(4rem, 10vw, 8rem) 0 2rem;
}

.contact-interieur {
   max-width: var(--largeur);
   margin: 0 auto;
   padding: 0 var(--marge);
}

.contact h2 {
   font-size: clamp(2.6rem, 9vw, 7rem);
   font-weight: 800;
   letter-spacing: -.045em;
   margin-bottom: 1rem;
}

.contact-interieur > p {
   font-size: 1.15rem;
   color: #dfe3ff;
}

.contact-mail {
   display: block;
   width: fit-content;
   margin-top: 2rem;
   font-family: var(--f-titre);
   font-size: clamp(1.1rem, 3.6vw, 2.4rem);
   font-weight: 500;
   letter-spacing: -.02em;
   text-decoration: none;
   border-bottom: 3px solid rgba(255, 255, 255, .35);
   transition: border-color .2s;
   overflow-wrap: normal;
}

.contact-mail:hover {
   border-color: #fff;
}

.contact-liens {
   display: flex;
   flex-wrap: wrap;
   gap: .6rem;
   margin-top: 2.5rem;
}

.contact-liens a {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   padding: .65rem 1.1rem;
   border: 1px solid rgba(255, 255, 255, .45);
   border-radius: 999px;
   font-weight: 500;
   text-decoration: none;
   transition: background .2s, color .2s;
}

.contact-liens a:hover {
   background: #fff;
   color: var(--cobalt);
}

.contact :focus-visible {
   outline-color: #fff;
}

.copyright {
   margin-top: 4rem;
   padding-top: 1.2rem;
   border-top: 1px solid rgba(255, 255, 255, .25);
   font-size: .85rem;
   color: #c7cdff;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
   .nav-menu {
      display: block;
   }

   /* Les liens deviennent un panneau déroulant sous la barre */
   .nav-liens {
      position: absolute;
      top: calc(100% + .5rem);
      left: 50%;
      translate: -50% 0;
      width: min(18rem, calc(100vw - 2rem));
      flex-direction: column;
      gap: .2rem;
      padding: .5rem;
      background: var(--papier);
      border: 1px solid var(--trait);
      border-radius: 1.25rem;
      box-shadow: 0 20px 40px -20px rgba(21, 22, 29, .5);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-.5rem);
      transition: opacity .25s, transform .25s, visibility .25s;
   }

   .nav.ouverte .nav-liens {
      opacity: 1;
      visibility: visible;
      transform: none;
   }

   .nav-liens a {
      padding: .8rem 1rem;
      font-size: 1.05rem;
      color: var(--encre);
   }

   .hero {
      padding-top: 5.5rem;
   }

   .hero-bas,
   .projet,
   .apropos,
   .competences-grille {
      grid-template-columns: 1fr;
   }

   .projet:nth-of-type(even) .projet-visuel {
      order: 0;
   }

   .apropos-photo {
      position: static;
      max-width: 16rem;
   }

   .etape {
      grid-template-columns: 1fr;
      gap: .2rem;
   }
}

@media (max-width: 520px) {
   .niveaux li {
      grid-template-columns: 1fr auto;
   }

   .niveau {
      grid-column: 1 / -1;
      text-align: left;
      margin-top: -.6rem;
   }

   .jauge i {
      width: 1.1rem;
   }

   .faits {
      grid-template-columns: 1fr;
   }
}

@media (prefers-reduced-motion: reduce) {
   .fenetre {
      transform: none;
   }

   .apropos-photo img {
      filter: none;
      mix-blend-mode: normal;
      transition: none;
   }
}