/*
Theme Name: Combret Gastronomie Vins
Theme URI: https://www.combret-gastronomie-vins.com/
Description: Thème sur mesure du site d'Henri Combret, auteur d'ouvrages sur le patrimoine gastronomique du Sud-Ouest. Conçu pour l'édition en façade avec l'extension Pencilino.
Author: Meta web
Version: 1.6.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: combret-gastronomie-vins
Tags: custom-theme, one-column, right-sidebar
*/

:root{
  --fond:#ba945b;          /* fond brun sable d'origine (RVB 186,148,91) */
  --panneau:#ffffff;       /* contenu blanc pur, comme l'original */
  --texte:#333333;
  --doux:#6b6b63;
  --vert:#657f27;
  --vert-fonce:#4e6311;
  --vert-nuit:#2f3c0c;
  --vif:#c9f54f;
  --brun:#88683c;
  --trait:#e2ded2;
  --titre:"Fraunces",Georgia,"Times New Roman",serif;
  --corps:"Spectral",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background-color:var(--fond);background-image:linear-gradient(to bottom,#d9ca98 0,#ba945b 238px);background-repeat:no-repeat;color:var(--texte);
  font-family:var(--corps);font-size:1.0313rem;line-height:1.62;-webkit-text-size-adjust:100%}
.cgv-main img,.cgv-header img{max-width:100%;height:auto}
aside,footer,.cgv-chapo,.cgv-et,h3.cgv-groupe,.cgv-carte .cgv-k,.cgv-champ span,.cgv-bouton,.cgv-site p{font-family:var(--sans)}

.cgv-cadre{max-width:62rem;margin:0 auto;background:var(--panneau);
  border-left:1px solid var(--brun);border-right:1px solid var(--brun);
  border-bottom:1px solid var(--brun)}
.cgv-site{background:url(assets/img/header-bg.jpg) center/100% 100% no-repeat #93bc3f;
  color:#fff;text-align:center;padding:1.5rem 1rem 3.6rem}
.cgv-site h1{font-family:var(--titre);font-weight:600;margin:0;
  font-size:clamp(1.6rem,5vw,2.4rem);text-shadow:2px 2px 2px #4e6311;letter-spacing:-.015em}
.cgv-site p{margin:.4rem 0 0;color:var(--vif);font-size:.9rem;
  text-shadow:0 1px 2px #3b4d0a,0 0 7px rgba(47,60,12,.75)}
.cgv-corps{display:flex;align-items:stretch}
.cgv-main{flex:1;min-width:0;padding:1.9rem 1.7rem 2.6rem}
.cgv-aside{width:15.5rem;flex:none;border-left:1px solid var(--trait);background:#fbfaf6}
.cgv-aside ul{list-style:none;margin:0;padding:0}
.cgv-aside a{display:block;padding:.5rem .7rem;color:#fff;background:#7d992f;
  text-decoration:none;font-size:.78rem;border-bottom:1px solid #bcdd6e;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgv-aside a{transition:background .22s ease,padding-left .22s ease,box-shadow .22s ease}
.cgv-aside a:hover,.cgv-aside a:focus-visible{background:var(--vert-fonce);padding-left:1.25rem;
  box-shadow:inset 4px 0 0 var(--vif)}
@media (prefers-reduced-motion:reduce){.cgv-aside a{transition-duration:.01ms}}
.cgv-aside a[aria-current]{background:#657f27;font-weight:600}
.cgv-aside{border-top:1px solid #bbdf70}
.cgv-aside .cgv-bloc{padding:.9rem .85rem;font-size:.84rem;color:var(--doux);border-top:1px solid var(--trait)}
.cgv-aside summary{display:none}
@media (max-width:52rem){
  .cgv-corps{flex-direction:column}
  .cgv-aside{width:auto;border-left:0;border-top:0;order:-1;background:#fff;
    border-bottom:1px solid var(--trait)}
  .cgv-aside summary{display:block;list-style:none;cursor:pointer;background:#657f27;
    color:#fff;font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:.04em;
    padding:.72rem .9rem;user-select:none;position:relative}
  .cgv-aside summary::-webkit-details-marker{display:none}
  .cgv-aside summary::after{content:"";position:absolute;right:1rem;top:50%;width:.55rem;height:.55rem;
    border-right:2px solid #fff;border-bottom:2px solid #fff;
    transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
  .cgv-aside details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
  .cgv-aside .cgv-bloc{display:none}
  .cgv-main{padding:1.4rem max(16px,env(safe-area-inset-left,0px)) 2rem}
}
h2.cgv-titre{font-family:var(--titre);font-weight:600;font-size:1.6rem;color:var(--vert-fonce);
  margin:0 0 .2rem;text-wrap:balance}
.cgv-main h3{font-family:var(--titre);font-weight:600;font-size:1.18rem;color:var(--vert-fonce);
  margin:0 0 .25rem;text-wrap:balance}
.cgv-regle{border:0;height:2px;background:var(--vif);width:3.2rem;margin:.8rem 0 1.5rem}
p{margin:0 0 1em}
a{color:var(--vert-fonce)}
.cgv-chapo{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);
  margin-bottom:.35rem}
.cgv-footer{background:var(--vert-nuit);color:#c9d98a;font-size:.82rem;text-align:center;
  padding:1.3rem 1rem;max-width:62rem;margin:0 auto;border:1px solid var(--brun);border-top:0}
.cgv-main figure{margin:0}
.cgv-main figcaption{font-size:.85rem;color:var(--doux);margin-top:.4rem}

/* grille des ouvrages (accueil) */
h3.cgv-groupe{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--doux);
  font-weight:600;margin:0 0 .9rem;padding-bottom:.4rem;border-bottom:1px solid var(--trait)}
h3.cgv-groupe + .cgv-grille-biblio{margin-bottom:2.1rem}
.cgv-grille-biblio{display:grid;gap:1.6rem 1.3rem;grid-template-columns:repeat(3,1fr)}
.cgv-bl{margin:0;min-width:0;display:flex;flex-direction:column}
.cgv-bl .cgv-main figcaption{flex:1;display:flex;flex-direction:column;align-items:flex-start;margin-top:0}
.cgv-bl .cgv-et{margin-top:auto}
.cgv-vign{display:flex;align-items:flex-end;justify-content:center;height:15rem;
  background:#f5f3ec;border:1px solid var(--trait);padding:.5rem}
.cgv-vign img{max-height:100%;max-width:100%;width:auto;box-shadow:0 1px 5px rgba(0,0,0,.28)}
.cgv-bt{display:block;font-family:var(--titre);font-size:.95rem;line-height:1.3;margin-top:.5rem}
.cgv-bs{display:block;font-size:.79rem;color:var(--doux);margin-top:.15rem;line-height:1.45}
.cgv-bd{display:block;font-size:.77rem;color:var(--vert-fonce);font-style:italic;margin-top:.15rem}
.cgv-et{display:inline-block;margin-top:.35rem;font-size:.66rem;letter-spacing:.07em;
  text-transform:uppercase;padding:.1rem .42rem;border-radius:2px}
.cgv-et.cgv-e{background:#e8e4d6;color:#75705f}
.cgv-et.cgv-d{background:var(--vert);color:#fff}
.cgv-et.cgv-n{background:var(--vert-nuit);color:var(--vif)}
@media (max-width:34rem){
  .cgv-grille-biblio{grid-template-columns:repeat(2,1fr);gap:1.3rem 1rem}
  .cgv-vign{height:13rem}
}

/* fiches livres des pages listes */
.cgv-livre{display:flex;gap:1.3rem;padding:1.4rem 0;border-top:1px solid var(--trait)}
.cgv-livre:first-of-type{border-top:0;padding-top:.3rem}
.cgv-livre img{border:1px solid var(--trait);display:block}
.cgv-livre .cgv-couv{flex:none;align-self:flex-start;display:block;line-height:0;
  transition:box-shadow .2s ease,transform .2s ease}
.cgv-livre .cgv-couv:hover,.cgv-livre .cgv-couv:focus-visible{box-shadow:0 3px 14px rgba(0,0,0,.28);
  transform:translateY(-2px)}
.cgv-livre .cgv-txt{min-width:0}
@media (max-width:30rem){.cgv-livre{flex-direction:column}}
.cgv-meta{font-size:.9rem;color:var(--doux);margin-top:.5rem}
.cgv-prix{font-weight:600;color:var(--vert-fonce);font-variant-numeric:tabular-nums}

/* page Gastronomie de mes terroirs */
.cgv-intro-livre{display:flex;gap:1.6rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.6rem}
.cgv-accroche{font-family:var(--titre);font-size:1.12rem;line-height:1.6;color:var(--vert-fonce);
  margin:0;flex:1 1 14rem;min-width:0}
.cgv-vignettes{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.cgv-vignettes img{border:1px solid var(--trait)}
/* pages de présentation : planches d'origine */
.cgv-planche{margin:0 0 1.4rem;text-align:center}
.cgv-planche img{border:1px solid var(--trait)}
.cgv-annexe{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:flex-start}
.cgv-annexe img{border:1px solid var(--trait)}

/* médias */
.cgv-lecteur{width:100%;background:#000;border:1px solid var(--trait);display:block;
  margin-bottom:1.8rem}

.cgv-duo{display:grid;gap:1.4rem;grid-template-columns:1fr 1fr;margin-bottom:1.6rem;align-items:start}
.cgv-duo .cgv-main figure{min-width:0}
.cgv-cadre-photo{display:flex;align-items:center;justify-content:center;height:13.5rem;
  background:#f5f3ec;border:1px solid var(--trait);padding:.5rem}
.cgv-cadre-photo img{height:100%;width:auto;max-width:100%;object-fit:contain;
  box-shadow:0 1px 5px rgba(0,0,0,.22)}
@media (max-width:30rem){.cgv-cadre-photo{height:11rem}}
.cgv-legende-duo{text-align:center;color:var(--doux);font-size:.92rem;margin:0 0 .9rem}
dialog#loupe{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible}
dialog#loupe::backdrop{background:rgba(25,28,16,.86)}
dialog#loupe img{display:block;max-width:96vw;max-height:94vh;width:auto;height:auto;
  border:5px solid #fff;box-shadow:0 10px 50px rgba(0,0,0,.6)}
dialog#loupe .cgv-fermer{position:absolute;top:-.7rem;right:-.7rem;width:2.1rem;height:2.1rem;
  border-radius:50%;border:0;background:#fff;color:#2f3c0c;font-size:1.3rem;line-height:1;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
@media (max-width:30rem){.cgv-duo{grid-template-columns:1fr}}

/* recto-verso mis en valeur */
/* La couverture entière, d'un seul tenant : dos, tranche et recto.
   Le texte du dos est petit à cette largeur, d'où la loupe au clic. */
.cgv-couv-entiere{margin:0 0 1.6rem;text-align:center}
.cgv-couv-entiere img{width:100%;height:100%;object-fit:contain;display:block;
  box-shadow:0 3px 16px rgba(0,0,0,.26)}
.cgv-cadre-couv-entiere{display:block;width:100%}

.cgv-rectoverso{display:grid;gap:1.4rem;grid-template-columns:1fr 1fr;margin:0 0 1.6rem}
@media (max-width:34rem){.cgv-rectoverso{grid-template-columns:1fr}}
.cgv-rectoverso img{width:100%;box-shadow:0 3px 16px rgba(0,0,0,.26)}

/* contact */
.cgv-infos{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:1.2rem 0}
.cgv-carte{border:1px solid var(--trait);border-radius:2px;padding:.8rem .9rem;min-width:0}
.cgv-carte .cgv-k{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--doux);margin-bottom:.2rem}
.cgv-carte .cgv-v{font-family:var(--titre);font-size:1.1rem}
.cgv-champ{display:block;margin-bottom:.9rem;max-width:34rem}
.cgv-champ span,.cgv-champ label{display:block;font-size:.85rem;margin-bottom:.25rem}
.cgv-champ input,.cgv-champ textarea{width:100%;padding:.5rem .6rem;border:1px solid #bdbdb2;
  border-radius:2px;font:inherit;background:#fff;color:var(--texte)}
.cgv-champ input:focus,.cgv-champ textarea:focus{outline:2px solid var(--vert);outline-offset:1px}
.cgv-champ .cgv-requis{display:inline;color:#a33}
.cgv-bouton{background:var(--vert);color:#fff;border:0;border-radius:2px;padding:.6rem 1.3rem;
  font:inherit;cursor:pointer}
.cgv-bouton:hover{background:var(--vert-fonce)}
.cgv-bouton-pale{background:transparent;color:var(--vert-fonce);border:1px solid #bdbdb2}
.cgv-bouton-pale:hover{background:#f1efe8;color:var(--vert-nuit)}
.cgv-boutons{display:flex;gap:.6rem;flex-wrap:wrap;max-width:34rem}

/* Le piège à robots : présent dans la page, invisible pour un visiteur. */
.cgv-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Retour après envoi du formulaire. */
.cgv-avis{border-left:4px solid var(--vert);background:#f3f6e8;padding:.7rem .9rem;margin:0 0 1.1rem;
  max-width:34rem}
.cgv-avis-erreur{border-left-color:#a33;background:#faeeee}
footer a{color:#c9d98a}
.cgv-signature{font-family:var(--titre);margin-top:1.6rem;clear:both}
.cgv-signature span{font-size:.88rem;color:var(--doux)}


/* ---------------------------------------------------------------
   Cadres d'images à proportions fixes.
   Pencilino laisse le client remplacer une image : le cadre garde
   ses dimensions, l'image est recadrée dedans, la page ne bouge pas.
   --------------------------------------------------------------- */
.cgv-cadre-couv,.cgv-cadre-planche,.cgv-cadre-document,
.cgv-cadre-vignette,.cgv-cadre-couv-grande,.cgv-portrait,
.cgv-vign,.cgv-cadre-photo,.cgv-cadre-couv img,.cgv-cadre-planche img,.cgv-cadre-document img,
.cgv-cadre-vignette img,.cgv-cadre-couv-grande img,.cgv-portrait img,
.cgv-vign img,.cgv-cadre-photo img,.cgv-cadre-annexe img{
  width:100%;height:100%;object-fit:contain;display:block}

.cgv-cadre-couv{width:10rem;aspect-ratio:2/3;flex:none;padding:.35rem}
.cgv-cadre-document{aspect-ratio:3/2;padding:.5rem}
.cgv-cadre-vignette{width:9rem;aspect-ratio:2/3;padding:.35rem}
.cgv-cadre-couv-grande{aspect-ratio:2/3;padding:.5rem}
.cgv-cadre-annexe{width:11rem;aspect-ratio:2/3;padding:.35rem}
.cgv-cadre-couv-entiere{aspect-ratio:193/142;padding:0}
.cgv-portrait{width:11rem;aspect-ratio:3/4;float:right;margin:.2rem 0 .9rem 1.3rem;
  border:4px solid #fff;box-shadow:0 1px 8px rgba(0,0,0,.25)}
.cgv-vign{height:15rem}
@media (max-width:34rem){.cgv-vign{height:13rem}}
.cgv-cadre-photo{aspect-ratio:3/2;height:auto}

/* le texte enrichi de Pencilino hérite de la typographie du thème */
.cgv-main .pencil-richtext p{margin:0 0 1em}
.cgv-main .pencil-richtext ul,.cgv-main .pencil-richtext ol{margin:0 0 1em 1.2rem;padding:0}
.cgv-main .pencil-richtext a{color:var(--vert-fonce)}
.cgv-accroche{font-family:var(--titre);font-size:1.12rem;line-height:1.6;
  color:var(--vert-fonce);flex:1 1 14rem;min-width:0}
.cgv-bio{min-width:0}

/* lien d'évitement, visible seulement au clavier */
.cgv-evitement{position:absolute;left:-9999px;top:0;background:var(--vert-nuit);
  color:#fff;padding:.6rem 1rem;z-index:100}
.cgv-evitement:focus{left:0}

/* loupe */
#cgv-loupe{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible}
#cgv-loupe::backdrop{background:rgba(25,28,16,.86)}
#cgv-loupe img{display:block;max-width:96vw;max-height:94vh;width:auto;height:auto;
  border:5px solid #fff;box-shadow:0 10px 50px rgba(0,0,0,.6)}
#cgv-loupe .cgv-fermer{position:absolute;top:-.7rem;right:-.7rem;width:2.1rem;height:2.1rem;
  border-radius:50%;border:0;background:#fff;color:#2f3c0c;font-size:1.3rem;line-height:1;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}


/* ---------------------------------------------------------------
   Compositions des pages de présentation.
   Les positions reprennent celles du site d'origine, exprimées en
   pourcentage : l'ensemble se met à l'échelle sans se déformer.
   --------------------------------------------------------------- */
.cgv-compo{position:relative;width:100%;margin:0 auto 1.5rem}
.cgv-compo .cgv-piece{position:absolute;display:block;overflow:hidden}
.cgv-compo .cgv-piece img{width:100%;height:100%;object-fit:contain;display:block;
  box-shadow:0 2px 10px rgba(0,0,0,.22)}

/* Bloc auteur : le portrait flotte à droite du texte. */
.cgv-auteur{display:block;min-width:0}