/* =========================================================
   Villa Folie — pages « guides »
   ---------------------------------------------------------
   Chargée après page.css, uniquement sur les pages de
   destination (Thouars, Saumur, Puy du Fou, Poitiers…).
   Elle remplace la colonne de texte étroite par une mise en
   page pleine largeur : grandes photos des lieux, grands
   titres, et un rythme volontairement irrégulier — bandeau,
   diptyque, triptyque, chiffres — pour que la lecture ne
   soit jamais monotone.
   ========================================================= */

:root{
  --g-wrap:1320px;
  --g-wrap-texte:940px;
}

/* la barre du haut se pose au-dessus de la photo d'accueil */
body.guide{background:var(--paper)}
body.guide .pnav{
  position:absolute;top:0;left:0;right:0;z-index:20;
  background:transparent;border-bottom:1px solid rgba(255,255,255,.16);
  backdrop-filter:none;
}
body.guide .pnav-logo{filter:brightness(0) invert(1)}
body.guide .pnav-sub{color:rgba(255,255,255,.72);border-left-color:rgba(255,255,255,.3)}
body.guide .pnav-links a{color:rgba(255,255,255,.9)}
body.guide .pnav-links a:hover{background:rgba(255,255,255,.16);color:#fff}
body.guide .pcta{background:#fff;color:var(--ink)}
body.guide .pcta:hover{background:var(--paper-2);color:var(--ink)}

/* ---------------------------------------------------------
   1 · ACCUEIL DE PAGE — photo du lieu en pleine largeur
   --------------------------------------------------------- */
.ghero{position:relative;min-height:min(84vh,780px);display:flex;align-items:flex-end;overflow:hidden}
.ghero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ghero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(12,16,15,.72) 0,rgba(12,16,15,.28) 26%,rgba(12,16,15,.20) 48%,rgba(12,16,15,.88) 100%);
}
.ghero-in{
  position:relative;z-index:2;width:100%;max-width:var(--g-wrap);
  margin:0 auto;padding:0 var(--gutter) clamp(46px,6vw,86px);
}
.gfil{font-size:.82rem;color:rgba(255,255,255,.72);margin-bottom:clamp(18px,3vw,32px)}
.gfil a{color:rgba(255,255,255,.72);text-decoration:none}
.gfil a:hover{color:#fff;text-decoration:underline}
.gfil span{margin:0 .5em;opacity:.55}
.ghero .eyebrow{color:#fff;opacity:.9;margin-bottom:.9em}
.ghero .eyebrow::before{background:#fff}
.ghero h1{
  font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(2.5rem,6.6vw,5.2rem);line-height:1.02;letter-spacing:-.035em;
  max-width:19ch;text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.ghero .lead{
  color:rgba(255,255,255,.9);max-width:58ch;margin-top:1.1em;
  font-size:clamp(1.06rem,1.5vw,1.32rem);line-height:1.55;
}
.ghero .credit{position:absolute;right:14px;bottom:8px;z-index:2;font-size:.62rem;color:rgba(255,255,255,.5)}

/* ---------------------------------------------------------
   2 · CHIFFRES CLÉS — bandeau sombre, pleine largeur
   --------------------------------------------------------- */
.gstats{background:var(--ink);color:#fff}
.gstats-in{
  max-width:var(--g-wrap);margin:0 auto;padding:clamp(34px,4vw,56px) var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);
}
.gstat b{
  display:block;font-family:var(--serif);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(2rem,3.6vw,3.2rem);line-height:1;color:#fff;
}
.gstat span{display:block;margin-top:.45em;font-size:.9rem;color:rgba(255,255,255,.6)}

/* ---------------------------------------------------------
   3 · SECTIONS DE TEXTE — grandes, aérées
   --------------------------------------------------------- */
.gsec{max-width:var(--g-wrap);margin:0 auto;padding:clamp(56px,7vw,110px) var(--gutter)}
.gsec-texte{max-width:var(--g-wrap-texte)}
.gtitre{
  font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:-.03em;
  font-size:clamp(1.9rem,4.2vw,3.3rem);line-height:1.08;margin-bottom:.6em;
}
.gtitre-xl{font-size:clamp(2.2rem,5.2vw,4rem)}
.gtxt{font-size:clamp(1.04rem,1.35vw,1.2rem);line-height:1.7;color:var(--muted)}
.gtxt p{margin-bottom:1.1em}
.gtxt p:last-child{margin-bottom:0}
.gtxt strong{color:var(--ink);font-weight:600}
.gtxt a{color:var(--brass-deep);text-decoration:underline;text-underline-offset:3px}
.gchapo{
  font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.45;color:var(--ink);
  font-weight:500;letter-spacing:-.015em;margin-bottom:1.2em;
}

/* ---------------------------------------------------------
   4 · DIPTYQUE texte / photo — alterné
   --------------------------------------------------------- */
.gsplit{
  max-width:var(--g-wrap);margin:0 auto;padding:clamp(50px,6vw,96px) var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;
}
.gsplit.rev .gsplit-img{order:-1}
.gsplit-img{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.gsplit-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.gsplit-img:hover img{transform:scale(1.03)}
.gsplit-img .credit{
  position:absolute;left:0;right:0;bottom:0;padding:22px 14px 7px;
  font-size:.64rem;color:rgba(255,255,255,.78);text-align:right;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
}
.gsplit-img .credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------
   5 · BANDEAU PLEINE LARGEUR — une phrase sur une photo
   --------------------------------------------------------- */
.gband{position:relative;min-height:min(70vh,620px);display:flex;align-items:center;overflow:hidden}
.gband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gband::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,14,13,.82) 0%,rgba(10,14,13,.55) 48%,rgba(10,14,13,.25) 100%)}
.gband-in{position:relative;z-index:2;max-width:var(--g-wrap);margin:0 auto;padding:clamp(56px,7vw,100px) var(--gutter);width:100%}
.gband .eyebrow{color:#fff;opacity:.85}
.gband .eyebrow::before{background:#fff}
.gband h2{
  font-family:var(--serif);font-weight:700;color:#fff;letter-spacing:-.03em;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.1;max-width:20ch;margin:.4em 0 .5em;
}
.gband p{color:rgba(255,255,255,.85);max-width:56ch;font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.6}
.gband .credit{position:absolute;right:14px;bottom:8px;z-index:2;font-size:.62rem;color:rgba(255,255,255,.5)}

/* ---------------------------------------------------------
   6 · TRIPTYQUE — trois lieux, trois photos légendées
   --------------------------------------------------------- */
.gtrio{
  max-width:var(--g-wrap);margin:0 auto;padding:clamp(40px,5vw,80px) var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);
}
.gtrio figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gtrio figure:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.gtrio img{width:100%;aspect-ratio:5/4;object-fit:cover;display:block}
.gtrio figcaption{padding:20px 22px 22px}
.gtrio figcaption b{
  display:block;font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:1.22rem;letter-spacing:-.02em;margin-bottom:.35em;
}
.gtrio figcaption span{display:block;color:var(--muted);font-size:.97rem;line-height:1.55}
.gtrio figcaption em{display:block;margin-top:.7em;font-size:.62rem;font-style:normal;color:var(--muted-2)}
.gtrio figcaption em a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* deux photos larges côte à côte */
.gduo{max-width:var(--g-wrap);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.gduo figure{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden}
.gduo img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.gduo .credit{position:absolute;right:0;bottom:0;padding:18px 12px 6px;font-size:.62rem;
  color:rgba(255,255,255,.75);background:linear-gradient(180deg,transparent,rgba(0,0,0,.5))}

/* ---------------------------------------------------------
   7 · LISTES & TABLEAUX, version large
   --------------------------------------------------------- */
.gcols{max-width:var(--g-wrap);margin:0 auto;padding:clamp(40px,5vw,80px) var(--gutter);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,70px);align-items:start}
.gcheck{display:grid;gap:14px}
.gcheck li{display:flex;gap:.85em;align-items:flex-start;color:var(--muted);font-size:1.02rem;line-height:1.55}
.gcheck li::before{
  content:"";flex:none;width:23px;height:23px;margin-top:2px;border-radius:50%;background:var(--brass);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
}
.gtbl{width:100%;overflow-x:auto}
.gtbl table{width:100%;border-collapse:collapse;font-size:1.02rem;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.gtbl th,.gtbl td{padding:1em 1.2em;text-align:left;border-bottom:1px solid var(--line)}
.gtbl th{background:var(--paper-2);font-weight:600;color:var(--ink);font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase}
.gtbl td:first-child{color:var(--ink);font-weight:500}
.gtbl td:last-child{color:var(--brass-deep);font-weight:600;white-space:nowrap}
.gtbl tr:last-child td{border-bottom:0}
.grem{color:var(--muted-2);font-size:.88rem;margin-top:1em}

/* encadré large */
.gnote{
  max-width:var(--g-wrap);margin:0 auto;padding:0 var(--gutter);
}
.gnote-in{
  background:var(--ink);color:#fff;border-radius:var(--radius-lg);
  padding:clamp(30px,4vw,54px) clamp(26px,4vw,58px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,42px);align-items:center;
}
.gnote-in b{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.9rem);
  letter-spacing:-.02em;line-height:1.15;white-space:nowrap;color:#fff;
}
.gnote-in p{color:rgba(255,255,255,.78);font-size:1.04rem;line-height:1.6;margin:0}

/* ---------------------------------------------------------
   8 · QUESTIONS FRÉQUENTES
   --------------------------------------------------------- */
.gfaq{max-width:var(--g-wrap-texte);margin:0 auto;padding:clamp(40px,5vw,70px) var(--gutter)}
.gfaq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;margin-bottom:12px;transition:border-color .3s var(--ease);
}
.gfaq details[open]{border-color:var(--brass)}
.gfaq summary{
  font-weight:600;color:var(--ink);cursor:pointer;list-style:none;font-size:1.08rem;
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
}
.gfaq summary::-webkit-details-marker{display:none}
.gfaq summary::after{content:"+";color:var(--brass);font-size:1.5rem;line-height:1;flex:none}
.gfaq details[open] summary::after{content:"–"}
.gfaq details p{margin:.8em 0 0;color:var(--muted);font-size:1rem;line-height:1.65}

/* ---------------------------------------------------------
   9 · APPEL À RÉSERVER, PAGES LIÉES, CRÉDITS
   --------------------------------------------------------- */
.gcta{position:relative;overflow:hidden;background:var(--forest);text-align:center}
.gcta-in{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:clamp(60px,7vw,110px) var(--gutter)}
.gcta h2{font-family:var(--serif);font-weight:700;color:#fff;letter-spacing:-.03em;
  font-size:clamp(1.8rem,4vw,3rem);line-height:1.1;margin-bottom:.5em}
.gcta p{color:rgba(255,255,255,.78);font-size:1.08rem;line-height:1.6;margin-bottom:2em}
.gcta .pcta{display:inline-block;padding:1em 2.4em;font-size:1.02rem;background:#fff;color:var(--ink)}
.gcta .pcta:hover{background:var(--paper-2);color:var(--ink)}
.gcta .note-avis{display:block;margin-top:1.4em;font-size:.86rem;color:rgba(255,255,255,.55)}

.gliees{max-width:var(--g-wrap);margin:0 auto;padding:clamp(56px,7vw,100px) var(--gutter) 0}
.gliees h2{font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:-.025em;
  font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:1.1em}
.gcartes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
.gcarte{
  display:block;border-radius:var(--radius-lg);overflow:hidden;background:var(--white);
  border:1px solid var(--line);text-decoration:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.gcarte:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.gcarte img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.gcarte span{display:block;padding:18px 20px 20px}
.gcarte b{display:block;font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:1.06rem;letter-spacing:-.015em;margin-bottom:.3em;line-height:1.25}
.gcarte i{font-style:normal;color:var(--muted);font-size:.92rem;line-height:1.5}

.gcredits{max-width:var(--g-wrap);margin:0 auto;padding:clamp(40px,5vw,70px) var(--gutter) 0}
.gcredits-in{border-top:1px solid var(--line);padding-top:20px;font-size:.78rem;color:var(--muted-2);line-height:1.7}
.gcredits-in b{display:block;color:var(--muted);font-weight:600;margin-bottom:.5em;
  letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}
.gcredits-in a{color:var(--muted-2);text-decoration:underline;text-underline-offset:2px}
.gcredits-in a:hover{color:var(--brass-deep)}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media(max-width:1080px){
  .gcartes{grid-template-columns:repeat(2,1fr)}
  .gstats-in{grid-template-columns:repeat(2,1fr);gap:26px}
}
@media(max-width:860px){
  .gsplit{grid-template-columns:1fr;gap:26px}
  .gsplit.rev .gsplit-img{order:0}
  .gtrio{grid-template-columns:1fr}
  .gduo{grid-template-columns:1fr}
  .gcols{grid-template-columns:1fr;gap:30px}
  .gnote-in{grid-template-columns:1fr;gap:14px}
  .gnote-in b{white-space:normal}
  .ghero{min-height:min(76vh,640px)}
  .gband{min-height:auto}
  body.guide .pnav{position:static;background:rgba(250,250,248,.94);border-bottom:1px solid var(--line)}
  body.guide .pnav-logo{filter:none}
  body.guide .pnav-sub{color:var(--muted);border-left-color:var(--line)}
  body.guide .pnav-links a{color:var(--text)}
  body.guide .pcta{background:var(--brass);color:#fff}
}
@media(max-width:520px){
  .gstats-in{grid-template-columns:1fr 1fr;gap:20px}
  .gcartes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .gsplit-img img,.gtrio figure,.gcarte{transition:none}
  .gsplit-img:hover img{transform:none}
}