/* =====================================================
   BOKETIGO — Module Casting (chargé par les templates
   casting.html.twig et gestion-casting.html.twig)
   ===================================================== */

.conteneur-etroit { max-width: 760px; margin-inline: auto; }

/* ---------- Frise verticale des étapes ---------- */
.casting-etapes { padding-block: clamp(2.5rem, 5vw, 4rem); }

.frise {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    max-width: 640px;
}
/* la ligne verticale */
.frise::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: var(--smoke);
}

.frise-etape {
    position: relative;
    padding: 0 0 2.4rem 4.6rem;
}
.frise-etape:last-child { padding-bottom: 0; }

/* le point d'arrêt numéroté sur la ligne */
.frise-numero {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bleu);
    color: var(--blanc);
    font-weight: 800;
    font-size: 1.15rem;
    box-shadow: 0 0 0 5px var(--blanc);
}

.frise-etape h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0.55rem 0 0.35rem;
}
.frise-etape p { color: var(--graphite); margin: 0; max-width: 52ch; }

.casting-formulaire { padding-top: 1rem; }

/* ---------- Champs de formulaire : date, nombre, fichier ---------- */
.contact-formulaire input[type="date"],
.contact-formulaire input[type="number"],
.contact-formulaire input[type="tel"],
.contact-formulaire input[type="password"] {
    width: 100%;
    font-family: var(--police);
    font-size: var(--t-p2);
    color: var(--phantom);
    background: var(--blanc);
    border: 2px solid var(--smoke);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    transition: border-color var(--transition);
    -webkit-appearance: none;
    appearance: none;
}
.contact-formulaire input[type="date"]:focus,
.contact-formulaire input[type="number"]:focus,
.contact-formulaire input[type="tel"]:focus,
.contact-formulaire input[type="password"]:focus {
    outline: none;
    border-color: var(--bleu);
}
.contact-formulaire input[type="date"] {
    min-height: 3.1rem;
    color-scheme: light;
}
.contact-formulaire input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

/* Zone de dépôt de la photo (dropzone du plugin Form) */
.contact-formulaire .dropzone,
.contact-formulaire .form-input-file {
    border: 2px dashed var(--steel);
    border-radius: var(--rayon);
    background: var(--cloud);
    padding: 1.6rem;
    min-height: 120px;
    text-align: center;
    color: var(--graphite);
    font-family: var(--police);
    transition: border-color var(--transition), background var(--transition);
    cursor: pointer;
}
.contact-formulaire .dropzone:hover,
.contact-formulaire .form-input-file:hover,
.contact-formulaire .dropzone.dz-drag-hover {
    border-color: var(--bleu);
    background: #eef3ff;
}
.contact-formulaire .dropzone .dz-message { margin: 0.6rem 0; font-weight: 600; }
.contact-formulaire .dropzone .dz-preview .dz-image { border-radius: 10px; }

/* Cases à cocher (consentement) */
/* 26/07 : trouvé via l'inspecteur du navigateur — le vrai responsable est
   une règle du thème de base (form-styles.scss, hors de ce plugin) :
   ".checkboxes label { padding: 0 0 0 20px; margin-right: 15px; ... }".
   C'est ELLE qui contrôle l'espace avant le texte (via son padding-left),
   pas le gap ni la margin que j'avais ajoutés côté case à cocher — d'où
   l'absence de changement visible avec les deux tentatives précédentes.
   On surcharge maintenant directement cette propriété précise, avec une
   valeur plus grande et !important pour être sûr qu'elle l'emporte. */
.contact-formulaire .checkboxes {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
}
.contact-formulaire input[type="checkbox"] {
    width: 1.3rem;
    height: 1.3rem;
    accent-color: var(--bleu);
    flex-shrink: 0;
    margin-top: 0.2rem;
    margin-right: 1rem !important;
}
.contact-formulaire .checkboxes label {
    font-weight: 400;
    color: var(--graphite);
    font-size: 0.92rem;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    display: block !important;
    padding: 0 0 0 1.6rem !important;
    margin-right: 0 !important;
}

/* ---------- Porte d'accès ---------- */
.porte-acces { max-width: 420px; margin-top: 1.5rem; display: grid; gap: 1.2rem; }
.alerte-erreur { border-left-color: #d23b3b; }

/* Retrait du header du site (12/08) : le menu latéral reprend déjà logo
   + compte connecté, le bandeau du haut faisait doublon et alourdissait
   la page ("pas propre" — retour du 12/08). Uniquement sur les pages
   casting puisque ce fichier n'est chargé que là. */
/* Retrait du bandeau intranet (12/08) : la vraie classe, trouvée dans
   base-intranet.html.twig, est .intranet-barre — PAS .site-header (les
   deux tentatives précédentes visaient le mauvais nom, d'où le header
   toujours visible sur la page casting ET, pire, un effet de bord sur
   /login qui charge aussi ce fichier). Scopé avec :has() pour ne jamais
   pouvoir toucher une autre page intranet (login, facturation…) même si
   casting.css s'y charge un jour. */
body:has(.casting-shell) .intranet-barre {
    display: none;
}
body:has(.casting-shell) .intranet-main {
    padding-top: 0;
}

/* ---------- Espace de gestion ---------- */
.admin-titre-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.admin-titre-ligne .hero-titre { margin-bottom: 0; }

.admin-stats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    margin-top: 1.8rem;
    padding-bottom: 2px;
}
.stat {
    background: var(--blanc);
    border: 1px solid var(--smoke);
    border-radius: 9px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    color: var(--graphite);
    white-space: nowrap;
    flex-shrink: 0;
}
.stat strong { color: var(--bleu); font-weight: 800; margin-right: 0.25rem; }
/* Pastille "infos manquantes" (26/07) : même orange que le triangle ⚠ de la
   liste, pour repérer/filtrer d'un coup les fiches à compléter. */
.stat-manquant { display: inline-flex; align-items: center; gap: 0.4rem; }
.stat-manquant svg { width: 14px; height: 14px; color: #FF9500; flex-shrink: 0; }
.stat-manquant strong { color: #FF9500; }

.admin-casting { padding-block: clamp(2.5rem, 5vw, 4rem); }

.admin-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.8rem;
    margin-bottom: 2rem;
}
.admin-outils input[type="search"],
.admin-outils select {
    font-family: var(--police);
    font-size: var(--t-p2);
    border: 2px solid var(--smoke);
    border-radius: 10px;
    padding: 0.65rem 1.2rem;
    background: var(--blanc);
    color: var(--phantom);
    -webkit-appearance: none;
    appearance: none;
}
.admin-outils input[type="search"] { flex: 1 1 280px; min-width: 0; }
.admin-outils select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E7180' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    padding-right: 2.6rem;
}
.admin-outils input:focus, .admin-outils select:focus { outline: none; border-color: var(--bleu); }
.admin-outils .bouton { display: inline-flex; align-items: center; }

.candidats-liste { display: grid; gap: 1.2rem; }

.candidat {
    position: relative;
    background: var(--blanc);
    border: 1px solid var(--cloud);
    border-radius: var(--rayon);
    padding: 1.4rem;
    transition: border-color var(--transition);
}
.candidat:hover { border-color: var(--smoke); }

/* Icônes d'état liste (25/07) : enveloppe verte (mail envoyé) + triangle ⚠
   (infos manquantes), regroupées à droite, au milieu du bloc, à la même
   hauteur — l'enveloppe à gauche du triangle. */
.candidat-icones-etat {
    position: absolute;
    top: 50%;
    right: 1.4rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    z-index: 1;
}
.candidat-alerte-manquant { display: inline-flex; color: #FF9500; }
.candidat-alerte-manquant svg { width: 22px; height: 22px; }
.candidat-icone-mail-envoye { display: inline-flex; color: #1D7A3D; }
.candidat-icone-mail-envoye svg { width: 18px; height: 18px; }

/* Sélection multiple (24/07) : case à cocher superposée en haut à gauche de
   la carte, invisible tant que le mode sélection n'est pas activé, pour ne
   pas alourdir la navigation habituelle. */
.candidat-case {
    display: none;
    position: absolute;
    /* Centrée verticalement sur toute la hauteur de la carte (11/08) —
       auparavant fixée à 1rem du haut, donc mal alignée dès que la carte
       dépassait une seule ligne (photo + infos plus hautes que la case). */
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 1;
    width: 26px;
    height: 26px;
    background: var(--blanc);
    border: 2px solid var(--smoke);
    border-radius: 7px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mode-selection .candidat-case { display: flex; }
.mode-selection .candidat-resume { padding-left: 2.4rem; }
.candidat-case input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* Sélection multiple + actions groupées (restructuré le 13/08, v4) :
   tout le bloc — bouton de bascule, résumé, formulaires — vit maintenant
   dans une seule carte grise .barre-selection toujours visible. L'en-tête
   (.selection-entete) est centrée, et une ligne fine sépare l'en-tête du
   corps (.barre-selection-corps), qui lui reste masqué tant qu'aucun
   candidat n'est en mode sélection. « Préparer le mail Étape 2 » reste
   isolé sur sa propre ligne car son rôle est différent (ouvre un aperçu,
   ne modifie rien directement). */
.selection-bloc { margin-bottom: 1.2rem; }
.barre-selection {
    background: var(--cloud);
    border-radius: var(--rayon);
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.selection-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.barre-selection-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.barre-selection-corps {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--smoke);
}
.barre-selection-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.7rem;
}
.barre-selection-etape2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--smoke);
}
.barre-selection-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.barre-selection-form select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--smoke);
    font-family: var(--police);
    font-size: 0.84rem;
    background: var(--blanc);
}
.barre-selection-form button {
    flex-shrink: 0;
    font-size: 0.82rem;
    padding: 0.55rem 0.95rem;
    white-space: nowrap;
}
.barre-selection-form button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Export en masse (14/08) : PDF interne/acteur + mise à jour + CSV, sur
   leur propre ligne séparée par un filet, comme .barre-selection-etape2. */
.barre-selection-export {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--smoke);
}
.barre-selection-export button[disabled] { opacity: 0.5; cursor: not-allowed; }
.barre-selection-form-maj { flex-wrap: wrap; gap: 0.6rem; }
.case-photos-perdues {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--graphite);
    white-space: nowrap;
}

.candidat-resume { display: flex; gap: 1.2rem; align-items: flex-start; }

/* ---- Panneau "+ Nouvelle fiche" (création par le staff, page liste) ---- */
.fiche-creation-panel {
    background: var(--blanc);
    border: 1px solid var(--smoke);
    border-radius: var(--rayon);
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.4rem;
}
.fiche-creation-entete {
    position: relative;
    padding-right: 2.4rem;
    margin-bottom: 1rem;
}
.fiche-creation-entete h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.fiche-creation-entete .candidat-meta { margin: 0; }
.fiche-creation-fermer {
    position: absolute;
    top: -0.2rem;
    right: 0;
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--phantom);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.fiche-creation-fermer:hover { color: var(--space); }
.fiche-creation-panel .fiche-enregistrer {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.4rem;
}

/* Champs du panneau de création : contrairement à la fiche existante (qui
   bascule entre lecture seule et édition via .mode-edition), ce formulaire
   est éditable dès l'ouverture — il a donc besoin de son propre habillage
   visuel, volontairement isolé sous .fiche-creation-panel pour ne rien
   changer à l'apparence de la fiche détail existante. */
.fiche-creation-panel .champ input,
.fiche-creation-panel .champ select,
.fiche-creation-panel .champ textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--smoke);
    border-radius: 8px;
    font: inherit;
    color: var(--space);
    background: var(--blanc);
}
.fiche-creation-panel .champ input:focus,
.fiche-creation-panel .champ select:focus,
.fiche-creation-panel .champ textarea:focus {
    outline: none;
    border-color: var(--bleu);
}
.fiche-creation-panel .champ textarea { resize: vertical; }

/* Exemples ("placeholder") plus discrets (25/07) : ils utilisaient la même
   couleur que du vrai texte saisi, au point de ressembler à des champs déjà
   remplis. On les atténue via opacity plutôt qu'une couleur fixe, pour
   respecter la couleur de base de chaque champ. */
.contact-formulaire input::placeholder,
.contact-formulaire textarea::placeholder,
.fiche-creation-panel .champ input::placeholder,
.fiche-creation-panel .champ textarea::placeholder {
    color: inherit;
    opacity: 0.45;
}


.candidat-photo {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.candidat-photo-vide {
    display: grid;
    place-items: center;
    background: var(--cloud);
    color: var(--bleu);
    font-weight: 800;
    font-size: 1.4rem;
}

.candidat-infos { min-width: 0; }
.candidat-infos h2 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.candidat-meta { color: var(--graphite); margin: 0 0 0.2rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.candidat-date { color: var(--space); font-size: 0.85rem; }

.badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    background: var(--cloud);
    color: var(--graphite);
}
.badge-nouveau { background: var(--bleu); color: var(--blanc); }
.badge-preselectionne { background: #eef3ff; color: var(--bleu); }
.badge-retenu { background: #e3f6e9; color: #1d7a3d; }
.badge-refuse { background: #fdecec; color: #c0392b; }
.badge-archive { background: var(--smoke); color: var(--arsenic); }
.badge-doublon {
    background: #FF5C1F;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 0 0 2px #FFE1D1;
}

/* Pastille "mineur·e" (07/08) : rose pâle, choisie pour rester discrète —
   calculée automatiquement depuis la date de naissance (voir estMineur()
   côté PHP), jamais un champ à cocher : impossible à ajouter/retirer à la
   main, elle disparaît seule le jour des 18 ans. */
.badge-mineur {
    background: #FCE9F1;
    color: #C2377A;
}
.doublon-info {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: var(--arsenic);
}
.doublon-info a { color: var(--bleu); font-weight: 700; }

/* ---- Mail de mise à jour de profil : aperçu avant envoi (25/07) ---- */
.mail-maj-apercu {
    margin-bottom: 1.8rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--cloud);
}
.mail-maj-apercu h2 { font-size: var(--t-sub2); margin-bottom: 0.3rem; }
.mail-maj-cadre {
    margin: 1rem 0;
    border: 1px solid var(--smoke);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--cloud);
}
.mail-maj-cadre iframe {
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
    background: var(--blanc);
}
.mail-maj-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* Formulaire public : message non bloquant "cette adresse existe déjà" */
.notice-doublon {
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.85rem;
    background: #FFF3EC;
    border-left: 4px solid #FF5C1F;
    border-radius: 6px;
    font-size: 0.88rem;
    color: #7A3312;
}


.badge-projet {
    background: #f2eaff;
    color: #6b3fd4;
    border: 1px solid #e0d0ff;
}

/* ---------- Page de connexion (intranet) ---------- */
.page-connexion {
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.2rem 6rem;
}
.carte-connexion {
    width: 100%;
    max-width: 27rem;
    background: var(--blanc);
    border: 1px solid var(--smoke);
    border-radius: 18px;
    padding: 2.4rem 2.2rem 2.2rem;
    box-shadow: 0 12px 40px rgba(30, 30, 36, 0.06);
}
.connexion-entete { text-align: center; margin-bottom: 1.6rem; }
.connexion-surtitre {
    color: var(--bleu);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.3rem;
}
.connexion-titre { font-size: 1.5rem; font-weight: 800; margin: 0; line-height: 1.2; }
.connexion-intro {
    color: var(--graphite);
    font-size: 0.92rem;
    text-align: center;
    margin: 0 0 1.6rem;
}
.connexion-bienvenue { text-align: center; margin: 0 0 1.4rem; color: var(--arsenic); }

/* Messages de réussite / échec, dans le cadre */
.connexion-messages { margin-bottom: 1.4rem; }
.connexion-message {
    margin: 0 0 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid transparent;
}
.connexion-message:last-child { margin-bottom: 0; }
.connexion-message-succes { background: #e3f6e9; color: #1d7a3d; border-color: #bfe6cc; }
.connexion-message-erreur { background: #fdecec; color: #c0392b; border-color: #f5c9c4; }
.connexion-message-attention { background: #fff8e8; color: #a6852a; border-color: #f3e3b3; }

.formulaire-connexion { display: block; }
.champ-connexion { margin-bottom: 1.1rem; }
.champ-connexion label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--space);
    margin-bottom: 0.4rem;
}
.champ-connexion input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem;
    font-family: var(--police);
    font-size: 1rem;
    color: var(--phantom);
    background: var(--blanc);
    border: 2px solid var(--smoke);
    border-radius: 10px;
    transition: border-color var(--transition);
}
.champ-connexion input:focus { outline: none; border-color: var(--bleu); }

.connexion-memoriser {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--graphite);
    margin-bottom: 1.3rem;
    cursor: pointer;
}
.connexion-valider {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 0.98rem;
    border: none;
    cursor: pointer;
}
.connexion-oubli { text-align: center; margin: 1.1rem 0 0; font-size: 0.88rem; }
.connexion-oubli a { color: var(--graphite); text-decoration: underline; }
.connexion-oubli a:hover { color: var(--bleu); }
.connexion-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.connexion-actions .bouton { text-align: center; }

/* Utilisateur connecté, au centre de la barre intranet */
.intranet-barre-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.intranet-utilisateur {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.9rem 0.3rem 0.35rem;
    background: var(--cloud);
    border-radius: 999px;
    max-width: 100%;
}
.intranet-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    display: block;
}
.intranet-avatar-initiales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bleu);
    color: var(--blanc);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.intranet-utilisateur-nom {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--arsenic);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 720px) {
    .intranet-utilisateur-nom { display: none; }
    .intranet-utilisateur { padding: 0.25rem; }
}

/* Journal des connexions (super-admin) */
.titre-journal {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.15;
    font-weight: 800;
    margin: 0.2rem 0 0.35rem;
}
.journal-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.section-journal { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 3rem; }

.barre-outils-journal {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
}
.barre-outils-journal input[type="search"] {
    flex: 1 1 280px;
    min-width: 0;
    padding: 0.7rem 1rem;
    font-family: var(--police);
    font-size: 0.95rem;
    color: var(--phantom);
    background: var(--blanc);
    border: 2px solid var(--smoke);
    border-radius: 10px;
}
.barre-outils-journal select {
    flex: 0 0 auto;
    padding: 0.7rem 1rem;
    font-family: var(--police);
    font-size: 0.95rem;
    color: var(--phantom);
    background: var(--blanc);
    border: 2px solid var(--smoke);
    border-radius: 10px;
}
.barre-outils-journal input[type="search"]:focus,
.barre-outils-journal select:focus { outline: none; border-color: var(--bleu); }

.tableau-connexions {
    overflow-x: auto;
    background: var(--blanc);
    border: 1px solid var(--smoke);
    border-radius: 14px;
}
.tableau-connexions table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.tableau-connexions th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--space);
    padding: 1rem 1.8rem;
    border-bottom: 2px solid var(--cloud);
    white-space: nowrap;
    background: var(--blanc);
}
.tableau-connexions td {
    padding: 0.95rem 1.8rem;
    border-bottom: 1px solid var(--cloud);
    vertical-align: middle;
}
.tableau-connexions tbody tr:last-child td { border-bottom: none; }
.tableau-connexions tbody tr:hover { background: #f7f8fc; }
.connexion-date, .connexion-heure { white-space: nowrap; color: var(--arsenic); }
.connexion-compte strong {
    display: block;
    line-height: 1.35;
    margin-bottom: 0.22rem;
}
.connexion-email {
    display: block;
    color: var(--graphite);
    font-size: 0.82rem;
    font-weight: 400;
}
.connexion-ip {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--graphite);
    white-space: nowrap;
}
.tableau-connexions .badge { white-space: nowrap; }
.connexion-note { margin-top: 0.9rem; color: var(--graphite); font-size: 0.85rem; }

/* ---- Page "Étapes de sélection" (11/08) : réglages par projet pour le mail Étape 2 ---- */
.etapes-projets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.1rem;
}
.etape-projet-card {
    background: var(--blanc);
    border: 1px solid var(--smoke);
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
}
.etape-projet-card h2 {
    font-size: var(--t-sub2);
    margin: 0 0 0.9rem;
}
.etape-projet-card .champ-large { margin-bottom: 0.9rem; }
.etape-projet-card .champ-pdf { margin: 1.1rem 0; }
.etape-projet-card .indication {
    display: block;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--graphite);
    font-size: 0.78rem;
    margin-top: 0.2rem;
}
.retirer-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 0.3rem;
    vertical-align: -3px;
    border: none;
    background: transparent;
    color: #c0392b;
    cursor: pointer;
    border-radius: 4px;
}
.retirer-pdf-btn svg { width: 13px; height: 13px; }
.retirer-pdf-btn:hover { background: #fdecec; }
.etape-projet-card input[type="date"],
.etape-projet-card input[type="text"] {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--smoke);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.etape-projet-card input:focus { outline: none; border-color: var(--bleu); }

/* Le input[type=file] natif ne peut pas être entièrement repeint (chrome du
   système sur la partie "aucun fichier choisi"), mais son bouton "Choisir un
   fichier" peut être stylé pour reprendre l'aspect pilule du reste du site
   plutôt que le bouton gris par défaut du navigateur, qui jurait avec le
   reste de la page. */
.etape-projet-card input[type="file"] {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--graphite);
}
.etape-projet-card input[type="file"]::file-selector-button {
    margin-right: 0.7rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 2px solid var(--smoke);
    background: transparent;
    color: var(--phantom);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.etape-projet-card input[type="file"]::file-selector-button:hover {
    border-color: var(--bleu);
    color: var(--bleu);
}
.etape-projet-card .etape-projet-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}
/* Boutons rétrécis (13/08) pour tenir côte à côte dans la largeur de la
   carte — le thème global rend .bouton-bleu trop grand par défaut. */
.etape-projet-card .etape-projet-actions .bouton {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

@media (max-width: 640px) {
    .journal-actions { width: 100%; }
    .journal-actions .bouton { flex: 1 1 auto; text-align: center; }
    .tableau-connexions th, .tableau-connexions td { padding: 0.7rem 0.8rem; }
}

/* Case statut en bleu : signale qu'elle peut changer à tout moment.
   Rayon/rembourrage/bordure explicites (13/08, v2) : ce champ vit
   maintenant dans son propre petit formulaire, hors de la case théorique
   "fiche-form" qui lui donnait implicitement sa forme arrondie avant —
   on ne dépend donc plus d'un style hérité d'ailleurs. */
.champ-statut select {
    background: var(--bleu) !important;
    border: 2px solid var(--bleu) !important;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    color: #fff !important;
    font-weight: 700;
    font-family: var(--police);
    font-size: 0.9rem;
    -webkit-appearance: none;
    appearance: none;
}
.champ-statut select option { color: var(--phantom); background: #fff; }
.champ-statut select {
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 1.1rem, calc(100% - 0.75rem) 1.1rem;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
}

.candidat details { margin-top: 1rem; border-top: 1px solid var(--cloud); padding-top: 0.8rem; }
.candidat summary { cursor: pointer; font-weight: 700; color: var(--bleu); }

.candidat-edition { margin-top: 1.2rem; display: grid; gap: 1rem; }
.edition-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.candidat-edition label { font-size: 0.9rem; font-weight: 700; color: var(--phantom); display: block; }
.candidat-edition input,
.candidat-edition select,
.candidat-edition textarea { margin-top: 0.3rem; }
.candidat-edition textarea { min-height: 70px; }

.candidat-suppression { margin-top: 1rem; }
.bouton-supprimer {
    font-family: var(--police);
    font-weight: 700;
    font-size: 0.9rem;
    color: #c0392b;
    background: none;
    border: 2px solid #f3c5c0;
    border-radius: 999px;
    padding: 0.5rem 1.3rem;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.bouton-supprimer:hover { background: #c0392b; color: var(--blanc); border-color: #c0392b; }

@media (max-width: 560px) {
    .candidat-resume { flex-direction: column; }
}

/* ---------- Export PDF (mise en page d'impression) ---------- */
.entete-impression { display: none; }

@media print {
    /* on cache toute l'interface */
    .site-header, .site-footer, .admin-entete, .admin-outils,
    .candidat details, .nav-toggle, .skip-link,
    .intranet-barre { display: none !important; }

    body { background: #fff; }
    .admin-casting { padding: 0; }

    .entete-impression {
        display: block;
        margin-bottom: 1.2cm;
        padding-bottom: 0.4cm;
        border-bottom: 3px solid #1B57EB;
    }
    .entete-impression h1 { font-size: 20pt; margin: 0 0 4pt; }
    .entete-impression p { color: #6E7180; margin: 0; font-size: 10pt; }

    .candidats-liste { display: block; }

    /* une fiche propre par candidat, jamais coupée */
    .candidat {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #D3D6E0;
        border-radius: 10px;
        padding: 0.6cm;
        margin-bottom: 0.6cm;
    }
    .candidat-photo { width: 3cm; height: 3cm; }
    .candidat-meta a { color: inherit; text-decoration: none; }

    .badge { border: 1px solid #BCBFCC; }
}

/* =====================================================
   V2 — Fiche candidat, galerie, corbeille, impression
   ===================================================== */

.candidat-lien { text-decoration: none; display: block; color: inherit; }
.candidat-lien:hover { border-color: var(--bleu); box-shadow: 0 10px 26px rgba(27, 87, 235, 0.08); }

.stat-corbeille { text-decoration: none; }
.stat-corbeille:hover { border-color: var(--bleu); }
.stat-corbeille strong { color: #c0392b; }

/* ---------- Fiche candidat ---------- */
.fiche-candidat { padding-block: clamp(2.5rem, 5vw, 4rem); }
.conteneur-fiche { max-width: 980px; }

/* Barre d'outils de la fiche (v3, 13/08) : « Retour à la liste » sur sa
   propre ligne, puis .fiche-outils empile 3 rangées bien distinctes.
   1) .fiche-actions-grille : les 3 actions (export interne, export
      acteur, demander mise à jour) sur une grille à 3 colonnes égales ;
      la notification "mail envoyé" est placée explicitement dans la
      3e colonne (grid-column:3), donc elle prend exactement la même
      largeur que le bouton "Demander une mise à jour" juste au-dessus.
   2) .fiche-actions-etape2 : sélecteur + bouton + notification du mail
      Étape 2, centrés horizontalement sur la ligne (jamais collés à un
      bord). Une ligne fine sépare tout ce bloc de l'en-tête de la fiche
      (photo + nom) qui suit.
   « Modifier » / « Enregistrer » ont été déplacés (13/08) en bas de
   fiche, à côté de « Mettre à la corbeille » — voir .fiche-zone-danger. */
.fiche-barre {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.3rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--smoke);
}
.lien-retour { font-weight: 700; text-decoration: none; }
.lien-retour:hover { text-decoration: underline; }
.fiche-outils {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
/* Grille unique à 3 colonnes (v2, 13/08) : toutes les lignes d'actions
   de la fiche (export/mise à jour, Étape 2, et plus tard Étape 3/4)
   partagent la même grille — chaque élément a une position ligne/colonne
   explicite via une classe .fag-rXcY. Comme la largeur des colonnes est
   calculée sur TOUTE la grille (toutes les lignes confondues), le
   sélecteur de projet (ligne 2, colonne 1) prend automatiquement la même
   largeur que « Exporter en PDF usage interne » (ligne 1, colonne 1), et
   le bouton Étape 2 (ligne 2, colonne 2) celle de son voisin du dessus
   (ligne 1, colonne 2) — sans valeur fixée à la main. Colonnes en auto
   (pas 1fr) pour ne pas avoir de vide à l'intérieur des pilules, avec
   justify-content:space-between pour que la grille aille quand même
   d'un bord à l'autre de la fiche.
   Pour ajouter une ligne « Étape 3 » ou « Étape 4 » plus tard : dupliquer
   un bloc .fag-r3c* en changeant le chiffre de ligne (3 → 4, 5…). */
.fiche-actions-grille {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 0.9rem;
}
.fiche-actions-grille form { display: flex; }
.fiche-actions-grille .fag-etape2-form { display: contents; }
.fiche-actions-grille .bouton,
.fiche-actions-grille select {
    width: 100%;
    box-sizing: border-box;
}
.fiche-actions-grille .bouton {
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    font-size: 0.85rem;
    padding: 0.85rem 1.3rem;
}
.fag-r1c1 { grid-column: 1; grid-row: 1; }
.fag-r1c2 { grid-column: 2; grid-row: 1; }
.fag-r1c3 { grid-column: 3; grid-row: 1; }
.fag-r2c3 { grid-column: 3; grid-row: 2; }
.fag-r3c1 { grid-column: 1; grid-row: 3; }
.fag-r3c2 { grid-column: 2; grid-row: 3; }
.fag-r3c3 { grid-column: 3; grid-row: 3; }
.fag-r4c1 { grid-column: 1; grid-row: 4; }
.fag-r4c2 { grid-column: 2; grid-row: 4; }
.fag-r4c3 { grid-column: 3; grid-row: 4; }
.fag-r5c1 { grid-column: 1; grid-row: 5; }
.fag-r5c2 { grid-column: 2; grid-row: 5; }
.fag-r5c3 { grid-column: 3; grid-row: 5; }
.fag-r6c1 { grid-column: 1; grid-row: 6; }
.fag-r6c2 { grid-column: 2; grid-row: 6; }
.fag-r6c3 { grid-column: 3; grid-row: 6; }
/* Même style que le sélecteur de projet de la barre de sélection multiple
   (liste des candidats), pour une apparence cohérente partout où ce
   composant « select projet » réapparaît sur le site. */
.fiche-actions-grille select {
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--smoke);
    font-family: var(--police);
    font-size: 0.84rem;
    color: var(--phantom);
    background: var(--blanc);
}
.bouton-icone { display: inline-flex; align-items: center; gap: 0.45rem; }
.bouton-icone svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Pastille persistante "mail envoyé" (25/07, retaillée le 13/08 pour
   correspondre exactement à la taille des boutons qui l'entourent — même
   font-size, même padding vertical — coins moins arrondis que les
   boutons/badges (999px) pour rester visuellement distincte en tant que
   notification plutôt qu'action. Reste affichée tant qu'elle n'est pas
   retirée manuellement (voir action retirer_mail_maj_info). */
.pastille-mail-envoye {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: #EEF3FF;
    border: 1px solid #CBDBFF;
    border-left: 4px solid var(--bleu);
    border-radius: 6px;
    font-size: 0.82rem;
    color: #1B3E9E;
    white-space: nowrap;
}
.pastille-mail-envoye svg { width: 16px; height: 16px; flex-shrink: 0; }
.pastille-mail-envoye > form { margin-left: auto; }
.pastille-mail-envoye-suppr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 0.15rem;
    border: none;
    background: transparent;
    color: #1B3E9E;
    cursor: pointer;
    border-radius: 4px;
}
.pastille-mail-envoye-suppr svg { width: 14px; height: 14px; }
.pastille-mail-envoye-suppr:hover { background: rgba(27, 62, 158, 0.12); }

/* Pastille "Non retenu·e" (13/08) : même composant que les autres pastilles
   de suivi de mail, mais teinte reprise du badge "Non retenu" (rouge doux)
   plutôt que le bleu habituel, pour rester cohérent visuellement avec le
   sens du message. */
.pastille-mail-refus {
    background: #fdecec;
    border-color: #f3c5c0;
    border-left-color: #c0392b;
    color: #a3341f;
}
.pastille-mail-refus .pastille-mail-envoye-suppr { color: #a3341f; }
.pastille-mail-refus .pastille-mail-envoye-suppr:hover { background: rgba(192, 57, 43, 0.14); }

.fiche-entete {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 2.2rem;
}
.fiche-photo-profil {
    width: 130px;
    height: 130px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
}
.fiche-entete h1 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

/* Sélecteur "étape actuelle" (13/08) : pastille compacte sous le nom,
   modifiable manuellement (indépendante des dates d'envoi de mail —
   voir action changer_etape_affichee) pour toujours savoir où en est
   le candidat, même après un retour en arrière ponctuel. */
.etape-affichee-forme {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.etape-affichee-forme label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6E7180;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.etape-affichee-forme select {
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--smoke);
    font-family: var(--police);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bleu);
    background: #EEF3FF;
    cursor: pointer;
}

/* Les cases d'information */
.fiche-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem;
    margin-bottom: 1.1rem;
}

/* Bandeau interne (13/08) : Statut + Rôle attribué, remontés entre le bloc
   Projets et le reste de la fiche — deux lignes de séparation encadrent la
   zone, contenu centré. Web uniquement, jamais sur le PDF (voir @media
   print plus bas). */
.fiche-interne-bandeau {
    border-top: 1px solid var(--smoke);
    border-bottom: 1px solid var(--smoke);
    padding: 1.6rem 0;
    margin: 2rem 0;
}
.fiche-interne-cases {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.fiche-interne-cases .champ { width: 260px; max-width: 100%; }
.fiche-interne-champ { margin: 0; }
.fiche-interne-champ input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--smoke);
    border-radius: 10px;
    font-family: var(--police);
    font-size: 0.9rem;
    color: var(--phantom);
    background: var(--blanc);
}
.fiche-interne-champ input[type="text"]:focus { outline: none; border-color: var(--bleu); }
.fiche-interne-champ.champ-statut select { width: 100%; box-sizing: border-box; }
.champ label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--space);
}
.champ input, .champ select, .champ textarea { margin-top: 0.35rem; }
.champ-large { margin-bottom: 1.1rem; }

/* Mode lecture : cases pleines, calmes, sans aspect "formulaire" */
.fiche-form input[readonly],
.fiche-form textarea[readonly],
.fiche-form select[disabled] {
    background: var(--cloud);
    border-color: var(--cloud);
    color: var(--phantom);
    cursor: default;
}
.fiche-form select[disabled] { opacity: 1; -webkit-appearance: none; appearance: none; }

/* Zones de texte auto-agrandissantes (nom, e-mail, langues, lien...) :
   technique CSS pure « grow-wrap ». Un pseudo-élément invisible reçoit
   une copie du texte et impose la hauteur exacte ; la zone de texte
   remplit cette hauteur. Résultat : le texte n'est JAMAIS coupé, sans
   dépendre du JavaScript. */
.grow-wrap {
    display: grid;
    width: 100%;
    margin-top: 0.35rem;
}
/* La zone de texte et le pseudo-élément partagent la même cellule et
   DOIVENT avoir exactement les mêmes réglages pour se plier pareil. */
.grow-wrap > .champ-auto,
.grow-wrap::after {
    grid-area: 1 / 1 / 2 / 2;
    box-sizing: border-box;
    width: 100%;
    min-height: 2.7rem;
    line-height: 1.4;
    font-family: var(--police);
    font-size: var(--t-p2);
    padding: 0.5rem 0.9rem;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    border-radius: 10px;
}
.grow-wrap::after {
    content: attr(data-replicated-value) " ";
    visibility: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    border-color: transparent;
}
.grow-wrap > .champ-auto {
    resize: none;
    overflow: hidden;
    color: var(--phantom);
    background: var(--cloud);
    border-color: var(--cloud);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.mode-edition .grow-wrap > .champ-auto { background: var(--blanc); border-color: var(--smoke); }
.mode-edition .grow-wrap > .champ-auto:focus { outline: none; border-color: var(--bleu); }

/* Titre de case avec petite icône « copier » à côté */
.label-copie { display: inline-flex; align-items: center; gap: 0.4rem; }
.copie-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--space);
    cursor: pointer;
    border-radius: 6px;
    transition: color var(--transition), background var(--transition);
}
.copie-icone:hover { color: var(--bleu); background: rgba(27,87,235,.1); }
.copie-icone svg { width: 0.95rem; height: 0.95rem; display: block; }
.copie-icone.copie-ok { color: #1f9d55; }
.champ-interne textarea { background: #fff8e8; border-color: #f3e3b3; }
.fiche-form .champ-interne textarea[readonly] { background: #fff8e8; border-color: #f3e3b3; }

/* Section « Fiche technique (interne) » de la fiche candidat */
.titre-interne {
    margin: 1.8rem 0 0.8rem;
    padding-top: 1.2rem;
    border-top: 2px solid var(--cloud);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--phantom);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.etiquette-interne {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #a6852a;
    background: #fff8e8;
    border: 1px solid #f3e3b3;
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
}

/* Panneau Projets de la fiche candidat */
.fiche-projets {
    margin: 1.4rem 0;
    padding: 1.2rem 1.3rem;
    background: var(--cloud);
    border-radius: 14px;
}
.projets-entete { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.projets-entete h2 { margin: 0; font-size: 1.1rem; }
.projets-aide { color: var(--graphite); font-size: 0.85rem; }
.projets-vide { color: var(--graphite); font-size: 0.9rem; margin: 0.2rem 0 0.8rem; }
.projets-cases { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.projet-case {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--blanc);
    border: 2px solid var(--smoke);
    border-radius: 999px;
    padding: 0.35rem 0.5rem 0.35rem 0.8rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color var(--transition);
}
.projet-case:hover { border-color: var(--space); }
.projet-case input { margin: 0; }
.projet-suppr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--space);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition);
}
.projet-suppr:hover { background: #fdecec; color: #c0392b; }
/* Bouton crayon "renommer ce projet" (26/07), même style que le × */
.projet-renommer {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: none !important;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    color: var(--space);
    cursor: pointer;
    transition: all var(--transition);
}
.projet-renommer svg { width: 14px !important; height: 14px !important; fill: none !important; stroke: currentColor !important; display: block; }
.projet-renommer:hover { background: #eef3ff; color: var(--bleu); }
/* Ligne d'actions partagée "Enregistrer les projets" + création (13/08) :
   même resserrement que la barre d'outils en haut de fiche, pour rester
   léger visuellement à côté des cases à cocher. */
.projets-actions-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.9rem;
}
.projets-enregistrer {
    font-size: 0.82rem;
    padding: 0.55rem 1.1rem;
    flex-shrink: 0;
}
.projets-creation { display: flex; gap: 0.5rem; align-items: center; }
.projets-creation input[type="text"] {
    flex: 1 1 auto;
    max-width: 320px;
    padding: 0.5rem 0.8rem;
    border: 2px solid var(--smoke);
    border-radius: 10px;
    font-family: var(--police);
    font-size: 0.85rem;
}
.projets-creation input[type="text"]:focus { outline: none; border-color: var(--bleu); }
.projets-creation .bouton {
    font-size: 0.82rem;
    padding: 0.55rem 1.1rem;
    flex-shrink: 0;
}

/* Sélecteur "étape actuelle" repositionné dans l'entête du bloc Projets
   (13/08, pour cohérence avec le suivi par projet) : poussé à droite de
   l'entête, qui est déjà en flex. */
.projets-entete .etape-affichee-forme {
    margin-left: auto;
    margin-bottom: 0;
}
.cache { display: none; }

/* Mode édition : les cases redeviennent des champs actifs */
.mode-edition .fiche-form input:not([type="file"]),
.mode-edition .fiche-form textarea,
.mode-edition .fiche-form select {
    background: var(--blanc);
    border-color: var(--smoke);
}
.mode-edition .fiche-form input:focus,
.mode-edition .fiche-form textarea:focus,
.mode-edition .fiche-form select:focus { border-color: var(--bleu); }

.edition-seulement { display: none; }
.mode-edition .edition-seulement { display: block; }

.fiche-enregistrer { margin-top: 0.5rem; }

input[type="file"] {
    margin-top: 0.4rem;
    font-family: var(--police);
    width: 100%;
    border: 2px dashed var(--steel);
    border-radius: 10px;
    padding: 0.9rem;
    background: var(--cloud);
    cursor: pointer;
}

/* ---------- Galerie photos ---------- */
.fiche-photos { margin-top: 2.5rem; }
.fiche-photos h2 { font-size: var(--t-sub2); }

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.galerie-item { margin: 0; }
.galerie-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--cloud);
    transition: transform var(--transition);
}
.galerie-item a:hover img { transform: scale(1.03); }
.galerie-item figcaption {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bleu);
    margin-top: 0.35rem;
}
.galerie-supprimer { margin-top: 0.4rem; }
.galerie-supprimer .bouton-supprimer { padding: 0.3rem 0.9rem; font-size: 0.8rem; }

/* ---------- Zone corbeille (+ Modifier/Enregistrer, regroupés ici le
   13/08 pour que les deux actions "engageantes" de la fiche restent
   ensemble en bas de page) ---------- */
.fiche-zone-danger {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cloud);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
/* Modifier / Enregistrer alignés sur les mêmes proportions que le bouton
   Mettre à la corbeille juste à côté (13/08), le thème global rendant
   .bouton-bleu nettement plus grand par défaut. */
.fiche-zone-danger .bouton {
    font-size: 0.9rem;
    padding: 0.5rem 1.3rem;
}

.corbeille { margin-top: 3.5rem; padding-top: 2rem; border-top: 2px solid var(--cloud); }
.corbeille h2 { font-size: var(--t-sub2); }
/* Rouge : signale visuellement qu'on est dans/sur la corbeille (demande du 25/07) */
.candidat-corbeille {
    background: #fdecec;
    border-color: #f3c5c0;
}
.candidat-corbeille .candidat-resume { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.candidat-corbeille .candidat-infos h2 { color: #9a2c20; }
.corbeille-actions { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }

/* Fiche détaillée ouverte depuis la corbeille : même signal rouge */
.fiche-candidat-corbeille .fiche-entete { border-bottom-color: #f3c5c0; }
.bandeau-corbeille {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fdecec;
    border: 1px solid #f3c5c0;
    border-radius: var(--rayon);
    padding: 1rem 1.3rem;
    margin-bottom: 1.6rem;
    color: #9a2c20;
}
.bandeau-corbeille p { margin: 0; font-size: 0.92rem; }
.bandeau-corbeille-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* ---------- Export PDF d'une fiche (impression) ---------- */
@media print {
    .site-header, .site-footer, .fiche-barre, .fiche-zone-danger,
    .edition-seulement, .galerie-supprimer, .nav-toggle, .skip-link,
    .intranet-barre, .fiche-projets, .fiche-interne-bandeau { display: none !important; }

    body { background: #fff; }
    .fiche-candidat { padding: 0; }
    .conteneur-fiche { width: 100%; max-width: none; }

    .fiche-entete {
        border-bottom: 3px solid #1B57EB;
        padding-bottom: 0.5cm;
        margin-bottom: 0.7cm;
    }
    .fiche-photo-profil { width: 3.4cm; height: 3.4cm; }

    .fiche-grille { grid-template-columns: repeat(3, 1fr); gap: 0.22cm 0.4cm; }
    /* PDF : regrouper les gros blocs (langues, rôles, réseau social) à la fin,
       pour qu'ils partent ensemble sur la page suivante plutôt que de casser
       la première page. Le statut remonte ainsi naturellement au-dessus d'eux. */
    .fiche-grille .champ-fin-pdf { order: 100; }
    /* Roulette de naissance (14/08, v3) : la roulette scrollable n'a pas de
       sens sur papier — on la masque et on affiche à la place le texte
       simple déjà utilisé en mode lecture à l'écran (même élément, forcé
       visible même si l'impression survient en plein mode édition). */
    .roue-naissance { display: none !important; }
    .naissance-texte-lecture {
        display: block !important;
        margin-top: 0.35rem;
        padding: 0.5rem 0.7rem;
        border: 1px solid #D3D6E0;
        background: #F4F5FA;
        font-size: 10pt;
        border-radius: 6px;
    }
    .champ input, .champ select, .champ textarea {
        border: 1px solid #D3D6E0 !important;
        background: #F4F5FA !important;
        font-size: 10pt;
        padding: 0.5rem 0.7rem;
    }
    .champ-statut select {
        background: #1B57EB !important;
        border-color: #1B57EB !important;
        color: #fff !important;
        font-weight: 700;
    }
    .champ label { font-size: 7.5pt; }
    /* Un titre et sa case ne doivent JAMAIS être coupés entre deux pages :
       le champ entier bascule sur la page suivante s'il ne tient pas. */
    .champ,
    .fiche-grille .champ,
    .fiche-grille .champ label {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .champ-interne textarea { background: #fff8e8 !important; }

    .fiche-photos { margin-top: 0.8cm; break-inside: auto; }
    .fiche-photos h2 { font-size: 13pt; }
    .galerie { grid-template-columns: repeat(4, 1fr); gap: 0.35cm; }
    .galerie-item img { border: 1px solid #D3D6E0; border-radius: 8px; }

    .badge { border: 1px solid #BCBFCC; }

    /* ---- Export "pour l'acteur" (25/07) : masque les champs strictement
       internes au staff. Activé en ajoutant .export-acteur sur <body> juste
       avant window.print() (voir le bouton dédié). :has() cible précisément
       la case qui CONTIENT le champ voulu, sans toucher aux autres champs
       "internes" (régime alimentaire, allergie...) qui restent visibles sur
       les deux exports, contrairement au statut/rôle attribué/notes internes/
       lien de stockage qui ne doivent apparaître que sur l'export interne. */
    .export-acteur .fiche-entete .badge-nouveau,
    .export-acteur .fiche-entete .badge-preselectionne,
    .export-acteur .fiche-entete .badge-retenu,
    .export-acteur .fiche-entete .badge-refuse,
    .export-acteur .fiche-entete .badge-archive,
    .export-acteur .champ:has(select[name="statut"]),
    .export-acteur .champ:has(textarea[name="role_attribue"]),
    .export-acteur .champ:has(textarea[name="notes_internes"]),
    .export-acteur .champ:has(textarea[name="lien_stockage"]) {
        display: none !important;
    }
}

/* ---------- Formulaire public v2.1 (sans JavaScript) ---------- */
.formulaire-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
}
.casting-formulaire form { display: grid; gap: 1.2rem; }
.indication { font-weight: 400; color: var(--graphite); font-size: 0.85rem; }

.message-succes {
    background: #e3f6e9;
    border-left: 4px solid #1d7a3d;
    border-radius: 8px;
    padding: 1.1rem 1.3rem;
    color: #14542b;
    margin-bottom: 1.5rem;
}
.alerte-erreur ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }

/* honeypot anti-spam : invisible pour les humains */
.champ-piege {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ---------- Questionnaire v3 ---------- */
.formulaire-section {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bleu);
    margin: 1.4rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--cloud);
}
.casting-formulaire form > .formulaire-section:first-of-type { border-top: 0; padding-top: 0; }

.libelle-groupe {
    display: block;
    font-weight: 700;
    color: var(--phantom);
    margin-bottom: 0.5rem;
}

/* Date de naissance : jour / mois / année */
.date-naissance {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1fr;
    gap: 0.7rem;
    max-width: 460px;
}

/* Roulette "date de naissance" façon iOS (14/08, v2), intranet uniquement —
   un seul bloc avec 3 colonnes qui défilent en synchro, bande centrale
   fixe indiquant la valeur retenue, dégradé en haut/bas façon "sélecteur
   de plage horaire" (voir mockup fourni). Remplace les 3 <select> séparés
   qui donnaient une impression de blocs disjoints. */
/* Lecture seule (13/08, v3) : en dehors du mode édition, la roulette est
   entièrement masquée — voir déjà pourquoi les valeurs voisines
   distraient/prêtent à confusion — et remplacée par un texte simple, une
   seule ligne, la date déjà enregistrée. */
.naissance-texte-lecture {
    margin-top: 0.35rem;
    padding: 0.65rem 0.9rem;
    background: var(--cloud);
    border: 1px solid var(--cloud);
    border-radius: 10px;
    color: var(--phantom);
    font-size: 0.95rem;
}
.mode-edition .naissance-texte-lecture { display: none; }
.roue-naissance {
    position: relative;
    display: none;
    grid-template-columns: 0.8fr 1.3fr 1fr;
    height: 190px;
    max-width: 420px;
    margin-top: 0.35rem;
    background: var(--blanc);
    border: 1px solid var(--smoke);
    border-radius: 12px;
    overflow: hidden;
}
.mode-edition .roue-naissance { display: grid; }
.roue-colonne {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%, #000 66%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 34%, #000 66%, transparent 100%);
}
.roue-colonne::-webkit-scrollbar { display: none; }
.roue-colonne + .roue-colonne { border-left: 1px solid var(--cloud); }
.roue-liste {
    list-style: none;
    margin: 0;
    padding: 76px 0;
}
.roue-liste li {
    height: 38px;
    line-height: 38px;
    text-align: center;
    scroll-snap-align: center;
    font-size: 0.92rem;
    color: var(--phantom);
    cursor: default;
    transition: color var(--transition), font-weight var(--transition);
}
.mode-edition .roue-liste li { cursor: pointer; }
.roue-liste li.actif {
    color: var(--space);
    font-weight: 700;
    font-size: 0.98rem;
}
.roue-bande-centrale {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 38px;
    transform: translateY(-50%);
    border-top: 1px solid var(--smoke);
    border-bottom: 1px solid var(--smoke);
    background: rgba(27, 87, 235, 0.05);
    pointer-events: none;
}
/* Téléphone : indicatif + numéro */
.telephone-groupe {
    display: grid;
    grid-template-columns: minmax(130px, 0.9fr) 1.4fr;
    gap: 0.7rem;
}

/* Cases à options (langues, rôles) */
.cases-groupe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.case-option {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--cloud);
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--arsenic);
    transition: border-color var(--transition), background var(--transition);
}
.case-option:hover { border-color: var(--bleu); }
.case-option input { accent-color: var(--bleu); width: 1.05rem; height: 1.05rem; }
.case-option:has(input:checked) {
    background: #eef3ff;
    border-color: var(--bleu);
    color: var(--bleu);
}

.champ-autre { margin-top: 0.8rem; }
.champ-autre label { font-weight: 600; font-size: 0.92rem; color: var(--graphite); }

/* Questions Oui / Non */
.question-ouinon { padding: 0.2rem 0; }
.ouinon { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ouinon label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--cloud);
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 0.5rem 1.4rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--arsenic);
    transition: border-color var(--transition), background var(--transition);
}
.ouinon label:hover { border-color: var(--bleu); }
.ouinon input { accent-color: var(--bleu); }
.ouinon label:has(input:checked) { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }

/* Échelle 1 à 5 */
.echelle { display: flex; gap: 0.5rem; }
.echelle-option {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--cloud);
    border: 2px solid transparent;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--arsenic);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.echelle-option:hover { border-color: var(--bleu); }
.echelle-option input { position: absolute; opacity: 0; pointer-events: none; }
.echelle-option:has(input:checked) { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }

/* Bouton Enregistrer dans la barre du haut */
.mode-edition .fiche-zone-danger .edition-seulement { display: inline-block; }

/* ---------- Impression : papier à lettres Boketigo ---------- */
.impression-entete, .impression-pied { display: none; }

@media print {
    @page { margin: 1cm 1.2cm 1.1cm; }

    .impression-entete {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.45cm;
        margin-bottom: 0.7cm;
        border-bottom: 1px solid #D3D6E0;
    }
    .impression-logo { height: 0.95cm; width: auto; }
    .impression-type {
        font-size: 8.5pt;
        font-weight: 600;
        letter-spacing: 0.38em;
        text-transform: uppercase;
        color: #9DA2B3;
    }

    .impression-pied {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 8pt;
        color: #6E7180;
        padding-top: 0.15cm;
        border-top: 1px solid #1B57EB;
        background: #fff;
    }
    .impression-pied strong { color: #1E1E24; }

    /* L'en-tête de fiche s'aligne sur le style du papier à lettres */
    .fiche-entete {
        border-bottom: 1px solid #D3D6E0;
        padding-bottom: 0.4cm;
        margin-bottom: 0.6cm;
    }
}

/* ---------- Correctifs v3.1 ---------- */

/* Champ URL (réseau social) : même mise en page que les autres */
.contact-formulaire input[type="url"] {
    width: 100%;
    font-family: var(--police);
    font-size: var(--t-p2);
    color: var(--phantom);
    background: var(--blanc);
    border: 2px solid var(--smoke);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    transition: border-color var(--transition);
    -webkit-appearance: none;
    appearance: none;
}
.contact-formulaire input[type="url"]:focus { outline: none; border-color: var(--bleu); }

/* Échelle 1–5 : chiffres parfaitement centrés, cercle entier cliquable */
.echelle-option {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    background: none;
    border: none;
    padding: 0;
}
.echelle-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.echelle-option span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--cloud);
    border: 2px solid transparent;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--arsenic);
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.echelle-option:hover span { border-color: var(--bleu); }
.echelle-option input:checked + span,
.echelle-option input:focus-visible + span {
    background: var(--bleu);
    border-color: var(--bleu);
    color: var(--blanc);
}

/* Confirmation verte après sélection des photos */
.fichiers-ok {
    display: none;
    margin-top: 0.7rem;
    background: #e3f6e9;
    border-left: 4px solid #1d7a3d;
    border-radius: 8px;
    padding: 0.8rem 1.1rem;
    color: #14542b;
    font-size: 0.92rem;
}
.fichiers-ok.visible { display: block; }
.fichiers-ok ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }

/* Fiche admin : libellés à hauteur réservée pour que toutes les cases
   démarrent à la même hauteur, et cases courtes compactes en haut.
   Une zone qui grandit (e-mail, langues...) s'étend seule vers le bas
   sans étirer ses voisines. */
.fiche-grille { align-items: start; }
.fiche-grille .champ label {
    display: grid;
    grid-template-rows: minmax(2.3rem, auto) auto;
    align-items: end;
    row-gap: 0.35rem;
    height: auto;
}
.fiche-grille .champ label input,
.fiche-grille .champ label select {
    margin-top: 0;
    height: 2.7rem;
    padding: 0.4rem 0.9rem;
    align-self: start;
}
.fiche-grille .champ label .grow-wrap {
    margin-top: 0;
    align-self: start;
}

@media print {
    .fiche-grille .champ label input,
    .fiche-grille .champ label select {
        height: 0.95cm;
        padding: 0.15cm 0.3cm;
    }
    .grow-wrap { margin-top: 0.1cm; }
    .grow-wrap > .champ-auto,
    .grow-wrap::after {
        min-height: 0.95cm;
        padding: 0.15cm 0.3cm;
        border-width: 1px;
    }
    .copie-icone { display: none !important; }
}

/* ================= Sélection des photos (formulaire public) ================= */
.photos-aide {
    font-size: 0.82rem;
    color: var(--graphite);
    margin: 0.45rem 0 0;
}

.fichiers-ok.avertissement {
    background: #fdecec;
    border-left-color: #c0392b;
    color: #7d2820;
}
.fichiers-ok .refus-titre { color: #c0392b; display: block; margin-top: 0.7rem; }
.fichiers-ok .refus-aide { color: #c0392b; font-size: 0.85rem; margin: 0.3rem 0 0; }
.photos-total { font-weight: 400; opacity: 0.75; }

/* Liste des photos choisies */
.photos-liste {
    list-style: none;
    margin: 0.6rem 0 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.photos-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--blanc);
    border: 1px solid #cbe6d4;
    border-radius: 8px;
    padding: 0.4rem 0.5rem 0.4rem 0.7rem;
}
.photo-nom {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-family: var(--police);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bleu);
    background: none;
    border: none;
    padding: 0.2rem 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.photo-nom:hover { color: var(--phantom); }
.photo-profil {
    display: inline-block;
    background: var(--bleu);
    color: var(--blanc);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.3rem;
    text-decoration: none;
    vertical-align: 1px;
}
.photo-poids { font-size: 0.78rem; color: var(--graphite); flex-shrink: 0; }
.photo-retirer {
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    line-height: 1;
    font-size: 1.15rem;
    font-family: var(--police);
    color: var(--graphite);
    background: var(--cloud);
    border: 1px solid var(--smoke);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.photo-retirer:hover { background: #c0392b; border-color: #c0392b; color: var(--blanc); }
.photos-encore { font-size: 0.82rem; color: var(--graphite); margin: 0.5rem 0 0; }

/* Aperçu d'une photo avant envoi */
.apercu-photo {
    position: fixed;
    inset: 0;
    background: rgba(30, 30, 36, 0.72);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.apercu-photo[hidden] { display: none; }
.apercu-photo-boite {
    background: var(--blanc);
    border-radius: 14px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.apercu-photo-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--cloud);
}
.apercu-photo-nom {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--phantom);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apercu-photo-fermer {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--graphite);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}
.apercu-photo-fermer:hover { background: var(--cloud); color: var(--phantom); }
.apercu-photo-corps {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cloud);
    padding: 1rem;
}
.apercu-photo-corps img {
    max-width: 100%;
    max-height: 60vh;
    display: block;
    border-radius: 6px;
    object-fit: contain;
}
.apercu-photo-msg {
    display: none;
    color: var(--graphite);
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
    padding: 2rem 1rem;
    max-width: 34ch;
}
.apercu-photo-pied {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-top: 1px solid var(--cloud);
}
.apercu-photo-retirer, .apercu-photo-ok {
    font-family: var(--police);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}
.apercu-photo-retirer {
    color: #c0392b;
    background: none;
    border: 2px solid #f3c5c0;
}
.apercu-photo-retirer:hover { background: #c0392b; color: var(--blanc); border-color: #c0392b; }
.apercu-photo-ok {
    color: var(--blanc);
    background: var(--bleu);
    border: 2px solid var(--bleu);
}
.apercu-photo-ok:hover { opacity: 0.9; }

@media (max-width: 560px) {
    .photos-item { flex-wrap: wrap; }
    .photo-nom { flex-basis: 100%; }
    .apercu-photo { padding: 0.6rem; }
}

/* ---------- Roue de chargement à l'envoi (ajouté le 17 juillet) ---------- */
#btn-envoi-casting {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.btn-envoi-roue {
    display: none;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: var(--blanc, #fff);
    animation: roue-envoi-casting 0.7s linear infinite;
}
#btn-envoi-casting.en-cours {
    opacity: 0.85;
    cursor: not-allowed;
}
#btn-envoi-casting.en-cours .btn-envoi-roue { display: inline-block; }
@keyframes roue-envoi-casting {
    to { transform: rotate(360deg); }
}
.envoi-en-cours {
    margin-top: 0.6rem;
    font-size: 0.88rem;
    color: var(--gris-texte, #555);
}

/* ---------- Avertissement (non bloquant) si mineur·e (14/08) ---------- */
.avertissement-mineur {
    margin: 0.6rem 0 0;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: var(--cloud);
    border: 1px solid var(--bleu);
    border-left: 3px solid var(--bleu);
    color: var(--phantom);
    font-size: 0.85rem;
}

/* ---------- Message case "conditions" non cochée (ajouté le 17 juillet) ---------- */
.erreur-consentement {
    margin: -0.4rem 0 0.9rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: #FDEDEC;
    border: 1px solid #f3c5c0;
    color: #c0392b;
    font-size: 0.88rem;
    font-weight: 600;
}

/* =====================================================
   MENU LATÉRAL DE L'INTRANET CASTING (12/08)
   Regroupe les actions "outils" (journal, compression,
   doublons, déconnexion) qui encombraient la barre du
   haut, et ajoute une navigation persistante entre les
   vues (Candidats / Étapes de sélection / Corbeille).
   Reprend le style clair de Boketigo, structure inspirée
   d'un menu latéral classique d'admin (fond foncé, actif
   en bleu), demandée par le client à partir d'une
   référence visuelle.
   ===================================================== */
.casting-shell {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}
.casting-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--phantom);
    color: var(--smoke);
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
}
.casting-brand {
    padding: 0 0.3rem;
}
.casting-brand-logo { height: 26px; width: auto; display: block; }

.casting-tag {
    margin: 0.4rem 0 1.2rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--space);
}

.casting-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.6rem;
    border-radius: 10px;
    background: var(--bleu);
    color: var(--blanc);
    font-family: var(--police);
    font-weight: 700;
    font-size: 0.87rem;
    text-decoration: none;
}
.casting-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.casting-cta:hover { background: #1648c4; }

.casting-navlabel {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--graphite);
    margin: 1.1rem 0 0.4rem 0.4rem;
}
.casting-navitem {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.6rem;
    border-radius: 9px;
    font-family: var(--police);
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--smoke);
    background: transparent;
    border: none;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.casting-navitem svg { width: 16px; height: 16px; flex-shrink: 0; }
.casting-navitem:hover { background: #2c2c34; color: var(--blanc); }
.casting-navitem.actif { background: var(--bleu); color: var(--blanc); }
.casting-navform { margin: 0; }

/* "Aide" (13/08) : pousse le reste du menu vers le haut via margin-top:auto
   pour venir se placer juste au-dessus de la ligne de séparation et du
   compte, plutôt que de laisser le grand espace vide au-dessus de lui. */
.casting-navitem-aide { margin-top: auto; }

.casting-side-bottom {
    border-top: 1px solid #35353d;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.casting-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bleu);
    color: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.casting-side-compte { display: flex; flex-direction: column; min-width: 0; }
.casting-side-compte .nom { font-size: 0.8rem; font-weight: 700; color: var(--blanc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casting-side-compte .role { font-size: 0.72rem; color: var(--space); }
.casting-side-logout {
    margin-left: auto;
    color: var(--space);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.casting-side-logout svg { width: 16px; height: 16px; }
.casting-side-logout:hover { color: var(--blanc); }

.casting-main {
    flex: 1;
    min-width: 0;
}

@media (max-width: 900px) {
    .casting-shell { flex-direction: column; min-height: 0; }
    .casting-sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        padding: 0.7rem 0.9rem;
        gap: 0.3rem;
    }
    .casting-brand, .casting-navlabel { display: none; }
    .casting-navitem, .casting-navform { flex: 0 0 auto; }
    .casting-navitem { white-space: nowrap; padding: 0.5rem 0.7rem; }
    .casting-side-bottom { margin-top: 0; margin-left: auto; border-top: none; padding-top: 0; flex-shrink: 0; }
    .casting-side-compte { display: none; }
    .casting-navitem-aide { margin-top: 0; }
}

@media print {
    .casting-sidebar { display: none; }
    .casting-shell { display: block; }
}

/* ---------- Page "Aide" (13/08) ---------- */
.aide-page { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; }
.aide-bloc {
    background: var(--blanc);
    border: 1px solid var(--smoke);
    border-radius: 14px;
    padding: 1.2rem 1.4rem;
}
.aide-bloc h2 {
    font-size: var(--t-sub2);
    margin: 0 0 0.7rem;
}
.aide-bloc p { margin: 0 0 0.7rem; line-height: 1.55; color: var(--phantom); }
.aide-bloc p:last-child { margin-bottom: 0; }
.aide-bloc strong { color: var(--bleu); }