/* --- POLICES --- */
@font-face { 
    font-family: 'cantarell_bold';
    src: url('polices/Cantarell-Bold.ttf') format('truetype');
}
@font-face { 
    font-family: 'cantarell_bold_obliq';
    src: url('polices/Cantarell-BoldOblique.ttf') format('truetype');
}
@font-face { 
    font-family: 'cantarell_regular';
    src: url('polices/Cantarell-Regular.ttf') format('truetype');
}
@font-face { 
    font-family: 'cantarell_oblique';
    src: url('polices/Cantarell-Oblique.ttf') format('truetype');
}

/* --- GLOBAL --- */
body {
    font-family: 'cantarell_regular', Arial, sans-serif;
    background-image: url("images/fond_blanc.png");
    /* "fixed" est déconseillé sur mobile (saccades au défilement, souvent
       ignoré/coûteux sur iOS Safari) : "scroll" est plus fiable partout. */
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    padding: 0;
}

#bloc_page {
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

/* --- HEADER, NAVIGATION --- */
header {
    border-bottom: 2px #E77817 solid;
    border-radius: 6px;
    width: 100%;
}

nav {
    font-family: 'cantarell_regular';
    background-color: black;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    min-height: 48px;
}

/* Compense le nav en position:fixed pour que le haut de chaque page
   ne se retrouve pas caché en dessous. */
#bloc_page {
    padding-top: 48px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Bouton hamburger : caché par défaut (desktop), affiché en dessous du breakpoint */
#nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: 12px 16px;
    cursor: pointer;
}
.nav-toggle-bar {
    display: block;
    width: 24px;
    height: 3px;
    margin: 4px 0;
    background-color: white;
}

#nav-menu {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}
#nav-menu li {
    position: relative;
}
#nav-menu > li > a,
#nav-menu button.submenu-toggle {
    display: block;
    width: 100%;
    text-decoration: none;
    padding: 12px 16px;
    color: white;
    background: none;
    border: none;
    font: inherit;
    text-align: center;
    cursor: pointer;
}
#nav-menu li li a,
#nav-menu li li button.submenu-toggle {
    color: white;
    text-align: left;
}

/* Sous-menus : ouverts au survol (souris), au clic/tap (JS ajoute .open),
   ou au clavier (:focus-within, sans JS). */
#nav-menu ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 100%;
    background-color: black;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 1001;
}
#nav-menu li:hover > ul,
#nav-menu li.open > ul,
#nav-menu li:focus-within > ul {
    display: block;
}
#nav-menu li li ul {
    top: 0;
    left: 100%;
}
#nav-menu > li:hover > a,
#nav-menu > li:hover > button.submenu-toggle,
#nav-menu li.open > button.submenu-toggle,
#nav-menu button.submenu-toggle[aria-expanded="true"] {
    background-color: #F1592A;
}

/* --- MENU MOBILE --- */
@media all and (max-width: 900px) {
    nav {
        flex-wrap: wrap;
    }
    #nav-toggle {
        display: block;
        margin-left: auto;
    }
    #nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        flex: none;
    }
    #nav-menu.open {
        display: flex;
    }
    #nav-menu li {
        width: 100%;
    }
    #nav-menu ul {
        display: none;
        position: static;
        min-width: 100%;
    }
    #nav-menu li.open > ul,
    #nav-menu li:focus-within > ul {
        display: block;
    }
    #nav-menu li li ul {
        padding-left: 1rem;
    }
}

/* --- SECTION PRINCIPALE --- */
.corps {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: auto;
    font-family: 'cantarell_regular';
    border-top: 6px #E77817 solid;
    border-bottom: 6px #E77817 solid;
}

article {
    vertical-align: top;
    display: flex;
    flex-direction: column;
    margin: 1px 5px;
    padding: 5px;
    width: 80%;
    justify-content: center;
    align-items: center;
}

aside {
    vertical-align: top;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #E77817;
    width: 20%;
    height: 100%;
    margin-left: 15px;
    color: white;
}

/* --- TITRES UNIFORMISÉS (ORANGE) --- */
h1, h2, h3, .titre {
    font-family: 'cantarell_regular';
    font-weight: bold;
    font-style: normal;
    font-size: large;
    text-decoration: none;
    color: #E77817; /* orange */
}
.titre_aside
{
    color: white; 
    align-items: center; 
    text-align: center;
}
.titre
{
    display: flex;         /* Active le flexbox qui par défaut organise les éléments en ligne*/
    align-items: center; /* centre verticalement les enfants entre eux */
    text-align: center; /* garde le texte centré s'il passe sur plusieurs lignes */
    width: 100%;

}

.titre::before, .titre::after
{
    border-top: 4px solid;
    content:""; /* nécessaire pour afficher le pseudo - élément (le trait) */
    flex: 1; /* partage le reste de la largeur disponible*/
    margin: 0 .5em; /* espace les traits du texte */
}

/* --- VIDÉOS PLYR (une seule définition) --- */
.plyr {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Plyr gère lui-même le ratio d'affichage et injecte son propre wrapper
   (.plyr) autour de la vidéo une fois initialisé. Le forcer soi-même en
   position:absolute + overflow:hidden entre en conflit avec ce wrapper
   (les contrôles peuvent se retrouver rognés ou invisibles). On se
   contente donc de réserver la largeur et d'habiller le résultat,
   que Plyr se soit chargé ou non (repli sur la vidéo native). */
.video-container {
    width: 100%;
    margin: 2rem 0;
}
.video-container video,
.video-container .plyr {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- FORMULAIRES MODERNES --- */
.form-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 2rem;
    margin: 2rem 0;
}
.form-message {
    padding: 0.9rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    margin: 1rem 0 0;
}
.form-message-ok {
    background: #e7f7ec;
    color: #1e7e34;
    border: 1px solid #b7e4c7;
}
.form-message-erreur {
    background: #fdecea;
    color: #b02a37;
    border: 1px solid #f5c2c7;
}
.form-card h2 {
    font-family: 'cantarell_regular';
    font-weight: bold;
    font-style: normal;
    font-size: large;
    text-decoration: none;
    color: #E77817;
    margin-top: 0;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.form-field {
    display: flex;
    flex-direction: column;
}
.form-field label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2c3e50;
}
.form-field input,
.form-field select {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
}
.form-field input:focus,
.form-field select:focus {
    border-color: #3498db;
    outline: none;
}
.form-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}
.btn-primary,
.btn-secondary {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.btn-primary {
    background-color: #3498db;
    color: white;
}
.btn-primary:hover {
    background-color: #E77817;
}
.btn-primary:disabled {
    background-color: #b9c4cc;
    color: #eef1f3;
    cursor: not-allowed;
}
.btn-primary:disabled:hover {
    background-color: #b9c4cc;
}
.btn-secondary {
    background-color: #95a5a6;
    color: white;
}
.btn-secondary:hover {
    background-color: #E77817;
}
.engagement {
    margin: 1rem 0;
    font-size: 0.9rem;
    color: #555;
}

/* --- CHECKBOX VISIBLE ET FONCTIONNEL --- */
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}
.checkbox input[type="checkbox"] {
    /* On ne cache pas complètement, on le rend visible mais on peut le styliser */
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: #E77817; /* couleur native moderne (supporte Firefox, Chrome) */
}
/* Fallback pour les navigateurs ne supportant pas accent-color */
.checkbox input[type="checkbox"]:checked {
    background-color: #E77817;
    border-color: #E77817;
}
/* Texte du label */
.checkbox span {
    flex: 1;
}

/* --- PIED DE PAGE --- */
.pied2page {
    text-align: center;
}
.pied2page a {
    font-family: 'cantarell_regular';
    color: white;
    text-decoration: none;
}
.pied2page a:hover {
    color: #F1592A;
}
footer {
    font-family: 'cantarell_regular';
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 1rem 0;
    border: 2px #F1592A solid;
    border-radius: 7px;
}

/* --- RESPONSIVE --- */
@media all and (max-width: 1024px) {
    .form-card {
        padding: 1.5rem;
    }
    .form-buttons {
        flex-direction: column;
    }
    #bloc_page {
        width: auto;
        height: auto;
    }
    aside {
        visibility: hidden;
        display: none; /* meilleur que visibility: hidden */
    }
    aside p, aside h3, aside ul li {
        display: none;
    }
    nav {
        width: auto;
    }
    section {
        width: 70%;
    }
    /* Ajustement de l'article pour occuper plus d'espace */
    article {
        width: 100%;
    }
}

/* --- VISION ET PARTENAIRES --- */
#vision {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
#logo_dws {
    align-self: center;
    width: auto;
}
.partenaires {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}