/* Annuaire CSE — feuille de style unique, pensée téléphone d'abord.
   Ce sont les photos des encarts qui portent la page : tout le reste
   se tient volontairement en retrait derrière elles. */

:root {
  --nuit: #06203A;
  --marine: #0E3A5F;
  --bleu: #1B5E9B;
  --bleu-clair: #E9F1F8;
  --ciel: #8FCBEB;
  --ciel-fond: #E8F4FC;
  --dore: #D4A24C;
  --dore-fond: #FBF1DC;

  --fond: #F3F6F9;
  --carte: #FFFFFF;
  --encre: #0C1825;
  --encre-douce: #546474;
  --trait: #E2E7ED;
  --trait-fort: #C5CFDA;
  --vert: #157A55;
  --vert-fond: #E4F4EC;
  --vert-encre: #0D5239;
  --rouge: #B4342B;

  --ombre-1: 0 1px 2px rgba(6,32,58,.05), 0 4px 12px rgba(6,32,58,.06);
  --ombre-2: 0 2px 4px rgba(6,32,58,.06), 0 14px 30px rgba(6,32,58,.11);
  --ombre-3: 0 4px 10px rgba(6,32,58,.08), 0 28px 64px rgba(6,32,58,.20);

  --r: 16px;
  --r-petit: 10px;
  --barre: 68px;
}
* { box-sizing: border-box; }
/* Une règle de classe ayant la même force que l'attribut [hidden] du
   navigateur, un simple `display: flex` sur un bloc suffit à le rendre visible
   alors qu'on vient de le masquer. On tranche une fois pour toutes : masqué
   veut dire masqué. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 16px/1.55 "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--barre) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: "Bricolage Grotesque", "Public Sans", sans-serif;
  font-weight: 700; letter-spacing: -.02em; text-wrap: balance; margin: 0;
}
h1 { font-size: 1.78rem; line-height: 1.1; }
h2 { font-size: 1.24rem; line-height: 1.18; }
h3 { font-size: 1rem; line-height: 1.25; }
p { margin: 0 0 .8em; }
a { color: var(--bleu); text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--ciel); outline-offset: 2px; border-radius: 5px; }
.page { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
/* ── l'en-tête ─────────────────────────────────────────────── */
.entete {
  background: var(--cse-couleur, #0E3A5F);
  background-image:
    radial-gradient(1100px 520px at 86% -24%, rgba(143,203,235,.32), transparent 62%),
    radial-gradient(780px 430px at -10% 112%, rgba(212,162,76,.20), transparent 60%),
    linear-gradient(168deg, var(--cse-couleur, #0E3A5F) 0%, var(--nuit) 90%);
  color: #fff; padding: 18px 0 32px; position: relative; overflow: hidden;
}
.entete::before {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 0%, #000, transparent 76%);
  mask-image: radial-gradient(72% 62% at 50% 0%, #000, transparent 76%);
}
.entete .page { position: relative; z-index: 2; }
.entete a { color: #fff; }
/* la frise d'encarts, très en retrait, derrière l'en-tête */
.frise {
  position: absolute; inset: 0; z-index: 0; display: flex; gap: 3px; opacity: .17;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
.frise img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; }
.marque { display: flex; align-items: center; gap: 11px; }
.marque .rond {
  width: 46px; height: 46px; flex: none; border-radius: 14px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  display: grid; place-items: center; overflow: hidden;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; color: #fff;
}
.marque .rond img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.marque .nom { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.04rem; line-height: 1.15; }
.marque .sous { font-size: .73rem; opacity: .66; letter-spacing: .08em; text-transform: uppercase; }
.accroche { margin-top: 26px; }
.accroche h1 { font-size: 2rem; }
.accroche h1 em { font-style: normal; color: var(--ciel); }
.accroche p { margin: 11px 0 0; opacity: .82; font-size: .98rem; max-width: 36em; }
.chiffres { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.chiffre .n {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.65rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.chiffre .q { font-size: .72rem; opacity: .66; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
/* ── la recherche ──────────────────────────────────────────── */
.recherche {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 22px; background: #fff;
  padding: 6px; border-radius: 18px; box-shadow: var(--ombre-3);
}
.recherche input { flex: 1 1 100%; }
.recherche select { flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--trait); border-radius: 0; }
.recherche button { flex: 0 0 auto; padding: 13px 22px; }
@media (min-width: 560px) {
  .recherche { flex-wrap: nowrap; }
  .recherche input { flex: 1 1 0; }
  .recherche select { flex: 0 1 36%; border-left: 1px solid var(--trait); border-top: 0; }
  .recherche button { padding: 0 22px; }
}
.recherche input, .recherche select {
  min-width: 0; border: 0; border-radius: 13px;
  padding: 13px 14px; font: inherit; font-size: .98rem;
  background: transparent; color: var(--encre);
}
.recherche select { flex: 0 1 36%; border-left: 1px solid var(--trait); border-radius: 0; cursor: pointer; }
.recherche input::placeholder { color: #8B98A5; }
.recherche button {
  border: 0; border-radius: 13px; padding: 0 22px; flex: none;
  background: var(--dore); color: #2B1E05; font: inherit; font-weight: 700; cursor: pointer;
}
.recherche button:hover { filter: brightness(1.06); }
/* ── les sections ──────────────────────────────────────────── */
.section { margin: 36px 0; }
.chapeau { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.chapeau .tout { font-size: .86rem; font-weight: 600; white-space: nowrap; }
.oeil {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bleu); display: block; margin-bottom: 5px;
}
/* ── les catégories ────────────────────────────────────────── */
.categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.cat {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 15px 13px; display: flex; align-items: center; gap: 12px; color: var(--encre);
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.cat:hover { border-color: var(--trait-fort); transform: translateY(-2px); box-shadow: var(--ombre-1); }
.cat .ic {
  width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid;
  place-items: center; font-size: 1.3rem; line-height: 1; background: var(--bleu-clair);
}
.cat .nom { font-weight: 600; font-size: .93rem; line-height: 1.2; display: block; }
.cat .n { font-size: .78rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
/* ── la carte d'un partenaire ──────────────────────────────── */
.grille { display: grid; gap: 16px; }
.carte-lieu { position: relative; }
.carte-lieu > a {
  display: block; background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r); overflow: hidden; color: var(--encre); height: 100%;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.carte-lieu > a:hover { border-color: var(--trait-fort); transform: translateY(-3px); box-shadow: var(--ombre-2); }
.couverture { position: relative; aspect-ratio: 16 / 9; background: var(--bleu-clair); overflow: hidden; }
.couverture img { width: 100%; height: 100%; object-fit: cover; }
.couverture::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 52%;
  background: linear-gradient(180deg, transparent, rgba(6,32,58,.55));
}
.couverture .sans-image {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 2rem; color: var(--bleu); background: var(--bleu-clair);
}
.ruban {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 8px; background: var(--dore); color: #2B1E05;
  box-shadow: var(--ombre-1);
}
.ruban.calme { background: rgba(255,255,255,.94); color: var(--marine); }
.pastille {
  position: absolute; left: 13px; top: -30px; z-index: 2;
  width: 78px; height: 56px; border-radius: 13px; background: #fff;
  border: 1px solid var(--trait); box-shadow: var(--ombre-2);
  display: grid; place-items: center; overflow: hidden; padding: 6px;
}
.pastille img { width: 100%; height: 100%; object-fit: contain; }
.carte-corps { padding: 32px 15px 15px; position: relative; }
.carte-corps h3 { font-size: 1.05rem; }
.carte-corps .metier { font-size: .86rem; color: var(--encre-douce); margin-top: 3px; line-height: 1.35; }
.carte-corps .lieu {
  font-size: .8rem; color: var(--encre-douce); margin-top: 8px;
  display: flex; align-items: center; gap: 6px;
}
.carte-corps .lieu::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rouge); flex: none;
}
.bandeau-offre {
  margin: 13px -15px -15px; padding: 12px 15px; background: var(--vert-fond);
  color: var(--vert-encre); font-size: .87rem; font-weight: 600;
  border-top: 1px dashed #B6DDC9; position: relative;
}
.bandeau-offre::before, .bandeau-offre::after {
  content: ""; position: absolute; top: -8px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--fond);
}
.bandeau-offre::before { left: -7px; }
.bandeau-offre::after { right: -7px; }
.coeur {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 36px; height: 36px; border: 0; cursor: pointer; border-radius: 50%;
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--ombre-1); color: var(--trait-fort);
  font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
  transition: color .16s, transform .16s;
}
.coeur[aria-pressed="true"] { color: var(--dore); }
.coeur:hover { transform: scale(1.08); }
.puce {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 99px;
  background: var(--bleu-clair); color: var(--marine); margin: 0 5px 5px 0;
}
.puce.or { background: var(--dore-fond); color: #7A5410; }
.puce.vert { background: var(--vert-fond); color: var(--vert-encre); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquette {
  font-size: .78rem; padding: 5px 10px; border-radius: 99px;
  background: #EEF2F6; color: var(--encre-douce); border: 1px solid var(--trait);
}
/* ── le billet d'une offre ─────────────────────────────────── */
.billet {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.billet:hover { border-color: var(--trait-fort); transform: translateY(-3px); box-shadow: var(--ombre-2); }
.billet .visuel { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--bleu-clair); }
.billet .visuel img { width: 100%; height: 100%; object-fit: cover; }
.billet .corps { padding: 15px; flex: 1; }
.billet .titre-offre {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.06rem; line-height: 1.2;
}
.billet .chez { font-size: .84rem; color: var(--encre-douce); margin-top: 5px; }
.billet .cond { font-size: .8rem; color: var(--encre-douce); margin-top: 9px; }
.billet .pied {
  border-top: 1px dashed var(--trait); padding: 12px 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: relative; background: #FBFCFD;
}
.billet .pied::before, .billet .pied::after {
  content: ""; position: absolute; top: -9px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--fond);
}
.billet .pied::before { left: -8px; }
.billet .pied::after { right: -8px; }
.code-promo {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700;
  font-size: .85rem; letter-spacing: .07em; background: var(--ciel-fond);
  color: var(--marine); padding: 6px 11px; border-radius: 8px; border: 1px dashed #A9CFE8;
}
/* ── les boutons ───────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 17px; border-radius: var(--r-petit); border: 1px solid var(--trait);
  background: var(--carte); color: var(--encre); font: inherit; font-weight: 600;
  font-size: .92rem; cursor: pointer; text-align: center;
  transition: border-color .15s, transform .12s;
}
.bouton:hover { border-color: var(--trait-fort); }
.bouton:active { transform: translateY(1px); }
.bouton.plein { background: var(--cse-couleur, #0E3A5F); color: #fff; border-color: transparent; }
.bouton.or { background: var(--cse-accent, #8FCBEB); color: var(--marine); border-color: transparent; }
.bouton.large { width: 100%; }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
/* ── la fiche ──────────────────────────────────────────────── */
.fiche-couverture { position: relative; height: 230px; overflow: hidden; background: var(--nuit); }
.fiche-couverture .retour {
  position: absolute; top: 14px; left: 16px; z-index: 2; color: #fff;
  font-size: .88rem; font-weight: 600; background: rgba(6,32,58,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 99px;
}
.logo-fiche.lettres {
  display: grid; place-items: center; font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; font-size: 1.6rem; color: var(--bleu);
}
.bloc {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 17px; margin-bottom: 14px;
}
.bloc h2 { font-size: 1.05rem; margin-bottom: 11px; }
.ligne { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--trait); align-items: flex-start; }
.ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.ligne .cle { font-size: .79rem; color: var(--encre-douce); width: 94px; flex: none; padding-top: 2px; }
.ligne .val { font-size: .93rem; }
.encadre-avantage { border-color: #B6DDC9; background: linear-gradient(180deg, #F0FAF5, #fff 72%); }
.encadre-avantage .oeil { color: var(--vert); }
.encadre-avantage .titre-offre {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.15rem; line-height: 1.2;
}
.offre-suivante { border-top: 1px solid var(--trait); padding-top: 14px; margin-top: 14px; }
.savoir-faire { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.savoir-faire li { position: relative; padding-left: 26px; font-size: .93rem; line-height: 1.45; }
.savoir-faire li::before {
  content: "\2713"; position: absolute; left: 0; top: 0; color: var(--vert);
  font-weight: 800; font-size: .9rem;
}
.video { position: relative; padding-top: 56.25%; border-radius: var(--r-petit); overflow: hidden; background: #08131F; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reseaux { display: flex; flex-wrap: wrap; gap: 8px; }
.reseaux .bouton { padding: 9px 14px; font-size: .86rem; }
.carte-lien .epingle { color: var(--rouge); font-size: 1.1rem; line-height: 1.2; }
.panneau .bloc:last-of-type { margin-bottom: 8px; }
/* ── le coupon ─────────────────────────────────────────────── */
.coupon { background: var(--carte); border-radius: 20px; box-shadow: var(--ombre-3); overflow: hidden; margin: 18px 0; }
.coupon .haut {
  background: var(--cse-couleur, #0E3A5F);
  background-image: radial-gradient(540px 270px at 90% -32%, rgba(143,203,235,.36), transparent 66%);
  color: #fff; padding: 22px 18px;
}
.coupon .haut .titre-offre {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.45rem; line-height: 1.15;
}
.coupon .dents {
  height: 22px;
  background: radial-gradient(circle at 11px 0, var(--fond) 11px, transparent 11px) repeat-x 0 0 / 22px 22px;
  border-bottom: 1px dashed var(--trait);
}
.coupon .bas { padding: 20px 18px; text-align: center; }
.coupon .qr {
  width: 208px; height: 208px; margin: 4px auto 10px; display: block;
  border: 1px solid var(--trait); border-radius: var(--r-petit); padding: 9px; background: #fff;
}
.coupon .grand-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700;
  font-size: 1.45rem; letter-spacing: .14em; color: var(--marine);
  padding: 14px; border: 2px dashed var(--trait-fort); border-radius: var(--r);
  margin: 4px 0 12px; background: #FBFCFE;
}
.coupon .ref { font-size: .74rem; color: var(--encre-douce); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.moyens { display: grid; gap: 10px; }
.moyen {
  display: flex; gap: 12px; align-items: flex-start; background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--r); padding: 15px;
}
.moyen .rang {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cse-couleur, #0E3A5F); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: .84rem; font-variant-numeric: tabular-nums;
}
.moyen strong { font-size: .95rem; }
.moyen p { margin: 3px 0 0; }
.verdict {
  width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 2.2rem; font-weight: 700; color: #fff;
}
.verdict.oui { background: var(--vert); }
.verdict.non { background: var(--rouge); }
/* ── les actualités ────────────────────────────────────────── */
.actu {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 16px; margin-bottom: 12px; border-left: 3px solid var(--cse-accent, #8FCBEB);
}
.actu .quand { font-size: .76rem; color: var(--encre-douce); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.actu h3 { margin: 5px 0 6px; }
.actu p { font-size: .92rem; color: var(--encre-douce); margin: 0; }
/* ── la barre de navigation ────────────────────────────────── */
.barre-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255,255,255,.93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--trait);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-bas a {
  padding: 9px 2px 8px; text-align: center; color: var(--encre-douce);
  font-size: .68rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.barre-bas a .ic { font-size: 1.2rem; line-height: 1; }
.barre-bas a.ici { color: var(--cse-couleur, #0E3A5F); }
/* ── divers ────────────────────────────────────────────────── */
.filtres { display: flex; gap: 7px; overflow-x: auto; padding: 4px 16px 10px; margin: 0 -16px; scrollbar-width: none; }
.filtres::-webkit-scrollbar { display: none; }
.filtres a {
  flex: none; padding: 9px 15px; border-radius: 99px; border: 1px solid var(--trait);
  background: var(--carte); color: var(--encre-douce); font-size: .86rem; font-weight: 600; white-space: nowrap;
}
.filtres a.ici { background: var(--cse-couleur, #0E3A5F); color: #fff; border-color: transparent; }
.vide { text-align: center; padding: 48px 20px; color: var(--encre-douce); }
.vide .gros { font-size: 2.4rem; margin-bottom: 10px; }
.note { font-size: .83rem; color: var(--encre-douce); line-height: 1.5; }
.pied-page { padding: 28px 0 32px; text-align: center; }
.pied-page .note { max-width: 34em; margin: 0 auto 10px; }
.compteur { font-size: .85rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.avantages { display: grid; gap: 10px; }
.fil { font-size: .82rem; opacity: .82; margin: 0 0 10px; }
.fil a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.entete .marque .nom a { color: #fff; }
/* ── l'écran du code ───────────────────────────────────────── */
.portail {
  min-height: 100svh; display: grid; place-items: center; padding: 24px 16px;
  background: var(--nuit);
  background-image:
    radial-gradient(900px 500px at 80% -20%, rgba(143,203,235,.28), transparent 62%),
    linear-gradient(165deg, var(--marine), var(--nuit));
}
.portail .boite { background: #fff; border-radius: 22px; padding: 32px 26px; max-width: 410px; width: 100%; box-shadow: var(--ombre-3); }
.portail h1 { font-size: 1.42rem; }
.portail input {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 1.15rem; font-weight: 700;
  letter-spacing: .12em; text-align: center; text-transform: uppercase;
  border: 2px solid var(--trait); border-radius: var(--r); margin: 6px 0 14px;
}
.portail input:focus { border-color: var(--bleu); outline: none; }
.erreur { background: #FCECEA; color: var(--rouge); padding: 11px 13px; border-radius: var(--r-petit); font-size: .88rem; margin-bottom: 12px; }
/* ── le grand écran ────────────────────────────────────────── */
@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .barre-bas {
    position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--trait);
    display: flex; justify-content: center; gap: 4px; padding: 7px 12px;
  }
  .barre-bas a { flex-direction: row; gap: 7px; font-size: .9rem; padding: 9px 16px; border-radius: var(--r-petit); }
  .barre-bas a.ici { background: var(--bleu-clair); }
  .categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grille { grid-template-columns: repeat(auto-fill, minmax(298px, 1fr)); }
  .accroche h1 { font-size: 2.7rem; }
  .accroche p { font-size: 1.05rem; }
  .actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* minmax(0, …) : sans cela, une piste en fr refuse de descendre sous la
     largeur minimale de son contenu, et la colonne de droite imposait sa loi. */
  .fiche-deux {
    display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: 22px; align-items: start;
  }
  .fiche-deux > *, .panneau { min-width: 0; }
  .cv-liste dt { width: 92px; }
  .panneau { position: sticky; top: 78px; }
  .moyens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1020px) {
  .grille { grid-template-columns: repeat(3, 1fr); }
}
/* ── la page imprimée (le coupon au comptoir) ──────────────── */
@media print {
  .barre-bas, .entete, .bouton, .pied-page, .moyens { display: none !important; }
  body { background: #fff; padding: 0; }
  .coupon { box-shadow: none; border: 1px solid #999; }
  .coupon .qr { width: 210px; height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto; }
}
/* ── la carte de visite du prestataire ─────────────────────────
   Un seul objet à droite de la fiche, découpé en tranches par des
   filets : identité, actions, coordonnées, réseaux, plan, encart. */

.ico { flex: none; vertical-align: -.16em; }
.carte-visite {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 18px;
  box-shadow: var(--ombre-2); overflow: hidden;
}
.cv-tete {
  display: flex; gap: 14px; align-items: center; padding: 18px 17px 16px;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(143,203,235,.20), transparent 70%),
    linear-gradient(180deg, #F7FAFD, #fff);
  border-bottom: 1px solid var(--trait);
}
.cv-logo {
  width: 84px; height: 62px; flex: none; border-radius: 13px; background: #fff;
  border: 1px solid var(--trait); object-fit: contain; padding: 6px;
}
.cv-logo.lettres {
  display: grid; place-items: center; font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; font-size: 1.3rem; color: var(--bleu);
}
.cv-identite { min-width: 0; }
.cv-identite h2 { font-size: 1.12rem; line-height: 1.15; margin: 0; }
.cv-metier { font-size: .85rem; color: var(--encre-douce); margin: 3px 0 0; line-height: 1.3; }
.cv-lieu {
  font-size: .81rem; color: var(--encre-douce); margin: 6px 0 0;
  display: flex; align-items: center; gap: 5px;
}
.cv-lieu .ico { color: var(--rouge); }
.cv-puces { padding: 12px 17px 0; }
.cv-puces .puce { margin-bottom: 0; }
.cv-part { padding: 15px 17px; border-top: 1px solid var(--trait); }
.cv-part:first-child { border-top: 0; }
.cv-titre {
  font-family: "Public Sans", sans-serif; font-size: .71rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-douce);
  margin: 0 0 11px; display: flex; align-items: center; gap: 6px;
}
.cv-titre .ico { color: var(--bleu); }
/* l'appel, action principale */
.cv-appel {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; border-radius: 13px; color: #fff;
  background: var(--cse-couleur, #0E3A5F);
  background-image: radial-gradient(360px 120px at 100% 0%, rgba(143,203,235,.30), transparent 70%);
  transition: filter .15s, transform .12s;
}
.cv-appel:hover { filter: brightness(1.08); }
.cv-appel:active { transform: translateY(1px); }
.cv-appel .q { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; opacity: .72; }
.cv-appel strong { font-size: 1.06rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.cv-second { display: block; text-align: center; font-size: .84rem; margin-top: 9px; color: var(--encre-douce); }
/* les actions secondaires, en tuiles */
.cv-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cv-actions a, .cv-actions button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 6px; border-radius: 12px; border: 1px solid var(--trait);
  background: #FBFCFE; color: var(--encre); font: inherit; font-size: .76rem;
  font-weight: 600; cursor: pointer; text-align: center; line-height: 1.2;
  transition: border-color .15s, background .15s, transform .12s;
}
.cv-actions a:hover, .cv-actions button:hover { border-color: var(--trait-fort); background: #fff; }
.cv-actions a:active, .cv-actions button:active { transform: translateY(1px); }
.cv-actions .ico { color: var(--bleu); }
.cv-actions button[aria-pressed="true"] .ico { color: var(--dore); }
/* les coordonnées */
.cv-liste { margin: 0; }
.cv-liste > div { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--trait); }
.cv-liste > div:last-child { border-bottom: 0; padding-bottom: 0; }
.cv-liste > div:first-child { padding-top: 0; }
.cv-liste dt {
  font-size: .78rem; color: var(--encre-douce); width: 104px; flex: none;
  display: flex; align-items: center; gap: 6px; padding-top: 1px;
}
.cv-liste dt .ico { color: var(--trait-fort); }
.cv-liste dd { margin: 0; font-size: .91rem; min-width: 0; }
.cv-liste dd.coupe { word-break: break-word; }
/* les réseaux */
.cv-reseaux { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-reseaux a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--trait); background: #FBFCFE; color: var(--encre-douce);
  transition: color .15s, border-color .15s, transform .12s;
}
.cv-reseaux a:hover { transform: translateY(-2px); border-color: var(--trait-fort); }
.cv-reseaux .r-facebook:hover { color: #1877F2; }
.cv-reseaux .r-instagram:hover { color: #C13584; }
.cv-reseaux .r-youtube:hover { color: #FF0000; }
.cv-reseaux .r-linkedin:hover { color: #0A66C2; }
.cv-reseaux .r-tiktok:hover { color: #000; }
/* le plan */
.cv-plan {
  display: flex; align-items: center; gap: 12px; padding: 15px 17px;
  border-top: 1px solid var(--trait); color: var(--encre);
  background:
    linear-gradient(135deg, #EEF4F9, #F8FAFC),
    repeating-linear-gradient(45deg, rgba(27,94,155,.05) 0 10px, transparent 10px 20px);
}
.cv-plan-epingle {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid;
  place-items: center; background: #fff; color: var(--rouge);
  box-shadow: var(--ombre-1);
}
.cv-plan > span:nth-child(2) { flex: 1; min-width: 0; font-size: .9rem; }
/* l'encart du guide */
.cv-encart {
  display: block; position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--trait); background: #fff;
}
.cv-encart img { width: 100%; height: auto; }
.cv-encart-loupe {
  position: absolute; right: 10px; bottom: 10px; font-size: .74rem; font-weight: 700;
  padding: 6px 11px; border-radius: 99px; background: rgba(6,32,58,.78); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (min-width: 400px) and (max-width: 719px) {
  .cv-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ── les avis relevés dans le guide ────────────────────────── */
.cv-avis {
  padding: 13px 17px; border-top: 1px solid var(--trait);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: linear-gradient(180deg, #FFFCF4, #fff);
}
.cv-note {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.35rem; line-height: 1; color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.cv-etoiles { color: var(--dore); letter-spacing: .04em; font-size: 1rem; }
.cv-avis-texte { font-size: .84rem; color: var(--encre-douce); font-weight: 600; }
.cv-avis-note { flex: 1 0 100%; font-size: .74rem; color: var(--encre-douce); opacity: .85; }
/* ── l'assistant ───────────────────────────────────────────── */
.assistant, .orienteur {
  border-color: #C9DDF0;
  background:
    radial-gradient(520px 240px at 100% 0%, rgba(143,203,235,.20), transparent 68%),
    linear-gradient(180deg, #F7FBFE, #fff 70%);
}
.orienteur { margin-bottom: 18px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 12px; }
.suggestions button {
  border: 1px solid var(--trait); background: #fff; color: var(--encre-douce);
  font: inherit; font-size: .83rem; font-weight: 600; padding: 8px 13px;
  border-radius: 99px; cursor: pointer; transition: border-color .15s, color .15s;
}
.suggestions button:hover { border-color: var(--bleu); color: var(--bleu); }
.demande { display: flex; gap: 8px; }
.demande input {
  flex: 1; min-width: 0; border: 1px solid var(--trait); border-radius: var(--r-petit);
  padding: 12px 14px; font: inherit; font-size: .95rem; background: #fff;
}
.demande input:focus { border-color: var(--bleu); outline: none; }
.demande button { flex: none; }
.reponse {
  margin-top: 13px; padding: 14px 16px; border-radius: var(--r-petit);
  background: #fff; border: 1px solid var(--trait); font-size: .95rem; line-height: 1.55;
  white-space: pre-line;
}
.reponse.patiente { color: var(--encre-douce); font-style: italic; }
.reponse .d-ou {
  display: block; margin-top: 10px; font-size: .75rem; color: var(--encre-douce);
  font-style: normal; border-top: 1px solid var(--trait); padding-top: 9px;
}
.resultats { margin-top: 14px; }
/* ── la carte ──────────────────────────────────────────────── */
.plan {
  height: 62vh; min-height: 340px; border-radius: var(--r);
  border: 1px solid var(--trait); overflow: hidden; box-shadow: var(--ombre-1);
  background: var(--bleu-clair);
}
.leaflet-container { font: inherit; }
.leaflet-popup-content { font-size: .9rem; line-height: 1.45; }
@media (min-width: 720px) {
  .plan { height: 58vh; }
}
/* ── les accordéons du panneau ─────────────────────────────── */
.cv-plie {
  padding: 16px 17px; border-top: 1px solid var(--trait);
  background: linear-gradient(180deg, #F6FAFD, #fff 60%);
}
.cv-actions button[aria-expanded="true"] {
  border-color: var(--bleu); background: var(--bleu-clair);
}
.cv-actions button[aria-expanded="true"] .ico { color: var(--marine); }
.cv-form { display: grid; gap: 11px; }
.cv-form label {
  display: grid; gap: 5px; font-size: .79rem; font-weight: 600; color: var(--encre-douce);
}
.cv-form input, .cv-form textarea {
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  padding: 11px 13px; font: inherit; font-size: .93rem; background: #fff;
  color: var(--encre); font-weight: 400; resize: vertical;
}
.cv-form input:focus, .cv-form textarea:focus { border-color: var(--bleu); outline: none; }
.cv-form-pied { margin-top: 2px; }
/* ── les fenêtres (rendez-vous, écrire) ────────────────────── */
dialog.fenetre {
  border: 0; border-radius: 20px; padding: 26px 24px 24px; max-width: 470px; width: calc(100% - 32px);
  box-shadow: var(--ombre-3); color: var(--encre); background: var(--carte);
  font: inherit; position: relative;
}
dialog.fenetre::backdrop { background: rgba(6,32,58,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.fenetre h2 { font-size: 1.22rem; margin: 0 34px 12px 0; }
dialog.fenetre .fermer {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border: 1px solid var(--trait); background: #fff; border-radius: 50%;
  font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--encre-douce);
}
dialog.fenetre .fermer:hover { border-color: var(--trait-fort); color: var(--encre); }
.fenetre-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.fenetre-texte {
  width: 100%; border: 1px solid var(--trait); border-radius: var(--r-petit);
  padding: 12px 14px; font: inherit; font-size: .92rem; line-height: 1.5;
  background: #FBFCFE; color: var(--encre); resize: vertical;
}
/* ── la galerie de la fiche ────────────────────────────────── */
.mosaique-galerie {
  display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 110px;
}
.mosaique-galerie a {
  display: block; border-radius: var(--r-petit); overflow: hidden;
  background: var(--bleu-clair); position: relative;
}
.mosaique-galerie img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.mosaique-galerie a:hover img { transform: scale(1.05); }
.mosaique-galerie a::after {
  content: ""; position: absolute; inset: 0; background: rgba(6,32,58,0);
  transition: background .2s;
}
.mosaique-galerie a:hover::after { background: rgba(6,32,58,.12); }
.mosaique-galerie .mg-1 { grid-column: span 2; grid-row: span 2; }
@media (min-width: 560px) {
  .mosaique-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 120px; }
  .mosaique-galerie .mg-1 { grid-column: span 2; grid-row: span 2; }
  .mosaique-galerie .mg-2, .mosaique-galerie .mg-3 { grid-column: span 2; }
  .mosaique-galerie .mg-4, .mosaique-galerie .mg-5 { grid-column: span 2; }
}
/* ── le bloc À propos ──────────────────────────────────────── */
.apropos-deux { display: grid; gap: 18px; }
.apropos-titre {
  font-family: "Public Sans", sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-douce);
  margin: 0 0 9px;
}
.apropos p { font-size: .95rem; line-height: 1.6; }
.apropos .savoir-faire li { font-size: .91rem; }
@media (min-width: 620px) {
  .apropos-deux { grid-template-columns: 1.1fr 1fr; gap: 26px; }
}
/* ── le haut de fiche, façon vitrine ───────────────────────── */
.fiche-haut {
  background: var(--nuit);
  background-image:
    radial-gradient(900px 480px at 92% -20%, rgba(143,203,235,.20), transparent 64%),
    linear-gradient(160deg, #0B2B45, var(--nuit));
  color: #fff; padding: 16px 0 26px;
}
.fiche-haut .retour {
  display: inline-block; color: #fff; font-size: .87rem; font-weight: 600;
  background: rgba(255,255,255,.12); padding: 8px 14px; border-radius: 99px; margin-bottom: 18px;
}
.fiche-haut .retour:hover { background: rgba(255,255,255,.2); }
.fh-deux { display: grid; gap: 20px; }
.fh-carrousel {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: #0A1B2B; aspect-ratio: 4 / 3;
}
.fh-vues, .fh-vues img { width: 100%; height: 100%; }
.fh-vues img { object-fit: cover; }
.fh-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--marine); font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center; box-shadow: var(--ombre-1);
}
.fh-prec { left: 12px; }
.fh-suiv { right: 12px; }
.fh-fleche:hover { background: #fff; }
.fh-points { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; }
.fh-points span {
  width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.45);
  cursor: pointer; transition: width .2s, background .2s;
}
.fh-points span.ici { width: 22px; background: #fff; }
.fh-badge {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: 7px 13px; border-radius: 8px;
  background: rgba(143,203,235,.18); color: var(--ciel); margin-bottom: 14px;
}
.fh-texte h1 { font-size: 2rem; line-height: 1.05; }
.fh-sous { font-size: 1rem; opacity: .78; margin: 8px 0 0; }
.fh-faits {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px;
  margin: 20px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16);
}
.fh-faits strong {
  display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.06rem; line-height: 1.2; color: var(--ciel);
}
.fh-faits span {
  display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: .62; margin-top: 4px;
}
.fh-avis { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.fh-avis strong {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 1.5rem; color: var(--dore);
  font-variant-numeric: tabular-nums;
}
.fh-avis span { font-size: .78rem; opacity: .68; letter-spacing: .04em; }
.fh-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.fh-actions .bouton { padding: 14px 20px; }
.bouton.clair {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.32);
}
.bouton.clair:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.cv-reseaux a { width: 52px; height: 52px; border-radius: 14px; }
@media (min-width: 760px) {
  .fiche-haut { padding: 18px 0 34px; }
  .fh-deux { grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; }
  .fh-carrousel { aspect-ratio: 5 / 4; }
  .fh-texte h1 { font-size: 2.6rem; }
}
/* ── la localisation ───────────────────────────────────────── */
.cv-adresse {
  display: flex; gap: 11px; align-items: center; padding: 13px 14px;
  border-radius: var(--r-petit); border: 1px solid var(--trait);
  background: linear-gradient(135deg, #EEF4F9, #F8FAFC); margin-bottom: 12px;
  font-size: .91rem;
}
.cv-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.cv-modes button {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 4px; border: 1px solid var(--trait); border-radius: 12px;
  background: #FBFCFE; color: var(--encre-douce); font: inherit; font-size: .76rem;
  font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.cv-modes button:hover { border-color: var(--trait-fort); }
.cv-modes button[aria-pressed="true"] {
  border-color: var(--cse-couleur, #0E3A5F); background: var(--bleu-clair); color: var(--marine);
}
.cv-horaires { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--trait); }
/* ── le tableau de bord du partenaire ──────────────────────── */
.cat.resultat { display: block; padding: 16px 15px; }
.cat.resultat .nom { display: block; margin-top: 6px; font-size: .86rem; }
.ecart { display: block; margin-top: 5px; font-size: .76rem; font-weight: 600; color: var(--encre-douce); }
.ecart.monte { color: var(--vert); }
.ecart.descend { color: var(--rouge); }
/* ── le catalogue à la carte ───────────────────────────────── */
.carte-service { cursor: pointer; position: relative; padding-left: 46px; }
.carte-service input {
  position: absolute; left: 17px; top: 20px; width: 19px; height: 19px;
  accent-color: var(--cse-couleur, #0E3A5F); cursor: pointer;
}
.carte-service:hover { border-color: var(--trait-fort); }
.carte-service.deja { border-color: #BEE3D2; background: linear-gradient(180deg, #F2FBF7, #fff 60%); }
.carte-service .service-n { display: none; }
.carte-service p { font-size: .9rem; }
/* ── les publications produites ────────────────────────────── */
.posts { display: grid; gap: 12px; margin-top: 14px; }
.post {
  border: 1px solid var(--trait); border-radius: var(--r); padding: 15px; background: #FBFCFE;
}
.post-visuel { width: 100%; max-width: 340px; border-radius: var(--r-petit); margin: 10px 0; }
.post-texte { white-space: pre-line; font-size: .95rem; line-height: 1.55; margin: 8px 0; }
.avis-catalogue {
  border-color: #D9BE84; background: linear-gradient(180deg, #FFFCF4, #fff 70%);
  margin-bottom: 16px;
}
.avis-catalogue p:first-child { margin-bottom: 7px; }
/* ── la grande barre de recherche ──────────────────────────── */
.recherche.grande { gap: 4px; }
.recherche.grande select,
.recherche.grande input { padding: 14px 15px; }
.recherche-ville { position: relative; display: flex; flex: 1 1 100%; min-width: 0; }
.recherche-ville input { flex: 1; min-width: 0; padding-right: 44px; }
.repere {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  color: var(--bleu); display: grid; place-items: center; border-radius: 50%;
}
.repere:hover { background: var(--bleu-clair); }
.repere.cherche { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (min-width: 980px) {
  .recherche.grande { flex-wrap: nowrap; }
  .recherche.grande select { flex: 0 1 24%; border-left: 0; border-right: 1px solid var(--trait); border-top: 0; }
  .recherche.grande > input[name="q"] { flex: 1 1 0; }
  .recherche-ville { flex: 0 1 25%; border-left: 1px solid var(--trait); }
  .recherche.grande button[type="submit"] { padding: 0 24px; }
}
/* ── comment ça marche ─────────────────────────────────────── */
.process { display: grid; gap: 12px; }
.pas {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 20px 18px; position: relative; overflow: hidden;
}
.pas::after {
  content: ""; position: absolute; inset: auto -34px -34px auto;
  width: 130px; height: 130px; border-radius: 50%;
  background: var(--bleu-clair); opacity: .6; z-index: 0;
}
.pas > * { position: relative; z-index: 1; }
.pas-n {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--cse-couleur, #0E3A5F); color: #fff; font-weight: 800; font-size: 1.05rem;
  font-family: "Bricolage Grotesque", sans-serif; margin-bottom: 12px;
}
.pas h3 { font-size: 1.08rem; }
.pas p { font-size: .92rem; color: var(--encre-douce); margin: 7px 0 9px; }
.pas a { font-size: .88rem; font-weight: 600; }
/* ── nous trouver ──────────────────────────────────────────── */
.deux-colonnes { display: grid; gap: 14px; }
.encart-carte {
  position: relative; display: block; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--trait); background: var(--carte); color: var(--encre);
  min-height: 190px;
}
.encart-carte-fond {
  position: absolute; inset: 0;
  background:
    radial-gradient(300px 160px at 22% 30%, rgba(180,52,43,.16), transparent 70%),
    radial-gradient(360px 200px at 78% 70%, rgba(27,94,155,.14), transparent 70%),
    repeating-linear-gradient(48deg, rgba(27,94,155,.06) 0 14px, transparent 14px 30px),
    linear-gradient(140deg, #EDF3F9, #F8FAFC);
}
.encart-carte-texte { position: relative; padding: 20px 18px; display: grid; gap: 7px; align-content: start; }
.encart-carte-texte strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.1rem; }
.encart-carte .bouton { justify-self: start; }
.villes { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r); padding: 18px 17px; }
.villes h3 { font-size: 1rem; margin-bottom: 12px; }
.villes .etiquette strong { color: var(--encre); font-variant-numeric: tabular-nums; }
/* ── la foire aux questions ────────────────────────────────── */
.faq { display: grid; gap: 9px; }
.faq-item {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r-petit);
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.faq-item[open] { border-color: var(--trait-fort); box-shadow: var(--ombre-1); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 15px 46px 15px 16px;
  font-weight: 600; font-size: .97rem; position: relative; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; font-weight: 400; color: var(--encre-douce); line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--bleu); }
.faq-reponse { padding: 0 16px 16px; font-size: .93rem; line-height: 1.6; color: var(--encre-douce); }
/* ── le feuilleteur du catalogue ───────────────────────────── */
.feuilleteur {
  background: linear-gradient(165deg, #0E2438, #06203A); border-radius: var(--r);
  padding: 16px; box-shadow: var(--ombre-2); outline: none;
}
.fe-page.tourne-d img { animation: tourne-d .42s ease-out; }
.fe-page.tourne-g img { animation: tourne-g .42s ease-out; }
@keyframes tourne-d {
  from { transform: rotateY(-40deg) scale(.95); opacity: .4; }
  to { transform: none; opacity: 1; }
}
@keyframes tourne-g {
  from { transform: rotateY(40deg) scale(.95); opacity: .4; }
  to { transform: none; opacity: 1; }
}
.fe-barre .bouton {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22);
  padding: 9px 14px; font-size: .84rem;
}
.fe-barre .bouton:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.fe-vignettes button.ici { border-color: var(--cse-accent, #8FCBEB); opacity: 1; }
/* ── la pastille de remise et la validité ──────────────────── */
.flamme {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .82rem; font-weight: 800; padding: 6px 12px; border-radius: 99px;
  background: #fff; color: var(--rouge); box-shadow: var(--ombre-2);
}
.validite { margin-top: 9px; font-size: .8rem; font-weight: 600; color: var(--vert); }
.validite.presse { color: var(--rouge); }
/* ── le bandeau « retenu par le comité » ───────────────────── */
.cv-verifie {
  display: flex; align-items: center; gap: 9px; padding: 12px 17px;
  background: var(--vert-fond); color: var(--vert-encre);
  border-top: 1px solid #BEE3D2; font-size: .87rem; font-weight: 600;
}
.cv-verifie svg { color: var(--vert); flex: none; }
/* ── la semaine d'ouverture ────────────────────────────────── */
.cv-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cv-semaine > div {
  border: 1px solid var(--trait); border-radius: 10px; padding: 9px 2px 7px;
  text-align: center; background: #FBFCFE;
}
.cv-semaine .j { display: block; font-size: .76rem; font-weight: 700; color: var(--encre-douce); }
.cv-semaine .pt {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--trait-fort); margin: 6px auto 0;
}
.cv-semaine .ouvert .pt { background: var(--vert); }
.cv-semaine .aujourdhui { border-color: var(--cse-couleur, #0E3A5F); background: var(--bleu-clair); }
.cv-semaine .aujourdhui .j { color: var(--marine); }
.cv-etat { margin: 11px 0 0; font-size: .86rem; font-weight: 600; }
.cv-etat.oui { color: var(--vert-encre); }
.cv-etat.non { color: var(--encre-douce); }
.tuile-phare { border-color: var(--dore) !important; background: var(--dore-fond) !important; }
.tuile-phare .ico { color: #7A5410 !important; }
/* ── les services aux professionnels ───────────────────────── */
.service { position: relative; padding-top: 22px; }
.service-n {
  position: absolute; top: 12px; right: 16px;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2.2rem;
  color: var(--bleu-clair); line-height: 1;
}
.service h3 { font-size: 1.12rem; margin-bottom: 8px; }
.service p { font-size: .93rem; color: var(--encre-douce); }
/* ── le tableau des horaires ───────────────────────────────── */
.tableau-horaires { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau-horaires th { text-align: left; font-weight: 600; padding: 9px 8px 9px 0; }
.tableau-horaires thead th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); }
.tableau-horaires td { padding: 6px 8px 6px 0; white-space: nowrap; }
.tableau-horaires input {
  border: 1px solid var(--trait); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: .88rem;
}
.tableau-horaires span { color: var(--encre-douce); font-size: .82rem; margin: 0 3px; }
.demande.neuve { border-left: 3px solid var(--vert); }
/* ── le chat flottant ──────────────────────────────────────── */
.bulle {
  position: fixed; right: 16px; bottom: calc(var(--barre) + 14px); z-index: 60;
  display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer;
  padding: 13px 18px; border-radius: 99px; font: inherit; font-weight: 700; font-size: .92rem;
  background: var(--cse-couleur, #0E3A5F); color: #fff; box-shadow: var(--ombre-3);
}
.bulle:hover { filter: brightness(1.12); }
.panneau-chat {
  position: fixed; right: 16px; bottom: calc(var(--barre) + 74px); z-index: 61;
  width: min(370px, calc(100vw - 32px)); max-height: min(520px, 70vh);
  background: var(--carte); border: 1px solid var(--trait); border-radius: 18px;
  box-shadow: var(--ombre-3); display: flex; flex-direction: column; overflow: hidden;
}
.panneau-chat header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--cse-couleur, #0E3A5F); color: #fff;
}
.panneau-chat header button { border: 0; background: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.chat-fil { flex: 1; overflow-y: auto; padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.chat-dit, .chat-moi {
  margin: 0; padding: 11px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.5; max-width: 88%;
}
.chat-dit { background: #F1F5F9; color: var(--encre); justify-self: start; border-bottom-left-radius: 4px; }
.chat-moi { background: var(--cse-couleur, #0E3A5F); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.chat-liens { display: flex; flex-wrap: wrap; gap: 7px; }
.chat-liens a {
  font-size: .84rem; font-weight: 600; padding: 8px 13px; border-radius: 99px;
  background: var(--bleu-clair); color: var(--marine);
}
.panneau-chat .demande { padding: 12px 14px; border-top: 1px solid var(--trait); }
.panneau-chat .suggestions { margin: 4px 0 0; }
@media (min-width: 720px) {
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deux-colonnes { grid-template-columns: 1.25fr 1fr; }
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .assistant .faq, .bloc .faq { grid-template-columns: 1fr; }
  .bulle { bottom: 18px; }
  .panneau-chat { bottom: 82px; }
}
@media print { .bulle, .panneau-chat, .feuilleteur { display: none !important; } }
/* ── quatre étapes plutôt que trois ────────────────────────── */
@media (min-width: 720px) { .process.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .process.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ── on n'agrandit jamais une photo du guide ───────────────── */
.fh-carrousel.du-guide { background: #0A1B2B; }
.fh-carrousel.du-guide .fh-vues img { object-fit: contain; }
.fh-carrousel.du-guide::after {
  content: "Photo tirée de son encart du guide";
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px;
  font-size: .72rem; color: rgba(255,255,255,.72); background: rgba(6,32,58,.6);
  text-align: center;
}
/* ── l'envoi de photos par le partenaire ───────────────────── */
.depot {
  border: 2px dashed var(--trait-fort); border-radius: var(--r); padding: 22px 18px;
  text-align: center; background: #FBFCFE; transition: border-color .15s, background .15s;
}
.depot.survol { border-color: var(--bleu); background: var(--bleu-clair); }
.depot input[type="file"] { display: block; margin: 12px auto 0; font: inherit; font-size: .88rem; }
.mes-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; margin-top: 14px; }
.mes-photos figure { margin: 0; position: relative; }
.mes-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-petit); }
.mes-photos button {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0;
  border-radius: 50%; background: rgba(6,32,58,.78); color: #fff; cursor: pointer; font-size: 1rem;
}
/* ── la remise, en toutes lettres ──────────────────────────── */
.offre-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.remise {
  display: inline-flex; align-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: 1.12rem; line-height: 1; letter-spacing: -.01em;
  padding: 8px 13px; border-radius: 10px;
  background: var(--rouge); color: #fff; white-space: nowrap;
}
.remise.neutre { background: var(--bleu-clair); color: var(--marine); font-size: .82rem; padding: 8px 12px; }
.remise.petite { font-size: .84rem; padding: 4px 9px; border-radius: 7px; }
.bandeau-offre { display: flex; align-items: center; gap: 9px; }
.bandeau-offre > span { min-width: 0; }
.validite { font-weight: 600; font-size: .79rem; color: var(--encre-douce); }
.validite.presse { color: var(--rouge); }
/* ── le catalogue, en vrai livre ───────────────────────────── */
.livre {
  background: linear-gradient(165deg, #10273C, #061826); border-radius: var(--r);
  padding: 16px 14px 12px; box-shadow: var(--ombre-2); outline: none;
  max-width: 1010px; margin: 0 auto;
}
.livre-scene { display: flex; align-items: center; gap: 10px; }
.livre-pages {
  flex: 1; min-width: 0; position: relative; aspect-ratio: 1.33 / 1;
  perspective: 2400px; border-radius: 3px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.livre-face {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background-size: 200% 100% !important; background-color: #fff;
}
.livre-face.gauche { left: 0; border-radius: 3px 0 0 3px; }
.livre-face.droite { right: 0; border-radius: 0 3px 3px 0; }
/* la reliure : une ombre au centre, comme sur un livre ouvert */
.livre-reliure {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 46px;
  transform: translateX(-50%); pointer-events: none; z-index: 3;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.16) 38%, rgba(0,0,0,.30) 50%,
    rgba(0,0,0,.16) 62%, rgba(0,0,0,0) 100%);
}
/* la feuille qui tourne */
.livre-feuille {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4;
  transform-style: preserve-3d; transition: transform .6s cubic-bezier(.42,0,.35,1);
}
.livre-feuille.cote-droit { right: 0; transform-origin: left center; }
.livre-feuille.cote-gauche { left: 0; transform-origin: right center; }
.livre-feuille.cote-droit.part { transform: rotateY(-178deg); }
.livre-feuille.cote-gauche.part { transform: rotateY(178deg); }
.livre-feuille .livre-face {
  width: 100%; left: 0; right: 0; backface-visibility: hidden;
  box-shadow: 0 0 24px rgba(0,0,0,.28);
}
.livre-feuille .verso { transform: rotateY(180deg); }
.livre-fleche {
  flex: none; width: 44px; height: 68px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.13); color: #fff; font-size: 1.9rem; line-height: 1;
  display: grid; place-items: center; transition: background .15s;
}
.livre-fleche:hover { background: rgba(255,255,255,.26); }
.livre-barre {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12);
}
.livre-compte { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.livre-curseur { flex: 1; min-width: 130px; accent-color: var(--cse-accent, #8FCBEB); }
.livre-telecharger {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22);
  padding: 9px 14px; font-size: .84rem;
}
.livre-telecharger:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.42); }
.livre-vignettes {
  display: flex; gap: 6px; overflow-x: auto; padding: 14px 2px 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
}
.livre-vignettes::-webkit-scrollbar { height: 6px; }
.livre-vignettes::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 99px; }
.livre-vignettes button {
  flex: 0 0 auto; border: 2px solid transparent; border-radius: 5px; padding: 0;
  background: none; cursor: pointer; line-height: 0; opacity: .5; transition: opacity .15s;
}
.livre-vignettes button:hover { opacity: 1; }
.livre-vignettes button.ici { border-color: var(--cse-accent, #8FCBEB); opacity: 1; }
.livre-vignettes img { width: 64px; height: auto; display: block; border-radius: 3px; }
/* sur téléphone, une seule page à la fois : une double page ne se lit pas */
@media (max-width: 719px) {
  /* Une seule page a l'ecran, aux proportions d'une vraie page : la double
     page fait 1.33/1, donc une page seule fait 0.665/1. La valeur .78
     precedente ecrasait l'image. C'est le script qui choisit la moitie
     affichee — d'ou l'absence de `background-position` force ici, qui
     bloquait autrefois l'affichage sur la moitie droite. */
  .livre-pages { aspect-ratio: .665 / 1; }
  .livre-face.gauche { display: none; }
  .livre-face.droite { width: 100%; right: 0; border-radius: 3px; }
  .livre-reliure { display: none; }
  /* pas de rotation de feuille sur telephone : couteux et peu lisible */
  .livre-feuille { display: none !important; }
  .livre-face.droite.change { opacity: .25; }
  .livre-face.droite { transition: opacity .16s ease; }
  .livre-fleche { width: 40px; height: 64px; font-size: 1.7rem; flex: 0 0 auto; }
  .livre { padding: 12px 10px 10px; }
  .livre-scene { gap: 6px; }
  .livre-barre { flex-wrap: wrap; gap: 8px; }
  .livre-telecharger { order: 3; width: 100%; text-align: center; }
  .livre-curseur { min-width: 0; }
  .livre-vignettes img { width: 52px; }
}
@media (min-width: 720px) { .livre-fleche { width: 52px; height: 92px; } }
@media print { .livre { display: none !important; } }
/* ── les onglets de l'accueil ──────────────────────────────── */
.onglets {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 16px 14px; margin: 0 -16px;
  scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }
.onglets button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 99px; border: 1px solid var(--trait);
  background: var(--carte); color: var(--encre-douce); font: inherit;
  font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.onglets button:hover { border-color: var(--trait-fort); color: var(--encre); }
.onglets button[aria-selected="true"] {
  background: var(--cse-couleur, #0E3A5F); color: #fff; border-color: transparent;
}
.onglet-n {
  font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 99px;
  background: var(--bleu-clair); color: var(--marine); font-variant-numeric: tabular-nums;
}
.onglets button[aria-selected="true"] .onglet-n { background: rgba(255,255,255,.22); color: #fff; }
.voir-plus {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--trait-fort); border-radius: var(--r); padding: 22px 18px;
  font-weight: 600; font-size: .92rem; color: var(--bleu); background: #FBFCFE;
  transition: border-color .15s, background .15s;
}
.voir-plus:hover { border-color: var(--bleu); background: var(--bleu-clair); }
/* ── ce que le CSE apporte, en tuiles ──────────────────────── */
.tuiles { display: grid; gap: 12px; }
.tuile {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 20px 18px; transition: border-color .16s, transform .16s, box-shadow .16s;
}
.tuile:hover { border-color: var(--trait-fort); transform: translateY(-2px); box-shadow: var(--ombre-1); }
.tuile-ic {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--bleu-clair); font-size: 1.35rem; line-height: 1; margin-bottom: 13px;
}
.tuile h3 { font-size: 1.02rem; }
.tuile p { font-size: .91rem; color: var(--encre-douce); margin: 7px 0 0; line-height: 1.55; }
/* ── le cadre de la foire aux questions ────────────────────── */
.cadre-faq {
  background:
    radial-gradient(620px 300px at 100% 0%, rgba(143,203,235,.16), transparent 70%),
    linear-gradient(180deg, #F7FAFD, #fff 60%);
  border: 1px solid var(--trait); border-radius: var(--r); padding: 20px 18px;
}
.cadre-faq .faq-item { background: #fff; }
.cadre-faq-pied { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--trait); }
@media (min-width: 620px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ── le coupon dans le bloc « votre avantage » ─────────────────
   Trois pavés bleu clair empilés pesaient trop pour une action
   qui se répète. On passe en contour bleu marine : plus sombre,
   plus discret, et toujours clairement un bouton.
   Celui du haut de fiche reste plein — il est sur fond sombre. */
.encadre-avantage .bouton.or {
  background: transparent; color: var(--marine);
  border: 1px solid var(--marine); font-size: .88rem; padding: 10px 17px;
}
.encadre-avantage .bouton.or:hover { background: var(--marine); color: #fff; }
.encadre-avantage .bouton.or:active { transform: translateY(1px); }
/* ── les trois formulaires du panneau ──────────────────────── */
.creneaux { border: 0; padding: 0; margin: 0; }
.creneaux legend {
  font-size: .79rem; font-weight: 600; color: var(--encre-douce); padding: 0; margin-bottom: 6px;
}
.puces-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.puces-choix label { display: inline-flex; margin: 0; }
.puces-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.puces-choix span {
  display: inline-block; padding: 8px 13px; border-radius: 99px;
  border: 1px solid var(--trait); background: #fff; color: var(--encre-douce);
  font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.puces-choix span:hover { border-color: var(--trait-fort); color: var(--encre); }
.puces-choix input:checked + span {
  background: var(--cse-couleur, #0E3A5F); color: #fff; border-color: transparent;
}
.puces-choix input:focus-visible + span { outline: 3px solid var(--ciel); outline-offset: 2px; }
.deux-champs { display: grid; gap: 11px; }
@media (min-width: 420px) { .deux-champs { grid-template-columns: 1fr 1fr; } }
/* ── la barre de tri ───────────────────────────────────────── */
.barre-tri {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.barre-tri .compteur { margin: 0; }
.tri { display: flex; align-items: center; gap: 8px; }
.tri label { font-size: .82rem; color: var(--encre-douce); font-weight: 600; }
.tri select {
  border: 1px solid var(--trait); border-radius: 99px; padding: 8px 14px;
  font: inherit; font-size: .86rem; font-weight: 600; background: var(--carte);
  color: var(--encre); cursor: pointer;
}
.tri select:focus { border-color: var(--bleu); outline: none; }
/* ── la carte large des doubles pages ──────────────────────── */
@media (min-width: 720px) {
  .carte-lieu.large { grid-column: span 2; }
  .carte-lieu.large > a { display: grid; grid-template-columns: 1.15fr 1fr; }
  .carte-lieu.large .couverture { aspect-ratio: auto; height: 100%; min-height: 216px; }
  .carte-lieu.large .carte-corps { padding: 18px 18px 18px; display: flex; flex-direction: column; }
  .carte-lieu.large .pastille { top: auto; bottom: 16px; left: auto; right: 16px; }
  .carte-lieu.large h3 { font-size: 1.22rem; }
  .carte-lieu.large .bandeau-offre { margin-top: auto; }
}
/* ── un vide qui propose une sortie ────────────────────────── */
.vide h3 { font-size: 1.15rem; color: var(--encre); }
/* ── les pictogrammes de catégorie ─────────────────────────── */
.ico-cat { flex: none; vertical-align: -.2em; }
.cat .ic .ico-cat { color: var(--bleu); }
.onglets button .ico-cat { color: currentColor; }
.filtres a .ico-cat { color: currentColor; vertical-align: -.25em; margin-right: 3px; }
.puce .ico-cat { vertical-align: -.22em; margin-right: 4px; }
/* ── le choix des couleurs, côté comité ────────────────────── */
.couleurs { display: grid; gap: 14px; max-width: 420px; }
.couleurs > label { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--encre-douce); }
.choix-couleur { display: flex; gap: 9px; align-items: center; }
.choix-couleur input[type="color"] {
  width: 54px; height: 42px; padding: 3px; border: 1px solid var(--trait);
  border-radius: 10px; background: #fff; cursor: pointer;
}
.choix-couleur input[type="text"] {
  flex: 1; min-width: 0; border: 1px solid var(--trait); border-radius: 10px;
  padding: 11px 13px; font: inherit; font-size: .92rem;
  font-family: ui-monospace, Menlo, monospace; text-transform: uppercase;
}
/* ── le héros en deux colonnes ─────────────────────────────── */
.heros { display: grid; gap: 26px; margin-top: 24px; align-items: center; }
.heros-texte h1 { font-size: 2rem; line-height: 1.08; }
.heros-texte h1 em { font-style: normal; color: var(--ciel); }
.heros-texte > p { margin: 12px 0 0; opacity: .82; font-size: .98rem; max-width: 34em; }
.vitrine-carte .note { font-size: .79rem; }
.vitrine-carte .bouton { flex: none; padding: 9px 15px; font-size: .85rem; }
.vitrine-points span.ici { width: 22px; background: #fff; }
/* ── la bande de l'assistant ───────────────────────────────── */
.bande-ia {
  border: 1px solid #C9DDF0; border-radius: var(--r); padding: 24px 22px;
  background:
    radial-gradient(640px 320px at 100% 0%, rgba(143,203,235,.22), transparent 70%),
    linear-gradient(180deg, #F6FBFE, #fff 65%);
}
.bande-ia h2 { font-size: 1.35rem; }
.bande-ia .suggestions { margin: 14px 0 14px; }
.bande-ia .demande { max-width: 560px; }
.bande-ia .resultats { margin-top: 18px; }
/* ── les deux publics ──────────────────────────────────────── */
.deux-publics { display: grid; gap: 14px; }
.public {
  border: 1px solid var(--trait); border-radius: var(--r); padding: 24px 22px;
  background: var(--carte); position: relative; overflow: hidden;
}
.public::after {
  content: ""; position: absolute; inset: auto -40px -40px auto;
  width: 160px; height: 160px; border-radius: 50%; opacity: .5;
}
.public.salarie::after { background: var(--bleu-clair); }
.public.commercant::after { background: var(--dore-fond); }
.public > * { position: relative; z-index: 1; }
.public h3 { font-size: 1.2rem; margin-bottom: 9px; }
.public p { font-size: .94rem; color: var(--encre-douce); line-height: 1.6; margin-bottom: 16px; }
@media (min-width: 880px) {
  /* minmax(0, …) : sinon la barre de recherche impose sa largeur minimale
     a la colonne de gauche et ecrase l'image. */
  .heros {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px; margin-top: 30px;
  }
  .heros > * { min-width: 0; }
  .heros-texte h1 { font-size: 2.8rem; }
  .heros-texte > p { font-size: 1.06rem; }
  .deux-publics { grid-template-columns: 1fr 1fr; }
  .bande-ia { padding: 32px 30px; }
}
/* ── les enseignes, à droite du héros ──────────────────────── */
.heros-enseignes {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px; padding: 18px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.enseignes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.enseigne {
  background: #fff; border-radius: 13px; aspect-ratio: 5 / 3;
  display: grid; place-items: center; padding: 10px;
  box-shadow: 0 2px 10px rgba(6,32,58,.18);
  transition: transform .16s, box-shadow .16s;
}
.enseigne:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(6,32,58,.28); }
.enseigne img { max-width: 100%; max-height: 100%; object-fit: contain; }
.enseigne span {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.1rem; color: var(--bleu);
}
.enseignes-pied {
  margin: 14px 0 0; text-align: center; font-size: .86rem; color: rgba(255,255,255,.82);
}
.enseignes-pied a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 560px) { .enseignes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 880px) { .enseignes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── le tableau de bord du partenaire ──────────────────────── */
.groupe-titre {
  font-family: "Public Sans", sans-serif; font-size: .73rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-douce);
  margin: 22px 0 10px;
}
.groupe-titre:first-of-type { margin-top: 4px; }
.mesures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mesure {
  display: grid; gap: 4px; text-align: left; cursor: pointer;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 15px 14px 13px; font: inherit; color: var(--encre);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.mesure:hover { border-color: var(--trait-fort); transform: translateY(-2px); box-shadow: var(--ombre-1); }
.mesure[aria-expanded="true"] {
  border-color: var(--cse-couleur, #0E3A5F); box-shadow: var(--ombre-1);
}
.mesure.vedette { background: linear-gradient(180deg, #F0FAF5, #fff 70%); border-color: #BEE3D2; }
.mesure-n {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: 1.85rem; line-height: 1; color: var(--marine);
  font-variant-numeric: tabular-nums;
}
.mesure.vedette .mesure-n { color: var(--vert-encre); }
.mesure-nom { font-size: .84rem; font-weight: 600; line-height: 1.3; }
.mesure-courbe {
  display: flex; align-items: flex-end; gap: 1px; height: 26px; margin-top: 4px;
}
.mesure-courbe i {
  flex: 1; min-width: 0; background: var(--trait); border-radius: 1px;
}
.mesure-courbe i.plein { background: var(--cse-accent, #8FCBEB); }
.mesure.vedette .mesure-courbe i.plein { background: var(--vert); }
.mesure-ecart { font-size: .74rem; font-weight: 600; color: var(--encre-douce); }
.mesure-ecart.monte { color: var(--vert); }
.mesure-ecart.descend { color: var(--rouge); }
/* ── le détail déplié ──────────────────────────────────────── */
.detail-mesure {
  margin-top: 14px; background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 18px 17px;
}
.detail-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.detail-tete h3 { font-size: 1.05rem; }
.detail-tete p { margin: 5px 0 0; }
.detail-n {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2rem;
  line-height: 1; color: var(--marine); font-variant-numeric: tabular-nums;
}
.detail-graphe {
  position: relative; height: 120px; margin: 16px 0 6px;
  border-bottom: 1px solid var(--trait);
}
.detail-graphe .barre {
  position: absolute; bottom: 0; background: var(--trait-fort); border-radius: 2px 2px 0 0;
}
.detail-graphe .barre.plein { background: var(--cse-couleur, #0E3A5F); }
.detail-axe {
  display: flex; justify-content: space-between; font-size: .72rem; color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}
.detail-faits { margin: 12px 0 0; }
@media (min-width: 620px) { .mesures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .mesures { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* ── le héros : 70 / 30 ────────────────────────────────────── */
@media (min-width: 880px) {
  .heros { grid-template-columns: minmax(0, 70fr) minmax(0, 30fr); gap: 34px; }
}
.heros-enseignes { align-self: center; }
.enseignes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.enseigne { aspect-ratio: 16 / 9; padding: 9px; border-radius: 11px; }
@media (min-width: 560px) and (max-width: 879px) { .enseignes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* Une piste en `fr` ne descend pas sous la largeur minimale de son contenu :
   une image large fait alors déborder la grille. On l'autorise à rétrécir. */
.enseigne, .cat, .tuile, .mesure, .pas, .public, .billet, .carte-lieu { min-width: 0; }
.enseigne img, .cat img, .mesure img { max-width: 100%; height: auto; }

/* ══ l'espace comité ═══════════════════════════════════════════
   Un espace de travail, pas une vitrine : des lignes denses, des
   formulaires lisibles, et rien qui bouge sous la souris. */
.admin-nav {
  display: flex; gap: 4px; overflow-x: auto; margin: 18px 0 4px;
  padding: 4px; background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: var(--ombre-1);
  scrollbar-width: none;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a {
  padding: 9px 15px; border-radius: var(--r-petit); font-size: .88rem;
  font-weight: 600; color: var(--encre-douce); white-space: nowrap;
}
.admin-nav a:hover { background: var(--fond); color: var(--encre); }
.admin-nav a.ici { background: var(--cse-couleur, #0E3A5F); color: #fff; }

.fil-admin { font-size: .85rem; color: var(--encre-douce); margin: 14px 0 0; }
.bandeau-ok, .bandeau-alerte {
  margin: 16px 0 0; padding: 12px 15px; border-radius: var(--r-petit);
  font-size: .88rem; line-height: 1.5;
}
.bandeau-ok { background: var(--vert-fond); color: var(--vert-encre); font-weight: 600; }
.bandeau-alerte { background: var(--dore-fond); color: #7A5410; }

.chiffre {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.chiffre-ligne { font-variant-numeric: tabular-nums; font-weight: 700; }
.ligne .cle.auto { width: auto; }
.ligne.a-faire { align-items: center; justify-content: space-between; }

.admin-chercher { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-chercher input {
  flex: 1 1 220px; min-width: 0; padding: 10px 13px; font: inherit;
  border: 1px solid var(--trait); border-radius: var(--r-petit); background: var(--carte);
}

/* ── la liste en lignes ──────────────────────────────────────── */
.tableau-admin {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: var(--ombre-1); overflow: hidden;
}
.rang-admin {
  display: flex; align-items: center; gap: 13px; padding: 12px 15px;
  border-bottom: 1px solid var(--trait); flex-wrap: wrap;
}
.tableau-admin > :last-child { border-bottom: 0; }
.rang-admin.eteint { opacity: .55; }
.rang-vignette {
  width: 44px; height: 44px; flex: none; border-radius: 10px;
  background: var(--bleu-clair); color: var(--marine);
  display: grid; place-items: center; font-weight: 700; font-size: .82rem;
  overflow: hidden;
}
.rang-vignette img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.rang-vignette.plat { background: var(--fond); }
.rang-corps { flex: 1 1 220px; min-width: 0; display: block; }
.rang-nom { font-weight: 600; font-size: .96rem; color: var(--encre); display: block; }
.rang-nom:hover { color: var(--bleu); }
.rang-sous { font-size: .8rem; color: var(--encre-douce); display: block; }
.rang-manque { font-size: .76rem; color: #7A5410; display: block; margin-top: 2px; }
.rang-etats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; }
.rang-actions { display: flex; gap: 7px; align-items: center; flex: none; flex-wrap: wrap; }
.rang-actions .bouton, .rang-suite .bouton { padding: 7px 12px; font-size: .82rem; }
.rang-actions form, .rang-suite { margin: 0; }
.rang-suite { padding: 0 15px 12px; border-bottom: 1px solid var(--trait); }
.ligne-cat { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ligne-cat input, .ligne-cat select {
  padding: 8px 11px; font: inherit; font-size: .9rem; background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--r-petit); min-width: 0;
}
.ligne-cat input[name="nom"] { flex: 1 1 160px; }
.ligne-cat .court { width: 74px; flex: none; }

/* ── les formulaires ─────────────────────────────────────────── */
.ch { margin: 0 0 15px; display: block; }
.ch > label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--encre-douce); margin-bottom: 5px;
}
.ch input, .ch select, .ch textarea {
  width: 100%; padding: 10px 13px; font: inherit; font-size: .95rem;
  color: var(--encre); background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
}
.ch textarea { resize: vertical; line-height: 1.5; }
.ch input:focus, .ch select:focus, .ch textarea:focus {
  border-color: var(--cse-couleur, #0E3A5F); outline: none;
  box-shadow: 0 0 0 3px var(--bleu-clair);
}
.ch-aide { display: block; font-size: .78rem; color: var(--encre-douce); margin-top: 4px; line-height: 1.45; }
.ch-deux, .ch-trois { display: grid; gap: 0 16px; }
@media (min-width: 720px) {
  .ch-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ch-coche { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 11px; font-size: .9rem; cursor: pointer; }
.ch-coche input { margin: 3px 0 0; flex: none; width: 17px; height: 17px; accent-color: var(--cse-couleur, #0E3A5F); }
.ch-coche .ch-aide { margin-top: 1px; }
.ch-coches { display: flex; gap: 6px 22px; flex-wrap: wrap; margin-bottom: 4px; }
.ch-coches .ch-coche { margin-bottom: 0; }
.ch-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.ch-geo { font-size: .86rem; color: var(--encre-douce); margin: 0; }
.ch-geo .ch-coche { margin: 7px 0 0; }

.grille-horaires { display: grid; gap: 8px; }
.jour-horaire {
  display: grid; gap: 7px; align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (min-width: 640px) { .jour-horaire { grid-template-columns: 110px repeat(4, minmax(0, 1fr)); } }
.jour-nom { font-size: .85rem; font-weight: 600; color: var(--encre-douce); grid-column: 1 / -1; }
@media (min-width: 640px) { .jour-nom { grid-column: auto; } }
.jour-horaire input {
  padding: 8px 10px; font: inherit; font-size: .88rem; min-width: 0;
  border: 1px solid var(--trait); border-radius: var(--r-petit); background: var(--carte);
}

.barre-enregistrer {
  position: sticky; bottom: calc(var(--barre) + 8px); z-index: 20;
  display: flex; gap: 10px; padding: 12px 15px; margin: 18px 0 26px;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: var(--ombre-2);
}

.offre-admin { margin-bottom: 14px; }
.offre-admin.eteint { opacity: .6; }
.offre-admin-tete {
  display: flex; gap: 11px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 13px; padding-bottom: 11px;
  border-bottom: 1px solid var(--trait);
}
.offre-admin-tete > div { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.offre-admin-tete form { margin: 0; }
.offre-admin-tete .bouton { padding: 6px 11px; font-size: .8rem; }

.modele-message {
  white-space: pre-wrap; font: inherit; font-size: .86rem; line-height: 1.6;
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: var(--r-petit); padding: 15px 16px; margin: 0 0 14px;
  color: var(--encre-douce); overflow-x: auto;
}

/* ══ le fil des nouveautes ═════════════════════════════════════
   Quatre choses différentes — une annonce, un partenaire, un
   avantage, une fin d'offre — dans une seule colonne. C'est la
   marque de gauche qui les distingue, pas quatre mises en page. */
.pastille-n {
  position: absolute; top: 4px; left: 50%; margin-left: 5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--rouge); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 17px;
  text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--carte);
}
.barre-bas a { position: relative; }

.fil-neuf { display: grid; gap: 11px; }
.neuf {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 15px 16px; box-shadow: var(--ombre-1);
}
.neuf-marque {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--bleu-clair); color: var(--marine);
}
.neuf-partenaire .neuf-marque { background: var(--vert-fond); color: var(--vert-encre); }
.neuf-offre .neuf-marque { background: var(--dore-fond); color: #7A5410; }
.neuf-fin .neuf-marque { background: #FBE9E7; color: var(--rouge); }
.neuf-corps { min-width: 0; flex: 1; }
.neuf-quand {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--encre-douce); margin-bottom: 4px;
}
.neuf h3 { font-size: 1.02rem; margin-bottom: 4px; }
.neuf h3 a { color: var(--encre); }
.neuf h3 a:hover { color: var(--bleu); }
.neuf p { font-size: .89rem; color: var(--encre-douce); margin: 0; }
.volet[aria-busy="true"] { min-height: 120px; }

/* ── les gestes secondaires de la fiche ────────────────────── */
/* Ils partageaient la grille des actions principales et pesaient autant
   qu'« Appeler ». Des pastilles suffisent : on les trouve quand on les
   cherche, sans qu'elles disputent la vedette au coupon. */
.cv-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cv-mini a, .cv-mini button {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--trait); border-radius: 12px;
  background: var(--carte); color: var(--encre-douce);
  cursor: pointer; padding: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.cv-mini a:hover, .cv-mini button:hover {
  border-color: var(--bleu); color: var(--bleu); background: var(--bleu-clair);
}
.cv-mini a:active, .cv-mini button:active { transform: translateY(1px); }
.cv-mini .ico { color: inherit; }
.cv-mini button[aria-pressed="true"] {
  color: var(--dore); border-color: var(--dore); background: var(--dore-fond);
}

/* ── la photo des deux encarts de l'accueil ────────────────── */
.public { display: flex; flex-direction: column; padding-top: 0; }
.public-photo {
  margin: 0 -22px 18px; aspect-ratio: 16 / 7; overflow: hidden;
  background: var(--bleu-clair);
}
.public-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.public.salarie .public-photo img { object-position: center 28%; }
.public.commercant .public-photo img { object-position: center 32%; }
.public .fenetre-boutons { margin-top: auto; }

/* ── le mot du comité ──────────────────────────────────────── */
.edito {
  display: grid; gap: 0; border: 1px solid var(--trait);
  border-radius: var(--r); overflow: hidden; background: var(--carte);
  box-shadow: var(--ombre-1);
}
.edito-photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bleu-clair); }
.edito-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edito-texte { padding: 26px 24px 28px; }
.edito-sur {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bleu); font-weight: 700; margin-bottom: 6px;
}
.edito-texte h2 { font-size: 1.35rem; margin-bottom: 12px; }
.edito-corps {
  font-size: 1rem; line-height: 1.72; color: var(--encre-douce);
  border-left: 3px solid var(--ciel); padding-left: 16px;
}
.edito-signe {
  margin-top: 18px; font-weight: 700; color: var(--encre); font-size: .95rem;
}
.edito-mention {
  margin-top: 6px; font-size: .84rem; color: var(--encre-douce);
}
@media (min-width: 880px) {
  .edito { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .edito-photo { aspect-ratio: auto; height: 100%; }
  .edito-texte { padding: 34px 34px 36px; }
  .edito-texte h2 { font-size: 1.6rem; }
}

/* ── proxiboost.com : la case du code sur la page d'accueil ──── */
.porte-code {
  margin-top: 22px; max-width: 540px; background: #fff; color: var(--encre);
  padding: 14px; border-radius: 18px; box-shadow: var(--ombre-3);
}
.porte-code label { display: block; font-size: .8rem; font-weight: 600; color: var(--encre-douce); margin: 0 0 8px 2px; }
.porte-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.porte-ligne input {
  flex: 1 1 200px; min-width: 0; font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 14px; border: 2px solid var(--trait); border-radius: 12px;
}
.porte-ligne input:focus { border-color: var(--bleu); outline: none; }
.porte-ligne .bouton { flex: 1 1 auto; justify-content: center; padding: 12px 18px; }