/*
Theme Name: épissAntre Blog (bleu)
Theme URI: https://www.epissantre.fr/
Author: épissAntre — Sarah & Sébastien
Author URI: https://www.epissantre.fr/
Description: Thème de blog WordPress aux couleurs exactes de l'épissAntre (séjours en site troglodytique, vallée de la Loire). Header bleu, logo de la marque, navigation et pied de page identiques au site pour une continuité parfaite.
Version: 2.1.1
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: epissantre-blog
Tags: blog, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   TOKENS — palette réelle épissAntre
   Bleu bleuet du header #4D68AB + sable de l'arche du logo
   ============================================================ */
:root{
  --brand:        #4D68AB;   /* bleu du header */
  --brand-deep:   #3A5290;   /* survols, liens */
  --brand-darker: #2C3E6E;   /* pied de page */
  --brand-soft:   #7C92C6;
  --brand-tint:   #EBEEF7;   /* fonds bleutés très clairs */

  --sand:         #C7B49E;   /* arche du logo */
  --sand-deep:    #A8917A;

  --ink:          #2A2E38;
  --ink-soft:     #4C5160;
  --ink-mute:     #7B8090;

  --paper:        #FFFFFF;
  --bg:           #F5F6FA;
  --line:         #E4E7F0;

  --shadow-sm: 0 2px 10px rgba(44,62,110,.06);
  --shadow-md: 0 16px 40px -20px rgba(44,62,110,.28);

  --radius: 10px;
  --maxw: 1180px;

  --font: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand-deep); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--brand); }

h1,h2,h3,h4{ font-weight:800; line-height:1.15; color:var(--ink); letter-spacing:-.01em; margin:0 0 .55em; }
h1{ font-size:clamp(2rem,4.4vw,3rem); }
h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
h3{ font-size:clamp(1.2rem,2vw,1.45rem); }
p{ margin:0 0 1.2em; }

.container{ width:min(100% - 2.6rem, var(--maxw)); margin-inline:auto; }

/* Boutons */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:800; font-size:.82rem; letter-spacing:.04em;
  color:#fff; background:var(--brand);
  padding:.85em 1.7em; border-radius:999px; border:none; cursor:pointer;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{ background:var(--brand-deep); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--ghost{ background:transparent; color:var(--brand-deep); box-shadow:inset 0 0 0 1.6px var(--brand); }
.btn--ghost:hover{ background:var(--brand); color:#fff; box-shadow:inset 0 0 0 1.6px var(--brand); }

/* ============================================================
   HEADER — identique au site : bande bleue, logo, nav blanche
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--brand);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; padding:1rem 0;
}
.site-branding{ display:flex; align-items:center; }
.custom-logo-link img,
.site-logo img{ max-height:78px; width:auto; display:block; }
/* Repli texte si pas de logo */
.site-title{ font-size:1.6rem; font-weight:800; margin:0; line-height:1; color:#fff; }
.site-title a{ color:#fff; }
.site-title .accent{ color:var(--sand); }
.site-description{ margin:.25rem 0 0; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.8); }

/* Navigation */
.main-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem .4rem; align-items:center; justify-content:flex-end; }
.main-navigation a{
  display:inline-block; padding:.5rem 1.05rem; border-radius:999px;
  font-weight:700; font-size:.97rem; color:#fff;
  border:1.6px solid transparent; transition:border-color .2s ease, background .2s ease;
}
.main-navigation a:hover{ background:rgba(255,255,255,.12); color:#fff; }
/* item courant = pastille bordée blanche, comme "Bienvenue" sur le site */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-parent > a{ border-color:#fff; color:#fff; }

.main-navigation .sub-menu{
  position:absolute; flex-direction:column; gap:0; min-width:230px; z-index:60;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--shadow-md); border-radius:var(--radius); padding:.4rem; display:none;
}
.main-navigation li{ position:relative; }
.main-navigation li:hover > .sub-menu{ display:flex; }
.main-navigation .sub-menu a{ color:var(--ink-soft); }
.main-navigation .sub-menu a:hover{ background:var(--brand-tint); color:var(--brand-deep); }

.menu-toggle{
  display:none; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.5);
  border-radius:999px; padding:.5rem 1rem; cursor:pointer; color:#fff;
  font-weight:800; font-size:.85rem; align-items:center; gap:.5rem;
}

/* ============================================================
   HERO du blog — bande bleue sobre, dans la continuité
   ============================================================ */
.blog-hero{
  background:var(--brand);
  color:#fff; text-align:center;
  padding:clamp(2.6rem,6vw,4.4rem) 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.blog-hero .eyebrow{ font-size:.76rem; letter-spacing:.26em; text-transform:uppercase; color:var(--sand); margin-bottom:.7rem; }
.blog-hero h1{ color:#fff; max-width:20ch; margin-inline:auto; }
.blog-hero p{ color:rgba(255,255,255,.85); max-width:56ch; margin:.9rem auto 0; font-size:1.04rem; }

/* ============================================================
   LAYOUT
   ============================================================ */
.site-main{ padding:clamp(2.6rem,6vw,4.2rem) 0; }
.content-area{
  display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:clamp(2rem,4vw,3.4rem); align-items:start;
}
.content-area.no-sidebar{ grid-template-columns:minmax(0,760px); justify-content:center; }

.posts-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.8rem; }
@media(max-width:680px){ .posts-grid{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .28s ease, box-shadow .28s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card__media{ aspect-ratio:16/10; overflow:hidden; background:var(--brand-tint); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card__media img{ transform:scale(1.04); }
.card__media--empty{
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; font-weight:800; color:var(--brand-soft);
  background:var(--brand-tint);
}
.card__body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.card__meta{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-deep); font-weight:800; margin-bottom:.55rem; }
.card__title{ font-size:1.3rem; margin:0 0 .5rem; }
.card__title a{ color:var(--ink); }
.card__title a:hover{ color:var(--brand-deep); }
.card__excerpt{ color:var(--ink-soft); font-size:.95rem; margin:0 0 1.1rem; }
.card__more{ margin-top:auto; font-weight:800; font-size:.78rem; letter-spacing:.06em; color:var(--brand-deep); display:inline-flex; gap:.4em; }
.card__more::after{ content:"→"; transition:transform .25s ease; }
.card:hover .card__more::after{ transform:translateX(4px); }

/* Article seul */
.entry{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.entry__hero{ aspect-ratio:21/9; overflow:hidden; background:var(--brand-tint); }
.entry__hero img{ width:100%; height:100%; object-fit:cover; }
.entry__inner{ padding:clamp(1.5rem,4vw,2.8rem); }
.entry__meta{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-deep); font-weight:800; margin-bottom:.65rem; }
.entry__title{ margin-bottom:1.1rem; }
.entry-content{ font-size:1.04rem; }
.entry-content h2{ margin-top:1.7em; }
.entry-content img{ border-radius:var(--radius); margin:1.5em 0; }
.entry-content blockquote{
  margin:1.6em 0; padding:.3em 0 .3em 1.4em; border-left:3px solid var(--brand);
  font-style:italic; font-size:1.2rem; color:var(--ink-soft);
}
.entry-content a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--brand-soft); }
.entry-content ul,.entry-content ol{ padding-left:1.3em; }
.entry-content li{ margin:.35em 0; }
.entry-content code{ background:var(--brand-tint); padding:.12em .4em; border-radius:5px; font-size:.92em; }

.tags{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.tags a{ font-size:.76rem; padding:.3em .85em; border-radius:999px; background:var(--brand-tint); color:var(--brand-deep); font-weight:700; }
.tags a:hover{ background:var(--brand); color:#fff; }

/* ============================================================
   SIDEBAR / widgets
   ============================================================ */
.widget{ margin-bottom:2rem; }
.widget-title{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--brand-deep); margin-bottom:.9rem; padding-bottom:.55rem; border-bottom:2px solid var(--line); }
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ padding:.4rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.widget li:last-child{ border-bottom:none; }
.widget a{ color:var(--ink-soft); }
.widget a:hover{ color:var(--brand-deep); }
.widget--invite{ background:var(--brand); color:#fff; padding:1.8rem 1.6rem; border-radius:var(--radius); text-align:center; }
.widget--invite .widget-title{ color:var(--sand); border-color:rgba(255,255,255,.18); }
.widget--invite p{ color:rgba(255,255,255,.9); font-size:.95rem; }
.widget--invite .btn{ background:#fff; color:var(--brand-deep); }
.widget--invite .btn:hover{ background:var(--brand-tint); }

input[type=text],input[type=email],input[type=url],input[type=search],input[type=password],textarea{
  width:100%; font-family:var(--font); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:8px; padding:.7rem .85rem;
}
input:focus,textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(77,104,171,.18); }
.search-form{ display:flex; gap:.5rem; }
.search-form input[type=submit]{ flex:none; }

/* Pagination */
.pagination{ margin-top:2.8rem; display:flex; justify-content:center; }
.pagination .nav-links{ display:flex; gap:.4rem; flex-wrap:wrap; }
.pagination .page-numbers{
  min-width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 .6rem;
  border-radius:8px; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); font-weight:700;
}
.pagination .page-numbers.current{ background:var(--brand); color:#fff; border-color:var(--brand); }
.pagination .page-numbers:hover{ border-color:var(--brand); color:var(--brand-deep); }
.pagination .page-numbers.current:hover{ color:#fff; }

/* Commentaires */
.comments-area{ margin-top:2.4rem; }
.comment-list{ list-style:none; padding:0; margin:0; }
.comment-body{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.4rem; margin-bottom:1.1rem; }
.comment-author{ font-weight:800; }
.comment-meta{ font-size:.78rem; color:var(--ink-mute); margin-bottom:.5rem; }
.comment-list .children{ list-style:none; margin-left:1.3rem; padding-left:1rem; border-left:2px solid var(--line); }

/* ============================================================
   FOOTER — calqué sur le site : fond bleu, formulaire + carte
   ============================================================ */
.site-footer{ background:var(--brand); color:#fff; padding:clamp(2.6rem,5vw,3.6rem) 0 0; margin-top:3.5rem; }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.4rem); padding-bottom:2.4rem; align-items:start; }

/* Notice de soumission */
.form-notice{ border-radius:8px; padding:.75rem 1rem; margin-bottom:1rem; font-size:.92rem; font-weight:700; }
.form-notice--ok{ background:rgba(255,255,255,.92); color:#2E5A34; }
.form-notice--error{ background:rgba(255,255,255,.92); color:#9B2D2D; }

/* Formulaire de contact */
.contact-form .field{ margin-bottom:1.1rem; }
.contact-form label{ display:block; color:#fff; font-size:.92rem; font-weight:700; margin-bottom:.4rem; }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea{
  width:100%; background:#fff; color:var(--ink);
  border:1px solid rgba(255,255,255,.4); border-radius:6px; padding:.7rem .85rem; font-size:1rem;
}
.contact-form textarea{ min-height:130px; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus{ outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.contact-consent{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.7rem; }
.contact-consent input{ margin-top:.25rem; flex:none; width:18px; height:18px; }
.contact-consent label{ font-weight:400; font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.92); margin:0; }
.contact-required{ font-size:.82rem; color:rgba(255,255,255,.85); margin:.2rem 0 1rem; }
.contact-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form .submit{
  width:100%; background:#383C48; color:#fff; border:none; border-radius:6px;
  padding:.9rem 1rem; font-size:1rem; font-weight:700; letter-spacing:.02em; cursor:pointer;
  transition:background .2s ease;
}
.contact-form .submit:hover{ background:#2A2E38; }

/* Carte + coordonnées */
.footer-map{ border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.3); line-height:0; }
.footer-map iframe{ width:100%; height:240px; border:0; display:block; }
.footer-contact-block{ margin-top:1.4rem; }
.footer-contact-block h2{ color:#fff; font-size:1.7rem; font-weight:800; margin:0 0 .7rem; }
.footer-contact-block p{ color:rgba(255,255,255,.92); font-size:.95rem; margin:.2rem 0; }
.footer-contact-block a{ color:#fff; }
.footer-contact-block a:hover{ color:var(--sand); }
.footer-social{ display:flex; gap:.7rem; margin-top:1.1rem; }
.footer-social a{
  width:42px; height:42px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.45); color:#fff;
  transition:background .25s ease, transform .25s ease;
}
.footer-social a:hover{ background:#fff; color:var(--brand); transform:translateY(-2px); }
.footer-social svg{ width:20px; height:20px; fill:currentColor; }

/* Bas de page : copyright + légal, centrés */
.site-colophon{
  border-top:1px solid rgba(255,255,255,.18); margin-top:.6rem; padding:1.6rem 0 2rem;
  text-align:center; color:rgba(255,255,255,.92); font-size:.9rem;
}
.site-colophon .copyright{ margin:0 0 .5rem; }
.site-colophon nav{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:.3rem .6rem; }
.site-colophon nav a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.site-colophon nav a:hover{ color:var(--sand); }
.site-colophon .sep{ opacity:.6; }

/* Divers */
.page-head{ margin-bottom:2.2rem; }
.page-head .eyebrow{ font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-deep); font-weight:800; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:1rem; top:1rem; background:var(--brand); color:#fff; padding:.6rem 1rem; border-radius:8px; z-index:100; }

/* Responsive */
@media(max-width:980px){
  .content-area{ grid-template-columns:1fr; }
  .posts-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:760px){
  .menu-toggle{ display:inline-flex; }
  .site-header .container{ padding:.85rem 0; }
  .main-navigation{
    flex-basis:100%; max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .main-navigation.is-open{ max-height:70vh; overflow:auto; margin-top:.6rem; }
  .main-navigation ul{ flex-direction:column; align-items:stretch; gap:.2rem; }
  .main-navigation a{ padding:.75rem 1rem; }
  .main-navigation .current-menu-item > a{ border-color:rgba(255,255,255,.6); }
  .main-navigation .sub-menu{ position:static; display:flex; box-shadow:none; border:none; padding-left:1rem; background:transparent; }
  .main-navigation .sub-menu a{ color:#fff; }
  .posts-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
}