/* ============================================================
   Annuaire GoodBeauty — feuille de style unique
   Téléphone d'abord, puis tablette (≥ 720 px) et ordinateur (≥ 1080 px).
   Effets : transitions entre pages (View Transitions), apparitions au défilement
   (animations liées au défilement), tout coupé si « réduire les animations ».
   ============================================================ */

@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-opsz-italic.woff2") format("woff2-variations"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --encre: #241d21; --encre-2: #4a3f45; --muet: #7d6f76; --ligne: #ebe3df; --ligne-forte: #d9cec9;
  --creme: #fbf8f6; --sable: #f4ede9; --blanc: #fff;
  --prune: #9d3b6e; --prune-fonce: #7a2a54; --rose: #d0608f; --rose-doux: #fbeef4; --peche: #f6c7a8;
  --or: #e0a82e; --or-doux: #fdf3dc; --vert: #2f7d55; --vert-doux: #e5f3ec; --ambre: #a8650f; --ambre-doux: #fdf0dc;
  --degrade: linear-gradient(120deg, #9d3b6e 0%, #d0608f 55%, #f0a07a 100%);
  --r: 22px; --r-s: 14px; --ombre: 0 1px 2px rgb(36 29 33 / .05), 0 10px 30px -12px rgb(36 29 33 / .18);
  --ombre-forte: 0 2px 6px rgb(36 29 33 / .06), 0 30px 60px -24px rgb(36 29 33 / .35);
  --titre: "Fraunces", Georgia, "Times New Roman", serif; --texte: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --l-max: 1240px; --gouttiere: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--creme); color: var(--encre); font: 400 16px/1.6 var(--texte); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--prune); text-underline-offset: 3px; }
a:hover { color: var(--prune-fonce); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 520; letter-spacing: -.015em; line-height: 1.1; margin: 0; font-optical-sizing: auto; }
h1 { font-size: clamp(2.1rem, 5.6vw, 4.1rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
[hidden] { display: none !important; }
.muet { color: var(--muet); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aller-contenu { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 10px; }
.aller-contenu:focus { top: 12px; }
:focus-visible { outline: 2.5px solid var(--prune); outline-offset: 3px; border-radius: 6px; }
.enveloppe { max-width: var(--l-max); margin: 0 auto; padding: 0 var(--gouttiere); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 .78rem/1.2 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--prune); margin-bottom: 14px; }
.kicker::before { content: ""; width: 22px; height: 1.5px; background: currentColor; }
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(22px, 3vw, 36px); }
.section-tete p { margin: 8px 0 0; color: var(--encre-2); max-width: 60ch; }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.lien-fleche .ic { transition: transform .2s; }
.lien-fleche:hover .ic { transform: translateX(3px); }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--encre);
  background: transparent; color: var(--encre); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s, background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.bouton:hover { background: var(--encre); color: #fff; }
.bouton:active { transform: scale(.98); }
.bouton-plein { background: var(--prune); border-color: var(--prune); color: #fff; box-shadow: 0 8px 22px -10px rgb(157 59 110 / .7); }
.bouton-plein:hover { background: var(--prune-fonce); border-color: var(--prune-fonce); color: #fff; }
.bouton-blanc { background: #fff; border-color: #fff; color: var(--encre); }
.bouton-blanc:hover { background: var(--rose-doux); color: var(--encre); }
.bouton-petit { min-height: 40px; padding: 0 16px; font-size: .92rem; }
.bouton-grand { min-height: 56px; padding: 0 30px; font-size: 1.05rem; }

/* Bandeaux */
.annonce { background: var(--encre); color: #fff; text-align: center; font-size: .88rem; padding: 8px 16px; }
.annonce-banc { background: #5b4a1a; }

/* ---------- En-tête ---------- */
.tete { position: sticky; top: 0; z-index: 40; background: rgb(251 248 246 / .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgb(235 227 223 / .7); }
.tete-in { max-width: var(--l-max); margin: 0 auto; padding: 10px var(--gouttiere); display: flex; align-items: center; gap: 14px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--encre); flex: 0 0 auto; }
.logo img { border-radius: 10px; }
.logo-mot { font: 600 1.28rem/1 var(--titre); letter-spacing: -.02em; }
.logo-mot b { font-weight: 600; color: var(--prune); }
.logo-pays { font: 700 .72rem/1 var(--texte); color: var(--muet); margin-left: -4px; align-self: flex-end; margin-bottom: 3px; }
.tete-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.tn-lien { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; color: var(--encre); text-decoration: none; font-weight: 600; font-size: .95rem; }
.tn-lien:hover { background: var(--sable); color: var(--encre); }
.tn-pro { margin-left: 6px; padding: 9px 16px; border-radius: 999px; background: var(--encre); color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; }
.tn-pro:hover { background: var(--prune); color: #fff; }
.recherche-pastille { display: none; align-items: center; gap: 10px; min-width: 0; max-width: 420px; flex: 1 1 auto; margin: 0 auto; padding: 8px 8px 8px 16px; border-radius: 999px;
  border: 1px solid var(--ligne-forte); background: #fff; box-shadow: var(--ombre); cursor: pointer; text-align: left; }
.recherche-pastille .ic { color: var(--prune); }
.recherche-pastille span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: .92rem; }
.rp-sep { width: 1px; height: 18px; background: var(--ligne-forte); flex: 0 0 auto; }
.rp-ou { color: var(--muet); font-weight: 500 !important; }
.tete-recherche { padding: 0 var(--gouttiere) 14px; max-width: var(--l-max); margin: 0 auto; }
@media (max-width: 719px) {
  .tete-in { min-height: 58px; gap: 10px; }
  .tn-lien span, .tn-pro { display: none; }
  .tn-lien { padding: 9px; }
  .logo-mot { font-size: 1.15rem; }
  .recherche-pastille { display: flex; max-width: none; padding: 7px 7px 7px 12px; }
  .recherche-pastille ~ .tete-nav .tn-lien:first-child { display: none; }
  .avec-pastille .tete .logo-mot, .avec-pastille .tete .logo-pays { display: none; }
}
@media (min-width: 720px) { .recherche-pastille { display: flex; } }

/* ---------- Barre de recherche ---------- */
.barre { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; background: #fff; border-radius: 26px; box-shadow: var(--ombre-forte); border: 1px solid var(--ligne); padding: 8px; }
.barre-champ { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 10px 16px 8px; border-radius: 18px; min-width: 0; }
.barre-champ:focus-within { background: var(--sable); }
.barre-champ label { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.barre-champ label .ic { color: var(--prune); }
.barre-champ input { border: 0; background: transparent; padding: 4px 0 2px; font-size: 1.05rem; font-weight: 600; outline: none; width: 100%; min-width: 0; }
.barre-champ input::placeholder { color: #a99ca2; font-weight: 500; }
.barre-champ input::-webkit-search-cancel-button { display: none; }
.barre-ou { border-top: 1px solid var(--ligne); }
.barre-autour { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--rose-doux); color: var(--prune); font-weight: 700; font-size: .82rem;
  padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.barre-autour:hover { background: #f6dbe8; }
.barre-autour.attente .ic { animation: tourne 1s linear infinite; }
.barre-ou input { padding-right: 132px; }
.barre-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; min-height: 54px; border: 0; border-radius: 18px; background: var(--degrade); color: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 12px 28px -12px rgb(157 59 110 / .8); transition: filter .2s, transform .15s; }
.barre-go:hover { filter: brightness(1.06) saturate(1.1); }
.barre-go:active { transform: scale(.98); }
@media (min-width: 860px) {
  .barre { grid-template-columns: 1.15fr 1fr auto; align-items: stretch; border-radius: 999px; padding: 8px; }
  .barre-champ { border-radius: 999px; padding: 10px 26px 8px; }
  .barre-ou { border-top: 0; border-left: 1px solid var(--ligne); }
  .barre-champ:focus-within + .barre-ou, .barre-ou:focus-within { border-color: transparent; }
  .barre-go { margin: 0 0 0 6px; border-radius: 999px; padding: 0 30px; }
}
.barre-compacte { box-shadow: var(--ombre); }
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; list-style: none; margin: 0; padding: 8px; background: #fff; border-radius: 18px; border: 1px solid var(--ligne); box-shadow: var(--ombre-forte); max-height: 360px; overflow: auto; }
.suggestions li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--sable); }
.suggestions .sg-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--rose-doux); color: var(--prune); flex: 0 0 auto; }
.suggestions b { display: block; font-weight: 650; }
.suggestions small { color: var(--muet); }
@keyframes tourne { to { transform: rotate(1turn); } }

/* ---------- Accueil : héros ---------- */
.heros { position: relative; isolation: isolate; overflow: hidden; padding: clamp(18px, 3.2vw, 40px) 0 clamp(30px, 4vw, 56px); }
.heros::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1;
  background: radial-gradient(40% 50% at 15% 25%, rgb(246 199 168 / .55), transparent 70%), radial-gradient(35% 45% at 85% 20%, rgb(208 96 143 / .28), transparent 70%),
              radial-gradient(45% 55% at 60% 85%, rgb(157 59 110 / .16), transparent 70%);
  animation: aurore 18s ease-in-out infinite alternate; }
@keyframes aurore { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-3%, 4%, 0) scale(1.08); } }
.heros-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.heros h1 { max-width: 15ch; }
.heros h1 em { font-style: italic; font-weight: 420; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.heros-sous { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--encre-2); max-width: 46ch; margin: 18px 0 28px; }
.heros-chiffres { margin: -12px 0 0; font-size: 1rem; color: var(--encre-2); }
.heros-recherche { margin-top: clamp(20px, 3vw, 34px); }
@media (min-width: 860px) {
  .heros-recherche .barre { grid-template-columns: 1.35fr 1fr auto; padding: 10px; }
  .heros-recherche .barre-champ { padding: 14px 30px 12px; }
  .heros-recherche .barre-champ label { font-size: .8rem; }
  .heros-recherche .barre-champ input { font-size: 1.22rem; padding: 6px 0 2px; }
  .heros-recherche .barre-go { min-height: 68px; padding: 0 44px; font-size: 1.15rem; }
  .heros-recherche .barre-autour { right: 16px; font-size: .86rem; padding: 9px 14px; }
}
.heros-chiffres b { color: var(--prune); }
.pres-de-vous .section-tete { align-items: end; }
.pdv-bouton.attente { opacity: .7; pointer-events: none; }
.pdv-note { margin: -6px 0 14px; }
.pdv-plus { margin: 18px 0 0; }
.pdv-villes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; }
.pdv-villes .puce small { opacity: .65; margin-left: 2px; }
.heros-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.puce { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .75); border: 1px solid var(--ligne); color: var(--encre); text-decoration: none; font-weight: 600; font-size: .9rem;
  transition: background .2s, border-color .2s, transform .15s; }
.puce:hover { background: #fff; border-color: var(--prune); color: var(--prune); transform: translateY(-1px); }
.puce .ic { color: var(--prune); }
.heros-visuel { position: relative; height: 380px; display: none; }
.flotte { position: absolute; background: #fff; border-radius: 20px; box-shadow: var(--ombre-forte); border: 1px solid var(--ligne); padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-weight: 650;
  animation: flotte 7s ease-in-out infinite; }
.flotte small { display: block; font-weight: 500; color: var(--muet); font-size: .82rem; }
.flotte .fl-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.fl-1 { top: 4%; left: 6%; animation-delay: -1s; } .fl-1 .fl-ic { background: var(--ambre-doux); color: var(--ambre); }
.fl-2 { top: 30%; right: 0; animation-delay: -3s; } .fl-2 .fl-ic { background: var(--or-doux); color: #b07d10; }
.fl-3 { top: 58%; left: 0; animation-delay: -5s; } .fl-3 .fl-ic { background: var(--vert-doux); color: var(--vert); }
.fl-4 { bottom: 0; right: 10%; animation-delay: -2s; } .fl-4 .fl-ic { background: var(--rose-doux); color: var(--prune); }
.fl-telephone { position: absolute; left: 50%; top: 50%; width: 210px; height: 400px; transform: translate(-50%, -50%) rotate(-4deg); border-radius: 38px; background: linear-gradient(160deg, #fff, var(--sable)); border: 8px solid var(--encre);
  box-shadow: var(--ombre-forte); overflow: hidden; z-index: -1; }
.fl-telephone::before { content: ""; position: absolute; inset: 0; background: var(--degrade); opacity: .9; clip-path: ellipse(120% 46% at 50% 0); }
.fl-telephone i { position: absolute; left: 18px; right: 18px; height: 12px; border-radius: 6px; background: rgb(36 29 33 / .08); }
.fl-telephone i:nth-child(1) { top: 210px; } .fl-telephone i:nth-child(2) { top: 236px; right: 60px; } .fl-telephone i:nth-child(3) { top: 280px; height: 44px; border-radius: 12px; background: #fff; box-shadow: var(--ombre); }
.fl-telephone i:nth-child(4) { top: 334px; height: 40px; border-radius: 999px; background: var(--prune); }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (min-width: 1080px) { .heros-grille { grid-template-columns: 1.25fr .75fr; } .heros-visuel { display: block; } }

/* ---------- Grilles de cartes ---------- */
.grille-cartes { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grille-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grille-cartes.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Carte d'institut */
.carte-inst { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r); border: 1px solid var(--ligne); overflow: hidden; box-shadow: 0 1px 2px rgb(36 29 33 / .04);
  transition: box-shadow .25s, transform .25s, border-color .25s; }
.carte-inst:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); border-color: transparent; }
.carte-inst.actif { border-color: var(--prune); box-shadow: 0 0 0 2px var(--prune), var(--ombre-forte); }
.ci-photos { position: relative; aspect-ratio: 4 / 3; background: var(--sable); }
.ci-defile { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ci-defile::-webkit-scrollbar { display: none; }
.ci-defile a { flex: 0 0 100%; scroll-snap-align: start; }
.ci-defile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.carte-inst:hover .ci-defile img { transform: scale(1.035); }
.ci-points { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.ci-points i { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / .55); transition: background .2s, transform .2s; }
.ci-points i.on { background: #fff; transform: scale(1.25); }
.ci-sans-photo { display: grid; place-items: center; height: 100%; background: var(--degrade); text-decoration: none; }
.ci-sans-photo span { font: 500 4rem/1 var(--titre); color: rgb(255 255 255 / .9); }
.ci-promo { position: absolute; top: 12px; left: 12px; }
.badge-promo { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: var(--prune); color: #fff; font-weight: 800; font-size: .88rem; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .4); white-space: nowrap; }
.badge-eclair { background: linear-gradient(120deg, #c2410c, #e0a82e); }
.badge-eclair .ic { width: 1em; height: 1em; fill: currentColor; stroke-width: 1.2; }
.ci-corps { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.ci-nom { font-size: 1.28rem; }
.ci-nom a { color: var(--encre); text-decoration: none; }
.ci-nom a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* toute la carte est cliquable */
.ci-photos a, .ci-pied a, .ci-plus a { position: relative; z-index: 2; }
.ci-lieu { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--encre-2); font-size: .93rem; }
.ci-sponsor { margin: -2px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muet); }   /* place payée : Code conso., L.121-4 25° */
.ci-lieu .ic { color: var(--prune); }
.ci-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: .92rem; }
.ci-ouvert { font-size: .82rem; font-weight: 700; color: var(--muet); }
.ci-ouvert.oui { color: var(--vert); }
.ci-ouvert::before { content: "•"; margin-right: 6px; color: var(--ligne-forte); }
.ci-accroche { margin: 0; color: var(--encre-2); font-size: .94rem; }
.ci-soins { list-style: none; margin: 2px 0 0; padding: 0; border-top: 1px solid var(--ligne); }
.ci-soins li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--ligne); font-size: .92rem; }
.ci-soins li span { min-width: 0; }
.ci-soins b { white-space: nowrap; }
.ci-soin-promo { font-style: normal; font-size: .76rem; color: #fff; background: var(--prune); padding: 2px 7px; border-radius: 999px; margin-right: 4px; }
.ci-plus { border-bottom: 0 !important; }
.ci-plus a { font-weight: 700; text-decoration: none; }
.ci-atouts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ci-atouts span { font-size: .78rem; font-weight: 650; padding: 4px 9px; border-radius: 999px; background: var(--sable); color: var(--encre-2); }
.ci-atouts .ci-relie { background: var(--vert-doux); color: var(--vert); display: inline-flex; align-items: center; gap: 4px; }
.ci-atouts .ci-etoile { background: var(--or-doux); color: #8a5a00; display: inline-flex; align-items: center; gap: 4px; }
.ci-etoile .ic { width: .95em; height: .95em; fill: currentColor; stroke-width: 1; }
.ci-pied { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ci-prix { color: var(--muet); font-size: .9rem; }
.ci-prix b { color: var(--encre); font-size: 1.08rem; }

/* Étoiles */
.etoiles { position: relative; display: inline-block; width: 5.3em; height: 1em; font-size: .95em; vertical-align: -.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ddd3cf' d='m10 1.5 2.6 5.4 5.9.8-4.3 4.1 1 5.9L10 15l-5.2 2.7 1-5.9L1.5 7.7l5.9-.8z'/%3E%3C/svg%3E") repeat-x 0 0 / 1.06em 1em; }
.etoiles-pleines { position: absolute; inset: 0 auto 0 0; overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23e0a82e' d='m10 1.5 2.6 5.4 5.9.8-4.3 4.1 1 5.9L10 15l-5.2 2.7 1-5.9L1.5 7.7l5.9-.8z'/%3E%3C/svg%3E") repeat-x 0 0 / 1.06em 1em; }
.etoiles.grandes { font-size: 1.4em; }

/* ---------- Familles de soins ---------- */
.familles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .familles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .familles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.famille { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--ligne); text-decoration: none; color: var(--encre); font-weight: 700;
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.famille:hover { border-color: var(--prune); color: var(--encre); transform: translateY(-2px); box-shadow: var(--ombre); }
.famille .fa-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--rose-doux); color: var(--prune); flex: 0 0 auto; transition: background .2s, color .2s; }
.famille:hover .fa-ic { background: var(--prune); color: #fff; }
.famille .fa-ic .ic { width: 24px; height: 24px; }
.famille small { display: block; font-weight: 500; color: var(--muet); font-size: .82rem; }
@media (max-width: 719px) {
  .famille { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; font-size: .95rem; line-height: 1.25; }
  .famille .fa-ic { width: 40px; height: 40px; border-radius: 12px; }
  .heros-puces { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gouttiere)); padding-right: var(--gouttiere); }
  .heros-puces::-webkit-scrollbar { display: none; }
  .puce { flex: 0 0 auto; }
  .ci-ouvert { flex-basis: 100%; }
  .ci-ouvert::before { display: none; }
}

/* Villes */
.villes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ville { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--ligne); text-decoration: none; color: var(--encre); font-weight: 700; }
.ville:hover { border-color: var(--prune); color: var(--prune); }
.ville small { color: var(--muet); font-weight: 600; }

/* Pourquoi GoodBeauty */
.atouts-gb { display: grid; gap: 16px; }
@media (min-width: 720px) { .atouts-gb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .atouts-gb { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.atout-gb { padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--ligne); }
.atout-gb .ag-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--degrade); color: #fff; margin-bottom: 16px; box-shadow: 0 10px 24px -12px rgb(157 59 110 / .8); }
.atout-gb .ag-ic .ic { width: 26px; height: 26px; }
.atout-gb h3 { margin-bottom: 8px; }
.atout-gb p { margin: 0; color: var(--encre-2); font-size: .96rem; }

/* Bandeau pro */
.bandeau-pro { position: relative; overflow: hidden; border-radius: 32px; background: var(--encre); color: #fff; padding: clamp(30px, 5vw, 64px); display: grid; gap: 24px; align-items: center; isolation: isolate; }
.bandeau-pro::before { content: ""; position: absolute; inset: auto -10% -60% 30%; height: 140%; background: radial-gradient(closest-side, rgb(208 96 143 / .55), transparent); z-index: -1; }
.bandeau-pro h2 { color: #fff; max-width: 20ch; }
.bandeau-pro p { color: rgb(255 255 255 / .82); max-width: 54ch; margin: 12px 0 0; }
.bandeau-pro .kicker { color: var(--peche); }
@media (min-width: 900px) { .bandeau-pro { grid-template-columns: 1fr auto; } }

/* Promos */
.defile-h { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin: 0 -4px; scrollbar-width: thin; }
.defile-h > * { scroll-snap-align: start; }
@media (min-width: 1080px) { .defile-h { grid-auto-columns: calc((100% - 48px) / 4); } }
.carte-promo { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--ligne); text-decoration: none; color: var(--encre); transition: box-shadow .2s, transform .2s; }
.carte-promo:hover { box-shadow: var(--ombre-forte); transform: translateY(-2px); color: var(--encre); }
.carte-promo.eclair { background: linear-gradient(160deg, #fff7ed, #fff 60%); border-color: #f7d7b5; }
.cp-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cp-titre { font: 560 1.18rem/1.2 var(--titre); }
.cp-regle { font-size: .9rem; color: var(--encre-2); margin: 0; }
.cp-inst { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ligne); font-size: .9rem; }
.cp-inst img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.cp-inst b { display: block; }
.cp-soins { font-size: .86rem; color: var(--muet); margin: 0; }
.cp-soins s { color: var(--muet); }
.compte { font-weight: 800; color: #c2410c; font-size: .85rem; font-variant-numeric: tabular-nums; }

/* État vide */
.vide { text-align: center; padding: clamp(36px, 6vw, 64px) 20px; border-radius: 28px; background: #fff; border: 1px dashed var(--ligne-forte); }
.vide .ic-grand { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; display: grid; place-items: center; background: var(--rose-doux); color: var(--prune); }
.vide .ic-grand .ic { width: 30px; height: 30px; }
.vide h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 10px; }
.vide p { max-width: 52ch; margin: 0 auto 18px; color: var(--encre-2); }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-s); padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .25s; color: var(--prune); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { color: var(--encre-2); margin: 0 0 18px; }

/* ---------- Résultats ---------- */
.res-tete { padding-top: clamp(22px, 4vw, 40px); padding-bottom: 10px; }
.res-tete h1 { font-size: clamp(1.8rem, 4.2vw, 3rem); }
.res-sous { margin: 10px 0 0; color: var(--encre-2); }
.ariane ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .86rem; color: var(--muet); }
.ariane li + li::before { content: "›"; margin-right: 8px; color: var(--ligne-forte); }
.ariane a { color: var(--muet); text-decoration: none; }
.ariane a:hover { color: var(--prune); }
.filtres { position: sticky; top: 64px; z-index: 20; background: rgb(251 248 246 / .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.filtres-in { position: relative; display: flex; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.filtres-in::-webkit-scrollbar { display: none; }
.filtre { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: #fff; color: var(--encre); text-decoration: none; font-weight: 650; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.filtre:hover { border-color: var(--encre); color: var(--encre); }
.filtre.on { background: var(--encre); border-color: var(--encre); color: #fff; }
.filtre .ic { color: currentColor; }
.filtre select { border: 0; background: transparent; font-weight: 650; padding: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.filtres-sep { width: 1px; height: 24px; background: var(--ligne-forte); flex: 0 0 auto; }
.res-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 22px 0 60px; }
.res-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.res-compte { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .92rem; color: var(--encre-2); margin: 0; }
.res-compte a { font-weight: 600; }
.res-carte { display: none; }
.res-carte-in { position: sticky; top: 130px; height: calc(100vh - 150px); border-radius: var(--r); overflow: hidden; border: 1px solid var(--ligne); background: var(--sable); }
.carte-geo { width: 100%; height: 100%; }
.basculer-carte { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 35; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px;
  border-radius: 999px; border: 0; background: var(--encre); color: #fff; font-weight: 700; box-shadow: var(--ombre-forte); cursor: pointer; }
.avec-carte-mobile .res-carte { display: block; position: fixed; inset: 58px 0 0; z-index: 30; }
.avec-carte-mobile .res-carte-in { position: absolute; inset: 0; height: auto; border-radius: 0; }
@media (min-width: 1080px) {
  .res-corps.avec-geo { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
  .res-corps.avec-geo .res-carte { display: block; }
  .res-corps.avec-geo .grille-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .basculer-carte { display: none; }
}
.seo-texte { border-top: 1px solid var(--ligne); padding-top: 40px; padding-bottom: 70px; display: grid; gap: 28px; }
@media (min-width: 900px) { .seo-texte { grid-template-columns: 1.3fr 1fr; } }
.seo-texte h2 { font-size: 1.5rem; margin-bottom: 12px; }
.seo-texte p { color: var(--encre-2); }
.liens-nuage { display: flex; flex-wrap: wrap; gap: 8px; }
.liens-nuage a { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ligne); text-decoration: none; color: var(--encre-2); font-size: .88rem; font-weight: 600; }
.liens-nuage a:hover { border-color: var(--prune); color: var(--prune); }
@media (max-width: 719px) {
  .liens-defile { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gouttiere)); padding-right: var(--gouttiere); }
  .liens-defile::-webkit-scrollbar { display: none; }
  .liens-defile a { flex: 0 0 auto; }
}

/* Épingles de la carte (Leaflet) */
.epingle { background: transparent; border: 0; }
.epingle span { display: inline-block; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--encre); font: 800 .82rem/1 var(--texte); white-space: nowrap; box-shadow: 0 6px 16px -4px rgb(36 29 33 / .35); border: 1px solid var(--ligne); transition: transform .15s, background .15s; }
.epingle span::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.epingle.on span, .epingle span:hover { background: var(--prune); color: #fff; border-color: var(--prune); transform: translate(-50%, -100%) scale(1.1); }
.leaflet-container { font: inherit; background: var(--sable); }
.leaflet-popup-content-wrapper { border-radius: 16px; }
.leaflet-popup-content { margin: 12px 14px; font: 600 .92rem/1.4 var(--texte); }
.leaflet-popup-content a { font-weight: 800; }

/* ---------- Fiche d'institut ---------- */
.fiche-exemple { background: var(--ambre-doux); color: #6b3d06; border-bottom: 1px solid #f1d7ad; padding: 12px 0; font-weight: 650; font-size: .95rem; }
.galerie { position: relative; margin-top: 18px; }
.galerie-mosaique { display: grid; gap: 8px; border-radius: 26px; overflow: hidden; }
.galerie-mosaique button { position: relative; padding: 0; border: 0; background: var(--sable); cursor: zoom-in; overflow: hidden; }
.galerie-mosaique img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .3s; }
.galerie-mosaique button:hover img { transform: scale(1.03); filter: brightness(.95); }
.galerie-mosaique .g0 img { view-transition-name: photo-institut; }
.galerie-tout { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 0; background: #fff; font-weight: 700; font-size: .88rem; box-shadow: var(--ombre); cursor: pointer; }
@media (max-width: 719px) {
  .galerie { margin: 0 calc(-1 * var(--gouttiere)); }
  .galerie-mosaique { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 0; gap: 0; scrollbar-width: none; }
  .galerie-mosaique::-webkit-scrollbar { display: none; }
  .galerie-mosaique button { flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .galerie-compteur { position: absolute; right: 14px; bottom: 14px; padding: 5px 11px; border-radius: 999px; background: rgb(36 29 33 / .7); color: #fff; font-size: .8rem; font-weight: 700; }
  .galerie-tout { display: none; }
}
@media (min-width: 720px) {
  .galerie-mosaique { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; }
  .galerie-mosaique .g0 { grid-row: span 2; }
  .galerie-mosaique.n1 { grid-template-columns: 1fr; grid-template-rows: 440px; }
  .galerie-mosaique.n2 { grid-template-columns: 2fr 1fr; } .galerie-mosaique.n2 .g1 { grid-row: span 2; }
  .galerie-mosaique.n3 { grid-template-columns: 2fr 1fr; }
  .galerie-mosaique.n4 .g3 { grid-column: span 2; }
  .galerie-compteur { display: none; }
}
@media (min-width: 1080px) { .galerie-mosaique { grid-template-rows: 250px 250px; } .galerie-mosaique.n1 { grid-template-rows: 500px; } }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 26px 0 70px; }
@media (min-width: 1000px) { .fiche-grille { grid-template-columns: minmax(0, 1fr) 360px; gap: 54px; } }
.fiche-tete h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
.relie { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 5px 12px; border-radius: 999px; background: var(--vert-doux); color: var(--vert); font-size: .84rem; font-weight: 700; }
.note-manuel { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-s); background: var(--sable); border: 1px solid var(--ligne); color: var(--encre-2); font-size: .94rem; }
.note-manuel .ic { color: var(--prune); margin-top: 3px; }
.note-manuel a { font-weight: 700; }
.fiche-accroche { font-size: 1.15rem; color: var(--encre-2); margin: 10px 0 14px; }
.fiche-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 14px; font-size: .95rem; }
.fiche-meta a { color: var(--encre); font-weight: 700; }
.fiche-meta .ic { color: var(--prune); }
.etat-ouvert { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--muet); }
.etat-ouvert.oui { color: var(--vert); }
.etat-ouvert.oui::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 0 rgb(47 125 85 / .5); animation: pouls 2s infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 8px rgb(47 125 85 / 0); } 100% { box-shadow: 0 0 0 0 rgb(47 125 85 / 0); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ligne); font-size: .88rem; font-weight: 600; }
.chips .ic { color: var(--vert); }
.bloc { padding: 34px 0 0; margin-top: 34px; border-top: 1px solid var(--ligne); }
.bloc > h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin-bottom: 16px; }
.bloc-sous { color: var(--encre-2); margin: -6px 0 18px; }
.presentation { white-space: pre-line; color: var(--encre-2); font-size: 1.04rem; line-height: 1.75; }
.presentation.replie { max-height: 11.5em; overflow: hidden; mask-image: linear-gradient(#000 60%, transparent); -webkit-mask-image: linear-gradient(#000 60%, transparent); }
.lire-plus { border: 0; background: none; padding: 0; color: var(--prune); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Programme Clientes Étoile */
.programme-etoile { display: flex; gap: 16px; padding: 18px; border-radius: var(--r); background: linear-gradient(140deg, var(--or-doux), #fff 70%); border: 1px solid #f0d89a; margin-top: 20px; }
.programme-etoile .pe-ic { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; background: var(--or); color: #fff; }
.programme-etoile .pe-ic .ic { fill: currentColor; stroke-width: 1; width: 24px; height: 24px; }
.programme-etoile h3 { font-size: 1.08rem; margin-bottom: 4px; }
.programme-etoile p { margin: 0; font-size: .94rem; color: var(--encre-2); }

/* Soins */
.soins-outils { display: grid; gap: 10px; margin-bottom: 16px; }
.soins-chercher { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: #fff; }
.soins-chercher input { border: 0; outline: 0; background: transparent; padding: 12px 0; width: 100%; font-weight: 600; }
.soins-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.soins-cats::-webkit-scrollbar { display: none; }
.soins-cats button { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: #fff; font-weight: 650; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.soins-cats button.on { background: var(--encre); color: #fff; border-color: var(--encre); }
.groupe-soins { margin-bottom: 22px; }
.groupe-soins h3 { font: 800 .8rem/1.2 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--muet); margin: 0 0 8px; }
.soins { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-s); overflow: hidden; }
.soin { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--ligne); }
.soin:last-child { border-bottom: 0; }
.soin-txt { flex: 1; min-width: 0; }
.soin-nom { font-weight: 700; }
.soin-desc { display: block; color: var(--muet); font-size: .88rem; margin-top: 2px; }
.soin-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: .84rem; color: var(--muet); }
.soin-promo { color: var(--prune); font-weight: 700; }
.soin-prix { text-align: right; white-space: nowrap; font-weight: 800; }
.soin-prix s { display: block; color: var(--muet); font-weight: 500; font-size: .84rem; }
.soin-droite { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.soin .bouton { min-height: 38px; padding: 0 14px; font-size: .86rem; }
@media (max-width: 560px) {
  .soin { align-items: flex-start; gap: 10px; padding: 12px 14px; }
  .soin-droite { flex-direction: column; align-items: flex-end; gap: 6px; }
  .soin .bouton { min-height: 34px; padding: 0 12px; font-size: .82rem; }
  .soin-meta { font-size: .8rem; }
}
.soins-vide { padding: 18px; color: var(--muet); }
/* Prestations annoncées (fiche préparée sans soins ni prix) */
.prestations-intro { margin: 0 0 12px; color: var(--encre-2); }
.prestations { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.prestations li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--ligne); font-weight: 600; font-size: .95rem; line-height: 1.35; min-width: 0; overflow-wrap: anywhere;
  transition: border-color .2s, transform .2s; }
.prestations li:hover { border-color: var(--prune); transform: translateY(-1px); }
.prestations .pr-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--rose-doux, var(--sable)); color: var(--prune); }
.prestations-prix { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: .92rem; }
.js .groupe-soins:not(.ouvert) .soin-suite { display: none; }
.js .groupe-soins.filtre .soin-suite:not([hidden]) { display: flex; }
.soins-voir { display: none; margin: 8px 0 0; border: 0; background: none; padding: 6px 2px; color: var(--prune); font-weight: 800; cursor: pointer; align-items: center; gap: 6px; }
.js .soins-voir { display: inline-flex; }
.js .groupe-soins.ouvert .soins-voir, .js .groupe-soins.filtre .soins-voir { display: none; }
.soins-plus { margin-top: 10px; }

/* Avis */
.avis-synthese { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--ligne); margin-bottom: 16px; }
.avis-grand { font: 560 3.4rem/1 var(--titre); letter-spacing: -.03em; }
.avis-synthese p { margin: 0; color: var(--encre-2); font-size: .92rem; }
.avis-liste { display: grid; gap: 12px; }
@media (min-width: 720px) { .avis-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avis { margin: 0; padding: 18px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 8px; }
.avis-tete { display: flex; align-items: center; gap: 10px; }
.avis-initiale { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--rose-doux); color: var(--prune); font-weight: 800; flex: 0 0 auto; }
.avis-tete b { display: block; font-size: .95rem; }
.avis-tete small { color: var(--muet); font-size: .8rem; }
.avis blockquote { margin: 0; font-size: .98rem; }
.avis-pied { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .8rem; color: var(--muet); }
.avis-verifie { display: inline-flex; align-items: center; gap: 4px; color: var(--vert); font-weight: 700; }
.avis-mention { font-size: .85rem; color: var(--muet); margin-top: 12px; }

/* Infos pratiques */
.infos-grille { display: grid; gap: 18px; }
@media (min-width: 720px) { .infos-grille { grid-template-columns: 1fr 1fr; } }
.horaires { width: 100%; border-collapse: collapse; font-size: .95rem; }
.horaires th { text-align: left; font-weight: 600; padding: 7px 0; }
.horaires td { text-align: right; padding: 7px 0; color: var(--encre-2); }
.horaires tr { border-bottom: 1px dashed var(--ligne); }
.horaires tr.auj th, .horaires tr.auj td { color: var(--prune); font-weight: 800; }
.horaires tr.inconnu td { color: var(--muet); font-style: italic; font-weight: 500; }
.bon-a-savoir { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-s); background: var(--sable); border: 1px solid var(--ligne); font-size: .93rem; }
.bon-a-savoir b { display: flex; align-items: center; gap: 6px; }
.bon-a-savoir .ic { color: var(--prune); }
.bon-a-savoir ul { margin: 6px 0 0; padding-left: 20px; color: var(--encre-2); }
.carte-mini { height: 240px; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--ligne); background: var(--sable); margin-bottom: 12px; }
.itineraires { display: flex; flex-wrap: wrap; gap: 8px; }
.acces-txt { color: var(--encre-2); font-size: .94rem; margin: 10px 0 0; }

/* Colonne de réservation */
.resa { position: sticky; top: 90px; align-self: start; display: grid; gap: 14px; }
.resa-carte { padding: 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--ligne); box-shadow: var(--ombre-forte); }
.resa-carte h2 { font-size: 1.4rem; margin-bottom: 6px; }
.resa-des { color: var(--muet); margin: 0 0 16px; }
.resa-des b { color: var(--encre); font-size: 1.25rem; }
.resa-carte .bouton { width: 100%; }
.resa-garanties { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; color: var(--encre-2); }
.resa-garanties li { display: flex; gap: 8px; align-items: flex-start; }
.resa-garanties .ic { color: var(--vert); margin-top: 2px; }
.resa-liens { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--ligne); }
.resa-liens a, .resa-liens button { display: flex; align-items: center; gap: 10px; padding: 9px 4px; color: var(--encre); text-decoration: none; font-weight: 650; border: 0; background: none; cursor: pointer; text-align: left; }
.resa-liens a:hover, .resa-liens button:hover { color: var(--prune); }
.resa-liens .ic { color: var(--prune); }
.barre-resa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gouttiere) max(12px, env(safe-area-inset-bottom));
  background: rgb(255 255 255 / .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--ligne); box-shadow: 0 -10px 30px -18px rgb(36 29 33 / .4); }
.barre-resa small { display: block; color: var(--muet); font-size: .8rem; }
.barre-resa b { font-size: 1.1rem; }
@media (min-width: 1000px) { .barre-resa { display: none; } }
@media (max-width: 999px) { .resa { position: static; } .page-fiche .pied { padding-bottom: 90px; } }

/* Visionneuse photo */
.visionneuse { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(18 13 16 / .96); color: #fff; }
.visionneuse::backdrop { background: rgb(18 13 16 / .9); }
.vis-defile { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vis-defile::-webkit-scrollbar { display: none; }
.vis-defile figure { flex: 0 0 100%; height: 100%; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 12px; scroll-snap-align: center; padding: 60px 16px; }
.vis-defile img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.vis-defile figcaption { max-width: 640px; text-align: center; font-size: .95rem; color: rgb(255 255 255 / .82); }
.vis-fermer, .vis-prec, .vis-suiv { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vis-fermer:hover, .vis-prec:hover, .vis-suiv:hover { background: rgb(255 255 255 / .26); }
.vis-fermer { top: 14px; right: 14px; }
.vis-prec { left: 14px; top: 50%; transform: translateY(-50%); }
.vis-suiv { right: 14px; top: 50%; transform: translateY(-50%); }
.vis-compteur { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: .9rem; }
@media (max-width: 719px) { .vis-prec, .vis-suiv { display: none; } }

/* À proximité */
.proches { display: grid; gap: 12px; }
@media (min-width: 720px) { .proches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proche { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--ligne); text-decoration: none; color: var(--encre); }
.proche:hover { border-color: var(--prune); color: var(--encre); }
.proche img, .proche .pr-sans { width: 70px; height: 70px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: var(--degrade); }
.proche b { display: block; }
.proche small { color: var(--muet); }

/* ---------- Pages pro et texte ---------- */
.page-texte { max-width: 820px; padding: clamp(28px, 5vw, 60px) 0 80px; }
.page-texte h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 18px; }
.page-texte h2 { font-size: 1.45rem; margin: 34px 0 10px; }
.page-texte p, .page-texte li { color: var(--encre-2); }
.pro-heros { padding: clamp(36px, 6vw, 80px) 0 30px; display: grid; gap: 34px; align-items: center; }
@media (min-width: 1000px) { .pro-heros { grid-template-columns: 1.1fr .9fr; } }
.pro-heros h1 em { font-style: italic; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pro-heros p { font-size: 1.12rem; color: var(--encre-2); max-width: 52ch; margin: 18px 0 24px; }
.pro-tel { position: relative; justify-self: center; width: min(300px, 76vw); }
.pro-tel figure { margin: 0; aspect-ratio: 390 / 844; border-radius: 42px; border: 9px solid var(--encre); overflow: hidden; background: #000; box-shadow: var(--ombre-forte); transform: rotate(2deg); }
.pro-tel img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pro-tel figcaption { margin-top: 14px; text-align: center; font-size: .82rem; color: var(--muet); }
.etapes { counter-reset: etape; display: grid; gap: 16px; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etape { padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--ligne); }
.etape::before { counter-increment: etape; content: counter(etape); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--encre); color: #fff; font-weight: 800; margin-bottom: 14px; }
.etape h3 { margin-bottom: 6px; }
.etape p { margin: 0; color: var(--encre-2); }
.formulaire { display: grid; gap: 14px; padding: clamp(20px, 4vw, 34px); border-radius: 28px; background: #fff; border: 1px solid var(--ligne); box-shadow: var(--ombre); }
.formulaire .rang { display: grid; gap: 14px; }
@media (min-width: 720px) { .formulaire .rang { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: 6px; }
.champ label, .champ legend { font-weight: 700; font-size: .92rem; }
.champ input, .champ textarea, .champ select { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--ligne-forte); background: var(--creme); outline: none; transition: border-color .2s, background .2s; }
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--prune); background: #fff; }
.champ small { color: var(--muet); }
.champ-piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.formulaire fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.choix label { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--ligne-forte); cursor: pointer; font-weight: 600; font-size: .92rem; }
.choix input { accent-color: var(--prune); }
.choix label:has(input:checked) { border-color: var(--prune); background: var(--rose-doux); }
.message { padding: 14px 18px; border-radius: 14px; font-weight: 600; }
.message.ok { background: var(--vert-doux); color: var(--vert); }
.message.erreur { background: #fde8e8; color: #9b1c1c; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: rgb(255 255 255 / .78); padding: 56px 0 24px; margin-top: 40px; }
.pied-in { max-width: var(--l-max); margin: 0 auto; padding: 0 var(--gouttiere); display: grid; gap: 30px; }
@media (min-width: 900px) { .pied-in { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.pied .logo { color: #fff; }
.pied .logo-mot b { color: var(--peche); }
.pied p { font-size: .92rem; margin: 14px 0 0; max-width: 40ch; }
.pied h2 { font: 800 .78rem/1.2 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.pied a { color: rgb(255 255 255 / .78); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-pays { display: flex; align-items: center; gap: 6px; }
.pied-pays a { color: var(--peche); font-weight: 700; }
.pied .pied-credit { max-width: var(--l-max); margin: 40px auto 0; padding: 18px var(--gouttiere) 0; border-top: 1px solid rgb(255 255 255 / .12); font-size: .84rem; }

/* ---------- Page introuvable ---------- */
.introuvable { text-align: center; padding-top: clamp(60px, 10vw, 120px); padding-bottom: clamp(60px, 10vw, 120px); }
.introuvable .grand { font: 500 clamp(5rem, 14vw, 9rem)/1 var(--titre); background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Effets ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(photo-institut) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* Apparition au défilement : cachés seulement quand le script tourne (classe « js » posée tout de suite), révélés une fois pour toutes */
.js .apparait:not(.vu) { opacity: 0; transform: translateY(26px); animation: montrer .01s 4s forwards; }   /* filet : visible quoi qu'il arrive après 4 s */
@keyframes montrer { to { opacity: 1; transform: none; } }
.js .apparait { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* ---------- Administration ---------- */
.admin { max-width: 1100px; margin: 0 auto; padding: 30px var(--gouttiere) 80px; }
.admin h1 { font-size: 2rem; margin-bottom: 18px; }
.admin h2 { font-size: 1.3rem; margin: 30px 0 12px; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.admin-nav a { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--ligne); text-decoration: none; font-weight: 650; color: var(--encre); }
.admin-nav a.on { background: var(--encre); color: #fff; border-color: var(--encre); }
.tableau { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--ligne); font-size: .92rem; }
.tableau th, .tableau td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; overflow-wrap: anywhere; }
.tableau th { background: var(--sable); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.etiquette { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--sable); }
.etiquette.valide { background: var(--vert-doux); color: var(--vert); }
.etiquette.en_attente { background: var(--ambre-doux); color: var(--ambre); }
.etiquette.refuse, .etiquette.suspendu { background: #fde8e8; color: #9b1c1c; }
.etiquette.exemple { background: var(--rose-doux); color: var(--prune); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.admin-actions form { margin: 0; }
.cadre { background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-s); padding: 18px; margin: 12px 0; }
.cadre code, .admin code { background: var(--sable); padding: 2px 6px; border-radius: 6px; font-size: .86rem; word-break: break-all; }
@media (max-width: 719px) { .tableau-souple thead { display: none; } .tableau-souple tr { display: block; border-bottom: 1px solid var(--ligne); } .tableau-souple td { display: block; border: 0; padding: 6px 14px; } }

/* ---------- Admin › Fiches : interrupteurs « En ligne » / « Indexé », ajout à la main ---------- */
.message.attention { background: var(--ambre-doux); color: var(--ambre); }
.message.attention a { color: inherit; }
.etiquette.manuel { background: var(--sable); color: var(--encre-2); border: 1px solid var(--ligne-forte); }
.fiches-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 12px; }
.fiches-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fiches-cherche { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: #fff; min-width: 0; width: 220px; max-width: 100%; }
.cadre.aide summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; list-style: none; }
.cadre.aide summary::-webkit-details-marker { display: none; }
.cadre.aide p { margin: 10px 0 0; }
.tableau-fiches td { vertical-align: middle; }
.tableau-fiches tr:target { background: var(--or-doux); }
.tableau-fiches tr.vient { animation: vient 1.6s ease-out; }
@keyframes vient { from { background: var(--or-doux); } to { background: transparent; } }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fiche-actions form { margin: 0; }
.bouton-discret { border-color: var(--ligne-forte); color: var(--muet); background: transparent; }
.bouton-discret:hover { border-color: #9b1c1c; color: #9b1c1c; }
.tableau-fiches form[data-bascule] { margin: 0; }
.inter { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 0; font: inherit; font-weight: 650; font-size: .9rem; color: var(--encre); cursor: pointer; text-align: left; }
.inter i { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--ligne-forte); flex: 0 0 auto; transition: background .2s; }
.inter i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(36, 29, 33, .3); transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.inter[aria-checked="true"] i, .inter input:checked + i { background: var(--vert); }
.inter[aria-checked="true"] i::after, .inter input:checked + i::after { transform: translateX(18px); }
.inter.grise { opacity: .5; }
.inter[aria-busy="true"] { opacity: .6; pointer-events: none; }
.inter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.inter input:focus-visible + i, button.inter:focus-visible i { outline: 3px solid var(--prune); outline-offset: 2px; }
.inter small { display: block; font-weight: 500; color: var(--muet); font-size: .8rem; }
label.inter { position: relative; }
.inters { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 4px; }
.retour .ic { transform: none !important; }
.form-institut fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.form-institut fieldset + fieldset { padding-top: 18px; border-top: 1px solid var(--ligne); }
.form-institut legend { font-family: var(--titre, inherit); font-size: 1.15rem; font-weight: 700; padding: 0; margin-bottom: 10px; }
.form-institut .champ label small { font-weight: 500; color: var(--muet); }
@media (min-width: 720px) { .formulaire .rang-3 { grid-template-columns: 1fr 2fr 1.4fr; } }
.horaires-saisie { display: grid; gap: 8px; }
.hs-jour { display: grid; grid-template-columns: 90px 1fr 1fr auto; gap: 10px; align-items: center; }
.hs-inconnu { font-size: .82rem; white-space: nowrap; color: var(--encre-2); }
.hs-jour span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hs-jour input[type=time], .ss-ligne input { min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1.5px solid var(--ligne-forte); background: var(--creme); font: inherit; width: 100%; }
.hs-jour input[type=time]:focus, .ss-ligne input:focus { border-color: var(--prune); background: #fff; outline: none; }
@media (max-width: 560px) { .hs-jour { grid-template-columns: 1fr; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--ligne); } .hs-jour span { gap: 8px; } }
.soins-saisie { display: grid; gap: 8px; }
.ss-tete, .ss-ligne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, .7fr) minmax(0, .8fr); gap: 8px; }
.ss-tete span { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muet); }
@media (max-width: 640px) {
  .ss-tete { display: none; }
  .ss-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px; border-radius: 12px; background: var(--sable); }
  .ss-ligne input:nth-child(2) { grid-column: 1 / -1; order: -1; }
}
.photos-saisie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ps-photo { display: grid; gap: 4px; font-size: .86rem; }
.ps-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--sable); }
.ps-photo label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ps-photo input[name^="legendes"] { min-width: 0; width: 100%; padding: 6px 8px; border-radius: 8px; border: 1.5px solid var(--ligne-forte); background: var(--creme); font: inherit; font-size: .84rem; }
.ps-photo .ps-titre { font-size: .84rem; line-height: 1.3; }
.ps-photo small { overflow-wrap: anywhere; }
.photos-apercu { display: flex; flex-wrap: wrap; gap: 8px; }
.photos-apercu img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.photos-apercu small { width: 100%; color: var(--muet); }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.case { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--prune); flex: 0 0 auto; }
.form-bas { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid var(--ligne); }
.notif-admin { position: fixed; left: 16px; right: 16px; bottom: 20px; margin: 0 auto; width: fit-content; max-width: 520px; transform: translateY(20px); opacity: 0; z-index: 90; padding: 12px 18px; border-radius: 14px;
  background: var(--encre); color: #fff; font-weight: 600; font-size: .92rem; box-shadow: var(--ombre); transition: opacity .25s, transform .25s; pointer-events: none; }
.notif-admin.on { opacity: 1; transform: none; }
@media (max-width: 719px) { .tableau-fiches td { padding: 8px 14px; } .fiche-actions { justify-content: flex-start; } .tableau-fiches td[colspan] { padding-bottom: 12px; } }

/* ---------- Admin › Fiches : filtres, actions groupées, pagination ; Importer ---------- */
.filtres-admin { display: grid; gap: 10px; margin: 0 0 14px; }
.fa-puces { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fa-sep { width: 1px; height: 22px; background: var(--ligne-forte); margin: 0 4px; }
.filtre-admin { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: #fff; color: var(--encre); text-decoration: none; font-weight: 650; font-size: .86rem; }
.filtre-admin span { font-size: .78rem; color: var(--muet); font-weight: 700; }
.filtre-admin.on { background: var(--encre); border-color: var(--encre); color: #fff; }
.filtre-admin.on span { color: rgb(255 255 255 / .75); }
.fa-champs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fa-champs select, .fa-champs input[type=search] { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: #fff; font: inherit; min-width: 0; max-width: 100%; }
.fa-champs input[type=search] { width: 300px; }
.fa-libelle { font-size: .88rem; color: var(--muet); align-self: center; }
.barre-lot { position: sticky; top: 74px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px; margin: 0 0 10px; border-radius: 16px; background: #fff; border: 1px solid var(--ligne); box-shadow: var(--ombre); }
.barre-lot select { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: var(--creme); font: inherit; max-width: 100%; }
.barre-lot .case { font-size: .88rem; }
.col-case { width: 34px; }
.col-case input { width: 18px; height: 18px; accent-color: var(--prune); }
.pagination-admin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 14px 0 0; }
.pagination-admin a { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--ligne-forte); background: #fff; text-decoration: none; font-weight: 700; color: var(--encre); }
.pagination-admin a.on { background: var(--encre); color: #fff; border-color: var(--encre); }
.import-chiffres { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.import-chiffres span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ligne); font-size: .9rem; }
.import-chiffres .ok { background: var(--vert-doux); color: var(--vert); border-color: transparent; }
.import-chiffres .alerte { background: var(--ambre-doux); color: var(--ambre); border-color: transparent; }
.import-riche .sans-photo { color: var(--ambre); }
.import-al-photos { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.tableau td.col-photos { text-align: center; font-variant-numeric: tabular-nums; }
.col-photos-mot { display: none; }
@media (max-width: 719px) { .tableau-souple td.col-photos { text-align: left; } .col-photos-mot { display: inline; } }
.aide-import p { margin: 0 0 8px; } .aide-import p:last-child { margin: 0; }
.import-exemples { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ie { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: var(--creme); border: 1px solid var(--ligne); font-size: .88rem; min-width: 0; }
.ie small { color: var(--muet); }
.ie span { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.ie .ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--prune); }
.ie details summary { cursor: pointer; font-weight: 700; font-size: .82rem; color: var(--prune); }
.ie pre { white-space: pre-wrap; font: inherit; font-size: .8rem; margin: 6px 0 0; color: var(--encre-2); }
.progression { height: 14px; border-radius: 999px; background: var(--sable); overflow: hidden; }
.progression span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rose), var(--prune)); transition: width .4s ease; }
@media (max-width: 719px) { .barre-lot { top: 62px; } .tableau-fiches .col-case { padding-top: 12px; } }
.horaires-inconnus { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--sable); color: var(--encre-2); font-weight: 600; }
.horaires-inconnus .ic { flex: 0 0 auto; margin-top: 2px; color: var(--prune); }
.admin h2, .admin .muet { overflow-wrap: anywhere; }
.promo-saisie { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--creme); border: 1px solid var(--ligne); }
@media (min-width: 720px) { .formulaire .rang-promo { grid-template-columns: 2fr 1fr; } .formulaire .rang-promo2 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 719px) { .formulaire .rang-promo2 { grid-template-columns: 1fr 1fr; } }
.jours-promo { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }

/* ---------- Vidéo de la fiche (chargée au clic) ---------- */
.video-facade { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--degrade); color: #fff; text-decoration: none; isolation: isolate; }
.video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.video-facade::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(36 29 33 / .15), rgb(36 29 33 / .55)); }
.video-facade:hover img { transform: scale(1.04); }
.vf-play { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .92); color: var(--prune); box-shadow: 0 10px 30px rgb(0 0 0 / .25); transition: transform .25s; }
.vf-play .ic { width: 34px; height: 34px; margin-left: 4px; }
.video-facade:hover .vf-play { transform: scale(1.08); }
.vf-txt { position: absolute; left: 18px; bottom: 14px; font-weight: 700; display: grid; gap: 2px; text-shadow: 0 1px 8px rgb(0 0 0 / .35); }
.vf-txt small { font-weight: 500; font-size: .8rem; opacity: .9; }
.video-cadre { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r); background: #000; }
.promo-saisie, .promo-saisie .champ { min-width: 0; }
.promo-saisie input { min-width: 0; }
.formulaire .rang-promo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .formulaire .rang-promo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .formulaire .rang-promo2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 719px) { .formulaire .rang-promo2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Fiche sans photo : carte compacte (monogramme), pour que les fiches complètes ressortent */
.carte-inst.sans-photo .ci-photos { display: none; }
.ci-entete { display: flex; align-items: center; gap: 12px; }
.ci-mono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--rose-doux); color: var(--prune); font: 600 1.35rem/1 var(--titre); flex: 0 0 auto; }
.ci-entete .ci-nom { flex: 1; min-width: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.ci-promo-inline { position: relative; z-index: 2; flex: 0 0 auto; }
.proche .pr-sans { display: grid; place-items: center; font: 600 1.4rem/1 var(--titre); color: #fff; }

/* ---------- Métiers : instituts, coiffeurs, barbiers… ---------- */
.aussi-ici { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .92rem; }
.aussi-ici > span { color: var(--muet); font-weight: 600; }
.aussi-ici a { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ligne); color: var(--encre); text-decoration: none; font-weight: 650; }
.aussi-ici a:hover { border-color: var(--prune); color: var(--prune); }
.metiers-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.metier { display: grid; gap: 2px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--ligne); text-decoration: none; color: var(--encre); transition: border-color .2s, transform .2s, box-shadow .2s; }
.metier span { font: 600 1.15rem/1.2 var(--titre); }
.metier small { color: var(--muet); font-weight: 600; }
.metier:hover { border-color: var(--prune); transform: translateY(-2px); box-shadow: var(--ombre); }
.villes-liste { display: grid; gap: 8px; }
.ville-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--ligne); }
.vl-nom { font-weight: 700; color: var(--encre); text-decoration: none; min-width: 180px; }
.vl-nom small { color: var(--muet); font-weight: 600; margin-left: 4px; }
.vl-metiers { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-metiers a { font-size: .86rem; padding: 4px 10px; border-radius: 999px; background: var(--sable); color: var(--encre-2); text-decoration: none; font-weight: 600; }
.vl-metiers a:hover { background: var(--rose-doux); color: var(--prune); }

/* ---------- Aperçu du site (capture de l'import), dans un cadre de navigateur ---------- */
.navigateur { position: relative; display: block; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--ligne-forte); box-shadow: var(--ombre); }
.nav-barre { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: var(--sable); border-bottom: 1px solid var(--ligne); }
.nav-barre i { width: 8px; height: 8px; border-radius: 50%; background: #e2d4cd; flex: 0 0 auto; }
.nav-barre i:first-child { background: #f0a07a; }
.nav-barre span { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #fff; color: var(--muet); font-size: .74rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.navigateur img { display: block; width: 100%; height: auto; }
.apercu-site { max-width: 560px; text-decoration: none; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.apercu-site:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: var(--ombre-forte); }
.apercu-legende { margin: 10px 0 0; font-size: .86rem; }
.apercu-legende a { color: var(--prune); font-weight: 700; }

/* Carte sans photo mais avec l'aperçu du site */
.ci-apercu { display: flex; flex-direction: column; height: 100%; border-radius: 0; border: 0; box-shadow: none; background: var(--sable); text-decoration: none; }
.ci-apercu .nav-barre { height: 20px; flex: 0 0 auto; }
.ci-apercu .nav-barre i { width: 6px; height: 6px; }
.ci-apercu img { flex: 1; min-height: 0; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.carte-inst:hover .ci-apercu img { transform: scale(1.03); }
.ci-apercu-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgb(36 29 33 / .78); color: #fff; font-size: .74rem; font-weight: 700; backdrop-filter: blur(4px); }

/* Note Google (fiches préparées par GoodWebsites) */
.note-google { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: -4px 0 14px; font-size: .95rem; color: var(--encre); }
.note-google small { flex-basis: 100%; color: var(--muet); font-size: .8rem; }
.note-google small a { color: var(--prune); font-weight: 700; }
.ci-google { display: inline-flex; align-items: center; gap: 5px; }

/* Admin › Importer : ce que le fichier apporte, envoi par morceaux, aperçu dans les exemples */
.import-riche { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; padding: 0; margin: 12px 0; }
.import-riche li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--ligne); font-size: .9rem; }
.import-riche .ic { width: 18px; height: 18px; color: var(--prune); flex: 0 0 auto; margin-top: 2px; }
.import-riche small { display: block; color: var(--muet); font-size: .78rem; }
.envoi-morceaux { margin: 4px 0 12px; }
.ie-apercu { margin: -4px -4px 6px; border-radius: 10px; }
.ie .ie-apercu { display: block; }
.ps-apercu { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 12px 0; padding: 12px; border-radius: 14px; background: var(--creme); border: 1px solid var(--ligne); }
.ps-apercu .navigateur { width: 220px; max-width: 100%; }
.ps-apercu > div { flex: 1; min-width: 200px; }
.ps-attente { margin: 12px 0; padding: 12px; border-radius: 14px; background: var(--or-doux); border: 1px solid #f1dfb4; }
.ps-attente .case { margin-right: 14px; }
/* une carte compacte (sans photo ni aperçu) garde sa hauteur, même à côté d'une carte illustrée */
.grille-cartes .carte-inst.sans-photo { align-self: start; }

/* ---------- Espace des instituts (/espace-pro) et bouton « Gérez votre fiche » ---------- */
.espace { max-width: 1000px; margin: 0 auto; padding: clamp(24px, 5vw, 48px) 0 80px; }
.espace-etroit { max-width: 620px; }
.espace h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 16px; }
.espace .message { margin: 0 0 14px; }
.espace .formulaire + .cadre, .espace .formulaire + .esp-plus { margin-top: 18px; }
.esp-fiche { display: flex; gap: 14px; align-items: center; padding: 12px; margin: 0 0 16px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--ligne); }
.esp-fiche img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.esp-fiche b { font-size: 1.05rem; }
.esp-etapes { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; counter-reset: etape; }
.esp-etapes li { counter-increment: etape; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--sable); color: var(--muet); font-weight: 650; font-size: .9rem; }
.esp-etapes li::before { content: counter(etape); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--encre); font-size: .82rem; }
.esp-etapes li.on { background: var(--rose-doux); color: var(--prune); }
.esp-etapes li.on::before { background: var(--prune); color: #fff; }
.esp-etapes li.fait::before { content: "✓"; background: var(--vert); color: #fff; }
.esp-code { font: 700 1.9rem/1 var(--texte) !important; letter-spacing: .35em; text-align: center; max-width: 280px; padding: 14px 10px !important; }
.esp-canaux { display: grid; gap: 10px; }
.esp-canal { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-s); border: 1.5px solid var(--ligne-forte); background: #fff; cursor: pointer; font-weight: 500; }
.esp-canal:has(input:checked) { border-color: var(--prune); background: var(--rose-doux); }
.esp-canal input { width: 20px; height: 20px; accent-color: var(--prune); flex: 0 0 auto; }
.esp-canal .ic { color: var(--prune); flex: 0 0 auto; }
.esp-canal b { overflow-wrap: anywhere; }
.esp-plus { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; color: var(--encre-2); font-size: .94rem; }
.esp-plus li { display: flex; gap: 10px; align-items: flex-start; }
.esp-plus .ic { color: var(--vert); flex: 0 0 auto; margin-top: 4px; }
.esp-recommencer { margin: 12px 0 0; text-align: center; }
.lien-bouton { background: none; border: 0; padding: 4px 2px; font: inherit; font-weight: 700; color: var(--prune); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien-bouton:hover { color: var(--prune-fonce); }
.esp-barre { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 8px 6px 16px; margin: 0 0 18px; border-radius: 999px; background: #fff; border: 1px solid var(--ligne); font-size: .92rem; }
.esp-barre > span { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.esp-barre .ic { color: var(--prune); flex: 0 0 auto; }
.esp-compte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esp-barre form { margin: 0; flex: 0 0 auto; }
.esp-barre .lien-bouton { padding: 6px 10px; white-space: nowrap; }
.esp-liste { display: grid; gap: 12px; }
.esp-carte { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 12px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--ligne); color: var(--encre); text-decoration: none; box-shadow: var(--ombre); transition: transform .2s, border-color .2s; }
.esp-carte:hover { transform: translateY(-2px); border-color: var(--prune); color: var(--encre); }
.esp-carte img, .esp-sans-photo { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; grid-row: span 2; }
.esp-sans-photo { display: grid; place-items: center; background: var(--sable); color: var(--muet); }
.esp-carte .etiquette { margin-top: 6px; }
.esp-modifier { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--prune); }
@media (min-width: 720px) { .esp-carte { grid-template-columns: auto 1fr auto; } .esp-carte img, .esp-sans-photo { grid-row: auto; } }
.esp-logiciel, .esp-retirer { margin-top: 18px; }
.esp-retirer form { margin: 0; }
.note-pro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ligne-forte); }
.note-pro .bouton { background: #fff; border-color: var(--prune); color: var(--prune); }
.note-pro .bouton:hover { background: var(--prune); color: #fff; }
.note-pro small { color: var(--muet); }
.cadre-pro { border-color: #ead1de; background: var(--rose-doux); }
.cadre-pro .ic { color: var(--prune); vertical-align: -3px; }
.cadre-pro code { background: #fff; }
.note-pro .bouton { white-space: normal; text-align: left; min-height: 0; padding: 9px 16px; line-height: 1.3; max-width: 100%; border-radius: 16px; }
.note-pro .bouton .ic { flex: 0 0 auto; }

/* ---------- Admin › Prévenir les salons ---------- */
.prev-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.prev-chiffres > a { background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-s); padding: 12px 14px; display: grid; align-content: start; text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.prev-chiffres > a:hover, .prev-chiffres > a:focus-visible { border-color: var(--prune); box-shadow: var(--ombre); transform: translateY(-2px); }
.prev-chiffres > a.on { border: 2px solid var(--prune); background: var(--rose-doux); padding: 11px 13px; }
.prev-coche { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 700; font-size: .78rem; color: var(--prune); }
.prev-coche svg { width: 14px; height: 14px; }
.prev-filtre { margin: -4px 0 10px; padding: 10px 14px; border-radius: var(--r-s); background: var(--creme); border: 1px solid var(--ligne); }
@media (prefers-reduced-motion: reduce) { .prev-chiffres > a { transition: none; } .prev-chiffres > a:hover { transform: none; } }
.prev-chiffres b { font: 700 1.6rem/1.1 var(--titre); color: var(--prune); }
.prev-chiffres span { color: var(--muet); font-size: .86rem; }
.prev-carte { display: grid; gap: 14px; background: #fff; border: 1.5px solid #ead1de; border-radius: var(--r); padding: clamp(16px, 3vw, 26px); box-shadow: var(--ombre); margin: 14px 0 6px; scroll-margin-top: 90px; }
.prev-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-start; }
.prev-tete h3 { font-size: 1.35rem; }
.prev-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.prev-bloc { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-s); background: var(--creme); border: 1px solid var(--ligne); }
.prev-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.prev-titre .ic { color: var(--prune); }
.prev-appel { margin: 0; font-style: italic; color: var(--encre-2); }
.prev-bloc label { display: flex; gap: 10px; align-items: baseline; }
.prev-bloc textarea, .prev-bloc input[readonly] { background: #fff; font-size: .93rem; }
.prev-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.prev-chercher { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.prev-chercher input[type=search] { flex: 1 1 260px; min-width: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: #fff; font: inherit; }
.prev-modele { border-top: 1px dashed var(--ligne); padding-top: 10px; }
.prev-modele summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.prev-modele summary::-webkit-details-marker { display: none; }
.prev-modele .formulaire { display: grid; gap: 8px; margin-top: 10px; }
.prev-modele textarea { width: 100%; background: #fff; font: inherit; font-size: .93rem; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: var(--r-s); }
.prev-modele .formulaire { padding: 0; background: none; border: 0; box-shadow: none; }
.prev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--ligne); }
tr.prev-on td { background: var(--rose-doux); }

/* ---------- Ajout de photos : une liste qui se remplit (plusieurs d'un coup, ou une par une) ---------- */
.ap-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-cache { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ajout-photos { position: relative; }
.photos-apercu .ap-photo { position: relative; margin: 0; }
.photos-apercu .ap-photo img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.photos-apercu .ap-trop img { opacity: .35; filter: grayscale(1); }
.ap-retirer { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--encre); color: #fff; font: 700 1rem/1 var(--texte); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 6px rgb(0 0 0 / .25); }
.ap-retirer:hover { background: var(--prune); }
.ap-info { width: 100%; margin: 4px 0 0; color: var(--encre-2); font-size: .9rem; font-weight: 600; }
.ap-envoyer { margin-top: 2px; }
.photos-apercu:has(.ap-photo) { padding-top: 8px; }

/* ---------- Suivi de ce que fait l'institut sur sa fiche ---------- */
.esp-confirmer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--ligne); }
.esp-confirmer p { flex: 1 1 320px; }
/* Inscription d'un établissement (espace des instituts) et sa validation (admin) */
.ins-doublons { margin: 0 0 18px; border-color: var(--or); background: var(--or-doux); }
.ins-doublons ul { margin: 8px 0; padding-left: 18px; display: grid; gap: 8px; }
.ins-doublons li .bouton { margin-left: 6px; }
.ins-etat { margin: 0 0 16px; border-color: #ead1de; background: var(--rose-doux); }
.ins-etat.ins-envoyee { border-color: #cfe5d8; background: var(--vert-doux); }
.ins-etat.ins-refusee { border-color: var(--or); background: var(--or-doux); }
.ins-motif { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #fff; }
.ins-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ins-liste li { display: flex; align-items: center; gap: 6px; }
.ins-liste li.fait { color: var(--vert); }
.ins-liste li.manque { color: var(--encre-2); }
.ins-liste li.manque .ic { color: var(--prune); }
.cadre-inscription { border-color: var(--or); background: var(--or-doux); }
.cadre-inscription > p .ic { color: var(--prune); vertical-align: -3px; }
.ins-verif { margin: 10px 0; padding-left: 18px; display: grid; gap: 4px; }
.ins-decision { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; margin-top: 12px; }
.ins-decision form { display: grid; gap: 8px; justify-items: start; }
.ins-decision textarea { width: 100%; }
.cadre-classement .classement-rang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cadre-classement select { width: auto; }
.fa-ordre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0; font-size: .84rem; color: var(--muet); }
.fa-ordre label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.fa-ordre select { width: auto; min-height: 0; padding: 2px 26px 2px 8px; font-size: .84rem; }
.fa-ordre.on { color: var(--prune); font-weight: 700; }
.tableau-fiches tr[id] { scroll-margin-top: 170px; }   /* retour sur la ligne (#f-…) : pas cachée sous l'en-tête et la barre d'actions */
.esp-confirmer.a-faire { background: var(--or-doux); border-color: #f1dfb4; }
.esp-carte small { display: block; margin-top: 4px; }
.pro-historique { margin-top: 8px; }
.pro-historique summary { cursor: pointer; font-weight: 650; }
.pro-historique ul { margin: 6px 0 0; padding-left: 20px; font-size: .92rem; }
.tableau .inter span { overflow-wrap: normal; white-space: nowrap; }

/* ---------- Carte « autour d'une adresse » (/villes) ---------- */
.autour { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "outils" "carte" "liste"; gap: 18px; padding-top: 22px; }
.autour-outils { grid-area: outils; position: relative; z-index: 2; min-width: 0; }
.autour-outils .kicker { margin-bottom: 8px; }
.autour-outils h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.15; margin: 0 0 6px; }
.autour-aide { margin: 0 0 14px; color: var(--encre-2); }
.autour-champ { position: relative; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px; background: #fff; border: 1px solid var(--ligne-forte); border-radius: 999px; box-shadow: var(--ombre); }
.autour-champ:focus-within { border-color: var(--prune); box-shadow: 0 0 0 3px var(--rose-doux), var(--ombre); }
.autour-champ > .ic { color: var(--prune); }
.autour-champ input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; padding: 12px 0; outline: none; color: var(--encre); }
.autour-champ .suggestions { top: calc(100% + 6px); }
.autour-reglages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.autour-reglages .bouton.attente .ic { animation: tourne 1s linear infinite; }
.autour-rayon { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--encre-2); }
.autour-rayon select { font: inherit; font-weight: 700; color: var(--encre); min-height: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: #fff; cursor: pointer; }
.autour-metiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.autour-metiers .filtre { min-height: 40px; }
.autour-carte { grid-area: carte; position: relative; isolation: isolate; min-width: 0; }
.autour-carte-in { height: 340px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--ligne); background: var(--sable); }
.autour-carte-in.en-panne { display: grid; place-items: center; color: var(--muet); }
.autour-carte-in.en-panne::after { content: "La carte n'a pas pu se charger : tapez une adresse."; padding: 20px; text-align: center; }
.autour-carte .leaflet-container { cursor: crosshair; }
.autour-carte .leaflet-interactive { cursor: pointer; }
.autour-astuce { position: absolute; left: 50%; bottom: 16px; z-index: 800; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px);
  padding: 9px 15px; border-radius: 999px; background: rgb(36 29 33 / .84); color: #fff; font-size: .86rem; font-weight: 650; pointer-events: none; white-space: nowrap; transition: opacity .3s; }
.a-un-point .autour-astuce { opacity: 0; }
.autour-liste { grid-area: liste; min-width: 0; transition: opacity .2s; }
.autour-liste.charge { opacity: .5; }
.autour-attente { margin: 0; padding: 18px; border-radius: var(--r-s); background: #fff; border: 1px dashed var(--ligne-forte); color: var(--encre-2); }
.al-tete { margin: 0 0 10px; color: var(--encre-2); }
.al-tete b { color: var(--encre); }
.al-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.al-liste li { min-width: 0; }
.al-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; background: #fff; border: 1px solid var(--ligne); color: var(--encre); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.al-item:hover, .al-item:focus-visible { border-color: var(--prune); box-shadow: var(--ombre); transform: translateY(-1px); color: var(--encre); }
.al-photo { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--rose-doux); color: var(--prune); font: 600 1.35rem/1 var(--titre); }
.al-photo img { width: 100%; height: 100%; object-fit: cover; }
.al-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.al-texte b { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-texte small { color: var(--muet); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-texte .al-plus { color: var(--encre-2); }
.al-note { color: var(--encre); font-weight: 800; }
.al-texte .al-relie { color: var(--vert); font-weight: 700; }
.al-dist { flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; background: var(--rose-doux); color: var(--prune); font-weight: 800; font-size: .86rem; white-space: nowrap; }
.al-tout { margin-top: 14px; width: 100%; white-space: normal; text-align: center; }
.villes-titre { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 18px 0 0; }
@media (min-width: 1080px) {
  .autour { grid-template-columns: minmax(340px, 410px) minmax(0, 1fr); grid-template-areas: "outils carte" "liste carte"; grid-template-rows: auto 1fr; gap: 20px 32px; align-items: start; }
  .autour-carte { position: sticky; top: 88px; }
  .autour-carte-in { height: min(660px, calc(100vh - 120px)); }
}

/* Page « Pour les instituts » : les prix (abonnement GoodBeauty, offre de sites qui s'éteint seule) */
.offres-pro { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.offre-pro { background: #fff; border: 1px solid var(--ligne); border-radius: var(--r); padding: 24px; display: grid; gap: 12px; }
.offre-site { background: var(--rose-doux); border-color: transparent; }
.op-bandeau { justify-self: start; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--prune); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.op-titre { margin: 0; font: 600 1.35rem/1.2 var(--titre, Georgia, serif); color: var(--encre); }
.op-sous, .op-note { margin: 0; color: var(--encre-2); font-size: .95rem; }
.op-note { font-size: .86rem; color: var(--muet); }
.op-prix { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.op-prix li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.op-prix li:first-child { border-top: 0; }
.op-prix li > span:first-child { font-weight: 650; }
.op-prix strong { font-size: 1.2rem; color: var(--encre); white-space: nowrap; }
.op-prix strong small { font-size: .78rem; font-weight: 600; color: var(--muet); }
.op-p { display: grid; justify-items: end; text-align: right; }
.op-p small { font-size: .8rem; color: var(--muet); }
.op-barre { color: var(--muet); font-size: .9rem; margin-right: 4px; }
.op-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* Jauge de complétude de la fiche (espace des instituts, 18.10.2026) */
.jauge { background: linear-gradient(135deg, var(--rose-doux), var(--blanc) 70%); border: 1px solid var(--ligne); border-radius: 14px; padding: 16px 18px; margin: 0 0 18px; box-shadow: 0 6px 22px rgba(157, 59, 110, .07); }
.jauge-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.jauge-titre { margin: 0; font-weight: 700; color: var(--encre); }
.jauge-chiffre { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--prune); font-variant-numeric: tabular-nums; }
.jauge-chiffre small { font-size: .85rem; color: var(--muet); font-weight: 600; }
.jauge-barre { height: 10px; background: var(--sable); border-radius: 99px; overflow: hidden; margin: 10px 0 8px; }
.jauge-barre i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--rose), var(--prune)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.jauge.niveau-excellent .jauge-barre i { background: linear-gradient(90deg, #d59a3c, var(--prune)); }
.jauge-message { margin: 0 0 10px; color: var(--encre-2); font-size: .95rem; }
.jauge-criteres { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jauge-criteres li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--blanc); border: 1px solid var(--ligne-forte); font-size: .82rem; color: var(--muet); transition: background .3s, border-color .3s, color .3s; }
.jauge-criteres li small { color: var(--muet); font-variant-numeric: tabular-nums; }
.jauge-criteres li.ok { background: var(--rose-doux); border-color: var(--rose); color: var(--prune-fonce); }
.jauge-coche { display: inline-flex; width: 16px; height: 16px; color: var(--prune); opacity: .25; }
.jauge-coche .ic { width: 16px; height: 16px; }
.jauge-criteres li.ok .jauge-coche { opacity: 1; }
.jauge-conseil { margin: 0; font-size: .9rem; color: var(--prune-fonce); }
@media (prefers-reduced-motion: reduce) { .jauge-barre i, .jauge-criteres li { transition: none; } }

/* ---------- Prévenir les salons › suivi (ANNUAIRE-36) : à relancer, réponses, envoi noté tout seul ---------- */
.prev-groupe { margin: 16px 0 -6px; font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.prev-groupe .lien-fleche { text-transform: none; letter-spacing: 0; font-size: .86rem; }
.prev-suivi { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.prev-suivi > a b { font-size: 1.35rem; }
.prev-case-relancer b { color: var(--ambre) !important; }
.prev-case-presta b, .prev-case-ok b, .prev-case-gerees b { color: var(--vert) !important; }
.prev-case-non b, .prev-case-stop b { color: var(--muet) !important; }
.etiquette.prev-e-relancer { background: var(--ambre-doux); color: var(--ambre); }
.etiquette.prev-e-attente { background: var(--sable); color: var(--encre-2); }
.etiquette.prev-e-ok, .etiquette.prev-e-gerees { background: var(--vert-doux); color: var(--vert); }
.etiquette.prev-e-presta { background: var(--or-doux); color: #7a5608; }
.etiquette.prev-e-non { background: #f1ecea; color: var(--muet); }
.etiquette.prev-e-stop { background: #fde8e8; color: #9b1c1c; }
.prev-suivi-carte { padding: 12px 14px; border-radius: var(--r-s); background: var(--creme); border: 1px dashed var(--ligne-forte); overflow-wrap: anywhere; }
.prev-suivi-carte .etiquette { margin-right: 6px; }
.prev-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--vert-doux); color: var(--vert); font-weight: 600; }
.prev-auto[hidden] { display: none; }
.prev-reponse { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-s); background: var(--rose-doux); border: 1px solid #ead1de; }
.prev-rep-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.prev-note { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.prev-note input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--ligne-forte); border-radius: 10px; font: inherit; font-weight: 400; background: #fff; }

/* ---------- Prévenir les salons › mode enchaînement WhatsApp (ANNUAIRE-37) ---------- */
.prev-ench { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-s); background: var(--vert-doux); border: 1.5px solid #bfe0cd; }
.prev-ench-titre { margin: 0; overflow-wrap: anywhere; }
.prev-ench-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.prev-ench-wa { font-size: 1.05rem; padding-inline: 22px; }
.prev-ench kbd { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; border: 1px solid currentColor; font: 700 .78rem/1.4 var(--texte); opacity: .8; }
.prev-ench-dernier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 8px 12px; border-radius: 10px; background: #fff; color: var(--vert); font-weight: 600; }
.prev-ench-app { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9rem; }
.prev-demarrer { margin-left: 8px; }
.compteur-car { display: block; margin-top: 4px; color: var(--muet); font-size: .8rem; text-align: right; }
.compteur-car.plein { color: #9b1c1c; font-weight: 700; }

/* Blog (annuaire) */
.blog-barre { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.blog-barre button { padding: 4px 10px; border: 1px solid #bbb; border-radius: 6px; background: #fff; cursor: pointer; }
.blog-photo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.blog-photo input[type="text"] { flex: 1 1 260px; }
.blog-editeur { min-height: 260px; border: 1px solid #ccc; border-radius: 8px; padding: 12px; background: #fff; }
.blog-editeur img, .blog-corps img { max-width: 100%; height: auto; border-radius: 8px; }
.blog-editeur figure, .blog-corps figure { margin: 24px 0; }
.blog-corps figcaption { font-size: .9em; color: #666; }
.blog-liste li { margin-bottom: 14px; }
.blog-chapo { font-size: 1.1em; }
.blog-admin-liste li { margin-bottom: 8px; }

/* ---------- IMAGES-04 : images des fiches (Admin › Fiches), comme sur GoodPattes ---------- */
.images-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.images-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.images-boutons .bouton { white-space: normal; text-align: left; height: auto; min-height: 36px; line-height: 1.25; }
.images-progression progress { width: 100%; height: 10px; accent-color: var(--prune); }
.images-attente { background: var(--ambre-doux); border-color: #f1d6a8; }
.fiche-images { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.fiche-images .fi-vignette { display: inline-block; width: 72px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--sable); flex: none; }
.fiche-images .fi-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fiche-images .bouton { padding: 3px 12px; min-height: 30px; height: auto; font-size: .82rem; }
.fi-image-msg { color: var(--encre-2); flex-basis: 100%; }
.fi-image-msg:empty { display: none; }

/* PROCHES-01 : l'aperçu d'un site se lit par le haut de la page */
.proche img.pr-apercu { object-position: top center; }

/* INFO-03 — menu du haut : pages d'information (Qui sommes-nous, FAQ, Blog, Tarifs) */
.tn-menu { position: relative; }
.tn-menu > summary { list-style: none; cursor: pointer; }
.tn-menu > summary::-webkit-details-marker { display: none; }
.tn-menu[open] > summary { background: var(--sable); }
.tn-menu-panneau { position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: min(280px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 8px; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; box-shadow: var(--ombre-forte); }
.tn-menu-panneau a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; color: var(--encre); text-decoration: none; font-weight: 600; }
.tn-menu-panneau a:hover, .tn-menu-panneau a:focus-visible { background: var(--sable); color: var(--encre); }
.tn-menu-panneau .ic { color: var(--prune); flex: 0 0 auto; }
.tn-menu-sep { height: 1px; background: var(--ligne); margin: 6px 8px; }
.tn-menu-pro { display: none !important; }
@media (max-width: 719px) { .tn-menu-pro { display: flex !important; } }

/* PROPRIO-01 — accès propriétaire en haut des fiches à prendre en main (et rappel discret en bas) */
.fiche-proprio { margin: 10px 0 0; }
.fiche-proprio a { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 40px; padding: 7px 12px; border-radius: 14px; background: var(--rose-doux); border: 1px solid #f1d2e1; color: var(--prune-fonce); text-decoration: none; font-size: .88rem; line-height: 1.35; transition: background .2s, border-color .2s; }
.fiche-proprio a:hover { background: #fff; border-color: var(--prune); color: var(--prune-fonce); }
.fiche-proprio b { font-weight: 800; }
.fiche-proprio .ic { flex: 0 0 auto; color: var(--prune); }
.fiche-proprio a > .ic:last-child { transition: transform .2s; }
.fiche-proprio a:hover > .ic:last-child { transform: translateX(3px); }
.note-pro-rappel > a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.note-pro-rappel > a .ic { flex: 0 0 auto; }