/* =====================================================
   BOKETIGO — Thème Grav
   Charte : bleu #1B57EB · Manrope · grayscale Cloud→Phantom
   ===================================================== */

:root {
    /* Couleurs primaires (charte p.13) */
    --blanc:    #FFFFFF;
    --noir:     #000000;
    --bleu:     #1B57EB;

    /* Grayscale (charte p.14) */
    --cloud:    #EDEFF7;
    --smoke:    #D3D6E0;
    --steel:    #BCBFCC;
    --space:    #9DA2B3;
    --graphite: #6E7180;
    --arsenic:  #40424D;
    --phantom:  #1E1E24;

    /* Typo — échelle de la charte (p.17) */
    --police: 'Manrope', system-ui, sans-serif;
    --t-h1: clamp(2.5rem, 5.5vw, 4rem);      /* 64px */
    --t-h2: clamp(2rem, 4vw, 3rem);          /* 48px */
    --t-sub1: clamp(1.5rem, 2.5vw, 2rem);    /* 32px */
    --t-sub2: 1.5rem;                        /* 24px */
    --t-p1: 1.125rem;                        /* 18px */
    --t-p2: 1rem;                            /* 16px */

    --rayon: 14px;
    --transition: 220ms ease;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--police);
    font-size: var(--t-p2);
    font-weight: 400;
    line-height: 1.65;
    color: var(--arsenic);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--phantom); line-height: 1.15; margin: 0 0 0.6em; }
h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.015em; }
h3 { font-size: var(--t-sub2); font-weight: 700; }

p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); }

:focus-visible {
    outline: 3px solid var(--bleu);
    outline-offset: 3px;
    border-radius: 4px;
}

.conteneur {
    width: min(1180px, 100% - 3rem);
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -999px;
    background: var(--bleu);
    color: var(--blanc);
    padding: 0.6rem 1.2rem;
    border-radius: 0 0 var(--rayon) 0;
    z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }

/* ---------- Signature : le point bleu ---------- */
.point-bleu {
    display: inline-block;
    width: 0.22em;
    height: 0.22em;
    margin-left: 0.04em;
    background: var(--bleu);
    border-radius: 50%;
    vertical-align: baseline;
}

/* Le dernier mot du titre et son point bleu forment un bloc insécable :
   le point ne bascule jamais seul à la ligne. */
.mot-insecable { white-space: nowrap; }

.surtitre {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bleu);
    margin-bottom: 0.8rem;
}

.titre-section { max-width: 22ch; }

/* ---------- Boutons ---------- */
.bouton {
    display: inline-block;
    font-weight: 700;
    font-size: var(--t-p2);
    text-decoration: none;
    padding: 0.85rem 1.8rem;
    border-radius: 999px;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.bouton:hover { transform: translateY(-2px); }

.bouton-bleu { background: var(--bleu); color: var(--blanc); }
.bouton-bleu:hover { background: #1648c4; }

.bouton-contour {
    color: var(--phantom);
    border: 2px solid var(--smoke);
    background: transparent;
}
.bouton-contour:hover { border-color: var(--bleu); color: var(--bleu); }

/* 24/07 (v2) : un <button class="bouton"> ne rend PAS forcément comme un
   <a class="bouton"> même avec les mêmes classes, car les navigateurs
   appliquent leur propre police/hauteur de ligne/apparence par défaut aux
   éléments <button> (pas aux liens). D'où le bouton 'Compresser les
   anciennes photos' visiblement plus grand que ses voisins <a>, malgré le
   passage en flex. Ce correctif force un rendu identique quel que soit le
   type d'élément porteur de la classe .bouton. */
button.bouton {
    font-family: inherit;
    line-height: normal;
    margin: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.bouton-blanc { background: var(--blanc); color: var(--bleu); }
.bouton-blanc:hover { background: var(--cloud); }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cloud);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.9rem;
    gap: 1.5rem;
}

.logo {
    display: inline-flex;
    align-items: center;
}
.logo-image {
    height: 34px;
    width: auto;
    display: block;
}

.nav-principale ul {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-principale a:not(.bouton) {
    position: relative;
    font-weight: 600;
    color: var(--arsenic);
    text-decoration: none;
    padding-block: 0.4rem;
}

/* Survol & actif : le point bleu, encore */
.nav-principale a:not(.bouton)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bleu);
    transform: translateX(-50%) scale(0);
    transition: transform var(--transition);
}
.nav-principale a:not(.bouton):hover::after,
.nav-principale a.actif::after { transform: translateX(-50%) scale(1); }
.nav-principale a.actif { color: var(--phantom); }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
}
.nav-toggle span {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--phantom);
    transition: transform var(--transition), opacity var(--transition);
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    z-index: 0;
    overflow: hidden;
    min-height: 100svh;
    min-height: 100vh;
    padding-block: clamp(5rem, 12vw, 9rem) clamp(4rem, 9vw, 7rem);
    background: linear-gradient(180deg, var(--blanc) 0%, var(--cloud) 100%);
}

.hero-arcs {
    position: absolute;
    right: -70px;
    top: 40px;
    width: clamp(240px, 30vw, 440px);
    opacity: 0.08;
    pointer-events: none;
}

/* ---------- En-têtes avec photo plein écran (ajouté le 17 juillet, corrigé
   le même jour : la mise en centrage vertical (flex) décalait le titre bien
   plus bas qu'avant au lieu de le laisser en haut comme sur l'ancien format.
   Le texte reste donc positionné exactement comme avant (même padding en
   haut), seule la hauteur de la zone est désormais garantie jusqu'en bas de
   l'écran. Les sélecteurs combinés (.entete-page.entete-page--contact, etc.)
   sont nécessaires : sans ça, la règle générale .entete-page plus bas dans
   ce fichier — qui utilise le raccourci "background" — écrase l'image
   définie ici, car à spécificité égale c'est l'ordre dans le fichier qui
   décide, et cette page-ci n'était pas gagnante. C'était le bug qui faisait
   disparaître les photos sur Contact et Casting. ---------- */
/* RESTRUCTURÉ le 17 juillet (6e itération) après 5 correctifs successifs
   autour du décalage de la photo (voir l'historique détaillé plus bas,
   conservé pour mémoire). Le problème de fond : photo, dégradé et voile
   vivaient tous les 3 comme calques de la MÊME propriété background-image,
   sur le MÊME élément — donc avec la MÊME zone de positionnement (la boîte
   de la section). Une vraie photo peut déborder de cette boîte (grâce à
   "cover"), mais un dégradé CSS n'a aucune dimension propre : "cover" le
   cale toujours EXACTEMENT sur la boîte, sans aucun débordement possible.
   Tant que la photo et le dégradé partageaient la même boîte, décaler la
   photo obligeait à deviner, à chaque fois, si le débordement disponible
   (qui dépend de la taille d'écran de la personne qui regarde le site,
   invérifiable depuis cet environnement) suffisait pour absorber le
   décalage demandé — d'où les 3 tentatives précédentes qui ont chacune
   laissé un trou ou une ligne de coupure sur certains écrans.
   Solution définitive : la photo vit maintenant dans son PROPRE
   pseudo-élément (::before), avec sa PROPRE boîte volontairement agrandie
   UNIQUEMENT en haut et en bas (90px de chaque côté, largement plus que les
   80px de décalage demandés). "cover" s'applique donc à cette boîte plus
   grande, ce qui garantit un débordement vertical réel et confortable, quel
   que soit l'écran — plus jamais de trou possible. Le dégradé + le voile
   noir vivent dans un second pseudo-élément (::after), sur la boîte
   normale (pas besoin de marge, ils n'ont jamais de trou de toute façon).
   Les deux passent en z-index négatif pour rester sous le texte réel
   (.conteneur), qui n'a besoin d'aucun réglage supplémentaire pour ça.
   AJUSTÉ le 17 juillet (9e itération) : la marge avait d'abord été mise à
   140px sur les 4 côtés (haut/bas ET gauche/droite), ce qui élargit aussi
   la boîte en largeur inutilement — et "cover" zoome alors plus que
   nécessaire pour couvrir cette largeur en plus, rendant la photo
   visiblement trop zoomée. Seul le haut/bas avait besoin de marge (c'est
   uniquement la hauteur qui est décalée) ; la marge gauche/droite est donc
   retirée (0), et celle du haut/bas réduite à 90px (juste au-dessus des
   80px nécessaires), ce qui réduit le zoom au minimum tout en gardant la
   garantie anti-trou. */
.hero.hero--photo::before, .entete-page.entete-page--photo::before {
    content: '';
    position: absolute;
    inset: -90px 0;
    z-index: -2;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero.hero--photo::after, .entete-page.entete-page--photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    background-image:
        radial-gradient(ellipse 95% 100% at 0% 50%,
            rgba(0,0,0,0.70) 0%,
            rgba(0,0,0,0.58) 34%,
            rgba(0,0,0,0.38) 58%,
            rgba(0,0,0,0.18) 80%,
            rgba(0,0,0,0.06) 100%),
        linear-gradient(rgba(0, 0, 0, 0.19), rgba(0, 0, 0, 0.19));
}
.hero--photo .hero-arcs { display: none; }

.hero.hero--accueil::before {
    background-image: url('../images/entetes/accueil.jpg');
    background-position: 58% -80px;
}
.entete-page.entete-page--contact::before {
    background-image: url('../images/entetes/contact.jpg');
    background-position: 68% -80px;
}
.entete-page.entete-page--casting::before {
    background-image: url('../images/entetes/casting.jpg');
    background-position: 65% -80px;
}
.hero-arcs img { width: 100%; height: auto; }

/* Couleurs de texte inversées sur les en-têtes à photo (demandé le 17
   juillet, 2e itération) : le dégradé étant désormais noir (voir plus
   haut), le titre et le paragraphe passent en blanc pour rester lisibles.
   Ne concerne QUE les en-têtes à photo (Accueil, Contact, Casting) : les
   autres pages (Portfolio, Données légales) gardent leur texte sombre sur
   fond gris clair, inchangé. */
.hero--photo .hero-titre,
.hero--photo h1,
.entete-page--photo h1 {
    color: var(--blanc);
}
.hero--photo .hero-texte,
.entete-page--photo .hero-texte {
    color: rgba(255, 255, 255, 0.86);
}
/* Le bouton-contour (ex. "Parlons de votre projet" sur Accueil) était sombre
   sur fond clair ; sur fond photo assombri il devient blanc pour rester
   visible. */
.hero--photo .bouton-contour,
.entete-page--photo .bouton-contour {
    color: var(--blanc);
    border-color: rgba(255, 255, 255, 0.6);
}
.hero--photo .bouton-contour:hover,
.entete-page--photo .bouton-contour:hover {
    color: var(--blanc);
    border-color: var(--blanc);
}


.hero-titre { max-width: 16ch; }

.hero-texte {
    font-size: var(--t-p1);
    color: var(--graphite);
    max-width: 56ch;
    margin-bottom: 2.2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Sections génériques ---------- */
.services, .agence, .apercu-portfolio, .portfolio, .contact, .contenu-simple {
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

/* ---------- Services ---------- */
.services-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.service-carte {
    background: var(--blanc);
    border: 1px solid var(--cloud);
    border-radius: var(--rayon);
    padding: 2rem 1.6rem;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.service-carte:hover {
    border-color: var(--bleu);
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(27, 87, 235, 0.10);
}

.service-picto {
    width: 56px;
    height: 56px;
    color: var(--bleu);
    margin-bottom: 1.2rem;
}
.service-picto svg { width: 100%; height: 100%; }

.service-carte h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.service-carte p { color: var(--graphite); margin: 0; }

/* ---------- Agence ---------- */
.agence { background: var(--phantom); }
.agence .surtitre { color: var(--steel); }
.agence .titre-section { color: var(--blanc); }
.agence p { color: var(--smoke); }

.agence-grille {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.agence-photo, .agence-visuel img {
    border-radius: var(--rayon);
    width: 100%;
    object-fit: cover;
}

.liste-points {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: grid;
    gap: 0.7rem;
}
.liste-points li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--cloud);
    font-weight: 600;
}
.liste-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bleu);
}

/* ---------- Portfolio / aperçu ---------- */
.apercu-entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.lien-fleche {
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.lien-fleche::after { content: ' →'; }
.lien-fleche:hover { text-decoration: underline; }

.apercu-grille, .portfolio-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.6rem;
}

.projet-carte {
    display: block;
    text-decoration: none;
    background: var(--blanc);
    border: 1px solid var(--cloud);
    border-radius: var(--rayon);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.projet-carte:hover {
    transform: translateY(-4px);
    border-color: var(--bleu);
    box-shadow: 0 14px 34px rgba(27, 87, 235, 0.10);
}

.projet-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.projet-infos { padding: 1.3rem 1.4rem 1.5rem; }
.projet-infos h2, .projet-infos h3 { font-size: 1.25rem; margin-bottom: 0.3rem; }
.projet-infos p { color: var(--graphite); margin: 0.4rem 0 0; }

.projet-categorie {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bleu);
    margin-bottom: 0.4rem;
}

/* Visuel en attente (placeholder) */
.visuel-attente {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    text-align: center;
    background: repeating-linear-gradient(45deg, var(--cloud), var(--cloud) 14px, var(--blanc) 14px, var(--blanc) 28px);
    color: var(--space);
    font-weight: 600;
    border-radius: var(--rayon);
}
.visuel-attente small { font-weight: 400; }

/* Filtres portfolio */
.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}
.filtre {
    font-family: var(--police);
    font-size: var(--t-p2);
    font-weight: 600;
    color: var(--arsenic);
    background: var(--cloud);
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 0.5rem 1.3rem;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.filtre:hover { border-color: var(--bleu); color: var(--bleu); }
.filtre.actif { background: var(--bleu); color: var(--blanc); }

.projet-carte.masque { display: none; }

/* ---------- En-tête de page interne ----------
   Plein écran et responsive par défaut (corrigé le 17 juillet : la zone
   grise s'arrêtait avant le bas de l'écran). Le texte garde exactement la
   même position qu'avant (même padding en haut) : pas de centrage vertical,
   qui poussait le titre bien plus bas que sur l'ancien format. Seule
   l'en-tête « Données légales » garde l'ancien format compact (hauteur non
   forcée), via .entete-page--simple. */
.entete-page {
    position: relative;
    z-index: 0;
    overflow: hidden;
    min-height: 100svh;
    min-height: 100vh;
    /* Mêmes mesures que .hero (Accueil), demandé le 17 juillet : le texte
       de Contact/Casting semblait "trop haut", pas centré comme Accueil,
       car ce bloc avait moins de marge en haut/bas que .hero. */
    padding-block: clamp(5rem, 12vw, 9rem) clamp(4rem, 9vw, 7rem);
    background: linear-gradient(180deg, var(--blanc) 0%, var(--cloud) 100%);
}
.entete-page--simple {
    min-height: 0;
}

/* En-tête des pages intranet (casting, facturation, contrats, presse) :
   hérite de .entete-page mais ne doit JAMAIS prendre tout l'écran comme les
   bannières photo publiques — ce sont de simples barres de titre au-dessus
   d'une interface d'outils, pas des visuels d'accueil. Sans cette règle, une
   immense zone grise vide apparaissait avant le contenu (24/07). */
.admin-entete {
    min-height: 0;
    padding-block: clamp(2.25rem, 5vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.5rem);
}


/* ---------- Bandeau CTA ---------- */
.bandeau-cta {
    background: var(--bleu);
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.bandeau-inner { text-align: center; }
.bandeau-cta h2 { color: var(--blanc); }
.bandeau-cta p {
    color: var(--cloud);
    font-size: var(--t-p1);
    max-width: 50ch;
    margin: 0 auto 2rem;
}

/* ---------- Contact ---------- */
.contact-grille {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.contact-infos h2, .contact-formulaire h2 { font-size: var(--t-sub1); }

.liste-contact {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: grid;
    gap: 1rem;
}
.contact-libelle {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--space);
}
.liste-contact a {
    font-weight: 600;
    color: var(--phantom);
    text-decoration: none;
}
.liste-contact a:hover { color: var(--bleu); }

/* Formulaire (plugin Form) */
.contact-formulaire form { display: grid; gap: 1.2rem; }
.contact-formulaire label {
    display: block;
    font-weight: 700;
    color: var(--phantom);
    margin-bottom: 0.4rem;
}
.contact-formulaire input[type="text"],
.contact-formulaire input[type="email"],
.contact-formulaire select,
.contact-formulaire textarea {
    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);
}
.contact-formulaire input:focus,
.contact-formulaire select:focus,
.contact-formulaire textarea:focus {
    outline: none;
    border-color: var(--bleu);
}
.contact-formulaire textarea { min-height: 160px; resize: vertical; }

.contact-formulaire button[type="submit"],
.contact-formulaire .button {
    justify-self: start;
    font-family: var(--police);
    font-weight: 700;
    font-size: var(--t-p2);
    color: var(--blanc);
    background: var(--bleu);
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.contact-formulaire button[type="submit"]:hover { background: #1648c4; transform: translateY(-2px); }

.alerte {
    background: var(--cloud);
    border-left: 4px solid var(--bleu);
    border-radius: 8px;
    padding: 1rem 1.2rem;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--phantom);
    color: var(--smoke);
    padding-top: clamp(3.5rem, 7vw, 5rem);
}

.footer-grille {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}

.site-footer h2 {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--space);
}

.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.site-footer a { color: var(--smoke); text-decoration: none; }
.site-footer a:hover { color: var(--blanc); }
.footer-marque p { margin-top: 1.2rem; color: var(--space); }

.footer-bas {
    border-top: 1px solid var(--arsenic);
    padding-block: 1.4rem;
    font-size: 0.85rem;
    color: var(--space);
}
.footer-bas p { margin: 0; }

/* ---------- Animations d'apparition ---------- */
.revele {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms ease, transform 500ms ease;
}
.revele.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .revele { opacity: 1; transform: none; transition: none; }
    .bouton:hover, .projet-carte:hover, .service-carte:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
    .agence-grille, .contact-grille, .footer-grille { grid-template-columns: 1fr; }
    .footer-grille { gap: 2rem; }
}

@media (max-width: 760px) {
    .nav-toggle { display: flex; }

    .nav-principale {
        position: absolute;
        inset: 100% 0 auto 0;
        background: var(--blanc);
        border-bottom: 1px solid var(--cloud);
        display: none;
        padding: 1.2rem 1.5rem 1.8rem;
    }
    .nav-principale.ouvert { display: block; }
    .nav-principale ul { flex-direction: column; align-items: flex-start; gap: 1.1rem; }

    .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
}

/* ---------- Casting (page publique) ---------- */
.conteneur-etroit { max-width: 760px; margin-inline: auto; }

.casting-etapes { padding-block: clamp(2.5rem, 5vw, 4rem); }
.etapes-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.etape {
    background: var(--cloud);
    border-radius: var(--rayon);
    padding: 1.8rem 1.6rem;
}
.etape-numero {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bleu);
    color: var(--blanc);
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
.etape h2 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.etape p { color: var(--graphite); margin: 0; }

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

/* ---------- Gestion casting (espace réservé) ---------- */
.porte-acces { max-width: 420px; margin-top: 1.5rem; display: grid; gap: 1.2rem; }
.alerte-erreur { border-left-color: #d23b3b; }
.alerte-succes { border-left-color: #2e9e5b; }

.admin-titre-ligne {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* 24/07 : .barre-compte n'avait aucune règle propre, ce qui laissait le
   <form> du bouton « Compresser les anciennes photos » (display:inline)
   s'aligner différemment des <a class="bouton"> voisins (inline-block) sur
   la ligne de base — d'où les 2 autres boutons qui semblaient 'trop haut'
   et une zone d'en-tête plus grande que nécessaire. Un vrai conteneur flex
   aligne tout proprement, quel que soit l'élément (a, form, button). */
.barre-compte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}
.barre-compte form { margin: 0; display: flex; }

.admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}
.stat {
    background: var(--blanc);
    border: 1px solid var(--smoke);
    border-radius: 999px;
    padding: 0.5rem 1.2rem;
    color: var(--graphite);
}
.stat strong { color: var(--bleu); font-weight: 800; }

/* Pastilles de stats cliquables (24/07) : raccourci pour filtrer la liste
   par statut, comme le lien déjà existant vers la corbeille. */
button.stat.stat-filtre {
    font: inherit;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
button.stat.stat-filtre:hover { border-color: var(--bleu); color: var(--bleu); }
button.stat.stat-filtre:hover strong { color: var(--bleu); }

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

.admin-outils {
    display: flex;
    flex-wrap: wrap;
    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: 999px;
    padding: 0.6rem 1.2rem;
    background: var(--blanc);
    color: var(--phantom);
}
.admin-outils input[type="search"] { flex: 1 1 280px; }
.admin-outils input:focus, .admin-outils select:focus { outline: none; border-color: var(--bleu); }

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

.candidat {
    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); }

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

.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 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; }
.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); }

.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; }
.edition-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.candidat-edition label { font-size: 0.9rem; }
.candidat-edition input, .candidat-edition select { margin-top: 0.3rem; }
.candidat-edition textarea { margin-top: 0.3rem; 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; }
}

/* ---------- Page d'erreur (404 et autres) ---------- */
.page-erreur {
    position: relative;
    overflow: hidden;
    min-height: 62vh;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, var(--blanc) 0%, var(--cloud) 100%);
    padding-block: clamp(4rem, 9vw, 7rem);
}
.erreur-filigrane {
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(260px, 32vw, 460px);
    opacity: 0.08;
    pointer-events: none;
}
.erreur-filigrane img { width: 100%; height: auto; }

.erreur-contenu { position: relative; }
.erreur-code {
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.2em;
}
.page-erreur h2 {
    font-size: var(--t-sub1);
    margin-bottom: 0.5em;
}
.page-erreur .hero-texte { margin-bottom: 2rem; }

/* ---------- Pages de contenu simple (données légales, etc.) ---------- */
.contenu-simple .conteneur { max-width: 800px; }
.contenu-simple h2 {
    font-size: var(--t-sub1);
    margin-top: 2.2em;
}
.contenu-simple h3 {
    font-size: 1.15rem;
    margin-top: 1.6em;
}
.contenu-simple hr {
    border: 0;
    border-top: 1px solid var(--cloud);
    margin: 2.5rem 0;
}
.contenu-simple p, .contenu-simple li { color: var(--arsenic); }
.footer-bas a { color: var(--space); }
.footer-bas a:hover { color: var(--blanc); }

/* ---------- Liste des réseaux sociaux (avec icônes monochromes) ---------- */
.liste-reseaux {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}
.lien-reseau {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--phantom);
    text-decoration: none;
    transition: color var(--transition);
}
.reseau-icone {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--arsenic);
    flex-shrink: 0;
    transition: color var(--transition);
}
.reseau-icone svg { width: 22px; height: 22px; }
.lien-reseau:hover { color: var(--bleu); }
.lien-reseau:hover .reseau-icone { color: var(--bleu); }

/* ---------- Messages du plugin Form (formulaire de contact) ---------- */
/* Bannière verte de confirmation, identique au casting */
.form-message,
.contact-formulaire .form-messages .form-message {
    background: #e3f6e9;
    border-left: 4px solid #1d7a3d;
    border-radius: 8px;
    padding: 1.1rem 1.3rem;
    color: #14542b;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
/* Messages d'erreur du plugin Form en rouge */
.form-message.error,
.form-errors,
.contact-formulaire .form-errors {
    background: #fdecec;
    border-left: 4px solid #d23b3b;
    border-radius: 8px;
    padding: 1.1rem 1.3rem;
    color: #8a1f1f;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* ---------- Pages intranet (casting, clients) : sans nav ni footer ---------- */
.intranet-barre {
    border-bottom: 1px solid var(--cloud);
    background: var(--blanc);
    padding-block: 0.9rem;
}
.intranet-barre-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.intranet-barre .logo { display: inline-flex; align-items: center; }
.intranet-barre .logo-image { height: 30px; width: auto; display: block; }
.intranet-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--space);
}
.intranet-main { min-height: 70vh; }

/* ---------- Ajustements intranet (header plus grand, porte d'accès) ---------- */
.intranet-barre { padding-block: 1.4rem; }
.intranet-barre .logo-image { height: 42px; }
.intranet-label {
    font-size: 0.9rem;
    letter-spacing: 0.18em;
}

/* Body intranet en colonne : le bandeau en haut, le contenu prend le reste */
body.intranet {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.intranet-main { flex: 1; display: flex; flex-direction: column; }

/* La page d'accès (porte de code) remplit tout l'espace restant : fond jusqu'en bas.
   Cible uniquement l'écran de code (classe intranet-porte), pas les pages connectées. */
.intranet-porte .entete-page {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 0; /* la nouvelle règle plein écran (17 juillet) ne doit pas s'ajouter ici : cet écran remplit déjà l'espace via flex:1 dans sa colonne */
    background: linear-gradient(180deg, var(--blanc) 0%, var(--cloud) 100%);
}

/* Champ de code d'accès : plus grand et plus soigné */
.porte-acces { max-width: 460px; }
.porte-acces label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--phantom);
    margin-bottom: 0.6rem;
}
.porte-acces input[type="password"] {
    width: 100%;
    font-family: var(--police);
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-align: center;
    color: var(--phantom);
    background: var(--blanc);
    border: 2px solid var(--smoke);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 6px 20px rgba(30, 30, 36, 0.05);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.porte-acces input[type="password"]:focus {
    outline: none;
    border-color: var(--bleu);
    box-shadow: 0 6px 24px rgba(27, 87, 235, 0.16);
}
.porte-acces button[type="submit"] {
    font-size: 1.05rem;
    padding: 1rem 2.2rem;
    border-radius: 999px;
    justify-self: start;
}

/* Anti-spam : le champ « piège » (honeypot) doit rester totalement invisible.
   Les robots le remplissent, les humains ne le voient jamais. */
[data-grav-field="honeypot"],
.form-honeybear {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}