/* ============================================================
   Polices
   ============================================================ */

/* Raleway auto-hebergee : aucun appel au CDN de Google, donc aucune adresse IP
   de visiteur transmise a un tiers. Sous-ensemble latin (accents francais
   compris), format woff2 : ~22 Ko par graisse.
   Licence : SIL Open Font License, voir fonts/OFL.txt */
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-v37-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    /* swap : le texte s'affiche tout de suite dans la police de secours, puis
       bascule. Sans cela le titre resterait invisible pendant le telechargement. */
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-v37-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* La pile de secours s'affiche avant que Raleway soit telechargee. */
    --police-titre: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Palette relevee sur la maquette : vert foret, or, creme.
       Les noms --bleu / --bleu-clair sont conserves : ils sont employes a une
       centaine d'endroits, les renommer serait une refonte, pas un changement
       de couleur. Ils designent desormais les verts. */
    --bleu: #1b3a2a;
    /* vert foret : bandeau, pied, titres, boutons */
    --bleu-clair: #e6efe7;
    /* vert tres pale : encadres, etiquettes */
    --or: #c9a961;
    /* or : accents, liens du menu au survol */
    --or-clair: #e3d5a8;
    /* or pale : texte sur fond vert fonce */
    --creme: #f5f0e4;
    /* creme chaud : fond de page */

    --texte: #1c1c1c;
    --gris: #5d6b5f;
    /* gris legerement verdi, assombri pour le creme */
    --ok: #17663a;
    --ko: #9b1c1c;
    --bordure: #d9d3c2;
    /* bordure rechauffee, accordee au creme */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--texte);
    background: var(--creme);
    line-height: 1.6;
}

/* ============================================================
   En-tete : image d'accueil + bandeau
   ============================================================ */

.entete {
    position: relative;
    background: var(--bleu);
    color: #fff;
}

/* Sur l'accueil, le fond bleu ne sert plus : l'image le remplace. */
.entete--hero {
    background: none;
}

/* height:auto : la hauteur suit la largeur, l'image reste proportionnelle
   quelle que soit la fenetre. display:block supprime l'espace sous l'image. */
.hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.bandeau {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.7rem 1.5rem;
}

/* Hors accueil, le bandeau n'a pas d'image sous lui : on lui fixe une hauteur
   de 70 px. L'accueil garde son bandeau flottant, dimensionne autrement. */
.entete:not(.entete--hero) .bandeau {
    height: 70px;
}

/* Sur l'accueil, le bandeau flotte au-dessus de l'image.
   Voile vert a 85 %, et non 42 % : sous le bandeau, l'image est un ciel de
   coucher de soleil a #f3deaf, c'est-a-dire dore. Un voile trop transparent
   laissait poser du texte clair sur du clair (1,35:1 pour l'or, 3,05:1 meme
   pour le blanc). A 85 %, le fond redevient previsible. */
.entete--hero .bandeau {
    position: absolute;
    top: 1.1rem;
    left: 3rem;
    right: 3rem;
    padding: 0.6rem 1.4rem;
    background: rgba(27, 58, 42, 0.65);
    /* Le flou lisse les 15 % d'image qui transparaissent encore. */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* Sur l'image, l'or vif est abandonne : sa teinte est celle du ciel derriere,
   il y plafonne a 3,64:1 meme sur ce voile. Or clair pour les liens, blanc au
   survol. Les autres pages, sur vert plein, gardent l'or. */
.entete--hero .nav a:hover {
    color: #fff;
}

/* --- Texte pose sur l'image d'accueil --- */

/* Tout est exprime en vw : le texte grandit et retrecit avec l'image, et
   garde donc la meme place sur la photo quelle que soit la fenetre. */
.hero-texte {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    padding: 0 1.5rem;
    text-align: center;
    color: #fff;
}

.hero-titre {
    margin: 0;
    /* Blanc explicite : la regle generale « h1 { color: var(--bleu) } » porte
       sur l'element et l'emporterait sur le blanc herite de .hero-texte. Le
       titre virerait au vert foret, illisible sur la photo. */
    color: #fff;
    font-family: var(--police-titre);
    font-size: clamp(1.5rem, 4.1vw, 5.2rem);
    font-weight: 500;
    /* Interligne serre : deux lignes de capitales espacees normalement
       s'ecarteraient bien plus que sur le modele. */
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    /* L'ombre garde le texte lisible au-dessus des zones claires du ciel. */
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-soustitre {
    margin: 0.9rem 0 0;
    font-family: var(--police-titre);
    font-size: clamp(0.85rem, 1.65vw, 1.9rem);
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.93);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* Les deux lignes sont imposees, comme demande : pas de retour a la ligne
   dicte par la largeur. */
.hero-titre span,
.hero-soustitre span {
    display: block;
}

.marque {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;
}

/* Logo a gauche de « CAVVA », centre en hauteur par le align-items du bandeau.
   Fichier exporte en 120 px (2x) mais affiche en 60 px : net sur ecran retina. */
.marque-logo {
    width: 60px;
    height: 60px;
}

/* --- Bouton hamburger (visible sous 900 px seulement) --- */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.6rem;
    height: 2.3rem;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
}

.hamburger-barre {
    display: block;
    width: 1.2rem;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.hamburger[aria-expanded="true"] .hamburger-barre:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger-barre:nth-child(2) {
    opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger-barre:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Menu replie --- */
.nav-mobile {
    display: none;
    flex-direction: column;
    background: var(--bleu);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.4rem 0 0.8rem;
}

.nav-mobile a,
.nav-mobile button {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.5rem;
    color: var(--or-clair);
    text-decoration: none;
    font-size: 0.95rem;
    font-family: inherit;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.nav-mobile a:hover,
.nav-mobile button:hover {
    color: var(--or);
    background: rgba(255, 255, 255, 0.1);
}

.nav-mobile-head {
    margin: 0;
    padding: 0.5rem 1.5rem 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    line-height: 1.3;
}

/* Le gap de .nav-mobile a suffit a l'ecarter du libelle. */
.nav-mobile-icone {
    display: block;
}

.nav-mobile-head strong {
    display: block;
    font-size: 1rem;
}

.nav-mobile-head span {
    font-size: 0.8rem;
    color: var(--or);
}

/* La bascule sous 900 px est regroupee tout en bas du fichier : une requete
   media n'ajoute aucune specificite, elle doit donc venir apres les regles
   qu'elle corrige, sinon celles-ci l'emportent. */

.contenu {
    max-width: 60rem;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 8px;
}

h1 {
    margin-top: 0;
    color: var(--bleu);
}

.etats {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.etat {
    padding: 0.6rem 0.9rem;
    border-left: 4px solid var(--gris);
    background: var(--bleu-clair);
    margin-bottom: 0.5rem;
    border-radius: 0 4px 4px 0;
}

.etat--ok {
    border-left-color: var(--ok);
}

.etat--ko {
    border-left-color: var(--ko);
    background: #fdeaea;
    color: var(--ko);
}

.pied {
    max-width: 60rem;
    margin: 0 auto 2rem;
    padding: 0 2rem;
    color: var(--gris);
    font-size: 0.85rem;
    text-align: center;
}

.pied p {
    margin: 0.2rem 0;
}

.pied-liens a {
    color: var(--gris);
}

.pied-liens a:hover {
    color: var(--bleu);
}

.pied-separateur {
    margin: 0 0.4rem;
    color: var(--bordure);
}

/* Code des noms de cookies, dans la page de confidentialite. */
.legal code {
    background: var(--bleu-clair);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.88em;
}

.legal .tableau {
    max-width: 44rem;
    margin-bottom: 1rem;
}

/* ============================================================
   Page Mentions legales et CGU
   ============================================================ */

.legal h2 {
    margin: 2.4rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--bleu-clair);
    font-size: 1.25rem;
    color: var(--bleu);
}

.legal h3 {
    margin: 1.8rem 0 0.6rem;
    font-size: 1rem;
    color: var(--bleu);
}

/* Un texte juridique se lit en continu : on l'aere et on borne la longueur
   de ligne, sinon l'oeil perd la ligne suivante. */
.legal p {
    max-width: 44rem;
    line-height: 1.7;
}

.legal-date {
    color: var(--gris);
    font-size: 0.88rem;
    font-style: italic;
}

.legal-infos,
.legal-definitions {
    margin: 0 0 1rem;
    max-width: 44rem;
}

.legal-infos>div,
.legal-definitions>div {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bordure);
}

.legal-infos>div:last-child,
.legal-definitions>div:last-child {
    border-bottom: 0;
}

.legal-infos dt,
.legal-definitions dt {
    font-weight: 600;
    color: var(--bleu);
    font-size: 0.9rem;
}

.legal-infos dd,
.legal-definitions dd {
    margin: 0.15rem 0 0;
    line-height: 1.6;
}

.legal-adresse {
    font-style: normal;
    line-height: 1.8;
    padding: 0.9rem 1.1rem;
    background: var(--bleu-clair);
    border-radius: 6px;
    max-width: 34rem;
}

.legal-liste {
    max-width: 44rem;
    line-height: 1.7;
    padding-left: 1.2rem;
}

.legal-liste li {
    margin-bottom: 0.4rem;
}

/* Navigation horizontale (au-dessus de 900 px) */
.nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Liens de section (Catalogue appareils, Carte) : a gauche, juste apres la
   marque. Le margin-left auto de .nav est annule ; c'est .nav--actions, garde
   avec le auto, qui absorbe l'espace et pousse l'avatar a droite. */
.nav--principale {
    margin-left: 0;
}

/* Comme sur la maquette : liens creme, or au survol. */
.nav a {
    color: var(--or-clair);
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    white-space: nowrap;
}

.nav a:hover {
    color: var(--or);
    background: rgba(255, 255, 255, 0.1);
}

/* Liens en icone (Arca5, Cap CAVVA, suivi de tours, Discord) : une image, pas
   du texte. Le padding et le fond au survol de .nav a fausseraient leur taille
   et leur alignement. Selecteurs prefixes par .nav : sans cela .nav a, plus
   specifique, garde la main et le padding revient. */
.nav a.lien-arca5,
.nav a.lien-cap,
.nav a.lien-tours,
.nav a.lien-discord {
    display: flex;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
}

.nav a.lien-arca5:hover,
.nav a.lien-cap:hover,
.nav a.lien-tours:hover,
.nav a.lien-discord:hover {
    background: none;
    opacity: 0.8;
}

.lien-discord img {
    display: block;
    width: 60px;
    height: 60px;
}

/* Meme hauteur que l'icone Discord. La largeur s'ajuste a la source plutot que
   d'etre figee : tours n'est pas carree (96x100) et serait etiree sinon. */
.lien-arca5 img,
.lien-cap img,
.lien-tours img {
    display: block;
    width: auto;
    height: 60px;
}

/* Les 30 px demandes entre chaque icone, et entre la derniere et l'avatar. Le
   gap de .nav (0.5rem) s'ajoute a cette marge : on le retranche. Les regles ne
   s'appliquent qu'a ces voisinages ; l'etat deconnecte garde son espacement
   normal — il n'y a alors ni icone d'appli ni avatar. */
.lien-arca5 + .lien-cap,
.lien-cap + .lien-tours,
.lien-tours + .lien-discord,
.lien-discord + .user-menu {
    margin-left: calc(30px - 0.5rem);
}

/* Messages flash */
.flash {
    padding: 0.7rem 1rem;
    border-radius: 4px;
    margin: 0 0 1.2rem;
}

.flash--succes {
    background: #e6f4ec;
    border-left: 4px solid var(--ok);
    color: var(--ok);
}

.flash--erreur {
    background: #fdeaea;
    border-left: 4px solid var(--ko);
    color: var(--ko);
}

/* Entete de page avec action */
.titre-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.bouton {
    display: inline-block;
    background: var(--bleu);
    color: #fff;
    border: 0;
    padding: 0.55rem 1.1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.95rem;
    cursor: pointer;
}

.bouton:hover {
    background: #12261a;
}

/* Filtres */
.filtres {
    display: flex;
    gap: 0.4rem;
    margin: 1rem 0 1.5rem;
}

.filtre {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    color: var(--gris);
    text-decoration: none;
    font-size: 0.85rem;
}

.filtre--actif {
    background: var(--bleu);
    border-color: var(--bleu);
    color: #fff;
}

/* Tableau */
.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}

.tableau th,
.tableau td {
    text-align: left;
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}

.tableau th {
    color: var(--gris);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ligne--inactive {
    color: var(--gris);
    background: #fafafa;
}

/* Colonne « Actions » des tableaux d'administration.
   La cellule reste une table-cell : c'est ce qui lui fait suivre la hauteur de
   sa ligne et respecter le vertical-align du tableau. Le display:flex vit sur un
   <div> interne (.actions-ligne).
   Pose sur le <td> lui-meme, comme c'etait le cas, il sort la cellule du modele
   de tableau : sa hauteur cesse de suivre celle de la ligne et les liens se
   decalent des qu'une autre cellule occupe deux lignes. */
.cellule-actions {
    white-space: nowrap;
}

.actions-ligne {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.actions-ligne form {
    display: inline;
    margin: 0;
}

.lien-bouton {
    background: none;
    border: 0;
    padding: 0;
    color: var(--bleu);
    font-size: inherit;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.lien-bouton--danger {
    color: var(--ko);
}

.etiquette {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--bleu-clair);
    color: var(--bleu);
}

.etiquette--admin {
    background: #f3e3f7;
    color: #6b21a8;
}

.etiquette--instructeur {
    background: #fdf0dd;
    color: #92500e;
}

.vide {
    color: var(--gris);
    font-style: italic;
    padding: 2rem 0;
    text-align: center;
}

/* Formulaire */
.formulaire {
    max-width: 34rem;
    margin-top: 1.5rem;
}

/* Formulaire pleine largeur, pour la redaction d'article : 34 rem conviennent
   a une suite de champs courts, pas a un editeur de texte riche dont la barre
   d'outils et la zone de saisie ont besoin de toute la place disponible. */
.formulaire--large {
    max-width: none;
}

.ligne {
    display: flex;
    gap: 1rem;
}

.ligne>.champ {
    flex: 1;
}

.champ {
    margin-bottom: 1.1rem;
}

.champ label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.3rem;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="password"],
.champ select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bordure);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
}

.champ input:focus,
.champ select:focus {
    outline: 2px solid var(--bleu);
    outline-offset: 1px;
}

.champ--erreur input,
.champ--erreur select {
    border-color: var(--ko);
}

.champ--case {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding-top: 1.4rem;
}

.case {
    font-weight: 400 !important;
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.aide {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--gris);
}

.erreur {
    margin: 0.25rem 0 0;
    font-size: 0.83rem;
    color: var(--ko);
}

.actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.lien-annuler {
    color: var(--gris);
}

/* Navigation : utilisateur connecte */
.nav-utilisateur {
    color: var(--or-clair);
    font-size: 0.85rem;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.nav-form {
    display: inline;
}

.nav-bouton {
    background: none;
    border: 0;
    color: var(--or-clair);
    font-family: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.3rem;
}

.nav-bouton:hover {
    color: var(--or);
}

.pastille {
    display: inline-block;
    background: #c2410c;
    color: #fff;
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 0.15rem;
}

/* --- Menu utilisateur --- */
.user-menu {
    position: relative;
    margin-left: 0.4rem;
    flex-shrink: 0;
}

.user-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: #2d5540;
    color: #fff;
    cursor: pointer;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar:hover,
.user-avatar[aria-expanded="true"] {
    border-color: #fff;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.avatar-initiales {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pastille--coin {
    position: absolute;
    top: -4px;
    right: -6px;
    margin: 0;
    border: 2px solid var(--bleu);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 12rem;
    margin: 0;
    padding: 0.3rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    z-index: 50;
}

.user-dropdown-head {
    padding: 0.5rem 0.9rem 0.6rem;
    border-bottom: 1px solid var(--bordure);
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.user-dropdown-head strong {
    display: block;
    color: var(--bleu);
    font-size: 0.95rem;
}

.user-dropdown-head span {
    font-size: 0.78rem;
    color: var(--gris);
}

.user-dropdown a,
.user-dropdown button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.9rem;
    color: var(--texte);
    text-decoration: none;
    font-size: 0.9rem;
    font-family: inherit;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.user-dropdown a:hover,
.user-dropdown button:hover {
    background: var(--bleu-clair);
    color: var(--bleu);
}

.user-dropdown-separateur {
    border-top: 1px solid var(--bordure);
    margin-top: 0.3rem;
    padding-top: 0.3rem;
}

/* --- Page compte --- */
.compte {
    display: grid;
    gap: 1.2rem;
}

.carte {
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 1.2rem 1.4rem;
}

.carte h2 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--bleu);
}

.carte--discrete {
    background: #faf8f1;
}

/* Zone sans retour en arriere. La bordure colore le cadre entier plutot que le
   seul bouton : ce qui est irreversible doit se voir avant d'etre lu. */
.carte--danger {
    border-color: var(--ko);
    background: #fdf6f6;
}

.carte--danger h2 {
    color: var(--ko);
}

.carte .formulaire {
    margin-top: 0;
}

.avatar-edition {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.avatar-apercu {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: var(--bleu-clair);
    border: 1px solid var(--bordure);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.avatar-apercu img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-apercu .avatar-initiales {
    font-size: 1.8rem;
    color: var(--bleu);
}

.avatar-actions {
    flex: 1;
    min-width: 16rem;
}

.avatar-actions input[type="file"] {
    font-size: 0.9rem;
    font-family: inherit;
}

/* --- Accueil de l'administration --- */
.grille-admin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.carte-admin {
    display: block;
    padding: 1.2rem;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    text-decoration: none;
    color: var(--texte);
    background: #fff;
}

.carte-admin:hover {
    border-color: var(--bleu);
    background: var(--bleu-clair);
}

.carte-admin h2 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    color: var(--bleu);
}

.carte-admin p {
    margin: 0;
    font-size: 0.86rem;
    color: var(--gris);
}

.flash--info {
    background: var(--bleu-clair);
    border-left: 4px solid var(--bleu);
    color: var(--bleu);
}

.intro {
    color: var(--gris);
    max-width: 42rem;
}

.formulaire--etroit {
    max-width: 22rem;
}

.bouton--petit {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

/* Regles du mot de passe */
.regles {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    color: var(--gris);
}

.regles li {
    line-height: 1.5;
}

/* Statuts */
.statut {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
    background: #eeece2;
    color: var(--gris);
}

.statut--actif {
    background: #e6f4ec;
    color: var(--ok);
}

.statut--attente_admin {
    background: #fdf0dd;
    color: #92500e;
}

.statut--attente_email {
    background: var(--bleu-clair);
    color: var(--bleu);
}

.statut--refuse,
.statut--suspendu {
    background: #fdeaea;
    color: var(--ko);
}

/* Widget Turnstile */
.cf-turnstile {
    margin: 0.3rem 0;
}

/* Libelle avec lien aligne a droite */
.champ-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.champ-entete label {
    margin-bottom: 0.3rem;
}

.lien-discret {
    font-size: 0.8rem;
    color: var(--gris);
}

.lien-discret:hover {
    color: var(--bleu);
}

/* --- Fiches appareil --- */

.formulaire--large {
    max-width: 100%;
}

.groupe {
    border: 1px solid var(--bordure);
    border-radius: 6px;
    padding: 1rem 1.2rem 0.4rem;
    margin: 0 0 1.5rem;
}

.groupe legend {
    padding: 0 0.5rem;
    font-weight: 700;
    color: var(--bleu);
    font-size: 0.95rem;
}

.groupe-note {
    margin: 0 0 0.8rem;
}

.grille-champs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0 1rem;
}

/* Identification a gauche, unites de saisie a droite */
.rangee-haut {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.rangee-haut>.groupe {
    flex: 1 1 22rem;
    margin-bottom: 1.5rem;
}

.rangee-haut>.groupe--unites {
    flex: 0 1 17rem;
    background: var(--bleu-clair);
    border-color: #cfe0d1;
}

.champ--unite {
    margin-bottom: 0.7rem;
}

.champ--unite label {
    font-weight: 400;
    font-size: 0.83rem;
    color: var(--gris);
}

.champ--unite select {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--bordure);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
}

/* Convertisseur sur la fiche */
.convertisseur {
    border: 1px solid var(--bordure);
    background: var(--bleu-clair);
    border-radius: 6px;
    padding: 0.9rem 1.1rem;
    margin: 1.5rem 0;
}

.convertisseur-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.convertisseur-entete h2 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--bleu);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.convertisseur-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.7rem;
}

.convertisseur-choix .champ--unite {
    margin-bottom: 0;
    min-width: 7.5rem;
}

.convertisseur .aide {
    margin-top: 0.7rem;
}

.grille-champs .champ--large {
    grid-column: 1 / -1;
    max-width: 34rem;
}

/* Intitules porteurs d'une definition au survol */
.champ abbr[title],
.infobulle[title],
.specs abbr[title],
.specs .infobulle[title] {
    text-decoration: underline dotted var(--gris);
    text-underline-offset: 3px;
    cursor: help;
}

.requis {
    color: var(--ko);
    cursor: help;
}

/* Champ suivi de son unite */
.champ-mesure {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.champ-mesure input {
    min-width: 0;
}

.unite {
    color: var(--gris);
    font-size: 0.82rem;
    white-space: nowrap;
    min-width: 2.2rem;
}

/* Recherche */
.recherche {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 1rem 0 1.5rem;
}

.recherche input[type="search"] {
    flex: 1;
    max-width: 26rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bordure);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
}

.vide-cellule {
    color: var(--bordure);
}

.auteur-inconnu {
    color: var(--gris);
    font-style: italic;
}

/* Affichage d'une fiche */
.bloc-specs {
    margin: 1.8rem 0;
}

.bloc-specs h2 {
    font-size: 1rem;
    color: var(--bleu);
    border-bottom: 1px solid var(--bordure);
    padding-bottom: 0.4rem;
    margin-bottom: 0.9rem;
}

.specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.7rem 1.2rem;
    margin: 0;
}

.spec {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    border-bottom: 1px dotted var(--bordure);
    padding-bottom: 0.35rem;
}

.spec dt {
    color: var(--gris);
    font-size: 0.85rem;
}

.spec dd {
    margin: 0;
    white-space: nowrap;
}

.unite-affichee {
    color: var(--gris);
    font-size: 0.78rem;
    margin-left: 0.15rem;
}

.signature {
    color: var(--gris);
    font-size: 0.83rem;
    font-style: italic;
    border-top: 1px solid var(--bordure);
    padding-top: 0.8rem;
    margin-top: 2rem;
}

/* ============================================================
   Sous 900 px : plus d'image, le hamburger prend le relais.
   Placee en fin de fichier a dessein (voir la note plus haut).
   ============================================================ */
@media (max-width: 900px) {

    /* Le texte est pose SUR l'image : il part avec elle. Sans cela il flotte
       en position absolue par-dessus le contenu de la page. */
    .hero-image {
        display: none;
    }

    /* Le bloc hero porte le <h1> de la page d'accueil. Un display:none le
       retirerait de l'arbre d'accessibilite : les lecteurs d'ecran sur mobile
       n'annonceraient plus aucun titre principal. On le masque donc a l'oeil
       sans le retirer du document — technique du carre d'un pixel decoupe. */
    .hero-texte {
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Le bandeau redevient une barre pleine collee en haut : la
       semi-transparence n'aurait plus de sens sans image derriere. */
    .entete--hero {
        background: var(--bleu);
    }

    .entete--hero .bandeau {
        position: static;
        padding: 0.7rem 1.5rem;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-mobile:not([hidden]) {
        display: flex;
    }
}

/* ============================================================
   Carte des aerodromes (uMap)
   ============================================================ */

.carte-titre {
    text-align: center;
}

.carte-embed {
    display: block;
    width: 100%;
    /* 750 px sur grand ecran, mais jamais plus que la fenetre sur mobile. */
    height: min(750px, 80vh);
    min-height: 460px;
    border: 1px solid var(--bordure);
    border-radius: 10px;
}

/* ============================================================
   Double authentification (2FA)
   ============================================================ */

/* Saisie du code : chiffres larges et espaces, plus surs a la relecture. */
.saisie-code {
    font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    text-align: center;
}

/* Le QR reste du noir sur blanc, cadre dedie : c'est ce qu'attend un lecteur. */
.qr-2fa {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.qr-2fa svg {
    width: 100%;
    max-width: 260px;
    height: auto;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 8px;
}

/* Clef en clair, pour la saisie manuelle quand le scan n'est pas possible. */
.secret-2fa {
    font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
    font-size: 1.05rem;
    letter-spacing: 0.15em;
    background: var(--bleu-clair);
    border: 1px solid var(--bordure);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    word-break: break-all;
}

/* Codes de secours : grille de jetons monospaces, faciles a recopier. */
.codes-secours {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
}

.codes-secours li {
    font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-align: center;
    background: var(--creme);
    border: 1px solid var(--bordure);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

@media (max-width: 480px) {
    .codes-secours {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Cle API de l'application Tours CAVVA
   ============================================================ */

/* Affichee une seule fois, a recopier : monospace et coupure permise, une cle
   de 54 caracteres ne tient pas sur une ligne de telephone. */
.cle-api {
    font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
    font-size: 1rem;
    background: var(--bleu-clair);
    border: 1px solid var(--bordure);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    margin: 1rem 0;
    word-break: break-all;
    user-select: all;
}

/* Vols d'aeroclub : formulaire */
.champ textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bordure);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.4;
    resize: vertical;
}

.champ textarea:focus {
    outline: 2px solid var(--bleu);
    outline-offset: 1px;
}

.champ--erreur textarea {
    border-color: var(--ko);
}

/* Majuscules a l'affichage ; la valeur reelle est forcee par le JavaScript. */
.champ-majuscules {
    text-transform: uppercase;
}

/* Zones actives : une ligne = un champ + son bouton de retrait */
.zones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.zone-ligne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zone-ligne input[type="text"] {
    flex: 1;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bordure);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    /* Majuscules a l'affichage ; la valeur reelle est forcee par le JavaScript. */
    text-transform: uppercase;
}

.zone-ligne input[type="text"]::placeholder {
    /* Le texte indicatif reste en casse normale, plus lisible. */
    text-transform: none;
}

.zone-ligne input:focus {
    outline: 2px solid var(--bleu);
    outline-offset: 1px;
}

.zone-suppr {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--bordure);
    border-radius: 4px;
    background: #fff;
    color: var(--ko);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.zone-suppr:hover {
    background: var(--creme);
}

#zone-ajouter[disabled] {
    color: var(--gris);
    text-decoration: none;
    cursor: not-allowed;
}

.bouton--danger {
    background: var(--ko);
}

.bouton--danger:hover {
    background: #7a1616;
}

/* Modale de confirmation (element <dialog> natif) */
.modale {
    border: 0;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 30rem;
    width: calc(100% - 2rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    color: var(--texte);
}

.modale::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.modale-titre {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.modale-texte {
    margin: 0 0 1.25rem;
    color: var(--gris);
    line-height: 1.5;
}

.modale-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

/* Vols d'aeroclub : consultation par les pilotes */
.vols-liste {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.vol-carte {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    text-align: left;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--texte);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.vol-carte:hover {
    border-color: var(--bleu);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Vol passe : la case entiere est grisee (le texte, lui, reste lisible). Sur la
   carte pilote comme sur la ligne de tableau admin. */
.vol-carte.vol-passe {
    background: #d5d5d5;
    border-color: #c4c4c4;
}

.tableau tr.vol-passe td {
    background: #d5d5d5;
}

/* Prochain vol a venir : case entiere en jaune, pour le reperer d'un coup d'oeil. */
.vol-carte.vol-proche {
    background: #ffe680;
    border-color: #f0cf4d;
}

.tableau tr.vol-proche td {
    background: #ffe680;
}

.vol-carte-date {
    font-weight: 600;
}

.vol-carte-infos {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gris);
}

/* Details d'un vol dans la modale */
.vol-details {
    margin: 0 0 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.25rem;
}

.vol-details dt {
    font-weight: 600;
    color: var(--gris);
    font-size: 0.85rem;
}

.vol-details dd {
    margin: 0;
    line-height: 1.5;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.pagination-etat {
    color: var(--gris);
    font-size: 0.9rem;
}

.bouton--inactif {
    background: var(--bordure);
    color: var(--gris);
    cursor: default;
    pointer-events: none;
}

@media (max-width: 480px) {
    .vol-details {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }

    .vol-details dd {
        margin-bottom: 0.6rem;
    }
}

/* Bandeau d'information sur les cookies.
   Cale a 40 px du bord droit, et non centre : left: 1rem ne sert que de
   garde-fou sur petit ecran, le margin-left auto absorbe le reste et pousse
   la boite a droite. */
.bandeau-cookies {
    position: fixed;
    left: 1rem;
    right: 40px;
    bottom: 1rem;
    z-index: 50;
    max-width: 60rem;
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--creme);
    border: 1px solid var(--bordure);
    border-radius: 6px;
    padding: 0.9rem 1.2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* hidden ne suffirait pas face au display:flex ci-dessus. */
.bandeau-cookies[hidden] {
    display: none;
}

.bandeau-cookies-texte {
    margin: 0;
    color: var(--texte);
    font-size: 0.85rem;
    line-height: 1.5;
}

.bandeau-cookies-texte a {
    color: var(--bleu);
}

/* Le bouton garde sa largeur, c'est le texte qui se replie. */
.bandeau-cookies .bouton {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .bandeau-cookies {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    /* Cible tactile confortable : le .bouton--petit du bandeau serait
       trop bas pour le pouce. */
    .bandeau-cookies .bouton {
        align-self: flex-end;
        padding: 0.6rem 1.4rem;
    }
}

/* ============================================================
   Actualites : bloc de la page d'accueil
   ============================================================ */

.actualites {
    margin: 2.5rem 0;
}

.actualite {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    margin-bottom: 0.9rem;
    padding: 0 1.2rem;
}

/* L'epinglee se signale par un liseré or, la couleur d'accent du site. */
.actualite--epinglee {
    border-left: 4px solid var(--or);
}

.actualite-entete {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 1rem 0;
    cursor: pointer;
    /* Le marqueur natif est remplace par la fleche ci-dessous : celui de
       Safari se place mal dans un summary en flex. */
    list-style: none;
}

.actualite-entete::-webkit-details-marker {
    display: none;
}

/* Titre de l'actualite. C'est un <h2> : margin remise a zero, la taille et la
   graisse sont fixees ici et non laissees au navigateur.
   Il doit dominer les titres de section du corps (1.1 rem) : sans une echelle
   explicite, un h2 de contenu prendrait les 1.5em/700 par defaut du navigateur
   et ecraserait le titre de son propre article. */
.actualite-titre {
    margin: 0;
    font-family: var(--police-titre);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bleu);
}

/* Fleche de pliage, tournee d'un quart de tour a l'ouverture. */
.actualite-titre::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--or);
    transition: transform 0.15s ease;
}

.actualite[open] .actualite-titre::before {
    transform: rotate(90deg);
}

.actualite-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--gris);
}

.etiquette--epingle {
    background: var(--or-clair);
    color: #6b5115;
}

.actualite-corps {
    padding-bottom: 0.5rem;
    border-top: 1px solid var(--bordure);
    padding-top: 1rem;
}

/* Les images arrivent en 1600 px de large : sans cette regle, elles
   deborderaient du cadre sur mobile. */
.actualite-corps img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Les videos integrees gardent leurs proportions quelle que soit la largeur. */
.actualite-corps iframe {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

.actualite-corps :first-child {
    margin-top: 0;
}

/* Echelle des titres DANS le corps d'une actualite. Chaque niveau reste
   visiblement subordonne au titre de l'article (1.4 rem).
   h2 est traite comme h3 : les actualites d'avant cette echelle en contiennent,
   et un h2 laisse aux valeurs du navigateur (1.5em, graisse 700) passerait
   devant le titre. Les nouvelles actualites n'en produisent plus — l'editeur ne
   propose que « Titre de section » (h3) et « Sous-titre » (h4). */
.actualite-corps h2,
.actualite-corps h3 {
    margin: 1.6rem 0 0.5rem;
    font-family: var(--police-titre);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bleu);
}

.actualite-corps h4 {
    margin: 1.3rem 0 0.4rem;
    font-family: var(--police-titre);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gris);
}

.actualite-corps h5,
.actualite-corps h6 {
    margin: 1.1rem 0 0.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gris);
}

/* Les mises en forme offertes par l'editeur doivent avoir un rendu ici : un
   bouton dans la barre d'outils sans style correspondant sur la page publique
   produirait un resultat different de ce que l'administrateur a vu en ecrivant. */

.actualite-corps table {
    border-collapse: collapse;
    max-width: 100%;
}

.actualite-corps td,
.actualite-corps th {
    border: 1px solid var(--bordure);
    padding: 0.4rem 0.6rem;
}

.actualite-corps blockquote {
    margin: 1rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--or);
    color: var(--gris);
}

.actualite-corps pre {
    background: var(--creme);
    padding: 0.8rem;
    border-radius: 4px;
    /* Un exemple de code ne se replie pas : il defile dans son propre cadre,
       sinon c'est la page entiere qui deborde en largeur. */
    overflow-x: auto;
}

/* Un tableau large deborderait de la carte : il defile dans son cadre. */
.actualite-corps {
    overflow-x: auto;
}

.actualite-signature {
    margin: 0;
    padding-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--gris);
    font-style: italic;
}

/* ============================================================
   Actualites : administration
   ============================================================ */

.actu-epinglee {
    background: #fdf8ec;
}

/* Publiee mais sortie des cinq dernieres : elle n'est plus visible du public. */
.actu-hors-accueil {
    color: var(--gris);
}

.actu-hors-accueil .aide {
    margin: 0.2rem 0 0;
}

/* Compteur de caracteres de l'editeur, au-dela de la limite. */
.compteur--depasse {
    color: var(--ko);
    font-weight: 500;
}

@media (max-width: 600px) {
    .actualite-entete {
        flex-direction: column;
        align-items: flex-start;
    }
}