:root{
  --bg:#ffffff;
  --text:#111318;
  --muted:#68707f;
  --card:#f6f8fb;
  --line:#e6e8ee;
  --yellow:#FFC107;
  --yellow-ink:#111318;
  --radius:14px;
  --shadow:0 6px 24px rgba(17,19,24,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue","Noto Sans",Arial,sans-serif;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a.link{color:#1a66ff}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.pad{padding:48px 0}
.center{text-align:center}
.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:12px;top:12px;background:#000;color:#fff;padding:8px 12px;border-radius:8px}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{font-weight:700;letter-spacing:.5px}
.site-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.site-nav a{display:inline-block;padding:8px 10px;border-radius:10px}
.site-nav a:hover{background:var(--card)}
.nav-toggle{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;display:none}
@media (max-width:780px){
  .nav-toggle{display:block}
  .site-nav{position:absolute;inset:64px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s ease}
  .site-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .site-nav ul{flex-direction:column;padding:12px}
}

.hero{position:relative}
.hero picture, .hero img{width:100%;height:52vh;object-fit:cover;display:block}
.hero-copy{position:relative;margin-top:-64px}
.hero .hero-copy{max-width:1100px;margin-left:auto;margin-right:auto;padding:0 20px}
.hero h1{display:inline-block;background:var(--bg);padding:14px 18px;border-radius:12px;box-shadow:var(--shadow);font-size:clamp(28px,4vw,44px)}
.lead{color:var(--muted);margin:12px 0 10px}
.accent{color:var(--yellow-ink);background:var(--yellow);padding:2px 8px;border-radius:8px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

.btn{display:inline-block;background:var(--yellow);color:var(--yellow-ink);padding:10px 16px;border-radius:12px;border:2px solid var(--yellow);font-weight:700;transition:transform .05s ease, box-shadow .2s ease}
.btn:hover{box-shadow:0 6px 18px rgba(255,193,7,.35)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--text);border-color:var(--line)}
.btn.outline{background:transparent;border:2px solid var(--text);color:var(--text)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.badges{display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.badges li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.quotes{list-style:none;padding:0;margin:0}
.quotes li{padding:6px 0;border-bottom:1px dashed var(--line)}
.ratio-16x9{position:relative;padding-top:56.25%}
.ratio-16x9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px}

.split{display:grid;grid-template-columns:2fr 1fr;gap:24px}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.info .kv{list-style:none;padding:0;margin:0}
.info .kv li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:8px 0}
.info .kv span{color:var(--muted)}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.table thead th{background:#fafbfe;position:sticky;top:0}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.filters label{display:flex;gap:8px;align-items:center}
.link{font-weight:600}

/* Galerie responsive masonry sans espaces */
.gallery {
  column-count: 3;         /* 3 colonnes sur desktop */
  column-gap: 0;           /* colle les photos */
  padding: 0;
  margin: 0;
}

.gallery li {
  list-style: none;
  margin: 0;
  padding: 0;
  break-inside: avoid;     /* évite les coupures d'images */
}

.gallery img {
  width: 100%;
  display: block;
  margin: 0;               /* supprime les blancs */
  border-radius: 0;        /* option : pas d'arrondi pour collage parfait */
  border: none;            /* option : supprime la bordure */
}

/* Adaptation mobile */
@media (max-width: 900px){
  .gallery { column-count: 2; }
}
@media (max-width: 520px){
  .gallery { column-count: 2; }  /* force 2 colonnes */
}
@media (max-width: 360px){
  .gallery { column-count: 1; }  /* en très petit écran */
}


.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:grid;grid-template-areas:"prev body next";grid-template-columns:72px 1fr 72px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.lightbox[aria-hidden="false"]{opacity:1;pointer-events:auto}
.lb-figure{grid-area:body;place-self:center;max-width:min(92vw,1200px)}
.lb-figure img{width:100%;height:auto;border-radius:12px}
.lb-prev,.lb-next,.lb-close{position:absolute;background:#000;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:12px;padding:8px 12px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lb-close{right:16px;top:16px}
.lb-figure figcaption{color:#fff;text-align:center;margin-top:8px}

.hp{display:none !important}
.form-status{margin-top:10px}
.muted{color:var(--muted)}

.site-footer{border-top:1px solid var(--line);padding:18px 0;margin-top:40px;background:#fff}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px}
.site-footer nav a{margin-right:12px}

/* --- Contact modern --- */
.page-hero{
  background: linear-gradient(180deg, rgba(255,193,7,.12), transparent 60%);
  padding: 42px 0 6px;
}
.page-hero h1{ font-size: clamp(28px, 4vw, 44px); margin:0 }
.page-hero .kicker{ color: var(--muted); margin-top: 6px }

.contact-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 26px;
}
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.form-card{
  background: linear-gradient(180deg, #f7f9ff, #f3f6fb);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width:700px){ .form-row{ grid-template-columns: 1fr; } }

.field{ position: relative; margin: 12px 0; }
.field input,
.field textarea{
  width:100%;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px 14px 14px;
  font-size: 16px;
  outline: none;
  transition: border .15s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea{ min-height: 150px; resize: vertical; }
.field label{
  position:absolute; left:12px; top:12px;
  padding: 0 6px;
  color: var(--muted);
  background: #fff;
  transform-origin: left top;
  transition: transform .15s ease, color .15s ease, top .15s ease, background .15s ease;
  pointer-events:none;
}
.field input:focus,
.field textarea:focus{
  border-color: rgba(255,193,7,.9);
  box-shadow: 0 0 0 4px rgba(255,193,7,.18);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  top: -8px;
  transform: scale(.85);
  color: var(--yellow-ink);
  background: #fff;
  border-radius: 6px;
}

.form-actions{
  display:flex; align-items:center; gap:16px; margin: 8px 0 4px;
}
.btn.btn-primary{
  background: linear-gradient(180deg, #FFD54F, #FFC107);
  border-color: #FFC107;
  color: var(--yellow-ink);
}
.btn.btn-primary:hover{ box-shadow: 0 8px 22px rgba(255,193,7,.45); }
.form-status{ min-height: 1em; }
.form-status.ok{ color:#0a7f3f; font-weight:600 }
.form-status.err{ color:#b00020; font-weight:600 }
.small{ font-size: .925rem }

.agent-card{
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  border: 1px solid var(--line);
}
.agent-card h2{ margin-top: 4px }
.agent-name{ font-weight: 700; margin-bottom:6px }
.social-list a{ text-decoration: underline; text-underline-offset: 3px }
.social-list a:hover{ opacity:.85 }

/* === Mobile tweaks === */

/* 1) Accueil : voir toute la bannière sur mobile */
@media (max-width: 700px){
  .hero picture, .hero img{ height:auto; }   /* plus de hauteur fixe */
  .hero img{ object-fit: contain; }          /* on voit toute l’image */
  .hero-copy{ margin-top: 12px; }            /* évite le chevauchement */
}

/* 2) Galerie : 2 colonnes sur téléphone (1 colonne seulement très petit) */
/* Galerie responsive masonry sans espaces */
.gallery {
  column-count: 3;         /* 3 colonnes sur desktop */
  column-gap: 0;           /* colle les photos */
  padding: 0;
  margin: 0;
}

.gallery li {
  list-style: none;
  margin: 0;
  padding: 0;
  break-inside: avoid;     /* évite les coupures d'images */
}

.gallery img {
  width: 100%;
  display: block;
  margin: 0;               /* supprime les blancs */
  border-radius: 0;        /* option : pas d'arrondi pour collage parfait */
  border: none;            /* option : supprime la bordure */
}

/* Adaptation mobile */
@media (max-width: 900px){
  .gallery { column-count: 2; }
}
@media (max-width: 520px){
  .gallery { column-count: 2; }  /* force 2 colonnes */
}
@media (max-width: 360px){
  .gallery { column-count: 1; }  /* en très petit écran */
}


/* 3) Filmographie : cartes lisibles sur mobile */
@media (max-width: 700px){
  #filmography thead{ display:none; }
  .table-wrap{ border:0; }
  #filmography tbody tr{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 12px;
    border-bottom:1px solid var(--line);
    background:#fff;
  }
  #filmography tbody td{
    border:0;
    padding: 4px 0;
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  /* libellé devant chaque valeur (ajouté via JS) */
  #filmography tbody td::before{
    content: attr(data-label);
    color: var(--muted);
    min-width: 96px;
    font-weight:600;
    flex: 0 0 auto;
  }
  /* Titre en tête, sur 2 colonnes, sans libellé */
  #filmography tbody td:nth-child(2){
    grid-column: 1 / -1;
    font-weight: 800;
    font-size: 1.05rem;
  }
  #filmography tbody td:nth-child(2)::before{ content:""; display:none; }
  /* Lien "Voir" à droite */
  #filmography tbody td:last-child{ justify-content:flex-end; }
  /* Catégorie en “pilule” */
  #filmography tbody td:nth-child(5){
    background: rgba(255,193,7,.18);
    border-radius: 999px;
    padding: 4px 10px;
    display: inline-flex;
    align-items:center;
  }
  #filmography tbody td:nth-child(5)::before{
    content:"Catégorie";
    margin-right:8px; color:var(--muted); font-weight:600;
  }
}

/* Filtres filmographie : layout mobile propre */
@media (max-width: 700px){
  .filters{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  .filters .search{ grid-column: 1 / -1; }
  .filters label{ width:100%; }
  .filters select, .filters input[type="search"]{ width:100%; }
}

/* === PATCH MOBILE — Lisibilité + grille === */

/* Filmographie : cartes claires sur mobile */
@media (max-width: 700px){
  #filmography thead{ display:none; }
  .table-wrap{ border:0; }

  /* chaque ligne devient une "carte" */
  #filmography tbody tr{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 12px;
    border-bottom:1px solid var(--line);
    background:#fff;
    border-radius:12px;
  }
  #filmography tbody td{
    border:0;
    padding:4px 0;
    display:flex;
    align-items:baseline;
    gap:8px;
  }

  /* Année tout en haut, discrète */
  #filmography tbody td:nth-child(1){
    grid-column:1 / -1;
    color:var(--muted);
    font-weight:700;
    padding-top:4px;
  }
  #filmography tbody td:nth-child(1)::before{ content:''; display:none; }

  /* Titre en grand, pleine largeur */
  #filmography tbody td:nth-child(2){
    grid-column:1 / -1;
    font-weight:800;
    font-size:1.05rem;
    margin-top:-2px;
  }
  #filmography tbody td:nth-child(2)::before{ content:''; display:none; }

  /* Catégorie compacte (on enlève le label "Catégorie") */
  #filmography tbody td:nth-child(5){
    background:rgba(255,193,7,.18);
    border-radius:999px;
    padding:4px 10px;
    display:inline-flex;
    align-items:center;
  }
  #filmography tbody td:nth-child(5)::before{ content:''; display:none; }

  /* Lien "Voir" aligné à droite et un peu plus affirmé */
  #filmography tbody td:last-child{ justify-content:flex-end; }
  #filmography tbody td:last-child a{ font-weight:700; }
}

/* Galerie : forcer 2 colonnes sur téléphone */
@media (max-width: 520px){
  .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 360px){
  .gallery{ grid-template-columns: 1fr !important; }
}

.ratio-16x9{ position:relative; padding-top:56.25%; } /* 16:9 */
.ratio-16x9 > iframe,
.ratio-16x9 > video{
  position:absolute !important;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:12px;
  display:block;
}

/* Layout de la home : showreel à gauche sur 2 rangées,
   colonne de droite = Rôle puis Récompenses */
.grid--home{
  display: grid;
  grid-template-columns: 1.35fr 1fr;   /* gauche un peu plus large */
  gap: 18px;
  grid-template-areas:
    "showreel role"
    "showreel awards";
}
.grid--home .showreel{ grid-area: showreel; }
.grid--home .role{ grid-area: role; }
.grid--home .awards{ grid-area: awards; }

/* Empile proprement sur mobile */
@media (max-width: 900px){
  .grid--home{
    grid-template-columns: 1fr;
    grid-template-areas:
      "showreel"
      "role"
      "awards";
  }
}

/* Espace fixe avant la valeur */
.info .kv span{ min-width: 140px; display:inline-block; }

/* Infos pro : grille label/valeur avec vrai espace */
.info .kv{ row-gap: 0; }
.info .kv li{
  display: grid;
  grid-template-columns: 150px 1fr; /* largeur fixe du label */
  align-items: start;
  gap: 12px;                        /* espace entre label et valeur */
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.info .kv li:last-child{ border-bottom: none; }
.info .kv span{ color: var(--muted); }
.info .kv b{ justify-self: end; text-align: right; }

/* Sur mobile, on aligne la valeur à gauche pour les textes longs (Langues) */
@media (max-width: 560px){
  .info .kv{ row-gap: 6px; }
  .info .kv li{ grid-template-columns: 120px 1fr; }
  .info .kv b{ justify-self: start; text-align: left; }
}

/* Bloc rôles en jaune */
.roles-highlight {
  background: linear-gradient(135deg, #fff8dc, #ffe066); /* fond dégradé jaune léger */
  border: 2px solid #ffcc00;
}

.roles-highlight h2 {
  color: #ffb400; /* titre en jaune plus fort */
}

.roles-highlight .badges li {
  color: #333; /* texte lisible sur fond clair */
  font-weight: 500;
}