/*
Theme Name: Brenot
Description: Thème sur-mesure pour brenot.org, portfolio de Pierre-Laurent Brenot.
Author: Migration depuis Wix
Version: 1.1
Text Domain: brenot
*/

/*
 * Titres : "Nyght Serif Dark Italic" est la police utilisée sur le site Wix
 * d'origine — c'est une police payante (Pangram Pangram Foundry, licence
 * webfont à acheter séparément sur pangrampangram.com). En attendant une
 * éventuelle licence, on utilise Fraunces (libre, licence OFL), une serif
 * display à forte personnalité italique assez proche dans l'esprit,
 * auto-hébergée ici pour éviter toute requête vers un service tiers.
 */
@font-face {
  font-family: 'Fraunces Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-700.woff2') format('woff2');
}

:root {
  --brenot-noir: #14110f;
  --brenot-fond-noir: #000000;
  --brenot-rose: #e2007a;
  --brenot-sauge: #6e776e;
  --brenot-creme: #efece2;
  --brenot-gris: #6b6560;
  --brenot-bordure: #e5e0d8;
  --font-titres: 'Fraunces Display', Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Transition entre les pages : balayage vers la gauche */
.site-transition-content {
  opacity: 0;
  transform: translateX(28px);
}

.site-transition-content.est-entre {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .32s ease, transform .32s ease;
}

.site-transition-content.sort {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .28s ease, transform .28s ease;
}

@media (prefers-reduced-motion: reduce) {
  .site-transition-content,
  .site-transition-content.est-entre,
  .site-transition-content.sort {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

body {
  margin: 0;
  font-family: var(--font-texte);
  color: var(--brenot-noir);
  background: #fff;
  line-height: 1.6;
}

/*
 * Tous les titres (H1 à H6, y compris ceux ajoutés depuis l'éditeur de
 * blocs) partagent la même typo que le H1. Les règles plus spécifiques
 * ci-dessous ne redéfinissent que la taille/marge propres à chaque contexte.
 */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--font-titres);
  font-style: italic;
  font-weight: 600;
}

/* Tailles de base (H2 à H6), chacune +50% par rapport aux tailles par
   défaut du navigateur. Les règles plus spécifiques plus bas (cartes,
   sections...) appliquent le même +50% à leur propre taille contextuelle. */
h2 { font-size: 2.25rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.05rem; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.conteneur {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* En-tête */
.site-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--brenot-bordure);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-titres);
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--brenot-noir);
}

.site-logo .pastille {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.nav-principale {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-principale a {
  text-decoration: none;
  font-size: 0.95rem;
  padding-top: 10px;
}

.nav-principale li { position: relative; }

.nav-principale > li { padding-top: 4px; }

.nav-principale > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--brenot-noir);
}

.nav-principale > li.current-menu-item::before,
.nav-principale > li.current-menu-parent::before {
  height: 3px;
}

.nav-principale > li:hover::before { height: 3px; }

.nav-principale .sub-menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--brenot-bordure);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  display: none;
  min-width: 180px;
  z-index: 10;
}

.nav-principale li:hover .sub-menu { display: block; }
.nav-principale .sub-menu li { display: block; }
.nav-principale .sub-menu a { display: block; padding: 8px 20px; border: none; }
.nav-principale .sub-menu a:hover { background: var(--brenot-creme); }

/* Hero accueil */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,17,15,.75) 0%, rgba(20,17,15,.35) 55%, rgba(20,17,15,.1) 100%);
}

.hero-contenu {
  position: relative;
  padding: 40px 24px;
  max-width: 720px;
}

.hero-contenu h1 {
  font-weight: 700;
  font-size: clamp(3rem, 7.5vw, 5.1rem);
  line-height: 1.15;
  margin: 0;
}

/* Sections */
.section {
  padding: 64px 24px;
}

.section-titre {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 8px;
}

.section-soustitre {
  text-align: center;
  color: var(--brenot-gris);
  margin-bottom: 40px;
}

/* Section sombre (intro "Bienvenue sur le nouveau site") */
.section-sombre {
  background: var(--brenot-fond-noir);
  color: #fff;
  padding: 64px 24px;
  text-align: center;
}

.section-sombre .section-titre,
.section-sombre h2 {
  font-size: 2.7rem;
  margin: 0 0 16px;
}

.section-sombre p {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255,255,255,.85);
}

/* Témoignages (carrousel) */
.temoignages {
  background: var(--brenot-sauge);
  color: #fff;
  padding: 72px 24px;
}

.temoignages-cadre {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.temoignages-slide {
  flex: 1;
  text-align: center;
  min-height: 140px;
}

.temoignages-slide blockquote {
  margin: 0;
  font-family: var(--font-titres);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.5;
}

.temoignages-slide cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.temoignages-nav {
  background: none;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.temoignages-nav:hover { background: rgba(255,255,255,.15); }

.temoignages-points {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.temoignages-points button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 0;
}

.temoignages-points button.actif { background: #fff; }

/* Cartes galeries */
.grille-galeries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.carte-galerie {
  text-decoration: none;
  color: var(--brenot-noir);
  display: block;
}

.carte-galerie .vignette {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--brenot-creme);
  margin-bottom: 16px;
}

.carte-galerie .vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.carte-galerie:hover .vignette img { transform: scale(1.05); }

.carte-galerie h3 {
  font-size: 1.95rem;
  margin: 0 0 4px;
}

.carte-galerie p { margin: 0 0 8px; color: var(--brenot-gris); }

.carte-galerie .lien-action {
  display: inline-block;
  background: var(--brenot-sauge);
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 24px;
  border-radius: 0;
  transition: background .2s ease;
}

.carte-galerie:hover .lien-action { background: var(--brenot-noir); }

/* Cartes Médias / Presse (vignettes carrées) */
.grille-medias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.grille-medias--presse { max-width: 1000px; }

.carte-media {
  text-decoration: none;
  color: var(--brenot-noir);
  text-align: center;
}

.vignette-carree {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--brenot-creme);
  margin-bottom: 16px;
  border-radius: 4px;
}

.vignette-carree img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.carte-media:hover .vignette-carree img { transform: scale(1.05); }

.carte-media h3 {
  font-size: 1.65rem;
  margin: 0 0 4px;
}

.carte-media p { margin: 0; color: var(--brenot-gris); font-size: 0.9rem; }

/* Grille vidéos */
.grille-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.carte-video { margin: 0; }

.video-cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--brenot-creme);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  margin-bottom: 16px;
  overflow: hidden;
}

.video-cadre iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.carte-video h3 {
  font-size: 1.65rem;
  margin: 0 0 4px;
}

.carte-video p { margin: 0; color: var(--brenot-gris); font-size: 0.9rem; }

/* Cartes livres */
.grille-livres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.carte-livre { text-align: center; }

.vignette-livre {
  margin-bottom: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.carte-livre h3 {
  font-size: 1.8rem;
  margin: 0 0 8px;
}

.carte-livre .isbn {
  color: var(--brenot-gris);
  font-size: 0.85rem;
}

/* Page standard */
.entete-page {
  background: var(--brenot-creme);
  padding: 56px 24px 40px;
  text-align: center;
}

.entete-page h1 {
  font-weight: 700;
  font-size: 3.6rem;
  margin: 0;
}

.contenu-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

/* Bandes alternées crème/blanc à l'intérieur d'une page longue (ex: Sa vie) */
.bande-creme,
.bande-blanche {
  padding: 56px 0;
}

.bande-creme { background: var(--brenot-creme); }
.bande-blanche { background: #fff; }

.bande-creme .contenu-page:first-child,
.bande-blanche .contenu-page:first-child {
  padding-top: 0;
}

.bande-creme .contenu-page,
.bande-blanche .contenu-page {
  padding-bottom: 0;
}

/* Bannière "Sa vie" : image pleine largeur avec encart superposé
   (portrait + titre), reprise de la mise en page du site d'origine. */
.savie-hero {
  position: relative;
}

.savie-hero-image {
  height: 640px;
  overflow: hidden;
}

.savie-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.savie-hero-carte {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 980px;
  max-width: 100%;
  height: 416px;
  display: flex;
}

.savie-hero-portrait {
  flex: 1 1 50%;
  background: var(--brenot-creme);
  overflow: hidden;
}

.savie-hero-portrait * {
  float: none !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: block !important;
}

.savie-hero-portrait img {
  object-fit: cover;
}

.savie-hero-texte {
  flex: 1 1 50%;
  background: rgba(255, 255, 255, 0.77);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 56px;
}

.savie-hero-signature {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0 0 8px;
}

.savie-hero-texte h1 {
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.15;
  margin: 0;
}

@media (max-width: 820px) {
  .savie-hero-image {
    height: 360px;
  }

  .savie-hero-carte {
    position: static;
    height: auto;
    flex-direction: column;
  }

  .savie-hero-portrait {
    aspect-ratio: 16 / 9;
  }

  .savie-hero-texte {
    padding: 32px 24px;
  }
}

.bande-creme .contenu-page::after,
.bande-blanche .contenu-page::after {
  content: "";
  display: block;
  clear: both;
}

.flotte-gauche,
.flotte-droite {
  max-width: 320px;
  margin-bottom: 24px;
}

.flotte-gauche img,
.flotte-droite img {
  width: 100%;
}

.flotte-gauche { float: left; margin-right: 32px; }
.flotte-droite { float: right; margin-left: 32px; }

@media (max-width: 680px) {
  .flotte-gauche, .flotte-droite {
    float: none;
    margin: 0 auto 24px;
  }
}

/* Alignements natifs de l'éditeur de blocs (images « aligné à gauche/droite ») */
.contenu-page .alignleft,
.contenu-page .alignright {
  max-width: 320px;
  margin-bottom: 24px;
}

.contenu-page .alignleft { float: left; margin-right: 32px; }
.contenu-page .alignright { float: right; margin-left: 32px; }

.contenu-page .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 680px) {
  .contenu-page .alignleft,
  .contenu-page .alignright {
    float: none;
    margin: 0 auto 24px;
  }
}

/* Vidéos intégrées (bloc « Intégration » / URL YouTube collée dans le texte) */
.contenu-page .wp-embed-responsive .wp-block-embed__wrapper,
.contenu-page .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
}

.contenu-page .wp-embed-responsive .wp-block-embed__wrapper iframe,
.contenu-page .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contenu-page figure.wp-block-embed {
  margin: 0 0 40px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.illustration-page {
  margin: 0 0 32px;
  text-align: center;
}

.illustration-page img {
  display: inline-block;
  max-height: 480px;
  width: auto;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.contenu-page h2 {
  font-family: var(--font-titres);
  font-style: italic;
  font-weight: 600;
  margin-top: 2.2em;
}

.contenu-page blockquote {
  font-family: var(--font-titres);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  text-align: center;
  margin: 40px auto;
  padding: 0 20px;
}

.contenu-page blockquote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.95rem;
  color: var(--brenot-gris);
}

/* Galerie d'oeuvres en mosaïque (tailles variées, comme l'original) */
.page-galerie .contenu-page {
  max-width: 1280px;
}

.page-galerie .wp-block-gallery {
  display: block;
  column-count: 2;
  column-gap: 20px;
}

.page-galerie figure.wp-block-image {
  display: block !important;
  margin: 0 0 20px;
  break-inside: avoid;
  width: 100% !important;
}

.page-galerie figure.wp-block-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  cursor: zoom-in;
}

/* Lightbox */
.brenot-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}

.brenot-lightbox.est-ouvert { display: flex; }

.brenot-lightbox img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.brenot-lightbox-fermer {
  position: absolute;
  top: 20px;
  right: 28px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-texte);
}

.brenot-lightbox-fermer:hover { color: var(--brenot-rose); }

@media (min-width: 680px) {
  .page-galerie .wp-block-gallery { column-count: 3; }
}

@media (min-width: 1000px) {
  .page-galerie .wp-block-gallery { column-count: 4; }
}

/* Formulaire de contact */
.formulaire-contact-fond {
  background: var(--brenot-creme);
  padding: 48px 24px;
}

.formulaire-contact-cadre {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.formulaire-contact-image img {
  width: 100%;
  box-shadow: 0 16px 40px rgba(0,0,0,.15);
}

.formulaire-contact {
  max-width: 460px;
  margin: 0;
}

@media (max-width: 820px) {
  .formulaire-contact-cadre { grid-template-columns: 1fr; }
  .formulaire-contact { max-width: 460px; margin: 0 auto; }
  .formulaire-contact-image { order: -1; max-width: 320px; margin: 0 auto; }
}

.formulaire-contact .champ {
  margin-bottom: 20px;
}

.formulaire-contact label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.formulaire-contact input,
.formulaire-contact textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brenot-bordure);
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
}

.formulaire-contact button {
  background: var(--brenot-noir);
  color: #fff;
  border: none;
  padding: 12px 28px;
  cursor: pointer;
  font-size: 0.95rem;
}

.formulaire-contact button:hover { background: var(--brenot-rose); }

.notice-succes {
  background: #eef8ee;
  border: 1px solid #bfe3bf;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.notice-erreur {
  background: #fdeeee;
  border: 1px solid #e3bfbf;
  padding: 12px 16px;
  margin-bottom: 20px;
}

/* Pied de page */
.site-pied {
  background: var(--brenot-fond-noir);
  padding: 32px 24px;
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: 0.9rem;
}

.site-pied a { color: #fff; text-decoration: none; }
.site-pied a:hover { text-decoration: underline; }

.recherche-entete {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--brenot-bordure);
  border-radius: 999px;
  padding: 6px 14px;
  margin-left: 8px;
}

.recherche-entete input[type="search"] {
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-texte);
  font-size: 0.85rem;
  width: 130px;
}

.recherche-entete button {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--brenot-gris);
  display: flex;
}

.recherche-entete button:hover { color: var(--brenot-noir); }

@media (max-width: 980px) {
  .recherche-entete input[type="search"] { width: 90px; }
}

.bouton-menu-mobile {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.bouton-menu-mobile span:not(.sr-only) {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--brenot-noir);
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

@media (max-width: 782px) {
  .bouton-menu-mobile { display: flex; }

  .nav-principale {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--brenot-bordure);
    padding: 8px 0;
  }

  .nav-principale.est-ouvert { display: flex; }
  .nav-principale li { width: 100%; }
  .nav-principale a { display: block; padding: 12px 24px; border-bottom: none; }
  .nav-principale .sub-menu {
    position: static;
    border: none;
    box-shadow: none;
    display: block;
    padding-left: 16px;
  }
  .nav-principale li:hover .sub-menu { display: block; }

  .site-entete { position: relative; flex-wrap: wrap; }

  .recherche-entete {
    display: none;
    margin: 0 24px 12px;
  }

  .nav-principale.est-ouvert ~ .recherche-entete {
    display: flex;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--brenot-bordure);
    border-radius: 0;
    padding: 12px 24px;
    background: #fff;
  }
}