/* Complément à main.min.css (jonathan-bdlf.fr) : uniquement ce qui est propre
   au formulaire. Palette, polices, .btn et champs viennent du site principal.

   Responsive natif : aucune media query ici. Les marges extérieures sont
   déléguées à .section-padding (main.min.css, déjà fluide), les colonnes se
   replient toutes seules avec auto-fit/minmax, les tailles suivent clamp().
   Rappel : html{font-size:clamp(...)} en amont, donc les rem sont déjà fluides. */

/* --- En-tête ----------------------------------------------------------
   La structure (.header, #hamb-pos, #header-wraper) et son comportement
   viennent de main.min.css / main.min.js. On n'habille que le logo texte,
   qui remplace le SVG du site principal. */

#lycee-logo {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    text-decoration: none;
}
#lycee-logo .qualy-font {
    font-size: clamp(.7rem, .55rem + .6vw, 1rem);
}
#lycee-logo strong {
    font-family: Blacksword, cursive;
    font-weight: 400;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
}

/* --- Contenu ----------------------------------------------------------
   Pas de padding ici : .section-padding s'en charge sur #idees et
   #lycee-footer. On borne seulement la largeur de ligne. */

/* box-sizing: content-box est indispensable ici. normalize pose border-box sur
   tout, et .section-padding ajoute 10vw de chaque côté au-delà de 768px : avec
   border-box, ces 20vw se prennent DANS les 52rem. Sur un écran 1920 il ne
   restait que ~440 px de formulaire au milieu d'un grand vide — c'est le défaut
   de proportions sur PC. En content-box, la limite porte sur le contenu et les
   marges s'ajoutent autour. */
#idees,
#lycee-footer {
    box-sizing: content-box;
    max-width: 52rem;
    margin-inline: auto;
}
#idees .lede {
    font-size: 1.1rem;
    max-width: 34em;          /* longueur de ligne lisible, quelle que soit la taille */
}

/* main.min.css donne width:100% aux textarea mais rien aux champs texte : ils
   gardaient leur largeur par défaut (~20 caractères) à côté de zones de texte
   pleine largeur. Les marges verticales sont reprises ici, celles de la charte
   (1em au-dessus comme au-dessous) décollaient le champ de son étiquette. */
#idees :is(input[type="text"], input[type="email"], input[type="file"], select, textarea) {
    width: 100%;
    margin: .35rem 0 0;
}
#idees select {
    /* Le select natif ne suit pas width:100% sur toutes les plateformes sans ça. */
    max-width: 100%;
}
#idees input[type="file"] {
    padding: .9rem .75rem;
    border: 1px dashed var(--complementary-color);
    border-radius: 13px;
}
#idees fieldset {
    border: 1px solid var(--second-accent-color);
    border-radius: 13px;
    padding: 1rem 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
}
#idees legend {
    font-family: Qualy, sans-serif;
    padding: 0 .5rem;
}
#idees label {
    display: block;
    font-weight: 700;
    margin-top: 1rem;
}
#idees .hint {
    display: block;
    font-weight: 400;
    font-size: .85rem;
    opacity: .75;
}
#idees textarea {
    min-height: clamp(5.5rem, 4rem + 6vh, 9rem);
}

/* Les blocs de profil ne se replient que si JS peut les rouvrir. */
.js .profil-bloc {
    display: none;
}
.js .profil-bloc.actif {
    display: block;
}

/* Choix du profil : deux grandes cibles tactiles, côte à côte dès qu'il y a
   la place, l'une sous l'autre sinon. Le min() évite le débordement quand
   la largeur disponible est plus petite que la base de flex. */
.choix {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.choix label {
    flex: 1 1 min(100%, 14rem);
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--complementary-color);
    border-radius: 13px;
    cursor: pointer;
}
.choix input {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
}

/* Case à cocher : le label reste à côté, pas au-dessus. */
.case {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.case label {
    margin: 0;
    font-weight: 400;
}
.case input {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: .2rem;
}

/* Nom + e-mail, prénom + classe : deux colonnes qui passent en une seule
   quand chacune descendrait sous 14rem. */
.duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    column-gap: 1.5rem;
}
.duo > div > label {
    margin-top: 1rem;
}

.envoi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.envoi progress {
    flex: 1 1 8rem;
    height: .5rem;
}
/* Message posé par le script quand l'envoi n'aboutit pas : l'utilisateur garde
   sa saisie et décide lui-même de renvoyer. */
.envoi .echec {
    flex: 1 1 100%;
    color: #b3261e;
}

.errors {
    border: 1px solid #b3261e;
    border-radius: 13px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #b3261e;
}
.errors ul {
    margin: .5rem 0 0;
}

.recap dt {
    font-weight: 700;
    margin-top: 1rem;
}
.recap dd {
    margin: .25rem 0 0;
    white-space: pre-wrap;
}

/* La grille de cartes du site principal défile à l'horizontale et compte trois
   colonnes au-delà de 768px. Avec une seule carte, elle occuperait un tiers de
   l'écran : on lui rend la largeur tant qu'il n'y en a qu'une. */
#idees .cards:has(> :only-child) {
    grid-auto-columns: 100%;
    overflow-x: visible;
}

.honeypot {
    position: absolute;
    left: -9999px;
}

[hidden] {
    display: none !important;
}