/* ===== Maître Akesse Model Management — Design tokens =====
   Couleurs : noir profond + bordeaux signature (accent principal), touche d'or mineure héritée du logo
   Typo : Cormorant Garamond (titres, display) + Jost (texte courant)
   Polices chargées via <link> dans le <head> de chaque page (avec preconnect),
   pas via @import ici — un @import CSS bloque le rendu en créant une dépendance
   en série (attendre style.css, puis découvrir l'import, puis le télécharger),
   alors qu'un <link> dans le HTML est détecté et lancé immédiatement par le
   navigateur, en parallèle du reste.
   Même règle pour css/menu.css et css/champs-telephone.css : appelés par un <link> dans
   chaque page, juste avant ce fichier (14/10/2026 : ils étaient importés ici en chaîne).
*/

:root {
  --noir: #060606;           /* fond dominant, noir profond (neutre, sans teinte) */
  --noir-doux: #0f0f10;      /* variation légèrement plus claire (cartes, séparation), neutre */
  --anthracite: #0e0e0f;     /* noir brillant, pour distinguer une section sombre (plus de teinte bordeaux : décision de la propriétaire, 06/10/2026) */
  --noir-brillant: linear-gradient(180deg, #151516 0%, var(--anthracite) 100%); /* léger reflet en haut des sections sombres (40rem, puis --anthracite) */
  --blanc: #ffffff;
  --creme: #f4f0ea;          /* réservé aux rares cartes claires (fiche mensurations, modales) */

  --texte-corps: #cdc5be;    /* texte courant clair sur fond noir */
  --texte-doux: #948c85;     /* texte secondaire, atténué */
  --titre-clair: #f5efe7;    /* titres sur fond sombre */

  --bordeaux: #7a1220;       /* bordeaux profond — remplissages pleins, boutons */
  --bordeaux-noir: #2b0a0e;  /* bordeaux tendant vers le noir — ombres, profondeur */
  --bordeaux-vif: #9c1c2c;   /* état de survol */
  --bordeaux-clair: #d55468; /* bordeaux lumineux — texte/labels sur fond noir (contraste AA vérifié : 5.1:1 sur --noir, WCAG demande 4.5:1 pour du texte normal) */

  --or: #c9a24b;             /* touche discrète héritée du logo, usage mineur */
  --rouge: var(--bordeaux-clair); /* alias conservé pour compatibilité (.oeil, anciens usages) */

  --gris: #8a837d;
  --gris-clair: rgba(255,255,255,0.16); /* fines bordures / aplats discrets sur fond noir */

  --display: 'Cormorant Garamond', serif;
  --texte: 'Jost', sans-serif;

  --marge: clamp(1.25rem, 5vw, 4rem);
  --transition-douce: cubic-bezier(0.19, 1, 0.22, 1);
  --glow-bordeaux: 0 0 26px rgba(207,59,82,0.4);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }
/* Dans certains navigateurs intégrés (Instagram, Facebook), "overflow-x: hidden" sur
   <html> ne suffit pas : un élément qui dépasse sur le côté permettait quand même de
   dézoomer et de balayer l'accueil à gauche et à droite. "clip" coupe ce dépassement
   sans créer de zone de défilement (les en-têtes "sticky" continuent de fonctionner). */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

body {
  margin: 0;
  background-color: var(--noir);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(255,255,255,0.025), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed;
  color: var(--texte-corps);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

/* Protection des images : décourage l'enregistrement/glisser-déposer/appui long.
   Le tableau de bord admin annule cette règle (voir plus bas) pour pouvoir télécharger. */
body:not(.zone-admin) img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}


a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--bordeaux-clair);
  outline-offset: 3px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--marge);
}

/* ---------- Typographie ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--titre-clair);
}

h1 { font-size: clamp(1.9rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing: 0.02em; }

p { max-width: 62ch; color: var(--texte-corps); }

.oeil { color: var(--rouge); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bordeaux-clair);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: var(--bordeaux-clair);
  display: inline-block;
}

/* ---------- Fil d'Ariane ---------- */
.fil-ariane {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--texte-doux); margin-bottom: 1.4rem;
}
.fil-ariane a { color: var(--texte-doux); transition: color 0.2s ease; }
.fil-ariane a:hover { color: var(--bordeaux-clair); }
.fil-ariane span { margin: 0 0.5rem; color: var(--encre-douce); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--texte); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.95rem 1.9rem; border: 1px solid var(--bordeaux-clair); color: var(--texte-corps);
  background: transparent; cursor: pointer; border-radius: 2px;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, transform 0.2s ease;
}

.btn:hover { color: #fff; border-color: var(--bordeaux-vif); box-shadow: var(--glow-bordeaux); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }

.btn--principal {
  border-color: var(--bordeaux); background: var(--bordeaux); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(122,18,32,0.6);
}
.btn--principal:hover { background: var(--bordeaux-vif); border-color: var(--bordeaux-vif); box-shadow: var(--glow-bordeaux), 0 14px 30px -8px rgba(122,18,32,0.6); transform: translateY(-2px); }
.btn--principal:active { transform: translateY(0) scale(0.97); }

/* ---------- Animation au scroll (reveal) ---------- */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s var(--transition-douce); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.visible { transition-delay: 0.1s; }
.reveal-delay-2.visible { transition-delay: 0.2s; }

/* ---------- Sections génériques ---------- */

section { padding: 5rem 0; }

.section-tete { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3rem; }
.section-tete p { color: var(--texte-doux); }

@media (max-width: 800px) { .section-tete { grid-template-columns: 1fr; } }
/* Titres alignés (06/10/2026, comparaison avec les grandes agences) : la petite mention
   (« 03 — Les talents ») occupe toute la ligne, le titre se place dessous à gauche, comme
   sur toutes les autres pages, et le texte d'accompagnement à droite. Avant, le titre
   tombait dans la colonne de droite, décalé du reste de la page. */
.section-tete > .eyebrow { grid-column: 1 / -1; margin-bottom: -1rem; }
.section-tete > h2 { grid-column: 1; }
.section-tete > p { grid-column: 2; }
@media (max-width: 800px) { .section-tete > h2, .section-tete > p { grid-column: 1; } .section-tete > .eyebrow { margin-bottom: -1.2rem; } }

.fond-anthracite { background-color: var(--anthracite); background-image: var(--noir-brillant); background-size: 100% 40rem; background-repeat: no-repeat; color: var(--texte-corps); }
.fond-anthracite p { color: var(--texte-corps); }
.fond-anthracite .section-tete p { color: var(--texte-corps); }

/* ---------- Services : mise en page asymétrique ---------- */

/* Page Services en 4 rubriques (06/10/2026, comparaison avec les grandes agences : des
   divisions courtes plutôt qu'une longue liste numérotée). Les 11 services sont rangés
   dans leur rubrique (Talents, Opportunités, Événementiel, Production). */
.divisions-services { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--gris-clair); }
.division-service { padding: clamp(1.8rem, 4vw, 2.8rem) 0; border-bottom: 1px solid var(--gris-clair); }
.division-num { font-family: var(--texte); font-size: 0.74rem; letter-spacing: 0.24em; font-weight: 500; color: var(--bordeaux-clair); }
.division-service h2 { margin-top: 0.4rem; font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
.division-intro { margin-top: 0.5rem; color: var(--texte-corps); max-width: 34rem; }
.division-service ul { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.division-service li { padding-left: 1rem; border-left: 1px solid rgba(207,59,82,0.45); }
.division-service li h3 { font-size: 1.05rem; letter-spacing: 0.03em; }
.division-service li p { margin-top: 0.25rem; font-size: 0.94rem; color: var(--texte-doux); }
@media (min-width: 860px) {
  .divisions-services { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 6vw, 5rem); }
}
.services-liste { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border-top: 1px solid var(--gris-clair); }

.service-ligne {
  grid-column: span 12; display: grid; grid-template-columns: 90px 1fr 260px; gap: 1.5rem;
  align-items: baseline; padding: 1.8rem 0; border-bottom: 1px solid var(--gris-clair);
  transition: background 0.3s ease, padding-left 0.3s ease;
}
.service-ligne:hover { background: rgba(255,255,255,0.03); padding-left: 0.6rem; }

.service-num { font-family: var(--display); font-size: 1.8rem; color: var(--texte-doux); transition: color 0.3s ease, text-shadow 0.3s ease; }
.service-ligne:hover .service-num { color: var(--bordeaux-clair); text-shadow: none; }
.service-nom h3 { margin-bottom: 0.4rem; }
.service-nom p { color: var(--texte-doux); margin: 0; font-size: 0.96rem; }
.service-tag {
  text-align: right; color: var(--bordeaux-clair); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; align-self: start;
}

@media (max-width: 720px) {
  .service-ligne { grid-template-columns: 50px 1fr; }
  .service-tag { grid-column: 2; text-align: left; margin-top: 0.4rem; }
}

/* ---------- Filtres (mannequins) ---------- */

.filtres { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2.2rem; }

.filtre-btn {
  font-family: var(--texte); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.65rem 1.2rem; border: 1px solid var(--gris-clair); background: transparent; color: var(--texte-corps);
  border-radius: 2px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.filtre-btn:hover { border-color: var(--bordeaux-clair); color: #fff; }
.filtre-btn.actif { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; box-shadow: var(--glow-bordeaux); }

.btn-mini-admin {
  background: transparent; border: 1px solid var(--gris-clair); border-radius: 2px;
  color: var(--texte-corps); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; padding: 0.55rem 1rem;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn-mini-admin:hover { border-color: var(--bordeaux-clair); background: var(--bordeaux); color: #fff; }

.mannequins-vide { padding: 3rem 0; color: var(--texte-doux); border-top: 1px solid var(--gris-clair); border-bottom: 1px solid var(--gris-clair); }

/* ---------- Book d'un mannequin (fiche publique) : grille façon réseau
   social — collée, sans espacement entre les photos, et qui s'adapte à
   l'orientation de chaque photo (portrait, carrée, rectangulaire). ---------- */
.book-grille-ig { column-count: 3; column-gap: 2px; }
.book-photo-carte { position: relative; display: block; break-inside: avoid; margin-bottom: 2px; background: var(--noir-doux); overflow: hidden; }
/* aspect-ratio « auto 2/3 » : place d'une photo portrait réservée avant son chargement
   (photos chargées au fil du défilement : la grille ne saute plus), puis vraies proportions */
.book-photo-carte img { aspect-ratio: auto 2 / 3; width: 100%; height: auto; display: block; opacity: 0.94; transition: transform 0.5s var(--transition-douce), opacity 0.4s ease; }
.book-photo-carte:hover img { transform: scale(1.03); opacity: 1; }
@media (max-width: 700px) { .book-grille-ig { column-count: 2; } }

.book-photo-coeur {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  background: rgba(10,8,7,0.55); backdrop-filter: blur(2px);
  border: none; border-radius: 999px; padding: 5px 10px;
  font-size: 13px; font-weight: 600; color: #f2ede4;
  cursor: pointer; transition: background 0.2s ease, transform 0.15s ease;
}
.book-photo-coeur:hover { background: rgba(10,8,7,0.75); }
.book-photo-coeur:active { transform: scale(0.92); }
.book-photo-coeur svg { width: 16px; height: 16px; flex-shrink: 0; }
.book-photo-coeur .coeur-icone { fill: none; stroke: #f2ede4; stroke-width: 2; transition: fill 0.15s ease, stroke 0.15s ease; }
.book-photo-coeur.aime .coeur-icone { fill: var(--rouge); stroke: var(--rouge); }
.book-photo-coeur.aime { animation: coeur-pop 0.3s ease; }
@keyframes coeur-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- Fiche publique — photo de couverture en plein écran : même recette que
   "Mannequin à la une" (.vedette-fullbleed) / actualités-événements (.news-une) / mot du
   fondateur — demande de la propriétaire, 28 septembre 2026 : que la photo de couverture
   du mannequin s'affiche en grand avec son nom et ses informations en surimpression,
   comme les autres photos "à la une" du site, plutôt qu'un petit bandeau. ---------- */
.profil-hero-fullbleed {
  display: block; position: relative;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  height: 86vh; height: 86dvh; min-height: 520px; max-height: 820px;
  overflow: hidden;
}
.profil-hero-fullbleed img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.profil-hero-scrim {
  position: absolute; inset: 0;
  /* Dôme d'ombre qui monte du bas : le mannequin semble sortir de l'ombre
     (demande de la propriétaire, 29 septembre 2026). */
  background:
    radial-gradient(ellipse 130% 55% at 50% 100%, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.62) 38%, rgba(0,0,0,0.18) 68%, rgba(0,0,0,0) 85%),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 45%);
}
.profil-hero-fullbleed { background: #000; }
.profil-hero-contenu { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.6rem, 5vw, 4rem); max-width: 760px; }
.profil-hero-contenu h1 {
  color: var(--titre-clair); margin-top: 0.6rem;
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.profil-hero-contenu p { color: var(--texte-corps); margin-top: 0.6rem; font-size: 1.02rem; letter-spacing: 0.04em; }
@media (max-width: 640px) { .profil-hero-fullbleed { height: 78vh; height: 78dvh; min-height: 460px; } }
/* Couverture cliquable : ouvre la galerie du Book. Pas de bouton/pastille en plus —
   essayé puis retiré à la demande de la propriétaire (inutile, on scrolle vers le Book). */
.profil-hero-fullbleed.cliquable { cursor: zoom-in; }
.profil-hero-fullbleed.cliquable img { transition: transform 1.2s var(--transition-douce); }
.profil-hero-fullbleed.cliquable:hover img { transform: scale(1.025); }
.profil-hero-fullbleed.cliquable:focus-visible { outline: 2px solid var(--rouge, #c8102e); outline-offset: -4px; }

.profil-avatar-centree { display: flex; justify-content: center; padding: 1.6rem 1rem 0; }
.profil-avatar { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--noir-doux); border: 4px solid var(--noir); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.profil-avatar.cliquable { cursor: pointer; }
.profil-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s var(--transition-douce); }
.profil-avatar.cliquable:hover img { transform: scale(1.05); }
@media (max-width: 600px) { .profil-avatar { width: 92px; height: 92px; border-width: 3px; } }

.mensurations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 1.6rem 0; }
/* Chaque case = une "touche de clavier" : fond noir laqué/miroir (même dégradé
   que la fiche Compcard PDF/JPEG), légèrement surélevée par son ombre, qui
   s'enfonce visuellement au survol/appui comme une vraie touche mécanique. */
.mensuration-item {
  background: transparent;
  color: var(--texte-corps); padding: 1rem;
  display: flex; align-items: flex-start; gap: 0.7rem;
  border-radius: 7px;
  box-shadow: none;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
/* Aucune touche visible au repos — seule l'information (icône + texte) est
   affichée directement sur le noir. Le bloc "touche de clavier" n'apparaît
   que lorsqu'on interagit (survol/appui), pour donner l'impression d'avoir
   réellement actionné quelque chose — purement décoratif, sans fonction. */
.mensuration-item:hover, .mensuration-item:active {
  background: linear-gradient(135deg, #0c0a08 0%, #020202 22%, #241f1a 46%, #2e2822 50%, #241f1a 54%, #020202 78%, #0c0a08 100%);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.75), inset 0 -1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(255,255,255,0.06);
  transform: translateY(1px);
}
.mensuration-item:active { transform: translateY(2px); }
.mensuration-item .icone-stat { flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.15rem; color: var(--bordeaux-clair); }
.mensuration-item .icone-stat svg { width: 100%; height: 100%; }
.mensuration-item .label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux); display: block; margin-bottom: 0.3rem; }
.mensuration-item .valeur { font-family: var(--display); font-size: 1.2rem; color: var(--titre-clair); }

.video-runway { aspect-ratio: 16/9; background: var(--noir-doux); margin-top: 1rem; }
.video-runway iframe { width: 100%; height: 100%; border: none; }

/* ---------- Événements / Runway ---------- */

.evenements-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.2rem; }
.evenement-carte { border-top: 2px solid var(--bordeaux); padding-top: 1.2rem; transition: border-color 0.3s ease; }
.evenement-carte:hover { border-color: var(--bordeaux-clair); }
.evenement-date { color: var(--bordeaux-clair); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.evenement-carte h3 { margin-top: 0.5rem; }
.evenement-carte p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--texte-corps); }

/* ---------- Bande de statistiques (chiffres réels, page d'accueil) ---------- */
.stats-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem; text-align: center; }
.stat-item { padding: 1.2rem 1rem; border-left: 1px solid var(--gris-clair); }
.stat-item:first-child { border-left: none; }
.stat-item .chiffre {
  display: block; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1;
  color: var(--bordeaux-clair); text-shadow: 0 0 26px rgba(207,59,82,0.35);
}
.stat-item .libelle { display: block; margin-top: 0.6rem; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-doux); }
@media (max-width: 640px) { .stat-item { border-left: none; border-top: 1px solid var(--gris-clair); } .stat-item:first-child { border-top: none; } }

/* Lisibilité (06/10/2026, comparaison avec les grandes agences) : les petites étiquettes
   (0,52 à 0,68 rem) ont été agrandies d'environ 1 px (0,62 à 0,74 rem) dans tout le site. */
/* ---------- Entrée par catégorie (accueil, 06/10/2026) : remplace la bande de chiffres
   (« 17+ mannequins »…). Comme sur les sites des grandes agences, l'accueil propose
   directement les divisions du Book ; chaque mot ouvre le Book filtré. ---------- */
.divisions { padding: clamp(2.6rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--gris-clair); border-bottom: 1px solid var(--gris-clair); }
.divisions-intro { text-align: center; max-width: none; margin-left: auto; margin-right: auto; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--texte-doux); }
.divisions-liens { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 0.4rem clamp(1.4rem, 5vw, 4.5rem); margin-top: 1.2rem; }
.divisions-liens a {
  font-family: var(--display); font-size: clamp(1.9rem, 5.2vw, 3.6rem); line-height: 1.1; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--titre-clair, #fff); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease;
}
.divisions-liens a:hover, .divisions-liens a:focus-visible { color: var(--bordeaux-clair); border-bottom-color: var(--bordeaux-clair); }
@media (max-width: 640px) { .divisions-liens { flex-direction: column; align-items: center; gap: 0.5rem; } }

/* ---------- Nos Valeurs (page Services) ---------- */
.valeurs-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.4rem; }
.valeur-item .valeur-num { font-family: var(--display); font-size: 1.7rem; color: var(--or); }
.valeur-item h3 { margin-top: 0.6rem; }
.valeur-item p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--texte-doux); }

/* ---------- Formulaires ---------- */

/* min-width: 0 est nécessaire : par défaut, un élément dans une grille/un flex
   ne peut jamais devenir plus étroit que son contenu (ex. le plus long nom de
   pays de la liste "Pays"), ce qui forçait toute la grille du formulaire à
   déborder de l'écran sur mobile sans cette règle. */
.form-champ { margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.form-champ label { font-size: 0.74rem; font-weight: 500; color: var(--texte-doux); text-transform: uppercase; letter-spacing: 0.12em; }

.form-champ input, .form-champ textarea, .form-champ select {
  font-family: var(--texte); font-size: 1rem; padding: 0.85rem 1rem;
  border: 1px solid var(--gris-clair); background: rgba(255,255,255,0.03); color: var(--texte-corps);
  border-radius: 2px; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  min-width: 0; width: 100%; max-width: 100%;
}
/* Safari iOS : le champ date déborde parfois de son conteneur malgré
   width:100% (élément de 390 px dépassant de 14 px, signalé par le
   journal du site le 01-02/10/2026) — max-width le force à rester dans
   l'écran quoi qu'il arrive. */
/* 06/10/2026 : max-width ne suffisait pas (journal : 407 px sur un écran de 414 px,
   iPhone iOS 18). Safari donne au champ date une largeur minimale propre à son
   apparence native : « appearance: none » la supprime (le calendrier du téléphone
   s'ouvre toujours au toucher) ; la date reste alignée à gauche et le champ garde la
   hauteur des autres. */
.form-champ input[type="date"] { max-width: 100%; min-width: 0; width: 100%; box-sizing: border-box; display: block; -webkit-appearance: none; appearance: none; min-height: 2.94rem; line-height: 1.2; }
.form-champ input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.form-champ input:focus, .form-champ textarea:focus, .form-champ select:focus {
  outline: none; border-color: var(--bordeaux-clair); background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(207,59,82,0.16);
}
.form-champ textarea { min-height: 110px; resize: vertical; }
.form-champ input::placeholder, .form-champ textarea::placeholder { color: var(--texte-doux); opacity: 0.7; }
.form-champ select option { background: var(--noir); color: var(--texte-corps); }

.form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 640px) { .form-grille { grid-template-columns: 1fr; } }

/* Base minimale en attendant la mise en page définitive façon CV (Phase 2) */
.competences-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; }
@media (max-width: 640px) { .competences-grille { grid-template-columns: 1fr; } }
.competence-champ input[type="range"] { width: 100%; accent-color: var(--bordeaux); }

/* ---------- Éditeur de texte enrichi (Quill) : actualités, événements, partenaires ---------- */
.editeur-riche { border-radius: 2px; overflow: hidden; }
.editeur-riche .ql-toolbar.ql-snow {
  border: 1px solid var(--gris-clair); border-bottom: none; background: rgba(255,255,255,0.03);
}
.editeur-riche .ql-container.ql-snow {
  border: 1px solid var(--gris-clair); font-family: var(--texte); font-size: 1rem;
}
.editeur-riche .ql-editor {
  min-height: 140px; color: var(--texte-corps); background: rgba(255,255,255,0.03);
}
.editeur-riche .ql-editor.ql-blank::before { color: var(--texte-doux); opacity: 0.7; font-style: normal; }
.editeur-riche .ql-snow .ql-stroke { stroke: var(--texte-doux); }
.editeur-riche .ql-snow .ql-fill { fill: var(--texte-doux); }
.editeur-riche .ql-snow .ql-picker { color: var(--texte-doux); }
.editeur-riche .ql-snow.ql-toolbar button:hover, .editeur-riche .ql-snow.ql-toolbar button.ql-active,
.editeur-riche .ql-snow .ql-picker-label.ql-active { color: var(--bordeaux-clair); }
.editeur-riche .ql-snow.ql-toolbar button:hover .ql-stroke, .editeur-riche .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--bordeaux-clair); }
.editeur-riche .ql-snow.ql-toolbar button:hover .ql-fill, .editeur-riche .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--bordeaux-clair); }

/* Variante claire : formulaire de modification, dans la fiche popup à fond clair
   (news-modal-corps, réutilisée par Actualités et Partenaires). */
.news-modal-corps .editeur-riche .ql-toolbar.ql-snow { background: #f3efe9; border-color: #d8d2cb; }
.news-modal-corps .editeur-riche .ql-container.ql-snow { border-color: #d8d2cb; }
.news-modal-corps .editeur-riche .ql-editor { background: #fff; color: #1a1512; }
.news-modal-corps .editeur-riche .ql-snow .ql-stroke { stroke: #6b6560; }
.news-modal-corps .editeur-riche .ql-snow .ql-fill { fill: #6b6560; }
.news-modal-corps .editeur-riche .ql-snow .ql-picker { color: #6b6560; }

/* Lecture du contenu enrichi publié (article complet, fiche détail) : espacement
   généreux façon revue de presse plutôt qu'un bloc de texte compact. */
.contenu-riche { line-height: 1.75; font-family: var(--display); }
/* La règle globale "p { color: var(--texte-corps) }" (pensée pour du texte sur fond
   noir) prenait le dessus sur la couleur posée en style inline sur ce conteneur —
   ici sur fond clair (actualités, partenaires), le texte redevenait presque
   invisible (contraste ~1.5:1). On force l'héritage de la couleur du conteneur. */
.contenu-riche p, .contenu-riche li { color: inherit; }
.contenu-riche p { margin: 0 0 1.1em; }
.contenu-riche p:last-child { margin-bottom: 0; }
.contenu-riche h1, .contenu-riche h2, .contenu-riche h3, .contenu-riche h4 { margin: 1.5em 0 0.6em; line-height: 1.3; }
.contenu-riche h1:first-child, .contenu-riche h2:first-child, .contenu-riche h3:first-child, .contenu-riche h4:first-child { margin-top: 0; }
.contenu-riche h1 { font-size: 1.9em; }
.contenu-riche h2 { font-size: 1.5em; }
.contenu-riche h3 { font-size: 1.22em; }
/* Alignements et retraits posés par l'éditeur (classes Quill conservées au rendu). */
.contenu-riche .ql-align-center { text-align: center; }
.contenu-riche .ql-align-right { text-align: right; }
.contenu-riche .ql-align-justify { text-align: justify; }
.contenu-riche li.ql-indent-1 { margin-left: 1.5em; }
.contenu-riche li.ql-indent-2 { margin-left: 3em; }
.contenu-riche li.ql-indent-3 { margin-left: 4.5em; }
.contenu-riche li.ql-indent-4, .contenu-riche li.ql-indent-5, .contenu-riche li.ql-indent-6,
.contenu-riche li.ql-indent-7, .contenu-riche li.ql-indent-8 { margin-left: 6em; }
.contenu-riche ul li.ql-indent-1, .contenu-riche ul li.ql-indent-3 { list-style-type: circle; }
.contenu-riche ul li.ql-indent-2 { list-style-type: square; }
.contenu-riche ul { list-style-type: disc; }
.contenu-riche ol { list-style-type: decimal; }
.contenu-riche sup, .contenu-riche sub { font-size: 0.72em; line-height: 0; }
.contenu-riche ul, .contenu-riche ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.contenu-riche li { margin-bottom: 0.4em; }
.contenu-riche blockquote {
  margin: 1.2em 0; padding-left: 1.1em; border-left: 3px solid var(--bordeaux-clair);
  font-style: italic; color: inherit; opacity: 0.85;
}
.contenu-riche a { color: var(--bordeaux-clair); text-decoration: underline; }
/* Fiches à fond clair (actualités, partenaires) : --bordeaux-clair est calibré pour
   un fond sombre et devient illisible sur --creme (contraste 3.49:1, sous les 4.5:1
   requis) — on utilise ici --bordeaux, bien plus contrasté sur fond clair (9.56:1). */
.news-modal-corps .contenu-riche a { color: var(--bordeaux); }

.bloc-section {
  position: relative;
  background: var(--noir-doux); border: 1px solid var(--gris-clair); border-radius: 6px;
  padding: 1.8rem clamp(1.3rem, 4vw, 2.2rem); margin-bottom: 1.8rem;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.7);
}
.bloc-section h3 { margin-top: 0; }
.bloc-section > p.bloc-section-intro { margin-top: -0.6rem; color: var(--gris); font-size: 0.9rem; }

.flash-succes-fond {
  position: fixed; inset: 0; background: rgba(0,0,0,0); pointer-events: none;
  z-index: 998; transition: background 0.35s ease;
}
.flash-succes-fond.actif { background: rgba(0,0,0,0.6); pointer-events: auto; }

.flash-succes {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: #1e5b25; color: #fff; padding: 2.4rem 2rem; border-radius: 16px;
  font-weight: 700; font-size: 1.3rem; line-height: 1.5;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  z-index: 999; opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  max-width: min(90vw, 420px); text-align: center;
}
.flash-succes.actif {
  opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}
.flash-succes-icone { display: block; font-size: 3.2rem; margin-bottom: 0.7rem; }

.form-msg { font-size: 0.9rem; padding: 0.8rem 1rem; margin-top: 1rem; display: none; border-radius: 2px; }
.form-msg.ok { display: block; background: var(--ok-fond); color: var(--ok-texte); border: 1px solid var(--ok-texte); }
.form-msg.err { display: block; background: var(--erreur-fond); color: var(--erreur-texte); border: 1px solid var(--erreur-texte); }
/* Un message encore vide (pendant la vérification de la connexion ou du code) ne montre pas
   son cadre : avant, un petit trait rouge apparaissait sous le champ (12/10/2026). */
.form-msg:empty { display: none !important; }

.onglets { display: flex; gap: 0.5rem; margin-bottom: 2rem; }

.onglet {
  padding: 0.8rem 1.4rem; font-weight: 500; color: var(--texte-corps); cursor: pointer;
  border: 1px solid var(--gris-clair); background: transparent; border-radius: 2px;
  font-family: var(--texte); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.onglet:hover { border-color: var(--bordeaux-clair); }
.onglet.actif { color: #fff; background: var(--bordeaux); border-color: var(--bordeaux); box-shadow: var(--glow-bordeaux); }

.panneau { display: none; }
.panneau.actif { display: block; max-width: 480px; }

/* ---------- Espace mannequin : tableau de bord ---------- */

.dashboard { display: none; }
.dashboard.actif { display: block; }

.dashboard-header {
  display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.6rem; flex-wrap: wrap; gap: 1rem;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--gris-clair);
}
.dashboard-header h2 { margin-bottom: 0.5rem; }

.statut-pastille {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--texte); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--gris-clair); color: var(--texte-doux);
}
.statut-pastille::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.statut-pastille.publie { border-color: var(--bordeaux-clair); color: var(--bordeaux-clair); box-shadow: var(--glow-bordeaux); }
.statut-pastille.en-attente { border-color: var(--or); color: var(--or); box-shadow: 0 0 18px rgba(201,162,75,0.3); }

.bandeau-refus {
  margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: 6px;
  background: rgba(122,18,32,0.12); border: 1px solid var(--bordeaux);
  color: var(--texte-corps); font-size: 0.85rem; line-height: 1.5;
}
.bandeau-refus strong { color: var(--bordeaux-clair); }

/* Chaque bloc numéroté du dossier ("01 — Informations", etc.) */
.section-tete-dossier { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.6rem; }
.section-tete-dossier .eyebrow {
  font-family: var(--display); font-style: italic; letter-spacing: 0; text-transform: none;
  font-size: 1.3rem; gap: 0.5rem;
}
.section-tete-dossier .eyebrow::before { width: 18px; }
.section-tete-dossier h3 { margin: 0; font-size: clamp(1.2rem, 2.6vw, 1.5rem); }

/* Aperçu en direct de la fiche publique, en haut de l'Espace mannequin */
.apercu-fiche-carte {
  display: grid; grid-template-columns: 110px 1fr; gap: 1.4rem; align-items: center;
  background: var(--noir-doux); border: 1px solid var(--bordeaux-clair); border-radius: 6px;
  padding: 1.4rem; margin-bottom: 2rem;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.7), 0 0 0 1px rgba(207,59,82,0.08);
}
.apercu-fiche-photo {
  position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 4px; overflow: hidden;
  background: var(--noir); display: flex; align-items: center; justify-content: center;
}
.apercu-fiche-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apercu-fiche-photo-vide { font-size: 0.7rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: 0.1em; }
.apercu-fiche-label {
  display: block; font-family: var(--texte); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bordeaux-clair); margin-bottom: 0.4rem;
}
.apercu-fiche-infos h3 { margin: 0; font-size: clamp(1.2rem, 2.8vw, 1.6rem); }
.apercu-fiche-infos > p { margin: 0.3rem 0 0; color: var(--texte-doux); font-size: 0.88rem; }
.apercu-fiche-infos .mensurations { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin: 1rem 0 0; }
@media (max-width: 560px) {
  .apercu-fiche-carte { grid-template-columns: 84px 1fr; gap: 1rem; padding: 1.1rem; }
}

.photos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.1rem; margin-top: 1.5rem; }
.photo-item {
  position: relative; aspect-ratio: 3/4; background: var(--noir-doux); overflow: hidden;
  border-radius: 6px; box-shadow: 0 14px 30px -16px rgba(0,0,0,0.75);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.photo-item:hover { box-shadow: 0 18px 36px -14px rgba(0,0,0,0.85), 0 0 0 1px rgba(207,59,82,0.3); transform: translateY(-2px); }
.photo-item.est-principale { box-shadow: 0 0 0 2px var(--or), 0 14px 30px -16px rgba(0,0,0,0.75); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-item button {
  position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.55); color: #fff;
  border: 1px solid var(--gris-clair); border-radius: 4px; width: 28px; height: 28px; cursor: pointer; font-size: 0.85rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.photo-item button:hover { background: var(--bordeaux); border-color: var(--bordeaux); }
/* Étoile "photo de profil" : pastille blanche bien visible en haut à gauche,
   étoile noire au repos, passe en or plein une fois la photo choisie. Volontairement
   détachée du bouton Compcard (placé tout en bas) pour ne plus créer de confusion. */
.photo-item .btn-principale {
  position: absolute; top: 8px; left: 8px; right: auto; background: #fff; color: #111;
  border: 1px solid #111; border-radius: 20px; width: auto; height: 28px; padding: 0 0.65rem; cursor: pointer;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.photo-item .btn-principale:hover, .photo-item.est-principale .btn-principale { background: var(--or); border-color: var(--or); color: #000; }

/* Sélection Compcard : bandeau encadré tout en bas de la photo, bien séparé de
   l'étoile de profil. Affiche "+ Compcard" au repos puis "Compcard n°X" une fois choisie. */
.photo-item .btn-compcard {
  position: absolute; bottom: 0; left: 0; right: 0; top: auto; width: 100%; height: auto;
  padding: 0.4rem 0.5rem; text-align: center;
  background: rgba(0,0,0,0.7); color: #fff; border: none; border-top: 2px solid var(--bordeaux-clair);
  border-radius: 0; cursor: pointer; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.photo-item .btn-compcard:hover { background: var(--bordeaux); border-top-color: var(--bordeaux); }

.upload-zone { border: 2px dashed var(--gris-clair); border-radius: 6px; padding: 2rem; text-align: center; color: var(--texte-doux); margin-top: 1.5rem; transition: border-color 0.25s ease; }
.upload-zone:hover { border-color: var(--bordeaux-clair); }
.upload-zone input { margin-top: 0.8rem; }

.projets-liste { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.projets-groupe-titre {
  margin: 1.2rem 0 -0.1rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bordeaux-clair);
}
.projets-groupe-titre:first-child { margin-top: 0; }
.projet-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem; background: rgba(255,255,255,0.04); border: 1px solid var(--gris-clair); border-radius: 6px;
}
.projet-item button {
  flex-shrink: 0; background: transparent; border: 1px solid var(--gris-clair); border-radius: 4px;
  width: 30px; height: 30px; cursor: pointer; color: var(--texte-corps);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.projet-item button:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }

.badge-type-modele {
  display: inline-block; padding: 0.3rem 0.8rem; margin: 0 0.4rem 0.4rem 0;
  border: 1px solid var(--bordeaux-clair); color: var(--bordeaux-clair); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.projets-liste-publique { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.2rem; }
.projet-item-public { padding: 0.9rem 1.1rem; background: rgba(255,255,255,0.04); border: 1px solid var(--gris-clair); }
.projets-liste-scroll {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.4rem;
  border-top: 1px solid var(--gris-clair);
  padding-top: 1rem;
}

/* ---------- Contact ---------- */

.contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-bloc { padding-bottom: 1.5rem; border-bottom: 1px solid var(--gris-clair); margin-bottom: 1.5rem; }
.contact-bloc h3 { margin-bottom: 0.8rem; }
.contact-bloc a, .contact-bloc p { display: block; margin: 0.2rem 0; color: var(--texte-corps); }
.contact-bloc a:hover { color: var(--bordeaux-clair); }
.contact-bloc .contact-bloc-texte { margin: 0 0 0.8rem; font-size: 0.9rem; line-height: 1.6; color: var(--encre-douce); max-width: 46ch; }

@media (max-width: 800px) { .contact-grille { grid-template-columns: 1fr; } }

.reseaux { display: flex; gap: 0.8rem; margin-top: 1.5rem; flex-wrap: wrap; }
.reseaux a {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 6px;
  background: var(--bordeaux); color: #fff;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.reseaux a svg { width: 20px; height: 20px; }
.reseaux a:hover { background: var(--bordeaux-vif); transform: translateY(-2px); box-shadow: var(--glow-bordeaux); }

/* ---------- Footer ---------- */

/* Bandeau « Intégrer l'agence » juste au-dessus du pied de page (06/10/2026, js/menu.js) :
   même écriture que les liens du menu, en rouge. */
.bandeau-integrer { padding: 2.2rem 0 2.4rem; text-align: center; border-top: 1px solid var(--gris-clair); background: var(--noir); }
.bandeau-integrer p { margin: 0 auto; max-width: none; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--texte-doux); }
.bandeau-integrer a {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem;
  font-family: var(--texte); font-size: 1.15rem; letter-spacing: 0.03em; color: #e0475f; text-decoration: none;
  padding: 0.55rem 1.2rem; border-radius: 8px; transition: background 0.25s ease, color 0.25s ease;
}
.bandeau-integrer a::after { content: "›"; font-size: 1.3rem; }
.bandeau-integrer a:hover, .bandeau-integrer a:focus-visible { background: rgba(213,84,104,0.12); color: #ff5f78; }
.site-footer { background: var(--noir); color: var(--texte-corps); padding: 3.5rem 0 2rem; border-top: 1px solid var(--gris-clair); }

.footer-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.footer-grille h3 { color: var(--titre-clair); font-family: var(--texte); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 1.1rem; font-weight: 500; }
.footer-grille a { font-size: 0.9rem; color: var(--texte-corps); display: block; margin-bottom: 0.6rem; }
.footer-grille p { font-family: var(--display); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--texte-corps); display: block; margin-bottom: 0.6rem; }
.footer-grille a:hover { color: var(--bordeaux-clair); }

.footer-reseaux { display: flex; gap: 0.6rem; margin-top: 0.8rem; flex-wrap: wrap; }
.footer-reseaux a {
  display: flex; align-items: center; justify-content: center; margin-bottom: 0;
  width: 38px; height: 38px; border-radius: 6px; flex-shrink: 0;
  background: var(--bordeaux); color: #fff;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.footer-reseaux a svg { width: 17px; height: 17px; }
.footer-reseaux a:hover { background: var(--bordeaux-vif); transform: translateY(-2px); box-shadow: var(--glow-bordeaux); }

.footer-bas {
  border-top: 1px solid var(--gris-clair); padding-top: 1.5rem; font-size: 0.78rem; color: var(--texte-doux);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1.5rem;
}
/* Bas de page réduit à la seule ligne © (tableau de bord, boutique, mot de passe) : un seul
   trait, celui du haut du bas de page — avant, deux traits l'un au-dessus de l'autre (12/10/2026). */
.site-footer .container > .footer-bas:first-child { border-top: 0; padding-top: 0; }
.site-footer:has(.container > .footer-bas:first-child) { padding-top: 1.5rem; }
.footer-bas a { color: inherit; }
.footer-bas a:hover { color: var(--bordeaux-clair); }

@media (max-width: 720px) { .footer-grille { grid-template-columns: 1fr; } }
/* Téléphone : liens du pied de page et bouton Menu assez grands pour le doigt (audit du 04/10) */
@media (max-width: 720px) {
  .footer-grille > div > a { padding: 0.5rem 0; margin-bottom: 0; }
  .menu-trigger { min-height: 44px; padding: 0 0.15rem; }
}

/* ---------- Panier de sélection recruteur ---------- */

.panier-widget {
  display: none;
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 60;
  align-items: center;
  gap: 0.6rem;
  background: var(--bordeaux);
  color: var(--blanc);
  padding: 0.9rem 1.3rem;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 30px -8px rgba(122,18,32,0.6);
}

.panier-widget span {
  background: rgba(0,0,0,0.35);
  color: var(--blanc);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
}

.selection-liste { display: grid; gap: 1px; background: var(--gris-clair); margin-bottom: 2.5rem; }
.selection-item { background: var(--creme); color: #1a1512; display: grid; grid-template-columns: 70px 1fr auto; gap: 1rem; align-items: center; padding: 0.8rem; }
.selection-item img { width: 70px; height: 90px; object-fit: cover; }
/* min-width: 0 nécessaire — voir l'explication donnée pour .form-champ plus haut :
   sans elle, un nom trop long empêche la grille de rétrécir et déborde sur mobile. */
.selection-item-info { min-width: 0; }
.selection-item .nom { font-family: var(--display); font-size: 1.1rem; }
.selection-item .info { font-size: 0.85rem; color: #6b6560; }
.selection-item button {
  background: transparent; border: 1px solid var(--bordeaux); color: var(--bordeaux); border-radius: 2px; padding: 0.45rem 0.85rem; cursor: pointer; font-size: 0.72rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.selection-item button:hover { background: var(--bordeaux); color: #fff; }

.filtres-avances {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.6rem 2rem;
  margin-bottom: 1.6rem;
}
/* The Book (14/10/2026) : catégorie et niveau sur UNE ligne (séparés par un trait), critères
   secondaires repliés sous « Plus de critères », compteur de résultats. */
.filtres-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 2.2rem; }
.filtres-ligne .filtres { margin: 0; flex-wrap: nowrap; }
.filtres-ligne { column-gap: 1.6rem; } /* écart entre les deux groupes (pas de trait : propre aussi quand ils passent à la ligne) */
.filtres-plus { margin-bottom: 1.6rem; }
.filtres-plus summary {
  cursor: pointer; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texte-corps); padding: 0.6rem 0; list-style: none;
}
.filtres-plus summary::-webkit-details-marker { display: none; }
.filtres-plus summary::before { content: '+ '; color: var(--bordeaux-clair); }
.filtres-plus[open] summary::before { content: '− '; }
.filtres-plus[open] .filtres-avances { margin-top: 1.2rem; }
.filtres-bilan {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 0 1.4rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--gris-clair);
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux);
}
.filtres-bilan .btn-mini-admin[hidden] { display: none; }
.filtres-proches { margin: -0.6rem 0 1.4rem; font-size: 0.9rem; color: var(--bordeaux-clair); }
/* Téléphone : deux rangées rangées (3 boutons de même largeur chacune) au lieu d'un retour
   à la ligne désordonné. */
@media (max-width: 640px) {
  .filtres-ligne { display: grid; gap: 0.5rem; }
  .filtres-ligne .filtres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .filtres-ligne .filtre-btn { padding: 0.65rem 0.2rem; letter-spacing: 0.05em; white-space: nowrap; text-align: center; }
  .filtres-avances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; }
}
@media (max-width: 360px) { .filtres-ligne .filtre-btn { font-size: 0.62rem; letter-spacing: 0.02em; } }
/* Tablette (19/10/2026, signalé par la propriétaire sur la page anglaise en vertical) : les six
   boutons tiennent sur UNE ligne, en français comme en anglais. */
@media (min-width: 641px) and (max-width: 1100px) {
  .filtres-ligne { flex-wrap: nowrap; column-gap: 0.7rem; }
  .filtres-ligne .filtres { gap: 0.3rem; }
  .filtres-ligne .filtre-btn { padding: 0.5rem 0.65rem !important; font-size: 0.78rem !important; letter-spacing: 0.02em; white-space: nowrap; }
}
.filtres-avances .form-champ { margin-bottom: 0; gap: 0.5rem; justify-content: flex-end; } /* cases alignées même si un libellé passe sur 2 lignes */
.filtres-avances .form-champ label {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; color: var(--texte-doux);
}
.filtres-avances input, .filtres-avances select {
  border: none; border-bottom: 1px solid var(--gris-clair); background: transparent; color: var(--texte-corps);
  padding: 0.4rem 0.1rem; font-size: 0.85rem; letter-spacing: 0.03em;
  border-radius: 0; transition: border-color 0.25s ease;
}
.filtres-avances input:focus, .filtres-avances select:focus { outline: none; border-color: var(--bordeaux-clair); box-shadow: none; background: transparent; }


/* ---------- Header épuré + Menu plein écran (style grande maison) ---------- */

.site-header-v2 {
  position: sticky;
  top: 0;
  z-index: 400;
  background: rgba(6,5,4,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gris-clair);
}

.header-v2-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.logo-img-header { display: flex; align-items: center; }
.logo-img-header img { height: 34px; width: auto; display: block; }
@media (max-width: 480px) {
  .logo-img-header img { height: 28px; }
}

/* Animation du logo (04/10/2026) : apparition douce au chargement, puis un reflet de
   lumière très discret qui traverse les lettres toutes les 9 secondes environ. Le reflet
   est découpé à la forme exacte du logo (masque), il ne déborde jamais autour.
   Désactivée pour les personnes qui ont demandé « moins d'animations » sur leur appareil. */
.logo-img-header { position: relative; }
.logo-img-header img { animation: logo-apparition 1.1s cubic-bezier(.2,.7,.2,1) both; }
.logo-img-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(213,84,104,.75) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: -30% 0;
  -webkit-mask: url(../assets/logo-header.png) center / contain no-repeat;
          mask: url(../assets/logo-header.png) center / contain no-repeat;
  animation: logo-reflet 9s ease-in-out 1.3s infinite;
}
@keyframes logo-apparition { from { opacity: 0; transform: translateY(4px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes logo-reflet { 0% { background-position: -30% 0; } 16%, 100% { background-position: 130% 0; } }
@media (prefers-reduced-motion: reduce) {
  .logo-img-header img { animation: none; }
  .logo-img-header::after { display: none; }
}

.header-v2-droite { display: flex; align-items: center; gap: 1.4rem; }
.lang-switch {
  font-family: var(--texte); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--texte-corps); border: 1px solid var(--gris-clair); border-radius: 999px;
  padding: 0.3rem 0.7rem; transition: border-color 0.2s ease, color 0.2s ease;
}
.lang-switch:hover { color: var(--bordeaux-clair); border-color: var(--bordeaux-clair); }

.menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: none;
  border: none;
  color: var(--blanc);
  cursor: pointer;
  font-family: var(--texte);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.menu-trigger:hover { color: var(--bordeaux-clair); }

.menu-trigger .dots { display: flex; flex-direction: column; gap: 3px; }
.menu-trigger .dots span { width: 4px; height: 4px; background: currentColor; border-radius: 50%; display: block; }

/* ---------- Menu — overlay plein écran ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background-color: var(--noir);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(255,255,255,0.04), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5.5rem var(--marge) 3rem;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px);
  box-shadow: none;
  border: none;
  transition: opacity 0.5s var(--transition-douce),
              transform 0.5s var(--transition-douce),
              visibility 0.5s;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.menu-overlay .close-menu {
  display: block;
  position: absolute;
  top: 1.7rem;
  right: var(--marge);
  background: none;
  border: 1px solid var(--gris-clair);
  color: var(--texte-corps);
  font-family: var(--texte);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.menu-overlay .close-menu:hover { border-color: var(--bordeaux-clair); color: #fff; }

.menu-overlay .nav-links { list-style: none; margin: 0; padding: 0; text-align: center; width: 100%; max-width: 620px; }
.menu-overlay .nav-links li {
  margin: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  border-bottom: 1px solid var(--gris-clair);
}
.menu-overlay .nav-links li:last-child { border-bottom: none; }
.menu-overlay.active .nav-links li { opacity: 1; transform: translateY(0); }
.menu-overlay.active .nav-links li:nth-child(1) { transition-delay: 0.05s; }
.menu-overlay.active .nav-links li:nth-child(2) { transition-delay: 0.09s; }
.menu-overlay.active .nav-links li:nth-child(3) { transition-delay: 0.13s; }
.menu-overlay.active .nav-links li:nth-child(4) { transition-delay: 0.17s; }
.menu-overlay.active .nav-links li:nth-child(5) { transition-delay: 0.21s; }
.menu-overlay.active .nav-links li:nth-child(6) { transition-delay: 0.25s; }
.menu-overlay.active .nav-links li:nth-child(7) { transition-delay: 0.29s; }
.menu-overlay.active .nav-links li:nth-child(8) { transition-delay: 0.33s; }
.menu-overlay.active .nav-links li:nth-child(9) { transition-delay: 0.37s; }

.menu-overlay .nav-links a {
  font-family: var(--display);
  font-size: clamp(1.3rem, 4.2vw, 2.1rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texte-corps);
  display: block;
  padding: 0.7rem 1rem;
  position: relative;
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.menu-overlay .nav-links a:hover,
.menu-overlay .nav-links a.actif { color: var(--bordeaux-clair); letter-spacing: 0.08em; }

.menu-overlay .nav-links .item-cta { border-bottom: none; margin-top: 1.6rem; }
.menu-overlay .nav-links .item-cta a {
  font-family: var(--texte);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  border: 1px solid var(--bordeaux);
  background: none;
  color: var(--bordeaux-clair);
  padding: 0.95rem 2.2rem;
  font-weight: 500;
  display: inline-block;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.menu-overlay .nav-links .item-cta a:hover { background: var(--bordeaux); color: #fff; box-shadow: var(--glow-bordeaux); letter-spacing: 0.22em; }

.menu-contact {
  margin-top: 2.6rem;
  text-align: center;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
}
.menu-overlay.active .menu-contact { opacity: 1; transform: translateY(0); }
.menu-contact a.menu-tel {
  font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.03em; color: var(--texte-corps);
  transition: color 0.25s ease;
}
.menu-contact a.menu-tel:hover { color: var(--bordeaux-clair); }
.menu-reseaux { display: flex; gap: 0.7rem; justify-content: center; margin-top: 1.1rem; }
.menu-reseaux a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gris-clair);
  display: flex; align-items: center; justify-content: center; color: var(--texte-corps);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.menu-reseaux a svg { width: 15px; height: 15px; fill: currentColor; }
.menu-reseaux a:hover { border-color: var(--bordeaux-clair); color: var(--bordeaux-clair); }

@media (max-height: 640px) {
  .menu-overlay { padding-top: 4.5rem; justify-content: flex-start; }
  .menu-overlay .nav-links a { font-size: 1.3rem; padding: 0.5rem 1rem; }
}

/* ---------- Hero plein écran cinématographique ---------- */

.hero-v2 {
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  overflow: hidden;
  background: var(--noir);
}

.hero-carousel { position: relative; width: 100%; height: 100%; }

.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; z-index: 0;
  transition: opacity 1.2s ease, visibility 1.2s;
}
.hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }

.hero-v2-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  filter: grayscale(85%) contrast(1.15) brightness(0.72);
  transform: scale(1.06);
  transition: opacity 0.4s ease, transform 8s linear;
}
.hero-slide.active .hero-v2-bg { transform: scale(1.14); }

.hero-v2-content {
  position: relative;
  z-index: 1;
  padding: 0 var(--marge);
  max-width: 780px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--transition-douce) 0.2s, transform 1s var(--transition-douce) 0.2s;
}
.hero-slide.active .hero-v2-content { opacity: 1; transform: translateY(0); }

.hero-v2-title {
  color: var(--titre-clair);
  margin-top: 0.4rem;
  letter-spacing: 0.12em;
}
.hero-v2-title-texte { margin-top: 0.2rem; }
.hero-slide-titre { font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1.02; color: var(--titre-clair); }
.ma2m-bloc { display: inline-block; }
.ma2m-grand {
  display: block;
  white-space: nowrap;
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  letter-spacing: 0.22em;
  color: var(--titre-clair);
}
.ma2m-def {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  font-family: var(--texte);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--texte-doux);
  text-align: justify;
  text-align-last: justify;
}
@media (max-width: 480px) {
  .ma2m-def { font-size: 0.66rem; }
}

.hero-v2-subtitle {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--texte-corps);
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin: 1.1rem auto 0;
  max-width: 46ch;
}

.hero-v2-cta { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.hero-dots {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 0.6rem;
}
.hero-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3);
  cursor: pointer; transition: background 0.3s ease, transform 0.3s ease;
}
.hero-dots span.actif { background: var(--bordeaux-clair); transform: scale(1.3); box-shadow: 0 0 10px rgba(207,59,82,0.6); }

/* ---------- Bandeau défilant (marquee) ---------- */

.marquee-bande {
  display: flex;
  align-items: stretch;
  background: var(--bordeaux);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Étiquette fixe à gauche — masquée par défaut, visible uniquement quand une
   annonce est active (voir chargerBandeauAnnonce() sur la page d'accueil). */
.marquee-label {
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.3rem;
  background: var(--blanc);
  color: var(--bordeaux);
  font-family: var(--texte); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
  animation: marquee-label-glow 1.4s ease-in-out infinite;
}
.marquee-label::before {
  content: '●';
  font-size: 0.66rem;
  color: var(--bordeaux);
  animation: marquee-label-pulse 1.6s ease-in-out infinite;
}
@keyframes marquee-label-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes marquee-label-glow {
  0%, 100% { background: var(--blanc); box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { background: #ffe9ec; box-shadow: 0 0 22px 6px rgba(255,255,255,0.95); }
}

.marquee-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.85rem 0;
}
.marquee-piste { display: inline-flex; width: max-content; padding-left: 1.4rem; animation: marquee-defile 28s linear infinite; }
.marquee-annonce-active .marquee-piste { animation-duration: 18s; }
.marquee-piste span {
  display: inline-flex; align-items: center; gap: 2.2rem;
  padding-right: 2.2rem;
  font-family: var(--texte); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: #fff;
}
@keyframes marquee-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-piste { animation: none; } }
@media (max-width: 480px) {
  .marquee-label { font-size: 0.68rem; padding: 0 0.9rem; }
}

/* ---------- Bord irrégulier "papier déchiré" (transition image → bloc noir) ---------- */

.bord-dechire-bas { position: relative; }
.bord-dechire-bas::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 38px;
  background-color: var(--noir);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='38' viewBox='0 0 52 38'%3E%3Cpolygon fill='white' points='0,38 0,16 9,29 18,7 27,25 36,5 44,27 52,12 52,38'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='38' viewBox='0 0 52 38'%3E%3Cpolygon fill='white' points='0,38 0,16 9,29 18,7 27,25 36,5 44,27 52,12 52,38'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 52px 100%; mask-size: 52px 100%;
  pointer-events: none; z-index: 2;
}

/* ---------- Lightbox plein écran lumineux (réutilisable sur tout le site) ---------- */

.lightbox-global {
  position: fixed; inset: 0; z-index: 2000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox-global.active { opacity: 1; visibility: visible; }

.lightbox-global .lightbox-conteneur { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox-global .lightbox-img {
  max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain;
}

.lightbox-global .lightbox-fermer {
  position: absolute; top: 1.6rem; right: 1.8rem; z-index: 20;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: var(--blanc);
  font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer;
  padding: 0.6rem 1rem;
}
.lightbox-global .lightbox-fermer:hover { background: rgba(255,255,255,0.2); }

.lightbox-global .lightbox-fleche {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  color: var(--blanc); width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; cursor: pointer; transition: all 0.25s ease;
}
.lightbox-global .lightbox-fleche:hover { background: rgba(255,255,255,0.22); }
.lightbox-global .lightbox-precedent { left: 1.2rem; }
.lightbox-global .lightbox-suivant { right: 1.2rem; }

.lightbox-global .lightbox-compteur {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  font-size: 0.74rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.7); text-transform: uppercase;
}

@media (max-width: 700px) {
  .lightbox-global .lightbox-fleche { width: 42px; height: 42px; font-size: 1rem; }
  .lightbox-global .lightbox-precedent { left: 0.5rem; }
  .lightbox-global .lightbox-suivant { right: 0.5rem; }
}

/* ---------- Styles partagés avec la lightbox globale (.lightbox-global plus haut) ----------
   La classe "lightbox" seule n'est plus utilisée nulle part, mais les règles ci-dessous
   (lightbox-conteneur, lightbox-fermer, lightbox-fleche, etc.) le sont toujours : elles
   complètent les règles ".lightbox-global .lightbox-xxx" plus haut (ex. le padding ici
   n'est pas redéfini là-bas). Ne pas supprimer sans vérifier chaque propriété une par une. */

.lightbox-conteneur { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 2.5rem; }

.lightbox-img { max-width: 82vw; max-height: 85vh; object-fit: contain; }

.lightbox-fermer {
  position: absolute; top: 2rem; right: 2.2rem; z-index: 20;
  background: none; border: none; color: #999; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
}
.lightbox-fermer:hover { color: #fff; }

.lightbox-fleche {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; cursor: pointer; transition: all 0.25s ease;
}
.lightbox-fleche:hover { background: rgba(255,255,255,0.2); border-color: #fff; }
.lightbox-precedent { left: 1.5rem; }
.lightbox-suivant { right: 1.5rem; }

.lightbox-compteur {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
  font-size: 0.74rem; letter-spacing: 0.2em; color: #999; text-transform: uppercase;
}

@media (max-width: 700px) {
  .lightbox-fleche { width: 40px; height: 40px; font-size: 1rem; }
  .lightbox-precedent { left: 0.6rem; }
  .lightbox-suivant { right: 0.6rem; }
}

/* ---------- Médaillons mannequins (page listing) ---------- */

/* The Book : présentation éditoriale (grands portraits) plutôt que catalogue de
   petites vignettes rondes — le mannequin doit dominer l'écran, l'information
   reste minimale (nom, ville, taille). Structure/JS inchangés : uniquement la
   mise en forme de la même carte déjà utilisée par mannequins.html et l'aperçu
   de la page d'accueil. */
.medaillon-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 3.2rem 1.8rem;
}

.instagram-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 2.5rem;
}
.instagram-vignette { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; display: block; }
.instagram-vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--transition-douce); }
.instagram-vignette:hover img { transform: scale(1.06); }

.medaillon-carte {
  position: relative;
  /* min-width: 0 + colonnes « minmax(0, 1fr) » : sans cela, une photo encore en
     chargement (largeur naturelle de l'image) élargissait la colonne au-delà de
     l'écran — la page d'accueil devenait deux fois plus large que le téléphone et se
     laissait dézoomer/balayer sur le côté (28-29 septembre 2026). */
  min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  /* Plus de « content-visibility: auto » (retiré le 14/10/2026) : les cartes hors de l'écran
     étaient comptées avec une hauteur provisoire de 380 px (≈ 240 px en vrai sur téléphone),
     puis rétrécissaient en apparaissant, ce qui faisait sauter toute la page (journal :
     « Affichage qui saute » sur The Book et l'accueil). Il servait à mettre en pause
     l'animation des photos hors écran ; le Book n'anime plus ses photos (#grille). */
}

.medaillon-photo {
  width: 100%; aspect-ratio: 3 / 4; border-radius: 2px; overflow: hidden;
  /* Pas de bordure : la photo doit sembler émerger du noir plutôt que d'être
     encadrée — une ombre profonde + un très léger halo bordeaux en permanence
     la détachent nettement du fond, même sans interaction. */
  box-shadow: 0 22px 48px -14px rgba(0,0,0,0.8), 0 0 30px -8px rgba(207,59,82,0.22);
  transition: box-shadow 0.35s ease;
  animation: ma2m-flotter 6.5s ease-in-out infinite;
}
/* Décalages de durée/délai par carte pour que le mouvement ne soit jamais synchronisé */
.medaillon-carte:nth-child(2n) .medaillon-photo { animation-duration: 7.5s; animation-delay: -1.6s; }
.medaillon-carte:nth-child(3n) .medaillon-photo { animation-duration: 5.8s; animation-delay: -3.4s; }
.medaillon-carte:nth-child(4n) .medaillon-photo { animation-duration: 6.9s; animation-delay: -2.3s; }
.medaillon-carte:nth-child(5n) .medaillon-photo { animation-duration: 7.1s; animation-delay: -0.8s; }

@keyframes ma2m-flotter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.medaillon-carte img {
  /* object-position : on garde le HAUT de la photo (où se trouve presque toujours le
     visage) au lieu du centre — sur une photo verticale, le centre coupait la tête
     dans les ronds de l'accueil et les vignettes du Book (29 septembre 2026). */
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform 0.6s var(--transition-douce);
}

/* Effet "on enfonce la photo" plutôt que l'inverse : l'ombre se resserre
   (moins d'élévation, comme si elle s'enfonçait dans le noir) et l'image se
   réduit très légèrement — jamais un agrandissement qui la ferait ressortir. */
.medaillon-carte:hover .medaillon-photo, .medaillon-carte:focus-within .medaillon-photo {
  box-shadow: 0 0 0 1px var(--bordeaux-clair), 0 0 24px rgba(207,59,82,0.45), 0 4px 12px -6px rgba(0,0,0,0.6);
}
.medaillon-carte:hover img, .medaillon-carte:focus-within img { transform: scale(0.96); }

/* Apparition au défilement façon "éclosion" : la photo s'ouvre en s'agrandissant
   légèrement depuis un état plus resserré, au lieu du simple glissement vertical
   utilisé ailleurs sur le site — remplace .reveal uniquement pour ces cartes. */
.medaillon-carte.reveal {
  opacity: 0;
  transform: translateY(16px) scale(0.86);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.medaillon-carte.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.medaillon-nom { font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 1.1rem; color: var(--titre-clair); }
.medaillon-info { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-doux); margin-top: 0.3rem; }

.medaillon-carte .btn-selection {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  padding: 0.4rem 0.8rem; font-size: 0.7rem; letter-spacing: 0.08em;
  border: 1px solid var(--bordeaux); background: var(--noir); color: var(--bordeaux-clair);
  border-radius: 2px; cursor: pointer; font-weight: 500; text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.medaillon-carte .btn-selection:hover { background: var(--bordeaux); color: #fff; }

/* Aperçu "Nos visages" de l'accueil uniquement (portraits rectangulaires depuis le 06/10/2026), plus grands
   que l'ancienne version (220px) et resserrés — The Book (mannequins.html)
   garde lui les grands portraits rectangulaires. */
#medaillons-accueil.medaillon-grille {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2.2rem 1.2rem;
  justify-items: stretch;
}
/* La carte prend toute la largeur de sa colonne : centrée sans largeur fixée, elle
   prenait la largeur d'origine de la photo pendant son chargement (jusqu'à deux fois
   l'écran d'un téléphone). */
#medaillons-accueil .medaillon-carte { width: 100%; }
/* Cartes d'attente de l'accueil (14/10/2026) : même taille que les vraies, fond sombre, immobiles. */
.medaillon-attente .medaillon-photo { background: var(--noir-doux); animation: none; box-shadow: none; }
/* 06/10/2026 (comparaison avec les grandes agences, accord de la propriétaire) : portraits
   rectangulaires verticaux, la silhouette entière visible, comme une page de magazine —
   les cercles coupaient la tête ou les pieds. Seul le médaillon de profil de la fiche
   mannequin reste rond (choix de la propriétaire). */
#medaillons-accueil .medaillon-photo {
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: 0;
  animation: none;
}

@media (max-width: 640px) {
  #medaillons-accueil.medaillon-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 0.8rem; }
}
/* Ordinateur : 3 portraits par ligne, bloc centré (6 mannequins = 2 lignes complètes). */
@media (min-width: 900px) {
  #medaillons-accueil.medaillon-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin-left: auto; margin-right: auto; gap: 2.6rem 1.6rem; }
}

@media (max-width: 640px) {
  .medaillon-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.9rem; }
  .medaillon-nom { font-size: 0.92rem; margin-top: 0.7rem; }
  .medaillon-info { font-size: 0.68rem; margin-top: 0.25rem; }
  /* zone de toucher d'au moins 32 px (accessibilité, Lighthouse 12/10/2026) */
  .medaillon-carte .btn-selection { top: 0.4rem; right: 0.4rem; padding: 0.3rem 0.6rem; font-size: 0.66rem; min-width: 2rem; min-height: 2rem; }
}

/* ---------- THE BOOK (mannequins.html uniquement, #grille) : galerie premium
   façon grandes agences (IMG, Elite, Next) — grille resserrée façon planche
   contact, portraits en niveaux de gris révélés en couleur au survol, légende
   en incrustation sur la photo plutôt qu'en dessous. N'affecte jamais l'aperçu
   "Nos visages" de l'accueil (médaillons ronds), qui garde son propre style. */
#grille.medaillon-grille { gap: 3px; }
#grille .medaillon-photo {
  position: relative; border-radius: 0; box-shadow: none; animation: none;
  background: var(--noir);
}
#grille .medaillon-carte:hover .medaillon-photo, #grille .medaillon-carte:focus-within .medaillon-photo {
  box-shadow: none;
}
#grille .medaillon-carte img {
  filter: grayscale(45%) contrast(1.03);
  transition: transform 0.8s var(--transition-douce), filter 0.5s ease;
}
#grille .medaillon-carte:hover img, #grille .medaillon-carte:focus-within img {
  filter: grayscale(0%);
  transform: scale(1.045);
}
.book-carte-legende {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: left;
  padding: 2.2rem 0.9rem 0.85rem;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
  pointer-events: none;
}
#grille .medaillon-nom { margin-top: 0; color: #fff; font-size: 0.95rem; }
#grille .medaillon-info { color: rgba(255,255,255,0.78); margin-top: 0.25rem; }
#grille .medaillon-carte .btn-selection {
  background: var(--surface); border-color: var(--lignes); color: var(--encre);
}
#grille .medaillon-carte .btn-selection.est-selectionne { background: var(--bordeaux-noir); color: var(--blanc); }
#grille .medaillon-carte .btn-selection:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }

@media (max-width: 640px) {
  #grille.medaillon-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .book-carte-legende { padding: 1.4rem 0.6rem 0.6rem; }
}

@media (max-width: 400px) {
  .medaillon-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 0.8rem; }
}

/* ---------- Porte d'entrée (hero verrouillé) ---------- */

body.porte-verrouillee { overflow: hidden; height: 100vh; height: 100dvh; }
html.porte-verrouillee { overflow: hidden; height: 100%; }

.hero-v2::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.22), rgba(0,0,0,0.6));
}

.eyebrow--clair { color: var(--bordeaux-clair); text-shadow: 0 1px 10px rgba(0,0,0,0.7); }
.eyebrow--clair::before { background: var(--bordeaux-clair); box-shadow: 0 0 8px rgba(207,59,82,0.8); }

.entrer-fleche {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  z-index: 3;
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(6,5,4,0.55); border: 1px solid var(--gris-clair); color: var(--texte-corps); cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  padding: 0; backdrop-filter: blur(6px);
  font-family: var(--texte); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 1; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.entrer-fleche:hover { border-color: var(--bordeaux-clair); color: #fff; box-shadow: var(--glow-bordeaux); transform: translateX(-50%) translateY(-3px); }
.entrer-fleche:active { transform: translateX(-50%) translateY(0); }
/* 05/10/2026 : signe immédiat après l’appui sur « Entrer » (la page s’ouvre juste après). */
.entrer-fleche.entrer-en-cours { border-color: var(--bordeaux-clair); color: #fff; box-shadow: var(--glow-bordeaux); opacity: 0.75; pointer-events: none; animation: none; }
.entrer-icone { font-size: 1rem; animation: entrer-rebond 1.8s ease-in-out infinite; }

@keyframes entrer-rebond {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- Actualités & Activités ---------- */

.filtres-categories { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.filtre-categorie {
  font-family: var(--texte); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.6rem 1.1rem; border: 1px solid var(--gris-clair); background: transparent; color: var(--texte-corps);
  border-radius: 999px; cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.filtre-categorie:hover { border-color: var(--bordeaux-clair); color: #fff; }
.filtre-categorie.actif { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; box-shadow: var(--glow-bordeaux); }

/* "À la une" (Actualités / Événements) : reprend EXACTEMENT la recette de
   "Mannequin à la une" sur l'accueil (.vedette-fullbleed ci-dessous),
   qu'elle a validée comme le bon rendu plein écran — même structure plate
   (photo, calque de dégradé, texte, tous en enfants directs du même bloc,
   sans z-index ni hauteur calculée indépendamment), demande explicite de
   la propriétaire le 28 septembre 2026 après plusieurs essais. Portée
   scopée à .news-une (vrai bloc public) uniquement — l'aperçu admin du
   formulaire de rédaction (.redaction-apercu-carte), qui réutilise
   .news-une-photo/.news-une-corps dans son propre balisage compact séparé,
   garde son rendu d'origine (règles plus bas). */
.news-une {
  display: block; position: relative; cursor: pointer; text-decoration: none;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  height: 86vh; height: 86dvh; min-height: 520px; max-height: 820px;
  overflow: hidden; margin-bottom: 3.5rem;
}
/* Place du bloc « À la une » réservée pendant le chargement (Actualités / Événements) :
   sans elle, le bas de page s'affiche d'abord tout en haut puis « saute » quand les
   actualités arrivent (signalé « Affichage qui saute » le 29/09). Règle simple, comprise
   par TOUS les navigateurs (y compris anciens) ; la classe est retirée par js/app.js
   dès que le bloc est rempli, que le message « Aucune… » s'affiche, ou après 12 s. */
.une-reservee {
  height: 86vh; height: 86dvh; min-height: 520px; max-height: 820px; margin-bottom: 3.5rem;
}
.news-une > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 1.2s ease;
}
.news-une:hover > img { transform: scale(1.05); }
.news-une .news-une-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.82) 35%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0) 85%);
}
.news-une .news-une-corps { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.6rem, 5vw, 4rem); max-width: 760px; }
.news-une .news-une-badge {
  display: inline-block; position: static; background: var(--bordeaux); color: #fff;
  font-family: var(--texte); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 0.5rem 1.1rem;
}
.news-une .news-une-corps .news-categorie { color: var(--bordeaux-clair); margin-top: 1rem; }
.news-une .news-une-corps .news-date { margin-top: 0.3rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.news-une .news-une-corps .news-categorie { text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.news-une .news-une-corps h2 {
  color: var(--titre-clair); margin-top: 0.6rem;
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.news-une .news-une-corps p { color: #f3eee9; margin-top: 0.6rem; font-size: 1.02rem; letter-spacing: 0.02em; line-height: 1.6; text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.news-une .news-une-corps .news-lire {
  display: inline-block; margin-top: 1.4rem; color: #fff; border-bottom: 2px solid var(--bordeaux-clair);
  padding-bottom: 0.3rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.3s ease, letter-spacing 0.3s ease;
}
.news-une:hover .news-une-corps .news-lire { border-color: #fff; letter-spacing: 0.18em; }
@media (max-width: 640px) { .news-une { height: 78vh; height: 78dvh; min-height: 460px; } }

/* Aperçu admin (formulaire de rédaction) : rendu compact d'origine, inchangé —
   .redaction-apercu-carte réutilise .news-une-photo/.news-une-corps SANS le
   conteneur .news-une, donc aucune des règles ci-dessus ne s'y applique. */
.news-une-photo {
  position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px;
  background: var(--noir-doux); display: flex; align-items: center; justify-content: center;
}
.news-une-photo img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.7s var(--transition-douce); }
.news-une-badge {
  position: absolute; top: 1rem; left: 1rem; background: var(--bordeaux); color: #fff;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5rem 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; z-index: 3;
}
.news-categorie { display: block; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bordeaux-clair); font-weight: 600; margin-bottom: 0.5rem; }
.news-une-corps .news-date { font-size: 0.72rem; }
.news-une-corps h2 { margin-top: 0.3rem; font-size: clamp(1.8rem, 5vw, 3.4rem); }
.news-une-corps p { margin-top: 1rem; color: var(--texte-corps); }
.news-une-corps .news-lire { margin-top: 1.4rem; font-size: 0.74rem; }

.news-grille { display: grid; grid-template-columns: 1fr; gap: 0; }
.news-carte {
  display: flex; flex-direction: row; align-items: center; text-align: left; gap: 1.3rem; cursor: pointer;
  padding: 1.4rem 0; border-bottom: 1px solid var(--gris-clair); transition: padding-left 0.3s ease;
}
.news-carte:hover { padding-left: 0.5rem; }
.news-img { position: relative; width: 118px; height: 118px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.news-img img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: 1px solid var(--gris-clair); filter: grayscale(55%);
  transition: filter 0.4s ease, transform 0.5s var(--transition-douce), border-color 0.35s ease;
}
.news-carte:hover .news-img img, .news-carte:focus-within .news-img img {
  border-color: var(--bordeaux-clair); filter: grayscale(0%); transform: scale(1.07);
}
.news-carte:hover .news-img, .news-carte:focus-within .news-img { box-shadow: 0 0 0 1px var(--bordeaux-clair), 0 0 28px rgba(207,59,82,0.4); border-radius: 50%; }
.news-corps { padding: 0; flex: 1; min-width: 0; }
.news-date { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bordeaux-clair); font-weight: 500; }
.news-corps h3 { margin-top: 0.4rem; font-size: 1rem; line-height: 1.3; }
.news-corps .news-extrait { margin-top: 0.35rem; font-size: 0.9rem; color: var(--texte-corps); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-lire { display: inline-block; margin-top: 0.6rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bordeaux-clair); font-weight: 500; border-bottom: 1px solid var(--bordeaux-clair); padding-bottom: 2px; }

@media (min-width: 640px) {
  .news-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.4rem; }
  .news-carte { flex-direction: column; text-align: center; border-bottom: none; padding: 1.6rem 0; }
  .news-img { width: 170px; height: 170px; margin: 0 auto; }
  .news-corps .news-extrait { -webkit-line-clamp: 3; }
}
@media (min-width: 960px) {
  .news-grille { grid-template-columns: repeat(3, 1fr); gap: 1rem 2.2rem; }
  .news-img { width: 190px; height: 190px; }
}
@media (max-width: 480px) {
  .news-img { width: 100px; height: 100px; }
  .news-corps h3 { font-size: 0.9rem; }
}

/* ---------- Actualités / Événements : cartes façon magazine — l'image reste
   entière (jamais de recadrage destructif : mannequin en pied, affiche
   verticale...), catégorie/lieu affiché. Scopé via #actus-grille et
   #evenements-grille (ids propres à actualites.html/evenements.html et leurs
   versions en/) pour ne rien changer aux autres pages qui réutilisent
   .news-carte/.news-img (ex. partenaires.html, qui garde son rendu en cercle
   inchangé). ---------- */
#actus-grille .news-carte, #evenements-grille .news-carte {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  padding: 0; border-bottom: none; gap: 0;
}
#actus-grille .news-carte:hover, #evenements-grille .news-carte:hover { padding-left: 0; }
#actus-grille .news-img, #evenements-grille .news-img {
  width: 100%; height: auto; aspect-ratio: 4/5; margin: 0; border-radius: 4px;
  background: var(--noir-doux); display: flex; align-items: center; justify-content: center;
}
#actus-grille .news-img img, #evenements-grille .news-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; border: none; filter: none; }
#actus-grille .news-carte:hover .news-img img, #actus-grille .news-carte:focus-within .news-img img,
#evenements-grille .news-carte:hover .news-img img, #evenements-grille .news-carte:focus-within .news-img img { transform: scale(1.04); border-color: transparent; }
#actus-grille .news-carte:hover .news-img, #actus-grille .news-carte:focus-within .news-img,
#evenements-grille .news-carte:hover .news-img, #evenements-grille .news-carte:focus-within .news-img { box-shadow: none; border-radius: 4px; }
#actus-grille .news-corps, #evenements-grille .news-corps { padding: 0.9rem 0 0; }
#actus-grille.news-grille, #evenements-grille.news-grille { gap: 2.2rem; }
@media (min-width: 640px) { #actus-grille.news-grille, #evenements-grille.news-grille { gap: 2.4rem; } }
@media (min-width: 960px) { #actus-grille.news-grille, #evenements-grille.news-grille { gap: 2.2rem; } }
/* Partenaires (06/10/2026) : logos sur des cartes blanches rectangulaires au lieu de
   cercles — plus sobre, et les logos larges ne sont plus rognés sur les côtés. */
#partenaires-grille .news-img { width: 100%; max-width: 300px; height: auto; aspect-ratio: 3 / 2; border-radius: 4px; margin: 0 auto; }
#partenaires-grille .news-img img { border-radius: 0; border: none; filter: none; }
#partenaires-grille .news-carte:hover .news-img, #partenaires-grille .news-carte:focus-within .news-img { border-radius: 4px; }
@media (max-width: 639px) { #partenaires-grille .news-img { width: 132px; aspect-ratio: 4 / 3; } }

.news-modal {
  position: fixed; inset: 0; z-index: 900; background: rgba(3,2,2,0.94);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.news-modal.active { opacity: 1; visibility: visible; }
.news-modal-contenu { background: var(--creme); color: #1a1512; max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.news-modal-img { width: 100%; max-height: 60vh; object-fit: contain; background: var(--noir); }

@media (max-width: 700px) {
  .news-modal { padding: 0.8rem; }
  .news-modal-img { max-height: 45vh; }
}
.news-modal-corps { padding: 2rem; }
.news-modal-corps .news-date { color: var(--bordeaux); }
.news-modal-corps h2, .news-modal-corps h3 { color: #1a1512; }
/* Même correctif que le formulaire d'édition : un texte collé (Word, sites
   web…) peut porter sa propre couleur figée dans le contenu enregistré, ce
   qui rendait la lecture de l'article/événement pâle et peu lisible pour
   les visiteurs — pas seulement pour l'admin en train d'écrire. */
.news-modal-corps .contenu-riche, .news-modal-corps .contenu-riche :not(a) { color: #1a1512 !important; }
.news-modal-corps .contenu-riche { font-size: 1.05rem; }
.news-modal-corps .form-champ label { color: #6b6560; }
.news-modal-corps .form-champ input, .news-modal-corps .form-champ textarea, .news-modal-corps .form-champ select {
  background: #fff; color: #1a1512; border-color: #d8d2cb;
}
.news-modal-corps .form-champ select option { background: #fff; color: #1a1512; }
.news-modal-fermer { position: absolute; top: 1.2rem; right: 1.4rem; background: rgba(0,0,0,0.6); color: #fff; border: none; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; z-index: 2; }

/* ---------- Lecture d'une actualité/événement (popup) : même traitement que "Mot du
   fondateur" sur l'accueil — fond sombre et grande police, plus confortable pour lire un
   article en entier. Scopé à .news-lecture-sombre pour ne pas toucher la même modale
   réutilisée par Partenaires (qui contient un formulaire d'édition en clair). ---------- */
.news-modal-contenu.news-lecture-sombre { background: var(--anthracite); color: var(--texte-corps); }
.news-lecture-sombre .news-modal-corps .news-date { color: var(--bordeaux-clair); }
.news-lecture-sombre .news-modal-corps h2, .news-lecture-sombre .news-modal-corps h3 { color: var(--titre-clair); }
.news-lecture-sombre .news-modal-corps .contenu-riche,
.news-lecture-sombre .news-modal-corps .contenu-riche :not(a) { color: var(--texte-corps) !important; }
.news-lecture-sombre .news-modal-corps .contenu-riche { font-size: 1.2rem; line-height: 1.8; }
.news-lecture-sombre .news-modal-corps .contenu-riche a { color: var(--bordeaux-clair); }

/* ---------- Verrouillage complet pendant la porte d'entrée ---------- */
body.porte-verrouillee .site-header-v2 { display: none; }
/* Empêche la bande d'annonce de dépasser sous le hero tant que la porte est
   verrouillée (100vh ne correspond pas toujours pile à l'écran visible sur
   mobile selon l'affichage de la barre d'adresse) — solution garantie quel
   que soit l'appareil, plutôt que de dépendre du calcul de hauteur. */
body.porte-verrouillee #marqueeBande { display: none; }

/* ---------- Indicateur vidéo sur les cartes actualités ---------- */
.news-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,0.55);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
  pointer-events: none;
}

/* ---------- Pastille WhatsApp flottante ---------- */
.whatsapp-flottant {
  position: fixed; bottom: 1.4rem; left: 1.4rem; z-index: 200;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(207,59,82,0.5), 0 0 24px rgba(207,59,82,0.45), 0 6px 18px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.whatsapp-flottant:hover { transform: scale(1.08); box-shadow: 0 0 0 1px var(--bordeaux-clair), 0 0 30px rgba(207,59,82,0.6), 0 6px 18px rgba(0,0,0,0.35); }
.whatsapp-flottant svg { width: 28px; height: 28px; }
@media (max-width: 700px) { .whatsapp-flottant { width: 50px; height: 50px; bottom: 1rem; left: 1rem; } }
body.porte-verrouillee .whatsapp-flottant { display: none; }

/* ---------- Galerie multi-photos dans la modale actualité (revue de presse) : même
   grille façon réseau social que "The Book" (.book-grille-ig) — collée, sans espacement,
   chaque photo garde sa hauteur naturelle (jamais de recadrage). ---------- */
.news-modal-galerie { column-count: 2; column-gap: 3px; display: block; }
.news-modal-galerie .gal-item {
  position: relative; display: block; break-inside: avoid; margin-bottom: 3px;
  background: var(--noir-doux); overflow: hidden; aspect-ratio: auto;
}
.news-modal-galerie .gal-item img { width: 100%; height: auto; display: block; }

.news-compteur-photos {
  position: absolute; bottom: 2%; right: 2%;
  background: var(--bordeaux); color: #fff; font-size: 0.7rem; font-weight: 700;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.5);
  pointer-events: none;
}

/* ---------- Badge indiquant la page admin active (visible uniquement une fois connecté en admin) ---------- */
.badge-page-admin {
  display: inline-block; margin-bottom: 0.8rem;
  padding: 0.3rem 0.8rem; background: var(--bordeaux); color: #fff;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}

.news-modal-galerie img, .news-modal-img { cursor: zoom-in; }

/* ---------- Rédaction plein écran (admin actualités) : une vraie page d'écriture
   spacieuse avec aperçu du rendu public en direct, à la place de l'ancien petit
   encart coincé en bas de la page publique (difficile à lire pour rédiger). ---------- */
.redaction-overlay {
  position: fixed; inset: 0; z-index: 950; background: rgba(3,2,2,0.97);
  display: flex; align-items: flex-start; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 2rem 1.2rem;
}
.redaction-overlay.active { opacity: 1; visibility: visible; }
/* max-height + overflow-y sur le panneau UNIQUEMENT (pas sur le calque du
   fond, .redaction-overlay, qui n'en a plus) : deux conteneurs défilants
   imbriqués empêchaient le scroll tactile d'atteindre le bas du formulaire
   sur mobile, la propriétaire ne pouvait jamais atteindre le bouton
   "Enregistrer" (signalé le 28 septembre 2026, persistait après un premier
   correctif incomplet). Même recette que .news-modal-contenu ci-dessous,
   qui elle fonctionne déjà correctement sur mobile. */
.redaction-shell {
  background: var(--creme); color: #1a1512; max-width: 1200px; width: 100%; border-radius: 4px; margin: 0 auto;
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.redaction-entete {
  display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 2rem; border-bottom: 1px solid #d8d2cb;
  position: sticky; top: 0; background: var(--creme); z-index: 1;
}
.redaction-entete h2 { margin: 0; font-size: 1.3rem; color: #1a1512; text-transform: none; }
.redaction-fermer { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #6b6560; padding: 0.4rem 0.6rem; }
.redaction-fermer:hover { color: #1a1512; }
.redaction-corps { display: grid; grid-template-columns: 1fr; }
@media (min-width: 960px) { .redaction-corps { grid-template-columns: 1.2fr 1fr; } }
.redaction-colonne-edition { padding: 2rem; }
@media (min-width: 960px) { .redaction-colonne-edition { border-right: 1px solid #d8d2cb; } }
.redaction-colonne-edition .form-champ label { color: #6b6560; font-size: 0.78rem; }
.redaction-colonne-edition .form-champ input, .redaction-colonne-edition .form-champ select {
  background: #fff; color: #1a1512; border-color: #d8d2cb; font-size: 1.05rem;
}
.redaction-editeur .ql-toolbar.ql-snow { background: #f3efe9; border-color: #d8d2cb; }
.redaction-editeur .ql-container.ql-snow { border-color: #d8d2cb; min-height: 40vh; font-size: 1.15rem; }
.redaction-editeur .ql-editor { background: #fff; color: #1a1512; font-size: 1.15rem; line-height: 1.75; min-height: 40vh; }
/* Le texte pâle et peu lisible signalé venait de styles de couleur collés
   au texte lors d'un copier-coller (Word, sites web…), qui l'emportent
   sinon sur la couleur voulue ici — on force donc la couleur pour TOUT ce
   qui est tapé/collé dans cet éditeur, quelle que soit sa provenance. */
.redaction-editeur .ql-editor, .redaction-editeur .ql-editor * { color: #1a1512 !important; }
.redaction-editeur .ql-snow .ql-stroke { stroke: #6b6560; }
.redaction-editeur .ql-snow .ql-fill { fill: #6b6560; }
.redaction-editeur .ql-snow .ql-picker { color: #6b6560; }
.redaction-images-apercu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.8rem; }
.redaction-images-apercu .ria-item { position: relative; width: 96px; height: 120px; background: var(--noir-doux); border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.redaction-images-apercu .ria-item img { width: 100%; height: 100%; object-fit: contain; }
.redaction-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.redaction-actions .btn { font-size: 0.85rem; padding: 1.1rem 2.2rem; }
.redaction-colonne-apercu { padding: 2rem; background: #f8f5f0; }
.redaction-apercu-etiquette { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #6b6560; margin-bottom: 1rem; }
.redaction-apercu-carte { background: var(--noir); border-radius: 4px; overflow: hidden; }
.redaction-apercu-carte .news-une-photo { aspect-ratio: 4/3; }
.redaction-apercu-carte .news-une-corps { padding: 1.6rem; }
.redaction-apercu-carte .news-une-corps .contenu-riche { color: var(--texte-corps); margin-top: 0.8rem; font-size: 0.88rem; }

/* ---------- Pastille d'installation PWA ---------- */
#pastille-installer {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  z-index: 500; display: flex; align-items: center; gap: 0.6rem;
  background: var(--noir); color: var(--blanc); border: 1px solid var(--gris-clair);
  padding: 0.75rem 1rem; font-family: var(--texte); font-size: 0.82rem; letter-spacing: 0.02em;
  cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,0.5); animation: pastille-apparition 0.4s ease;
  max-width: calc(100vw - 2rem);
}
.pastille-installer-icone { font-size: 1rem; }
.pastille-installer-fermer {
  margin-left: 0.4rem; padding: 0.35rem 0.55rem; opacity: 0.6; font-size: 0.9rem;
}
#pastille-installer.pastille-installer--sortie { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.pastille-installer-fermer:hover { opacity: 1; }
@keyframes pastille-apparition {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.modale-ios-fond {
  position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,0.7);
  display: flex; align-items: flex-end; justify-content: center;
}
.modale-ios-contenu {
  position: relative; background: var(--creme); color: #1a1512; width: 100%; max-width: 420px;
  padding: 1.8rem 1.6rem 2.2rem; border-radius: 14px 14px 0 0; animation: pastille-apparition 0.3s ease;
}
.modale-ios-contenu h3 { margin: 0 0 1rem; font-size: 1.1rem; color: #1a1512; }
.modale-ios-contenu ol { margin: 0; padding-left: 1.2rem; line-height: 1.9; font-size: 0.92rem; }
.modale-ios-fermer {
  position: absolute; top: 0.8rem; right: 1rem; background: none; border: none;
  font-size: 1.1rem; cursor: pointer; color: #6b6560;
}

/* ---------- Mannequin à la une (accueil) — traitement plein écran, façon couverture ---------- */
.vedette-fullbleed {
  display: block; position: relative; width: 100%; height: 86vh; height: 86dvh; min-height: 520px; max-height: 820px;
  overflow: hidden; text-decoration: none; color: var(--blanc);
}
.vedette-fullbleed img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 1.2s ease;
}
.vedette-fullbleed:hover img { transform: scale(1.05); }
.vedette-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.04) 68%, rgba(0,0,0,0) 82%);
}
.vedette-contenu { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.6rem, 5vw, 4rem); max-width: 760px; }
.vedette-badge {
  display: inline-block; background: var(--bordeaux); color: #fff; font-family: var(--texte); font-weight: 600;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.5rem 1.1rem;
  animation: vedette-pulse 2.6s ease-in-out infinite;
}
@keyframes vedette-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(207,59,82,0.55); }
  50% { box-shadow: 0 0 0 12px rgba(207,59,82,0); }
}
.vedette-contenu h2 {
  color: var(--titre-clair); margin-top: 1rem;
  font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
/* 05/10/2026 : un nom très long (ex. 6 prénoms) ne prend plus 4 lignes en très gros. */
.vedette-contenu h2.nom-long { font-size: clamp(2rem, 4.8vw, 3.6rem); }
.vedette-contenu h2.nom-tres-long { font-size: clamp(1.55rem, 3.4vw, 2.6rem); line-height: 1.1; }
.vedette-contenu p { color: var(--texte-corps); margin-top: 0.6rem; font-size: 1.02rem; letter-spacing: 0.04em; }
.vedette-cta {
  display: inline-block; margin-top: 1.8rem; color: #fff; border-bottom: 2px solid var(--bordeaux-clair);
  padding-bottom: 0.3rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.3s ease, letter-spacing 0.3s ease;
}
.vedette-fullbleed:hover .vedette-cta { border-color: #fff; letter-spacing: 0.18em; }
@media (max-width: 640px) {
  .vedette-fullbleed { height: 78vh; height: 78dvh; min-height: 460px; }
}

/* ---------- Mot du fondateur ---------- */
/* Même recette que .vedette-fullbleed ("Mannequin à la une") et .news-une
   (Actualités/Événements) — demande de la propriétaire, 28 septembre 2026 :
   "applique ça aussi à moi" en découvrant le rendu plein écran ailleurs sur
   le site. Photo plein écran avec nom/titre en surimpression (dégradé),
   mais le message complet (souvent long) reste en lecture normale EN
   DESSOUS de la photo plutôt qu'en surimpression, pour rester lisible
   quelle que soit sa longueur. */
.mot-responsable-photo-wrap {
  display: block; position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  height: 86vh; height: 86dvh; min-height: 520px; max-height: 820px;
}
.mot-responsable-photo-wrap img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.mot-responsable-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.04) 68%, rgba(0,0,0,0) 82%);
}
.mot-responsable-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.6rem, 5vw, 4rem); max-width: 760px; }
.mot-responsable-overlay h2 {
  color: var(--titre-clair); margin-top: 0.6rem;
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.mot-resp-titre {
  color: var(--bordeaux-clair); font-family: var(--texte); font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.3rem; text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}
.mot-resp-message {
  color: var(--texte-corps); margin: clamp(2rem, 5vw, 3.5rem) auto 0; max-width: 760px;
  font-size: 1.05rem; line-height: 1.7; font-family: var(--display); font-style: normal;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.mannequin-bio { font-family: var(--display); line-height: 1.7; }
@media (max-width: 720px) {
  .mot-responsable-overlay { text-align: center; left: 0; right: 0; margin: 0 auto; }
}


/* ---------- Bandeau "Ils nous ont fait confiance" ---------- */
.confiance-bande { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 1.4rem 0; }
.confiance-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-doux); }
.confiance-liste { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; align-items: center; }
.confiance-carte {
  display: flex; align-items: center; justify-content: center;
  width: 130px; height: 90px; padding: 0.8rem;
  border: 1px solid var(--gris-clair); background: var(--creme);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.confiance-carte:hover { border-color: var(--bordeaux-clair); transform: translateY(-3px); box-shadow: var(--glow-bordeaux); }
.confiance-carte img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(20%); transition: filter 0.3s ease; }
.confiance-carte:hover img { filter: grayscale(0%); }
@media (max-width: 640px) {
  .confiance-carte { width: 104px; height: 74px; }
}

/* ---------- Vidéo de présentation (fiche mannequin) ---------- */
.video-embed-wrap { position: relative; width: 100%; max-width: 480px; aspect-ratio: 16/9; margin-top: 0.6rem; background: #000; }
.video-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Impression / export PDF (fiche mannequin, ou toute page) ----------
   Masque le chrome du site (menu, footer, book complet) pour ne garder que le
   contenu utile sur une page imprimée ou "Enregistrer en PDF" du navigateur. */
@media print {
  .site-header-v2, .menu-overlay, .site-footer, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  /* Le fond "miroir" des mensurations est pensé pour l'écran ; à l'impression
     (fonds désactivés par défaut dans la plupart des navigateurs), le texte
     clair deviendrait invisible sur une page blanche sans ce filet de sécurité. */
  .mensuration-item { background: #f4f0ea !important; color: #1a1512 !important; }
  .mensuration-item .label { color: #6b6560 !important; }
  .mensuration-item .valeur { color: #7a1220 !important; }
  .mensuration-item .icone-stat { color: #7a1220 !important; }
}

/* Empêche le flash de la porte d'entrée (3 photos) au retour sur l'accueil une fois
   déjà ouverte cette session — la classe est posée avant tout affichage (voir le script
   tout en haut de <body>), donc la section n'apparaît jamais avant d'être masquée. */
html.porte-deja-vue #porte-entree { display: none; }

/* ---------- Classes utilitaires (remplacent les attributs style="" en ligne,
   nécessaires pour retirer 'unsafe-inline' du CSP page par page) ---------- */
.u-pb-1 { padding-bottom: 1rem; }
.u-pt-0 { padding-top: 0; }
.u-pt-1 { padding-top: 1rem; }
.u-pt-3 { padding-top: 3rem; }
.u-mt-0-6 { margin-top: 0.6rem; }
.u-mt-1-5 { margin-top: 1.5rem; }
.u-mt-1-8 { margin-top: 1.8rem; }
.u-mb-1 { margin-bottom: 1rem; }
.u-ml-0-5 { margin-left: 0.5rem; }
.u-ml-0-6 { margin-left: 0.6rem; }
.u-maxw-520 { max-width: 520px; }
.u-maxw-60ch-texte { max-width: 60ch; }
.u-c-texte-doux { color: var(--texte-doux); }
.u-contenu-legal { max-width: 760px; font-size: 0.95rem; line-height: 1.7; }
.u-texte-doux { color: var(--gris); font-size: 0.85rem; }
.u-mt-2 { margin-top: 2rem; }
.u-pl-liste { padding-left: 1.2rem; }
.u-hidden { display: none; }
/* Lu par les lecteurs d'écran, invisible à l'écran (titres de structure, 12/10/2026). */
.u-lecteur-ecran { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.u-tc { text-align: center; }
.u-flex-center { justify-content: center; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-2-5 { margin-top: 2.5rem; }
.u-py-0-5 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.u-py-2-5 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.u-maxw-60ch { text-align: center; max-width: 60ch; margin: 0 auto; }
.u-border-y-gris { border-top: 1px solid var(--gris-clair); border-bottom: 1px solid var(--gris-clair); }
.u-cta-row { margin-top: 1.6rem; text-align: center; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.news-modal-video-lien { display: none; margin-top: 1rem; font-weight: 600; color: var(--rouge); text-decoration: none; }
.news-modal-section-admin { display: none; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--gris-clair); }
.news-modal-video-embed { margin: 0; }
.admin-note-texte { color: var(--texte-doux); font-size: 0.8rem; margin-bottom: 1.5rem; }
.lien-tableau-bord { display: inline-block; margin-left: 0.5rem; color: var(--or); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.u-texte-gris { color: var(--gris); }
.u-grid-pleine-largeur { grid-column: 1 / -1; }
.u-flex-col-centre { display: flex; flex-direction: column; align-items: center; }
.u-pb-0 { padding-bottom: 0; }
.u-mt-1-2 { margin-top: 1.2rem; }
.u-m-1-auto { margin: 1rem auto; }
.u-icone-partage { font-size: 1.1em; }
.u-ic-facebook { color: #1877F2; }
.u-ic-youtube { color: #FF0000; }
.u-ic-whatsapp { color: #25D366; }

/* ---------- Aperçu du CV mannequin (espace-mannequin.html) — reproduit la
   maquette validée avec l'agence : colonne sombre identité/contact + colonne
   claire profil/formation/expérience/compétences, bandeau agence et 5 photos
   du compcard en bas. Couleur/typo réutilisent directement les tokens du
   site (--noir/--creme/--bordeaux sont déjà exactement cette palette). ---------- */
.cv-overlay {
  position: fixed; inset: 0; z-index: 2100; background: rgba(6,5,4,0.92);
  overflow-y: auto; padding: 2.5rem 1.2rem;
}
.cv-overlay-scroll { max-width: 980px; margin: 0 auto; position: relative; }
.cv-fermer {
  position: sticky; top: 0; float: right; margin-bottom: 0.6rem;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gris-clair);
  background: var(--noir); color: var(--titre-clair); font-size: 1.1rem; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cv-fermer:hover { background: var(--bordeaux); border-color: var(--bordeaux); }

.cv-document {
  display: grid; grid-template-columns: minmax(230px, 32%) 1fr;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
}
@media (max-width: 720px) { .cv-document { grid-template-columns: 1fr; } }

.cv-colonne-sombre {
  background: var(--noir); color: var(--texte-corps); padding: 2.4rem 1.6rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem;
}
.cv-logo-agence { margin-bottom: 0.4rem; }
.cv-logo-img { height: 34px; width: auto; }
.cv-photo-portrait {
  width: 100%; max-width: 200px; aspect-ratio: 3/4; border-radius: 4px; overflow: hidden;
  background: var(--noir-doux); border: 1px solid var(--gris-clair);
}
.cv-photo-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-baseline { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris); margin: 0.2rem 0 0; }
.cv-nom { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; color: var(--titre-clair); margin: 0.3rem 0 0; }
.cv-souscategorie { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bordeaux-clair); margin: 0; }
.cv-identite-liste { width: 100%; text-align: left; font-size: 0.8rem; color: var(--texte-corps); border-top: 1px solid var(--gris-clair); padding-top: 0.9rem; margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.55rem; }
.cv-identite-item .cv-identite-label { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.cv-identite-item .cv-identite-valeur { display: block; }
.cv-categorie-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); border-top: 1px solid var(--gris-clair); padding-top: 0.9rem; margin: 0.4rem 0 0; width: 100%; }
.cv-categorie-valeur { font-family: var(--display); font-size: 1.15rem; color: var(--titre-clair); margin: 0.1rem 0 0; }
.cv-citation { font-family: var(--display); font-style: italic; color: var(--texte-doux); font-size: 0.95rem; line-height: 1.4; border-top: 1px solid var(--gris-clair); padding-top: 0.9rem; margin: 0.4rem 0 0; }
.cv-citation:empty { display: none; }
.cv-pied-agence { margin-top: auto; padding-top: 1rem; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }

.cv-colonne-claire {
  background: var(--creme); color: #2a2622; padding: 2.2rem 2rem; position: relative;
}
.cv-entete-doc {
  position: absolute; top: 1.6rem; right: 2rem; font-family: var(--display); font-size: 0.75rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--bordeaux);
}
.cv-section { padding: 0; margin-bottom: 1.6rem; }
.cv-section h3 {
  font-family: var(--texte); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bordeaux); border-bottom: 1px solid rgba(122,18,32,0.25); padding-bottom: 0.4rem; margin: 0 0 0.7rem;
}
.cv-texte-libre { font-size: 0.88rem; line-height: 1.6; margin: 0; }
.cv-grille-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; font-size: 0.85rem; }
.cv-grille-infos div { display: flex; justify-content: space-between; gap: 0.6rem; border-bottom: 1px dotted rgba(0,0,0,0.12); padding-bottom: 0.25rem; }
.cv-grille-infos .cv-info-label { color: #6b6259; }
.cv-grille-infos .cv-info-valeur { font-weight: 600; text-align: right; }
#cv-section-formation.u-hidden { display: none; }

.cv-experience-groupe { margin-bottom: 0.9rem; }
.cv-experience-groupe:last-child { margin-bottom: 0; }
.cv-experience-titre { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bordeaux); margin: 0 0 0.35rem; }
.cv-experience-liste { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; line-height: 1.6; }
.cv-experience-liste li::before { content: '— '; color: var(--bordeaux-clair); }

.cv-section-double { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
@media (max-width: 560px) { .cv-section-double { grid-template-columns: 1fr; } }
.cv-competence-ligne { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: 0.6rem; font-size: 0.78rem; margin-bottom: 0.45rem; }
.cv-competence-barre { height: 6px; background: rgba(0,0,0,0.1); border-radius: 3px; overflow: hidden; }
.cv-competence-remplissage { height: 100%; background: var(--bordeaux); border-radius: 3px; }
.cv-portfolio-ligne { font-size: 0.85rem; margin-bottom: 0.5rem; }
.cv-portfolio-ligne a { color: var(--bordeaux); }

.cv-bandeau-bas {
  background: var(--bordeaux); color: #fff; padding: 1.2rem 1.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cv-photos-bande { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cv-photos-bande img { width: 64px; height: 84px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,0.25); }
.cv-agence-contact { text-align: right; font-size: 0.78rem; line-height: 1.5; }
.cv-agence-contact strong { font-family: var(--display); font-size: 1rem; display: block; margin-bottom: 0.2rem; }
@media (max-width: 560px) { .cv-agence-contact { text-align: left; } .cv-bandeau-bas { justify-content: flex-start; } }

/* ---------- Fiche publique — mise en page « profil » façon Facebook/Instagram
   (demande de la propriétaire, 28 septembre 2026) : photo de profil en médaillon
   à gauche, qui chevauche le bas de la couverture ; mensurations regroupées à sa
   droite en liste aérée ; boutons d'action juste dessous ; le reste en cartes
   (À propos + Contact / Parcours + Vidéo), sur deux colonnes à partir de 900px.
   Les anciennes classes (.profil-avatar-centree, .mensurations, .mq-13…) restent
   utilisées ailleurs ou inoffensives — ne pas les supprimer sans vérifier. ---------- */
.profil-hero--avatar .profil-hero-contenu { padding-bottom: calc(clamp(1.6rem, 5vw, 4rem) + 64px); }
@media (max-width: 600px) { .profil-hero--avatar .profil-hero-contenu { padding-bottom: calc(1.6rem + 44px); } }

.fiche-entete {
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: clamp(1rem, 3vw, 2.4rem);
  position: relative; z-index: 2;
}
.fiche-avatar.profil-avatar {
  width: 176px; height: 176px; margin-top: -88px;
  border: 5px solid var(--noir);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 14px 38px rgba(0,0,0,0.6);
}
.fiche-avatar:focus-visible { outline: 2px solid var(--bordeaux-clair); outline-offset: 3px; }

.fiche-mesures {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2rem); margin: 0; padding-top: 1.1rem;
}
.fiche-mesure { padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); min-width: 0; }
.fiche-mesure dt {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-doux);
  line-height: 1.3;
}
.fiche-mesure dt .icone-stat { width: 13px; height: 13px; flex-shrink: 0; color: var(--bordeaux-clair); display: inline-flex; }
.fiche-mesure dt .icone-stat svg { width: 100%; height: 100%; }
.fiche-mesure dd { margin: 0.2rem 0 0; font-family: var(--display); font-size: 1.12rem; color: var(--titre-clair); line-height: 1.2; }

@media (max-width: 600px) {
  .fiche-avatar.profil-avatar { width: 116px; height: 116px; margin-top: -58px; border-width: 4px; }
  .fiche-mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.9rem; padding-top: 0.5rem; }
  .fiche-mesure { padding: 0.45rem 0; }
  .fiche-mesure dd { font-size: 1.02rem; }
}

.fiche-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.8rem 0 1.6rem; }
.fiche-actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.fiche-telecharger { position: relative; }
.fiche-telecharger-menu {
  position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 20; min-width: 100%;
  display: flex; flex-direction: column; padding: 0.35rem;
  background: #141110; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.fiche-telecharger-menu.u-hidden { display: none; }
.fiche-telecharger-menu button {
  background: transparent; border: 0; border-radius: 7px; cursor: pointer; text-align: left;
  padding: 0.65rem 0.9rem; color: var(--titre-clair); font-family: var(--texte); font-size: 0.82rem; letter-spacing: 0.12em;
}
.fiche-telecharger-menu button:hover, .fiche-telecharger-menu button:focus-visible { background: rgba(213,84,104,0.14); color: #fff; }
.fiche-telecharger-menu button:disabled { opacity: 0.55; cursor: wait; }

.fiche-ico { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; color: var(--bordeaux-clair); }
.fiche-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.fiche-grille { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 900px) { .fiche-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 1.2rem; } }
.fiche-col { display: grid; gap: 1rem; min-width: 0; }
@media (min-width: 900px) { .fiche-col { gap: 1.2rem; } }

.fiche-carte {
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: clamp(1.1rem, 3vw, 1.6rem); min-width: 0;
}
.fiche-carte-titre {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem;
  font-family: var(--texte); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--titre-clair);
}
.fiche-carte-titre > span:not(.fiche-ico) { margin-left: auto; color: var(--texte-doux); letter-spacing: 0.06em; text-transform: none; font-size: 0.78rem; font-weight: 400; }

.fiche-bio { margin: 0 0 1rem; font-size: 1.05rem; color: var(--texte-corps); }
.fiche-infos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.fiche-infos li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; color: var(--texte-corps); }
.fiche-infos:empty { display: none; }
.fiche-types { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.fiche-type {
  padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bordeaux-clair); background: rgba(213,84,104,0.08); border: 1px solid rgba(213,84,104,0.35);
}


.fiche-projets { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; }
.fiche-projets::before { content: ""; position: absolute; left: 3px; top: 0.5rem; bottom: 0.5rem; width: 1px; background: rgba(255,255,255,0.12); }
.fiche-projets-suite { margin-top: 0; }
.fiche-projet { position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0; }
.fiche-projet::before {
  content: ""; position: absolute; left: calc(-1.1rem + 0px); top: 0.95rem; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bordeaux-clair); box-shadow: 0 0 0 3px var(--noir);
}
.fiche-projet-type { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bordeaux-clair); }
/* « Avec MA2M » sur la fiche : résumé chiffré par type (12/10/2026) */
/* projet réalisé avec l'agence (agenda), ajouté automatiquement au parcours (12/10/2026) */
.fiche-projet-titre { font-size: 0.98rem; color: var(--titre-clair); }
.fiche-projet-meta { font-size: 0.8rem; color: var(--texte-doux); }
.fiche-lien-plus {
  margin-top: 0.8rem; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--bordeaux-clair); font-family: var(--texte); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.fiche-lien-plus:hover { color: #fff; }
.fiche-video { max-width: none; border-radius: 10px; overflow: hidden; margin-top: 0; }

/* ---------- Fiche publique, 2e passe (28 septembre 2026) : boutons dans la
   même typographie que « MENU » du bandeau (fin, capitales très espacées) en
   pilule discrète comme « Admin » ; barre d'onglets façon page de profil
   (ancres vers À propos / Parcours / Photos / Contact) ; contact officiel
   déplacé tout en bas, après le Book, en tuiles aérées. ---------- */
.fiche-actions { gap: 0.6rem; margin: 1.6rem 0 1.2rem; }
.fiche-actions .btn, .fiche-actions .btn--principal {
  font-family: var(--texte); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 0.8rem 1.4rem; border-radius: 999px; min-height: 0;
  background: transparent; color: var(--blanc); border: 1px solid var(--gris-clair);
  box-shadow: none; transform: none;
}
.fiche-actions .btn--principal { background: rgba(122,18,32,0.35); border-color: rgba(213,84,104,0.55); }
.fiche-actions .btn:hover, .fiche-actions .btn--principal:hover {
  color: var(--bordeaux-clair); border-color: var(--bordeaux-clair); background: transparent; box-shadow: none; transform: none;
}
.fiche-actions .btn .fiche-ico { width: 14px; height: 14px; color: currentColor; }
.fiche-telecharger-menu button { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; }

.fiche-onglets {
  display: flex; gap: clamp(1.2rem, 4vw, 2.6rem); overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid var(--lignes); border-bottom: 1px solid var(--lignes);
  margin: 0 0 1.4rem; padding: 0 0.2rem;
}
.fiche-onglets::-webkit-scrollbar { display: none; }
.fiche-onglets a {
  flex-shrink: 0; position: relative; padding: 1rem 0;
  font-family: var(--texte); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--texte-doux); text-decoration: none; transition: color 0.2s ease;
}
.fiche-onglets a span { color: var(--bordeaux-clair); letter-spacing: 0.08em; margin-left: 0.2rem; }
.fiche-onglets a::after {
  content: ""; position: absolute; left: 0; right: 0.28em; bottom: -1px; height: 2px;
  background: var(--bordeaux-clair); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--transition-douce);
}
.fiche-onglets a:hover { color: var(--encre); }
.fiche-onglets a:hover::after, .fiche-onglets a:first-child::after { transform: scaleX(1); }
.fiche-onglets a:first-child { color: var(--encre); }
.fiche-ancre { scroll-margin-top: 110px; }
@media (min-width: 900px) { .fiche-grille--une { grid-template-columns: minmax(0, 1fr); } }

.fiche-contact-bas {
  margin: 1rem 0 clamp(2.5rem, 6vw, 4.5rem);
  border: 1px solid var(--lignes); border-radius: 16px;
  background: var(--surface);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.fiche-contact-entete { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.2rem, 3vw, 1.8rem); }
.fiche-contact-entete h3 {
  margin: 0; font-family: var(--texte); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--titre-clair);
}
.fiche-contact-entete p { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--texte-doux); }
.fiche-contact-rond {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(213,84,104,0.4); background: rgba(213,84,104,0.08); color: var(--bordeaux-clair);
}
.fiche-contact-rond svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fiche-contact-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
@media (min-width: 900px) { .fiche-contact-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } }
.fiche-contact-tuile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.9rem; row-gap: 0.15rem; align-items: center;
  padding: 1rem 1.1rem; border-radius: 12px; text-decoration: none; min-width: 0;
  background: var(--surface-douce); border: 1px solid var(--lignes);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.fiche-contact-tuile .fiche-contact-rond { grid-row: 1 / 3; }
.fiche-contact-label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--encre-douce); align-self: end; }
.fiche-contact-valeur { font-size: 0.92rem; color: var(--encre); align-self: start; overflow-wrap: anywhere; }
.fiche-contact-tuile:hover { border-color: var(--rouge-ma2m); background: var(--surface); }
.fiche-contact-tuile:hover .fiche-contact-valeur { color: var(--bordeaux-clair); }
@media (max-width: 480px) {
  .fiche-contact-bas { padding: 1.2rem 0.9rem; }
  .fiche-contact-tuile { padding: 0.85rem 0.8rem; column-gap: 0.75rem; }
  .fiche-contact-tuile .fiche-contact-rond { width: 36px; height: 36px; }
  .fiche-contact-valeur { font-size: 0.84rem; }
}

/* Tableau de bord — détail technique sous chaque erreur (fichier, ligne, adresse
   concernée), pour pouvoir diagnostiquer à partir d'une simple capture d'écran. */
.tdb-erreur-clair { display: block; margin-top: 0.45rem; font-family: var(--texte); font-size: 0.8rem; line-height: 1.5; color: var(--titre-clair); }
.tdb-erreur-detail { display: block; margin-top: 0.35rem; font-family: var(--texte); font-size: 0.74rem; color: var(--texte-doux); word-break: break-all; opacity: 0.85; }

/* Tableau de bord — journal des erreurs réorganisé (29/09/2026) : fiches par gravité
   et par famille, avec « Où / Appareil / Dernier clic / Quand / En clair / Que faire ». */
#erreurs-resume { margin: 0.4rem 0 1rem; }
.journal-resume-gravites { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }
.journal-resume-case { flex: 1 1 140px; padding: 0.6rem 0.8rem; border-radius: 7px; border: 1px solid rgba(255,255,255,.08); border-left-width: 4px; font-size: 0.8rem; color: var(--texte-doux); background: rgba(255,255,255,.025); }
.journal-resume-case b { display: block; font-size: 1.4rem; color: #f3eee9; font-weight: 600; }
.journal-resume-case { font: inherit; font-size: 0.8rem; text-align: left; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; }
.journal-resume-case small { display: block; margin-top: 0.2rem; font-size: 0.74rem; opacity: 0.75; }
.journal-resume-case:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255,255,255,.05); }
.journal-resume-case:disabled { cursor: default; opacity: 0.55; }
.journal-resume-case.journal-corriger { border-left-color: #d64545; }
.journal-resume-case.journal-surveiller { border-left-color: #e0913a; }
.journal-resume-case.journal-info { border-left-color: #4f9d69; }
.journal-resume-case.actif.journal-corriger { background: rgba(214,69,69,.28); box-shadow: 0 0 0 2px #d64545 inset; }
.journal-resume-case.actif.journal-surveiller { background: rgba(224,145,58,.28); box-shadow: 0 0 0 2px #e0913a inset; }
.journal-resume-case.actif.journal-info { background: rgba(79,157,105,.28); box-shadow: 0 0 0 2px #4f9d69 inset; }
.journal-nettoyage { margin: 0 0 0.8rem; font-size: 0.8rem; color: #8fd0a4; }
.journal-nettoyage[hidden] { display: none; }
.journal-filtres { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.journal-filtre { font: inherit; font-size: 0.78rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--texte-doux); cursor: pointer; }
.journal-filtre.actif { background: #7c1730; border-color: #7c1730; color: #fff; }
.journal-btn { font-size: 0.78rem; padding: 0.45rem 0.9rem; margin: 0 0 0.8rem; }
.journal-btn[hidden] { display: none; }
button.btn.journal-copier-tout { display: block; width: 100%; margin: 0.4rem 0 1rem; padding: 0.9rem 1rem; font-size: 0.9rem; font-weight: 600; background: #7c1730 !important; border: 1px solid #c23a5e !important; color: #fff !important; box-shadow: 0 4px 14px rgba(124,23,48,.45); }
button.btn.journal-copier-tout:hover { background: #93203c !important; }
button.btn.journal-copier-tout[hidden] { display: none; } /* plus précis que la règle bordeaux ci-dessus : cache vraiment les boutons quand il n'y a rien à copier */
.journal-carte { margin-bottom: 0.9rem; padding: 1rem 1.1rem 0.6rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.07); border-left: 4px solid rgba(255,255,255,.2); background: rgba(255,255,255,.025); min-width: 0; }
.journal-corriger { border-left-color: #d64545; }
.journal-surveiller { border-left-color: #e0913a; }
.journal-info { border-left-color: #4f9d69; }
.journal-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; font-size: 0.75rem; color: var(--texte-doux); }
.journal-badge { font-weight: 600; color: #f3eee9; }
.journal-nombre { margin-left: auto; }
.journal-titre { margin: 0.5rem 0 0.4rem; font-family: var(--display); font-size: 1.1rem; color: #f3eee9; }
.journal-infos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 0.8rem; margin: 0 0 0.6rem; font-size: 0.82rem; }
.journal-infos dt { color: var(--gris); }
.journal-infos dd { margin: 0; color: #e8e2da; overflow-wrap: anywhere; }
.journal-infos dd small { color: var(--texte-doux); font-size: 0.74rem; }
.journal-clair, .journal-action { margin: 0.35rem 0; font-size: 0.84rem; line-height: 1.5; color: #e8e2da; }
.journal-action { color: #f3eee9; }
.journal-detail { margin: 0.4rem 0; font-size: 0.72rem; color: var(--texte-doux); }
.journal-detail summary { cursor: pointer; }
.journal-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.4rem 0 0; font-size: 0.7rem; }
.journal-boutons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.journal-boutons .journal-btn { margin: 0; }

/* reinitialiser-mot-de-passe.html — formulaire et liens masqués au départ (le JS les
   affiche via element.style). Auparavant un attribut style="display:none", bloqué
   en silence par le CSP de la page (style-src sans 'unsafe-inline') : le formulaire
   apparaissait avant même que le lien de réinitialisation ait été vérifié. */
#rmdp-form, #rmdp-liens { display: none; }

/* Boutons de partage d'une actualité / d'un événement (fiche ouverte) — 29/09/2026 */
.fiche-partage { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0.3rem; }
.fiche-partage-btn { font: inherit; font-size: 0.8rem; letter-spacing: 0.04em; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #f3eee9; cursor: pointer; transition: background .2s, border-color .2s; }
.fiche-partage-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); }
.fiche-partage-btn[data-partage="whatsapp"] { border-color: rgba(37,211,102,.55); }

/* Accueil : « Mannequin à la une » et « Mot de Maître Akesse » arrivent 1-2 s après la
   page ; leur place est réservée (contenu invisible, même hauteur) pour que la suite
   de la page ne « saute » pas (signalé le 29/09). js/accueil.js retire la classe dès
   que le chargement est terminé (bloc affiché, ou masqué s'il n'y a rien à montrer). */
.section-reservee.u-hidden { display: block; }
html.vide-mannequin-vedette #mannequin-vedette.section-reservee.u-hidden,
html.vide-mot-responsable #mot-responsable.section-reservee.u-hidden { display: none; }
.section-reservee > * { visibility: hidden; }

/* Lien « Marketplace » (admins seulement, ajouté par js/menu.js) : dans la barre du
   haut sur ordinateur et tablette ; sur téléphone il n'y a pas la place (le logo
   était écrasé), il est alors proposé en tête du menu plein écran. */
.header-marketplace-lien { border-color: rgba(213,84,104,0.55); color: var(--titre-clair); }
@media (max-width: 700px) { .header-marketplace-lien { display: none; } }
.nav-links .item-marketplace a { color: var(--bordeaux-clair); }

/* Fiche d'un mannequin : tant que la fiche charge (1-2 s), sa place est réservée
   (hauteur d'un écran) pour que le Book et le bas de page n'apparaissent pas tout en
   haut avant d'être repoussés d'un coup (« affichage qui saute » signalé le 29/09 au
   soir, fiche d'Osiris N'Goran). Dès que la fiche s'affiche, le texte « Chargement… »
   disparaît et la réservation avec lui — aucun script à modifier. */
/* 07/10/2026 : réserve d'au moins un écran entier pendant le chargement de la fiche, pour
   que le Book, le contact et le pied de page restent hors de l'écran et ne « sautent » pas
   à l'arrivée du profil (journal : 0,57 et 0,37 sur téléphone). */
#contenu:has(> .fiche-en-chargement) { min-height: calc(100svh + 120px); }

/* ==========================================================================
   Confort de navigation (29/09/2026, validé par la propriétaire) — js/confort.js
   et bandeau cookies (js/analytics-config.js). Mêmes boutons ronds que l'en-tête.
   ========================================================================== */
/* Œil des mots de passe */
.champ-mdp { position: relative; display: block; }
.champ-mdp > input { padding-right: 3.2rem !important; }
.champ-mdp-oeil {
  position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%);
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center; padding: 0;
  background: transparent; border: 0; border-radius: 999px; color: var(--texte-doux); cursor: pointer;
}
.champ-mdp-oeil:hover, .champ-mdp-oeil:focus-visible, .champ-mdp-oeil[aria-pressed="true"] { color: var(--bordeaux-clair); }
.champ-mdp-oeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Retour en haut (coin droit ; le bouton WhatsApp est à gauche) */
.retour-haut {
  position: fixed; right: 1.4rem; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); z-index: 190;
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  background: rgba(6,5,4,0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--gris-clair); border-radius: 999px; color: var(--titre-clair); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, border-color 0.2s ease, color 0.2s ease, bottom 0.3s ease;
}
.retour-haut.visible { opacity: 1; visibility: visible; transform: none; }
.retour-haut:hover, .retour-haut:focus-visible { border-color: var(--bordeaux-clair); color: var(--bordeaux-clair); }
.retour-haut svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.retour-haut--rehausse { bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 700px) { .retour-haut { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; } }
@media print { .retour-haut, .lien-evitement, .bandeau-cookies { display: none !important; } }

/* Aller au contenu : invisible, apparaît seulement au clavier (touche Tab) */
.lien-evitement {
  position: fixed; top: 0.6rem; left: 0.6rem; z-index: 3000; transform: translateY(-160%);
  padding: 0.6rem 1.1rem; border-radius: 999px; background: var(--noir); color: var(--titre-clair);
  border: 1px solid var(--bordeaux-clair); font-family: var(--texte); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: transform 0.2s ease;
}
.lien-evitement:focus { transform: none; outline: none; }
#contenu-principal:focus, main:focus, #contenu:focus { outline: none; }

/* Bandeau cookies */
.bandeau-cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 1500;
  max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 1.4rem;
  padding: 1rem 1.2rem; background: rgba(14,11,10,0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--gris-clair); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.9);
  animation: bandeau-cookies-arrivee 0.5s var(--transition-douce);
}
.bandeau-cookies p { margin: 0; flex: 1 1 320px; max-width: none; font-size: 0.86rem; line-height: 1.55; color: var(--texte-corps); }
.bandeau-cookies a { color: var(--bordeaux-clair); text-decoration: underline; text-underline-offset: 3px; }
.bandeau-cookies-boutons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.bandeau-cookies .btn { padding: 0.6rem 1.3rem; border-radius: 999px; }
@keyframes bandeau-cookies-arrivee { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bandeau-cookies { animation: none; } }

/* Date de dernière mise à jour (pages légales) */
.date-maj { margin-top: 2.4rem; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--texte-doux); }

/* Case d'accord (formulaires d'inscription, contact, sélection — ajout du 30/09) */
.form-champ.form-consentement { display: flex; flex-direction: row; align-items: flex-start; gap: 0.7rem; margin: 0.4rem 0 1.2rem; }
.form-consentement input[type="checkbox"] { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; padding: 0; accent-color: var(--bordeaux-clair); }
.form-consentement label { margin: 0; font-size: 0.85rem; line-height: 1.55; letter-spacing: 0; text-transform: none; color: var(--texte-corps); }
.form-consentement a { color: var(--bordeaux-clair); text-decoration: underline; text-underline-offset: 3px; }
.liste-prestataires { margin: 0.6rem 0 1rem; padding-left: 1.2rem; display: grid; gap: 0.35rem; color: var(--texte-corps); line-height: 1.6; }

/* Liste des Partenaires : place réservée pendant le chargement (signalé « Affichage qui
   saute » le 30/09, score 0,43) — le bas de page reste hors de l'écran tant que la liste
   n'est pas arrivée. Plus de réservation dès qu'elle est remplie ou que le message
   « aucun partenaire » s'affiche. */
#partenaires-grille:empty:not(:has(~ p[style])) { min-height: 100vh; min-height: 100dvh; }

/* Fiche d'un partenaire « à la une » (demande du 30/09) : comme le « Mannequin à la une »
   et les actualités à la une, tout le premier écran est consacré au partenaire — son logo
   en très grand, sur un fond qui reprend ses couleurs (le même logo, agrandi et flouté),
   avec son nom en grand en bas. La présentation se lit en faisant défiler. Plein écran sur
   tous les appareils. Les identifiants servent aux pages FR et EN. Un appui sur le logo
   l'ouvre toujours en plein écran dans la visionneuse. */
#part-modal.news-modal { padding: 0; }
#part-modal .news-modal-contenu {
  max-width: none; width: 100%; height: 100%; max-height: none;
  background: var(--anthracite); color: var(--texte-corps);
}
#part-modal-media {
  position: relative; overflow: hidden; background: var(--noir);
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4.5rem 0 2.5rem; text-align: center;
}
#part-modal-fond {
  position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; max-height: none;
  object-fit: cover; filter: blur(34px) brightness(0.55) saturate(1.2); transform: scale(1.05);
  pointer-events: none;
}
#part-modal-logo {
  position: relative; z-index: 1; display: block;
  width: auto; height: auto; max-width: min(88%, 1100px); max-height: 58vh; max-height: 58dvh;
  object-fit: contain; cursor: zoom-in;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55); animation: part-une-entree 0.9s ease both;
}
@keyframes part-une-entree { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
.part-une-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 16%, rgba(0,0,0,0) 32%);
}
.part-une-legende {
  position: relative; z-index: 2; width: 100%; max-width: 900px;
  padding: clamp(1.4rem, 4vh, 2.6rem) clamp(1.2rem, 5vw, 3rem) 0; color: var(--blanc);
}
.part-une-legende h2 {
  color: var(--titre-clair); margin-top: 0.9rem;
  font-size: clamp(2.3rem, 7vw, 4.6rem); line-height: 1.02; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.part-une-legende p { color: var(--texte-corps); margin-top: 0.5rem; font-size: 1rem; letter-spacing: 0.04em; }
.part-une-legende p:empty { display: none; }
.part-une-suite { background: none; border: none; border-bottom: 2px solid var(--bordeaux-clair); cursor: pointer; font-family: var(--texte); }
/* Le nom et le rôle sont déjà affichés en grand sur le premier écran. */
#part-modal-nom, #part-modal-role { display: none !important; }
#part-modal .news-modal-corps { max-width: 900px; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) clamp(1.3rem, 5vw, 3rem) 4rem; }
#part-modal .news-modal-corps .contenu-riche { font-size: 1.2rem; line-height: 1.8; }
#part-modal-structure { font-size: 1.15rem; margin-top: 0; }
#part-modal-evenement { font-size: 1rem; color: var(--bordeaux-clair); }
/* La croix reste visible même après avoir fait défiler la présentation. */
#part-modal .news-modal-fermer { position: fixed; top: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 1.2rem; z-index: 5; }
@media (max-width: 700px) {
  #part-modal-logo { max-width: 94%; max-height: 54vh; max-height: 54dvh; }
}

/* Ma sélection : état « vide » connu dès le début du chargement (js/selection-etat.js). */
html.selection-vide #bloc-selection { display: none; }
html.selection-vide #liste-vide { display: block; }

/* The Book : place de la grille réservée pendant le chargement (signalé le 30/09 : le bas
   de page sautait sur tablette et ordinateur à l'arrivée des mannequins). */
#grille.medaillon-grille:empty:not(:has(~ p[style])) { min-height: 100vh; min-height: 100dvh; }
/* Même principe dans le Book : le lien de chaque carte prend toute la largeur de sa
   colonne, la photo a donc sa taille définitive avant même d'être chargée (la grille ne
   se tasse plus puis ne s'allonge plus au fil du chargement des photos). */
#grille.medaillon-grille .medaillon-carte > a { width: 100%; }
#part-modal-description, #part-modal-description :not(a) { color: var(--texte-corps) !important; }
#part-modal-description a { color: var(--bordeaux-clair); }

/* Tableau de bord — Messages groupés (js/messages-groupes.js) */
.mg-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; margin-top: 1rem; }
.mg-resume { margin: 0.8rem 0; color: var(--texte-corps); font-size: 0.9rem; }
.mg-liste { max-height: 320px; overflow-y: auto; border: 1px solid var(--gris-clair); margin: 0.6rem 0 1.2rem; }
.mg-liste:empty { display: none; }
.mg-personne { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--gris-clair); cursor: pointer; font-size: 0.88rem; text-transform: none; letter-spacing: 0; }
.mg-personne input { flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--bordeaux-clair); }
.mg-nom { color: var(--titre-clair); min-width: 10rem; }
.mg-infos { color: var(--texte-doux); font-size: 0.8rem; overflow-wrap: anywhere; }
.mg-apercu { display: none; white-space: pre-line; background: rgba(255,255,255,0.04); border-left: 3px solid var(--bordeaux-clair); padding: 0.9rem 1rem; margin: 0 0 1rem; font-size: 0.88rem; color: var(--texte-corps); }
.mg-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.4rem 0 0.8rem; }
.mg-sous-titre { margin-top: 2rem; font-size: 1rem; }
.mg-date, .mg-envoye { display: block; margin-top: 0.15rem; font-size: 0.76rem; }
.mg-date { color: var(--texte-doux); }
.mg-envoye { color: #7fd8a3; }
.mg-personne { flex-wrap: wrap; }
@media (max-width: 600px) {
  .mg-nom { min-width: 0; }
  .mg-infos { flex-basis: 100%; padding-left: 1.65rem; }
}

/* Candidature : aide sous le champ « Vidéo de présentation » (toujours visible) */
.form-champ .ca-video-aide { display: block; }

/* Messages groupés : boutons bloqués bien visibles + consigne qui dit pourquoi */
.mg-actions .btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.mg-consigne { margin: -0.4rem 0 1rem; color: #f0b35a; font-size: 0.88rem; }
.mg-consigne:empty { display: none; }

/* =====================================================================
   Boutons « touche » de tout le site (demande de la propriétaire, 30/09/2026) :
   fond noir, contour discret, comme les pilules « EN » / « Admin » du haut —
   PAS de rouge au repos ni au survol (le rouge fatiguait les yeux). Un relief
   noir sous chaque bouton : à l'appui, le bouton s'enfonce comme une touche de
   clavier et devient rouge, uniquement à ce moment-là.
   ===================================================================== */
:root {
  --touche-n-fond: linear-gradient(180deg, #1d1d1f 0%, #0d0d0e 100%);
  --touche-n-fond-survol: linear-gradient(180deg, #27272a 0%, #121213 100%);
  --touche-n-contour: rgba(255, 255, 255, 0.18);
  --touche-n-contour-survol: rgba(255, 255, 255, 0.34);
  --touche-n-relief: #000;
  --touche-appui-fond: linear-gradient(180deg, #a3243a 0%, #6d1222 100%);
  --touche-appui-contour: rgba(229, 108, 128, 0.9);
}
.btn, .btn--principal, .btn-mini-admin, .filtre-btn, .fiche-partage-btn, .journal-btn,
.lang-switch, .header-marketplace-lien, .mpg-bouton-danger, .mp-panier-btn {
  border-radius: 999px !important;
  border: 1px solid var(--touche-n-contour) !important;
  background: var(--touche-n-fond) !important;
  color: #f4efe9 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 0 var(--touche-n-relief), 0 9px 16px -8px rgba(0, 0, 0, 0.85) !important;
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, border-color 0.15s ease !important;
  -webkit-tap-highlight-color: transparent;
}
.lang-switch, .header-marketplace-lien {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 3px 0 var(--touche-n-relief) !important;
}
@media (hover: hover) {
  .btn:hover, .btn--principal:hover, .btn-mini-admin:hover, .filtre-btn:hover, .fiche-partage-btn:hover,
  .journal-btn:hover, .lang-switch:hover, .header-marketplace-lien:hover, .mpg-bouton-danger:hover, .mp-panier-btn:hover,
  .mp-corps .btn--principal:hover {
    background: var(--touche-n-fond-survol) !important;
    border-color: var(--touche-n-contour-survol) !important;
    color: #fff !important;
    transform: translateY(-1px);
  }
}
/* Élément choisi (filtre actif) : allumé en clair, pas en rouge. */
.filtre-btn.actif {
  background: linear-gradient(180deg, #34343a 0%, #1a1a1d 100%) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
}
/* L'appui : la touche s'enfonce et devient rouge. */
.btn:active, .btn--principal:active, .btn-mini-admin:active, .filtre-btn:active, .fiche-partage-btn:active,
.journal-btn:active, .lang-switch:active, .header-marketplace-lien:active, .mpg-bouton-danger:active, .mp-panier-btn:active,
.touche-appuyee {
  transform: translateY(4px) !important;
  background: var(--touche-appui-fond) !important;
  border-color: var(--touche-appui-contour) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) inset, 0 0 0 var(--touche-n-relief), 0 0 16px rgba(213, 84, 104, 0.4) !important;
  transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.05s ease !important;
}
.btn:disabled, .btn-mini-admin:disabled, .filtre-btn:disabled {
  opacity: 0.42; cursor: not-allowed;
  transform: translateY(4px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset !important;
}
/* Bouton « supprimer » : seul le texte garde une couleur d'alerte. */
.mpg-bouton-danger { color: #e98a98 !important; }

/* =====================================================================
   Grand 2 (G-4, G-5, G-6, G-11) : relief sur le reste du site — cartes,
   formulaires, fenêtres/popups, menu. Mêmes couleurs que le reste du
   site (aucune nouvelle palette) : on ajoute du volume (ombres superposées,
   liseré clair en haut, creux pour les champs), jamais une nouvelle
   matière. Les boutons et l'entête ont déjà ce traitement plus haut.
   ===================================================================== */

/* ---- G-6 : champs de formulaire « en creux », jamais plats ---- */
.form-champ input, .form-champ textarea, .form-champ select {
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
}
.form-champ input:focus, .form-champ textarea:focus, .form-champ select:focus {
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 0 0 3px rgba(207,59,82,0.16);
}

/* ---- G-5 : cartes et blocs de contenu — épaisseur + liseré clair en haut ---- */
.bloc-section {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 0 rgba(0,0,0,0.4),
    0 22px 46px -24px rgba(0,0,0,0.85);
}
.projet-item, .projet-item-public {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 30px -20px rgba(0,0,0,0.85);
  transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}
.projet-item:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 34px -16px rgba(0,0,0,0.9), 0 0 0 1px rgba(207,59,82,0.18);
  transform: translateY(-2px);
  border-color: var(--bordeaux-clair);
}
.apercu-fiche-carte {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 40px -22px rgba(0,0,0,0.7),
    0 0 0 1px rgba(207,59,82,0.08);
}
.evenement-carte {
  box-shadow: 0 16px 34px -26px rgba(0,0,0,0.9);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease, background 0.3s ease;
}
.evenement-carte:hover {
  box-shadow: 0 0 20px -4px rgba(207,59,82,0.3), 0 18px 36px -20px rgba(0,0,0,0.85);
  transform: translateY(-3px);
  background: rgba(255,255,255,0.02);
}
.selection-item { transition: box-shadow 0.25s ease, transform 0.2s ease; position: relative; }
.selection-item:hover { box-shadow: 0 10px 24px -10px rgba(0,0,0,0.4); transform: translateY(-1px); z-index: 1; }

/* ---- G-11 : fenêtres et popups — épaisseur, jamais un simple aplat posé à plat ---- */
.news-modal-contenu {
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 30px 70px -20px rgba(0,0,0,0.75);
}
.flash-succes { box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 20px 60px rgba(0,0,0,0.5); }

/* Boutons de fermeture/navigation ronds (modale, lightbox, menu) : même logique
   de relief que les boutons « touche », à l'échelle d'une icône. */
.news-modal-fermer, .lightbox-global .lightbox-fermer, .lightbox-global .lightbox-fleche, .menu-overlay .close-menu {
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 3px 10px -4px rgba(0,0,0,0.8);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}
.news-modal-fermer:active, .lightbox-global .lightbox-fermer:active, .lightbox-global .lightbox-fleche:active, .menu-overlay .close-menu:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: 0 1px 4px rgba(0,0,0,0.6) inset;
}

/* ---- G-4 : menu plein écran — chaque entrée s'allume en relief au survol/actif ---- */
.menu-overlay { box-shadow: inset 0 0 180px rgba(0,0,0,0.55); }
.menu-overlay .nav-links a { border-radius: 6px; transition: color 0.25s ease, letter-spacing 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; }
.menu-overlay .nav-links a:hover, .menu-overlay .nav-links a.actif {
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* =====================================================================
   Grand 2 (renforcé, 03/10/2026) : le relief ne se voyait pas assez sur
   les pages publiques ordinaires (Services, Accueil, Contact) — la
   propriétaire regardait précisément ces pages. Mêmes couleurs, mais
   ombres beaucoup plus marquées + les lignes/listes deviennent de vrais
   blocs en volume au lieu de simples lignes séparées par un filet.
   ===================================================================== */

/* ---- Services : chaque ligne devient un bloc en relief ---- */
.services-liste { border-top: none; gap: 0.9rem; }
.service-ligne {
  background: var(--noir-doux);
  border-radius: 10px;
  border-bottom: none;
  padding: 1.6rem 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 0 rgba(0,0,0,0.4), 0 20px 40px -26px rgba(0,0,0,0.9);
}
.service-ligne:hover {
  background: var(--noir-doux);
  padding: 1.6rem 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 46px -22px rgba(0,0,0,0.95), 0 0 0 1px rgba(207,59,82,0.22);
  transform: translateY(-3px);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* ---- Chiffres clés et valeurs : mêmes blocs en volume ---- */
.stat-item {
  background: var(--noir-doux); border-left: none; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 36px -24px rgba(0,0,0,0.9);
}
.stat-item:first-child { border-left: none; }
@media (max-width: 640px) { .stat-item { border-top: none; } .stat-item:first-child { border-top: none; } }

.valeur-item {
  background: var(--noir-doux); border-radius: 10px; padding: 1.6rem 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 36px -24px rgba(0,0,0,0.9);
}

/* ---- Contact : chaque bloc de coordonnées en relief ---- */
.contact-bloc {
  background: var(--noir-doux); border-bottom: none; border-radius: 10px;
  padding: 1.5rem 1.6rem; margin-bottom: 1.3rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 36px -24px rgba(0,0,0,0.9);
}

/* ---- Champs de formulaire : creux beaucoup plus marqué qu'avant ---- */
.form-champ input, .form-champ textarea, .form-champ select {
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.75), inset 0 1px 3px rgba(0,0,0,0.9), inset 0 -1px 0 rgba(255,255,255,0.04);
}
.form-champ input:focus, .form-champ textarea:focus, .form-champ select:focus {
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.75), inset 0 1px 3px rgba(0,0,0,0.9), 0 0 0 3px rgba(207,59,82,0.22);
}

/* =====================================================================
   Menu plein écran : chaque entrée devient un vrai bouton, identique au
   reste du site — même police, même taille, même relief (demande de la
   propriétaire, 04/10/2026). Remplace l'ancienne liste de liens texte
   séparés par des filets.
   ===================================================================== */
.menu-overlay .nav-links { display: flex; flex-direction: column; gap: 0.7rem; }
.menu-overlay .nav-links li { border-bottom: none; }

.menu-overlay .nav-links a {
  font-family: var(--texte) !important;
  font-size: 0.95rem !important;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f4efe9;
  display: block;
  padding: 0.95rem 1.6rem;
  border-radius: 999px !important;
  border: 1px solid var(--touche-n-contour) !important;
  background: var(--touche-n-fond) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 4px 0 #000, 0 9px 16px -8px rgba(0,0,0,0.85) !important;
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
@media (hover: hover) {
  .menu-overlay .nav-links a:hover {
    background: var(--touche-n-fond-survol) !important;
    border-color: var(--touche-n-contour-survol) !important;
    color: #fff;
  }
}
.menu-overlay .nav-links a:active {
  transform: translateY(4px) !important;
  background: var(--touche-appui-fond) !important;
  border-color: var(--touche-appui-contour) !important;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7) inset, 0 0 16px rgba(213,84,104,0.4) !important;
}
/* Page actuelle : allumée en clair, même logique que les filtres actifs. */
.menu-overlay .nav-links a.actif {
  background: linear-gradient(180deg, #34343a 0%, #1a1a1d 100%) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: #fff;
}

/* L'entrée "Espace mannequin de l'agence" garde la même taille que les
   autres — avant, sa police était plus petite que le reste du menu. */
.menu-overlay .nav-links .item-cta { margin-top: 0.4rem; }
.menu-overlay .nav-links .item-cta a {
  font-family: var(--texte) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.14em;
  padding: 0.95rem 1.6rem;
  font-weight: 500;
}

/* Fiche dossier (tableau de bord) : message WhatsApp tout prêt — champs du rendez-vous */
.mf-wa .form-champ { margin-bottom: 0.7rem; }
.mf-wa select, .mf-wa input { width: 100%; box-sizing: border-box; }
.mf-wa-rdv { grid-template-columns: 1fr 1fr; gap: 0 0.8rem; }
.mf-wa-rdv .mf-wa-lieu { grid-column: 1 / -1; }

/* Brouillon retrouvé (js/brouillon.js) */
.brouillon-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border: 1px solid var(--gris-clair); border-left: 3px solid var(--bordeaux-clair); background: var(--anthracite); font-size: 0.86rem; line-height: 1.5; color: var(--texte-corps); }
.brouillon-bandeau span { flex: 1 1 16rem; }
.brouillon-bandeau .brouillon-effacer { padding: 0.55rem 1.1rem; font-size: 0.72rem; min-height: 40px; }

/* Couverture animée en haut de toutes les pages publiques (js/couverture-faisceau.js,
   04/10/2026) : format couverture Facebook sur ordinateur (820 × 312), 16:9 sur téléphone. */
.couverture-faisceau { position: relative; width: 100%; aspect-ratio: 820 / 312; max-height: 72vh; background: #050304; overflow: hidden; }
.couverture-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.couverture-secours { position: absolute; left: 50%; top: 50%; width: min(72%, 640px); height: auto; transform: translate(-50%, -50%); }
.couverture-faisceau.anime .couverture-secours { display: none; }
@media (max-width: 700px) { .couverture-faisceau { aspect-ratio: 16 / 9; } }

/* Couverture fixe (demande du 04/10/2026) : la couverture reste en haut de l'écran, la
   barre du menu reste fixée juste en dessous, et tout le reste de la page défile sous
   les deux. Hauteur : format Facebook sur ordinateur, limité à 40 % de l'écran pour
   laisser de la place à la lecture ; 16:9 sur téléphone. */
:root { --couv-h: min(calc(100vw * 312 / 820), 28vh); } /* 05/10 : 40vh → 28vh, plus de place pour lire */
@media (max-width: 700px) { :root { --couv-h: min(calc(100vw * 9 / 16), 26vh); } } /* 05/10 : au plus un quart de l’écran du téléphone */
.couverture-faisceau { position: sticky; top: 0; z-index: 401; aspect-ratio: auto; height: var(--couv-h); max-height: none; }
.site-header-v2.entete-sous-couverture { top: var(--couv-h); }
html:has(#couverture-faisceau) { scroll-padding-top: calc(var(--couv-h) + 90px); }
/* Place libérée pour la lecture (06/10/2026, comparaison avec les grandes agences, accord
   de la propriétaire) : la couverture s'affiche en haut de la page puis s'en va quand on
   descend ; seule la barre du menu reste fixée en haut de l'écran (un seul logo visible).
   Sur ordinateur, elle se replie jusqu'à disparaître (js/couverture-faisceau.js) ; sur
   téléphone, elle défile simplement avec la page. */
.couverture-faisceau { padding: 0; } /* la règle générale des sections (80 px) l'empêchait de se replier à 0 */
@media (max-width: 700px) {
  .couverture-faisceau { position: relative; top: auto; }
  .site-header-v2.entete-sous-couverture { top: 0; }
}
/* 11/10/2026 : la bande du haut est retirée ; la barre du menu (≈ 85 px) reste fixée en haut,
   donc tout défilement vers un champ ou une ancre s'arrête juste dessous, sur toutes les pages. */
html { scroll-padding-top: 95px; }
/* Vidéo de couverture choisie dans le tableau de bord : remplace l'animation en fondu. */
.couverture-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; }
.couverture-faisceau.video-prete .couverture-video { opacity: 1; }
.couverture-faisceau.video-prete .couverture-canvas,
.couverture-faisceau.video-prete .couverture-secours { visibility: hidden; transition: visibility 0s 0.9s; }

/* ==============================================================
   Menu — modèle 2 « Tiroir latéral » (choisi par la propriétaire, 05/10/2026).
   Le menu s'ouvre en tiroir sur la droite de l'écran, le reste de la page est
   assombri derrière. Remplace les règles « boutons » du menu plus haut.
   11/10/2026 : base reprise et transformée en plein écran par css/menu.css
   (modèle A) ; voile et titres de groupes supprimés.
   ===================================================================== */
.menu-overlay {
  inset: 0 0 0 auto;
  width: min(84vw, 420px);
  background: linear-gradient(180deg, #141011, #0b0909);
  border-left: 1px solid rgba(213,84,104,0.35);
  box-shadow: -30px 0 60px rgba(0,0,0,0.6) !important;
  align-items: stretch;
  justify-content: flex-start;
  padding: 5.2rem 22px 1.6rem;
  opacity: 1;
  transform: translateX(105%);
  transition: transform 0.42s cubic-bezier(.22,.8,.24,1), visibility 0.42s;
}
.menu-overlay.active { transform: translateX(0); }

/* logo en haut à gauche du tiroir */
.menu-overlay::before {
  content: "";
  position: absolute; top: 1.55rem; left: 22px;
  width: 140px; height: 30px;
  background: url("../assets/logo-header-clair.png") no-repeat left center / contain;
}
/* bouton de fermeture : un rond avec une croix */
.menu-overlay .close-menu {
  top: 1.2rem; right: 18px;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 0 !important; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
}
.menu-overlay .close-menu::after { content: "✕"; font-size: 0.85rem; color: #f4efe9; }

.menu-overlay .nav-links { display: block; max-width: none; text-align: left; }
.menu-overlay .nav-links li { border: none; margin: 0; transform: translateX(14px); }
.menu-overlay.active .nav-links li { transform: translateX(0); }
.menu-overlay.active .nav-links li:nth-child(n+10) { transition-delay: 0.41s; }
/* Catégories du Book sous « The Book » (06/10/2026, js/menu.js). */
.menu-overlay .nav-links li.menu-sous a { padding: 0.36rem 12px 0.36rem 1.9rem !important; font-size: 0.9rem !important; color: rgba(244,239,233,0.72) !important; }
.menu-overlay .nav-links li.menu-sous a::after { content: ""; }

.menu-overlay .nav-links li a {
  display: flex !important; align-items: center; justify-content: space-between; gap: 1rem;
  position: relative;
  font-family: var(--texte) !important;
  font-size: 1rem !important; font-weight: 400;
  letter-spacing: 0.03em !important; text-transform: none;
  line-height: 1.3;
  color: #f4efe9 !important;
  padding: 0.62rem 12px !important;
  border: none !important; border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.menu-overlay .nav-links li a::after { content: "›"; font-size: 1.15rem; color: rgba(255,255,255,0.35); }
@media (hover: hover) { .menu-overlay .nav-links li a:hover { background: rgba(255,255,255,0.05) !important; } }
.menu-overlay .nav-links li a:active { background: rgba(255,255,255,0.1) !important; }
.menu-overlay .nav-links li a.actif { background: rgba(255,255,255,0.06) !important; }
.menu-overlay .nav-links li a.actif::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px; background: #d55468;
}

/* « Espace mannequin de l'agence » : écrit exactement comme les autres liens du menu
   (demande de la propriétaire, 05/10/2026 — plus de bouton rouge). */
.menu-overlay .nav-links .item-cta { margin-top: 0; border-bottom: none; }
.menu-overlay .nav-links .item-cta a {
  justify-content: space-between;
  padding: 0.62rem 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--texte) !important;
  font-size: 1rem !important; font-weight: 400;
  letter-spacing: 0.03em !important; text-transform: none;
  text-align: left;
  color: #f4efe9 !important;
}
@media (hover: hover) { .menu-overlay .nav-links .item-cta a:hover { background: rgba(255,255,255,0.05) !important; letter-spacing: 0.03em !important; } }
.menu-overlay .nav-links .item-cta a::after { content: "›"; font-size: 1.15rem; color: rgba(255,255,255,0.35); }
.menu-overlay .nav-links .item-cta a.actif { background: rgba(255,255,255,0.06) !important; }
.menu-overlay .nav-links .item-cta a.actif::before { content: ""; }
.menu-overlay .menu-contact { margin-top: 1.4rem; }
.menu-overlay .menu-contact a.menu-tel { font-size: 1rem; }
.menu-overlay .menu-reseaux { margin-top: 0.9rem; gap: 9px; }

@media (max-height: 640px) {
  .menu-overlay { padding-top: 4.6rem; }
  .menu-overlay .nav-links li a { padding: 0.45rem 12px !important; }
}
/* Couverture qui se replie sur ordinateur (04/10/2026, js/couverture-faisceau.js) : grande
   en haut de page (16:9, jusqu'à 85 % de l'écran), elle se réduit en défilant jusqu'au
   bandeau (--couv-h), puis reste fixe avec la barre du menu dessous. Le canvas et la vidéo
   gardent la taille de la grande couverture, centrés : quand elle se replie, seule la bande
   du milieu reste visible (le logo reste entier). .couverture-espace réserve la place. */
:root { --couv-h-max: min(calc(100vw * 9 / 16), 55vh); /* 05/10 : 85vh → 55vh */ --couv-h-anim: var(--couv-h-max); }
.couverture-espace { display: none; }
.couverture-video.remplir { object-fit: cover; }
@media (min-width: 701px) {
  .couverture-faisceau { position: fixed; top: 0; left: 0; right: 0; height: var(--couv-h-anim); }
  .couverture-faisceau .couverture-canvas,
  .couverture-faisceau .couverture-video,
  .couverture-faisceau .couverture-video-fond { inset: auto; left: 0; top: 0; width: 100%; height: var(--couv-h-max); transform: translateY(calc((var(--couv-h-anim) - var(--couv-h-max)) / 2)); }
  .couverture-faisceau .couverture-video-fond { transform: translateY(calc((var(--couv-h-anim) - var(--couv-h-max)) / 2)) scale(1.15); }
  /* Déplacement par « transform » (et non « top ») : même rendu, mais le navigateur ne le
     compte pas comme un saut de la page pendant le défilement (audit du 05/10/2026). */
  .site-header-v2.entete-sous-couverture { position: fixed; top: 0; left: 0; right: 0; transform: translateY(var(--couv-h-anim)); }
  .couverture-espace { display: block; height: calc(var(--couv-h-max) + 85px); }
}
/* Accueil : tant que la porte d'entrée est affichée, ni couverture ni espace réservé. */
body.porte-verrouillee .couverture-faisceau, body.porte-verrouillee .couverture-espace { display: none; }

/* ==============================================================
   Espace vidéo de l'accueil (audit du 05/10/2026, js/video-accueil.js) : un film
   d'un bord à l'autre de l'écran, format cinéma, comme sur les sites des grandes
   agences. Caché (u-hidden) tant qu'aucune vidéo n'est choisie dans le tableau de bord.
   ============================================================== */
.video-accueil { position: relative; width: 100%; overflow: hidden; background: #050304; aspect-ratio: 16 / 9; max-height: 82vh; }
.video-accueil.u-hidden { display: none; }
@media (max-width: 700px) { .video-accueil { aspect-ratio: 4 / 3; max-height: 70vh; } }
/* Vidéo verticale (06/10/2026, retouché à la demande de la propriétaire : « plein écran »).
   - Écran en hauteur (téléphone, tablette tenue droite) : la vidéo remplit toute la largeur
     et la hauteur visible sous la barre du menu.
   - Écran en largeur (ordinateur, tablette couchée) : toute la hauteur visible ; la vidéo
     entière au centre, et les côtés remplis par la même vidéo agrandie et floutée
     (canvas .video-accueil-flou, js/video-accueil.js) — plus de bandes noires. */
.video-accueil.video-verticale { aspect-ratio: auto; max-height: none; height: max(420px, calc(100vh - 90px)); background: #050304; }
.video-accueil.video-verticale video { object-fit: contain; }
.video-accueil-flou { position: absolute; inset: 0; width: 100%; height: 100%; display: none; filter: blur(34px) brightness(0.55) saturate(1.2); transform: scale(1.25); }
.video-accueil.video-verticale.video-prete .video-accueil-flou { display: block; }
/* Écran en hauteur (12/10/2026, demande de la propriétaire : « toute la vidéo en entier ») :
   la vidéo n'est plus rognée en haut et en bas. L'espace prend sa forme (9:16) sans dépasser
   la hauteur visible (svh : barre d'adresse du téléphone comprise) ; si l'écran est moins
   haut, la vidéo reste entière et les côtés sont remplis par le fond flouté. */
@media (orientation: portrait) {
  .video-accueil.video-verticale { aspect-ratio: 9 / 16; width: 100%; height: auto; max-height: calc(100vh - 90px); max-height: calc(100svh - 70px); }
}
.video-accueil video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.video-accueil.video-prete video { opacity: 1; }
.video-accueil-voile { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,5,4,0.55) 0%, rgba(6,5,4,0) 22%, rgba(6,5,4,0) 70%, rgba(6,5,4,0.7) 100%); }
.video-accueil-legende { position: absolute; left: 0; right: 0; top: clamp(1rem, 4vw, 2.4rem); pointer-events: none; }
.video-accueil-son {
  /* centré en bas : les boutons flottants du site (WhatsApp à gauche, retour en haut à
     droite) occupent les coins de l'écran */
  position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(1rem, 4vw, 2.2rem);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.2rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35); background: rgba(6,5,4,0.55); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--texte); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease;
}
.video-accueil-son::before { content: "♪"; font-size: 0.95rem; letter-spacing: 0; }
.video-accueil-son[aria-pressed="true"] { border-color: var(--bordeaux-clair); background: rgba(122,18,32,0.55); }
@media (hover: hover) { .video-accueil-son:hover { border-color: #fff; } }
@media (max-width: 700px) { .video-accueil-son { padding: 0.5rem 0.9rem; font-size: 0.7rem; letter-spacing: 0.12em; } }

/* Page « introuvable » (404.html, audit du 05/10/2026). */
.page-introuvable { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--noir); }
.introuvable { max-width: 560px; padding: 3rem var(--marge); text-align: center; }
.introuvable-logo img { width: min(220px, 60vw); height: auto; margin: 0 auto 2.4rem; display: block; }
.introuvable h1 { color: var(--titre-clair); font-family: var(--display); font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 500; margin: 0.6rem 0 1rem; }
.introuvable-texte { color: var(--texte-corps); line-height: 1.7; }
.introuvable-liens { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin: 2rem 0 1.6rem; }
.introuvable-en { font-size: 0.85rem; color: var(--texte-doux); }
.introuvable-en a { color: var(--bordeaux-clair); }

/* Version anglaise : mesures impériales (pieds/pouces, lbs, pointure US) à côté des mesures
   métriques, pour les recruteurs américains et britanniques (06/10/2026). */
.fiche-imperial { display: block; margin-top: 0.15rem; font-size: 0.78em; color: var(--texte-doux); letter-spacing: 0.02em; }

/* Fiche mannequin : rubrique « Digitals » sous le Book (tri automatique des photos, 06/10/2026). */
.fiche-digitals-titre { margin-top: 2.6rem; }
.fiche-digitals-sous { margin: -0.4rem 0 1.2rem; font-size: 0.95rem; color: var(--gris, #6b625d); }

/* Fiche publique — tableau « Tailles & équivalences internationales » (06/10/2026),
   construit par js/tailles.js. Défile dans son cadre sur téléphone, jamais la page. */
.fiche-equivalences { margin: 1.4rem 0 0.4rem; }
.fiche-tailles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 0.8rem; }
.fiche-tailles > div { padding: 0.7rem 0.8rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: rgba(255,255,255,0.02); min-width: 0; }
.fiche-tailles dt { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bordeaux-clair); }
.fiche-tailles dd { margin: 0.25rem 0 0; font-family: var(--display); font-size: 1.2rem; color: var(--titre-clair); }
.fiche-tailles dd span { font-size: 0.75em; color: var(--texte-doux); }
.fiche-equivalences summary { cursor: pointer; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--titre-clair); padding: 0.4rem 0; }
.fiche-equivalences details[open] summary { margin-bottom: 0.6rem; }
.fiche-equivalences .eq-defilement { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; }
.fiche-equivalences table { width: 100%; border-collapse: collapse; font-size: 0.86rem; white-space: nowrap; }
.fiche-equivalences th, .fiche-equivalences td { padding: 0.55rem 0.7rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.07); }
.fiche-equivalences thead th { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--bordeaux-clair); font-weight: 600; }
.fiche-equivalences tbody th { text-align: left; color: var(--texte-doux); font-weight: 500; }
.fiche-equivalences tbody tr:last-child th, .fiche-equivalences tbody tr:last-child td { border-bottom: 0; }
.fiche-equivalences .eq-lettre { color: var(--titre-clair); font-weight: 600; }
.fiche-equivalences .eq-note { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--texte-doux); }

/* Tableau de bord (11/10/2026) : sur l'écran de connexion, le contenu est court ; le bas de
   page descend tout en bas de l'écran au lieu de s'arrêter au milieu (l'écran paraissait
   coupé en deux). Sans effet quand le contenu est plus haut que l'écran. */
body.zone-admin { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.zone-admin > .site-footer { margin-top: auto; }