/*
Theme Name: Marie-Louise Russo-Delattre
Theme URI: https://marielouiserussodelattre.fr
Author: Thierry Russo-Delattre
Description: Theme sur mesure monopage pour Marie-Louise Russo-Delattre, romanciere et poetesse.
Version: 1.0
TextDomain: mlrd
*/

/*
Theme Name: Marie-Louise Russo-Delattre
Theme URI: https://marielouiserussodelattre.fr
Author: Novamira
Description: Theme sur mesure pour le site vitrine de la romanciere et poetesse Marie-Louise Russo-Delattre. Monopage a ancres, camaieu de gris sombres, accent rose poudre. Polices Roboto Slab et Roboto self-hostees.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: mlrd
*/

/* ============================================================
   POLICES SELF-HOSTEES (woff2, latin + latin-ext)
   ============================================================ */
@font-face{font-family:'Roboto';font-style:normal;font-weight:300 700;font-display:swap;src:url('assets/fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300 700;font-display:swap;src:url('assets/fonts/roboto-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/roboto-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/robotoslab-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/robotoslab-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ============================================================
   VARIABLES DE LA CHARTE (camaieu litteraire)
   ============================================================ */
:root{
  --nuit:#141410; --fonce:#1E1E1E; --base:#2C2C2C; --sec:#303030;
  --moyen:#505050; --marge:#6E6E6E;
  --rose:#B09894; --roseL:#C9B4B0; --roseP:#8C726D;
  --lin:#FCFCFC; --linD:#ECECE8;
  --txt:#F0F0F0; --txtD:#CFCBC6; --txtS:#2B2724;
  --filetN:#444442; --filetC:#E4DFDA;
  --titre:'Roboto Slab',Georgia,serif;
  --corps:'Roboto','Helvetica Neue',sans-serif;
  --poeme:'EB Garamond',Georgia,serif;
  --wrap:1200px;
}

/* Reset doux neutralise en :where pour ne pas ecraser les composants */
:where(*){box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--corps);font-weight:400;color:var(--txt);background:var(--nuit);line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--titre);line-height:1.1;font-weight:500;margin:0 0 .5em;}
a{color:var(--rose);text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation:none!important;transition:none!important;}}


/* ============================================================
   NAVIGATION A DEUX ETATS (transparent -> solide au scroll)
   ============================================================ */
.mlrd-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(14px,2.25vw,36px);background:transparent;border-bottom:1px solid transparent;box-shadow:0 1px 14px rgba(0,0,0,0);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;box-sizing:border-box;}
.mlrd-nav.scrolled{background:var(--lin);border-bottom-color:var(--filetC);box-shadow:0 1px 14px rgba(0,0,0,.06);}
.mlrd-nav__brand{display:block;flex:none;position:relative;height:74px;width:auto;}
.mlrd-logo{height:74px;width:auto;max-width:none;display:block;transition:opacity .35s ease;}
.mlrd-logo--clair{position:relative;}
.mlrd-logo--fonce{position:absolute;top:0;left:0;height:74px;opacity:0;}
.mlrd-nav.scrolled .mlrd-logo--clair{opacity:0;}
.mlrd-nav.scrolled .mlrd-logo--fonce{opacity:1;}
.mlrd-nav__links{display:flex;gap:34px;flex-wrap:wrap;align-items:center;font-family:var(--corps);font-size:15px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;}
.mlrd-nav__links a{color:#F0F0F0;cursor:pointer;transition:color .35s ease;}
.mlrd-nav.scrolled .mlrd-nav__links a{color:#4a4540;}
.mlrd-nav__links a:hover{color:var(--rose);}
.mlrd-nav.scrolled .mlrd-nav__links a:hover{color:var(--rose);}
.mlrd-nav__icon{letter-spacing:0;display:flex;align-items:center;}
@media (prefers-reduced-motion:reduce){.mlrd-nav,.mlrd-logo,.mlrd-nav__links a{transition:none;}}


/* Police poemes : EB Garamond (romane classique) */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ebgaramond-400.ttf') format('truetype');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ebgaramond-500.ttf') format('truetype');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/ebgaramond-600.ttf') format('truetype');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/ebgaramond-italic-400.ttf') format('truetype');}


/* ============================================================
   ACCORDEON INTERVIEW (couleurs rose + animation douce)
   ============================================================ */
.mlrd-acc{border-radius:2px;overflow:hidden;}
.mlrd-summary{list-style:none;cursor:pointer;display:flex;align-items:stretch;background:#3f3f3f;transition:background .3s ease;}
.mlrd-summary::-webkit-details-marker{display:none;}
.mlrd-acc[open] .mlrd-summary{background:#4a4a4a;}
.mlrd-plus{background:#b19a94;color:#fff;width:48px;display:flex;align-items:center;justify-content:center;font-size:22px;font-family:var(--corps);font-weight:300;flex:none;transition:background .3s ease;}
.mlrd-acc[open] .mlrd-plus{background:#9a8079;}
.mlrd-q{padding:15px 20px;font-size:15.5px;font-weight:500;color:#b8b4b0;transition:color .25s ease;display:flex;align-items:center;}
.mlrd-summary:hover{background:#4a4a4a;}\n.mlrd-summary:hover .mlrd-q{color:#f4f2ef;}
.mlrd-acc[open] .mlrd-q{color:#f4f2ef;}
/* animation douce d'ouverture : la reponse est animee en JS via max-height */
.mlrd-a{background:#2a2a2a;overflow:hidden;max-height:0;opacity:0;transition:max-height .7s cubic-bezier(.25,.6,.3,1),opacity .55s ease;}
.mlrd-acc[open] .mlrd-a{opacity:1;}
.mlrd-acc{margin-bottom:6px;}


/* ============================================================
   BOUTON RETOUR EN HAUT (carre gris + fleche blanche)
   ============================================================ */
#mlrd-top{position:fixed;right:26px;bottom:26px;width:46px;height:46px;background:#3a3a37;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:200;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease,background .25s ease;}
#mlrd-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
#mlrd-top:hover{background:#B09894;}

/* Boutique : onglets */
.mlrd-tab.is-active{background:var(--rose)!important;color:#fff!important;}
.mlrd-boutique .mlrd-tab:hover:not(.is-active){background:#f3efea!important;}

/* Nav boutique : fond fonce permanent */
.mlrd-nav--boutique{background:var(--nuit)!important;border-bottom-color:#2a2a26!important;box-shadow:0 1px 14px rgba(0,0,0,.25)!important;}
.mlrd-nav--boutique .mlrd-logo--clair{opacity:1!important;}
.mlrd-nav--boutique .mlrd-logo--fonce{opacity:0!important;}
.mlrd-nav--boutique .mlrd-nav__links a{color:var(--txt)!important;}

/* ============================================================
   RESPONSIVE - NAV BURGER
   ============================================================ */
.mlrd-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:transparent;border:0;cursor:pointer;padding:0;z-index:120;}
.mlrd-burger span{display:block;width:26px;height:2px;background:var(--txt);margin:0 auto;transition:transform .3s ease,opacity .3s ease,background .3s ease;}
.mlrd-nav.scrolled .mlrd-burger span,.mlrd-nav--boutique .mlrd-burger span{background:#2b2724;}
.mlrd-nav--boutique .mlrd-burger span{background:var(--txt);}
.mlrd-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mlrd-burger.is-open span:nth-child(2){opacity:0;}
.mlrd-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1200px){
  .mlrd-burger{display:flex;}
  .mlrd-nav__links{position:fixed;top:0;right:0;height:100vh;width:min(80vw,320px);background:var(--nuit);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:100px 32px 40px;transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(0,0,0,.3);overflow-y:auto;}
  .mlrd-nav__links.is-open{transform:translateX(0);}
  .mlrd-nav__links a{color:var(--txt)!important;width:100%;padding:16px 0;border-bottom:1px solid #2a2a26;font-size:16px;}
  .mlrd-nav.scrolled .mlrd-nav__links a{color:var(--txt)!important;}
  body.mlrd-nav-open{overflow:hidden;}
}

/* ============================================================
   RESPONSIVE - SECTIONS (grilles 2 col -> 1 col)
   ============================================================ */
@media (max-width:1200px){
  /* grilles principales en 1 colonne */
  #pourquoi,#roman > div,#projets,#interview > div,#contact [style*="grid-template-columns"]{grid-template-columns:1fr!important;}
  #pourquoi{grid-template-columns:1fr!important;}
  #projets{grid-template-columns:1fr!important;}
  /* images des sections : hauteur auto, ne pas etirer */
  #pourquoi > img,#projets > img{min-height:320px!important;max-height:560px!important;object-fit:cover;object-position:center 22%!important;}
  /* poemes : 2 colonnes -> 1 */
  #poemes [style*="grid-template-columns"],#poemes2 [style*="grid-template-columns"]{grid-template-columns:1fr!important;}
  /* background-attachment fixed casse sur mobile -> scroll */
  #poemes,#poemes2{background-attachment:scroll!important;}
  /* galerie : 3 colonnes -> 2 */
  #galerie [style*="column-count"]{column-count:2!important;}
  /* roman : retirer le padding-left 20% qui pousse trop a droite */
  #roman{padding-left:clamp(24px,5vw,80px)!important;padding-right:clamp(24px,5vw,80px)!important;}
  #roman [style*="text-align:right"]{text-align:center!important;align-items:center!important;}
  #roman [style*="justify-content:flex-end"]{justify-content:center!important;}
}
@media (max-width:520px){
  /* galerie : 2 -> 1 colonne */
  #galerie [style*="column-count"]{column-count:1!important;}
}

/* ============================================================
   RESPONSIVE - HERO
   ============================================================ */
@media (max-width:1200px){
  #accueil{height:auto!important;min-height:100vh!important;background-position:22% center!important;}
  #accueil::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,20,16,.55),rgba(20,20,16,.70));z-index:1;}
  /* bloc texte : pleine largeur, flux vertical ordonne */
  #accueil > div{position:relative!important;width:100%!important;height:auto!important;min-height:100vh!important;text-align:center!important;align-items:center!important;justify-content:center!important;padding:120px 26px 56px!important;z-index:3!important;}
  /* titre agrandi et remonte */
  #accueil > div > img:not(.mlrd-hero-book-mobile){height:clamp(50px,13vw,78px)!important;margin-bottom:14px;}
  #accueil > div > div{justify-content:center!important;}
  /* couverture mobile visible (dans le flux), couverture desktop masquee */
  .mlrd-hero-book-mobile{display:block!important;width:315px!important;height:auto!important;max-height:none!important;}
  .mlrd-hero-book-desktop{display:none!important;}
}


/* ============================================================
   RESPONSIVE - BOUTIQUE & FOOTER
   ============================================================ */
@media (max-width:1200px){
  /* boutique : galerie / infos en 1 colonne */
  .mlrd-boutique [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
  /* footer : 4 colonnes -> 2 */
  footer [style*="grid-template-columns:1.2fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;gap:36px!important;}
}
@media (max-width:520px){
  /* footer : 2 -> 1 colonne */
  footer [style*="grid-template-columns:1.2fr 1fr 1fr"]{grid-template-columns:1fr!important;}
  /* contact : 3 icones -> empilees 1 col deja gere par auto-fit, on reduit le formulaire */
}

@media (max-width:1200px){
  .mlrd-logo,.mlrd-logo--fonce,.mlrd-logo--clair{height:44px!important;}
  .mlrd-nav__brand{height:44px!important;}
  .mlrd-nav{padding-left:16px!important;padding-right:16px!important;height:76px!important;}
}
/* RESPONSIVE - NAV LOGO MOBILE */
@media (max-width:1200px){
  .mlrd-hero-btn{min-width:150px;text-align:center;padding:16px 24px!important;box-sizing:border-box;}
}

/* RESPONSIVE - ROMAN FIX */
@media (max-width:1200px){
  /* le bloc texte du roman : tout centrer */
  #roman > div > div{text-align:center!important;align-items:center!important;}
  /* le livre centre, compense l'ombre portee comme le hero */
  #roman > div > img{margin:0 auto!important;display:block!important;transform:translateX(44px)!important;width:min(92%,440px)!important;height:auto!important;}
  /* boutons : empiles, meme largeur, centres */
  #roman > div > div > div{flex-direction:column!important;align-items:stretch!important;justify-content:center!important;width:100%;max-width:300px;margin-left:auto!important;margin-right:auto!important;}
  #roman > div > div > div > a{width:100%!important;text-align:center!important;box-sizing:border-box;}
}

/* RESPONSIVE - BOUTONS GRAS (mobile) */
@media (max-width:1200px){
  #accueil a[href], #roman a, .mlrd-boutique a[href], #contact a, footer a[href*=boutique]{font-weight:700!important;}
  .mlrd-hero-btn{font-weight:700!important;}
}

/* RESPONSIVE - POEMES OFF (masques sur mobile, comme la version d'origine) */
@media (max-width:1200px){
  #poemes, #poemes2{display:none!important;}
}

/* Burger ouvert : croix blanche (sur panneau sombre) */
.mlrd-burger.is-open span{background:#F0F0F0!important;}

/* RESPONSIVE - INTERVIEW STICKY OFF */
@media (max-width:1200px){
  #interview > div{grid-template-columns:1fr!important;}
  #mlrd-itw-photo{position:static!important;top:auto!important;max-width:480px!important;width:100%;margin:0 auto 32px;display:block;}
}

/* RESPONSIVE - HERO BOUTONS (alignes sur le roman) */
@media (max-width:1200px){
  #accueil > div > div{flex-direction:column!important;align-items:stretch!important;width:100%;max-width:300px;margin-left:auto!important;margin-right:auto!important;gap:14px!important;}
  .mlrd-hero-btn{width:100%!important;min-width:0!important;text-align:center!important;box-sizing:border-box;padding:16px 24px!important;}
}

/* RESPONSIVE - HERO LIVRE DECALAGE */
@media (max-width:1200px){
  .mlrd-hero-book-mobile{transform:translateX(42px)!important;}
}

/* RESPONSIVE - FOOTER BOOK */
@media (max-width:1200px){
  .mlrd-footer-col-cmd{text-align:center!important;}
  .mlrd-footer-cmd{flex-direction:column!important;align-items:center!important;text-align:center!important;}
  .mlrd-footer-book{width:215px!important;transform:translateX(40px);}
  .mlrd-footer-cmd > div{margin-left:0!important;}
}

/* ============================================================
   RESPONSIVE - TABLETTE (700px a 1200px)
   Ajustements pour iPad : logo/burger plus grands, respiration
   ============================================================ */
@media (min-width:700px) and (max-width:1200px){
  /* NAV : logo et burger agrandis + plus de padding lateral */
  .mlrd-logo,.mlrd-logo--fonce,.mlrd-logo--clair{height:58px!important;}
  .mlrd-nav__brand{height:58px!important;}
  .mlrd-nav{height:88px!important;padding-left:clamp(28px,4vw,56px)!important;padding-right:clamp(28px,4vw,56px)!important;}
  .mlrd-burger{width:52px;height:52px;}
  .mlrd-burger span{width:32px;height:2.5px;}
  /* panneau burger un peu plus large */
  .mlrd-nav__links{width:min(60vw,380px)!important;padding-top:120px!important;}
  .mlrd-nav__links a{font-size:18px!important;padding:18px 0!important;}

  /* HERO : contenu plafonne pour ne pas s'etirer, plus de respiration */
  #accueil > div{padding-top:130px!important;padding-bottom:80px!important;max-width:720px;margin:0 auto;}
  #accueil > div > img:not(.mlrd-hero-book-mobile){height:clamp(64px,9vw,96px)!important;}
  #accueil > div > p{font-size:18px!important;max-width:60ch;}
  .mlrd-hero-book-mobile{width:340px!important;height:auto!important;max-height:none!important;}
  #accueil > div > div{max-width:360px!important;}

  /* sections : bloc de contenu plafonne et centre pour ne pas etaler le texte */
  #pourquoi > div,#projets > div{padding:10%!important;box-sizing:border-box!important;}

  /* ROMAN : livre et texte bien centres, respiration */
  #roman{padding-left:clamp(40px,7vw,120px)!important;padding-right:clamp(40px,7vw,120px)!important;}
  #roman > div > img{width:min(60%,340px)!important;transform:translateX(30px)!important;}

  /* GALERIE : 3 colonnes tiennent bien a cette largeur */
  #galerie [style*="column-count"]{column-count:3!important;}

  /* FOOTER : 2 colonnes bien espacees */
  footer [style*="grid-template-columns"]{grid-template-columns:1fr 1fr!important;gap:clamp(40px,5vw,64px)!important;max-width:820px!important;padding:clamp(48px,6vw,72px) clamp(32px,5vw,56px)!important;}

  /* BOUTIQUE : galerie + infos cote a cote possible a cette largeur */
  .mlrd-boutique [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr 1fr!important;}
}


/* RESPONSIVE - FOOTER 2+1 (2 colonnes en haut, newsletter pleine largeur) */
@media (max-width:1200px){
  .mlrd-footer-col-news{grid-column:1 / -1!important;border-top:1px solid #262622;padding-top:clamp(32px,4vw,48px)!important;margin-top:clamp(8px,2vw,20px);text-align:center;}
  .mlrd-footer-col-news h5{font-size:22px!important;}
  .mlrd-footer-col-news > p{font-size:16px!important;}
  /* le champ newsletter pleine largeur */
  .mlrd-footer-col-news input{font-size:15px!important;padding:16px 18px!important;}
  /* les mentions legales centrees sous la newsletter */
  .mlrd-footer-col-news h5:last-of-type{margin-top:28px!important;}
}


/* ============================================================
   FOOTER NEWSLETTER FINAL (regle unique et propre)
   ============================================================ */
@media (max-width:1200px){
  .mlrd-news-field{display:flex!important;flex-direction:row!important;width:100%!important;max-width:560px!important;margin:0 auto 8px auto!important;}
  .mlrd-news-field input{flex:1 1 0%!important;width:auto!important;min-width:0!important;box-sizing:border-box!important;text-align:left!important;}
  .mlrd-news-field > a{flex:0 0 auto!important;white-space:nowrap!important;}
}

/* ============================================================
   RESPONSIVE - BOUTIQUE TABLETTE
   ============================================================ */
@media (max-width:1200px){
  /* nav boutique : rester foncee + burger blanc visible */
  .mlrd-nav--boutique{background:var(--nuit)!important;}
  .mlrd-nav--boutique .mlrd-burger{display:flex!important;}
  .mlrd-nav--boutique .mlrd-burger span{background:var(--txt)!important;}
  .mlrd-nav--boutique .mlrd-logo--clair{opacity:1!important;}
  .mlrd-nav--boutique .mlrd-logo--fonce{opacity:0!important;}
  /* boutique : 1 seule colonne (galerie en haut, vente dessous) */
  .mlrd-boutique [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;gap:clamp(32px,5vw,56px)!important;}
}

/* ROMAN FOND RESTORE (tablette : suggerer Marie-Louise a 29%, voile 70%) */
@media (max-width:1200px){
  #roman{background-position:29% 25%!important;}
  #roman::before{content:"";position:absolute;inset:0;background:rgba(20,20,16,.70);z-index:0;}
  #roman > div{position:relative;z-index:1;}
}

/* POURQUOI PROJETS BLOCK (1 colonne pleine largeur en tablette) */
@media (max-width:1200px){
  #pourquoi,#projets{display:block!important;}
  #pourquoi > img,#projets > img{display:block!important;width:100%!important;}
  #pourquoi > div,#projets > div{display:block!important;width:100%!important;}
}