/* =========================================================
   Villa Folie — bandeau et fenêtre « cookies »
   ---------------------------------------------------------
   Cette feuille est chargée par TOUTES les pages : la page
   d'accueil (qui porte styles.css + mobile.css) comme les
   pages guides (qui portent page.css). Les deux définissent
   déjà --paper, --brass, --serif… ; les valeurs de repli
   écrites ici ne servent donc que si une page future oubliait
   sa feuille principale.

   Le bandeau ne bloque pas la page : le site ne dépose aucun
   traceur publicitaire, seul un contenu externe (la carte)
   attend une autorisation. Un mur de consentement serait
   disproportionné — et coûterait des réservations.
   ========================================================= */

/* ---------------------------------------------------------
   1 · BANDEAU DE PREMIÈRE VISITE
   --------------------------------------------------------- */
.ck-bar{
  /* 94 : au-dessus des barres de navigation (50 et 90), mais SOUS tous les
     panneaux plein écran du site — menu mobile et calendrier (95), galerie
     (100), visionneuse (110), album (190), lightbox (200), choix de la
     langue (300). Un bandeau qui flotte par-dessus une photo plein écran
     donne l'impression d'un site cassé. */
  position:fixed;z-index:94;
  left:max(18px,env(safe-area-inset-left));
  bottom:max(18px,env(safe-area-inset-bottom));
  width:min(430px,calc(100vw - 36px));
  padding:22px 24px 20px;
  border-radius:20px;
  background:var(--paper,#fafaf8);
  border:1px solid var(--line,rgba(20,26,25,.12));
  box-shadow:0 30px 70px -24px rgba(10,12,15,.55);
  font-family:var(--sans,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
  color:var(--text,#2b2f34);
  animation:ckUp .45s cubic-bezier(.22,.61,.36,1) both;
}
.ck-bar[hidden]{display:none}
@keyframes ckUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ck-bar,.ck-pop{animation:none}
}

.ck-bar h2{
  font-family:var(--serif,'Playfair Display',Georgia,serif);
  font-weight:600;font-size:1.12rem;line-height:1.25;
  color:var(--ink,#15181c);margin:0 0 .45em;
}
.ck-bar p{
  font-size:.885rem;line-height:1.55;color:var(--muted,#6d7278);margin:0 0 1.05em;
}
.ck-bar p a{color:var(--brass-deep,#14544d);text-decoration:underline;text-underline-offset:2px}
.ck-bar p a:hover{color:var(--brass,#1d6f66)}

/* Les deux boutons ont exactement le même poids visuel : accepter ne doit
   jamais être plus facile que refuser (recommandation CNIL de 2020). */
.ck-acts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ck-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.78em 1em;border-radius:3px;border:1px solid transparent;
  font-family:inherit;font-size:.9rem;font-weight:600;line-height:1;
  cursor:pointer;text-align:center;
  transition:background .25s cubic-bezier(.22,.61,.36,1),
             border-color .25s cubic-bezier(.22,.61,.36,1),
             transform .25s cubic-bezier(.22,.61,.36,1);
}
.ck-btn:hover{transform:translateY(-1px)}
.ck-btn-yes{background:var(--brass,#1d6f66);color:#fff}
.ck-btn-yes:hover{background:var(--brass-deep,#14544d)}
.ck-btn-no{
  background:var(--white,#fff);color:var(--ink,#15181c);
  border-color:var(--line,rgba(20,26,25,.12));
}
.ck-btn-no:hover{border-color:var(--brass,#1d6f66)}

.ck-more{
  display:block;width:100%;margin-top:12px;padding:0;border:0;background:none;
  font-family:inherit;font-size:.83rem;color:var(--muted,#6d7278);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.ck-more:hover{color:var(--brass-deep,#14544d)}

@media (max-width:560px){
  .ck-bar{
    left:10px;right:10px;width:auto;
    bottom:max(10px,env(safe-area-inset-bottom));
    padding:20px 20px 18px;border-radius:18px;
  }
  .ck-acts{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   2 · FENÊTRE DE RÉGLAGES
   Même grammaire visuelle que le sélecteur de langue
   (.lang-pop) : le visiteur reconnaît le geste.
   --------------------------------------------------------- */
.ck-pop{
  position:fixed;inset:0;z-index:420;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(10,12,15,.66);backdrop-filter:blur(6px);
  animation:ckIn .3s cubic-bezier(.22,.61,.36,1) both;
}
.ck-pop[hidden]{display:none}
@keyframes ckIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ck-open,.ck-open body{overflow:hidden}

.ck-card{
  width:100%;max-width:520px;max-height:min(84vh,760px);
  display:flex;flex-direction:column;
  border-radius:22px;background:var(--paper,#fafaf8);
  box-shadow:0 40px 90px -30px rgba(10,12,15,.7);
  font-family:var(--sans,'Inter',sans-serif);color:var(--text,#2b2f34);
}
.ck-head{
  flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:22px 22px 14px;
}
.ck-head b{
  font-family:var(--serif,'Playfair Display',Georgia,serif);
  font-size:1.22rem;font-weight:600;line-height:1.25;color:var(--ink,#15181c);
}
.ck-x{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  border:0;border-radius:10px;background:none;color:var(--muted,#6d7278);cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.ck-x svg{width:17px;height:17px}
.ck-x:hover{background:rgba(10,12,15,.06);color:var(--ink,#15181c)}

.ck-body{
  flex:1 1 auto;overflow-y:auto;padding:0 22px 4px;
  -webkit-overflow-scrolling:touch;
}
.ck-intro{font-size:.88rem;line-height:1.6;color:var(--muted,#6d7278);margin-bottom:16px}
.ck-intro a{color:var(--brass-deep,#14544d);text-decoration:underline;text-underline-offset:2px}

.ck-cat{
  padding:15px 17px;margin-bottom:10px;border-radius:15px;
  background:var(--white,#fff);border:1px solid var(--line,rgba(20,26,25,.12));
}
.ck-cat-top{display:flex;align-items:center;gap:14px}
.ck-cat-top b{
  flex:1;font-size:.97rem;font-weight:600;color:var(--ink,#15181c);line-height:1.3;
}
.ck-cat p{margin:.55em 0 0;font-size:.83rem;line-height:1.55;color:var(--muted,#6d7278)}
.ck-cat ul{margin:.6em 0 0;padding:0;list-style:none}
.ck-cat li{
  font-size:.79rem;line-height:1.5;color:var(--muted,#6d7278);
  padding-left:14px;position:relative;
}
.ck-cat li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:4px;height:4px;border-radius:50%;background:var(--brass,#1d6f66);opacity:.65;
}

/* interrupteur */
.ck-sw{flex:none;position:relative;width:46px;height:27px}
.ck-sw input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;z-index:2;
}
.ck-sw i{
  position:absolute;inset:0;border-radius:3px;
  background:rgba(20,26,25,.18);transition:background .25s ease;pointer-events:none;
}
.ck-sw i::after{
  content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(10,12,15,.3);
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.ck-sw input:checked ~ i{background:var(--brass,#1d6f66)}
.ck-sw input:checked ~ i::after{transform:translateX(19px)}
.ck-sw input:focus-visible ~ i{outline:2px solid var(--brass-deep,#14544d);outline-offset:2px}
.ck-sw input:disabled{cursor:default}
.ck-sw input:disabled ~ i{background:var(--brass,#1d6f66);opacity:.42}

.ck-lock{
  flex:none;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-deep,#14544d);white-space:nowrap;
}

.ck-foot{
  flex:none;display:grid;grid-template-columns:1fr 1fr;gap:9px;
  padding:16px 22px 20px;border-top:1px solid var(--line,rgba(20,26,25,.12));
}
.ck-foot .ck-save{grid-column:1 / -1}
.ck-note{
  grid-column:1 / -1;margin-top:4px;text-align:center;
  font-size:.76rem;line-height:1.5;color:var(--muted,#6d7278);
}
.ck-note a{color:var(--brass-deep,#14544d);text-decoration:underline;text-underline-offset:2px}

@media (max-width:560px){
  .ck-pop{padding:0;align-items:flex-end}
  .ck-card{max-width:none;max-height:92vh;border-radius:22px 22px 0 0}
  .ck-foot{padding-bottom:max(20px,env(safe-area-inset-bottom))}
}

/* ---------------------------------------------------------
   3 · CONTENU EXTERNE EN ATTENTE (la carte)
   L'espace occupé est le même avant et après acceptation :
   aucun saut de mise en page quand la carte se charge.
   --------------------------------------------------------- */
.ck-ph{
  /* z-index 2, comme .map-overlay, mais inséré APRÈS lui dans le DOM : il
     passe donc devant. La carte de légende (.map-card, z-index 3) reste
     au-dessus et lisible — c'est elle qui porte le lien « Itinéraire ». */
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:26px 24px;text-align:center;
  background:
    linear-gradient(rgba(250,247,242,.86),rgba(250,247,242,.86)),
    repeating-linear-gradient(45deg,
      var(--paper-2,#f0f0ec) 0 12px, rgba(29,111,102,.10) 12px 24px);
  color:var(--text,#2b2f34);
  font-family:var(--sans,'Inter',sans-serif);
}
.ck-ph svg{width:30px;height:30px;color:var(--brass,#1d6f66);opacity:.9}
.ck-ph b{
  font-family:var(--serif,'Playfair Display',Georgia,serif);
  font-size:1.02rem;font-weight:600;color:var(--ink,#15181c);line-height:1.3;
}
.ck-ph span{font-size:.83rem;line-height:1.55;color:var(--muted,#6d7278);max-width:34ch}
.ck-ph .ck-btn{margin-top:2px;padding:.7em 1.4em}
/* la légende de la carte reste devant : on lui laisse la place en bas */
.ck-ph{padding-bottom:96px}
@media (max-width:520px){.ck-ph{padding-bottom:110px}}

/* ---------------------------------------------------------
   4 · ARABE — lecture de droite à gauche
   --------------------------------------------------------- */
[dir="rtl"] .ck-bar{
  left:auto;right:max(18px,env(safe-area-inset-right));
}
@media (max-width:560px){
  [dir="rtl"] .ck-bar{left:10px;right:10px}
}
[dir="rtl"] .ck-cat li{padding-left:0;padding-right:14px}
[dir="rtl"] .ck-cat li::before{left:auto;right:2px}
[dir="rtl"] .ck-sw input:checked ~ i::after{transform:translateX(-19px)}
[dir="rtl"] .ck-sw i::after{left:auto;right:3px}