/* =====================================================================
   GRIBOUILLE TA VIE - ce qui est commun à toutes les pages du site :
   le menu du haut, le menu sur téléphone et le pied de page.
   Trois habillages du même menu : clair (pages claires), sombre
   (pages sombres) et photo (posé sur la grande photo des pages produit).
   ===================================================================== */
.gtv-nav,.gtv-nav *,.gtv-tiroir,.gtv-tiroir *,.gtv-pied,.gtv-pied *,.gtv-apercu,.gtv-apercu *{box-sizing:border-box}

/* ---------- le menu du haut ---------- */
.gtv-nav{--gtv-l:1180px;position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  font-family:"Karla",Arial,Helvetica,sans-serif;font-size:16px;line-height:1.4}
.gtv-clair{background:rgba(253,249,243,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #E5DBC8}
.gtv-sombre{background:rgba(22,36,30,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(156,175,154,.2)}
.gtv-photo{position:absolute;top:38px;left:0;right:0;background:none;border:0}
.gtv-in{width:min(100% - 44px,var(--gtv-l));margin-inline:auto;display:flex;align-items:center;gap:26px;padding:14px 0}
.gtv-photo .gtv-in{padding:0}

.gtv-nav .gtv-logo{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:700;font-size:24px;line-height:1.2;
  text-decoration:none;letter-spacing:-.01em;white-space:nowrap;border:0}
.gtv-nav .gtv-logo span{font-family:"Caveat","Bradley Hand",cursive;font-size:27px;font-weight:600}
.gtv-liens{display:flex;gap:24px;margin-left:auto;align-items:center}
.gtv-nav .gtv-liens a{text-decoration:none;font-weight:600;font-size:15.5px;white-space:nowrap;padding:4px 0 3px;border-bottom:2px solid transparent;transition:color .14s ease}
.gtv-nav .gtv-espace{display:inline-flex;align-items:center;font-weight:700;font-size:15px;padding:10px 19px;border-radius:4px;
  text-decoration:none;white-space:nowrap;transition:background .14s ease}
.gtv-nav .gtv-burger{display:none;margin-left:auto;width:46px;height:46px;padding:0;border-radius:4px;cursor:pointer;
  align-items:center;justify-content:center;background:transparent;border:1.5px solid transparent;box-shadow:none;font:inherit}
.gtv-burger .gtv-traits{display:grid;gap:5px;width:22px}
.gtv-burger .gtv-traits i{display:block;height:2px;border-radius:2px}
.gtv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gtv-nav a:focus-visible,.gtv-nav button:focus-visible,.gtv-tiroir a:focus-visible,.gtv-tiroir button:focus-visible,.gtv-pied a:focus-visible{outline:3px solid #D9A05B;outline-offset:3px}

/* clair */
.gtv-clair .gtv-logo{color:#2D4A3E}
.gtv-clair .gtv-logo span{color:#C06A46}
.gtv-clair .gtv-liens a{color:#3d4542}
.gtv-clair .gtv-liens a:hover{color:#2D4A3E}
.gtv-clair .gtv-liens a.gtv-actif{color:#2D4A3E;border-bottom-color:#C06A46}
.gtv-clair .gtv-espace,.gtv-sombre .gtv-espace{background:#C06A46;color:#FFF8F2;box-shadow:0 2px 0 #A95736}
.gtv-clair .gtv-espace:hover,.gtv-sombre .gtv-espace:hover{background:#A95736;color:#FFF8F2}
.gtv-clair .gtv-burger{border-color:#E5DBC8;background:#FFFDF9}
.gtv-clair .gtv-traits i{background:#2D4A3E}

/* sombre */
.gtv-sombre .gtv-logo{color:#FDF9F3}
.gtv-sombre .gtv-logo span{color:#D9A05B}
.gtv-sombre .gtv-liens a{color:rgba(239,231,217,.8)}
.gtv-sombre .gtv-liens a:hover{color:#FDF9F3}
.gtv-sombre .gtv-liens a.gtv-actif{color:#FDF9F3;border-bottom-color:#D9A05B}
.gtv-sombre .gtv-burger{border-color:rgba(199,211,194,.35);background:rgba(253,249,243,.06)}
.gtv-sombre .gtv-traits i{background:#FDF9F3}

/* photo */
.gtv-photo .gtv-logo{color:#FFF8F0;text-shadow:0 1px 14px rgba(20,30,25,.5)}
.gtv-photo .gtv-logo span{color:#F0C089}
.gtv-photo .gtv-liens a{color:rgba(255,250,242,.92);text-shadow:0 1px 12px rgba(20,30,25,.55)}
.gtv-photo .gtv-liens a:hover{color:#fff}
.gtv-photo .gtv-liens a.gtv-actif{color:#fff;border-bottom-color:#F0C089}
.gtv-photo .gtv-espace{color:#FFF8F0;background:rgba(20,30,25,.22);border:1.5px solid rgba(255,248,240,.7)}
.gtv-photo .gtv-espace:hover{background:rgba(20,30,25,.42);color:#fff}
.gtv-photo .gtv-burger{border-color:rgba(255,248,240,.6);background:rgba(20,30,25,.25)}
.gtv-photo .gtv-traits i{background:#FFF8F0}

@media (max-width:1160px){
  .gtv-liens,.gtv-nav .gtv-espace{display:none}
  .gtv-nav .gtv-burger{display:inline-flex}
}
@media (max-width:700px){
  .gtv-in{width:min(100% - 32px,var(--gtv-l))}
  .gtv-photo{top:22px}
  .gtv-nav .gtv-logo{font-size:22px}
  .gtv-nav .gtv-logo span{font-size:25px}
}

/* ---------- le menu sur téléphone ---------- */
html.gtv-bloque{overflow:hidden}
.gtv-tiroir{position:fixed;inset:0;z-index:400;font-family:"Karla",Arial,Helvetica,sans-serif;line-height:1.4}
.gtv-tiroir[hidden]{display:none!important}
.gtv-tiroir-fond{position:absolute;inset:0;background:rgba(25,40,34,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.gtv-panneau{position:absolute;top:0;right:0;bottom:0;width:min(88vw,370px);background:#FDF9F3;color:#19332E;overflow-y:auto;
  padding:calc(16px + env(safe-area-inset-top,0px)) 26px calc(28px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;box-shadow:-24px 0 60px -24px rgba(25,40,34,.55)}
.gtv-tete-t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.gtv-panneau .gtv-fermer{flex:none;width:46px;height:46px;border:1.5px solid #E5DBC8;border-radius:4px;background:#FFFDF9;
  color:#2D4A3E;font:600 26px/1 "Karla",Arial,sans-serif;cursor:pointer;box-shadow:none;padding:0}
.gtv-panneau .gtv-logo-t{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:23px;line-height:1.2;color:#2D4A3E;margin:0}
.gtv-panneau .gtv-logo-t span{font-family:"Caveat","Bradley Hand",cursive;font-size:26px;color:#C06A46}
.gtv-panneau .gtv-grand{font-family:"Fraunces",Georgia,serif;font-weight:560;font-size:23px;color:#19332E;text-decoration:none;
  padding:12px 0;border-bottom:1.5px dashed #E5DBC8}
.gtv-panneau .gtv-grand.gtv-actif{color:#A95736}
.gtv-panneau .gtv-espace-t{margin-top:22px;display:flex;justify-content:center;background:#C06A46;color:#FFF8F2;font-weight:700;font-size:16px;
  padding:14px 18px;border-radius:4px;text-decoration:none;box-shadow:0 2px 0 #A95736}
.gtv-panneau .gtv-plus{margin-top:22px;display:grid;gap:8px}
.gtv-panneau .gtv-plus a{color:#A95736;font-weight:700;font-size:15.5px;text-decoration:none}

/* ---------- le pied de page ---------- */
.gtv-pied{position:relative;z-index:3;background:#243B32;color:rgba(240,236,228,.8);padding:52px 0 26px;
  font-family:"Karla",Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;font-weight:500;text-align:left}
.gtv-pied-in{width:min(100% - 44px,1180px);margin-inline:auto}
.gtv-pied-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.gtv-pied .gtv-pied-logo{font-family:"Fraunces",Georgia,serif;font-size:25px;line-height:1.2;color:#FDF9F3;font-weight:700;margin:0}
.gtv-pied .gtv-pied-logo span{font-family:"Caveat","Bradley Hand",cursive;color:#D9A05B}
.gtv-pied .gtv-pied-txt{margin:14px 0 0;max-width:26em;color:rgba(240,236,228,.8)}
.gtv-pied .gtv-pied-titre{color:#9CAF9A;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin:0}
.gtv-pied ul{list-style:none;padding:0;margin:15px 0 0;display:grid;gap:9px}
.gtv-pied li{margin:0;padding:0}
.gtv-pied li::before{content:none}
.gtv-pied a{color:rgba(240,236,228,.82);text-decoration:none;font-size:15px}
.gtv-pied a:hover{color:#fff}
.gtv-pied .gtv-pied-bas{margin-top:38px;padding-top:18px;border-top:1px solid rgba(199,211,194,.18);font-size:13px;color:rgba(240,236,228,.55);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media (max-width:1000px){.gtv-pied-grille{grid-template-columns:1fr 1fr}.gtv-pied-grille > :first-child{grid-column:1 / -1}}
@media (max-width:560px){.gtv-pied-grille{grid-template-columns:1fr}.gtv-pied-in{width:min(100% - 32px,1180px)}}

/* ---------- la bande de l'aperçu (n'existe pas sur le vrai site) ---------- */
.gtv-apercu{position:relative;z-index:61;background:#16241E;color:#C7D3C2;font:600 13px/1.45 "Karla",Arial,sans-serif;
  padding:9px 16px;text-align:center}
.gtv-apercu b{color:#fff}
.gtv-apercu a{color:#F0C089;text-decoration:none;border-bottom:1px solid rgba(240,192,137,.45);white-space:nowrap}
.gtv-apercu a:hover{border-bottom-color:#F0C089}

/* ---------- les cartes et boutons devenus de vrais liens ---------- */
a.cta{display:inline-block;text-decoration:none}
@media (prefers-reduced-motion:reduce){.gtv-nav *,.gtv-tiroir *{transition:none!important}}

/* 07/10 : la petite flèche ronde pour revenir en haut, sur toutes les pages.
   Elle apparaît quand on a bien descendu, et se place au-dessus de la barre « Je commence » sur téléphone. */
.gtv-haut{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:65;
  width:48px;height:48px;padding:0;border-radius:50%;border:1.5px solid #2D4A3E;background:#FDF9F3;color:#2D4A3E;
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 4px rgba(45,74,62,.12),0 10px 22px -8px rgba(45,74,62,.45);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,background-color .2s,color .2s}
.gtv-haut.gtv-vu{opacity:1;visibility:visible;transform:none}
.gtv-haut svg{width:20px;height:20px;display:block}
.gtv-haut:focus-visible{outline:3px solid #D9A05B;outline-offset:3px}
@media (hover:hover){.gtv-haut:hover{background:#2D4A3E;color:#FDF9F3}}
html.gtv-bloque .gtv-haut{display:none}
@media (max-width:1000px){html.gtv-a-barre .gtv-haut{bottom:calc(86px + env(safe-area-inset-bottom))}}
@media (max-width:700px){.gtv-haut{width:44px;height:44px;right:max(14px,env(safe-area-inset-right))}}
@media print{.gtv-haut{display:none}}
@media (prefers-reduced-motion:reduce){.gtv-haut{transition:none}}

/* 07/10 : textes et images protégés (pas de copier-coller, pas d'enregistrement d'image, pas d'impression).
   Les champs des formulaires restent normaux. La page des mentions légales et CGV n'est pas protégée :
   la loi demande que les conditions de vente puissent être copiées et imprimées. */
html.gtv-protege body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
html.gtv-protege input,html.gtv-protege textarea,html.gtv-protege select,html.gtv-protege [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-touch-callout:default}
html.gtv-protege img,html.gtv-protege picture,html.gtv-protege svg{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
@media print{
  html.gtv-protege body > *{display:none !important}
  html.gtv-protege body::before{content:"Les pages de gribouille.org ne s'impriment pas. Retrouve-les sur www.gribouille.org";display:block;padding:40px;font:16px Arial,sans-serif;color:#19332E}
}