/* __DESIGN_SITE__ */
/* ===================================================================
   Habillage unique — sextreff-mecklenburg-vorpommern.de (Astro)
   Direction : bleu Baltique + blanc + sable clair, registre « plage ».
   Zones stylées : sidebar desktop (.sidebar-inner / .sb-nav / .sb-silo-*),
   bandeau mobile (.mobile-guest-top) + barre d'onglets basse (.bottom-bar),
   footer (.footer-v1). Rien d'autre n'est touché.
   =================================================================== */

html:not(#_){
  --baltique:#01579b;       /* bleu Baltique, couleur de marque du site */
  --baltique-profond:#013a66;
  --baltique-clair:#4fc3f7; /* écume / ciel */
  --sable:#f4e6c4;
  --sable-fonce:#e3cd93;
  --ecume:#ffffff;
  --encre:#0b3550;          /* texte sur fond sable/blanc */
}

/* --- animations « plage » : filets d'eau qui dérivent lentement --- */
@keyframes derive-vague-fine{
  0%{background-position-x:0;} 100%{background-position-x:56px;}
}
@keyframes derive-vague-large{
  0%{background-position-x:0;} 100%{background-position-x:120px;}
}

/* ===================== SIDEBAR DESKTOP (fond blanc) ===================== */
/* Filet bleu ondulé en haut de la colonne, avant le logo */
html:not(#_) .sidebar-inner{
  background:var(--ecume);
  position:relative;
  padding-top:20px;
  scrollbar-width:thin;
  scrollbar-color:var(--sable-fonce) transparent;
}
html:not(#_) .sidebar-inner::before{
  content:'';
  position:absolute; top:0; left:0; width:100%; height:8px;
  background-repeat:repeat-x;
  background-size:56px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C7 0 7 8 14 4 C21 0 21 8 28 4 C35 0 35 8 42 4 C49 0 49 8 56 4' fill='none' stroke='%2301579b' stroke-width='2'/%3E%3C/svg%3E");
  animation:derive-vague-fine 9s linear infinite;
}

html:not(#_) .sb-logo-text{color:var(--baltique);font-weight:800;letter-spacing:.01em;}
html:not(#_) .sb-logo-dot{
  color:var(--baltique);
  background:var(--sable);
  border-radius:50%;
  padding:3px;
  display:inline-flex;
}

/* Disposition : la nav verticale devient une rangée de galets/pilules qui
   s'enroulent (flex-wrap), plus proche d'un ruban de plage qu'une liste. */
html:not(#_) .sb-nav{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 14px;}
html:not(#_) .sb-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(1,87,155,.22);
  background:var(--ecume); color:var(--baltique);
  font-weight:600; font-size:.85rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
html:not(#_) .sb-link:hover{
  background:var(--sable);
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(1,87,155,.18);
}
html:not(#_) .sb-link.active{
  background:linear-gradient(135deg,var(--baltique),var(--baltique-clair));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 12px rgba(1,87,155,.32);
}

html:not(#_) .sb-map-quick-link{
  display:inline-flex; align-items:center; gap:6px;
  margin:2px 0 12px; padding:8px 14px; border-radius:999px;
  background:var(--sable); color:var(--baltique-profond); font-weight:700; font-size:.82rem;
  transition:background .2s ease;
}
html:not(#_) .sb-map-quick-link:hover{background:var(--sable-fonce);}

html:not(#_) .sb-section-title{
  color:var(--baltique-profond); text-transform:uppercase;
  font-size:.72rem; letter-spacing:.11em; margin-top:16px;
}
html:not(#_) .sb-silo-region{color:var(--encre); font-weight:700;}
html:not(#_) .sb-silo-region:hover{color:var(--baltique);}
html:not(#_) .sb-chevron{color:var(--baltique);}
html:not(#_) .sb-silo-ville{color:var(--baltique); transition:color .15s ease;}
html:not(#_) .sb-silo-ville:hover{
  color:var(--baltique-profond);
  text-decoration:underline;
  text-decoration-style:wavy;
  text-decoration-color:var(--sable-fonce);
}

/* ===================== BANDEAU MOBILE (bleu Baltique) ===================== */
html:not(#_) .mobile-guest-top{
  background:linear-gradient(160deg,var(--baltique-profond),var(--baltique));
}
html:not(#_) .mobile-guest-head{border-bottom:1px solid rgba(255,255,255,.16);}
html:not(#_) .mobile-guest-brand{color:#fff; font-weight:800; letter-spacing:.01em;}
html:not(#_) .mobile-guest-login{
  color:#fff; background:rgba(255,255,255,.14);
  padding:6px 14px; border-radius:999px; font-weight:600; font-size:.82rem;
  transition:background .2s ease;
}
html:not(#_) .mobile-guest-login:hover{background:rgba(255,255,255,.24);}
html:not(#_) .mobile-guest-cta-offer{
  color:var(--sable); font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.05em;
}
html:not(#_) .mobile-guest-cta-kw{color:#fff; font-weight:800; font-size:1rem;}
html:not(#_) .mobile-guest-timer-label{color:rgba(255,255,255,.72); font-size:.68rem;}
html:not(#_) .mobile-guest-timer{color:var(--sable); font-weight:800; font-variant-numeric:tabular-nums;}
html:not(#_) .mobile-guest-cta-btn{
  background:var(--sable); color:var(--baltique-profond); font-weight:800;
  border-radius:999px; padding:12px 18px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
html:not(#_) .mobile-guest-cta-btn:hover, html:not(#_) .mobile-guest-cta-btn:active{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.24);
}

/* ===================== BARRE D'ONGLETS BASSE (mobile) ===================== */
html:not(#_) .bottom-bar{background:var(--ecume); border-top:1px solid var(--sable-fonce);}
html:not(#_) .btab{color:#5b7386; transition:color .15s ease;}
html:not(#_) .btab.active{color:var(--baltique);}
html:not(#_) .btab.active .btab-ico{
  display:inline-flex; background:var(--sable); border-radius:50%; padding:4px;
}
html:not(#_) .btab-lbl{font-weight:600;}

/* ===================== FOOTER (sable, vagues bleues en haut) ===================== */
html:not(#_) .footer-v1{
  background:var(--sable);
  color:var(--encre);
  position:relative;
}
html:not(#_) .footer-v1::before{
  content:'';
  position:absolute; top:0; left:0; width:100%; height:20px;
  background-repeat:repeat-x;
  background-size:120px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C15 2 15 18 30 10 C45 2 45 18 60 10 C75 2 75 18 90 10 C105 2 105 18 120 10 L120 20 L0 20 Z' fill='%2301579b'/%3E%3C/svg%3E");
  animation:derive-vague-large 15s linear infinite;
}
html:not(#_) .footer-v1 h4{color:var(--baltique-profond); font-size:.95rem; letter-spacing:.02em;}
html:not(#_) .footer-v1 p{color:var(--encre); opacity:.85;}
html:not(#_) .footer-v1 a{color:var(--baltique); text-decoration:none;}
html:not(#_) .footer-v1 a:hover{
  color:var(--baltique-profond);
  text-decoration:underline;
  text-decoration-style:wavy;
  text-decoration-color:var(--sable-fonce);
}

/* Disposition : 3 colonnes exactement (la 4e, vide, disparaît) et l'ordre
   met en avant les liens/villes ; le rappel de marque devient une carte. */
html:not(#_) .footer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
html:not(#_) .footer-grid > .footer-col:empty{display:none;}
html:not(#_) .footer-grid > .footer-col:nth-child(1){
  order:3; background:var(--ecume); border:1px solid var(--sable-fonce);
  border-radius:14px; padding:16px 18px; box-shadow:0 3px 10px rgba(1,87,155,.08);
}
html:not(#_) .footer-grid > .footer-col:nth-child(2){order:1;}
html:not(#_) .footer-grid > .footer-col:nth-child(3){order:2;}

html:not(#_) .footer-bottom{
  border-top:1px solid var(--sable-fonce);
  color:var(--encre); opacity:.7; text-align:center;
  padding-top:14px; margin-top:20px;
}

@media (max-width:700px){
  html:not(#_) .footer-grid{grid-template-columns:1fr;}
}

/* --- confort visuel : coupe toutes les dérives dès que demandé --- */
@media (prefers-reduced-motion:reduce){
  html:not(#_) .sidebar-inner::before, html:not(#_) .footer-v1::before{animation:none;}
  html:not(#_) .sb-link, html:not(#_) .mobile-guest-login, html:not(#_) .mobile-guest-cta-btn, html:not(#_) .btab{transition:none;}
}

/* ===================================================================
   DESIGN V3 — variante « cta-faq » + thème profond + menu mobile
   Registre inchangé : bleu Baltique / sable / écume, filets ondulés.
   =================================================================== */

/* --- a) recette de mise en page « astro · cta-faq », copiée telle quelle
   depuis app/design_recettes_v3.css (version du 18/09, ne pas simplifier
   les :where()). Confirmé sur ce site : les pages ville sortent
   section.cta-section suivi de section.section > .info-duo (pas de
   variante « onglets »). --- */
@media (min-width: 992px) {
  html:not(#_) body.design-v-cta-faq div.container:where(:has(> section.cta-section):has(> section.section .info-duo)){ display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  html:not(#_) body.design-v-cta-faq div.container:where(:has(> section.cta-section):has(> section.section .info-duo)) > *{ grid-column: 1 / -1; }
  html:not(#_) body.design-v-cta-faq div.container > section.cta-section, html:not(#_) body.design-v-cta-faq div.container > section.section:has(.info-duo){ grid-column: auto; align-self: stretch; }
  html:not(#_) body.design-v-cta-faq div.container > section.cta-section{ display: flex; flex-direction: column; justify-content: center; }
  html:not(#_) body.design-v-cta-faq div.container > section.section > .info-duo{ grid-template-columns: minmax(0, 1fr); }
}

/* --- b) thème profond : ce que le visiteur voit sur l'accueil (page unique
   du Land, en magazine-layout) et sur chaque page ville. --- */

/* En-tête de page (h1 « Sextreff Mecklenburg-Vorpommern », compteur de villes) */
html:not(#_) .page-header h1{
  color:var(--baltique-profond);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
html:not(#_) .page-header p{color:var(--baltique); font-weight:600;}
html:not(#_) .section > h2{color:var(--baltique-profond);}

/* Recherche de ville / de Land */
html:not(#_) .search-box{position:relative;}
html:not(#_) .search-icon{color:var(--baltique); opacity:.75;}
html:not(#_) .search-input{
  border:1px solid var(--sable-fonce);
  border-radius:999px;
  background:var(--ecume);
  color:var(--encre);
  transition:border-color .2s ease, box-shadow .2s ease;
}
html:not(#_) .search-input:focus{
  outline:none;
  border-color:var(--baltique-clair);
  box-shadow:0 0 0 3px rgba(79,195,247,.25);
}
html:not(#_) .links-grid .link-tag{
  border:1px solid var(--sable-fonce);
  background:var(--ecume);
  color:var(--baltique-profond);
  border-radius:999px;
  font-weight:600;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
html:not(#_) .links-grid .link-tag:hover{
  background:var(--baltique);
  color:var(--ecume);
  border-color:transparent;
}

/* Cartes profil */
html:not(#_) .profile-card{
  background:var(--ecume);
  border:1px solid var(--sable-fonce);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 3px 10px rgba(1,87,155,.10);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html:not(#_) .profile-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(1,87,155,.24);
  border-color:var(--baltique-clair);
}
html:not(#_) .profile-age{
  background:linear-gradient(135deg,var(--baltique-profond),var(--baltique));
  color:var(--ecume);
  border-radius:999px;
  font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
html:not(#_) .profile-lock{
  background:rgba(11,53,80,.55);
  border-radius:50%;
}
html:not(#_) .profile-title{color:var(--encre); opacity:.78;}
html:not(#_) .profile-name{color:var(--baltique-profond); font-weight:800;}
html:not(#_) .profile-ville{color:var(--baltique); font-weight:600;}
html:not(#_) .profile-footer{border-top:1px dashed var(--sable-fonce);}
html:not(#_) .profile-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--sable); color:var(--baltique-profond);
  border-radius:999px; font-weight:700;
  transition:background .2s ease;
}
html:not(#_) .profile-card:hover .profile-cta{background:var(--sable-fonce);}

/* Filtres (genre / âge) */
html:not(#_) .filter-btn{
  border:1px solid rgba(1,87,155,.28);
  background:var(--ecume); color:var(--baltique);
  border-radius:999px; font-weight:700;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
html:not(#_) .filter-btn:hover{background:var(--sable);}
html:not(#_) .filter-btn.active{
  background:linear-gradient(135deg,var(--baltique),var(--baltique-clair));
  color:var(--ecume); border-color:transparent;
  box-shadow:0 3px 10px rgba(1,87,155,.32);
}

/* Pagination */
html:not(#_) .pagination-link, html:not(#_) .pagination-current{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; border-radius:999px;
  border:1px solid var(--sable-fonce);
  color:var(--baltique-profond); font-weight:700;
  transition:background .2s ease, color .2s ease;
}
html:not(#_) .pagination-link:hover{background:var(--sable);}
html:not(#_) .pagination-current{
  background:linear-gradient(135deg,var(--baltique),var(--baltique-clair));
  color:var(--ecume); border-color:transparent;
}
html:not(#_) .pagination-arrow{font-weight:900;}
html:not(#_) .pagination-ellipsis{color:var(--baltique); opacity:.65;}

/* Bandeau CTA de milieu de page (une seule déclaration background-image,
   dégradé en dernier — pas de background: puis background-image: séparés) */
html:not(#_) .cta-section{
  position:relative; overflow:hidden;
  background-color:var(--baltique-profond);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C15 2 15 18 30 10 C45 2 45 18 60 10 C75 2 75 18 90 10 C105 2 105 18 120 10 L120 20 L0 20 Z' fill='rgba(255,255,255,0.10)'/%3E%3C/svg%3E"),linear-gradient(160deg,var(--baltique-profond),var(--baltique) 65%,var(--baltique-clair));
  background-repeat:repeat-x, no-repeat;
  background-position:bottom, center;
  background-size:120px 20px, cover;
  border-radius:20px;
  text-align:center;
}
html:not(#_) .cta-section h2{color:var(--ecume); font-weight:800;}
html:not(#_) .cta-section p{color:rgba(255,255,255,.86);}

/* Boutons partagés (CTA, age gate « Betreten »/« Verlassen », formulaires) */
html:not(#_) .btn.btn-primary{
  background:var(--sable); color:var(--baltique-profond);
  border:2px solid transparent; border-radius:999px;
  font-weight:800; min-height:44px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
html:not(#_) .btn.btn-primary:hover{
  background:var(--sable-fonce);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}
html:not(#_) .btn.btn-secondary, html:not(#_) a.btn.btn-secondary{
  background:transparent; color:var(--baltique-profond);
  border:2px solid var(--baltique); border-radius:999px;
  font-weight:700; min-height:44px;
  transition:background .2s ease, color .2s ease;
}
html:not(#_) .btn.btn-secondary:hover, html:not(#_) a.btn.btn-secondary:hover{background:var(--baltique); color:var(--ecume);}

/* FAQ / accordéon (page ville) */
html:not(#_) .info-duo-title{color:var(--baltique-profond);}
html:not(#_) .info-duo-title svg{color:var(--baltique);}
html:not(#_) .accordion-item{
  border:1px solid var(--sable-fonce); border-radius:14px;
  background:var(--ecume); overflow:hidden;
}
html:not(#_) .accordion-item + .accordion-item{margin-top:10px;}
html:not(#_) .accordion-header{color:var(--encre); font-weight:700; cursor:pointer;}
html:not(#_) .accordion-header::marker{color:var(--baltique);}
html:not(#_) .accordion-item[open] .accordion-header{
  background:var(--sable); color:var(--baltique-profond);
}
html:not(#_) .accordion-body{color:var(--encre); opacity:.85;}

/* Carte de ville (2e colonne du bloc info-duo) */
html:not(#_) .ville-map-card{
  border:1px solid var(--sable-fonce); border-radius:16px;
  overflow:hidden; box-shadow:0 3px 10px rgba(1,87,155,.10);
}
html:not(#_) .ville-map-header{
  background:linear-gradient(135deg,var(--baltique-profond),var(--baltique));
  color:var(--ecume);
}
html:not(#_) .ville-map-header h3{color:var(--ecume); margin:0;}
html:not(#_) .ville-map-badge{
  background:var(--sable); color:var(--baltique-profond);
  border-radius:999px; font-weight:700;
}

/* Bandeau de villes qui défile (accueil) */
html:not(#_) .regional-cities-strip{background:var(--sable); border-top:1px solid var(--sable-fonce); border-bottom:1px solid var(--sable-fonce);}
html:not(#_) .rcs-title{color:var(--baltique-profond); font-weight:800;}
html:not(#_) .rcs-fade-left{background:linear-gradient(90deg,var(--sable),rgba(244,230,196,0));}
html:not(#_) .rcs-fade-right{background:linear-gradient(270deg,var(--sable),rgba(244,230,196,0));}

/* Réassurance native (carrousel « Lokale Kontakte / Geprüfte Profile… ») :
   on la restyle dans le registre au lieu d'empiler un second bloc — cette
   variante (cta-faq) n'ajoute pas de bloc .ds-bloc, donc aucun risque de
   doublon de discours. */
html:not(#_) .trust-badges{background:var(--ecume); border-top:1px solid var(--sable-fonce); border-bottom:1px solid var(--sable-fonce);}
html:not(#_) .trust-item{
  background:var(--ecume); border:1px solid var(--sable-fonce); border-radius:14px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html:not(#_) .trust-item:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(1,87,155,.16); border-color:var(--baltique-clair);}
html:not(#_) .trust-icon{background:var(--sable); border-radius:50%;}
html:not(#_) .trust-title{color:var(--baltique-profond); font-weight:800;}
html:not(#_) .trust-desc{color:var(--encre); opacity:.8;}
html:not(#_) .trust-carousel-btn{
  background:var(--baltique); color:var(--ecume);
  border:none; border-radius:50%;
  transition:background .2s ease;
}
html:not(#_) .trust-carousel-btn:hover{background:var(--baltique-profond);}

/* Retour en haut (mobile et desktop) */
html:not(#_) #back-to-top.back-to-top{
  background:linear-gradient(135deg,var(--baltique),var(--baltique-clair));
  color:var(--ecume);
  border:2px solid var(--ecume);
  box-shadow:0 6px 18px rgba(1,87,155,.35);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
html:not(#_) #back-to-top.back-to-top:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(1,87,155,.45);
}

/* Pop-up profil (#profileModal) — cadre et boutons, jamais display/position/transform/overflow */
html:not(#_) #profileModal .modal-content{
  background:var(--ecume);
  border-radius:20px;
  border:1px solid var(--sable-fonce);
  box-shadow:0 24px 60px rgba(1,53,80,.4);
}
html:not(#_) #profileModal .modal-close{
  background:var(--sable); color:var(--baltique-profond);
  border-radius:50%;
}
html:not(#_) #profileModal .modal-close:hover{background:var(--sable-fonce);}
html:not(#_) #profileModal .modal-cta-overlay{background:rgba(1,53,80,.72); color:var(--ecume);}
html:not(#_) #profileModal .btn-cta-overlay{
  background:var(--sable); color:var(--baltique-profond);
  border:none; border-radius:999px; font-weight:800;
  transition:background .2s ease;
}
html:not(#_) #profileModal .btn-cta-overlay:hover{background:var(--sable-fonce);}

/* Pop-up inscription / connexion (.popup-card) — couleurs, bordures, rayons seulement */
html:not(#_) .popup-card{
  background:var(--ecume);
  border-radius:20px;
  border:1px solid var(--sable-fonce);
  box-shadow:0 24px 60px rgba(1,53,80,.4);
}
html:not(#_) .popup-icon{color:var(--baltique);}
html:not(#_) .popup-title{color:var(--baltique-profond); font-weight:800;}
html:not(#_) .popup-desc{color:var(--encre); opacity:.8;}
html:not(#_) .popup-close{
  background:var(--sable); color:var(--baltique-profond);
  border-radius:50%;
}
html:not(#_) .popup-close:hover{background:var(--sable-fonce);}
html:not(#_) .popup-footer{color:var(--encre);}
html:not(#_) .popup-footer a{color:var(--baltique); font-weight:700;}
html:not(#_) .popup-footer a:hover{color:var(--baltique-profond);}

/* Age gate — couleurs, bordures, rayons seulement */
html:not(#_) .age-gate-modal{
  background:var(--ecume); color:var(--encre);
  border-radius:20px; border:1px solid var(--sable-fonce);
  box-shadow:0 24px 60px rgba(1,53,80,.4);
}
html:not(#_) .age-gate-modal h2{color:var(--baltique-profond);}
html:not(#_) .age-gate-lead, html:not(#_) .age-gate-body, html:not(#_) .age-gate-actions{color:var(--encre);}

/* Footer réel du site : classes .footer-v2 (pas .footer-v1/.footer-grid,
   inutilisées ici mais laissées telles quelles). Même registre « vagues ». */
html:not(#_) .footer-v2{
  background:var(--sable);
  color:var(--encre);
  position:relative;
}
html:not(#_) .footer-v2::before{
  content:'';
  position:absolute; top:0; left:0; width:100%; height:20px;
  background-repeat:repeat-x;
  background-size:120px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C15 2 15 18 30 10 C45 2 45 18 60 10 C75 2 75 18 90 10 C105 2 105 18 120 10 L120 20 L0 20 Z' fill='%2301579b'/%3E%3C/svg%3E");
  animation:derive-vague-large 15s linear infinite;
}
html:not(#_) .footer-inner{position:relative; z-index:1;}
html:not(#_) .footer-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;}
html:not(#_) .footer-logo{color:var(--baltique-profond) !important; font-weight:800; font-size:1.05rem;}
html:not(#_) .footer-links{display:flex; flex-wrap:wrap; gap:8px 16px;}
html:not(#_) .footer-links a{color:var(--baltique); text-decoration:none;}
html:not(#_) .footer-links a:hover{
  color:var(--baltique-profond);
  text-decoration:underline;
  text-decoration-style:wavy;
  text-decoration-color:var(--sable-fonce);
}
html:not(#_) .footer-copy{color:var(--encre); opacity:.7; width:100%;}

/* --- d) menu mobile (sidebar cachée sous 768 px) : socle mécanique copié
   TEL QUEL depuis app/design_recettes_v3.css (menu mobile Astro, 18/09),
   seules les couleurs sont changées (currentColor de la barre haute pour
   le burger, teinte baltique pour le calque, sable/encre pour la fermeture) —
   display/position des trois règles body:has() intouchés. --- */
@media (max-width: 768px) {
  html:not(#_) .ds-burger{ display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 34px; padding: 0 9px; margin-right: 8px; cursor: pointer; border-radius: 8px; color: var(--ecume); flex-shrink: 0; transition:background .2s ease; }
  html:not(#_) .ds-burger:hover{ background: rgba(255,255,255,.14); }
  html:not(#_) .ds-burger span{ display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(2){ opacity: 0; }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
  html:not(#_) .ds-menu-overlay{ display: none; position: fixed; inset: 0; background: rgba(1,58,102,.55); z-index: 1290; }
  html:not(#_) body:has(#ds-menu:checked) .ds-menu-overlay{ display: block; }
  html:not(#_) .ds-menu-close{ display: none; }
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar{ display: block !important; position: fixed !important; top: 0 !important; left: 0; bottom: 0; height: auto !important; width: min(86vw, 340px) !important; max-width: none; margin: 0 !important; padding: 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 1300; overflow-y: auto !important; border-radius: 0; box-shadow: 8px 0 30px rgba(0,0,0,.35); }
  html:not(#_) body:has(#ds-menu:checked) .ds-menu-close{ display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; background: var(--sable); color: var(--baltique-profond); }
  html:not(#_) body:has(#ds-menu:checked) .ds-menu-close:hover{ background: var(--sable-fonce); }
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sidebar-inner{ height: auto; min-height: 100%; }
  html:not(#_) body:has(#ds-menu:checked){ overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { html:not(#_) .ds-burger span{ transition: none; } }

/* --- confort visuel (v3) : coupe les transitions ajoutées ci-dessus --- */
@media (prefers-reduced-motion:reduce){
  html:not(#_) .profile-card, html:not(#_) .profile-cta, html:not(#_) .filter-btn, html:not(#_) .pagination-link, html:not(#_) .btn.btn-primary, html:not(#_) .btn.btn-secondary, html:not(#_) a.btn.btn-secondary, html:not(#_) .trust-item, html:not(#_) .trust-carousel-btn, html:not(#_) #back-to-top.back-to-top, html:not(#_) #profileModal .modal-close, html:not(#_) #profileModal .btn-cta-overlay, html:not(#_) .popup-close, html:not(#_) .search-input, html:not(#_) .links-grid .link-tag, html:not(#_) .ds-burger{transition:none;}
  html:not(#_) .footer-v2::before{animation:none;}
}

@media (prefers-reduced-motion: reduce){html:not(#_) .sidebar-inner{animation:none !important;transition:none !important;}}
/* __END_DESIGN_SITE__ */