/* voyanceprestige.com — thème du site (repris de la maquette validée, maquette/style.css)
   Couleurs reprises du site actuel (voir CHARTE.md). On modernise la mise en page, pas l'identité. */
:root {
  --marque: #1a316b;      /* nom du site */
  --titre: #21007f;       /* titres actuels (indigo) */
  --lien: #195e7d;        /* liens du menu */
  --client: #73a839;      /* bouton Espace client */
  --inscription: #2fa4e7; /* bouton Inscription gratuite */
  --minutes: #ffc107;     /* bouton Acheter des minutes */
  --code: #015b4e;        /* badge code conseiller */
  --spec: #d84f00;        /* spécialités (orange actuel, foncé pour la lisibilité) */
  --etoile: #f39200;
  --ciel: #e8f3fc;        /* bleu du bandeau */
  --fond: #f7f8fb;
  --carte: #ffffff;
  --encre: #1f1d24;
  --doux: #5b5a66;
  --bord: #e2e5ee;
  --be: #1d3fb0; --lu: #12813a; --ch: #8b0000; --ca: #12813a; --fr: #191970;
  --r-sm: 6px; --r: 12px; --r-lg: 18px;
  --ombre: 0 1px 2px rgba(26, 49, 107, .06), 0 6px 18px rgba(26, 49, 107, .07);
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 130px; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.65 var(--sans); }
img { max-width: 100%; display: block; }
a { color: var(--lien); text-underline-offset: 2px; }
a:hover { color: var(--titre); }
h1, h2, h3, h4, h5 { font-family: var(--serif); color: var(--titre); font-weight: 600; line-height: 1.25; margin: 0 0 .6em; }

/* ---------- boutons ---------- */
.vbtn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: .55em 1.2em;
  border-radius: 999px; font: 700 .82rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; transition: transform .15s ease, filter .15s ease, background .15s ease; cursor: pointer; }
.vbtn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.vbtn:focus-visible, a:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid var(--inscription); outline-offset: 2px; }
.vbtn-client { background: var(--client); color: #fff; }
.vbtn-inscription { background: var(--inscription); color: #fff; }
.vbtn-client:hover, .vbtn-inscription:hover { color: #fff; }
.vbtn-minutes { background: var(--minutes); color: #2b2100; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.vbtn-minutes:hover { color: #2b2100; }
.vbtn-ghost { background: transparent; color: var(--marque); border-color: var(--bord); text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 500; }
.vbtn-ghost:hover { border-color: var(--marque); color: var(--marque); }
.vbtn-large { width: 100%; min-height: 50px; font-size: .9rem; }

/* ---------- en-tête ---------- */
.entete { background: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 var(--bord); }
.barre { max-width: var(--max); margin: 0 auto; padding: .7rem 24px; display: flex; align-items: center; gap: 1rem; }
.marque { font: 600 1.75rem/1 var(--serif); color: var(--marque); text-decoration: none; letter-spacing: .01em; margin-right: auto; }
.marque:hover { color: var(--marque); }
.acces { display: flex; gap: .6rem; }
.vnav { border-top: 1px solid var(--bord); }
.vnav ul { list-style: none; margin: 0 auto; padding: 0 16px; max-width: var(--max); display: flex; flex-wrap: wrap; justify-content: center; }
.vnav a { display: block; padding: .8rem .85rem; font-weight: 500; font-size: .93rem; color: var(--lien); text-decoration: none; border-bottom: 3px solid transparent; }
.vnav a:hover { color: var(--titre); border-bottom-color: var(--ciel); }
.vnav a[aria-current] { color: var(--marque); border-bottom-color: var(--inscription); }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--marque); margin: 5px 0; border-radius: 2px; }

/* ---------- héro : le bandeau de toujours, en grand ---------- */
.hero { position: relative; }
.bandeau img { width: 100%; height: clamp(230px, 25vw, 380px); object-fit: cover; object-position: center 55%; }
.hero-carte { position: relative; max-width: var(--max); margin: -110px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.hero-texte, .offre { background: var(--carte); border-radius: var(--r-lg); box-shadow: var(--ombre); }
.hero-texte { padding: 2rem 2.25rem 1.5rem; }
.hero-texte h1 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); margin-bottom: .7em; }
.hero-texte p { color: var(--doux); margin: 0 0 1em; }
.offre { padding: 1.6rem 1.6rem 1.4rem; border-top: 5px solid var(--inscription); background: linear-gradient(180deg, var(--ciel) 0, #fff 140px); }
.offre-sur { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); text-wrap: balance; }
.offre-titre { margin: .15em 0 .7em; font: 600 1.35rem/1.25 var(--serif); }
.offre-titre a { color: var(--titre); text-decoration: none; }
.offre p { font-size: .95rem; }
.offre strong { color: var(--marque); }
.offre-pied { font-size: .85rem !important; color: var(--doux); margin: 1em 0 0; }

/* ---------- garanties ---------- */
.garanties { list-style: none; max-width: var(--max); margin: 2.5rem auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.garanties li { display: flex; gap: .8rem; align-items: center; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--bord); border-radius: var(--r); font-size: .93rem; font-weight: 500; color: var(--marque); }
.garanties svg { flex: none; color: var(--inscription); }

/* ---------- conseillers ---------- */
.conseillers { max-width: var(--max); margin: 3.5rem auto 0; padding: 0 24px; }
.sec-tete { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sec-tete h2 { font-size: 1.9rem; margin: 0; }
.filtres { display: flex; gap: 1rem; flex-wrap: wrap; }
.filtres label { display: grid; gap: .25rem; font-size: .8rem; color: var(--doux); font-weight: 500; }
.filtres select { min-height: 44px; min-width: 190px; padding: 0 .8rem; border: 1px solid var(--bord); border-radius: var(--r-sm); background: #fff; font: 500 .95rem var(--sans); color: var(--encre); }
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.voyant { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.25rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r-lg); padding: 1.1rem; box-shadow: var(--ombre); transition: box-shadow .2s ease, border-color .2s ease; }
.voyant:hover { border-color: #c9d6ee; box-shadow: 0 2px 4px rgba(26,49,107,.08), 0 12px 28px rgba(26,49,107,.1); }
.v-photo img { width: 170px; height: 215px; object-fit: cover; object-position: 50% 12%; border-radius: var(--r); background: var(--ciel); }
.absent .v-photo img { filter: grayscale(.35); opacity: .85; }
.v-corps { min-width: 0; }
.v-tete { display: flex; justify-content: space-between; align-items: start; gap: .5rem; }
.v-tete h3 { font-size: 1.3rem; margin: 0; }
.v-tete h3 a { color: var(--titre); text-decoration: none; }
.v-tete h3 a:hover { text-decoration: underline; }
.statut { flex: none; display: inline-flex; align-items: center; gap: .4em; font-size: .78rem; font-weight: 700; padding: .3em .7em; border-radius: 999px; }
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.statut.on { color: #1d7a2c; background: #e6f4e4; }
.statut.on::before { box-shadow: 0 0 0 3px rgba(29,122,44,.18); animation: pouls 2s ease-in-out infinite; }
.statut.off { color: #6b6b75; background: #eeeef2; }
@keyframes pouls { 50% { box-shadow: 0 0 0 6px rgba(29,122,44,0); } }
.v-meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .35rem 0 .5rem; }
.stars { letter-spacing: 1px; font-size: 1rem; color: #d9d9e0; }
.st.on { color: var(--etoile); }
.st.half { background: linear-gradient(90deg, var(--etoile) 50%, #d9d9e0 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.code { font-size: .78rem; color: #fff; background: var(--code); padding: .25em .65em; border-radius: var(--r-sm); }
.spec { margin: 0 0 .5rem; font-size: .84rem; font-weight: 700; color: var(--spec); }
.v-desc { margin: 0 0 .8rem; font-size: .92rem; color: var(--doux); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tels { list-style: none; margin: 0 0 .6rem; padding: .6rem .75rem; background: var(--fond); border-radius: var(--r); display: grid; gap: .3rem; }
.tel { display: grid; grid-template-columns: 112px 1fr; gap: .5rem; align-items: center; font-size: .82rem; }
.tel-pays { display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.tel a { color: inherit; }
.num a { text-decoration: underline; text-decoration-thickness: 1px; white-space: nowrap; }
/* Mobile : chaque ligne est une cible d'appel confortable (44 px) */
@media (max-width: 699px) {
  .tel { min-height: 44px; font-size: .9rem; }
  .tel-pays, .num a { min-height: 44px; display: inline-flex; align-items: center; }
}
.tel img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.pays { font-weight: 700; }
.num { font-weight: 500; }
.tel-be .pays, .tel-be .num { color: var(--be); }
.tel-lu .pays, .tel-lu .num { color: var(--lu); }
.tel-ch .pays, .tel-ch .num { color: var(--ch); }
.tel-ca .pays, .tel-ca .num { color: var(--ca); }
.tel-fr .pays, .tel-fr .num { color: var(--fr); }
.audiotel img { height: 40px; width: auto; margin: 0 0 .6rem; }
.vocal { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; font-size: .8rem; color: var(--doux); }
.vocal audio { height: 34px; flex: 1; min-width: 0; }
.v-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.nb { margin-left: auto; font-size: .8rem; color: var(--doux); }
.tous { text-align: center; margin: 1.5rem 0 0; }

/* ---------- textes ---------- */
.colonnes { max-width: var(--max); margin: 4rem auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
/* Cartes de l'accueil : titre, texte justifié ; filet de couleur en haut (une couleur par carte). */
.txt { position: relative; background: var(--carte); border: 1px solid var(--bord); border-top: 4px solid var(--inscription); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: 1.6rem 1.8rem 1.4rem; }
.txt:nth-child(2) { border-top-color: var(--etoile); }
.txt:nth-child(3) { border-top-color: var(--client); }
.txt:nth-child(4) { border-top-color: var(--titre); }
.txt h2 { font-size: 1.3rem; margin-bottom: .8rem; }
.txt p { color: var(--encre); line-height: 1.7; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.txt p:last-child { margin-bottom: 0; }
.txt .liste { list-style: none; padding: .9rem 1rem; margin: .4rem 0 0; display: grid; gap: .45rem; background: var(--fond); border-radius: var(--r); color: var(--encre); }
.txt .liste li { display: flex; gap: .6rem; margin: 0; }
.txt .liste li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: .15em; border-radius: 50%; background: var(--client) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.services p { color: var(--doux); }
.liste { margin: 0; padding-left: 1.1rem; color: var(--doux); }
.liste li { margin: .25rem 0; }
.liste li::marker { color: var(--inscription); }

/* ---------- avis ---------- */
.avis-sec { margin-top: 4rem; padding: 3.5rem 24px; background: linear-gradient(180deg, var(--ciel), #fff); }
.avis-sec > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.avis-sec h2 { font-size: 1.9rem; text-align: center; }
.chapo { max-width: 820px !important; text-align: center; color: var(--doux); }
.avis-grille { columns: 3 320px; column-gap: 20px; margin-top: 2rem; }
.avis { break-inside: avoid; margin: 0 0 20px; background: #fff; border-radius: var(--r); padding: 1.3rem 1.4rem; border-left: 4px solid var(--inscription); box-shadow: var(--ombre); }
.avis figcaption { font: 600 1rem var(--serif); color: var(--marque); margin-bottom: .4rem; }
.avis blockquote { margin: 0; font: italic 400 .95rem/1.6 var(--serif); color: var(--encre); }

/* ---------- services ---------- */
.services { max-width: 900px; margin: 3.5rem auto 4rem; padding: 0 24px; }
.services h2 { font-size: 1.6rem; }
.services h3 { font-size: 1.25rem; margin-top: 1.6em; }
.services h4 { font-size: 1.1rem; margin-top: 1.6em; }

/* ---------- pied de page ---------- */
.pied { background: var(--marque); color: #d8def0; padding: 3rem 24px 1.5rem; overflow-wrap: anywhere; }
.pied-cols { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr 1fr; gap: 2rem; }
.pied h5 { font: 700 .8rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: .9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pied a { color: #d8def0; text-decoration: none; font-size: .92rem; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-bas { max-width: var(--max); margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; gap: 1rem; font-size: .82rem; }
.pied-bas p { margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero-carte { grid-template-columns: 1fr; margin-top: -80px; }
  .grille { grid-template-columns: 1fr; }
  .garanties { grid-template-columns: repeat(2, 1fr); }
  .pied-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .acces { display: none; }
  .burger { display: block; }
  .vnav { display: none; }
  .vnav.ouvert { display: block; }
  .vnav ul { flex-direction: column; padding: .5rem 16px 1rem; }
  .vnav a { padding: .75rem .25rem; border-bottom: 1px solid var(--bord); }
  .marque { font-size: 1.45rem; }
  .barre, .hero-carte, .garanties, .conseillers, .colonnes, .services { padding-left: 16px; padding-right: 16px; }
  .hero-carte { margin-top: -50px; }
  .hero-texte { padding: 1.4rem 1.25rem 1rem; }
  .colonnes { grid-template-columns: 1fr; gap: 1.5rem; }
  .garanties { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1.5rem; }
  .garanties li { flex-direction: column; align-items: flex-start; gap: .4rem; padding: .8rem; font-size: .84rem; line-height: 1.35; }
  section[id] { scroll-margin-top: 80px; }
  .voyant { grid-template-columns: 110px minmax(0, 1fr); gap: .9rem; padding: .9rem; }
  .v-photo img { width: 110px; height: 132px; }
  .voyant { align-items: start; row-gap: .5rem; }
  .v-corps { display: contents; }
  .v-tete, .v-meta { grid-column: 2; }
  .v-tete { flex-direction: column; gap: .35rem; }
  .v-meta { flex-direction: column; align-items: flex-start; gap: .4rem; margin: 0; }
  .spec, .v-desc, .tels, .audiotel, .vocal, .v-actions { grid-column: 1 / -1; }
  .spec { margin: .3rem 0 0; }
  .v-desc { -webkit-line-clamp: 3; }
  .tel { grid-template-columns: 108px minmax(0, 1fr); }
  .tel-pays { min-width: 0; }
  .filtres, .filtres label, .filtres select { width: 100%; }
  .pied-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-bas { flex-direction: column; align-items: start; }
}
/* barre d'actions fixe sur mobile : les deux boutons du site restent à portée de pouce */
.barre-mobile { display: none; }
@media (max-width: 760px) {
  .v-photo { grid-row: 1 / span 2; }
  body { padding-bottom: 72px; }
  .barre-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; inset: auto 0 0 0; z-index: 30;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); box-shadow: 0 -1px 0 var(--bord), 0 -6px 18px rgba(26,49,107,.08); }
  .barre-mobile .vbtn { font-size: .78rem; padding: .5em .6em; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- intégration Symfony ---------- */
.statut.occ { color: #a35a00; background: #fff1dc; }
.flash { max-width: var(--max); margin: 1rem auto 0; padding: .8rem 1rem; border-radius: var(--r); background: #e6f4e4; color: #1d5c27; }
.vide { padding: 2rem; text-align: center; background: #fff; border: 1px dashed var(--bord); border-radius: var(--r-lg); color: var(--doux); }

/* Filtre des voyants : la règle display des cartes ne doit pas annuler l attribut hidden. */
.voyant[hidden] { display: none; }

/* ---------- pages de contenu (gabarit voyanceprestige/page.html.twig) ---------- */
.bandeau-page { height: 150px; background: var(--ciel) url("../img/vp/bandeau-haut-2340x600.webp") center 35% / cover no-repeat; }
.page-contenu { max-width: var(--max); margin: -70px auto 3rem; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; position: relative; }
.texte { background: var(--carte); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: 2rem 2.4rem; }
.texte h1 { font-size: 1.9rem; }
.texte h2 { font-size: 1.35rem; margin-top: 1.6em; padding-bottom: .3em; border-bottom: 2px solid var(--ciel); }
.texte h3 { font-size: 1.12rem; margin-top: 1.3em; }
.texte h4 { font-size: 1rem; margin-top: 1.1em; }
.texte ul, .texte ol { padding-left: 1.3em; }
.texte p { line-height: 1.7; margin: 0 0 1em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
/* Liste faite uniquement de liens (sommaire du lexique, menus des fiches…) : grille de pastilles cliquables.
   Classe posée par finaliser_pages.py. */
.texte ul.liste-liens { list-style: none; padding: 0; margin: 1rem 0 1.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .55rem; }
.texte ul.liste-liens li { max-width: none; margin: 0; }
/* Numéros par pays écrits dans le texte (« En BELGIQUE : 02 … ») : drapeau, pays, numéro en bouton. Classe et drapeaux posés par finaliser_pages.py. */
.texte ul.liste-tels { list-style: none; padding: 0; margin: 1rem 0 1.6rem; display: grid; gap: .5rem; max-width: 560px; }
.texte ul.liste-tels li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem .8rem; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--r); font-weight: 500; }
.texte ul.liste-tels .drapeau { flex: none; width: 22px; height: 22px; color: var(--lien); }
.texte ul.liste-tels a { margin-left: auto; padding: .35rem .85rem; border-radius: 999px; background: var(--marque); color: #fff; font-weight: 700; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.texte ul.liste-tels a:hover, .texte ul.liste-tels a:focus-visible { background: var(--lien); }
.texte ul.liste-liens a { display: flex; align-items: center; gap: .6rem; height: 100%; padding: .7rem .95rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r); color: var(--lien); font-weight: 500; text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
.texte ul.liste-liens a::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--etoile); }
.texte ul.liste-liens a::after { content: "\203A"; margin-left: auto; color: var(--doux); font-size: 1.2em; line-height: 1; }
.texte ul.liste-liens a:hover, .texte ul.liste-liens a:focus-visible { border-color: var(--lien); background: var(--ciel); transform: translateY(-1px); }
.texte hr { border: 0; border-top: 1px solid var(--bord); margin: 1.8rem 0; }
.texte img { height: auto; border-radius: var(--r-sm); }
.texte iframe { max-width: 100%; border: 0; border-radius: var(--r); background: var(--ciel); display: block; margin: .5rem 0 1rem; }
.texte table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.texte td, .texte th { border: 1px solid var(--bord); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.page-cote { position: sticky; top: 140px; }
@media (max-width: 900px) {
  .page-contenu { grid-template-columns: minmax(0, 1fr); margin-top: -40px; }
  .page-cote { position: static; }
  .bandeau-page { height: 110px; }
  .texte { padding: 1.4rem 1.1rem; }
  .texte h1 { font-size: 1.5rem; }
}

/* ---------- annuaire ---------- */
.page-large { grid-template-columns: minmax(0, 1fr); }
.annuaire { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.annuaire a { display: grid; justify-items: center; gap: .4rem; padding: 1rem .6rem; border: 1px solid var(--bord); border-radius: var(--r); text-decoration: none; color: var(--encre); background: #fff; transition: box-shadow .15s ease, transform .15s ease; }
.annuaire a:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.annuaire img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; border: 3px solid var(--ciel); }
.annuaire .nom { font: 600 1rem/1.25 var(--serif); color: var(--titre); text-align: center; }

/* Menu commun des pages du lexique, placé après le contenu */
.lexique-nav { margin-top: 2.5rem; padding: 1.4rem 1.6rem; background: var(--ciel); border-radius: var(--r); }
.lexique-nav h2 { margin-top: 0; border: 0; font-size: 1.15rem; }
.lexique-nav ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .3rem 1rem; padding-left: 1.1em; }

/* ---------- corrections de la recette du 21/10/2026 ---------- */
/* Cartes de l'accueil sur mobile : seule la ligne du pays choisi reste visible, « Autres pays » déplie le reste.
   Sans JavaScript (aucune ligne .tel-choisi), toutes les lignes restent affichées. */
.tels-plus { display: none; }
@media (max-width: 760px) {
  .voyant .tels:has(.tel-choisi):not(.tout-voir) .tel:not(.tel-choisi) { display: none; }
  .voyant .tels:has(.tel-choisi) + .tels-plus { display: inline-flex; align-items: center; min-height: 44px; margin: -.3rem 0 .6rem;
    padding: 0 .9rem; border: 1px solid var(--bord); border-radius: 999px; background: #fff; color: var(--lien); font: 500 .85rem var(--sans); cursor: pointer; }
}
/* Annuaire : deux vignettes par ligne sur petit écran */
@media (max-width: 480px) {
  .annuaire { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .annuaire img { width: 84px; height: 84px; }
  .annuaire a { padding: .8rem .4rem; }
}
/* Pied de page : l'adresse du site n'est pas coupée au milieu ; liens confortables au doigt */
.pied h5 { overflow-wrap: normal; word-break: normal; }
@media (max-width: 760px) { .pied a { display: inline-block; padding: .55rem 0; } }