/* =========================================================
   Affection — feuille de style commune du site statique
   Palette alignée sur le logo AffectionPlus : violet profond,
   pervenche, accents orange / bleu / vert, cœur rouge.
   ========================================================= */

:root {
  --color-primary: #580378;        /* violet profond du logo AffectionPlus */
  --color-primary-dark: #3F0257;   /* violet très foncé - hover, titres forts */
  --color-secondary: #5E60D8;      /* pervenche du logo, assombrie pour la lisibilité */
  --color-secondary-dark: #3E40A8;
  --color-heart: #D6001C;          /* rouge du cœur Affection */
  --color-accent-orange: #C96A12;  /* orange (assombri pour lisibilité) */
  --color-accent-blue: #3F6FA8;    /* bleu (assombri pour lisibilité) */
  --color-accent-green: #4C7A1A;   /* vert (assombri pour lisibilité) */

  --color-bg: #FFFFFF;
  --color-bg-soft: #F2F3FF;        /* pervenche très clair, couleur de thème d'Affection */
  --color-bg-muted: #F8F8FF;
  --color-border: #DADBF5;
  --color-text: #221B2B;
  --color-text-muted: #635B70;

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-width: 980px;
  --radius: 14px;
  --shadow: 0 4px 18px rgba(95, 41, 125, 0.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 17px;
}

img { max-width: 100%; display: block; }

a {
  color: var(--color-secondary);
  text-decoration: none;
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Bandeau / en-tête ---------- */

.site-header {
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  padding: 18px 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.site-logo {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.site-logo span { font-weight: 300; opacity: 0.85; }
.site-logo:hover { color: #fff; text-decoration: none; opacity: 0.9; }

.site-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.site-nav a {
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.12);
  transition: background 0.15s ease;
}
.site-nav a:hover {
  background: rgba(255,255,255,0.28);
  text-decoration: none;
}
/* la rubrique courante doit se voir au premier coup d'oeil */
.site-nav a.active, .site-nav a[aria-current="page"] {
  background: #fff;
  color: var(--color-primary-dark);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.site-nav a.active:hover, .site-nav a[aria-current="page"]:hover {
  background: #fff;
  color: var(--color-primary-dark);
}

/* ---------- Fil d'ariane ---------- */
.breadcrumb {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 18px 0 6px;
}
.breadcrumb a { color: var(--color-secondary); }

/* ---------- Bannière de page (titre de section/article) ---------- */
.page-banner {
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  padding: 34px 0 26px;
  margin-bottom: 30px;
}
.page-banner h1 {
  margin: 0 0 8px;
  color: var(--color-primary-dark);
  font-size: 2rem;
}
.page-banner p.lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.08rem;
  max-width: 700px;
}

/* ---------- Contenu ---------- */
main { padding-bottom: 50px; }

.content { max-width: 760px; }

h1, h2, h3, h4 { color: var(--color-secondary-dark); line-height: 1.3; }
h2 { border-bottom: 2px solid var(--color-border); padding-bottom: 6px; margin-top: 2.2em; }
h3 { color: var(--color-primary-dark); margin-top: 1.6em; }

.accent-orange { color: var(--color-accent-orange); }
.accent-blue { color: var(--color-accent-blue); }
.accent-green { color: var(--color-accent-green); }
.accent-violet { color: var(--color-secondary); }

.lead { font-size: 1.1rem; color: var(--color-text-muted); }

ul.clean, ol.clean { padding-left: 1.2em; }
ul.clean li, ol.clean li { margin-bottom: 0.5em; }

blockquote {
  margin: 1.5em 0;
  padding: 14px 20px;
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  color: var(--color-text);
}

.callout {
  margin: 1.8em 0;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg-muted);
}
.callout h4 {
  margin: 0 0 6px;
  color: var(--color-primary-dark);
  font-size: 1rem;
}
.callout.warning { border-color: #f0c98d; background: #fff8ec; }
.callout.warning h4 { color: #a15c00; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
  font-size: 0.95rem;
}
th, td {
  border: 1px solid var(--color-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
th { background: var(--color-bg-soft); color: var(--color-secondary-dark); }

/* ---------- Grille de cartes (pages d'accueil de section) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  color: var(--color-text);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(95, 41, 125, 0.18);
  text-decoration: none;
}
.card h3 {
  margin: 0 0 8px;
  color: var(--color-primary-dark);
  font-size: 1.15rem;
}
.card p { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; }

/* ---------- Page d'accueil du site ---------- */
.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  padding: 70px 0 60px;
  text-align: center;
}
.hero h1 { color: #fff; font-size: 2.4rem; margin: 0 0 14px; }
.hero p { max-width: 600px; margin: 0 auto; font-size: 1.15rem; opacity: 0.95; }

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  margin: 40px 0;
}

.section-card {
  display: block;
  border-radius: var(--radius);
  padding: 30px 22px;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}
.section-card:hover { transform: translateY(-4px); text-decoration: none; }
.section-card h2 { color: #fff; border: none; margin: 0 0 8px; font-size: 1.4rem; }
.section-card p { color: rgba(255,255,255,0.9); margin: 0; font-size: 0.95rem; }

.section-card.sexualite { background: linear-gradient(135deg, #7A1FA0, #580378); }
.section-card.sante { background: linear-gradient(135deg, #3F6FA8, #2c5686); }
.section-card.horoscope { background: linear-gradient(135deg, #5E60D8, #3E40A8); }
.section-card.mariage { background: linear-gradient(135deg, #E8892B, #c56d17); }
.section-card.conseils { background: linear-gradient(135deg, #5C8A1E, #446818); }
.section-card.prenoms { background: linear-gradient(135deg, #C0399B, #982e7a); }
.section-card.droits { background: linear-gradient(135deg, #4F518C, #393b68); }

/* ---------- Pied de page ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 26px 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  text-align: center;
}
.site-footer a { color: var(--color-text-muted); text-decoration: underline; }

/* ---------- Pied de page : liens et reseaux sociaux ---------- */
.site-footer .footlinks { margin: 10px 0 0; }
.site-footer .social {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.site-footer .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-secondary);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.site-footer .social a:hover,
.site-footer .social a:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---------- Divers ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.tag {
  background: var(--color-bg-soft);
  color: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.85rem;
}

.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 40px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .hero { padding: 50px 0 40px; }
  .hero h1 { font-size: 1.8rem; }
  .page-banner h1 { font-size: 1.6rem; }
}

/* ---------- Illustrations ---------- */
.page-illustration {
  margin: 20px 0 0;
}
.page-illustration svg {
  display: block;
  width: 110px;
  height: 110px;
}
.hero-illustration {
  margin: 0 auto 14px;
  width: 150px;
  height: 150px;
}
.hero-illustration svg { display: block; width: 100%; height: 100%; }
/* le coeur est POSE sur une pastille claire : c'est le conteneur qui est rond,
   jamais l'image — un arrondi applique a l'image rognerait les lobes du coeur */
.hero-illustration.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.hero-illustration.badge img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 0;
}
.card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
}
.card-icon svg { display: block; width: 100%; height: 100%; }

/* ---------- Sélecteur de langue ---------- */
.lang-switch { display: flex; gap: 6px; align-items: center; }
.lang-switch > a, .lang-switch > span {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 9px;
  border-radius: 6px;
}
.lang-switch > a { background: rgba(255,255,255,0.12); }
.lang-switch > a:hover { background: rgba(255,255,255,0.32); text-decoration: none; color: #fff; }
.lang-switch > span { background: rgba(255,255,255,0.38); }

/* ---------- Page de choix de langue ---------- */
.lang-home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  padding: 40px 20px;
}
.lang-home-inner { max-width: 760px; width: 100%; text-align: center; color: #fff; }
.lang-home h1 { color: #fff; font-size: 2.6rem; margin: 0 0 10px; }
.lang-home h1 span { font-weight: 300; opacity: 0.85; }
.lang-home .tagline { opacity: 0.92; font-size: 1.05rem; margin: 0 0 34px; }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.lang-card {
  display: block;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius);
  padding: 22px 16px;
  color: #fff;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lang-card:hover { background: rgba(255,255,255,0.26); transform: translateY(-3px); text-decoration: none; color: #fff; }
.lang-card strong { display: block; font-size: 1.25rem; margin-bottom: 4px; }
.lang-card span { font-size: 0.9rem; opacity: 0.88; }
.lang-card.soon { opacity: 0.45; pointer-events: none; }

/* ---------- Illustrations et cartes ---------- */
.figure-map {
  margin: 1.6rem 0;
}
.figure-map img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-muted);
}
.figure-map figcaption {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------- Partage de la page ---------- */
.share {
  margin: 2rem 0 0.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.share p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary);
}
.share ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-secondary);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.share a:hover, .share a:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}
.share svg { width: 20px; height: 20px; fill: currentColor; }

/* Questions frequentes */
details.faq{border:1px solid var(--color-border);border-radius:8px;background:var(--color-bg-muted);margin:.6rem 0;padding:.2rem .9rem}
details.faq+details.faq{margin-top:.5rem}
details.faq summary{cursor:pointer;font-weight:600;color:var(--color-primary-dark);padding:.7rem 0;list-style:none;display:flex;align-items:flex-start;gap:.6rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";font-weight:700;line-height:1.2;color:var(--color-secondary)}
details.faq[open] summary::before{content:"\2013"}
details.faq[open] summary{border-bottom:1px solid var(--color-border)}
details.faq p{margin:.7rem 0 .9rem}

/* ===== En-tete responsive, logo, recherche ===== */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- disposition large : deux lignes ---- */
.site-header{padding:14px 0 10px}
.site-header .container{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;max-width:1280px}

.site-logo{order:1;flex:0 0 auto;display:inline-flex;align-items:center;line-height:1}
.site-logo img{display:block;height:80px;width:auto}
.site-logo:hover{opacity:.92}
.site-logo-text{display:none;font-size:1.45rem;font-weight:700;color:#fff;letter-spacing:.5px}
.site-logo-text span{font-weight:300;opacity:.85}

.site-search{order:2;flex:0 1 340px;margin-left:auto;display:flex;align-items:center;min-width:0;
  background:rgba(255,255,255,.16);border-radius:999px;padding:3px 3px 3px 16px}
.site-search input{flex:1 1 auto;min-width:0;border:0;background:transparent;color:#fff;
  font:inherit;font-size:.95rem;padding:8px 0;outline:none}
.site-search input::placeholder{color:rgba(255,255,255,.75)}
.site-search button{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.24);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.site-search button:hover{background:rgba(255,255,255,.4)}
.site-search svg{width:17px;height:17px;fill:#fff}

.lang-switch{order:3;flex:0 0 auto}

.site-nav{order:4;flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;
  margin-top:2px;padding-top:10px;border-top:1px solid rgba(255,255,255,.22)}

.nav-toggle{display:none;flex:0 0 auto;width:44px;height:44px;padding:0;border:0;border-radius:10px;
  background:rgba(255,255,255,.16);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle:hover{background:rgba(255,255,255,.28)}
.nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1100px){
  .site-logo img{height:66px}
  .site-search{flex-basis:260px}
  .site-nav a{padding:7px 11px;font-size:.9rem}
}

/* ---- tablette et telephone : pastilles sur une ligne ---- */
@media (max-width:820px){
  .site-header{padding:12px 0}
  .site-header .container{gap:8px 10px;max-width:980px}
  .site-logo{order:1}
  .site-logo img{display:none}
  .site-logo-text{display:inline;font-size:1.25rem}
  .lang-switch{order:2;margin-left:auto}
  .nav-toggle{order:3}
  .site-search{order:4;flex:1 1 100%;margin-left:0}
  .site-nav{order:5;flex:1 0 100%;display:flex;flex-direction:row;flex-wrap:nowrap;
    justify-content:space-between;gap:4px;margin-top:2px;padding-top:8px;overflow:hidden}
  .site-nav a{flex:0 0 auto;padding:8px 10px;font-size:.88rem;white-space:nowrap}
}

/* sur telephone, le lien externe Rencontre disparait pour tenir sur une ligne */
@media (max-width:640px){
  .nav-ext{display:none}
  .site-nav a{padding:7px 9px;font-size:.83rem}
  .site-logo-text{font-size:1.15rem}
}
@media (max-width:420px){
  .site-nav a{padding:6px 7px;font-size:.77rem}
}

/* ---- burger : uniquement si le menu ne tient pas sur une ligne (classe posee par site.js) ---- */
.site-header.needs-burger .nav-toggle{display:flex}
.site-header.needs-burger .site-nav{display:none;flex-direction:column;align-items:stretch;
  flex-wrap:wrap;overflow:visible;gap:4px;justify-content:flex-start}
.site-header.needs-burger .site-nav.open{display:flex}
.site-header.needs-burger .site-nav a{border-radius:10px;padding:11px 14px;font-size:1rem;
  background:rgba(255,255,255,.1);white-space:normal}

@media (max-width:420px){
  .site-logo-text{font-size:1.05rem}
}

/* --- reseaux : VK --- */
.site-footer .social a.vk svg,.share a svg{fill:currentColor}

/* --- page de recherche --- */
.search-box{display:flex;gap:10px;margin:0 0 6px;flex-wrap:wrap}
.search-box input[type=search]{flex:1 1 260px;min-width:0;padding:12px 16px;font:inherit;
  border:1px solid var(--color-border);border-radius:10px;background:#fff;color:var(--color-text)}
.search-box input[type=search]:focus{outline:2px solid var(--color-secondary);outline-offset:1px}
.search-box button{padding:12px 20px;font:inherit;font-weight:600;border:0;border-radius:10px;
  background:var(--color-primary);color:#fff;cursor:pointer}
.search-box button:hover{background:var(--color-primary-dark)}
.search-count{color:var(--color-text-muted);font-size:.94rem;margin:.4rem 0 1rem}
.search-results{list-style:none;padding:0;margin:0}
.search-results li{padding:14px 0;border-bottom:1px solid var(--color-border)}
.search-results a{font-weight:600;font-size:1.05rem}
.search-results p{margin:.25rem 0 0;color:var(--color-text-muted);font-size:.94rem}
.search-results .crumb{display:block;font-size:.8rem;color:var(--color-secondary-dark);margin-bottom:2px}
mark{background:#FFF1A8;color:inherit;padding:0 1px;border-radius:2px}

.button{display:inline-block;padding:11px 22px;border-radius:10px;background:var(--color-primary);
  color:#fff;font-weight:600;text-decoration:none}
.button:hover{background:var(--color-primary-dark);color:#fff;text-decoration:none}

/* --- page de recherche : formulaire collé au menu, note discrète en bas --- */
.search-top{margin-top:22px}
.search-note{margin-top:34px;padding-top:18px;border-top:1px solid var(--color-border);
  font-size:.92rem;color:var(--color-text-muted);max-width:760px}
.search-note p{margin:.5rem 0}
.search-note .button{margin-top:.6rem}

/* --- comparateur pays a pays --- */
.cmp-form{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;margin:20px 0 6px}
.cmp-champ{display:flex;flex-direction:column;gap:5px;flex:1 1 200px;min-width:180px}
.cmp-form label{font-weight:600;color:var(--color-secondary-dark);font-size:.94rem}
.cmp-form select{width:100%}
.cmp-form select{padding:9px 12px;font:inherit;border:1px solid var(--color-border);border-radius:8px;
  background:#fff;color:var(--color-text);max-width:100%;min-width:150px}
.cmp-out{margin:10px 0 0}
table.cmp{width:100%;border-collapse:collapse;font-size:.94rem;margin:14px 0}
table.cmp th,table.cmp td{border:1px solid var(--color-border);padding:10px 12px;text-align:left;vertical-align:top}
table.cmp thead th{background:var(--color-primary);color:#fff;font-size:1rem}
table.cmp tbody th{background:var(--color-bg-soft);color:var(--color-secondary-dark);width:22%;font-weight:600}
table.cmp tbody tr:nth-child(even) td{background:var(--color-bg-muted)}
.cmp-links{display:flex;flex-wrap:wrap;gap:12px;margin:.6rem 0 0}
.cmp-links a{font-weight:600}
.cmp-note{color:var(--color-text-muted);font-size:.92rem}
@media (max-width:640px){
  table.cmp tbody th{width:auto;display:block;border-bottom:0}
  table.cmp td{display:block;border-top:0}
  table.cmp thead{display:none}
  table.cmp tbody td:before{content:attr(data-h);font-weight:600;color:var(--color-secondary-dark);display:block}
}

/* --- calculateurs --- */
.calc{background:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:var(--radius);
  padding:18px 20px;margin:22px 0}
.calc .row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:.55rem 0}
.calc label{flex:1 1 230px;font-size:.95rem}
.calc input[type=number],.calc select{flex:0 0 150px;padding:8px 10px;font:inherit;border:1px solid var(--color-border);
  border-radius:8px;background:#fff;color:var(--color-text)}
.calc output{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--color-border);
  font-size:1.05rem;color:var(--color-secondary-dark)}
.calc .big{font-size:1.6rem;font-weight:700;color:var(--color-primary-dark);display:block;margin:.2rem 0}
.calc .hint{color:var(--color-text-muted);font-size:.88rem}

/* --- lexique --- */
dl.lex{margin:1.4rem 0}
dl.lex dt{font-weight:700;color:var(--color-primary-dark);margin-top:1.1rem;scroll-margin-top:90px}
dl.lex dd{margin:.25rem 0 0;padding-left:0;color:var(--color-text)}
a.lex{border-bottom:1px dotted var(--color-secondary);text-decoration:none}
a.lex:hover{border-bottom-style:solid}
.maj{margin:2.2rem 0 0;padding-top:12px;border-top:1px solid var(--color-border);
  font-size:.85rem;color:var(--color-text-muted)}

/* --- parcours par situation, sur l'accueil --- */
.situ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:18px 0 34px}
details.situ{border:1px solid var(--color-border);border-radius:var(--radius);background:#fff;
  box-shadow:var(--shadow);padding:2px 18px}
details.situ summary{cursor:pointer;font-weight:600;color:var(--color-primary-dark);padding:14px 0;
  list-style:none;display:flex;gap:.6rem;align-items:flex-start}
details.situ summary::-webkit-details-marker{display:none}
details.situ summary::before{content:"\203A";font-weight:700;color:var(--color-secondary);transform:rotate(0);
  transition:transform .15s ease}
details.situ[open] summary::before{transform:rotate(90deg)}
details.situ ul{margin:.2rem 0 1rem}


/* ---- liens automatiques vers les pages du site ---- */
a.autolink{color:var(--color-secondary-dark);text-decoration:none;
  border-bottom:1px dotted var(--color-border);}
a.autolink:hover,a.autolink:focus{color:var(--color-primary);
  border-bottom-color:var(--color-primary);}

/* ---- pied de page : nous ecrire ---- */
.askus{max-width:var(--max-width);margin:2rem auto .5rem;padding:.9rem 1.1rem;
  background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:10px;
  font-size:.95rem;color:var(--color-text);}
.askus a{color:var(--color-primary);text-decoration:underline;}
.content .askus{margin:1.2rem 0 0;}


/* ---- lien d'evitement clavier ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--color-primary);color:#fff;padding:.6rem 1rem;
  border-radius:0 0 8px 0;text-decoration:none;font-weight:600;}
.skip-link:focus{left:0;outline:3px solid var(--color-secondary);outline-offset:2px;}


/* ---- arborescence d'une rubrique ---- */
ul.tree{list-style:none;padding:0;margin:.8rem 0 0;}
ul.tree>li{margin:0 0 .75rem;padding:0 0 .75rem;border-bottom:1px solid var(--color-border);}
ul.tree>li:last-child{border-bottom:0;}
ul.tree>li>a{font-weight:600;color:var(--color-primary);text-decoration:none;}
ul.tree>li>a:hover,ul.tree>li>a:focus{text-decoration:underline;}
ul.tree .kids{display:block;margin:.3rem 0 0 1.6rem;font-size:.93rem;line-height:1.75;
  color:var(--color-text-muted);}
ul.tree .kids a{color:var(--color-secondary-dark);text-decoration:none;}
ul.tree .kids a:hover,ul.tree .kids a:focus{text-decoration:underline;}
ul.tree .kids.pays{font-style:italic;font-size:.88rem;}
@media (max-width:640px){ul.tree .kids{margin-left:1rem;}}


/* ---- une grille de quatre cartes : 2+2 plutot que 3+1 ---- */
@media (min-width: 720px) {
  .card-grid:has(> :nth-child(4):last-child),
  .section-grid:has(> :nth-child(4):last-child),
  .situ-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
  }
}


/* une adresse electronique se copie, elle n'ouvre pas un logiciel de courrier */
.mail { font-weight: 600; color: var(--color-primary); overflow-wrap: anywhere; }


/* ---- questionnaires ---- */
.quiz{background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:14px;
  padding:22px 24px;margin:1.6rem 0;}
.quiz-etape{margin:0 0 .5rem;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--color-primary);font-weight:700;}
.quiz-q{margin:0 0 .5rem;font-size:1.15rem;font-weight:700;color:var(--color-primary-dark);
  line-height:1.4;}
.quiz-aide{margin:0 0 .9rem;font-size:.9rem;color:#5a5570;}
ul.quiz-rep{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:9px;}
ul.quiz-rep li{margin:0;}
ul.quiz-rep button{width:100%;text-align:left;cursor:pointer;background:#fff;
  border:1px solid var(--color-border);border-radius:10px;padding:13px 15px;font:inherit;
  font-size:.99rem;line-height:1.45;color:inherit;
  transition:border-color .15s ease,box-shadow .15s ease;}
ul.quiz-rep button:hover,ul.quiz-rep button:focus{border-color:var(--color-primary);
  box-shadow:0 2px 10px rgba(88,3,120,.12);outline:none;}
.quiz-back{margin:.9rem 0 0;}
.quiz-back button,.quiz button.quiz-again{cursor:pointer;font:inherit;font-size:.92rem;
  border-radius:999px;padding:9px 18px;font-weight:600;}
.quiz-back button{background:transparent;border:1px solid var(--color-border);color:#5a5570;}
.quiz button.quiz-again{background:var(--color-primary);border:0;color:#fff;}
.quiz-res h3{margin:0 0 .6rem;color:var(--color-primary-dark);font-size:1.25rem;}
.quiz-res h4{margin:1rem 0 .3rem;font-size:1rem;color:var(--color-primary-dark);}
.quiz-res p{margin:0 0 .7rem;}
.quiz-res ul{margin:.3rem 0 .9rem 1.2rem;}
.quiz-res li{margin:.25rem 0;}
.quiz-retenu{background:#fff;border:1px solid var(--color-border);border-radius:10px;
  padding:12px 16px;margin:.9rem 0;}
.quiz-note{font-size:.87rem;color:#5a5570;border-top:1px solid var(--color-border);
  padding-top:.75rem;margin-top:1rem;}
@media (max-width:520px){.quiz{padding:16px 15px;}}

/* ---- arborescence a trois niveaux : la sous-rubrique et ses pages ---- */
ul.tree ul.tree.sous{margin:.55rem 0 .2rem 1.6rem;padding-left:.9rem;
  border-left:2px solid var(--color-border);}
ul.tree ul.tree.sous>li{margin:0 0 .5rem;padding:0 0 .5rem;border-bottom:0;}
ul.tree ul.tree.sous>li>a{font-weight:600;color:var(--color-secondary-dark);}
@media (max-width:640px){ul.tree ul.tree.sous{margin-left:.7rem;padding-left:.6rem;}}

/* ---- liste des pays ---- */
ul.pays-liste{columns:2;column-gap:2rem;}
ul.pays-liste li{break-inside:avoid;margin:.35rem 0;}
.pays-nb{color:var(--color-text-muted);font-size:.85rem;white-space:nowrap;}
@media (max-width:640px){ul.pays-liste{columns:1;}}

/* ---- consentement a la mesure d'audience ---- */
.audience{position:fixed;left:0;right:0;bottom:0;z-index:300;padding:13px 14px;
  background:rgba(34,27,43,.97);color:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.25);}
.audience-box{max-width:var(--max-width);margin:0 auto;font-size:.92rem;line-height:1.55;
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;}
.audience p{margin:0;}
.audience a{color:#fff;text-decoration:underline;}
.audience-btn{display:flex;gap:10px;flex:0 0 auto;}
.audience button{cursor:pointer;border:0;border-radius:999px;padding:9px 18px;font-weight:600;
  font-size:.92rem;background:#fff;color:var(--color-primary-dark);}
.audience button.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);}
.audience button:hover{opacity:.9;}
@media (max-width:640px){.audience-box{display:block;}.audience-btn{margin-top:10px;}
  .audience button{flex:1 1 0;}}

/* le pictogramme de partage vient d'une fonte : il se dimensionne comme du texte */
.share a i { font-size: 18px; line-height: 1; }

/* ---- plan du site : ancres visibles et fiches pays repliees ---- */
.plan-sec { scroll-margin-top: 1.2rem; }
.plan-sec > h2 { margin-top: 2.4rem; padding-top: .4rem; border-top: 2px solid var(--color-border); }
.plan-somm ul { display: flex; flex-wrap: wrap; gap: .5rem .9rem; list-style: none;
  margin: .6rem 0 0; padding: 0; }
.plan-somm a { display: inline-block; padding: 5px 13px; border-radius: 999px;
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  color: var(--color-primary-dark); text-decoration: none; font-weight: 600; font-size: .93rem; }
.plan-somm a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
details.pays-fold { margin: .3rem 0 0 1.6rem; }
details.pays-fold > summary { cursor: pointer; font-size: .88rem; color: var(--color-text-muted);
  font-style: italic; }
details.pays-fold .kids.pays { margin-left: .4rem; }
@media (max-width:640px){ details.pays-fold { margin-left: 1rem; } }

/* ---- QCM : correction immediate ---- */
.qcm-verdict{margin:.9rem 0 .5rem;font-weight:700;font-size:1.05rem;}
.qcm-verdict.bon{color:#1c7a45;}
.qcm-verdict.faux{color:#b3261e;}
.qcm-exp{background:#fff;border:1px solid var(--color-border);border-radius:10px;
  padding:13px 16px;}
.qcm-exp p{margin:0 0 .6rem;}
.qcm-exp p:last-child{margin-bottom:0;}
.qcm-score{font-size:2.1rem;font-weight:800;color:var(--color-primary);margin:0 0 .2rem;
  line-height:1;}
.quiz button.quiz-next{cursor:pointer;border:0;border-radius:999px;padding:9px 18px;
  font-weight:600;font:inherit;font-size:.95rem;background:var(--color-primary);color:#fff;}

/* ---- calculateur de compatibilite biorythmique ---- */
#biocalc{background:var(--color-bg-soft);border:1px solid var(--color-border);
  border-radius:14px;padding:20px 22px;margin:1.6rem 0;}
.bio-form p{margin:0 0 .8rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;}
.bio-form label{font-weight:600;color:var(--color-primary-dark);min-width:13rem;}
.bio-form input[type=date]{font:inherit;padding:8px 11px;border:1px solid var(--color-border);
  border-radius:8px;background:#fff;}
#bio-go{cursor:pointer;border:0;border-radius:999px;padding:10px 20px;font:inherit;
  font-weight:600;background:var(--color-primary);color:#fff;}
#bio-go:hover{opacity:.92;}
.bio-total{font-size:2.4rem;font-weight:800;color:var(--color-primary);margin:1rem 0 .2rem;
  line-height:1;}
table.bio-tab{width:100%;border-collapse:collapse;margin:.8rem 0 0;}
table.bio-tab th{width:12rem;text-align:left;font-weight:600;background:none;border:0;
  padding:7px 10px 7px 0;font-size:.95rem;}
table.bio-tab th span{font-weight:400;color:var(--color-text-muted);font-size:.85rem;}
table.bio-tab td{border:0;padding:7px 0;}
td.bio-pc{text-align:right;width:4.5rem;font-variant-numeric:tabular-nums;font-weight:600;}
.bio-bar{display:block;height:11px;border-radius:999px;background:#fff;
  border:1px solid var(--color-border);overflow:hidden;}
.bio-bar span{display:block;height:100%;background:var(--color-primary);}
.bio-note{font-size:.87rem;color:#5a5570;border-top:1px solid var(--color-border);
  padding-top:.7rem;margin-top:1rem;}
.bio-err{color:#b3261e;font-weight:600;}
@media (max-width:560px){.bio-form label{min-width:0;width:100%;}
  table.bio-tab th{width:auto;display:block;padding-bottom:2px;}}

/* ---------- Bloc en evidence : l'aiguillage par situation ---------- */
.vedette{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);
  color:#fff;border-radius:var(--radius);padding:26px 28px;margin:30px 0 34px;
  box-shadow:var(--shadow)}
.vedette h2{margin:0 0 10px;color:#fff;font-size:1.35rem;border:0;padding:0}
.vedette p{margin:0 0 16px;color:#F0EDF5;font-size:1rem;line-height:1.6;max-width:62ch}
.vedette .vedette-lien{display:inline-block;background:#fff;color:var(--color-primary-dark);
  font-weight:600;padding:11px 20px;border-radius:999px;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease}
.vedette .vedette-lien:hover{transform:translateY(-2px);text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.22)}
.vedette .vedette-lien::after{content:" \2192"}
@media (max-width:640px){.vedette{padding:22px 20px}.vedette h2{font-size:1.2rem}}

/* ---------- Sous-titre au-dessus d'une grille de cartes ---------- */
.grille-titre{margin:38px 0 0;font-size:1.05rem;color:var(--color-primary-dark);
  text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  border-bottom:1px solid var(--color-border);padding-bottom:8px}
.grille-titre:first-of-type{margin-top:0}
.grille-titre + .card-grid{margin-top:16px}

/* ---- plan du site : les dossiers rattaches a une rubrique ---- */
.plan-sous { scroll-margin-top: 1.2rem; margin: 2.2rem 0 .2rem;
  font-size: 1.12rem; color: var(--color-primary-dark);
  border-bottom: 1px solid var(--color-border); padding-bottom: 6px; }
.plan-sous + p { margin-top: .5rem; }

/* ---- liste de pays posee sous un paragraphe ---- */
.pays-direct { margin: .4rem 0 1.4rem; padding: 12px 16px; background: var(--color-bg-soft);
  border: 1px solid var(--color-border); border-radius: var(--radius); font-size: .95rem; }
.pays-direct p { margin: 0 0 .5rem; color: var(--color-text-muted); }
.pays-direct .liste a { display: inline-block; margin: 0 .15rem .35rem 0; padding: 3px 10px;
  border-radius: 999px; background: #fff; border: 1px solid var(--color-border);
  color: var(--color-primary-dark); text-decoration: none; }
.pays-direct .liste a:hover { background: var(--color-primary); color: #fff;
  border-color: var(--color-primary); text-decoration: none; }

/* ---- plan du site : un seul arbre, les rubriques en noeuds ---- */
.tree.racine { margin: 1.2rem 0 0; }
.plan-noeud { scroll-margin-top: 1.2rem; margin-top: 1.4rem; }
.plan-noeud > a { font-size: 1.28rem; font-weight: 700; color: var(--color-primary-dark); }
.plan-noeud.sous > a { font-size: 1.1rem; }
.plan-noeud.accueil > a { font-size: 1.45rem; }
.plan-noeud.accueil { margin-top: 0; }
.tree.racine > li > ul > li.plan-noeud { border-top: 1px solid var(--color-border);
  padding-top: .9rem; }
.tree.racine > li > ul > li.plan-noeud:first-child { border-top: 0; padding-top: 0; }
/* le lien « situer cette page dans le plan », en bas de chaque page */
.plan-situer { font-size: .88rem; color: var(--color-text-muted); margin: .2rem 0 1.4rem; }

/* ---- calculateur de signe chinois ---- */
#chincalc { background: var(--color-bg-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 18px 20px; margin: 22px 0 28px; }
.chin-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.chin-form label { display: block; font-size: .92rem; color: var(--color-text-muted); }
.chin-form input { display: block; margin-top: 4px; padding: 7px 9px;
  border: 1px solid var(--color-border); border-radius: 8px; font: inherit; }
.chin-go { padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--color-primary); color: #fff; font-weight: 600; font: inherit;
  font-weight: 600; }
.chin-go:hover { background: var(--color-primary-dark); }
.chin-res:not(:empty) { margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--color-border); }
.chin-ligne { display: flex; gap: .6rem; margin: .2rem 0; }
.chin-ligne span { color: var(--color-text-muted); min-width: 9rem; }
.chin-ligne strong { color: var(--color-primary-dark); font-size: 1.1rem; }
.chin-note { margin: .4rem 0; font-size: .95rem; }
.chin-verdict { margin: .8rem 0 0; padding: 10px 14px; border-radius: 10px;
  background: #fff; border-left: 4px solid var(--color-secondary); }
.chin-verdict.oppose { border-left-color: var(--color-accent-orange); }
.chin-verdict.trigone { border-left-color: var(--color-accent-green); }
.chin-avert { margin: .9rem 0 0; font-size: .87rem; color: var(--color-text-muted);
  font-style: italic; }
.chin-err { color: #b3261e; font-weight: 600; }
@media (max-width:560px){ .chin-form label, .chin-form input { width: 100%; } }

/* ---- test de compatibilite amoureuse ---- */
.cp-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:16px 0 8px}
.cp-form fieldset{border:1px solid var(--color-border);border-radius:12px;padding:12px 16px 16px;margin:0;
  background:var(--color-bg-soft)}
.cp-form legend{font-weight:700;color:var(--color-primary);padding:0 6px}
.cp-form>p{grid-column:1/-1;margin:0}
.cp-champ{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;margin:8px 0 0}
.cp-champ label{font-weight:600;color:var(--color-secondary-dark);font-size:.94rem}
.cp-form input{padding:9px 12px;font:inherit;border:1px solid var(--color-border);border-radius:8px;
  background:#fff;color:var(--color-text);width:100%;box-sizing:border-box}
.cp-note{color:var(--color-text-muted);font-size:.9rem}
.cp-jauge{display:flex;align-items:center;gap:12px;margin:.5rem 0 0}
.cp-jauge .bio-bar{flex:1}
.cp-pc{font-weight:700;white-space:nowrap;color:var(--color-primary)}
.cp-caveat{color:var(--color-text-muted);font-size:.92rem}
.cp-total{text-align:center}
.cp-total .bio-total{margin:.2rem 0 .4rem}
@media (max-width:640px){.cp-form{grid-template-columns:1fr}}

/* ---- huit tuiles sur la page de garde ---- */
.section-card.pays { background: linear-gradient(135deg, #17706F, #0f4f4e); }
.section-card.quizz { background: linear-gradient(135deg, #B85A08, #8a4306); }
.section-card.compat { background: linear-gradient(135deg, #8E1F6E, #66154f); }
.section-card.situation { background: linear-gradient(135deg, #7A1FA0, #4b1a86); }
.section-card.voyage { background: linear-gradient(135deg, #0B7285, #085462); }
.section-card.rencontre { background: linear-gradient(135deg, #C0399B, #982e7a); }
@media (min-width: 480px) {
  .section-grid:has(> :nth-child(10):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .section-grid:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 480px) and (max-width: 719px) {
  .section-grid:has(> :nth-child(9):last-child) { grid-template-columns: repeat(2, 1fr); }
  .section-grid:has(> :nth-child(9):last-child) > :nth-child(9) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .section-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); }
  .section-grid:has(> :nth-child(8):last-child) .section-card { padding: 26px 18px; }
  .section-grid:has(> :nth-child(8):last-child) .section-card h2 { font-size: 1.25rem; }
  .section-grid:has(> :nth-child(8):last-child) .section-card p { font-size: 0.9rem; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .section-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* ---- bandeau : pictogramme a gauche, texte a droite ---- */
.hero { padding: 40px 0 36px; text-align: left; }
.hero .container {
  display: grid; grid-template-columns: auto 1fr; column-gap: 30px; align-items: start;
}
.hero .hero-illustration { grid-column: 1; grid-row: 1 / span 2; margin: 0; width: 120px; height: 120px; }
.hero .hero-illustration.badge img { width: 78px; height: 78px; }
.hero h1 { grid-column: 2; grid-row: 1; margin: 0 0 10px; font-size: 2.2rem; line-height: 1.1; }
.hero p { grid-column: 2; grid-row: 2; margin: 0; max-width: 640px; }
.page-banner { padding: 26px 0 22px; }
.page-banner .container { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: start; }
.page-banner .container > * { grid-column: 2; }
.page-banner .breadcrumb { grid-column: 1 / -1; grid-row: 1; }
.page-banner .page-illustration { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
.page-banner .page-illustration svg { width: 96px; height: 96px; }
.page-banner h1 { grid-row: 2; line-height: 1.15; }
.page-banner p.lead { grid-row: 3; }
@media (max-width: 560px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero .hero-illustration { grid-column: 1; grid-row: 1; margin: 0 auto 12px; width: 96px; height: 96px; }
  .hero .hero-illustration.badge img { width: 62px; height: 62px; }
  .hero h1 { grid-column: 1; grid-row: 2; }
  .hero p { grid-column: 1; grid-row: 3; margin: 0 auto; }
  .page-banner .container { column-gap: 14px; }
  .page-banner .page-illustration svg { width: 64px; height: 64px; }
}

/* ---- page Mes scores ---- */
.scores-tab{overflow-x:auto;margin:0 0 1.6rem}
.scores-tab table{width:100%;border-collapse:collapse;font-size:.95rem}
.scores-tab th,.scores-tab td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--color-border);vertical-align:top}
.scores-tab th{background:var(--color-bg-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-primary-dark)}
.scores-tab td.num{white-space:nowrap}
.scores-tab td.pas{color:var(--color-text-muted);font-style:italic}
.scores-total{font-size:1.1rem}
.quiz-scores{margin:.6rem 0 .8rem;font-size:.95rem}
.quiz-share{background:none;border:1px solid var(--color-border);border-radius:8px;padding:4px 10px;cursor:pointer;color:var(--color-primary-dark);font:inherit;font-size:.9rem}
.quiz-share:hover{background:var(--color-bg-soft)}
.quiz-share-liens{font-size:.9rem}

/* ---- bandeau : pictogramme a droite, texte a gauche ---- */
.hero { padding: 40px 0 36px; text-align: left; }
.hero .container {
  display: grid; grid-template-columns: 1fr auto; column-gap: 30px; align-items: start;
}
.hero .hero-illustration { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: 120px; height: 120px; }
.hero .hero-illustration.badge img { width: 78px; height: 78px; }
.hero h1 { grid-column: 1; grid-row: 1; margin: 0 0 10px; font-size: 2.2rem; line-height: 1.1; }
.hero p { grid-column: 1; grid-row: 2; margin: 0; max-width: 640px; }
.page-banner { padding: 26px 0 22px; }
.page-banner .container { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: start; }
.page-banner .container > * { grid-column: 1; }
.page-banner .breadcrumb { grid-column: 1 / -1; grid-row: 1; }
.page-banner .page-illustration { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
.page-banner .page-illustration svg { width: 96px; height: 96px; }
.page-banner h1 { grid-row: 2; line-height: 1.15; }
.page-banner p.lead { grid-row: 3; }
@media (max-width: 560px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero .hero-illustration { grid-column: 1; grid-row: 1; margin: 0 auto 12px; width: 96px; height: 96px; }
  .hero .hero-illustration.badge img { width: 62px; height: 62px; }
  .hero h1 { grid-column: 1; grid-row: 2; }
  .hero p { grid-column: 1; grid-row: 3; margin: 0 auto; }
  .page-banner .container { column-gap: 14px; }
  .page-banner .page-illustration svg { width: 64px; height: 64px; }
}

/* ---- calendrier de garde ---- */
.g-mois{margin:0 0 1.4rem}.g-mois h3{margin:0 0 .4rem;font-size:1.05rem;text-transform:capitalize}
.g-cal{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.9rem}
.g-cal th{font-weight:600;color:var(--color-text-muted);padding:4px 0;font-size:.78rem;text-transform:uppercase}
.g-cal td{height:52px;border:1px solid var(--color-border);vertical-align:top;padding:3px 5px}
.g-cal td span{display:block;font-size:.72rem;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-cal td.g-a{background:#EEE6F5}.g-cal td.g-b{background:#E2F2EF}
.g-actions .button{margin-right:8px}
@media print{header.site-header,footer.site-footer,.share,.askus,.plan-situer,#g-form,.g-actions,.page-banner .page-illustration,.maj,.callout{display:none!important}.g-cal td{height:44px}}

/* ---- outils astro : formulaire, resultat, roue, lune, horoscope ---- */
.astro-form{background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius);padding:16px 18px;margin:12px 0 18px}
.af-row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 12px}
.af-row>label:first-child{font-weight:600;font-size:.94rem;color:var(--color-secondary-dark);flex-basis:100%}
.af-row input[type=date],.af-row input[type=time],.af-row select,.lieu select,.lieu input{padding:8px 10px;font:inherit;border:1px solid var(--color-border);border-radius:8px;background:#fff;color:var(--color-text);max-width:100%}
.af-row input[type=date]{border:2px solid var(--color-primary);font-size:1.02rem}
.af-check{font-weight:400;min-width:0;display:inline-flex;align-items:center;gap:6px}
.af-note{color:var(--color-text-muted);font-size:.92rem;margin:.3rem 0 0;flex-basis:100%}
.af-go{margin-top:6px}
.af-go .button{border:0;cursor:pointer;font:inherit;font-weight:600}
.lieu{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-start;position:relative;flex-basis:100%}
.lieu-row{display:flex;flex-direction:column;gap:4px;flex:1 1 200px;min-width:0}
.lieu label{font-weight:600;font-size:.94rem;color:var(--color-secondary-dark)}
.lieu select,.lieu input[type=text]{width:100%;box-sizing:border-box}
.lieu-manuel summary{cursor:pointer;color:var(--color-text-muted)}
.lieu-liste{flex-basis:100%;display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto;background:#fff;border:1px solid var(--color-border);border-radius:8px;padding:4px}
.lieu-liste[hidden]{display:none}
.cp-lieu{grid-column:1/-1}
.cp-lieu-titre{display:block;font-weight:600;margin:0 0 4px}
.cp-date label{color:var(--color-primary);font-size:1.05rem}
.cp-date input[type=date]{border:2px solid var(--color-primary);font-size:1.05rem;padding:10px 12px}
.cp-plus{margin:12px 0 0;border-top:1px dashed var(--color-border);padding-top:8px}
.cp-plus summary{cursor:pointer;font-weight:600;color:var(--color-secondary-dark);font-size:.94rem}
.cp-plus[open] summary{margin-bottom:4px}
.cp-kutas{font-size:.92rem;margin:.6rem 0}
.cp-kutas th{font-weight:500;width:70%}
.lieu-liste button{text-align:left;padding:6px 10px;border:0;background:none;font:inherit;cursor:pointer;border-radius:6px;color:var(--color-text)}
.lieu-liste button:hover,.lieu-liste button:focus{background:var(--color-bg-soft)}
.lieu-info{flex-basis:100%;margin:0;color:var(--color-text-muted);font-size:.92rem}
.lieu-manuel{flex-basis:100%;font-size:.92rem}
.lieu-manuel input{width:120px;margin-right:12px}
.lieu-source{flex-basis:100%;margin:2px 0 0;color:var(--color-text-muted);font-size:.8rem}
.astro-res{margin:0 0 1.5rem}
.astro-liste{list-style:none;padding:0;margin:.6rem 0}
.astro-liste li{padding:6px 0;border-bottom:1px solid var(--color-border)}
.astro-lecture{margin:1rem 0}
.astro-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:1rem 0 .4rem}
.btn-secondaire{background:#fff;color:var(--color-primary);border:1px solid var(--color-primary)}
.theme-grille{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:18px;align-items:start;margin:.6rem 0}
.roue{width:100%;height:auto;max-width:340px}
.theme-tab{margin:0;font-size:.92rem}
.theme-tab td,.theme-tab th{padding:6px 8px}
.theme-elements{margin:.4rem 0 1rem}
.lune-carte{display:flex;gap:18px;align-items:flex-start;background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius);padding:16px 18px;margin:0 0 1.5rem}
.lune-carte svg{flex:0 0 96px}
.lune-titre{margin:0 0 .3rem;font-weight:600;color:var(--color-primary)}
.lune-phase,.lune-suite{margin:0 0 .3rem}
.lune-lecture{margin:.5rem 0 0;color:var(--color-text-muted)}
.horoscope-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:1rem 0 1.6rem}
.horoscope-carte{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:14px 16px}
.horoscope-carte h2{margin:0 0 .2rem;font-size:1.15rem}
.horoscope-carte .dates{margin:0 0 .6rem;color:var(--color-text-muted);font-size:.9rem}
.horoscope-carte p{margin:0 0 .6rem;font-size:.95rem}
.horoscope-api{border-top:1px dashed var(--color-border);margin-top:.4rem;padding-top:.4rem}
#horoscope-entete{font-weight:600;color:var(--color-primary)}
@media (max-width:700px){.theme-grille{grid-template-columns:1fr}}

/* ---- etapes illustrees ---- */
.etapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:1rem 0 1.5rem;padding:0;list-style:none}
.etape{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:12px 14px;margin:0}
.etape img{flex:0 0 96px;width:96px;height:96px;image-rendering:auto;border-radius:8px;background:#fff}
.etape figcaption{font-size:.95rem}
.etape figcaption strong{display:block;color:var(--color-primary);margin-bottom:.2rem}
.etapes-credit{color:var(--color-text-muted);font-size:.88rem}

/* ---- photos cultures ---- */
figure.photo{float:right;margin:.2rem 0 1rem 1.2rem;max-width:280px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:8px}
figure.photo img{display:block;width:100%;height:auto;border-radius:6px}
figure.photo figcaption{font-size:.88rem;line-height:1.35;margin-top:.5rem;color:var(--color-text)}
figure.photo .credit{display:block;margin-top:.3rem;color:var(--color-text-muted);font-size:.8rem}
figure.photo-small{max-width:200px}
.content h2{clear:both}
.content h3:has(+ figure.photo){clear:both}
@media (max-width:600px){figure.photo{float:none;max-width:100%;margin:.6rem 0 1rem}}

/* ---- pictos signes ---- */
.picto-signe{flex:0 0 auto;vertical-align:middle}
.horoscope-carte h2{display:flex;align-items:center;gap:.6rem}
h2 .picto-signe{width:36px;height:36px}
h2.signe-titre{display:flex;align-items:center;gap:.6rem}
.signe-cell{white-space:nowrap}
.signe-cell .picto-signe{width:28px;height:28px;margin-right:.4rem}

/* ---- outil distance ---- */
.dist-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:.6rem 0}
.dist-col h3{margin:0 0 .4rem;font-size:1.05rem}
#outil-distance table.cmp{margin:10px 0}

/* ---- photos site ---- */
.card-grid{clear:both}
figure.photo-bandeau{float:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px;align-items:center;max-width:none;margin:.6rem 0 1.4rem}
figure.photo-bandeau img{width:220px;flex:0 0 auto}
figure.photo-bandeau figcaption{flex:1 1 240px;margin:0;font-size:.95rem}
figure.photo-bandeau + h2{margin-top:1rem}
.colonne-photo h2,.avec-photo h2{clear:none}
/* ---- mon signe ---- */
.horoscope-carte.carte-vous{border:2px solid var(--color-primary);box-shadow:0 0 0 4px var(--color-bg-soft)}
#mon-signe .af-row{margin-bottom:0}
#mon-signe .astro-res{margin:.8rem 0 0}
#mon-signe .astro-res p{margin:0 0 .5rem}


/* ---- langues : drapeaux et menu deroulant ---- */
.lang-switch > a, .lang-switch > span { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.lang-switch > a::before, .lang-switch > span::before, .lang-menu .flag {
  content: ""; display: inline-block; width: 20px; height: 14px; border-radius: 2px; flex: 0 0 auto;
  background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.lang-switch > a[hreflang="fr"]::before, .lang-switch > span[title="Français"]::before { background-image: url(../img/flags/fr.svg); }
.lang-switch > a[hreflang="en"]::before, .lang-switch > span[title="English"]::before  { background-image: url(../img/flags/en.svg); }
.lang-switch > a[hreflang="de"]::before, .lang-switch > span[title="Deutsch"]::before  { background-image: url(../img/flags/de.svg); }
.lang-switch > a[hreflang="es"]::before, .lang-switch > span[title="Español"]::before  { background-image: url(../img/flags/es.svg); }
.lang-switch > a[hreflang="it"]::before, .lang-switch > span[title="Italiano"]::before { background-image: url(../img/flags/it.svg); }
.lang-switch > a[hreflang="pt"]::before, .lang-switch > span[title="Português"]::before { background-image: url(../img/flags/pt.svg); }
.lang-switch > a[hreflang="nl"]::before, .lang-switch > span[title="Nederlands"]::before { background-image: url(../img/flags/nl.svg); }
/* version deroulante, construite par site.js */
.lang-menu { position: relative; }
.lang-menu > button {
  display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer; font: inherit;
  color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; padding: 5px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.22);
}
.lang-menu > button:hover, .lang-menu > button[aria-expanded="true"] { background: rgba(255,255,255,0.38); }
.lang-menu > button .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #fff; }
.lang-menu > ul {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px;
  margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); border: 1px solid var(--color-border);
}
.lang-menu.open > ul { display: block; }
.lang-menu > ul li { margin: 0; }
.lang-menu > ul > li > a, .lang-menu > ul > li > span {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; width: 100%;
  color: var(--color-text); font-size: 0.92rem; font-weight: 500; letter-spacing: 0; background: none;
}
.lang-menu > ul > li > a:hover { background: var(--color-bg-soft); color: var(--color-text); text-decoration: none; }
.lang-menu > ul > li > span { background: var(--color-bg-soft); font-weight: 700; }
.lang-menu > ul .code { margin-left: auto; font-size: 0.75rem; opacity: .6; letter-spacing: .06em; }

/* ---------- Mon espace et favoris (locaux) ---------- */
.espace-boutons{order:3;display:flex;gap:6px;align-items:center;flex:0 0 auto}
.esp-btn{display:inline-flex;align-items:center;gap:6px;height:34px;min-width:34px;padding:0 9px;border:0;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.03em;cursor:pointer}
.esp-btn:hover{background:rgba(255,255,255,.32)}
.esp-btn svg{width:17px;height:17px;fill:#fff;flex:0 0 auto}
.esp-btn.esp-fav svg .etoile{fill:none;stroke:#fff;stroke-width:1.8}
.esp-btn.esp-fav.esp-actif svg .etoile{fill:#ffd54a;stroke:#ffd54a}
.esp-btn.esp-moi.esp-actif{background:rgba(255,255,255,.3)}
.esp-nb{font-size:.72rem;min-width:1em;text-align:center}
.esp-nb:empty{display:none}
.esp-txt{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:820px){
  .espace-boutons{order:2;margin-left:auto}
  .site-header .container:has(.espace-boutons) .lang-switch{margin-left:0}
  .esp-txt{display:none}
  .esp-btn{padding:0 8px}
}
.espace-dialog{border:0;border-radius:var(--radius,12px);padding:0;max-width:min(680px,94vw);width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.35);color:var(--color-text,#222)}
.espace-dialog::backdrop{background:rgba(20,10,40,.55)}
.esp-corps{padding:22px 26px 26px;max-height:88vh;overflow:auto}
.esp-entete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.esp-entete h2{margin:0;font-size:1.35rem}
.esp-x{border:0;background:transparent;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--color-text-muted,#666);padding:0 4px}
.esp-intro,.esp-sert,.esp-note{margin:.4rem 0;font-size:.95rem;line-height:1.5}
.esp-note{color:var(--color-text-muted,#666);font-size:.85rem;margin-top:14px}
.esp-formulaires{margin:.3rem 0 1rem 1.2rem;padding:0;font-size:.92rem;line-height:1.5}
.esp-form .esp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:10px 0}
.esp-form .esp-row label{flex:0 0 220px;font-weight:600}
.esp-form input[type=text],.esp-form input[type=date],.esp-form input[type=time]{flex:1 1 180px;padding:8px 10px;border:1px solid var(--color-border,#ccc);border-radius:8px;font:inherit}
.esp-fs{border:1px solid var(--color-border,#ddd);border-radius:10px;padding:8px 14px 12px;margin:12px 0}
.esp-fs legend{font-weight:600;padding:0 6px}
.esp-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.esp-msg{min-height:1.2em;color:var(--color-primary-dark,#3a2a6a);font-weight:600}
.esp-horo{margin:10px 0 0;font-size:1.05rem}
.esp-liste{list-style:none;margin:0;padding:0}
.esp-liste li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--color-border,#eee)}
.esp-liste li a{flex:1 1 auto}
.esp-meta{font-size:.72rem;color:var(--color-text-muted,#888);letter-spacing:.06em}
.esp-suppr{border:0;background:transparent;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--color-text-muted,#888)}
.esp-suppr:hover{color:#b00020}
.esp-vide{color:var(--color-text-muted,#666)}
.esp-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#2d1b4e;color:#fff;padding:10px 18px;border-radius:999px;
  font-size:.92rem;opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:1000;pointer-events:none}
.esp-toast.visible{opacity:1;transform:translate(-50%,0)}
.esp-bandeau{background:linear-gradient(135deg,#7A1FA0,#4b1a86);color:#fff}
.esp-bandeau p{margin:0;padding:10px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:1rem}
.esp-bandeau svg{width:18px;height:18px;fill:#fff}
.esp-bandeau a{color:#fff;text-decoration:underline}

/* ---------- Maternite la plus proche ---------- */
.mat-h2{font-size:1.15rem;margin:.6rem 0 .5rem}
.mat-liste{padding-left:1.2rem;margin:0 0 1rem}
.mat-liste li{margin:0 0 12px;line-height:1.45}
.mat-km{display:inline-block;min-width:4.6em;font-weight:700;color:var(--color-primary-dark)}
.mat-adr,.mat-meta,.mat-liens{color:var(--color-text-muted);font-size:.9rem}
.mat-type{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:999px;background:#e8e3f3;color:#3a2a6a;margin-right:4px}
.mat-t3{background:#3a2a6a;color:#fff}.mat-t2b{background:#6b4fbb;color:#fff}.mat-t2a{background:#c9bce8}
.mat-urgence{margin-top:18px}