/* ============================================================
   Paramètres généraux
   ============================================================ */

:root {
    /* Rayon du menu circulaire (page d'accueil) */
    --menu-radius: clamp(80px, 22vw, 220px);

    /* Taille des boutons circulaires / rectangulaires */
    --bouton-w: clamp(120px, 13vw, 175px);
    --bouton-h: clamp(80px, 10vh, 100px);
    --bouton-font: clamp(14px, 1.6vw, 21px);

    /* Décalages horizontaux "secondaires" (remplacent les anciennes
       valeurs fixes en px, désormais proportionnelles à l'écran
       pour ne jamais déborder ni se chevaucher) */
    --gap-int: clamp(20px, 6vw, 200px);
    --gap-ext: clamp(15px, 3vw, 100px);
    --gap-plus: clamp(30px, 10vw, 400px);

    /* Position / taille de la box de connexion (form) :
       le logo (#Motif) réutilise exactement ces mêmes variables
       pour rester toujours calé sur le coin de la box, quel que
       soit l'écran. */
    --form-top: 25%;
    --form-left: 25%;
    --form-width: 50%;
    --motif-size: clamp(170px, 20vw, 300px);

    --transition-speed: 0.25s;
}

/* Reset de boîte, pour que padding/border ne fassent jamais déborder
   un élément en dehors de sa largeur définie */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100%;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
}

/* Le défilement vertical est autorisé par défaut : certaines pages
   (accueil desktop) le neutralisent explicitement plus bas si besoin */
   
body {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

h1 {
    margin-left: auto;
    margin-right: auto;
    width: min(700px, 90%);
    text-align: center;
    text-shadow: 5px 4px 7px gray;
    font-size: clamp(1.4rem, 3vw, 2.6rem);
}

h3 {
    margin-left: auto;
    margin-right: auto;
    width: min(400px, 90%);
    text-align: center;
    text-shadow: 5px 4px 7px gray;
    text-decoration: underline;
    font-size: clamp(1.05rem, 2vw, 1.6rem);
}

footer {
    position: relative;
    flex-shrink: 0;
    text-align: center;
    width: 100%;
    margin: auto auto 10px;
    padding: 0 10px;
}

iframe, object, .patch, .embed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: min(95%, 1400px);
    height: min(80vh, 900px);
    box-shadow: 5px 5px 15px gray;
    border: 1px solid black;
    border-radius: 15px;
}

#petit_logo {
    position: fixed;
    top: 10px;
    right: 10px;
    width: clamp(40px, 5vw, 90px);
    height: auto;
    max-width: 90px;
    object-fit: contain;
    z-index: 1000;
    display: block;
}

#petit_logo_index {
    position: fixed;
    top: 10px;
    left: 10px;
    width: clamp(40px, 5vw, 90px);
    height: auto;
    max-width: 90px;
    object-fit: contain;
    z-index: 1000;
    display: block;
}

/* ============================================================
   Authentification
   ============================================================ */

form {
    border: 3px solid black;
    border-radius: 30px;
    width: var(--form-width);
    max-width: 95vw;
    position: absolute;
    top: var(--form-top);
    left: var(--form-left);
    background-color: white;
    padding: 10px 0 20px;
    z-index: 5;
    overflow: visible;
}

label {
    color: black;
    padding: 0;
    margin: 12% 12% 4%;
    display: block;
    text-align: center;
}

input {
    width: 75%;
    max-width: 320px;
    padding: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px; /* évite le zoom automatique sur mobile (iOS) */
}

button {
    width: min(50%, 220px);
    border-radius: 5px;
    margin: 20px auto 25px;
    padding: 10px;
    display: block;
    background-color: white;
    border: 1px solid grey;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    transform: scale(1.15);
    transition: all var(--transition-speed);
    color: white;
    background-color: #1c4ccf;
}

/* ============================================================
   Centralisation des cours et objets
   ============================================================ */

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(200px, auto);
    align-items: center;
    gap: 4px;
    padding: 10px 0;
}

/* ============================================================
   Motif décoratif (fond central des pages hors login)
   ============================================================ */

#Motif {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    width: clamp(300px, 45vw, 650px);
    height: auto;
    object-fit: contain;
}

/* ------------------------------------------------------------
   Login : le logo est ancré exactement sur le coin haut-gauche
   de la box (le <form>). Il réutilise --form-top / --form-left
   afin de toujours rester "collé" à ce coin, à toutes les tailles
   d'écran, sans dépendre de valeurs fixes en pixels.
   ------------------------------------------------------------ */

body.login-page h1 {
    position: relative;
    z-index: 20;
    margin: 20px auto 0;
}

body.login-page #Motif_SAM {
    position: absolute;
    top: var(--form-top);
    left: var(--form-left);
    transform: translate(-25%, -25%);
    width: var(--motif-size);
    height: auto;
    max-width: calc(var(--form-width) * 0.55);
    display: block;
    pointer-events: none;
    z-index: 15; /* au-dessus de la box (5), sous le h1 (20) */
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.35));
}

body.login-page #Motif_Charost {
    position: absolute;
    top: var(--form-top);
    left: calc(var(--form-left) + var(--form-width) + 5%);
    transform: translate(-100%, -25%);
    width: var(--motif-size);
    height: auto;
    max-width: calc(var(--form-width) * 0.55);
    display: block;
    pointer-events: none;
    z-index: 15;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.35));
}

body.login-page #Motif_Bourges {
    position: absolute;
    top: calc(var(--form-top) + 50%);
    left: calc(var(--form-left) - 6%);
    transform: translate(0, 0);
    width: var(--motif-size);
    height: auto;
    max-width: calc(var(--form-width) * 0.55);
    display: block;
    pointer-events: none;
    z-index: 15;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.35));
}

.Superposition {
    position: absolute;
}

/* ------------------------------------------------------------
   Login : le bouton "Patchs" (.Accueil) reprend la même position
   que sur les autres pages, ancré en haut à gauche de l'écran
   (voir la règle générale .Accueil plus haut).
   ------------------------------------------------------------ */



/* ============================================================
   Style de base des boutons
   ============================================================ */

.bouton, .interligne {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--bouton-w);
    min-height: var(--bouton-h);
    padding: 12px 16px;

    border: 3px solid black;
    border-radius: 30px;

    text-align: center;
    line-height: 1.2;
    text-decoration: none;
    color: black;
    font-size: var(--bouton-font);
    font-family: Arial, Helvetica, sans-serif;
}

.Accueil, .logout {
    position: fixed;
    top: 10px;
    z-index: 999;
    height: clamp(40px, 4.5vh, 50px);
    min-width: clamp(80px, 8vw, 140px);
    padding: 0 10px;
    border: 2px solid black;
    border-radius: 30px;
    color: black;
    font-size: clamp(14px, 1.6vw, 20px);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #FFFFFF;
}

.Accueil {
    left: 10px;
}

.logout {
    right: 10px;
}

.DoubleLigne {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.1;
    padding: 6px 12px;
}

.invisible {
    border: transparent;
    cursor: default;
}

/* ============================================================
   Menu circulaire & alignement des 9 boutons (page d'accueil)
   ============================================================ */

.menu-circulaire {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.menu-circulaire .bouton-symetrique {
    position: absolute;
    margin: 0 !important;
    transform:
        rotate(calc(var(--i) * 40deg))
        translateY(calc(-1 * var(--menu-radius)))
        rotate(calc(var(--i) * -40deg));
    transition: transform var(--transition-speed) ease-in-out;
}

.menu-circulaire .bouton-symetrique:hover,
.menu-circulaire .bouton-symetrique:focus-visible {
    transform:
        rotate(calc(var(--i) * 40deg))
        translateY(calc(-1 * var(--menu-radius)))
        rotate(calc(var(--i) * -40deg))
        scale(1.15);
    z-index: 20;
}

/* ============================================================
   Couleurs des boutons (index.html)
   ============================================================ */

#JSP1 { background-color: #FFFFFF; }
#JSP2 { background-color: #FFFF00; }
#JSP3 { background-color: #E97132; }
#JSP4 { background-color: #00B050; }
#Pellicule { background-color: #a95cda; }
#Charte { background-color: rgb(238, 61, 61); }
#Planning { background-color: #00bbff; }
#GTO-GDO { background-color: #c3c1c1; }
#Evaluation { background-color: #ec6c04; }
#Sport { background-color: rgb(255, 79, 164); }
#admin { background-color: rgb(87, 87, 87); }

/* Couleurs des boutons (autres pages) */

#APS-A { background-color: #DB43B5; }
#INC-A { background-color: #FF1F26; }
#INC-B { background-color: #FF871F; }
#INC-C { background-color: #FFF81F; }
#SC-A { background-color: #41DCD4; }
#SC-B { background-color: #4197DC; }
#SC-C { background-color: #4149DC; }
#PPBE-A { background-color: #dadada; }
#PPBE-B { background-color: #828181; }
#PS-A { background-color: #26b619; }
#SDIS { background-color: #43DB69; }
#Traditions { background-color: #CD7F32;}
#GTO { background-color: #1c4ccf; }
#GDO { background-color: #E1000F; }
#Eval-MC { background-color: #ffe033; }
#Eval-dep { background-color: #10459E; }
#MSP { background-color: #ec2424; }
#Renfo { background-color: #28a745; }
#Endurance { background-color: #ffc107; }

a:hover,
a:focus-visible {
    transform: scale(1.15);
    transition: all var(--transition-speed) ease-in-out;
    z-index: 10;
}

/* Focus clavier visible sur tous les éléments interactifs, pour
   l'accessibilité et l'ergonomie (navigation au clavier) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid #1c4ccf;
    outline-offset: 2px;
}

/* ============================================================
   Positionnement des boutons secondaires (hors menu circulaire)
   Valeurs désormais proportionnelles (clamp) : elles s'adaptent
   en continu à la largeur d'écran au lieu de valeurs fixes en px
   qui débordaient sur petits/moyens écrans.
   ============================================================ */

/* Les 3 colonnes de la page d'accueil (Gauche / Centre / Droite)
   sont chacune un conteneur flex centré : les boutons qu'elles
   contiennent sont donc automatiquement alignés au centre de leur
   colonne, avec un espacement régulier — ce qui garantit un rendu
   symétrique par rapport à l'axe de la page, quelle que soit la
   largeur d'écran. Les anciennes classes de décalage (intGauche,
   extGauche, intPlusGauche, intDroite, extDroite, intPlusDroite,
   interieurDroite) restent dans le HTML mais n'appliquent plus de
   marge horizontale : l'alignement est désormais géré par le parent. */

.Gauche, .Droite, #Centre {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vh, 55px);
    height: 100%;
}

/* Les boutons centraux se placent sous le logo central (#Motif)
   tout en restant alignés horizontalement, comme les boutons
   des colonnes Gauche et Droite. */
#Centre {
    margin-top: calc(var(--motif-size) * 0.6);
}

.intGauche, .extGauche, .intPlusGauche,
.intDroite, .extDroite, .intPlusDroite, .interieurDroite {
    margin: 0;
}

.CentreBouton {
    margin: 0;
    bottom : -100%;
}

.MES {
    margin: 0;
    bottom : -60%;
}

.PSE {
    bottom : -150%;
}

.milieu {
    top: 40%;
}

/* ============================================================
   Planning
   ============================================================ */

.planning {
    margin: 20px;
}

.filters, .nav {
    display: flex;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 0 auto 20px;
    padding: 10px;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.day-header {
    font-weight: bold;
    text-align: center;
    background: #f0f0f0;
    padding: 10px;
    font-size: clamp(10px, 1.4vw, 14px);
}

.day-cell {
    border: 1px solid #ddd;
    min-height: 120px;
    height: auto;
    padding: 8px;
    background: #fff;
    font-size: clamp(10px, 1.3vw, 14px);
    overflow: visible;
    box-sizing: border-box;
}

.event {
    margin-top: 5px;
    padding: 5px;
    background: #f1f1f1;
    border-radius: 5px;
    overflow-wrap: anywhere;
}

.empty { background: #fafafa; }
.active-cat { font-weight: bold; text-decoration: underline; }

.choice {
    text-decoration: none;
    color: black;
}

.choice:hover {
    transform: none;
    transition: none;
}

/* A SUPPRIMER A LA TOUTE FIN */

.patch p {
    margin-left: 20px;
    font-size: clamp(14px, 2vw, 20px);
    font-family: Arial, Helvetica, sans-serif;
}

/* Respect de la préférence "réduire les animations" du système */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ============================================================
   CSS Responsive — écrans larges
   ============================================================ */

@media (min-width: 1600px) {
    :root {
        --menu-radius: clamp(120px, 28vw, 320px);
        --form-width: 40%;
        --form-left: 30%;
    }
}

@media (max-width: 1200px) {
    :root {
        --menu-radius: clamp(70px, 24vw, 200px);
        --form-width: 70%;
        --form-left: 15%;
        --form-top: 20%;
    }

    form { border-radius: 20px; }

    h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
}

@media (max-width: 992px) {
    :root {
        --menu-radius: clamp(65px, 25vw, 180px);
        --gap-int: clamp(15px, 5vw, 120px);
        --gap-ext: clamp(10px, 2.5vw, 70px);
        --gap-plus: clamp(20px, 8vw, 260px);
    }

    .CentreBouton { top: auto; }
}

@media (max-width: 900px) {
    :root {
        --menu-radius: clamp(60px, 26vw, 160px);
        --bouton-font: clamp(13px, 2.2vw, 18px);
    }

    .intGauche, .intPlusGauche, .extGauche, .extDroite {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   Version mobile (tablettes portrait et smartphones, <= 768px)
   Tout le contenu passe en flux vertical, en pleine largeur, avec
   des boutons dimensionnés pour un usage tactile confortable
   (hauteur minimale de 48px).
   ============================================================ */

@media (max-width: 768px) {

    :root {
        --menu-radius: 0px;
        --form-top: 12%;
        --form-left: 5%;
        --form-width: 90%;
        --motif-size: clamp(140px, 38vw, 240px);
    }

    /* Grand visuel décoratif de la page d'accueil (index.php) : on le
       réduit et on l'estompe pour qu'il ne recouvre plus les boutons
       une fois ceux-ci empilés verticalement. Ne concerne pas le logo
       de la page login (règle plus spécifique juste après, qui garde
       une pleine opacité). */
    #Motif {
        width: clamp(140px, 55vw, 280px);
        opacity: 0.22;
        z-index: 0;
    }

    /* Le logo de la page login doit rester net et bien visible : on
       neutralise explicitement l'atténuation ci-dessus pour lui. */
    body.login-page #Motif {
        opacity: 1;
        z-index: 15;
    }

    /* La grille Gauche / Centre / Droite passe en une seule colonne,
       chaque section centrée verticalement pour un défilement propre. */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 0 16px !important;
    }

    .Gauche, .Droite, #Centre {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #Centre {
        margin-top: 0 !important;
    }

    html, body {
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 100vh;
        background-size: cover;
    }

    h1 {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
        margin: 60px auto 15px auto !important;
    }

    h3 {
        width: 85% !important;
        font-size: 1.1rem !important;
    }

    .Accueil, .logout {
        top: 10px !important;
        height: 40px !important;
        font-size: 14px !important;
        padding: 0 12px !important;
    }

    .Accueil { left: 10px !important; }
    .logout { right: 10px !important; left: auto !important; }

    /* La box de connexion reste positionnée en absolu (comme sur
       desktop) afin que le logo #Motif — calé sur les mêmes
       variables --form-top/--form-left — reste précisément ancré
       sur son coin haut-gauche, à toute taille d'écran. */
    form {
        padding: 15px 10px 20px !important;
    }

    form input { width: 90% !important; }

    form label {
        margin: 4% 5% !important;
    }

    form button {
        width: 80% !important;
        min-height: 48px;
    }

    /* Menu circulaire : passe d'une disposition orbitale à une
       liste verticale centrée, en pleine largeur, facile à
       parcourir au doigt. */
    .menu-circulaire {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        margin: 100px auto 30px !important;
        padding: 0 16px !important;
    }

    .menu-circulaire .bouton-symetrique {
        position: relative !important;
        transform: none !important;
        margin: 0 !important;
    }

    .menu-circulaire .bouton-symetrique:hover,
    .menu-circulaire .bouton-symetrique:focus-visible {
        transform: scale(1.04) !important;
    }

    /* Tous les boutons secondaires (hors menu circulaire) passent
       également en liste verticale centrée, marges réinitialisées. */
    .bouton, .interligne,
    .intGauche, .extGauche, .intPlusGauche,
    .intDroite, .extDroite, .intPlusGauche, .interieurDroite {
        margin: 8px auto !important;
        top: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .bouton, .interligne {
        width: 88% !important;
        max-width: 340px !important;
        min-height: 52px !important;
        height: auto !important;
        font-size: 16px !important;
        line-height: normal !important;
        padding: 10px !important;
    }

    iframe, object, .patch, .embed {
        width: 96% !important;
        height: 65vh !important;
        margin: 20px auto !important;
    }

    .planning { margin: 10px 5px !important; }

    .filters, .nav {
        justify-content: center;
        width: 100% !important;
    }

    .calendar { gap: 2px !important; }

    .day-header { font-size: 11px !important; padding: 4px 2px !important; }

    .day-cell {
        min-height: 55px !important;
        padding: 4px !important;
        font-size: 11px !important;
    }

    footer {
        margin: auto auto 10px auto !important;
        width: 100% !important;
    }
}

/* Cas particulier : mobile en orientation paysage (peu de hauteur
   disponible) — la liste de boutons repasse en grille à deux
   colonnes pour limiter le défilement vertical. */
@media screen and (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .menu-circulaire {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 70px auto 20px !important;
    }

    .bouton, .interligne {
        min-height: 44px !important;
    }

    iframe, object, .patch, .embed {
        height: 60vh !important;
    }
}

/* ============================================================
   Très petits écrans (<= 480px)
   ============================================================ */

@media screen and (max-width: 480px) {
    :root {
        --form-top: 10%;
        --form-left: 4%;
        --form-width: 92%;
        --motif-size: clamp(110px, 34vw, 180px);
    }

    h1 { font-size: 1.15rem !important; }

    .bouton, .interligne {
        width: 92% !important;
        min-height: 50px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
    }

    form { border-radius: 18px !important; }

    iframe, object, .patch, .embed { height: 55vh !important; }
}

/* ============================================================
   Écrans très étroits (<= 380px) : dernier filet de sécurité pour
   garantir qu'aucun bouton ni texte ne déborde.
   ============================================================ */

@media screen and (max-width: 380px) {
    .Accueil, .logout {
        font-size: 12px !important;
        padding: 0 8px !important;
        min-width: auto !important;
    }

    .bouton, .interligne {
        font-size: 13px !important;
        padding: 8px !important;
    }

    h3 { font-size: 0.95rem !important; }
}