/*
Theme Name: Héritage
Theme URI: https://example.com/heritage
Author: Votre Maison
Author URI: https://example.com
Description: Thème WordPress raffiné pour une maison, une lignée ou une institution. Page d'introduction plein écran (photo floutée + logo centré, responsive), bouton d'accès discret, et rubriques éditoriales (Communiqué, La Maison, Histoire, Titres et Ordres, De nos jours) gérées via des "Articles" enregistrés en base de données.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heritage
*/

/* =========================================================
   1. Variables & reset
   ========================================================= */
:root{
  --midnight:    #0e1322;
  --midnight-2:  #161d30;
  --navy:        #1f2942;
  --paper:       #f7f2e8;
  --paper-2:     #efe7d6;
  --ink:         #1b2236;
  --ink-soft:    #44506b;
  --gold:        #b08d4f;
  --gold-light:  #d4b06a;
  --line:        rgba(176,141,79,.32);
  --line-soft:   rgba(27,34,54,.12);

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --font-label:   "Cormorant Garamond", Georgia, serif;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.18rem;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold); text-decoration:none; transition:color .3s var(--ease); }
a:hover{ color:var(--ink); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; color:var(--ink); margin:0 0 .5em; }
p{ margin:0 0 1.2em; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* Decorative gold rule */
.rule{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold); margin:0 0 2.4rem; }
.rule::before,.rule::after{ content:""; height:1px; width:64px; background:var(--gold); opacity:.55; }
.rule span{ font-family:var(--font-label); letter-spacing:.45em; text-transform:uppercase; font-size:.72rem; }

/* =========================================================
   2. Page d'introduction (front-page)
   ========================================================= */
.intro{
  position:fixed;
  inset:0;
  height:100vh;
  height:100dvh;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--midnight);
}
.intro__bg{
  position:absolute;
  inset:-40px;                 /* déborde pour masquer les bords du flou */
  background-size:cover;
  background-position:center;
  filter:blur(14px) brightness(.55) saturate(.9);
  transform:scale(1.08);
  z-index:0;
  animation:introZoom 18s ease-in-out infinite alternate;
}
@keyframes introZoom{ from{ transform:scale(1.08);} to{ transform:scale(1.16);} }
.intro__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(14,19,34,.15), rgba(14,19,34,.78) 95%),
    linear-gradient(180deg, rgba(14,19,34,.35), rgba(14,19,34,.65));
}

/* Menu d'accès — bouton + liste déroulante, en haut à droite */
.intro__nav{
  position:absolute;
  top:clamp(20px,4vw,40px);
  right:clamp(20px,4vw,48px);
  z-index:6;
}
.intro__access{
  display:inline-flex;
  align-items:center;
  padding:.7em 1.5em;
  font-family:var(--font-label);
  font-size:clamp(.78rem,1.4vw,.95rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--paper);
  background:transparent;                 /* fond invisible */
  border:1px solid rgba(247,242,232,.45);
  border-radius:2px;
  cursor:pointer;
  backdrop-filter:blur(2px);
  transition:all .45s var(--ease);
}
.intro__access:hover{
  color:var(--midnight);
  background:var(--paper);
  border-color:var(--paper);
}

/* Logo centré, responsive */
.intro__center{
  position:relative;
  z-index:4;
  text-align:center;
  padding:24px;
  animation:introUp 1.3s var(--ease) both;
}
@keyframes introUp{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none;} }
.intro__logo{
  width:clamp(120px, 26vw, 240px);
  height:auto;
  margin:0 auto 1.4rem;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.5));
}
.intro__crest{                            /* logo de secours dessiné en CSS/SVG */
  width:clamp(110px,22vw,200px);
  height:auto;
  margin:0 auto 1.4rem;
}
.intro__title{
  font-family:var(--font-display);
  color:var(--paper);
  font-size:clamp(2.6rem, 8vw, 5.4rem);
  font-weight:500;
  letter-spacing:.02em;
  line-height:1;
  margin:0;
  text-shadow:0 4px 30px rgba(0,0,0,.45);
}
.intro__tagline{
  margin-top:1.1rem;
  font-family:var(--font-label);
  color:var(--gold-light);
  font-size:clamp(.78rem,2.4vw,1rem);
  letter-spacing:.42em;
  text-transform:uppercase;
}
.intro__flourish{ color:var(--gold-light); font-size:1.4rem; margin-top:1.2rem; opacity:.8; }

/* =========================================================
   3. En-tête du site (pages intérieures)
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,19,34,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px 0;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ width:46px; height:auto; }
.brand__name{
  font-family:var(--font-display);
  color:var(--paper);
  font-size:1.55rem;
  letter-spacing:.05em;
  font-weight:600;
}
.brand__name span{ color:var(--gold-light); display:block; font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; font-family:var(--font-label); }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:10px; }
.nav-toggle span{ display:block; width:26px; height:2px; background:var(--paper); margin:5px 0; transition:.3s; }

.main-nav ul{ list-style:none; display:flex; gap:30px; margin:0; padding:0; }
.main-nav a{
  font-family:var(--font-label);
  color:var(--paper);
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:6px 2px;
  position:relative;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--gold-light);
  transition:width .35s var(--ease);
}
.main-nav a:hover{ color:var(--gold-light); }
.main-nav a:hover::after,
.main-nav .current-menu-item > a::after{ width:100%; }

/* =========================================================
   4. Bandeau de page (titre de rubrique)
   ========================================================= */
.page-hero{
  background:var(--midnight);
  color:var(--paper);
  text-align:center;
  padding:clamp(64px,9vw,120px) 0 clamp(54px,7vw,96px);
  position:relative;
  border-bottom:1px solid var(--line);
}
.page-hero::after{
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:120px; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.page-hero .eyebrow{
  font-family:var(--font-label); color:var(--gold-light);
  letter-spacing:.5em; text-transform:uppercase; font-size:.75rem; margin-bottom:1rem;
}
.page-hero h1{ color:var(--paper); font-size:clamp(2.6rem,6vw,4.4rem); font-weight:500; }
.page-hero p{ color:rgba(247,242,232,.78); max-width:620px; margin:1rem auto 0; }

/* =========================================================
   5. Blocs info / articles
   ========================================================= */
.section{ padding:clamp(56px,8vw,104px) 0; }

.bloc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
  gap:34px;
}

.bloc{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:3px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgba(27,34,54,.04);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.bloc:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px -28px rgba(14,19,34,.45);
  border-color:var(--line);
}
.bloc__thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--midnight-2); }
.bloc__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.bloc:hover .bloc__thumb img{ transform:scale(1.06); }
.bloc__body{ padding:30px 30px 34px; display:flex; flex-direction:column; flex:1; }
.bloc__meta{
  font-family:var(--font-label); color:var(--gold);
  letter-spacing:.28em; text-transform:uppercase; font-size:.7rem; margin-bottom:.8rem;
}
.bloc__title{ font-size:1.7rem; line-height:1.15; margin-bottom:.6rem; }
.bloc__title a{ color:var(--ink); }
.bloc__title a:hover{ color:var(--gold); }
.bloc__excerpt{ color:var(--ink-soft); font-size:1.05rem; margin-bottom:1.4rem; }
.bloc__more{
  margin-top:auto;
  font-family:var(--font-label); letter-spacing:.24em; text-transform:uppercase;
  font-size:.76rem; color:var(--gold); display:inline-flex; gap:.5em; align-items:center;
}
.bloc__more .arr{ transition:transform .35s var(--ease); }
.bloc__more:hover .arr{ transform:translateX(5px); }

.empty-note{
  text-align:center; color:var(--ink-soft); font-style:italic;
  border:1px dashed var(--line); border-radius:3px; padding:48px 24px;
}

/* =========================================================
   6. Article seul + page de contenu
   ========================================================= */
.entry{
  max-width:760px; margin:0 auto;
  padding:clamp(48px,7vw,88px) 0;
}
.entry__meta{
  font-family:var(--font-label); color:var(--gold); letter-spacing:.26em;
  text-transform:uppercase; font-size:.74rem; text-align:center; margin-bottom:1rem;
}
.entry__title{ text-align:center; font-size:clamp(2.2rem,5vw,3.4rem); font-weight:500; }
.entry__feature{ margin:2.4rem 0; border-radius:3px; overflow:hidden; }
.entry__content{ font-size:1.2rem; }
.entry__content h2{ font-size:2rem; margin-top:2em; }
.entry__content h3{ font-size:1.5rem; margin-top:1.6em; }
.entry__content blockquote{
  margin:2em 0; padding:.4em 0 .4em 1.6em; border-left:3px solid var(--gold);
  font-style:italic; color:var(--ink-soft); font-size:1.3rem;
}
.entry__content img{ border-radius:3px; margin:1.6em auto; }
.entry__content ul,.entry__content ol{ padding-left:1.3em; }

/* La page-hero fournit déjà le titre : on resserre le haut de l'article */
.page-hero + .entry{ padding-top:clamp(38px,5vw,64px); }
.page-hero + .entry .rule{ margin-bottom:2.4rem; }
.page-hero + .entry .entry__feature{ margin-top:0; }

.back-link{
  display:inline-flex; gap:.5em; align-items:center; margin-top:2.6rem;
  font-family:var(--font-label); letter-spacing:.2em; text-transform:uppercase; font-size:.78rem;
  color:var(--gold);
}
.back-link .arr{ transition:transform .35s var(--ease); }
.back-link:hover{ color:var(--ink); }
.back-link:hover .arr{ transform:translateX(-5px); }

/* =========================================================
   7. Pied de page
   ========================================================= */
.site-footer{
  background:var(--midnight); color:rgba(247,242,232,.7);
  border-top:1px solid var(--line);
  padding:clamp(48px,7vw,80px) 0 36px; text-align:center;
}
.site-footer .crest{ width:54px; margin:0 auto 18px; opacity:.85; }
.site-footer__name{ font-family:var(--font-display); color:var(--paper); font-size:1.6rem; letter-spacing:.04em; }
.site-footer__nav{ list-style:none; display:flex; flex-wrap:wrap; gap:24px; justify-content:center; padding:0; margin:22px 0; }
.site-footer__nav a{ color:rgba(247,242,232,.7); font-family:var(--font-label); letter-spacing:.16em; text-transform:uppercase; font-size:.76rem; }
.site-footer__nav a:hover{ color:var(--gold-light); }
.site-footer small{ display:block; margin-top:18px; font-size:.78rem; letter-spacing:.08em; color:rgba(247,242,232,.45); }

/* =========================================================
   8. Responsive
   ========================================================= */
@media (max-width:860px){
  body{ font-size:1.08rem; }
  .nav-toggle{ display:block; }
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--midnight); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
  }
  .main-nav.is-open{ max-height:60vh; }
  .main-nav ul{ flex-direction:column; gap:0; padding:8px 0; }
  .main-nav li{ border-top:1px solid rgba(176,141,79,.16); }
  .main-nav a{ display:block; padding:16px 28px; }
  .bloc-grid{ grid-template-columns:1fr; }
}