/* ===== Nouvelle charte graphique Maître Akesse (refonte 2026) =====
   Fond clair, rouge #C8102E, noir, police Montserrat, cartes blanches.
   Chargé APRÈS style.css : il redéfinit les couleurs de base (variables) pour que
   tout le site bascule d'un coup, puis corrige les endroits aux couleurs écrites en dur.
   Les couleurs elles-mêmes vivent dans css/jetons.css (chargé juste avant) : ne jamais les
   recopier ici ni dans une autre feuille. */

:root {
  /* Anciennes variables rebranchées sur la nouvelle charte */
  --noir: var(--fond);
  --noir-doux: var(--surface);
  --anthracite: var(--surface);
  --noir-brillant: var(--surface);
  --texte-corps: var(--encre);
  --texte-doux: var(--encre-douce);
  --titre-clair: var(--encre);
  --bordeaux: var(--rouge-ma2m);
  --bordeaux-vif: var(--rouge-ma2m-survol);
  --bordeaux-clair: var(--rouge-ma2m-texte);
  --bordeaux-noir: #f3d9dd;
  --rouge: var(--rouge-ma2m-texte);
  --gris: var(--encre-douce);
  --gris-clair: var(--lignes);
  --or: var(--rouge-ma2m);
  --glow-bordeaux: 0 6px 18px rgba(200,16,46,0.22);

  --display: var(--police);
  --texte: var(--police);
}

body {
  background-color: var(--fond);
  background-image: none;
  color: var(--encre);
  font-family: var(--texte);
  font-weight: 400;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--encre); letter-spacing: -0.01em; text-transform: none; }
/* Titres et libellés comme les maquettes (18/10/2026) : minuscules avec majuscule initiale, en gras —
   plus de titres tout en capitales. Les petits surtitres rouges (.eyebrow) restent en capitales. */

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Cartes */
.carte, .card { background: var(--surface); border: 1px solid var(--lignes); border-radius: 14px; }

/* En-tête, bande défilante, bandeau cookies, pied de page : tout en clair (demande de la
   propriétaire, 18/10/2026 : « plus de noir », de l'ouverture du site jusqu'au pied de page) */
.site-header-v2 { background: var(--surface) !important; border-bottom: 1px solid var(--lignes); color: var(--encre); }
.site-header-v2 a:not(.lang-switch):not(.header-marketplace-lien) { color: var(--encre); }
#marqueeBande { background: var(--rouge-ma2m) !important; color: #fff; }
.site-footer { background: var(--surface); color: var(--encre); border-top: 1px solid var(--lignes); }
.site-footer a { color: var(--encre); }
.site-footer .footer-bas { color: var(--encre-douce); }
/* Pied de page resserré (demande de la propriétaire, 18/10/2026 : « trop large ») : liens de
   navigation sur deux colonnes, marges réduites, sur téléphone comme sur ordinateur. */
.site-footer { padding: 2.2rem 0 1.2rem; }
.site-footer .footer-grille { grid-template-columns: 1.1fr 1.4fr 1fr; gap: 1.4rem 2rem; margin-bottom: 1.2rem; }
.site-footer .footer-grille h3 { margin-bottom: 0.7rem; }
.site-footer .footer-grille > div:nth-child(2) { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 2rem; align-content: start; }
.site-footer .footer-grille > div:nth-child(2) > h3 { grid-column: 1 / -1; }
.site-footer .footer-grille a { margin-bottom: 0.35rem; font-size: 0.86rem; }
.site-footer .footer-grille p { font-size: 0.92rem; margin-bottom: 0; }
.site-footer .footer-reseaux { margin-top: 0.5rem; }
.site-footer .footer-bas { padding-top: 1rem; }
@media (max-width: 720px) {
  .site-footer { padding: 1.6rem 0 5rem; } /* bas dégagé : boutons WhatsApp et « haut de page » flottants */
  .site-footer .footer-grille { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 1rem; }
  .site-footer .footer-grille > div:nth-child(2) { column-gap: 1.2rem; }
  /* liens toujours assez hauts pour le doigt (44 px de zone utile en tout), mais sur deux colonnes */
  .site-footer .footer-grille > div > a { padding: 0.45rem 0; margin-bottom: 0; }
  .site-footer .footer-bas { flex-direction: column; gap: 0.3rem; }
}

/* ===== Zones sombres (chantier B du cahier « Architecture ») =====
   Depuis le 18/10/2026 TOUT le site est clair, y compris l'écran d'introduction, l'en-tête,
   le menu plein écran, la grande image d'accueil et le pied de page. Restent sombres seulement
   les petites étiquettes posées directement sur une photo (billets, boutons sur les vignettes,
   cartes photo de l'espace mannequin). Une zone sombre déclare la classe « contexte-sombre » ;
   à l'intérieur, les mêmes variables valent « texte clair ». */
.contexte-sombre, .mp-billet, .mpg-photo-actions, .principal-photo-card, .compcard-slot {
  --fond: var(--sombre);
  --surface: var(--sombre-survol);
  --surface-douce: var(--sombre-actif);
  --encre: var(--sombre-encre);
  --encre-douce: var(--sombre-encre-douce);
  --lignes: var(--sombre-lignes);
  --rouge-ma2m-texte: var(--sombre-rouge-texte);
  /* anciennes variables (elles valent « clair » ailleurs : on les remet ici en sombre) */
  --noir: #060606;
  --noir-doux: #141312;
  --anthracite: var(--sombre);
  --noir-brillant: var(--sombre-survol);
  --texte-corps: var(--sombre-encre);
  --texte-doux: var(--sombre-encre-douce);
  --titre-clair: #ffffff;
  --bordeaux-clair: var(--sombre-rouge-texte);
  --rouge: var(--sombre-rouge-texte);
  --gris-clair: rgba(255,255,255,0.22);
  color: var(--sombre-encre);
}
/* ===== Ouverture claire : intro, grande image d'accueil, mannequin à la une, menu =====
   Sur les photos, un voile clair (couleur du fond) monte du bas : le texte foncé reste lisible. */
.splash, .splash.intro-anime { background: var(--fond) !important; }
.hero-v2 { background-color: var(--fond); }
.hero-v2::before { background: linear-gradient(to top, rgba(246,245,243,0.96) 0%, rgba(246,245,243,0.75) 38%, rgba(246,245,243,0.15) 75%, rgba(246,245,243,0) 100%) !important; }
.hero-v2-bg { filter: grayscale(60%) contrast(1.05) brightness(1.02) !important; }
.hero-v2 :is(h1, h2, h3, p, .hero-v2-title, .hero-slide-titre, .ma2m-grand) { color: var(--encre); text-shadow: none !important; }
/* (19/10/2026, demande de la propriétaire sur tablette : « c'est trop flou, impossible de voir les
   photos ») — plus de voile blanc sur « Mannequin à la une » et « Mot de Maître Akesse » : la photo
   reste nette, le texte est en BLANC sur une ombre foncée limitée au bas de l'image. */
.vedette-scrim, .mot-responsable-scrim { background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0) 72%) !important; }
.vedette-contenu h2, .mot-responsable-overlay h2 { color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,0.7) !important; }
.vedette-contenu p, .mot-resp-titre { color: #fff !important; font-weight: 600; text-shadow: 0 1px 10px rgba(0,0,0,0.8) !important; }
.mot-responsable-photo-wrap .eyebrow--clair { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.8); }
/* téléphone : le texte occupe une plus grande part de l'image, l'ombre monte plus haut */
@media (max-width: 700px) { .vedette-scrim, .mot-responsable-scrim { background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 88%) !important; } }
/* vidéo de l'agence : image animée foncée, l'étiquette « Le film » reste en blanc sur une ombre */
.video-accueil .eyebrow--clair { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.75); }
.video-accueil .eyebrow--clair::before { background: #fff; box-shadow: none; }
.vedette-cta { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.8); border-bottom-color: var(--rouge-ma2m); }
.vedette-fullbleed:hover .vedette-cta { border-color: #fff; }
.eyebrow--clair { color: var(--rouge-ma2m-texte); text-shadow: none; }
html body .menu-overlay { background: var(--fond) !important; }
.menu-overlay::before { background-image: url("../assets/logo-header-clair.png") !important; }

/* Bandeau cookies : carte blanche */
.bandeau-cookies {
  background: var(--surface); border: 1px solid var(--lignes); border-radius: 14px;
  box-shadow: 0 12px 32px -12px rgba(30,29,28,0.35);
}
.bandeau-cookies p { color: var(--encre); }
.bandeau-cookies a { color: var(--rouge-ma2m-texte); }
/* Lien « Intégrer l'agence » du bas de page : rouge de la charte (l'ancien rouge clair, fait
   pour le fond noir, était trop pâle sur fond clair — test visuel du 18/10/2026) */
.bandeau-integrer a { color: var(--rouge-ma2m-texte); }
.bandeau-integrer a:hover, .bandeau-integrer a:focus-visible { color: var(--rouge-ma2m-survol); }

/* ===== Boutons : voir css/bouton-ma2m.css (un seul bouton rouge pour tout le site, chargé sur
   toutes les pages). Ici, seulement les réglages de taille propres à l'en-tête. ===== */
/* Boutons du haut (Menu, EN/FR, Admin, Marketplace) : même bloc, un peu plus compact */
.header-v2-droite { gap: 0.6rem; }
.site-header-v2 .lang-switch, .site-header-v2 .menu-trigger { min-height: 40px; padding: 0 1.1rem; font-size: 0.85rem; }
.menu-trigger .dots { flex-direction: row; gap: 3px; }
@media (max-width: 480px) {
  .header-v2-droite { gap: 0.4rem; }
  .site-header-v2 .lang-switch, .site-header-v2 .menu-trigger { padding: 0 0.8rem; font-size: 0.8rem; }
}

/* ===== Formulaires : champs blancs, trait fin, coins arrondis (inscription, contact, espace…) ===== */
.form-champ input, .form-champ textarea, .form-champ select,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], textarea, select {
  background: var(--surface) !important;
  color: var(--encre) !important;
  border: 1px solid var(--lignes) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: var(--texte);
  min-height: 44px;
}
.form-champ input:focus, .form-champ textarea:focus, .form-champ select:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--rouge-ma2m) !important;
  box-shadow: var(--focus) !important;
  outline: none;
}
.form-champ input::placeholder, .form-champ textarea::placeholder { color: var(--encre-douce); opacity: 0.75; }
.form-champ select option { background: var(--surface); color: var(--encre); }
.form-champ label, .field > label { color: var(--encre); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.85rem; }

/* Encadrés d'information de la page inscription : cartes blanches lisibles */
.im-9 { background: var(--surface) !important; border: 1px solid var(--lignes) !important; border-radius: 12px; }
.im-9 a { color: var(--rouge-ma2m-texte) !important; }
.im-5, .im-18, .im-24 { background: var(--surface); border: 1px solid var(--lignes) !important; border-radius: 12px; }
.im-10, .im-13 { color: var(--encre) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--rouge-ma2m); }

/* Menu clair : téléphones du bloc contact en encre (l'Espace mannequin les avait en clair) */
html body .menu-overlay .menu-contact, html body .menu-overlay .menu-contact a.menu-tel { color: var(--encre); }