/* Identité visuelle propre au site de Laëtitia — pas la palette cobalt/corail
   du portail u42 (voir CLAUDE.md, "Conventions de design") : reproduit
   l'esthétique éditoriale N&B du site Cargo d'origine. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500&display=swap');

:root{
  --ink:#111; --ink-soft:#6b6b6b; --line:#e7e7e7; --paper:#fff;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;}

.lae-header{padding:28px 32px 12px;max-width:1100px;margin:0 auto;}
.lae-nav{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;}
.lae-home-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--ink);align-self:center;flex-shrink:0;}
.lae-home-btn:hover{opacity:.7;}
.lae-wordmark{font-family:'Fraunces',serif;font-size:22px;letter-spacing:.02em;margin-right:auto;}
.lae-nav-links{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;}
.lae-nav-links a.active{border-bottom:1px solid var(--ink);}
.lae-lang-switch{display:flex;gap:8px;font-size:15px;line-height:1;}
.lae-lang-switch a{opacity:.45;}
.lae-lang-switch a.active{opacity:1;}

.lae-main{padding:24px 32px 60px;max-width:1100px;margin:0 auto;}
.lae-main.narrow{max-width:760px;}
h1{font-family:'Fraunces',serif;font-weight:500;font-size:28px;margin:0 0 20px;}
h2{font-family:'Fraunces',serif;font-weight:500;font-size:18px;letter-spacing:.03em;text-transform:uppercase;margin:52px 0 14px;}
/* Titres "Actualité"/"À venir" de News — même police/taille que le h2
   générique (demande explicite : "même police, pas de trait", 23/09/2026),
   mais avec plus d'espace au-dessus et en dessous pour bien s'en détacher
   ("on les verra mieux comme ça") — contrairement à Photos/Vidéos, les
   entrées de News (photo + texte dense) rendent le titre visuellement
   "collé" au même écart CSS. */
h2.lae-news-heading{margin:80px 0 26px;}
p{margin:0 0 16px;text-align:justify;}
/* Page Bio (.lae-main.narrow) : corps de texte en serif, plus proche de la
   typographie (Georgia) de l'ancien site que l'Inter sans-serif utilisé
   ailleurs sur le site — demande explicite de reproduire la police d'origine.
   **mot** dans le texte de l'admin devient <strong> (voir laetitia_format_text
   dans common.php), hérite naturellement de ce même serif, en gras. */
.lae-main.narrow div{font-family:'Fraunces',serif;font-size:15.5px;line-height:1.75;text-align:justify;}
.lae-main.narrow > div, .lae-more > div{margin-bottom:16px;}
.lae-main.narrow div strong{font-weight:600;}
.lae-more h2{margin-top:36px;}
.lae-lang-block{margin-bottom:28px;}
/* Sélecteur combiné (.lae-gallery.lae-hero-gallery), pas juste .lae-hero-gallery :
   avec deux classes sur le même élément, la spécificité l'emporte toujours sur
   .lae-gallery seul, peu importe l'ordre des règles dans ce fichier — bug réel
   rencontré une première fois (la hauteur d'image ne s'appliquait pas) à cause
   de ça. Mosaïque calculée en JS (voir laetitiaBuildHeroMasonry dans home.php)
   plutôt qu'en colonnes CSS (column-count) — chaque photo garde ses
   proportions réelles au lieu d'être recadrée en carré, comme avant, mais
   sans le vrai défaut des colonnes CSS natives ("column-fill: balance", leur
   comportement par défaut) qui laissait un grand vide visible sous les
   colonnes les plus courtes dès qu'il y avait peu de photos aux proportions
   variées (nombre de colonnes ne se divisant pas proprement) — signalé par
   l'utilisateur avec seulement 4 photos. Le JS répartit chaque photo dans la
   colonne actuellement la plus courte (bin-packing glouton), donnant une
   hauteur de conteneur toujours exacte quel que soit le nombre de photos.
   Largeur limitée : contrairement à la galerie de la page Photos (qui doit
   remplir toute la largeur), la mosaïque d'accueil doit rester compacte,
   comme sur l'ancien site — pas s'étirer sur toute la page. */
.lae-gallery.lae-hero-gallery{
  display:flex;gap:4px;
  max-width:760px;margin:24px auto 32px;
}
.lae-hero-col{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}
.lae-gallery.lae-hero-gallery img{
  width:100%;height:auto;object-fit:unset;display:block;
}

/* Page Photos : petites vignettes + une grande vue en dessous (comme
   l'ancien site) plutôt qu'une simple grille de photos toutes en grand —
   cliquer une vignette change la photo affichée en grand, voir le script
   dans laetitia/inc/pages/photos.php. */
.lae-thumb-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.lae-thumb{width:64px;height:64px;object-fit:cover;cursor:pointer;border:2px solid transparent;border-radius:2px;opacity:.85;}
.lae-thumb:hover{opacity:1;}
.lae-thumb.active{border-color:var(--ink);opacity:1;}
.lae-viewer-large{margin-bottom:36px;background:#f2f2f2;}
.lae-viewer-large img{width:100%;max-height:720px;object-fit:contain;display:block;}
.lae-thumb-grid + h2{margin-top:64px;}

/* Page Vidéos : chaque vidéo les unes sous les autres avec son propre lecteur
   (pas de vignettes/liseuse comme Photos — demande explicite de l'utilisateur,
   une vraie liste plutôt qu'un seul lecteur partagé). */
.lae-video-block{margin-bottom:36px;}
.lae-video-block video{width:100%;max-height:720px;display:block;background:#000;}
.lae-video-label{padding:10px 2px 0;font-size:12.5px;color:var(--ink-soft);}

/* Page Voix : un lecteur audio natif par extrait, même principe que les
   vidéos (chacun son propre lecteur, pas un lecteur partagé). */
.lae-audio-block{margin-bottom:30px;}
.lae-audio-title{font-family:'Fraunces',serif;font-size:16px;font-weight:500;margin-bottom:10px;}
.lae-audio-player{display:flex;align-items:center;gap:12px;}
.lae-audio-play{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.lae-audio-play:hover{opacity:.85;}
.lae-audio-wave{flex:1;min-width:0;cursor:pointer;}
/* Repli quand la vraie forme d'onde ne peut pas être calculée (fichier dont
   le décodage échoue, ex: certains .m4a) — même gabarit visuel (barre grise
   à motif de "bâtonnets", 48px de haut) qu'une vraie forme d'onde, avec un
   remplissage noir qui avance selon la progression réelle de la lecture,
   plutôt que le lecteur natif du navigateur qui a une apparence complètement
   différente des autres extraits. */
.lae-audio-fallback-track{height:48px;position:relative;overflow:hidden;background-image:repeating-linear-gradient(90deg,#d8d8d8 0 2px,transparent 2px 4px);}
.lae-audio-fallback-fill{position:absolute;left:0;top:0;height:100%;width:0%;overflow:hidden;background-image:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px);}
.lae-audio-download{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.lae-audio-download:hover{background:var(--line);text-decoration:none;}
.lae-audio-desc{padding-top:10px;font-size:13.5px;color:var(--ink-soft);}

/* Photos d'habillage dans les marges gauche/droite de la page Voix — demande
   explicite de l'utilisateur, purement décoratif. Positionnées en `position:
   absolute` par rapport à .lae-voice-dressing (qui enveloppe toute la page,
   donc les % de `top` couvrent bien "toute la page" et pas juste le haut) ;
   `left`/`right` calculés à partir du centre pour rester juste à côté de la
   colonne .narrow (760px, donc 380px de chaque côté du centre) sans jamais
   la chevaucher. Masquées en dessous de 1150px : pas la place de les caser
   proprement sans empiéter sur le texte. */
.lae-voice-dressing{position:relative;}
.lae-voice-side-photo{position:absolute;width:180px;aspect-ratio:2/3;object-fit:cover;background:#f2f2f2;display:none;}
.lae-voice-side-left{left:calc(50% - 640px);}
.lae-voice-side-right{right:calc(50% - 640px);}
.lae-voice-side-0{top:2%;}
.lae-voice-side-1{top:42%;}
.lae-voice-side-right.lae-voice-side-0{top:22%;}
.lae-voice-side-right.lae-voice-side-1{top:62%;}
@media (min-width:1150px){
  .lae-voice-side-photo{display:block;}
}

.lae-bio-photo{margin:0 0 28px;}
.lae-main.narrow > .lae-bio-photo:first-child{margin-top:32px;}
.lae-bio-photo img{width:100%;margin-bottom:4px;}
.lae-bio-photo figcaption{font-family:'Fraunces',serif;font-style:italic;font-size:13px;color:var(--ink-soft);margin-top:6px;}

/* "... plus d'infos" : simple titre suivi du texte, toujours visible —
   demande explicite (pas de <details> dépliable au clic, contrairement à un
   essai précédent : le contenu doit être là directement, pas caché). */
.lae-more{margin-top:8px;}
.lae-quote{font-family:'Fraunces',serif;font-style:italic;font-size:17px;line-height:1.7;color:var(--ink-soft);border-left:2px solid var(--line);padding-left:18px;margin:24px 0;}

.lae-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px;margin-bottom:8px;}
.lae-gallery img{width:100%;height:220px;object-fit:cover;background:#f2f2f2;}

/* Articles de presse : chaque photo est un vrai lien (curseur main au survol,
   comportement natif du navigateur) — juste une légère baisse d'opacité en
   plus pour renforcer visuellement que c'est cliquable. Affichées en grand,
   les unes en dessous des autres (pas en grille rognée comme .lae-gallery) —
   demande explicite de l'utilisateur, sélecteur combiné .lae-gallery.lae-press-articles
   pour l'emporter sur .lae-gallery peu importe l'ordre des règles (même piège
   de spécificité CSS déjà rencontré ailleurs sur ce site). */
.lae-gallery.lae-press-articles{display:flex;flex-direction:column;gap:28px;max-width:480px;margin-left:auto;margin-right:auto;}
.lae-gallery.lae-press-articles img{width:100%;height:auto;object-fit:contain;}
.lae-press-articles a{display:block;}
.lae-press-articles a:hover{opacity:.85;}
.lae-press-articles img{transition:opacity .15s ease;}

.lae-pdf-block{margin:0 auto 36px;max-width:733px;}
.lae-pdf-title{font-weight:600;font-size:13.5px;margin-bottom:8px;}
.lae-pdf-reader{position:relative;border:1px solid var(--line);background:#f7f7f7;padding:14px;}
.lae-pdf-reader:fullscreen{display:flex;align-items:center;justify-content:center;background:#111;padding:0;}
.lae-pdf-status{font-size:12.5px;color:var(--ink-soft);text-align:center;padding:30px 0;}
.lae-pdf-book{width:100%;}
.lae-pdf-book img{width:100%;display:block;}
.lae-pdf-fs-btn{position:absolute;right:10px;bottom:10px;border:1px solid var(--line);background:#fff;border-radius:4px;width:30px;height:30px;cursor:pointer;font-size:15px;z-index:2;}
.lae-pdf-pagenum{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:4px;padding:4px 9px;font-size:11.5px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;z-index:2;}
.lae-pdf-download{display:inline-block;margin-top:8px;font-size:12px;color:var(--ink-soft);}
/* Flèches de navigation entre les pages de la liseuse — demande explicite de
   l'utilisateur. Remplace l'ancien effet "page qui se tourne" (StPageFlip,
   abandonné : bug de mise en page non résolu sur les PDF fusionnés) par un
   simple changement d'image, garanti fiable. */
.lae-pdf-nav{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:60px;border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.15);cursor:pointer;font-size:36px;font-weight:700;line-height:1;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--ink);}
.lae-pdf-nav:hover{background:var(--line);}
.lae-pdf-nav:disabled{opacity:.25;cursor:default;}
.lae-pdf-nav.lae-pdf-prev{left:14px;}
.lae-pdf-nav.lae-pdf-next{right:14px;}

/* Colonne des entrées News centrée dans la page, plus étroite que le titre
   "News" au-dessus (lui reste aligné avec Presse/Vidéos) — demande explicite
   de l'utilisateur, le contenu prenait toute la largeur et paraissait trop
   étalé/déséquilibré. */
.lae-news-col{max-width:760px;margin:0 auto;}
.lae-news-entry{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line);}
.lae-news-date{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}
.lae-news-entry h3{font-family:'Fraunces',serif;font-size:17px;font-weight:500;margin:6px 0 8px;}
/* Entrée avec jaquette (affiche/poster) : image à gauche dans un encart fixe,
   texte décalé à droite — demande explicite de l'utilisateur. Sans photo,
   l'entrée garde son affichage pleine largeur habituel (pas de bloc vide). */
.lae-news-entry-with-photo{display:flex;gap:24px;align-items:flex-start;}
.lae-news-photo{flex:0 0 180px;width:180px;}
.lae-news-photo img{width:100%;aspect-ratio:2/3;object-fit:cover;background:#f2f2f2;}
.lae-news-entry-with-photo .lae-news-body{flex:1;min-width:0;}
@media (max-width:600px){
  .lae-news-entry-with-photo{flex-direction:column;}
  .lae-news-photo{flex-basis:auto;width:140px;}
}

/* Pas de white-space:pre-line ici : laetitia_format_text() convertit déjà
   chaque retour à la ligne en <br> — le garder en plus faisait doubler
   chaque saut de ligne (le <br> ET le \n d'origine, toujours présent dans le
   HTML généré par nl2br(), étaient tous les deux rendus), d'où l'espace
   excessif entre CHAQUE ligne au lieu de seulement entre les blocs. */
/* Cartes agences — demande explicite de l'utilisateur : une box par agent,
   titre cliquable (URL saisie dans l'admin) + logo optionnel + bloc de
   texte en dessous (emails/téléphone auto-cliquables via
   laetitia_format_text()). Remplace progressivement le bloc de texte libre
   ci-dessous, gardé pour ne pas perdre le contenu déjà saisi tant qu'il
   n'est pas repris dans une carte. */
.lae-agent-cards{display:flex;flex-direction:column;gap:52px;margin-top:56px;margin-bottom:32px;}
.lae-agent-card{padding:0;}
.lae-agent-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px;}
.lae-agent-title a{text-decoration:underline;}
.lae-agent-logo{height:20px;width:20px;object-fit:contain;flex-shrink:0;}
.lae-agent-body{font-size:13.5px;line-height:1.7;}
/* {logo:Nom} — marqueur encore supporté par laetitia_format_text() (peut être
   tapé dans n'importe quel texte libre du site), même si son UI dédiée dans
   l'admin Contact a été retirée au profit des cartes "Agences" structurées. */
.lae-inline-logo{height:1em;width:1em;object-fit:contain;vertical-align:middle;margin-right:5px;}
.lae-social-links{display:flex;flex-wrap:wrap;gap:20px 24px;font-size:13px;margin-top:72px;}
.lae-social-links a{display:flex;flex-direction:column;align-items:center;gap:6px;}
/* Boîte de taille fixe autour de chaque logo : sans ça, un logo large/plat
   (YouTube) et un logo carré (Instagram) n'occupaient pas la même hauteur
   réelle malgré le même max-height, désalignant les libellés en dessous les
   uns par rapport aux autres. Fond clair en plus : certains logos (ex:
   Spotlight, tracé fin/clair) devenaient presque invisibles sur fond blanc. */
.lae-social-logo-box{
  width:56px;height:40px;border-radius:8px;background:var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
/* Sélecteur combiné (deux classes), pas juste .lae-social-logo-box-dark seul :
   même piège de spécificité/ordre déjà rencontré ailleurs sur ce site —
   avec deux classes sur le même élément, celui-ci l'emporte toujours sur
   .lae-social-logo-box, peu importe l'ordre des règles dans ce fichier. */
.lae-social-logo-box.lae-social-logo-box-dark{background:#161a1f;}
.lae-social-logo{max-height:28px;max-width:44px;object-fit:contain;}

/* Couleurs d'Instagram en dégradé (border-box) autour d'un intérieur blanc
   (padding-box) — pas le vrai logo Instagram (marque déposée, même principe
   que les badges réseaux sociaux de la signature email : jamais reproduire un
   logo de marque protégé), juste une icône appareil photo générique dans un
   badge aux couleurs de la marque, assez reconnaissable sans la copier. */
.lae-insta-card{
  border:2px solid transparent;border-radius:14px;padding:16px;max-width:340px;
  margin:40px auto 24px;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7) border-box;
}
.lae-insta-badge{
  width:30px;height:30px;border-radius:9px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);
}
.lae-insta-card img{border-radius:8px;margin-bottom:10px;}
.lae-insta-card .lae-follow-btn{display:inline-block;margin-top:10px;font-size:13px;border:1px solid var(--ink);padding:7px 14px;border-radius:4px;}
/* Bouton "Suivre sur Instagram" aux couleurs réelles de la marque (même
   dégradé que le badge appareil photo ci-dessus) — demande explicite de
   l'utilisateur, plutôt que le cadre neutre par défaut. */
.lae-follow-btn-instagram{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);border-color:transparent;color:#fff;}

/* Encarts IMDb / Spotlight : utilisent le vrai logo de marque dès qu'il est
   déjà déposé dans la bibliothèque partagée de Post/Annonce (recherché par
   nom, voir home.php) — sinon repli sur une icône générique (étoile / spot
   lumineux) avec la couleur associée à la marque. */
.lae-link-cards{display:flex;flex-wrap:wrap;gap:12px;max-width:340px;margin:0 auto 24px;}
.lae-link-card{
  display:flex;align-items:center;gap:8px;flex:1 1 auto;justify-content:center;
  border-radius:10px;padding:12px 14px;font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;
}
.lae-link-card:hover{text-decoration:none;opacity:.9;}
.lae-link-badge{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:12px;
}
.lae-link-imdb{background:#f5c518;color:#111;}
.lae-link-imdb .lae-link-badge{background:#111;color:#f5c518;}
.lae-link-spotlight{background:#111;color:#fff;}
.lae-link-spotlight .lae-link-badge{background:#fff;}
/* Lien générique (Netflix, Apple TV+...) : pas de couleur de marque associée
   (on ne connaît pas la charte de chaque plateforme), juste un cadre discret
   avec le nom saisi par l'utilisateur. */
.lae-link-generic{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:500;}
/* Vrai logo de marque (Netflix, TF1...) réutilisé depuis la bibliothèque de
   Post/Annonce — fichier déposé par l'utilisateur lui-même, jamais généré
   ici. Pas de fond coloré imposé (chaque logo a déjà ses propres couleurs),
   juste un cadre neutre pour rester cliquable comme les autres liens. */
.lae-link-logo{background:transparent;border:1px solid var(--line);padding:8px 12px;}
.lae-link-logo-img{max-height:22px;max-width:90px;display:block;}
/* Certains logos (ex: Spotlight) ont un texte clair pensé pour un fond
   sombre — illisible sur le cadre clair par défaut ci-dessus. Sélecteur
   combiné (voir la note sur la spécificité CSS ailleurs dans ce fichier),
   appliqué explicitement là où c'est nécessaire plutôt que partout. */
.lae-link-logo.lae-link-logo-dark{background:#161a1f;border-color:#161a1f;}

/* Liens sous une vidéo (page Vidéos) : alignés à gauche avec le lecteur,
   pas centrés/limités en largeur comme les encarts de la page d'accueil. */
.lae-video-links{max-width:none;margin:12px 0 0;justify-content:flex-start;}
.lae-video-links .lae-link-card{flex:0 1 auto;padding:8px 12px;font-size:12.5px;}

/* Liens diffuseur sous une entrée News — même traitement que sous une vidéo. */
.lae-news-links{max-width:none;margin:12px 0 0;justify-content:flex-start;}
.lae-news-links .lae-link-card{flex:0 1 auto;padding:8px 12px;font-size:12.5px;}

.lae-filmstrip{display:flex;flex-wrap:wrap;gap:6px 16px;padding:20px 32px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft);max-width:1100px;margin:0 auto;box-sizing:border-box;}
.lae-footer{padding:16px 32px 40px;font-size:12px;color:var(--ink-soft);max-width:1100px;margin:0 auto;box-sizing:border-box;}

/* Page cachée "Photos" (lien direct, sans mot de passe) — grille simple,
   un bouton "Télécharger" par photo + un bouton global en haut. Volontairement
   sobre (pas de légende, pas de mise en page éditoriale) : ce n'est pas une
   page vitrine, juste un point de dépôt/retrait de fichiers. */
.lae-gallery-empty{color:var(--ink-soft);}
.lae-gallery-dlall-row{display:flex;justify-content:center;margin:28px 0 36px;}
.lae-gallery-dlall{
  border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:2px;
  padding:11px 18px;font-family:'Inter',sans-serif;font-size:13.5px;cursor:pointer;
}
.lae-gallery-dlall:hover{opacity:.85;}
.lae-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;}
.lae-gallery-tile{border:1px solid var(--line);}
.lae-gallery-tile img{width:100%;aspect-ratio:1;object-fit:cover;}
.lae-gallery-dl{
  display:block;text-align:center;padding:9px;font-size:12.5px;border-top:1px solid var(--line);
  font-family:'Inter',sans-serif;
}
.lae-gallery-dl:hover{background:var(--line);text-decoration:none;}

@media (max-width:600px){
  .lae-header,.lae-main,.lae-filmstrip,.lae-footer{padding-left:18px;padding-right:18px;}
  .lae-nav-links{gap:14px;}
  .lae-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
}