/* ============================================================
   DumuniGo — styles des BLOCS DE CONTENU (hérités du thème 1.x)
   Utilisés par les pages rédigées dans WordPress (FAQ, Rejoindre,
   Comment ça marche…), le chatbot, le bandeau de consentement et les
   illustrations. La mise en page du site (en-tête, accueil, couvertures,
   pied de page) est dans style.css, chargé après ce fichier.
   ============================================================ */
/* ============================================================
   2. Boutons (mêmes CTA « vapeur » que l'app)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.02rem; padding: 15px 30px; border-radius: 999px;
  border: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
}
.btn-primaire {
  color: #fff; background: linear-gradient(135deg, var(--flamme), var(--braise) 65%, var(--braise-dark));
  box-shadow: 0 14px 30px rgba(214, 58, 14, .32);
}
.btn-primaire:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 40px rgba(214, 58, 14, .40); }
.btn-wa { color: #fff; background: var(--wa); box-shadow: 0 14px 28px rgba(37, 211, 102, .30); }
.btn-wa:hover { transform: translateY(-3px); }
.btn-clair {
  color: var(--braise); background: #fff; border: 2px solid var(--sable);
}
.btn-clair:hover { transform: translateY(-3px); border-color: var(--braise); }


/* ============================================================
   5. Cartes 3D génériques (soulèvement au survol) — étapes, restos
   ============================================================ */
.grille { display: grid; gap: 22px; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }

/* Cartes ORGANIQUES : coins asymétriques (le rectangle strict, c'est fini) */
.carte {
  background: #fff; border: 1px solid var(--sable);
  border-radius: 34px 12px 34px 12px;
  padding: 24px; box-shadow: var(--ombre-carte);
  transition: transform .25s ease, box-shadow .25s ease, border-radius .35s ease;
  transform-style: preserve-3d;
}
.carte:hover { border-radius: 12px 34px 12px 34px; } /* la forme « respire » au survol */
.grille > .carte:nth-child(even) { border-radius: 12px 34px 12px 34px; }
.grille > .carte:nth-child(even):hover { border-radius: 34px 12px 34px 12px; }
.carte:hover { transform: translateY(-8px) rotateX(3deg); box-shadow: 0 26px 50px rgba(43, 21, 8, .16); }
.carte .ico {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px;
  background: linear-gradient(135deg, var(--flamme), var(--braise)); color: #fff; font-size: 1.6rem;
  margin-bottom: 16px; box-shadow: 0 10px 22px rgba(214, 58, 14, .28);
}
.carte h3 { font-size: 1.25rem; }
.carte p { color: var(--cacao-doux); font-weight: 500; margin: 0; }

/* Vitrine restaurants / plats */
.plat-carte { padding: 0; overflow: hidden; }
.plat-carte img { width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.plat-carte .corps { padding: 16px 18px; }
.plat-carte h3 { font-size: 1.05rem; margin-bottom: 4px; }
.plat-carte .prix { display: inline-block; margin-top: 8px; font-weight: 800; color: var(--braise-dark);
  background: var(--creme-deep); padding: 4px 12px; border-radius: 999px; font-size: .9rem; }


/* ============================================================
   7. Vidéos démo
   ============================================================ */
.grille-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.video-carte { background: #000; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-carte); }
.video-carte video, .video-carte iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; }
.video-carte .legende { background: #fff; padding: 14px 18px; font-weight: 700; }


/* ============================================================
   8. FAQ (accordéon natif <details>)
   ============================================================ */
.faq-item {
  background: #fff; border: 1px solid var(--sable); border-radius: 18px; padding: 4px 22px; margin-bottom: 12px;
}
.faq-item summary {
  cursor: pointer; font-weight: 800; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '＋'; color: var(--braise); font-size: 1.4rem; }
.faq-item[open] summary::after { content: '－'; }
.faq-item p { color: var(--cacao-doux); font-weight: 500; padding-bottom: 16px; margin: 0; }


/* ============================================================
   10. Contenu d'article/page classique (éditeur WordPress)
   ============================================================ */
.contenu-page { max-width: 760px; margin: 0 auto; padding: 56px 20px; }
.contenu-page h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 24px; }
.contenu-page h2 { font-size: 1.6rem; margin-top: 40px; }
.contenu-page p, .contenu-page li { font-size: 1.08rem; }
.contenu-page img { border-radius: 18px; box-shadow: var(--ombre-carte); }


/* ============================================================
   14. Étiquettes de catégorie sur les plats
   ============================================================ */
.plat-carte { position: relative; }
.tag-cat {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--braise-dark);
  font-weight: 800; font-size: .74rem; padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}


/* ============================================================
   15. Zones desservies (puces)
   ============================================================ */
.zones-liste { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.zone-puce {
  background: #fff; border: 1px solid var(--sable); border-radius: 999px;
  padding: 9px 18px; font-weight: 700; color: var(--cacao); box-shadow: var(--ombre-carte);
  transition: transform .18s ease;
}
.zone-puce:hover { transform: translateY(-3px); border-color: var(--braise); color: var(--braise); }
.zone-puce b { color: var(--braise); }


/* ============================================================
   22. Bandeau confidentialité (1re visite)
   ============================================================ */
.consentement {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 720px; margin: 0 auto;
  background: #fff; border: 1px solid var(--sable); border-radius: 20px; padding: 18px 22px;
  box-shadow: 0 20px 50px rgba(43,21,8,.22); display: none;
}
.consentement.visible { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.consentement p { margin: 0; flex: 1 1 320px; font-weight: 600; font-size: .94rem; color: var(--cacao); }
.consentement p a { text-decoration: underline; }
.consentement .actions { display: flex; gap: 10px; }


/* ============================================================
   23. Chatbot (widget WhatsApp + réponses rapides)
   ============================================================ */
.chatbot-bulle {
  position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 60px; height: 60px; border-radius: 50%;
  background: var(--wa); color: #fff; border: none; cursor: pointer; font-size: 1.7rem;
  box-shadow: 0 14px 30px rgba(37,211,102,.45); transition: transform .2s;
  display: grid; place-items: center;
}
.chatbot-bulle:hover { transform: scale(1.08); }
.chatbot-fenetre {
  position: fixed; right: 18px; bottom: 88px; z-index: 81; width: min(340px, calc(100vw - 36px));
  background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(43,21,8,.28); overflow: hidden;
  display: none; flex-direction: column; border: 1px solid var(--sable);
}
.chatbot-fenetre.ouvert { display: flex; animation: monte .25s ease; }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.chatbot-tete { background: linear-gradient(135deg, var(--braise), var(--braise-dark)); color: #fff; padding: 16px 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.chatbot-tete img { height: 30px; background: #fff; border-radius: 8px; padding: 3px; }
.chatbot-corps { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.chatbot-msg { background: var(--creme-deep); padding: 11px 14px; border-radius: 14px; font-size: .92rem; font-weight: 600; }
.chatbot-q {
  text-align: left; background: #fff; border: 1px solid var(--sable); border-radius: 12px; padding: 10px 14px;
  font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--braise); transition: background .15s;
}
.chatbot-q:hover { background: var(--creme-deep); }
.chatbot-pied { padding: 14px 16px; border-top: 1px solid var(--sable); }
.chatbot-wa { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--wa); color: #fff; padding: 12px; border-radius: 12px; font-weight: 800; width: 100%; }
@media (max-width: 900px) { .chatbot-bulle { bottom: 84px; } .chatbot-fenetre { bottom: 150px; } }


/* ============================================================
   24. ICÔNES VECTORIELLES (remplacent les emoji)
   ============================================================ */
.ico-svg { display: block; }
.ico-vect {
  width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--creme-deep); border-radius: 26px 8px 26px 8px;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), border-radius .4s ease, background .3s;
}
.carte:hover .ico-vect { border-radius: 8px 26px 8px 26px; background: var(--creme); transform: rotate(-6deg) scale(1.08); }
.reassurance .rond-ico { width: 58px; height: 58px; background: var(--creme-deep); border-radius: 20px 6px 20px 6px; }
.reassurance .item:hover .rond-ico { background: var(--creme); }


/* ============================================================
   25. FORMES ORGANIQUES — vagues entre sections, blobs
   ============================================================ */
.vague { display: block; width: 100%; height: auto; line-height: 0; margin: 0; }
.vague svg { display: block; width: 100%; height: clamp(40px, 5vw, 72px); }
.sect-creme { background: var(--creme); }
.sect-creme-deep { background: var(--creme-deep); }
.sect-cacao { background: var(--cacao); color: #fff; }

/* Taches organiques décoratives en fond de section */
.blob { position: absolute; border-radius: 46% 54% 38% 62% / 55% 40% 60% 45%; filter: blur(2px); opacity: .35; pointer-events: none; z-index: 0; }
.blob-1 { width: 240px; height: 240px; background: radial-gradient(circle at 35% 35%, var(--safran), transparent 72%); top: -60px; left: -70px; }
.blob-2 { width: 300px; height: 300px; background: radial-gradient(circle at 60% 40%, var(--flamme), transparent 72%); bottom: -90px; right: -80px; opacity: .22; }
.section > .enveloppe { position: relative; z-index: 1; }

/* Photos en forme organique (« ticket » comme dans l'app) */
.photo-organique { border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; overflow: hidden; box-shadow: var(--ombre-chaude); }
.photo-organique img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-ticket { border-radius: 34px 10px 34px 10px; overflow: hidden; box-shadow: var(--ombre-carte); }
.photo-ticket img { display: block; width: 100%; object-fit: cover; }

/* Bloc image + texte alterné (pages internes : plus jamais 100 % texte) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin: 34px 0; }
.duo.inverse .duo-media { order: 2; }
.duo-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 780px) { .duo { grid-template-columns: 1fr; } .duo.inverse .duo-media { order: 0; } }

/* Encadré d'appel à l'action réutilisable */
.encart-cta {
  background: linear-gradient(135deg, var(--creme-deep), #fff);
  border: 2px dashed var(--braise); border-radius: 30px 10px 30px 10px;
  padding: 24px 26px; margin: 30px 0; text-align: center;
}
.encart-cta h3 { margin-bottom: 6px; }
.encart-cta p { color: var(--cacao-doux); font-weight: 600; margin: 0 0 14px; }

/* Emplacement de capture d'écran à fournir (guide d'upload) */
/* Captures réelles de l'application, dans un cadre téléphone ou ordinateur.
   (L'ancien .emplacement-capture — encadré pointillé « CAPTURE À AJOUTER » —
   a disparu : toutes les captures sont désormais en place.) */
.capture-app { margin: 22px 0 28px; }
.capture-app .capture-cadres { display: flex; gap: 18px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.capture-app img { display: block; max-width: 100%; height: auto; }
.capture-app figcaption {
  margin-top: 12px; text-align: center; font-weight: 600; font-size: .92rem;
  color: var(--cacao-doux);
}
/* Téléphone : cadre sombre arrondi */
.capture-tel img {
  width: 232px; border-radius: 22px; background: var(--creme);
  border: 9px solid #1c0e05; box-shadow: 0 18px 40px rgba(43,21,8,.22);
}
/* Ordinateur : cadre large avec un liseré discret */
.capture-pc img {
  width: 100%; max-width: 720px; border-radius: 12px;
  border: 8px solid #1c0e05; box-shadow: 0 18px 40px rgba(43,21,8,.22);
}
@media (max-width: 560px) {
  .capture-tel img { width: 180px; border-width: 7px; }
  .duo-capture .capture-cadres { gap: 10px; }
}


/* ============================================================
   27. CHATBOT refondu — forme organique, couleurs Braise, saisie libre
   ============================================================ */
.chatbot-bulle {
  position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 62px; height: 62px;
  border-radius: 50% 50% 12px 50%;                      /* forme « bulle de parole » */
  background: linear-gradient(135deg, var(--flamme), var(--braise) 70%, var(--braise-dark));
  color: #fff; border: none; cursor: pointer;
  box-shadow: 0 14px 32px rgba(214,58,14,.45); transition: transform .22s, border-radius .3s;
  display: grid; place-items: center;
}
.chatbot-bulle:hover { transform: scale(1.09) rotate(-6deg); border-radius: 50% 12px 50% 50%; }
.chatbot-bulle svg { width: 30px; height: 30px; }

.chatbot-fenetre {
  position: fixed; right: 18px; bottom: 92px; z-index: 81; width: min(350px, calc(100vw - 36px));
  background: var(--creme); border-radius: 30px 30px 10px 30px; overflow: hidden;
  box-shadow: 0 26px 64px rgba(43,21,8,.30); border: 1px solid var(--sable);
  display: none; flex-direction: column;
}
.chatbot-fenetre.ouvert { display: flex; animation: monte .25s ease; }
@keyframes monte { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.chatbot-tete {
  background: linear-gradient(135deg, var(--braise), var(--braise-dark)); color: #fff;
  padding: 15px 18px; font-weight: 800; display: flex; align-items: center; gap: 11px;
}
.chatbot-tete img { height: 34px; background: #fff; border-radius: 12px 4px 12px 4px; padding: 3px; }
.chatbot-corps { padding: 15px; display: flex; flex-direction: column; gap: 9px; height: 290px; overflow-y: auto; background: var(--creme); }
.chatbot-msg {
  background: #fff; border: 1px solid var(--sable); padding: 11px 14px;
  border-radius: 18px 18px 18px 5px; font-size: .91rem; font-weight: 600; max-width: 88%;
}
.chatbot-msg.moi {
  align-self: flex-end; background: linear-gradient(135deg, var(--flamme), var(--braise));
  color: #fff; border: none; border-radius: 18px 18px 5px 18px;
}
.chatbot-q {
  text-align: left; background: #fff; border: 1.5px solid var(--braise); border-radius: 999px;
  padding: 9px 15px; font-weight: 700; font-size: .86rem; cursor: pointer; color: var(--braise);
  transition: background .15s, transform .15s;
}
.chatbot-q:hover { background: var(--braise); color: #fff; transform: translateX(3px); }
.chatbot-saisie { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--sable); background: #fff; }
.chatbot-saisie input {
  flex: 1; border: 1.5px solid var(--sable); border-radius: 999px; padding: 11px 16px;
  font-family: inherit; font-size: .9rem; font-weight: 600; outline: none;
}
.chatbot-saisie input:focus { border-color: var(--braise); }
.chatbot-saisie button {
  background: var(--braise); color: #fff; border: none; border-radius: 50%; width: 42px; height: 42px;
  cursor: pointer; font-size: 1.1rem; flex-shrink: 0; transition: transform .15s;
}
.chatbot-saisie button:hover { transform: scale(1.1); }
.chatbot-pied { padding: 0 12px 12px; background: #fff; }
.chatbot-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--wa);
  color: #fff; padding: 11px; border-radius: 999px; font-weight: 800; width: 100%; font-size: .9rem;
}
.chatbot-wa svg { width: 20px; height: 20px; color: #fff; }
@media (max-width: 900px) { .chatbot-bulle { bottom: 84px; } .chatbot-fenetre { bottom: 156px; } }

/* Icône WhatsApp partout : glyphe officiel, teinté selon le fond */
.ico-wa { width: 22px; height: 22px; vertical-align: -5px; }
.reseaux a svg { width: 20px; height: 20px; color: #fff; }


/* ============================================================
   28. Contenu des pages : chapô, listes, images
   ============================================================ */
/* Colonne de contenu élargie (820 -> 1040px) : moins de marges perdues sur PC,
   tout en gardant une longueur de ligne confortable à lire. */
.contenu-page { max-width: 1040px; padding: 40px clamp(16px, 2.5vw, 40px) 56px; }
.chapo {
  font-size: 1.15rem; font-weight: 600; color: var(--cacao-doux);
  border-left: 4px solid var(--braise); padding-left: 18px; margin-bottom: 30px;
}
.contenu-page h2 {
  font-size: 1.7rem; margin-top: 38px; display: flex; align-items: center; gap: 12px;
}
.contenu-page h2::before {
  content: ''; width: 10px; height: 26px; border-radius: 6px 2px 6px 2px;
  background: linear-gradient(180deg, var(--flamme), var(--braise)); flex-shrink: 0;
}
.contenu-page ol { counter-reset: etape; list-style: none; padding-left: 0; }
.contenu-page ol > li {
  counter-increment: etape; position: relative; padding-left: 46px; margin-bottom: 12px; font-weight: 600;
}
.contenu-page ol > li::before {
  content: counter(etape); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--flamme), var(--braise)); color: #fff;
  border-radius: 12px 4px 12px 4px; font-weight: 800; font-size: .95rem;
}
.contenu-page ul > li { margin-bottom: 8px; }
.contenu-page .duo h2 { margin-top: 0; }
.contenu-page .btn { margin-top: 8px; margin-right: 8px; }


/* ============================================================
   29. ILLUSTRATIONS vectorielles (grandes scènes)
   ============================================================ */
.illu { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.illu-petite { max-width: 260px; }
.bloc-illu {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center;
  background: var(--creme-deep); border-radius: 40px 12px 40px 12px;
  padding: 26px 30px; margin: 26px 0;
}
.bloc-illu.inverse > *:first-child { order: 2; }
.bloc-illu h3 { margin-bottom: 8px; }
.bloc-illu p { color: var(--cacao-doux); font-weight: 600; margin: 0 0 12px; }
@media (max-width: 780px) { .bloc-illu { grid-template-columns: 1fr; text-align: center; } .bloc-illu.inverse > *:first-child { order: 0; } }

/* Trio d'illustrations */
.trio-illu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 26px 0; }
.trio-illu .carte { text-align: center; padding: 20px; }
.trio-illu .illu { max-width: 200px; margin-bottom: 10px; }
@media (max-width: 780px) { .trio-illu { grid-template-columns: 1fr; } }


/* ===== Parcours de commande illustré (captures de l'application) ===== */
.parcours { list-style: none; margin-top: 34px; margin-bottom: 0; display: grid; gap: 22px;
  grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.parcours-etape { display: flex; flex-direction: column; gap: 14px; }
.parcours-etape--double .parcours-duo { display: grid; gap: 10px; }
.parcours-tel { margin: 0; border-radius: 26px; overflow: hidden; background: #fff;
  border: 6px solid var(--cacao); box-shadow: 0 18px 40px rgba(43, 21, 8, .18); }
.parcours-tel img { display: block; width: 100%; height: auto; }
.parcours-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--braise); color: #fff; font-weight: 800; margin-bottom: 6px; }
.parcours-etape h3 { margin: 0 0 4px; font-size: 1.05rem; }
.parcours-etape p { margin: 0; color: var(--cacao-doux); font-weight: 600; font-size: .92rem; line-height: 1.45; }
.bande-resto { background: linear-gradient(180deg, var(--creme), var(--creme-deep)); }
@media (max-width: 1100px) { .parcours { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .parcours { grid-template-columns: 1fr; gap: 30px; }
  .parcours-etape { flex-direction: row; align-items: center; }
  .parcours-etape .parcours-tel, .parcours-etape .parcours-duo { flex: 0 0 44%; }
}

/* ---------- Pied de page à 5 colonnes (zones de livraison) ---------- */
.pied-grille-5 { grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1.2fr; }
@media (max-width: 1000px) { .pied-grille-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied-grille-5 { grid-template-columns: 1fr; } }

/* ---------- Assistant : lien sous une réponse ---------- */
.chatbot-lien { display: inline-block; margin-top: 6px; font-weight: 800; color: var(--braise); text-decoration: underline; }

/* ---------- Pages de référencement (guide, communes, comparatif) ---------- */
.seo-maj { font-size: .9rem; font-weight: 700; color: var(--cacao-doux); margin: 0 0 6px; }
.sommaire { background: #fff; border: 1px solid var(--sable, #F3D9BE); border-radius: 22px; padding: 18px 22px; margin: 22px 0 8px; }
.sommaire-titre { font-weight: 800; margin: 0 0 6px; }
.sommaire ol { margin: 0; padding-left: 1.3em; }
.sommaire li { margin: 4px 0; }
.sommaire a, .seo-page p a, .seo-page li a { color: var(--braise); font-weight: 700; }
.seo-etapes li { margin: 8px 0; }
.seo-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.seo-zones a { display: block; background: #fff; border: 1px solid var(--sable, #F3D9BE); border-radius: 18px; padding: 14px 16px;
  color: var(--cacao); text-decoration: none; transition: transform .2s, border-color .2s; }
.seo-zones a:hover { transform: translateY(-2px); border-color: var(--braise); }
.seo-zones strong { display: block; color: var(--braise); }
.seo-zones span { display: block; font-size: .9rem; font-weight: 600; color: var(--cacao-doux); margin-top: 2px; }
.seo-zones-mini { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.seo-quartiers { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.seo-quartiers li { background: #fff; border: 1px solid var(--sable, #F3D9BE); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .98rem; }
.seo-table-boite { overflow-x: auto; margin: 14px 0; }
.seo-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; }
.seo-table th, .seo-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--sable, #F3D9BE); vertical-align: top; }
.seo-table thead th { background: var(--cacao); color: #fff; font-weight: 800; }
.seo-table tbody th { font-weight: 800; }
.seo-restos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; padding-left: 1.1em; }
.seo-restos span { display: block; font-size: .88rem; color: var(--cacao-doux); font-weight: 600; }
.seo-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }