/* ==========================================================================
   CASA CONCA — Guide d'accueil (welcome guide) styles
   ========================================================================== */

/* ===== Guide-only site : en-tête, sélecteur, tuiles, vue section ========= */
.guide-body{ background:var(--sand) }
.nav__alt{ font-size:.86rem; color:var(--sea-deep) !important; border:1.5px solid #bfe0e0;
  border-radius:999px; padding:.4rem .9rem !important }
.nav__alt:hover{ background:var(--sea) !important; color:#fff !important }

/* En-tête identité + sélecteur */
.ghead{ position:relative; padding:6.5rem 0 2.4rem; overflow:hidden; color:#fff; text-align:center }
.ghead--tall{ padding:7.5rem 0 3rem }
.ghead__bg{ position:absolute; inset:0; z-index:-1 }
.ghead__bg img{ width:100%; height:100%; object-fit:cover }
.ghead__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,12,6,.46) 0%, rgba(20,12,6,.62) 100%) }
.ghead__inner{ position:relative }
.ghead .eyebrow{ display:inline-block; font-family:var(--ff-script); font-weight:700; line-height:1.18;
  font-size:clamp(2.3rem,6.5vw,3.6rem); margin-bottom:.1rem; letter-spacing:.3px;
  padding:.1em .32em; transform:rotate(-3deg); transform-origin:50% 60%;
  background:linear-gradient(100deg,#F3C79A 22%,#FFFFFF 47%,#FFE9CC 55%,#EEB673 80%);
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.55));
  animation:eyebrowIn 1s var(--ease) both, eyebrowFloat 7s ease-in-out 1.1s infinite, eyebrowShine 5.5s linear 1.3s infinite }
@keyframes eyebrowIn{ 0%{ opacity:0 } 100%{ opacity:1 } }
@keyframes eyebrowFloat{
  0%,100%{ transform:rotate(-3deg) translate(0,0) }
  25%{ transform:rotate(-1deg) translate(7px,-6px) }
  50%{ transform:rotate(-4.5deg) translate(-2px,-10px) }
  75%{ transform:rotate(-2.2deg) translate(-7px,-5px) } }
@keyframes eyebrowShine{ 0%{ background-position:200% 0 } 55%,100%{ background-position:-120% 0 } }
@media (prefers-reduced-motion:reduce){ .ghead .eyebrow{ animation:none; transform:rotate(-3deg);
  -webkit-text-fill-color:#FCE3C4; color:#FCE3C4; background:none } }
.ghead__title{ font-family:var(--ff-display); font-size:clamp(2rem,5.5vw,3.4rem); margin:.1rem 0 .2rem;
  text-shadow:0 4px 26px rgba(0,0,0,.45) }
.ghead__welcome{ font-family:var(--ff-script); font-size:clamp(1.3rem,3.2vw,2rem); color:#FCDcc0; margin-bottom:1.2rem }
.ghead__chips{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:1.2rem }
.ghead__chips span{ background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); padding:.38rem .85rem; border-radius:999px; font-size:.84rem }

.villa-select{ display:inline-flex; gap:.35rem; padding:.35rem; border-radius:999px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.28) }
.villa-select button{ display:flex; flex-direction:column; align-items:center; line-height:1;
  padding:.5rem 1.1rem; border-radius:999px; color:#fff; transition:.25s; min-width:64px }
.villa-select button b{ font-family:var(--ff-display); font-size:1.5rem }
.villa-select button span{ font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; opacity:.85 }
.villa-select button.active{ background:#fff; color:var(--orange-deep) }
.villa-select button.active span{ opacity:.7 }

/* Accueil à tuiles */
.hub-lead{ text-align:center; color:var(--ink-soft); max-width:60ch; margin:2.4rem auto 2rem; font-size:1.02rem }
.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:1.1rem; padding-bottom:1rem;
  scroll-margin-top:74px }
.tile{ perspective:800px; background:none; padding:0; cursor:pointer; text-align:left }
.tile__in{ position:relative; display:flex; flex-direction:column; gap:.15rem; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.4rem 1.3rem 1.5rem;
  box-shadow:var(--shadow-sm); overflow:hidden; transform-style:preserve-3d;
  transition:transform .35s var(--ease), box-shadow .35s }
.tile:hover .tile__in{ box-shadow:var(--shadow); transform:translateY(-4px) }
.tile__ic{ font-size:2.1rem; transform:translateZ(26px); transition:transform .4s var(--ease) }
.tile:hover .tile__ic{ transform:translateZ(44px) scale(1.15) rotate(-4deg) }
.tile__label{ font-family:var(--ff-display); font-size:1.4rem; color:var(--ink); transform:translateZ(18px) }
.tile__sub{ font-size:.82rem; color:var(--ink-soft); transform:translateZ(12px) }
.tile__in::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(var(--orange),var(--orange-deep)); opacity:.0; transition:opacity .3s }
.tile:hover .tile__in::before{ opacity:1 }
.tile__glow{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), rgba(240,128,72,.14), transparent 60%) }
.tile:hover .tile__glow{ opacity:1 }

/* ---- Polish pro : entrées & micro-interactions ---- */
/* En-tête : apparition en cascade au chargement (1re impression) */
.ghead__title{ animation:heroIn .9s var(--ease) .12s both }
.ghead__welcome{ animation:heroIn .9s var(--ease) .3s both }
.ghead__chips{ animation:heroIn .9s var(--ease) .6s both }
@keyframes heroIn{ 0%{ opacity:0; transform:translateY(22px) } 100%{ opacity:1; transform:none } }
.ghead__chips span{ transition:transform .25s var(--ease), background .25s }
.ghead__chips span:hover{ transform:translateY(-2px) }
/* Ouverture d'une rubrique : le titre de section entre en fondu montant */
.view-enter .view-head{ animation:viewHeadIn .5s var(--ease) both }
@keyframes viewHeadIn{ 0%{ opacity:0; transform:translateY(14px) } 100%{ opacity:1; transform:none } }
.view-ic{ display:inline-block }
.view-enter .view-ic{ animation:viewIcPop .55s var(--ease) both }
@keyframes viewIcPop{ 0%{ transform:scale(.5) rotate(-12deg); opacity:0 } 60%{ transform:scale(1.12) rotate(4deg) } 100%{ transform:scale(1) rotate(0); opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .ghead__title,.ghead__welcome,.ghead__chips,.view-enter .view-head,.view-ic,.view-enter .view-ic{ animation:none }
  .tile:hover .tile__ic{ transform:translateZ(26px) }
}

/* Vue d'une section */
#view{ padding:1.5rem 0 1rem; animation:fade .4s var(--ease) }
/* Bouton retour flottant (bas gauche) + animation créative de rétrécissement */
.view-back{ position:fixed; left:16px; bottom:20px; z-index:80; display:inline-flex; align-items:center;
  gap:.5rem; padding:.72rem 1.3rem; border-radius:999px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-lg); font-weight:600; color:var(--orange-deep); cursor:pointer; white-space:nowrap;
  transition:padding .35s var(--ease), background .25s, color .25s }
.view-back:hover{ background:var(--orange); color:#fff }
.view-back__arrow{ font-size:1.15rem; line-height:1; flex:0 0 auto; display:inline-block }
.view-back__label{ display:inline-block; max-width:220px; overflow:hidden;
  transition:max-width .4s var(--ease), opacity .3s }
.view-back--min{ padding:.9rem }
.view-back--min .view-back__label{ max-width:0; opacity:0 }
@media (prefers-reduced-motion:no-preference){
  .view-back--min{ animation:backPop .5s var(--ease), backGlow 2.6s ease-in-out .7s infinite }
  .view-back--min .view-back__arrow{ animation:backNudge 3.4s ease-in-out 1.4s infinite }
}
@keyframes backPop{ 0%{ transform:scale(1) } 42%{ transform:scale(.76) }
  70%{ transform:scale(1.14) } 100%{ transform:scale(1) } }
@keyframes backGlow{ 0%,100%{ box-shadow:0 8px 18px rgba(217,97,42,.22) }
  50%{ box-shadow:0 10px 26px rgba(217,97,42,.5), 0 0 0 5px rgba(240,128,72,.16) } }
@keyframes backNudge{ 0%,76%,100%{ transform:translateX(0) }
  84%{ transform:translateX(-5px) } 91%{ transform:translateX(1px) } }
@media (max-width:560px){ .view-back{ left:12px; bottom:14px } }
.view-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem }
.view-ic{ font-size:2.6rem; line-height:1 }
.view-nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:2.6rem;
  border-top:1px solid var(--line); padding-top:1.4rem; flex-wrap:wrap }
.vnav{ display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.1rem; border-radius:12px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); font-weight:500; transition:.25s }
.vnav:hover{ background:var(--orange); color:#fff }
.vnav.next{ margin-left:auto }

/* petits titres réutilisés */
.pool-h{ font-family:var(--ff-display); font-size:1.4rem; color:var(--orange-deep) }
.info-box{ margin-top:1.5rem; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:1.4rem; box-shadow:var(--shadow-sm) }
/* Galerie — aperçus sobres : 1 photo / pièce, libellé discret en surimpression */
.gallery-tour{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:1rem }
.gtile{ position:relative; margin:0; border-radius:14px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:var(--shadow-sm); background:var(--sand-2) }
.gtile img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease) }
.gtile:hover img{ transform:scale(1.04) }
.gtile__label{ position:absolute; inset:auto 0 0 0; padding:1.9rem 1rem .8rem; color:#fff;
  font-size:.74rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  background:linear-gradient(transparent, rgba(20,12,6,.15) 30%, rgba(20,12,6,.7));
  text-shadow:0 1px 5px rgba(0,0,0,.4) }
@media (max-width:560px){
  .gallery-tour{ grid-template-columns:repeat(2,1fr); gap:.7rem }
  .gtile__label{ font-size:.66rem; letter-spacing:.12em; padding:1.5rem .7rem .65rem }
}

/* Pied de page guide */
.guide-footer{ background:#494949; color:#e6e6e6; padding:1.5rem 0 1.15rem; margin-top:3rem }
.ff-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem 1.6rem; flex-wrap:wrap;
  width:min(100% - 40px, var(--maxw)); margin-inline:auto }
.ff-brand{ display:flex; align-items:center; gap:.75rem; color:inherit }
.ff-brand:hover .ff-name{ color:#F5A06A }
.ff-logo{ width:40px; height:40px; border-radius:10px; flex:0 0 auto; box-shadow:var(--shadow-sm) }
.ff-brand__txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; text-align:left }
.ff-name{ font-family:'Breathing','Great Vibes', var(--ff-display), cursive; font-size:1.75rem;
  color:#fff; line-height:1; transition:color .25s }
.ff-wm{ height:24px; width:auto; display:block; transition:transform .25s var(--ease) }
.ff-brand:hover .ff-wm{ transform:translateY(-1px) }
.ff-addr{ font-size:.76rem; color:#b6b6b6; margin-top:.15rem }
.ff-links{ display:flex; gap:1.3rem; flex-wrap:wrap; align-items:center }
.ff-links a{ color:#F5A06A; font-size:.9rem; transition:color .25s }
.ff-links a:hover{ color:#fff }
.ff-copy{ display:block; text-align:center; font-size:.76rem; color:#9e9e9e; padding-top:.9rem;
  width:min(100% - 40px, var(--maxw)); margin:1.05rem auto 0;
  border-top:1px solid rgba(255,255,255,.1) }
.ff-cbit{ color:#F5A06A; font-weight:600 }
.ff-cbit:hover{ color:#fff }
@media (max-width:640px){
  .ff-inner{ flex-direction:column; text-align:center }
  .ff-brand{ flex-direction:column } .ff-brand__txt{ text-align:center; align-items:center }
  .ff-links{ justify-content:center }
}

@media (max-width:560px){
  .tiles{ grid-template-columns:repeat(2,1fr); gap:.8rem }
  .tile__in{ padding:1.1rem 1rem 1.2rem }
  .tile__label{ font-size:1.2rem }
  .tile__ic{ font-size:1.8rem }
  .ghead{ padding:5.5rem 0 2rem }
}


.guide-hero{
  min-height:62svh; display:grid; place-items:center; text-align:center;
  padding:8rem 1rem 3rem; position:relative; overflow:hidden;
}
.guide-hero__bg{ position:absolute; inset:0; z-index:-1 }
.guide-hero__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1) }
.guide-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,12,6,.45), rgba(20,12,6,.66)) }
.guide-hero__inner{ color:#fff; max-width:760px }
.guide-hero__tag{ display:inline-block; background:var(--orange); color:#fff; padding:.4rem 1.1rem;
  border-radius:999px; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase }
.guide-hero h1{ font-family:var(--ff-display); font-size:clamp(2.2rem,6vw,4rem); margin:1rem 0 .4rem;
  text-shadow:0 4px 30px rgba(0,0,0,.4) }
.guide-hero__welcome{ font-family:var(--ff-script); font-size:clamp(1.4rem,3.5vw,2.2rem); color:#FCDcc0 }
.guide-hero__chips{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem }
.guide-hero__chips span{ background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); padding:.4rem .9rem; border-radius:999px; font-size:.85rem }

/* ---------- Sticky section tabs ---------------------------------------- */
.gtabs{ position:sticky; top:60px; z-index:60; background:var(--glass);
  backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--glass-bd);
  box-shadow:var(--shadow-sm) }
.gtabs__scroll{ display:flex; gap:.3rem; overflow-x:auto; padding:.6rem clamp(12px,4vw,30px);
  scrollbar-width:thin; -webkit-overflow-scrolling:touch }
.gtabs__scroll::-webkit-scrollbar{ height:5px }
.gtabs__scroll::-webkit-scrollbar-thumb{ background:var(--orange-soft); border-radius:9px }
.gtab{ white-space:nowrap; padding:.5rem .95rem; border-radius:999px; font-size:.86rem; font-weight:400;
  color:var(--ink-soft); transition:.25s; display:flex; align-items:center; gap:.4rem }
.gtab:hover{ background:rgba(240,128,72,.12); color:var(--orange-deep) }
.gtab.active{ background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(217,97,42,.3) }

/* ---------- Section frame ---------------------------------------------- */
.gsec{ padding:clamp(3rem,7vw,5.5rem) 0; scroll-margin-top:120px }
.gsec:nth-child(even){ background:linear-gradient(180deg, var(--cream), var(--sand)) }
.gsec__head{ display:flex; align-items:center; gap:1rem; margin-bottom:2rem; flex-wrap:wrap }
.gsec__num{ font-family:var(--ff-display); font-size:2.6rem; color:var(--orange-soft); line-height:1;
  min-width:2ch }
.gsec__title{ font-family:var(--ff-display); font-size:clamp(1.7rem,4vw,2.6rem) }
.gsec__sub{ color:var(--ink-soft); font-size:.9rem }

/* generic info card grid */
.icards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem }
.icard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.5rem;
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s }
.icard:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.icard .ic{ font-size:1.7rem; display:block; margin-bottom:.6rem }
.icard h4{ font-size:1.05rem; margin-bottom:.4rem; color:var(--orange-deep) }
.icard p{ color:var(--ink-soft); font-size:.92rem }
.icard a.tel{ display:inline-block; margin-top:.6rem; color:var(--sea-deep); font-weight:500; font-size:.9rem }

/* ---- Infos : guide du tri sélectif ---- */
.tri{ margin-top:2rem }
.tri__title{ font-family:var(--ff-display); font-size:1.6rem; line-height:1.1; margin-bottom:.25rem }
.tri__intro{ color:var(--ink-soft); font-size:.95rem; margin-bottom:1.1rem }
.tri__bins{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.9rem; margin-bottom:1.4rem }
.tri-bin{ border-radius:14px; padding:1rem 1.15rem; color:#fff; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s }
.tri-bin:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.16) }
.tri-bin__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem }
.tri-bin__emoji{ font-size:1.7rem; flex:0 0 auto }
.tri-bin__name{ display:block; font-family:var(--ff-display); font-size:1.3rem; line-height:1 }
.tri-bin__hint{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; opacity:.92; margin-top:.2rem }
.tri-bin__items{ font-size:.88rem; line-height:1.5 }
.tri-bin--verre{ background:linear-gradient(135deg,#5EA845,#3C7A2C) }
.tri-bin--embal{ background:linear-gradient(135deg,#F0C239,#D19A1C); color:#3a2a00 }
.tri-bin--embal .tri-bin__hint{ opacity:.75 }
.tri-bin--papier{ background:linear-gradient(135deg,#2C93BE,#1B6180) }
.tri-bin--menager{ background:linear-gradient(135deg,#727B88,#474D58) }
.tri-bin--compost{ background:linear-gradient(135deg,#9A7743,#6C4F28) }
.tri__figure{ margin:0 }
.tri__zoom{ display:block; width:100%; position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); cursor:zoom-in; background:#fff; padding:0 }
.tri__zoom img{ width:100%; height:auto; display:block }
.tri__zoom:hover{ box-shadow:var(--shadow) }
.tri__zoomic{ position:absolute; bottom:10px; right:10px; width:38px; height:38px; border-radius:50%;
  background:rgba(20,12,6,.6); backdrop-filter:blur(4px); color:#fff; display:grid; place-items:center; font-size:1.05rem }
.tri__figure figcaption{ text-align:center; font-size:.8rem; color:var(--ink-soft); margin-top:.5rem }
.tri-drop{ background:linear-gradient(135deg,#FFEFE1,#FFE0C7); border:2px solid var(--orange);
  border-radius:16px; padding:1.1rem 1.25rem; margin-top:1.3rem; box-shadow:0 12px 28px rgba(240,128,72,.24) }
.tri-drop__title{ font-family:var(--ff-display); font-size:1.35rem; color:var(--orange-deep);
  display:flex; align-items:center; gap:.45rem; margin-bottom:.8rem }
.tri-drop__pin{ display:inline-block; animation:dropPin 1.8s ease-in-out infinite }
@keyframes dropPin{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }
.tri-drop__rows{ display:flex; flex-direction:column; gap:.6rem }
.tri-drop__row{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; background:#fff;
  border-radius:12px; padding:.7rem .85rem; box-shadow:var(--shadow-sm) }
.tri-drop__ic{ font-size:1.55rem; flex:0 0 auto }
.tri-drop__what{ font-weight:700; color:var(--ink); font-size:1rem }
.tri-drop__dist{ background:var(--orange); color:#fff; font-weight:800; font-size:1rem;
  padding:.18rem .8rem; border-radius:999px; font-family:var(--ff-display); flex:0 0 auto;
  box-shadow:0 4px 12px rgba(240,128,72,.4) }
.tri-drop__where{ color:var(--ink-soft); font-size:.92rem; flex:1 1 140px }
@media (prefers-reduced-motion:reduce){ .tri-drop__pin{ animation:none } }

/* ---- Départ : remerciement, livre d'or, avis, réseaux ---- */
.thanks-card{ background:linear-gradient(135deg,#FFF6EE,#ffffff); border:1px solid var(--line);
  border-radius:18px; padding:1.6rem 1.7rem; margin-top:1.9rem; box-shadow:var(--shadow-sm); text-align:center }
.thanks-card__msg{ color:var(--ink); font-size:1.04rem; line-height:1.65; max-width:660px; margin:0 auto }
.thanks-card__sign{ font-family:var(--ff-script); font-size:2rem; color:var(--orange-deep); margin-top:.7rem; line-height:1 }
.guestbook{ display:flex; align-items:center; gap:1.1rem; background:linear-gradient(135deg,#FCEFCE,#F6E1A8);
  border:2px solid #D9A441; border-radius:18px; padding:1.25rem 1.45rem; margin-top:1.5rem;
  box-shadow:0 14px 30px rgba(217,164,65,.3) }
.guestbook__ic{ font-size:2.6rem; flex:0 0 auto; animation:gbook 2.6s ease-in-out infinite; transform-origin:50% 80% }
@keyframes gbook{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(-8deg) } 75%{ transform:rotate(8deg) } }
.guestbook__body h3{ font-family:var(--ff-display); font-size:1.4rem; color:#8A5A0F; margin-bottom:.2rem; line-height:1.1 }
.guestbook__body p{ color:#6B531E; font-size:.95rem; line-height:1.5 }
.review-card{ background:linear-gradient(135deg,#EAF6F1,#ffffff); border:1px solid #BFE3D3; border-left:5px solid #3E8E5A;
  border-radius:18px; padding:1.6rem 1.7rem; margin-top:1.5rem; box-shadow:var(--shadow-sm); text-align:center }
.review-card__stars{ color:#F0B429; font-size:1.75rem; letter-spacing:.2rem; margin-bottom:.35rem;
  animation:starGlow 2.4s ease-in-out infinite }
@keyframes starGlow{ 0%,100%{ transform:scale(1); filter:none } 50%{ transform:scale(1.06); filter:drop-shadow(0 0 6px rgba(240,180,41,.6)) } }
.review-card h3{ font-family:var(--ff-display); font-size:1.5rem; color:#2C6E43; margin-bottom:.4rem }
.review-card p{ color:var(--ink-soft); font-size:.96rem; line-height:1.65; max-width:640px; margin:0 auto }
.gsocials{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.7rem; margin-top:1.7rem }
.gsocials__lbl{ font-weight:600; color:var(--ink-soft); font-size:.95rem }
.social-btn{ display:inline-flex; align-items:center; gap:.45rem; padding:.58rem 1.1rem; border-radius:999px;
  font-weight:600; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s, background .25s, color .25s }
.social-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
.social-btn__ic{ font-weight:800 }
.social-btn--web{ color:var(--orange-deep) }
.social-btn--web:hover{ background:var(--orange); color:#fff; border-color:var(--orange) }
.social-btn--fb{ color:#1877F2; border-color:#bcd6fb }
.social-btn--fb:hover{ background:#1877F2; color:#fff; border-color:#1877F2 }
.social-btn--ig{ color:#C1358B; border-color:#eec2dd }
.social-btn--ig:hover{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); color:#fff; border-color:transparent }
@media (prefers-reduced-motion:reduce){ .guestbook__ic, .review-card__stars{ animation:none } }

/* split media + text */
.gsplit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:center }
.gsplit__media img{ border-radius:var(--radius); box-shadow:var(--shadow-lg); width:100%;
  aspect-ratio:4/3; object-fit:cover }
.gsplit--rev .gsplit__media{ order:2 }

/* big highlight card (check-in/out time) */
.timecard{ display:inline-flex; align-items:center; gap:1rem; background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  color:#fff; padding:1.1rem 1.8rem; border-radius:18px; box-shadow:0 14px 30px rgba(217,97,42,.34);
  font-family:var(--ff-display); margin-bottom:1.4rem }
.timecard b{ font-size:2.2rem; line-height:1 }
.timecard span{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; opacity:.9; font-family:var(--ff-body) }

.checklist li{ display:flex; gap:.7rem; padding:.5rem 0; align-items:flex-start }
.checklist .ic{ color:var(--sea-deep); margin-top:.15rem }
.warn{ background:#FFF3E9; border-left:4px solid var(--orange); padding:1rem 1.2rem; border-radius:10px;
  margin-top:1rem; font-size:.92rem; color:var(--terracotta) }

/* avertissement animé « ça saute aux yeux » */
.warn--alert{ display:flex; gap:.7rem; align-items:flex-start; font-weight:500;
  border-left-width:5px; border-color:var(--terracotta);
  background:linear-gradient(90deg,#FFE3D2,#FFF3E9);
  animation:warnPulse 1.8s ease-in-out infinite }
.warn__ic{ font-size:1.25rem; line-height:1.3; display:inline-block;
  animation:warnWiggle 1.8s ease-in-out infinite; transform-origin:50% 60% }
@keyframes warnPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(194,90,48,0) }
  50%{ box-shadow:0 0 0 7px rgba(194,90,48,.16) } }
@keyframes warnWiggle{
  0%,55%,100%{ transform:rotate(0) scale(1) }
  62%,82%{ transform:rotate(-12deg) scale(1.15) }
  72%{ transform:rotate(12deg) scale(1.15) } }
@media (prefers-reduced-motion:reduce){
  .warn--alert{ animation:none } .warn__ic{ animation:none } }

/* Checklist « À faire avant votre arrivée » (page d'accueil) */
.todo{ background:#fff; border:1px solid var(--line); border-top:5px solid var(--orange);
  border-radius:var(--radius); padding:1.6rem 1.6rem 1.3rem; box-shadow:var(--shadow); margin:2.2rem 0 1rem }
.todo__head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem }
.todo__ic{ font-size:1.7rem }
.todo__title{ font-family:var(--ff-display); font-size:clamp(1.5rem,3.2vw,2rem); line-height:1.05 }
.todo__list{ display:flex; flex-direction:column; gap:.8rem }
.todo__item{ display:flex; gap:1rem; padding:1.1rem 1.2rem; border:1px solid var(--line);
  border-radius:16px; background:var(--cream); align-items:flex-start; transition:opacity .3s, background .3s }
.todo__item.done{ opacity:.55; background:#F3F6F1 }
.todo__item--important{ border-color:var(--orange); border-left:4px solid var(--orange);
  background:linear-gradient(180deg,#FFF6EE,var(--cream)) }
.todo__badge{ font-family:var(--ff-body); font-size:.64rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; background:var(--orange); color:#fff; padding:.15rem .55rem; border-radius:999px;
  vertical-align:middle; white-space:nowrap }
.villa-select.pulse{ animation:selPulse 2.2s ease-in-out }
@keyframes selPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0) }
  15%,55%{ box-shadow:0 0 0 7px rgba(255,255,255,.55), 0 0 24px rgba(240,128,72,.6) } }
.todo__item.done .todo__body h3{ text-decoration:line-through }
.todo__check{ position:relative; flex:0 0 auto; width:28px; height:28px; cursor:pointer }
.todo__check input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0 }
.todo__check .box{ width:28px; height:28px; border-radius:9px; border:2px solid var(--orange);
  background:#fff; color:#fff; display:grid; place-items:center; font-size:1rem; font-weight:700;
  transition:.2s; box-shadow:var(--shadow-sm) }
.todo__check input:checked + .box{ background:var(--orange); transform:scale(1.05) }
.todo__check input:focus-visible + .box{ outline:3px solid rgba(240,128,72,.4); outline-offset:2px }
.todo__body{ flex:1 }
.todo__body h3{ font-family:var(--ff-display); font-size:1.3rem; margin-bottom:.15rem }
.todo__body p{ color:var(--ink-soft); font-size:.92rem }
.todo__btn{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.8rem;
  padding:.6rem 1.2rem; border-radius:999px; font-weight:500; font-size:.9rem; color:#fff;
  background:linear-gradient(135deg,var(--sea),var(--sea-deep)); box-shadow:0 8px 18px rgba(31,110,110,.32);
  transition:transform .3s var(--ease), box-shadow .3s }
.todo__btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(31,110,110,.42) }
.todo__btn--int{ background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  box-shadow:0 8px 18px rgba(217,97,42,.3) }
.todo__btn--int:hover{ box-shadow:0 12px 24px rgba(217,97,42,.42) }
.todo__warn{ margin-top:.8rem; background:#FFEDE0; border-left:4px solid var(--terracotta);
  padding:.7rem .95rem; border-radius:10px; font-size:.86rem; color:var(--terracotta); font-weight:500 }

/* ---------- WiFi flip card --------------------------------------------- */
.wifi-wrap{ display:grid; grid-template-columns:auto 1fr; gap:2.5rem; align-items:center; justify-content:center }
.flip{ width:260px; height:260px; perspective:1200px; cursor:pointer }
.flip__in{ position:relative; width:100%; height:100%; -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d; transition:transform .8s var(--ease) }
.flip.flipped .flip__in{ -webkit-transform:rotateY(180deg); transform:rotateY(180deg) }
.flip__face{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-radius:22px; overflow:hidden; display:grid; place-items:center; padding:1.4rem; text-align:center }
.flip__front{ background:linear-gradient(135deg,var(--sea),var(--sea-deep)); color:#fff }
.flip__front .ic{ font-size:3rem }
.flip__back{ background:#fff; -webkit-transform:rotateY(180deg); transform:rotateY(180deg);
  border:1px solid var(--line) }
.flip__back img{ width:90%; border-radius:12px }
.wifi-info h4{ font-family:var(--ff-display); font-size:1.8rem; margin-bottom:1rem }
.wifi-row{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:.9rem 1.1rem;
  margin-bottom:.7rem; box-shadow:var(--shadow-sm) }
.wifi-row small{ text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:var(--ink-soft) }
.wifi-row .val{ font-family:var(--ff-display); font-size:1.4rem; display:flex; align-items:center;
  justify-content:space-between; gap:1rem }
.copy-btn{ font-size:.72rem; background:var(--sand-2); padding:.3rem .7rem; border-radius:8px;
  color:var(--ink-soft); font-family:var(--ff-body); transition:.2s }
.copy-btn:hover{ background:var(--orange); color:#fff }
/* --- Wifi : identifiant + 3 tuiles interactives + guide (pleine largeur) --- */
.wifi-net{ font-family:var(--ff-display); font-size:1.7rem; margin-bottom:1rem }
.wifi-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin:1.5rem 0 }
.wifi-tiles .flip{ width:100%; height:auto; min-height:clamp(170px,19vw,230px); aspect-ratio:auto }
.wtile{ min-height:clamp(170px,19vw,230px); border:none; border-radius:22px; color:#fff; cursor:pointer;
  padding:1.2rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  text-align:center; box-shadow:var(--shadow); transition:transform .35s var(--ease), box-shadow .35s;
  font-family:inherit }
.wtile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg) }
.wtile-lbl{ font-family:var(--ff-display); font-size:1.25rem; line-height:1.15 }
.wtile--pass{ background:linear-gradient(135deg,var(--orange),var(--orange-deep)) }
.wtile--ios{ background:linear-gradient(135deg,var(--gold),#C8821F) }
.wtile--pass.done{ background:linear-gradient(135deg,#2e9e6b,#1f7a4e) }
/* icônes monochromes */
.wsvg{ width:46px; height:46px; display:block }
.wtile .wsvg, .wifi-tiles .flip__front .wsvg{ width:clamp(40px,4vw,52px); height:clamp(40px,4vw,52px);
  stroke-width:1.7 }
.wifi-tiles .flip__back{ padding:.6rem }
.wifi-tiles .flip__back img{ width:auto; height:auto;
  max-width:clamp(150px,17vw,200px); max-height:clamp(150px,17vw,200px); border-radius:8px }
.wifi-guide{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--sea);
  border-radius:14px; padding:1.3rem 1.6rem; box-shadow:var(--shadow-sm) }
.wifi-guide h4{ font-family:var(--ff-display); font-size:1.3rem; margin-bottom:.8rem }
.wifi-guide ul{ display:grid; gap:.7rem }
.wifi-guide li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.93rem; color:var(--ink-soft) }
.wifi-guide .gic{ flex:0 0 auto; display:grid; place-items:center }
.wifi-guide .gic .wsvg{ width:22px; height:22px }
.gic--qr{ color:var(--sea-deep) } .gic--pass{ color:var(--orange-deep) } .gic--ios{ color:#C8821F }
.wifi-guide b{ color:var(--ink) }
@media (max-width:560px){
  .wifi-tiles{ gap:.6rem }
  .wtile{ padding:.8rem; gap:.5rem; min-height:150px }
  .wifi-tiles .flip{ min-height:150px }
  .wifi-tiles .flip__back img{ max-width:120px; max-height:120px }
  .wtile-lbl{ font-size:.92rem }
}

/* ---------- Listing cards (restaurants/bars/activities/shops) ---------- */
.listing-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.4rem }
.lcard{ background:#fff; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s }
.lcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.lcard__media{ aspect-ratio:16/10; overflow:hidden; position:relative;
  background:linear-gradient(135deg,var(--orange-soft),var(--sea)) }
.lcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.lcard:hover .lcard__media img{ transform:scale(1.07) }
.lcard__ico{ position:absolute; inset:0; display:grid; place-items:center; font-size:3rem; color:#fff;
  text-shadow:0 4px 12px rgba(0,0,0,.25) }
.lcard__badge{ position:absolute; top:10px; left:10px; background:var(--glass); backdrop-filter:blur(6px);
  color:var(--orange-deep); padding:.25rem .7rem; border-radius:999px; font-size:.72rem; font-weight:600 }
.lcard__body{ padding:1.2rem 1.3rem 1.4rem; flex:1; display:flex; flex-direction:column }
.lcard__body h4{ font-family:var(--ff-display); font-size:1.4rem; margin-bottom:.3rem }
.lcard__body p{ color:var(--ink-soft); font-size:.88rem; flex:1 }
.lcard__links{ display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap }
.chip-link{ display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:500;
  padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line); transition:.25s }
.chip-link:hover{ background:var(--orange); color:#fff; border-color:var(--orange) }
.chip-link--gps{ color:var(--sea-deep); border-color:#bfe0e0 }
.chip-link--gps:hover{ background:var(--sea); color:#fff }
.chip-link--wa{ color:#128C4B; border-color:#a6e0bf }
.chip-link--wa:hover{ background:#25D366; color:#fff; border-color:#25D366 }
.contact-btns{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem }
/* WhatsApp — checklist + hôtes urgences */
.todo__btn--wa{ background:#25D366; box-shadow:0 8px 18px rgba(37,211,102,.32) }
.todo__btn--wa:hover{ box-shadow:0 12px 24px rgba(37,211,102,.44) }
.todo__btn + .todo__btn{ margin-left:.5rem }
.host-card__links{ display:flex; align-items:center; gap:.6rem; margin-top:.3rem; flex-wrap:wrap }
.host-card__links a{ margin-top:0 }
.host-wa{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:#25D366; color:#fff; font-size:1rem; flex:0 0 auto }
.host-wa:hover{ background:#1da851 }

/* ---------- Transport tabs --------------------------------------------- */
.tp-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.6rem }
.tp-tab{ padding:.6rem 1.2rem; border-radius:999px; border:1.5px solid var(--line); font-weight:500;
  font-size:.9rem; display:flex; align-items:center; gap:.45rem; transition:.25s }
.tp-tab.active{ background:var(--orange); color:#fff; border-color:var(--orange) }
.tp-panel{ display:none; animation:fade .5s var(--ease) }
.tp-panel.active{ display:block }
@keyframes fade{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.steps{ counter-reset:s; list-style:none; margin:0; padding:0 }
.steps li{ position:relative; padding:.65rem 0 .65rem 3rem; border-bottom:1px dashed var(--line);
  min-height:2rem }
.steps li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:.5rem;
  width:2rem; height:2rem; border-radius:50%; background:var(--orange); color:#fff;
  display:grid; place-items:center; font-weight:600; font-size:.9rem; box-shadow:0 4px 10px rgba(217,97,42,.3) }

/* rappel GPS animé (après les étapes en voiture) */
.gps-reminder{ display:flex; align-items:center; gap:1rem; margin-top:1.8rem; padding:1.1rem 1.4rem;
  border-radius:18px; background:linear-gradient(135deg,var(--orange),var(--orange-deep)); color:#fff;
  text-decoration:none; box-shadow:0 12px 28px rgba(217,97,42,.32);
  transition:transform .3s var(--ease), box-shadow .3s; position:relative; overflow:hidden }
.gps-reminder:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(217,97,42,.46) }
.gps-reminder__pin{ font-size:2rem; line-height:1; flex:0 0 auto }
.gps-reminder__txt{ display:flex; flex-direction:column; line-height:1.25 }
.gps-reminder__txt b{ font-family:var(--ff-display); font-size:1.25rem }
.gps-reminder__txt span{ font-size:.86rem; opacity:.92 }
.gps-reminder__arrow{ margin-left:auto; font-size:1.5rem; transition:transform .3s var(--ease) }
.gps-reminder:hover .gps-reminder__arrow{ transform:translateX(5px) }
@media (prefers-reduced-motion:no-preference){
  .gps-reminder{ animation:gpsPulse 2.4s ease-in-out infinite }
  .gps-reminder__pin{ animation:pinBounce 2.4s ease-in-out infinite; transform-origin:50% 90% }
}
@keyframes gpsPulse{ 0%,100%{ box-shadow:0 12px 28px rgba(217,97,42,.30) }
  50%{ box-shadow:0 14px 34px rgba(217,97,42,.5), 0 0 0 4px rgba(240,128,72,.20) } }
@keyframes pinBounce{ 0%,55%,100%{ transform:translateY(0) scale(1) }
  25%{ transform:translateY(-7px) scale(1.12) } 40%{ transform:translateY(-2px) scale(1.04) } }
.company-table{ display:grid; gap:.5rem; margin-top:1rem }
.company-row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:.7rem 1rem; box-shadow:var(--shadow-sm) }
.company-row b{ min-width:150px; font-weight:600 }
.company-name{ display:inline-flex; align-items:center; gap:.55rem }
.company-logo{ width:24px; height:24px; border-radius:6px; object-fit:contain; background:#fff;
  border:1px solid var(--line); padding:1px; flex:0 0 auto }
.company-logo--ph{ display:inline-grid; place-items:center; font-size:.95rem; background:var(--sand-2) }
.company-row a{ font-weight:500; transition:.2s }
.company-row .company-tel{ color:var(--sea-deep) }
.company-row .company-tel:hover{ color:var(--sea) }
.company-row .company-web{ color:var(--orange-deep); margin-left:auto }
.company-row .company-web:hover{ text-decoration:underline }
.pref-note{ font-size:.86rem; color:var(--ink-soft); font-style:italic; margin:.1rem 0 1rem }
.rental-sub{ display:flex; align-items:center; gap:.55rem; margin:1.6rem 0 .85rem; padding-top:1.2rem;
  border-top:1px solid var(--line); font-weight:600; color:var(--ink); font-size:1rem }
.rental-sub .ic{ font-size:1.15rem }

/* Où manger — cartes restaurants */
.resto-list{ display:grid; gap:1.1rem }
.resto{ display:grid; grid-template-columns:230px 1fr; background:#fff; border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); min-height:224px;
  transition:transform .3s var(--ease), box-shadow .3s }
.resto:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.resto:hover .resto__media img{ transform:scale(1.05) }
.resto__media{ position:relative; min-height:200px; overflow:hidden;
  background:linear-gradient(135deg,var(--orange-soft),var(--orange)) }
.resto__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease) }
.resto__media--none{ display:grid; place-items:center }
.resto__ph{ font-size:3.2rem; color:#fff; opacity:.9 }
.resto__time{ position:absolute; top:10px; left:10px; background:rgba(20,12,6,.6); backdrop-filter:blur(4px);
  color:#fff; font-size:.78rem; font-weight:600; padding:.3rem .7rem; border-radius:999px }
.resto__badge{ position:absolute; top:10px; right:10px; color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.02em; padding:.3rem .7rem; border-radius:999px; box-shadow:var(--shadow-sm) }
.resto__badge--star{ background:linear-gradient(135deg,#d8b24c,#a5812f) }
.resto__badge--must{ background:linear-gradient(135deg,#e8663f,#c23a1c) }
.resto__badge--love{ background:linear-gradient(135deg,#e84f7a,#c9295a) }
.resto__body{ padding:1.2rem 1.3rem; min-width:0 }
.resto__name{ font-family:var(--ff-display); font-size:1.6rem; line-height:1.05 }
.resto__type{ display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--orange-deep); font-weight:600; margin:.25rem 0 .5rem }
.resto__desc{ color:var(--ink-soft); font-size:.92rem; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.resto__resa{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.7rem; background:#FFE8E0;
  border:1px solid #F3B4A0; color:#C23A1C; font-weight:600; font-size:.82rem; padding:.35rem .75rem;
  border-radius:8px }
.resto__hours{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem; color:#5A6B52;
  font-weight:600; font-size:.82rem }
.resto__links{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem }
.chip-link--ig{ color:#C1358B; border-color:#eec2dd }
.chip-link--ig:hover{ background:#C1358B; color:#fff; border-color:#C1358B }
.chip-link--fb{ color:#1877F2; border-color:#bcd6fb }
.chip-link--michelin{ color:#B0122B; border-color:#f0c2ca }
.chip-link--michelin:hover{ background:#B0122B; color:#fff; border-color:#B0122B }
.chip-link--fb:hover{ background:#1877F2; color:#fff; border-color:#1877F2 }
@media (max-width:640px){
  .resto{ grid-template-columns:1fr; height:auto }
  .resto__media{ min-height:180px; height:180px }
}

/* Les plus belles plages */
.beach-list{ display:grid; gap:1.1rem }
.beach{ display:grid; grid-template-columns:250px 1fr; background:#fff; border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s }
.beach:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.beach:hover .beach__media img{ transform:scale(1.05) }
.beach__media{ position:relative; min-height:200px; overflow:hidden;
  background:linear-gradient(135deg,var(--sea),var(--sea-deep)) }
.beach__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease) }
.beach__media--none{ display:grid; place-items:center }
.beach__ph{ font-size:3.4rem; opacity:.85 }
.beach__rank{ position:absolute; top:10px; left:10px; width:38px; height:38px; border-radius:50%;
  background:rgba(20,12,6,.6); backdrop-filter:blur(4px); color:#fff; display:grid; place-items:center;
  font-family:var(--ff-display); font-size:1.3rem; box-shadow:var(--shadow-sm) }
.beach__credit{ position:absolute; bottom:0; left:0; right:0; font-size:.58rem; color:#fff; text-align:right;
  padding:.9rem .5rem .3rem; background:linear-gradient(transparent, rgba(0,0,0,.55)); line-height:1.2 }
.beach__body{ padding:1.2rem 1.3rem; min-width:0 }
.beach__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.beach__name{ font-family:var(--ff-display); font-size:1.5rem }
.beach__time{ font-size:.85rem; color:var(--orange-deep); font-weight:600; white-space:nowrap }
.beach__hl{ color:var(--ink-soft); font-size:.92rem; margin:.35rem 0 .7rem }
.beach__row{ font-size:.88rem; color:var(--ink-soft); margin-top:.25rem }
.beach__lbl{ font-weight:600; color:var(--ink) }
.beach .chip-link{ margin-top:.9rem }
@media (max-width:640px){
  .beach{ grid-template-columns:1fr }
  .beach__media{ min-height:170px }
}

/* Compagnies aériennes desservant Figari */
.be-note{ background:#FFF8E8; border:1px solid #F0D27A; border-radius:12px; padding:.8rem 1.1rem;
  font-size:.92rem; color:var(--ink); margin:.3rem 0 1.2rem; line-height:1.5 }
.be-note b{ color:var(--orange-deep) }
.airline-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:1rem; margin-bottom:1.8rem }
.airline{ position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.6rem;
  transition:transform .3s var(--ease), box-shadow .3s }
.airline:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.airline__head{ display:flex; align-items:center; gap:.6rem }
.airline__logo{ width:30px; height:30px; border-radius:7px; object-fit:contain; background:#fff;
  border:1px solid var(--line); padding:2px; flex:0 0 auto }
.airline__name{ font-family:var(--ff-display); font-size:1.35rem; line-height:1.1 }
.airline__dest{ font-size:.86rem; color:var(--ink-soft); line-height:1.5 }
.airline__destlabel{ font-weight:600; color:var(--ink) }
.airline__links{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; padding-top:.3rem }
/* mise en avant des compagnies vers la Belgique */
.airline--be{ border-color:var(--gold); background:linear-gradient(180deg,#FFFBF0,#fff);
  box-shadow:0 10px 26px rgba(233,162,59,.24) }
.airline__flag{ position:absolute; top:-11px; right:14px; background:#1b1b1b; color:#FFD500;
  font-weight:700; font-size:.74rem; letter-spacing:.02em; padding:.28rem .75rem; border-radius:999px;
  box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; gap:.3rem }

/* ---------- Pool / rules ----------------------------------------------- */
.rule-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem }
.rule-chip{ background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:1.3rem 1rem 1.1rem;
  text-align:center; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s;
  display:flex; flex-direction:column; align-items:center; gap:.55rem }
.rule-chip:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.rule-ic{ display:block }
.rule-ic img{ width:60px; height:60px; object-fit:contain; display:block }
.rule-lbl{ font-size:.88rem; color:var(--ink-soft); line-height:1.25 }
.rule-chip--grave{ border-color:var(--danger); background:#FFF5F3;
  box-shadow:0 6px 18px rgba(215,57,43,.14) }
.rule-chip--grave .rule-lbl{ color:var(--danger); font-weight:600 }
.rule-chip--grave .rule-ic img{ width:66px; height:66px }

/* À emporter — valise / checklist */
.provided{ background:#EAF6F6; border:1px solid #BFE0E0; border-left:4px solid var(--sea);
  border-radius:14px; padding:1.1rem 1.4rem; margin-bottom:1.4rem }
.provided h4{ font-family:var(--ff-display); font-size:1.25rem; color:var(--sea-deep); margin-bottom:.55rem }
.provided ul{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem }
.provided li{ display:flex; align-items:center; gap:.45rem; font-size:.93rem; font-weight:500 }
.pack-group{ margin-bottom:1.7rem }
.pack-group__t{ font-family:var(--ff-display); font-size:1.4rem; color:var(--orange-deep);
  margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem }
.pack-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.6rem }
.pack-item{ display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:.7rem .95rem; box-shadow:var(--shadow-sm); transition:opacity .25s, background .25s }
.pack-item.done{ opacity:.55; background:#F3F6F1 }
.pack-item.done .pack-lbl{ text-decoration:line-through }
.pack-check{ position:relative; width:24px; height:24px; flex:0 0 auto; cursor:pointer }
.pack-check input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0 }
.pack-check .box{ width:24px; height:24px; border-radius:7px; border:2px solid var(--orange); background:#fff;
  color:#fff; display:grid; place-items:center; font-size:.85rem; font-weight:700; transition:.2s }
.pack-check input:checked + .box{ background:var(--orange) }
.pack-check input:focus-visible + .box{ outline:3px solid rgba(240,128,72,.4); outline-offset:2px }
.pack-lbl{ font-size:.92rem }

/* Bon à savoir — précisions diplomatiques après les règles */
.notes-title{ font-family:var(--ff-display); font-size:1.6rem; margin:2.4rem 0 1rem; color:var(--ink) }
.notes{ display:grid; gap:.8rem }
.note{ display:flex; gap:.9rem; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--sea); border-radius:14px; padding:1rem 1.2rem; box-shadow:var(--shadow-sm) }
.note .ic{ font-size:1.4rem; line-height:1.3; flex:0 0 auto }
.note p{ color:var(--ink-soft); font-size:.94rem; line-height:1.55 }
.note{ transition:transform .3s var(--ease), border-color .3s, box-shadow .3s }
.note:hover{ transform:translateX(5px); border-left-color:var(--orange); box-shadow:var(--shadow) }
.note:hover .ic{ animation:noteBob .6s var(--ease) }
@keyframes noteBob{ 0%,100%{ transform:translateY(0) } 40%{ transform:translateY(-4px) rotate(-6deg) } }

/* --- mouvement & interactivité (règles) --- */
.rule-ic img{ transition:transform .35s var(--ease) }
.rule-chip:hover{ transform:translateY(-6px) }
.rule-chip:hover .rule-ic img{ transform:scale(1.12) rotate(-4deg) }
@media (prefers-reduced-motion:no-preference){
  .rule-chip--grave{ animation:gravePulse 2.6s ease-in-out infinite }
  .rule-chip--grave .rule-ic img{ animation:fireBreath 2.6s ease-in-out infinite }
  .rule-chip--grave:hover .rule-ic img{ animation:none }
}
@keyframes gravePulse{
  0%,100%{ box-shadow:0 6px 18px rgba(215,57,43,.14); border-color:var(--danger) }
  50%{ box-shadow:0 8px 28px rgba(215,57,43,.40); border-color:#b52b1f } }
@keyframes fireBreath{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.08) } }
.badge-list li{ display:flex; gap:.7rem; padding:.45rem 0; align-items:flex-start }
.badge-list .ic{ color:var(--sea-deep); margin-top:.1rem }
.quiet{ font-family:var(--ff-display); font-size:1.4rem; color:var(--sea-deep);
  margin-top:1.6rem; padding:1rem 1.2rem; background:linear-gradient(90deg,#EAF6F6,#fff);
  border-radius:14px; border:1px dashed var(--sea);
  display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; position:relative }
.quiet--anim{ cursor:pointer; transition:box-shadow .3s }
.quiet__face{ font-size:1.9rem; display:inline-block; transform-origin:60% 75%; line-height:1 }
.quiet__shh{ font-family:var(--ff-script); color:var(--sea); font-size:1.4rem; opacity:0 }
@media (prefers-reduced-motion:no-preference){
  .quiet--anim{ animation:quietPulse 3.2s ease-in-out infinite }
  .quiet--anim .quiet__face{ animation:shush 3.2s ease-in-out infinite }
  .quiet--anim .quiet__shh{ animation:shhFade 3.2s ease-in-out infinite }
  .quiet--anim:hover .quiet__face,.quiet--anim:focus .quiet__face,.quiet--anim.shushing .quiet__face{
    animation:shush .85s ease-in-out infinite }
  .quiet--anim:hover .quiet__shh,.quiet--anim:focus .quiet__shh,.quiet--anim.shushing .quiet__shh{
    opacity:1; animation:none }
}
@keyframes quietPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(46,139,139,0) }
  50%{ box-shadow:0 0 0 8px rgba(46,139,139,.13) } }
@keyframes shush{ 0%,62%,100%{ transform:scale(1) rotate(0) }
  12%{ transform:scale(1.22) rotate(-8deg) } 26%{ transform:scale(1.08) rotate(5deg) }
  40%{ transform:scale(1.16) rotate(-3deg) } }
@keyframes shhFade{ 0%,60%,100%{ opacity:0 } 14%,46%{ opacity:1 } }

.e112{ display:flex; align-items:center; gap:1.1rem; background:linear-gradient(135deg,#D7392B,#a01f14);
  color:#fff; border-radius:18px; padding:1.15rem 1.4rem; margin-bottom:1.1rem;
  box-shadow:0 14px 34px rgba(215,57,43,.4); transition:transform .3s var(--ease), box-shadow .3s }
.e112:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(215,57,43,.55) }
.e112__num{ font-family:var(--ff-display); font-size:3.1rem; line-height:1; font-weight:700; flex:0 0 auto }
.e112__txt{ display:flex; flex-direction:column; flex:1; min-width:0 }
.e112__txt b{ font-size:1.15rem; letter-spacing:.02em }
.e112__txt small{ opacity:.92; font-size:.82rem; line-height:1.35; margin-top:.15rem }
.e112__call{ font-size:1.7rem; flex:0 0 auto; animation:e112ring 1.8s ease-in-out infinite; transform-origin:50% 70% }
@keyframes e112ring{ 0%,70%,100%{ transform:rotate(0) } 75%,85%{ transform:rotate(12deg) } 80%,90%{ transform:rotate(-12deg) } }
@media (prefers-reduced-motion:reduce){ .e112__call{ animation:none } }
.e-addr{ display:flex; align-items:center; gap:.85rem; background:#FFF3E9; border:1px solid #F0D27A;
  border-radius:14px; padding:.85rem 1.1rem; margin-bottom:1.6rem; flex-wrap:wrap }
.e-addr__ic{ font-size:1.5rem; flex:0 0 auto }
.e-addr__body{ flex:1; min-width:180px }
.e-addr__body small{ display:block; text-transform:uppercase; letter-spacing:.05em; font-size:.7rem;
  color:var(--ink-soft); margin-bottom:.15rem }
.e-addr__val{ font-weight:600; color:var(--ink) }
.e-addr .chip-link{ flex:0 0 auto }
.icard__links{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.6rem }
.icard__links .tel{ margin-top:0 }
/* ---- Urgences : groupes de numéros ---- */
.enum-group{ margin-bottom:1.3rem }
.enum-group__title{ font-family:var(--ff-display); font-size:1.15rem; margin-bottom:.55rem;
  display:flex; align-items:center; gap:.5rem; color:var(--ink) }
.enum-group__title::before{ content:""; width:11px; height:11px; border-radius:50%; display:inline-block;
  box-shadow:0 0 0 4px rgba(0,0,0,.05) }
.enum-group__title--red::before{ background:#D7392B }
.enum-group__title--sea::before{ background:#2C7DA0 }
.enum-group__title--green::before{ background:#3E8E5A }
.enum-group__title--slate::before{ background:#5B6577 }
.enum-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:.9rem }
.enum{ display:flex; flex-direction:column; gap:.15rem; color:#fff; border-radius:16px; padding:1.05rem 1.15rem;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s;
  background:linear-gradient(135deg,#c0392b,#922b21) }
.enum:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.2) }
.enum__big{ font-size:2.4rem; font-family:var(--ff-display); line-height:1 }
.enum__tel{ font-size:1.35rem; font-family:var(--ff-display); line-height:1.1 }
.enum__lbl{ font-weight:600; font-size:.96rem; margin-top:.15rem }
.enum__note{ font-size:.78rem; opacity:.9; line-height:1.3 }
.enum__alt{ font-size:.8rem; opacity:.95; font-weight:600; margin-top:.1rem }
.enum--red{ background:linear-gradient(135deg,#D7392B,#a01f14) }
.enum--sea{ background:linear-gradient(135deg,#2C93BE,#1B6180) }
.enum--green{ background:linear-gradient(135deg,#46A066,#2C6E43) }
.enum--slate{ background:linear-gradient(135deg,#647087,#3E4658) }
/* ---- Urgences : encart médecin ---- */
.doctor-card{ background:linear-gradient(135deg,#EAF6F1,#ffffff); border:1px solid #BFE3D3;
  border-left:5px solid #2C7DA0; border-radius:16px; padding:1.4rem 1.5rem; margin:.4rem 0 1.7rem;
  box-shadow:var(--shadow-sm) }
.doctor-card__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem }
.doctor-card__ic{ font-size:1.7rem; animation:docPulse 2.6s ease-in-out infinite; transform-origin:50% 60% }
@keyframes docPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.14) } }
.doctor-card h3{ font-family:var(--ff-display); font-size:1.45rem; color:#1B6180 }
.doctor-card__lead{ color:var(--ink-soft); font-size:.95rem; line-height:1.55; margin-bottom:.75rem }
.doctor-card__points{ list-style:none; display:flex; flex-direction:column; gap:.35rem; margin:0 0 .85rem; padding:0 }
.doctor-card__points li{ position:relative; padding-left:1.6rem; font-size:.92rem; color:var(--ink) }
.doctor-card__points li::before{ content:"✓"; position:absolute; left:0; top:-1px; color:#3E8E5A; font-weight:800 }
.doctor-card__garde{ background:#fff; border:1px dashed #9FCFBB; border-radius:11px; padding:.65rem .85rem;
  font-size:.88rem; color:var(--ink-soft); line-height:1.45; margin-bottom:.95rem }
.doctor-card__actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.doctor-card__call{ display:inline-flex; align-items:center; gap:.4rem; background:linear-gradient(135deg,#46A066,#2C6E43);
  color:#fff; padding:.62rem 1.2rem; border-radius:999px; font-weight:700; font-size:.95rem;
  box-shadow:0 8px 20px rgba(46,110,67,.32); animation:docCall 2.2s ease-in-out infinite }
.doctor-card__call:hover{ filter:brightness(1.06) }
@keyframes docCall{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }
@media (prefers-reduced-motion:reduce){ .doctor-card__ic, .doctor-card__call{ animation:none } }
.host-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem }
.host-card{ flex:1; min-width:200px; background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  color:#fff; border-radius:16px; padding:1.2rem 1.4rem; box-shadow:var(--shadow) }
.host-card small{ opacity:.85; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem }
.host-card .name{ font-family:var(--ff-display); font-size:1.5rem }
.host-card a{ display:inline-block; margin-top:.3rem; font-weight:600 }

/* back-to-home floating */
.guide-foot{ text-align:center; padding:3.5rem 1rem; background:var(--sand) }

@media (max-width:820px){
  .gsplit, .wifi-wrap{ grid-template-columns:1fr }
  .gsplit--rev .gsplit__media{ order:0 }
  .flip{ margin:0 auto }
  .emergency-bar{ grid-template-columns:1fr }
  .gtabs{ top:56px }
}