/* ============================================================
   OU MANGER — FAQ d'archive « Vos questions, nos réponses » (inc/faq.php)
   Bento de cartes (ordinateur), 2 colonnes (tablette), carrousel (mobile).
   Couleurs : variables globales du site, redéfinies en mode sombre.
   ============================================================ */

.om-faq {
    --faq-teal: #0E7D7D;          /* teal assombri : texte blanc lisible (AA) */
    --faq-teal-texte: #0B6E6E;
    --faq-corail: var(--Rouge, #D25E48);
    --faq-encre: var(--encre, #1F2328);
    --faq-doux: var(--texte-doux, #3A4650);
    --faq-ardoise: var(--ardoise, #5B6B76);
    --faq-surface: var(--om-surface, #fff);
    --faq-creme: var(--creme, #F2EEE6);
    --faq-beige: var(--Beige, #E3D8C5);
    --faq-teal-clair: var(--teal-clair, #DDEEEC);
    --faq-nuit: #1F2328;
    --faq-ombre: 0 6px 0 rgba(84, 106, 121, .10), 0 10px 24px rgba(84, 106, 121, .10);
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    font-family: var(--dm-sans, "DM Sans"), system-ui, sans-serif;
    color: var(--faq-encre);
}
.om-faq *, .om-faq *::before, .om-faq *::after { box-sizing: border-box; }
:where(.om-faq) :where(p, h2, h3, ol, ul, li) { margin: 0; padding: 0; }
:where(.om-faq) :where(ol, ul) { list-style: none; }

/* ---------- En-tête ---------- */
.om-faq-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.om-faq-titres { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.om-faq-surtitre { font-size: clamp(.75rem, .73rem + .1vw, .8125rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faq-corail); }
.om-faq-titre {
    font-family: var(--Bogart, "bogart"), Georgia, serif;
    font-weight: 900;
    font-size: clamp(2rem, 1.54rem + 1.9vw, 3.25rem);
    line-height: 1.04;
    color: var(--Bleu, #108A8A);
}
.om-faq-titre span { color: var(--faq-corail); }
.om-faq-chapo { font-size: clamp(1.0625rem, .99rem + .29vw, 1.25rem); line-height: 1.5; color: var(--faq-doux); }
.om-faq-sticker {
    flex: none;
    display: grid; place-items: center;
    width: 92px; height: 92px;
    border-radius: 50%;
    background: var(--faq-corail);
    border: 5px solid #fff;
    box-shadow: var(--faq-ombre);
    color: #fff;
    font: 900 3.5rem/1 var(--Bogart, "bogart"), Georgia, serif;
    transform: rotate(10deg);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.om-faq:hover .om-faq-sticker { transform: rotate(-6deg) scale(1.04); }

/* ---------- Grille (ordinateur : 12 colonnes) ---------- */
.om-faq-grille {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    outline: none;
}
.om-faq-grille:focus-visible { outline: 3px solid var(--Bleu, #108A8A); outline-offset: 6px; border-radius: 28px; }
.om-faq-carte { grid-column: span 4; }
.om-faq--budget { grid-column: span 6; }
.om-faq--dimanche, .om-faq--lundi { grid-column: span 3; }
.om-faq-sans-budget .om-faq--dimanche, .om-faq-sans-budget .om-faq--lundi { grid-column: span 6; }
.om-faq-bas-2 :is(.om-faq--meilleurs, .om-faq--tard, .om-faq--types) { grid-column: span 6; }
.om-faq-bas-1 :is(.om-faq--meilleurs, .om-faq--tard, .om-faq--types) { grid-column: span 12; }

/* ---------- Carte ---------- */
.om-faq-carte {
    --c-bg: var(--faq-surface);
    --c-texte: var(--faq-encre);
    --c-doux: var(--faq-doux);
    --c-accent: var(--faq-corail);
    --c-lien: var(--faq-teal-texte);
    --c-bulle: var(--faq-creme);
    --c-bulle-texte: var(--faq-encre);
    --c-pastille: var(--faq-creme);
    position: relative; /* contient les textes masqués (.om-sr) dans le carrousel */
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
    min-height: 340px;
    padding: 32px 34px;
    border-radius: 28px;
    background: var(--c-bg);
    color: var(--c-texte);
    transition: transform .25s ease, box-shadow .25s ease;
}
.om-faq-carte:hover { transform: translateY(-3px); }
.om-faq--dimanche, .om-faq--meilleurs { box-shadow: var(--faq-ombre); }
.om-faq--budget   { --c-bg: var(--faq-teal); --c-texte: #fff; --c-doux: rgba(255,255,255,.88); --c-accent: #fff; --c-lien: #fff; --c-bulle: #fff; }
.om-faq--lundi    { --c-bg: var(--faq-beige); --c-accent: var(--faq-teal-texte); --c-pastille: var(--faq-surface); --c-bulle: var(--faq-surface); }
.om-faq--tard     { --c-bg: var(--faq-nuit); --c-texte: #fff; --c-doux: rgba(255,255,255,.82); --c-accent: #F08A73; --c-lien: #F08A73; --c-bulle: #fff; }
.om-faq--types    { --c-bg: var(--faq-teal-clair); --c-accent: var(--faq-teal-texte); --c-bulle: var(--faq-surface); }

.om-faq-haut { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }

/* Bulle de question (h3) */
.om-faq-q {
    display: inline-flex; align-items: center; gap: 10px;
    max-width: 100%;
    padding: 7px 18px 7px 7px;
    border-radius: 22px 22px 22px 6px;
    background: var(--c-bulle);
    color: var(--c-bulle-texte);
    font-family: var(--dm-sans, "DM Sans"), system-ui, sans-serif;
    font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}
.om-faq-qi {
    flex: none;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--faq-corail);
    color: #fff;
    font: 900 1.125rem/1 var(--Bogart, "bogart"), Georgia, serif;
}

/* Gros chiffre */
.om-faq-chiffre { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; line-height: .95; }
.om-faq-chiffre strong {
    font: 900 clamp(3.5rem, 2.6rem + 3.4vw, 6rem)/.95 var(--Bogart, "bogart"), Georgia, serif;
    color: var(--c-accent);
    letter-spacing: -.01em;
}
.om-faq--budget .om-faq-chiffre strong { font-size: clamp(3rem, 2.3rem + 2.8vw, 5rem); white-space: nowrap; }
.om-faq-chiffre span { font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.75rem)/1 var(--Bogart, "bogart"), Georgia, serif; color: var(--c-doux); }

/* Réponse (phrase citable) */
.om-faq-r { font-size: .9375rem; line-height: 1.55; color: var(--c-doux); max-width: 56ch; }
.om-faq--budget .om-faq-r { font-size: clamp(1rem, .95rem + .2vw, 1.125rem); }

/* Lien du bas */
.om-faq-lien {
    align-self: flex-start;
    font-weight: 700; font-size: 1rem;
    color: var(--c-lien) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}
.om-faq-lien span { display: inline-block; transition: transform .2s ease; }
.om-faq-lien:hover span, .om-faq-lien:focus-visible span { transform: translateX(4px); }
.om-faq-carte a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 6px; }

/* Jauge de prix */
.om-faq-jauge { width: 100%; padding-top: 6px; }
.om-faq-jauge-rail { position: relative; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .22); }
.om-faq-jauge-rail span { position: absolute; top: 0; height: 100%; border-radius: 7px; }
.om-faq-jauge-plage { left: var(--de); width: calc(var(--a) - var(--de)); background: rgba(255, 255, 255, .45); }
.om-faq-jauge-mode  { left: var(--md); width: calc(var(--mf) - var(--md)); background: var(--faq-corail); }
.om-faq-jauge-repere {
    left: calc((var(--md) + var(--mf)) / 2 - 13px); top: -6px !important;
    width: 26px; height: 26px !important; border-radius: 50% !important;
    background: var(--faq-corail); border: 4px solid #fff;
}
.om-faq-jauge-grad { display: flex; justify-content: space-between; margin-top: 10px; font-size: .8125rem; font-weight: 500; color: var(--c-doux); }
.om-faq-souvent {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--faq-corail);
    color: #fff;
    font-weight: 700; font-size: .9375rem;
    transform: rotate(-2deg);
}

/* Semaine */
.om-faq-semaine { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; }
.om-faq-semaine li {
    display: grid; place-items: center;
    flex: 1 1 0; min-width: 0; max-width: 36px; aspect-ratio: 1; border-radius: 50%;
    background: var(--c-pastille);
    color: var(--faq-ardoise);
    font-size: .875rem; font-weight: 700;
}
.om-faq-semaine .om-faq-jour-on { background: var(--faq-corail); color: #fff; transform: rotate(-8deg); }

/* Podium */
.om-faq-podium { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.om-faq-podium li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px 10px 10px;
    border-radius: 16px;
    background: var(--faq-creme);
}
.om-faq-rang {
    flex: none; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--faq-corail); color: #fff;
    font: 900 1rem/1 var(--Bogart, "bogart"), Georgia, serif;
    transform: rotate(-8deg);
}
.om-faq-podium li:nth-child(2) .om-faq-rang { transform: rotate(6deg); }
.om-faq-podium li:nth-child(3) .om-faq-rang { transform: rotate(-4deg); }
.om-faq-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.om-faq-podium a {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 900 1.0625rem/1.2 var(--Bogart, "bogart"), Georgia, serif;
    text-transform: uppercase;
    color: var(--faq-encre) !important;
    text-decoration: none;
}
.om-faq-podium a:hover { color: var(--faq-teal-texte) !important; }
/* Coup de cœur : ligne teintée corail, étiquette, cœur à la place du rang s'il est mis en avant */
.om-faq-podium li.om-faq-cdc { background: #FBE7E2; box-shadow: inset 0 0 0 2px var(--faq-corail); }
.om-faq-tag-cdc {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--faq-corail); color: #fff;
    font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    transform: rotate(-2deg);
}
.om-faq-tag-cdc::before { content: "♥"; font-size: .75rem; letter-spacing: 0; }
.om-faq-rang-coeur { font-family: var(--dm-sans, "DM Sans"), sans-serif; font-size: 1.0625rem; transform: rotate(-8deg) scale(1.08); }
.om-faq-note {
    flex: none;
    padding: 5px 10px; border-radius: 10px;
    background: var(--faq-surface);
    color: var(--marron, #887b64);
    font: 900 1rem/1 var(--Bogart, "bogart"), Georgia, serif;
}
.om-faq-note > span:first-child { color: var(--faq-corail); font-family: var(--dm-sans, "DM Sans"), sans-serif; }

/* Créneaux du soir */
.om-faq-creneaux { display: flex; flex-wrap: wrap; gap: 8px; }
.om-faq-creneaux li {
    padding: 7px 12px; border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .3);
    font-size: .9375rem; font-weight: 500; color: var(--c-doux);
}
.om-faq-creneaux b { margin-left: 4px; font: 900 1rem/1 var(--Bogart, "bogart"), Georgia, serif; color: var(--c-accent); }

/* Types */
.om-faq-types { display: flex; flex-wrap: wrap; gap: 8px; }
.om-faq-types a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--faq-surface);
    color: var(--faq-encre) !important;
    font-size: .9375rem; font-weight: 500;
    text-decoration: none;
    transition: transform .2s ease;
}
.om-faq-types a:hover { transform: translateY(-2px) rotate(-1deg); }
.om-faq-types b { font: 900 1rem/1 var(--Bogart, "bogart"), Georgia, serif; color: var(--faq-teal-texte); }

/* Points (carrousel mobile) et source */
.om-faq-points { display: none; }
.om-faq-source { display: flex; align-items: center; gap: 8px; margin-top: 24px; font-size: .8125rem; font-weight: 500; color: var(--faq-ardoise); }
.om-faq-source span { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--Bleu, #108A8A); }

/* ---------- Écrans moyens : cartes plus serrées ---------- */
@media (max-width: 1599px) {
    .om-faq-carte { padding: 28px 26px; }
    .om-faq--dimanche .om-faq-chiffre strong, .om-faq--lundi .om-faq-chiffre strong { font-size: clamp(3.5rem, 2.4rem + 2.6vw, 5rem); }
}

/* ---------- Tablette : 2 colonnes ---------- */
@media (max-width: 1199px) {
    .om-faq-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .om-faq-grille .om-faq-carte { grid-column: span 1; min-height: 0; }
    .om-faq-grille .om-faq--budget { grid-column: span 2; }
    /* Carte seule sur sa ligne : pleine largeur */
    .om-faq-grille:not(.om-faq-sans-budget) .om-faq-carte:last-child:nth-child(even),
    .om-faq-grille.om-faq-sans-budget .om-faq-carte:last-child:nth-child(odd) { grid-column: span 2; }
    .om-faq-carte { padding: 28px; }
}

/* ---------- Mobile : carrousel horizontal ---------- */
@media (max-width: 767px) {
    .om-faq-tete { margin-bottom: 16px; }
    .om-faq-chapo { display: none; }
    .om-faq-sticker { width: 56px; height: 56px; border-width: 4px; font-size: 2.125rem; }
    .om-faq-grille {
        display: flex;
        gap: 12px;
        margin: 0 -16px;
        padding: 4px 16px 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .om-faq-grille::-webkit-scrollbar { display: none; }
    .om-faq-grille .om-faq-carte {
        flex: 0 0 min(82vw, 300px);
        scroll-snap-align: start;
        padding: 24px 22px;
        border-radius: 24px;
        gap: 18px;
    }
    .om-faq-carte:hover { transform: none; }
    .om-faq-haut { gap: 12px; }
    .om-faq-q { font-size: .9375rem; }
    .om-faq-chiffre strong { font-size: 4.25rem; }
    .om-faq--budget .om-faq-chiffre strong { font-size: 3.25rem; white-space: normal; }
    .om-faq-jauge-grad span:nth-child(even) { visibility: hidden; }
    .om-faq-semaine { gap: 5px; }
    .om-faq-semaine li { font-size: .8125rem; }
    .om-faq-podium li { padding: 8px 10px 8px 8px; }
    .om-faq-podium a { font-size: .9375rem; }
    .om-faq-points { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
    .om-faq-points span { width: 8px; height: 8px; border-radius: 4px; background: var(--faq-beige); transition: width .25s ease, background .25s ease; }
    .om-faq-points span.om-faq-point-on { width: 22px; background: var(--Bleu, #108A8A); }
    .om-faq-source { margin-top: 14px; align-items: flex-start; }
    .om-faq-source span { margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .om-faq *, .om-faq-sticker, .om-faq-carte { transition: none !important; }
    .om-faq-grille { scroll-behavior: auto; }
}

/* ---------- Mode sombre ---------- */
html.oumanger-dark-init body .om-faq,
body.dark-mode .om-faq {
    --faq-teal-texte: #2DB0AD;
    --faq-corail: #E8765F;
    --faq-nuit: #0C0E10;
    --faq-ombre: 0 10px 24px rgba(0, 0, 0, .35);
}
html.oumanger-dark-init body .om-faq-sticker,
body.dark-mode .om-faq-sticker { border-color: #1E2328; }
html.oumanger-dark-init body .om-faq-titre,
body.dark-mode .om-faq-titre { color: #2DB0AD; }
/* Bulles des cartes colorées : surface sombre, texte clair */
html.oumanger-dark-init body :is(.om-faq--budget, .om-faq--tard),
body.dark-mode :is(.om-faq--budget, .om-faq--tard) { --c-bulle: #1E2328; --c-bulle-texte: #F2EEE6; }
html.oumanger-dark-init body .om-faq--budget,
body.dark-mode .om-faq--budget { --c-bg: #0F6464; }
html.oumanger-dark-init body .om-faq--tard,
body.dark-mode .om-faq--tard { border: 1px solid #3A4048; }
html.oumanger-dark-init body .om-faq--lundi,
body.dark-mode .om-faq--lundi { --c-pastille: #1E2328; }
html.oumanger-dark-init body .om-faq-jauge-repere,
body.dark-mode .om-faq-jauge-repere { border-color: #F2EEE6; }
html.oumanger-dark-init body .om-faq-podium li,
body.dark-mode .om-faq-podium li { background: #15181B; }
html.oumanger-dark-init body .om-faq-podium li.om-faq-cdc,
body.dark-mode .om-faq-podium li.om-faq-cdc { background: #3A2622; }
html.oumanger-dark-init body .om-faq-note,
body.dark-mode .om-faq-note { background: #2A2F35; color: #D9C9A8; }
html.oumanger-dark-init body .om-faq-types a,
body.dark-mode .om-faq-types a { background: #1E2328; }
html.oumanger-dark-init body .om-faq-points span,
body.dark-mode .om-faq-points span { background: #3A4048; }
html.oumanger-dark-init body .om-faq-points span.om-faq-point-on,
body.dark-mode .om-faq-points span.om-faq-point-on { background: #2DB0AD; }