/* style.css */
:root {
    color-scheme: light dark;
    --duration: 0.5s;
    --timing: ease;
    --content-max-width: 640px;
    --content-min-width: 320px;
    --color: #101820;
    --background-color: #fafafa;
    --icon-filter_hover: invert(60%);
    --link-hover-color: #6B757E;
    --border-color: #eeeeee;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color: #fafafa;
        --background-color: #101820;
        --image-filter: grayscale(50%);
        --icon-filter: invert(100%);
        --icon-filter_hover: invert(40%);
        --link-hover-color: #698395;
        --border-color: #3e4851;
    }
    
    img:not([src*='.svg']) {
      filter: var(--image-filter);
    }
    
    img[src*='.svg'] {
      filter: var(--icon-filter);
    }
}

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

/* Afacad Regular */
@font-face {
    font-family: "Afacad";
    src: url('../fonts/Afacad/static/Afacad-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Urbanist Regular */
@font-face {
    font-family: "Urbanist";
    src: url('../fonts/Urbanist/static/Urbanist-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:target {
    scroll-margin-block: 5ex;
}

body {
    color: var(--color);
    background-color: var(--background-color);
    transition: color var(--duration) var(--timing), background-color var(--duration) var(--timing);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-family: "Afacad", Calibri, Tahoma, sans-serif;
    min-height: 100vh;
}

h1, h2, h3, p {margin:0.5rem 0; font-weight: normal;overflow-wrap: break-word;}
.header-main--name, h1, h2 {font-size: clamp(1.5rem, 1.4036rem + 0.4819vw, 2rem);}
.header-main--name {font-weight: bold;}
h1.header-main--h1 {/*font-size: clamp(1.5rem, 1.4036rem + 0.4819vw, 2rem);*/font-size: clamp(1.1875rem, 0.9315rem + 0.8904vw, 2rem);margin: 0;line-height: 1.1;}
li, p {font-size: clamp(1rem, 0.9518rem + 0.241vw, 1.25rem);}
h2 {font-family: "Urbanist", Calibri, Tahoma, sans-serif;text-wrap: balance;}
p {margin:1.5rem 0;text-align:justify;}
p > a, li > a,
p > a:visited, li > a:visited {
    color: var(--color);
    text-decoration: none;
    border-bottom: 1px var(--color) solid;
}
p > a:active, li > a:active,
p > a:hover, li > a:hover,
p > a:focus, li > a:focus {
    color: var(--link-hover-color);
    text-decoration: none;
    border-bottom: 1px var(--link-hover-color) solid;
}
a[rel*="external"]::after {
    content: '';
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/></svg>") no-repeat 50% 50%;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/></svg>") no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 6px;
    background-color:var(--color);
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
}
.container > header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-top: 1rem;
}
.container > header > .header-img {
    margin-top: 1rem;
}
.container > header > .header-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    margin-left: 4rem;
}
.container .content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}
.container .content > section {
    margin-top: 1rem;
    padding-top: 1rem;
    width: 100%;
}
.container .content > section:not(:first-child) {
    margin-top: 2rem;
    border-top: 1px var(--border-color) solid;
}

section > ul {
    padding: 0;
    list-style: none;
}
section > ul > li:not(:last-child)  {
    margin-bottom: 1.5rem;
}
section > ul > li > h3 {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0;
}
.nav-menu {margin: 2rem 0;}
.nav-menu > ul,
ul.socials {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-menu > ul > li,
ul.socials > li {
    margin: 1rem;
}

.nav-menu > ul > li > a,
.nav-menu > ul > li > a:visited {
    color: var(--color);
    text-decoration: none;
}
.nav-menu > ul > li > a:active,
.nav-menu > ul > li > a:hover,
.nav-menu > ul > li > a:focus {
    color: var(--link-hover-color);
    text-decoration: none;
    border-bottom: 1px var(--link-hover-color) solid;
}

ul.socials > li > a,
ul.socials > li > a:visited,
ul.socials > li > a:active,
ul.socials > li > a:hover,
ul.socials > li > a:focus {
    color: var(--color);
    text-decoration: none;
    border-bottom: 0 none;
}

h3 > svg{vertical-align: sub;margin-right: 0.75rem;}
footer > a {color: inherit;}
footer > a svg{width: 100px;}

img[src*='.svg']:hover {
    filter: var(--icon-filter_hover);
}

#experiences ul,
#formation ul {
    padding: 0;
}
#experiences li,
#formation li {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 1rem;
    padding: 0;
}
footer {margin-top: 10rem;}
footer, footer > p {
    text-align: center;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

@media only screen and (max-width: 460px) {
    .container > header > .header-main{
        margin-left: 2rem;
    }

    .nav-menu > ul > li,
    ul.socials > li {
        margin: 0.25rem 0.75rem;
    }
}

tr, td {position:relative;}
        td:active {cursor: grabbing;}
        /* Style de l'overlay (l'arrière-plan sombre) */
        .overlay {
            position: fixed; /* Couvre toute la fenêtre */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Noir semi-transparent */
            z-index: 1000; /* Assure qu'il est au-dessus du contenu */
            opacity: 0; /* Initialement invisible */
            visibility: hidden; /* Empêche les interactions */
            transition: opacity 0.3s ease-in-out, visibility 0s 0.3s; /* Animation douce d'apparition */
            display: grid; /* Pour centrer facilement la modale */
            place-items: center; /* Centre horizontalement et verticalement */
        }

        .overlay.active {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.3s ease-in-out, visibility 0s 0s; /* Animation inverse pour l'apparition */
        }

        /* Style de la modale */
        .modal {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 90%; /* S'adapte aux petits écrans */
            max-width: 500px; /* Largeur maximale sur les grands écrans */
            z-index: 1001; /* Au-dessus de l'overlay */
            opacity: 0; /* Initialement invisible */
            transform: translateY(-20px); /* Légèrement décalée vers le haut */
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        }

        .overlay.active .modal {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.1s; /* Légère attente pour l'effet d'apparition */
        }

        .modal h3 {
            color: #333;
            font-size: 1.8em;
            margin-top: 0;
            margin-bottom: 20px;
            text-align: center;
        }

        .modal label, form label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: bold;
        }

        .modal input[type="text"], form input[type="email"] {
            width: calc(100% - 12px); /* Ajustement pour le padding */
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1em;
        }

        .modal input[type="text"]:focus, form input[type="email"]:focus {
            outline: none;
            border-color: #007bff; /* Couleur d'accent */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
        }

        .modal button, form button {
            background-color: #007bff; /* Couleur principale */
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;
            margin-top: 10px;
        }

        .modal button:hover, form button:hover {
            background-color: #0056b3;
        }

        .modal button#closeModal {
            background-color: #6c757d; /* Couleur secondaire pour la fermeture */
            margin-left: 10px;
        }

        .modal button#closeModal:hover {
            background-color: #545b62;
        }

        .modal form button[type="submit"] {
            display: block; /* Pour qu'il prenne toute la largeur si nécessaire */
            width: 100%;
        }

        .modal form br {
            display: none; /* On gère l'espacement avec les marges des labels et inputs */
        }

        button#openModal, button#copyTable  {
            background-color: #007bff; /* Couleur principale */
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;
            margin-top: 10px;
        }

        button#copyTable:hover {
            background-color: #0056b3;
        }

        button#openModal {
            background-color: #6c757d; /* Couleur secondaire pour la fermeture */
            margin-left: 10px;
        }

        button#openModal:hover {
            background-color: #545b62;
        }

        .dragging-clone {
          position: absolute;
          pointer-events: none;
          opacity: 0.9;
          background: white;
          border: 1px dashed #333;
          padding: 10px;
          z-index: 9999;
          box-shadow: 2px 4px 10px rgba(0,0,0,0.2);
        }
        .drop-target {
          outline: 2px dashed #007bff;
          background: #eef6ff;
        }

        .actions {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: space-around;
            align-items: center;
        }

        .wrapper {
          margin-bottom: 3rem;
        }

        h1 {
          text-align: center;
          margin-bottom: 3rem;
        }

        .flash.success { background: #d4edda; color: #155724; padding: 10px; }
.flash.error   { background: #f8d7da; color: #721c24; padding: 10px; }
.flash.info    { background: #cce5ff; color: #004085; padding: 10px; }