/* ═══════════════════════════════════════════════════════════════════
   Studio ESEO — Thèmes clair / sombre (base.css)

   Ne gère QUE les couleurs liées au mode clair ou sombre.
   (polices et tailles → typo.css · menu → nav.css · mise en page → feuille de la page)

   ── Chargement ─────────────────────────────────────────────────────
   Dans le <head> de CHAQUE page, en DERNIER (après nav.css) :
       <link rel="stylesheet" href="base.css">

   ── Activation ─────────────────────────────────────────────────────
   Une classe sur <body> :   .clair   ou   .sombre
   Sans classe, chaque page garde son thème d'origine :
       Accueil, Contact ................ sombre
       Impression, Catalogue, Admin .... clair

   ── Identité de chaque page (conservée dans les deux modes) ───────
       Accueil ............ rouge #ff0000 sur noir / crème
       Contact ............ bleu #004db9 sur noir / crème
       Cinéséo ............ violet #8b5cf6 sur noir / crème
       Prestation ......... vert d'eau #2dd4bf sur noir / crème
       Concours photo ..... ambre #f0a500 sur noir / crème
       Impression ......... dégradé bleu #0b2058 → #2563eb + or #f0a500
       Catalogue + Admin .. bleu #2563eb (leurs deux modes sont déjà
                            gérés par style.css et admin.css : base.css
                            n'y touche pas)

   ── Comment ça s'applique à la bonne page ──────────────────────────
   Les règles sont limitées à leur page avec :has() sur un élément
   propre à cette page (.Presentation / .contact-hero pour l'accueil et
   le contact, .form-section pour l'impression). Aucune modification
   des fichiers HTML n'est nécessaire.
═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   1. ACCUEIL + CONTACT — variante CLAIRE   (body.clair)
      Fond crème, textes sombres, rouge conservé.
      Le grand visuel d'ouverture (.Presentation) reste sombre :
      la photo et le texte blanc y restent lisibles.
═══════════════════════════════════════════════════════════════════ */

body.clair:has(.Presentation, .contact-hero) {
    --noir:   #f5f3ee;     /* fond de page */
    --blanc:  #16161b;     /* texte principal */
    --gris:   #ebe7de;     /* cartes et formulaires */
    --muted:  #5a5a68;     /* texte secondaire */
    --accent: #cc0000;     /* rouge légèrement assombri : lisible sur fond clair */
    color-scheme: light;
}

/* Contact : son accent reste le bleu #004db9 (lisible sur le fond crème : 6,9:1) */
body.clair:has(.contact-hero) { --accent: #004db9; }

/* Visuel d'ouverture : on garde l'ambiance sombre d'origine */
body.clair .Presentation {
    --noir:   #0d0d0f;
    --blanc:  #f5f3ee;
    --muted:  #9a9aaa;
    --accent: #ff0000;
    background: #0d0d0f;
    color: var(--blanc);
}

/* Menu : barre claire translucide au lieu du dégradé noir */
body.clair:has(.Presentation, .contact-hero, .cin-hero, .presta-bg, .concours-hero) nav {
    background: rgba(245, 243, 238, 0.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* Menu replié (nav.css) : bouton ☰ et volet déroulant en clair */
body.clair:has(.Presentation, .contact-hero, .cin-hero, .presta-bg, .concours-hero) .nav-burger {
    color: var(--blanc);
    border-color: rgba(0, 0, 0, 0.3);
}
body.clair:has(.Presentation, .contact-hero, .cin-hero, .presta-bg, .concours-hero) .nav-burger:hover { background: rgba(0, 0, 0, 0.06); }
body.clair:has(.Presentation, .contact-hero, .cin-hero, .presta-bg, .concours-hero) .nav-toggle:focus-visible + .nav-burger { outline-color: var(--accent); }
body.clair:has(.Presentation, .contact-hero, .cin-hero, .presta-bg, .concours-hero) nav .nav-links {
    background: rgba(245, 243, 238, 0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
body.clair:has(.Presentation, .contact-hero, .cin-hero, .presta-bg, .concours-hero) nav .nav-links li { border-top-color: rgba(0, 0, 0, 0.08); }

/* Pied de page */
body.clair:has(.Presentation, .contact-hero, .cin-hero, .presta-bg, .concours-hero) footer { border-top-color: rgba(0, 0, 0, 0.1); }

/* Séparateurs entre sections */
body.clair .section-mission,
body.clair .section-modules,
body.clair .bureau,
body.clair .join { border-top-color: rgba(0, 0, 0, 0.1); }

/* Textes qui avaient une couleur écrite en dur */
body.clair .section-text { color: var(--muted); }

/* Cartes : survol et filets */
body.clair .mission-card:hover,
body.clair a.contact-card:hover { background: #e1ddd2; }
body.clair .module-item:hover   { background: #e1ddd2; }
body.clair .module-desc li      { border-bottom-color: rgba(0, 0, 0, 0.08); }
body.clair .module-tag          { border-color: rgba(204, 0, 0, 0.35); }

/* Contact : photos du bureau sans portrait, formulaire « Nous rejoindre » */
body.clair .bureau-photo.vide { color: rgba(0, 0, 0, 0.12); }

body.clair .field input {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
}
body.clair .field input::placeholder { color: #8b8b98; }

body.clair .interest span {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
}
body.clair .interest:hover span { border-color: rgba(0, 0, 0, 0.45); }
body.clair .interest input:checked + span { background: rgba(0, 77, 185, 0.08); }

body.clair .btn-join { color: #ffffff; }                 /* texte blanc sur le bouton rouge */
body.clair .join-status.error   { color: #b3261e; }
body.clair .join-status.success { color: #166534; }


/* ═══════════════════════════════════════════════════════════════════
   1b. CINÉSÉO — variante CLAIRE   (body.clair)
       Fond crème, textes sombres, violet conservé (assombri pour rester lisible).
       Comme l'accueil : le grand visuel d'ouverture (.cin-hero) reste sombre,
       avec la photo et le logo blanc. Le menu et le pied de page clairs sont
       gérés plus haut (section 1).
═══════════════════════════════════════════════════════════════════ */

body.clair:has(.cin-hero) {
    --noir:      #f5f3ee;     /* fond de page */
    --blanc:     #16161b;     /* texte principal */
    --gris:      #ebe7de;     /* cartes, lecteur vidéo, bouton secondaire */
    --muted:     #5a5a68;     /* texte secondaire */
    --accent:    #6d3fd6;     /* violet assombri : 5,7:1 sur le fond crème */
    --on-accent: #ffffff;     /* texte du bouton « faire un don » */
    color-scheme: light;
}

/* Ouverture : on garde l'ambiance sombre d'origine (photo + logo clair) */
body.clair .cin-hero {
    --noir:   #0d0d0f;
    --blanc:  #f5f3ee;
    --muted:  #9a9aaa;
    --accent: #8b5cf6;
    background: #0d0d0f;
    color: var(--blanc);
}

/* Filets de séparation : sombres sur fond clair */
body.clair .cin-section        { border-top-color: rgba(0, 0, 0, 0.1); }
body.clair .equipe             { border-bottom-color: rgba(0, 0, 0, 0.12); }
body.clair .equipe-pole        { border-top-color: rgba(0, 0, 0, 0.12); }
body.clair .equipe-row         { border-bottom-color: rgba(0, 0, 0, 0.08); }
body.clair .btn-ghost:hover    { background: #e1ddd2; }


/* ═══════════════════════════════════════════════════════════════════
   1c. PRESTATION — variante CLAIRE   (body.clair)
       Fond crème, textes sombres, vert d'eau conservé (assombri pour rester
       lisible). La photo de fond reste visible sous un voile crème.
       Le menu et le pied de page clairs sont gérés en section 1.
═══════════════════════════════════════════════════════════════════ */

body.clair:has(.presta-bg) {
    --noir:   #f5f3ee;     /* fond de page */
    --blanc:  #16161b;     /* texte principal */
    --gris:   #ebe7de;     /* bouton secondaire */
    --muted:  #5a5a68;     /* texte secondaire */
    --accent: #0b5f59;     /* vert d'eau profond : 6,8:1 sur le fond crème */
    --presta-voile: linear-gradient(to bottom, rgba(245, 243, 238, 0.86), rgba(245, 243, 238, 0.96));
    color-scheme: light;
}

body.clair .presta-desc { color: #3a3a46; }                      /* était gris clair sur fond sombre */

/* Formulaire : panneau blanc translucide */
body.clair .presta-form {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
}
body.clair .field input,
body.clair .field textarea {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
}
body.clair .field input[type="date"] { color-scheme: light; }
body.clair .field input::placeholder,
body.clair .field textarea::placeholder { color: #8b8b98; }

body.clair .btn-send { color: #ffffff; }                           /* texte blanc sur le bouton vert */
body.clair .form-status.error   { color: #b3261e; }
body.clair .form-status.success { color: #166534; }
body.clair .presta-links .btn-ghost:hover { background: #e1ddd2; }
body.clair .back-top { color: #4a4a58; }                              /* le voile est plus léger en haut de l'écran : on assombrit un peu */

/* Pied de page */
body.clair:has(.presta-bg) footer { background: rgba(245, 243, 238, 0.9); }


/* ═══════════════════════════════════════════════════════════════════
   1d. CONCOURS PHOTO — variante CLAIRE   (body.clair)
       Fond crème, textes sombres, ambre conservé (assombri pour rester
       lisible). Comme l'accueil : le visuel d'ouverture (.concours-hero)
       reste sombre. Le menu et le pied de page clairs sont gérés en
       section 1 ; les filets de .cin-section en section 1b.
═══════════════════════════════════════════════════════════════════ */

body.clair:has(.concours-hero) {
    --noir:      #f5f3ee;     /* fond de page */
    --blanc:     #16161b;     /* texte principal */
    --gris:      #ebe7de;     /* cartes */
    --muted:     #5a5a68;     /* texte secondaire */
    --accent:    #9a6200;     /* ambre profond : 4,9:1 sur le fond crème */
    --on-accent: #ffffff;
    color-scheme: light;
}

body.clair .participation-etat.erreur { color: #b3261e; }

/* Ouverture : on garde l'ambiance sombre d'origine */
body.clair .concours-hero {
    --noir:      #0d0d0f;
    --blanc:     #f5f3ee;
    --muted:     #9a9aaa;
    --accent:    #f0a500;
    --on-accent: #0d0d0f;
    background: #0d0d0f;
    color: var(--blanc);
}


/* ═══════════════════════════════════════════════════════════════════
   2. IMPRESSION — variante SOMBRE   (body.sombre)
      Fond bleu nuit, cartes marine, bleu et or conservés.
      Le menu, le bandeau d'ouverture et le pied de page gardent leur
      dégradé bleu : c'est ce qui fait l'identité de la page.
═══════════════════════════════════════════════════════════════════ */

body.sombre:has(.form-section) {
    --text:        #e6e9f6;
    --text-muted:  #9ba6c9;
    --card-bg:     #101935;
    --card-border: rgba(110, 150, 255, 0.22);
    --shadow:      0 4px 24px rgba(0, 0, 0, 0.5);
    --sw-bg:       #2a2a2a;      /* sélecteur de mode, comme le catalogue en sombre */
    --sw-text:     #e0e0e0;
    background: #0a1128;
    color: var(--text);
    color-scheme: dark;
}

/* Barre de menu un peu plus profonde */
body.sombre:has(.form-section) .menu { background: rgba(7, 16, 46, 0.96); }

/* Titres de blocs et chiffres */
body.sombre .form-block-title { color: #e6e9f6; }
body.sombre .form-num         { color: rgba(143, 176, 255, 0.28); }
body.sombre .form-block-header { border-bottom-color: rgba(255, 255, 255, 0.08); }

/* Cartes « taille » et « papier » */
body.sombre .radio-card-inner,
body.sombre .paper-card-inner { background: #0b1330; }

body.sombre .radio-card:hover .radio-card-inner,
body.sombre .paper-card:hover .paper-card-inner { background: rgba(110, 150, 255, 0.1); }

body.sombre .radio-card.selected .radio-card-inner,
body.sombre .paper-card.selected .paper-card-inner {
    border-color: #5b8cff;
    background: rgba(110, 150, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(110, 150, 255, 0.12);
}

body.sombre .radio-format,
body.sombre .paper-name { color: #dbe4ff; }
body.sombre .radio-card.selected .radio-format,
body.sombre .paper-card.selected .paper-name { color: #9dbbff; }

body.sombre .paper-swatch { border-color: rgba(255, 255, 255, 0.18); }

/* Messages d'état */
body.sombre .form-notice.error   { color: #ff8f80; }
body.sombre .form-notice.success { color: #4ade80; }


/* ═══════════════════════════════════════════════════════════════════
   3. CATALOGUE + ADMINISTRATION
      Rien à faire ici : leurs variantes claire et sombre sont déjà
      définies dans style.css et admin.css (classe body.sombre).
═══════════════════════════════════════════════════════════════════ */