/* ════════════════════════════════
   RETRAIT & LIVRAISON
   Intégration de la frame Figma "Retrait & Livraison" (desktop), réutilisant les
   assets de marque (texture union3, stamp titre, bande crénelée).
════════════════════════════════ */
.delivery-page {
    --dl-red:     #e85a28;
    --dl-orange:  #ffa200;
    --dl-gold:    #e7a93c;
    --dl-cream:   #f3e9d7;
    --dl-cream-2: #f1ead8;
    --dl-white:   #fffdf8;
    --dl-dark:    #242323;
    --dl-muted:   #8a7f72;
    --dl-green:   #5a9e4b;
    --dl-pad:     clamp(20px, 6vw, 100px);

    font-family: 'DM Sans', sans-serif;
    color: var(--dl-dark);
    background: var(--dl-cream);
}

/* Nav overlay (page dans _heroRoutes) → reset du padding-top du main. */
.delivery-page main { padding-top: 0; }

/* ── 1. HERO - copie 1:1 du pattern .cc-hero (catalog-category.css L45-124).
   Même structure que home / planches / extras / boissons / à propos. ── */
.dl-hero {
    position: relative;
    min-height: 700px;
    background-color: var(--dl-red);
    background-image: url('/images/home/union3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    overflow: visible;
}

.dl-hero-mascot {
    position: absolute;
    top: 124px;
    left: calc(50% - 720px + 14px);
    width: 117px;
    height: 103px;
    z-index: 5;
    pointer-events: none;
    transform: scaleY(-1) rotate(174.51deg);
}
.dl-hero-mascot img { width: 100%; height: 100%; object-fit: contain; }

.dl-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 175px var(--dl-pad) 100px;
    box-sizing: border-box;
    color: #fff;
}

.dl-hero-title {
    font-family: 'Erica One', sans-serif;
    font-size: clamp(80px, 7.5vw, 122px);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.0;
    letter-spacing: -2px;
    max-width: 900px;
    margin: 0;
}
.dl-hero-title span { display: block; }
.dl-hero-title .dl-hero-title-line {
    display: block;
    margin-bottom: 4px;
}
.dl-hero-title .dl-hero-title-stamp {
    display: inline-block;
    position: relative;
    padding: 14px 20px 18px;
    line-height: 1;
    background-image: url('/images/home/rect3464584.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.dl-hero-tagline {
    margin-top: 32px;
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    line-height: 1.55;
    color: #fff;
    max-width: 630px;
}

/* ── 2. LES DEUX MODES ─────────────────────────────────────── */
.dl-modes { padding: 90px var(--dl-pad) 80px; background: var(--dl-cream); }
.dl-modes-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.dl-card {
    background: var(--dl-white);
    border: 2px dashed rgba(36, 35, 35, .28);
    border-radius: 22px;
    padding: 28px 30px 26px;
    display: flex;
    flex-direction: column;
}
.dl-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}
.dl-card-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 12px;
    background: rgba(232, 90, 40, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dl-card-icon svg {
    width: 24px; height: 24px;
    fill: none; stroke: var(--dl-red);
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.dl-card-title {
    font-family: 'Darumadrop One', 'Caveat', cursive;
    font-weight: 400;
    font-size: 34px;
    margin: 0;
    letter-spacing: .005em;
    line-height: 1.1;
    color: var(--dl-dark);
}
.dl-card-sub {
    font-size: 15px;
    color: var(--dl-muted);
    margin: 4px 0 6px;
    line-height: 1.5;
}

/* Séparateur sous l'en-tête (rappelle la maquette) */
.dl-card-head + .dl-cols,
.dl-card-head + .dl-card-sub,
.dl-card-head + .dl-block {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(36, 35, 35, .08);
}

.dl-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.dl-block { padding: 16px 0; border-top: 1px solid rgba(36, 35, 35, .08); }
.dl-cols .dl-block { border-top: 0; padding-bottom: 6px; }
.dl-block-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--dl-dark);
    margin: 0 0 10px;
}
.dl-block-text { font-size: 15px; line-height: 1.55; margin: 0; }
.dl-block-note { font-size: 13px; font-style: italic; color: var(--dl-muted); margin: 8px 0 0; }

.dl-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-slot {
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--dl-cream);
    border: 1px solid rgba(232, 90, 40, .25);
    font-size: 13.5px;
    font-weight: 500;
}

.dl-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
}
.dl-bullets li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.45;
}
.dl-bullets li::before {
    content: "";
    position: absolute;
    left: 0; top: 7px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--dl-red);
}

.dl-address { font-style: normal; font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
.dl-address-line { display: flex; align-items: center; gap: 8px; }
.dl-address-line svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: var(--dl-red); stroke-width: 1.8; }
.dl-address a { color: var(--dl-red); text-decoration: none; font-weight: 600; }
.dl-address a:hover { text-decoration: underline; }

/* Encart de note collé au bas de la carte (intérieur, pas full-bleed).
   Couleur peach/rose unifiée pour les deux cards.
   margin-top: auto pousse l'encart contre le bas (les cards font la même
   hauteur via align-items: stretch sur la grille). */
.dl-note {
    margin: auto 0 0;
    padding: 14px 18px;
    background: rgba(232, 90, 40, .10);
    border: 1px solid rgba(232, 90, 40, .25);
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dl-dark);
}
.dl-note strong {
    font-weight: 700;
    color: var(--dl-red);
}
.dl-note--ok { text-align: left; }
.dl-note--ok strong {
    display: block;
    color: var(--dl-red);
    font-weight: 700;
    margin-bottom: 2px;
}
.dl-note--ok span {
    color: var(--dl-dark);
    font-weight: 400;
}

/* ── 3. INFORMATIONS IMPORTANTES ───────────────────────────── */
.dl-info {
    padding: 56px var(--dl-pad);
    background: var(--dl-red) url('/images/home/orange-bg.png') center / cover no-repeat;
    color: #fff;
    text-align: center;
}
.dl-info-title {
    font-family: 'Erica One', sans-serif;
    font-weight: 400;
    font-size: clamp(34px, 5.5vw, 64px);
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1;
    margin: 0 0 30px;
}
.dl-info-title-line { display: block; }
.dl-info-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
/* Chaque info = pastille blanche (comme la maquette). */
.dl-info-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--dl-white);
    border-radius: 14px;
    color: var(--dl-dark);
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 6px 18px rgba(36, 35, 35, .08);
    flex: 1 1 280px;
    max-width: 320px;
}
.dl-info-dot {
    flex: 0 0 9px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--dl-orange);
}

/* ── 4. QUESTIONS FRÉQUENTES - fond crème, 2 colonnes (titre gauche + liste
   droite), items flat avec séparateurs et "+" dans un cercle sombre. ── */
.dl-faq {
    padding: 90px var(--dl-pad) 110px;
    background: var(--dl-cream);
}
.dl-faq-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 440px) 1fr;
    gap: 60px;
    align-items: start;
}

/* Titre à gauche - Erica One uppercase dark, stacked 2 lignes.
   Taille calculée pour que "FRÉQUENTES" (10 lettres) tienne dans la colonne
   gauche à 440px max sans déborder. */
.dl-faq-title {
    font-family: 'Erica One', sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 4vw, 58px);
    text-transform: uppercase;
    letter-spacing: -.02em;
    line-height: .95;
    color: var(--dl-dark);
    margin: 0;
    overflow-wrap: break-word;
}
.dl-faq-title-line { display: block; }

/* Liste à droite - séparateurs horizontaux, pas de fond ni card style */
.dl-faq-list {
    display: flex;
    flex-direction: column;
}
.dl-faq-item {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(36, 35, 35, .18);
    border-radius: 0;
}
.dl-faq-item:last-child { border-bottom: 1px solid rgba(36, 35, 35, .18); }

/* Question - dark uppercase serré + chevron circulaire à droite */
.dl-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dl-dark);
    transition: opacity .15s ease;
}
.dl-faq-q:hover { opacity: .75; }
.dl-faq-q-text { flex: 1; }

/* Chevron - cercle orange avec "+" / "×" blanc à l'intérieur, rotation au open */
.dl-faq-chev {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dl-orange);
    border-radius: 50%;
    transition: transform .25s ease;
}
.dl-faq-chev svg {
    width: 14px; height: 14px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
}
.dl-faq-item--open .dl-faq-chev { transform: rotate(45deg); }

/* Animation d'ouverture grid-rows 0 → 1fr */
.dl-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}
.dl-faq-item--open .dl-faq-a { grid-template-rows: 1fr; }
.dl-faq-a > p {
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--dl-muted);
    transition: padding .28s ease;
}
.dl-faq-item--open .dl-faq-a > p { padding: 0 0 22px; }

/* ── Responsive ────────────────────────────────────────────── */
/* Hero : 3 breakpoints identiques à .cc-hero (cf. catalog-category.css L568-589). */
@media (max-width: 1440px) {
    .dl-hero-mascot { left: 30px; }
}

@media (max-width: 900px) {
    .dl-hero { min-height: 0; }
    .dl-hero-inner { padding: 130px var(--dl-pad) 70px; }
    .dl-hero-title { font-size: clamp(36px, 11vw, 90px); letter-spacing: -1px; max-width: none; }
    .dl-hero-title .dl-hero-title-stamp { padding: 6px 12px 10px; }
    .dl-hero-tagline { font-size: 16px; margin-top: 22px; }
    .dl-hero-mascot { left: 22px; top: 92px; width: 78px; height: 68px; }
}

@media (max-width: 480px) {
    .dl-hero-title { font-size: clamp(32px, 12vw, 64px); }
}

@media (max-width: 860px) {
    .dl-modes-grid { grid-template-columns: 1fr; }
    .dl-cols { grid-template-columns: 1fr; gap: 0; }
    .dl-bullets { grid-template-columns: 1fr; }

    /* FAQ : passage en 1 colonne (titre au-dessus, liste dessous) */
    .dl-faq { padding: 70px var(--dl-pad) 90px; }
    .dl-faq-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .dl-faq-title { font-size: clamp(48px, 11vw, 64px); }
    .dl-faq-q { font-size: 12px; padding: 18px 0; gap: 14px; }
    .dl-faq-chev { flex-basis: 28px; width: 28px; height: 28px; }
    .dl-faq-chev svg { width: 12px; height: 12px; }
}