/*
 * HOREL — Pages statiques (Notre histoire / Boutique / Atelier)
 * Feuille CSS commune aux 3 pages, remplace horel-histoire.css,
 * horel-boutique.css et horel-atelier.css.
 *
 * Structure :
 *   PARTIE A — règles réellement communes aux 3 pages (conteneur
 *              PrestaShop, socle commun, navigation, liens, texte
 *              des cartes, paliers responsive partagés).
 *   PARTIE B — une section par page, pour tout ce qui lui est propre
 *              (hero/chapitres, blocs gris, grilles de cartes,
 *              formulaire, FAQ, carte interactive, diaporama...).
 *
 * Racines : #horel-history (Notre histoire), #horel-places (Boutique),
 * #horel-workshop (Atelier).
 */


/* =========================================================
   PARTIE A — COMMUN AUX 3 PAGES
   ========================================================= */

/* ---------------------------------------------------------
   A1. CONTENEUR PRESTASHOP
   --------------------------------------------------------- */

#module-thrive_mystaticpages-concept #wrapper > .container,
#module-thrive_mystaticpages-boutique #wrapper > .container,
#module-thrive_mystaticpages-atelier #wrapper > .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

#module-thrive_mystaticpages-concept #wrapper > .container > .row,
#module-thrive_mystaticpages-boutique #wrapper > .container > .row,
#module-thrive_mystaticpages-atelier #wrapper > .container > .row {
    margin-left: 0;
    margin-right: 0;
}

#module-thrive_mystaticpages-concept #content-wrapper,
#module-thrive_mystaticpages-boutique #content-wrapper,
#module-thrive_mystaticpages-atelier #content-wrapper {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
}


/* ---------------------------------------------------------
   A2. SOCLE COMMUN
   Variables et resets identiques sur les 3 pages.
   --------------------------------------------------------- */

#horel-history,
#horel-places,
#horel-workshop {
    /* Couleurs */
    --horel-ink: #121212;
    --horel-muted: #555;
    --horel-line: #d5d5d5;
    --horel-panel: #f5f5f5;
    --horel-open: #22780D;
    --horel-closed: #9B0214;
    --horel-appointment: #72521b;

    /* Typographie */
    --horel-h1: 28px;
    --horel-h2: 28px;
    --horel-text: 16px;        /* texte courant et H3 (en gras) */
    --horel-card-text: 15px;   /* texte des cartes et colonnes d'infos */
    --horel-small: 14px;       /* liens */
    --horel-note: 13px;        /* notes, légendes, statut, menu mobile */
    --horel-micro: 12px;       /* labels en capitales */

    /* Espacements */
    --horel-gutter: 15px;
    --horel-gap: 32px;
    --horel-hero-space: 50px;
    --horel-section-space: 56px;
    --horel-chapter-gap: 40px;    /* écart court, on reste dans la même idée */
    --horel-break-space: 90px;    /* vrai changement de section */
    --horel-panel-padding: 36px 40px;   /* blocs gris pleine largeur */
    --horel-card-padding: 28px 32px;    /* cartes grises */

    box-sizing: border-box;
    width: 100%;
    max-width: 1295px;
    margin: 32px auto 10px;
    padding: 0 var(--horel-gutter);
    color: var(--horel-ink);
    font-family: Montserrat, sans-serif;
}

#horel-history *, #horel-history *::before, #horel-history *::after,
#horel-places *, #horel-places *::before, #horel-places *::after,
#horel-workshop *, #horel-workshop *::before, #horel-workshop *::after {
    box-sizing: border-box;
}

#horel-history h1, #horel-history h2, #horel-history h3, #horel-history p, #horel-history figure,
#horel-places h1, #horel-places h2, #horel-places h3, #horel-places p, #horel-places figure,
#horel-workshop h1, #horel-workshop h2, #horel-workshop h3, #horel-workshop p, #horel-workshop figure {
    margin: 0;
    color: inherit;
    font-family: inherit;
}

/* Spécifique Boutique : horaires balisés en <dl>/<dt>/<dd> */
#horel-places dl,
#horel-places dt,
#horel-places dd {
    margin: 0;
    color: inherit;
    font-family: inherit;
}

#horel-history h1, #horel-history h2,
#horel-places h1, #horel-places h2,
#horel-workshop h1, #horel-workshop h2 {
    font-weight: 500;
    line-height: 1.3;
}

#horel-history h1,
#horel-places h1,
#horel-workshop h1 {
    margin-bottom: 24px;
    font-size: var(--horel-h1);
}

#horel-history h2,
#horel-places h2,
#horel-workshop h2 {
    margin-bottom: 20px;
    font-size: var(--horel-h2);
}

/* H3 : petit titre de bloc, à la taille du texte, en gras */
#horel-history h3,
#horel-places h3,
#horel-workshop h3 {
    margin-bottom: 8px;
    font-size: var(--horel-text);
    font-weight: 700;
    line-height: 1.5;
}

#horel-history p,
#horel-places p,
#horel-workshop p {
    font-size: var(--horel-text);
    font-weight: 400;
    font-family: 'Raleway', sans-serif;
    line-height: 1.5;
}

/* Spécifique Boutique : texte des <dt>/<dd> d'horaires */
#horel-places dt,
#horel-places dd {
    font-size: var(--horel-text);
    font-weight: 400;
    line-height: 1.65;
}

#horel-history p + p,
#horel-places p + p,
#horel-workshop p + p {
    margin-top: 16px;
}

#horel-history a,
#horel-places a,
#horel-workshop a {
    color: inherit;
    font-family: inherit;
}

#horel-history a:focus-visible, #horel-history button:focus-visible,
#horel-places a:focus-visible, #horel-places button:focus-visible,
#horel-workshop a:focus-visible, #horel-workshop button:focus-visible {
    outline: 2px solid var(--horel-ink);
    outline-offset: 4px;
}

/* Label en capitales (même rôle, nom de classe propre à chaque page) */
#horel-history .hh-label,
#horel-places .hp-label,
#horel-workshop .ha-label {
    margin-bottom: 2px;
    font-size: var(--horel-micro);
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   A3. NAVIGATION
   --------------------------------------------------------- */

#horel-history .hh-nav,
#horel-places .hp-nav,
#horel-workshop .ha-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 48px;
    margin-bottom: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--horel-ink);
}

#horel-history .hh-nav a,
#horel-places .hp-nav a,
#horel-workshop .ha-nav a {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 44px;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
}

#horel-history .hh-nav a::after,
#horel-places .hp-nav a::after,
#horel-workshop .ha-nav a::after {
    content: "";
    display: block;
    margin-top: 2px;
    border-bottom: 1.5px solid currentColor;
    transform: scaleX(0);
}

#horel-history .hh-nav a[aria-current="page"],
#horel-places .hp-nav a[aria-current="page"],
#horel-workshop .ha-nav a[aria-current="page"] {
    font-weight: 700;
}

#horel-history .hh-nav a[aria-current="page"]::after, #horel-history .hh-nav a:hover::after, #horel-history .hh-nav a:focus-visible::after,
#horel-places .hp-nav a[aria-current="page"]::after, #horel-places .hp-nav a:hover::after, #horel-places .hp-nav a:focus-visible::after,
#horel-workshop .ha-nav a[aria-current="page"]::after, #horel-workshop .ha-nav a:hover::after, #horel-workshop .ha-nav a:focus-visible::after {
    transform: scaleX(1);
}


/* ---------------------------------------------------------
   A4. LIENS
   Soulignés au survol uniquement, flèche jamais soulignée.
   Pattern présent sur Notre histoire et Atelier (la Boutique
   utilise ses propres boutons .hp-action, pattern différent).
   --------------------------------------------------------- */

#horel-history .hh-link,
#horel-workshop .ha-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    font-size: var(--horel-small);
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
}

/* Sur Atelier, le lien suit toujours une marge de 16px (pas de contexte
   flex qui la gère pour lui, contrairement à Histoire) */
#horel-workshop .ha-link {
    margin-top: 16px;
}

#horel-history .hh-link:hover, #horel-history .hh-link:focus, #horel-history .hh-link:focus-visible,
#horel-workshop .ha-link:hover, #horel-workshop .ha-link:focus, #horel-workshop .ha-link:focus-visible {
    text-decoration: none;
}

#horel-history .hh-link-text,
#horel-workshop .ha-link-text {
    border-bottom: 1px solid transparent;
}

#horel-history .hh-link:hover .hh-link-text, #horel-history .hh-link:focus-visible .hh-link-text,
#horel-workshop .ha-link:hover .ha-link-text, #horel-workshop .ha-link:focus-visible .ha-link-text {
    border-bottom-color: currentColor;
}

#horel-history .hh-link-arrow,
#horel-workshop .ha-link-arrow {
    flex: 0 0 auto;
    border-bottom: 0;
    text-decoration: none;
}


/* ---------------------------------------------------------
   A5. TEXTE DES CARTES
   Un seul corps pour le texte des cartes et colonnes d'infos,
   quelle que soit la page. Les labels, notes et statuts
   gardent leur propre taille.
   --------------------------------------------------------- */

#horel-history :where(.hh-friend, .hh-press-card) p,
#horel-places :where(.hp-visit-grid) p, #horel-places :where(.hp-visit-grid) dt, #horel-places :where(.hp-visit-grid) dd,
#horel-workshop :where(.ha-service-card, .ha-delay-card, .ha-sav-card, .ha-practical-card, .ha-faq-answer) p {
    font-size: var(--horel-card-text);
}


/* ---------------------------------------------------------
   A6. GRAND ÉCRAN (commun)
   --------------------------------------------------------- */

@media (min-width: 1540px) {

    #horel-history,
    #horel-places,
    #horel-workshop {
        max-width: 1495px;
        padding-left: 0;
        padding-right: 0;
    }

}


/* ---------------------------------------------------------
   A7. TABLETTE — tout est centré (commun)
   --------------------------------------------------------- */

@media (max-width: 991px) {

    #horel-history,
    #horel-places,
    #horel-workshop {
        --horel-gutter: 20px;
        --horel-hero-space: 32px;
        --horel-section-space: 32px;
        --horel-panel-padding: 30px;

        margin: 24px auto 40px;
        text-align: center;
    }

    #horel-history .hh-nav,
    #horel-places .hp-nav,
    #horel-workshop .ha-nav {
        gap: 8px 24px;
        margin-bottom: 32px;
        padding-bottom: 16px;
    }

}


/* ---------------------------------------------------------
   A8. PETIT MOBILE (commun)
   --------------------------------------------------------- */

@media (max-width: 575px) {

    #horel-history,
    #horel-places,
    #horel-workshop {
        --horel-h1: 24px;
        --horel-h2: 22px;
        --horel-text: 15px;
        --horel-gutter: 16px;
        --horel-hero-space: 24px;
        --horel-section-space: 24px;
        --horel-panel-padding: 24px 20px;
        --horel-card-padding: 24px 20px;
    }

    #horel-history h1,
    #horel-places h1,
    #horel-workshop h1 {
        margin-bottom: 18px;
    }

    #horel-history h2,
    #horel-places h2,
    #horel-workshop h2 {
        margin-bottom: 16px;
    }

    #horel-history .hh-nav,
    #horel-places .hp-nav,
    #horel-workshop .ha-nav {
        gap: 0 20px;
    }

    #horel-history .hh-nav a,
    #horel-places .hp-nav a,
    #horel-workshop .ha-nav a {
        font-size: var(--horel-note);
        white-space: nowrap;
    }

}


/* =========================================================
   PARTIE B — NOTRE HISTOIRE (#horel-history)
   ========================================================= */

#horel-history .hh-chapter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    gap: var(--horel-gap);
    margin-bottom: var(--horel-chapter-gap);
}

#horel-history .hh-chapter-reverse {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    margin-bottom: var(--horel-break-space);
}

#horel-history .hh-copy {
    position: relative;
    top: -4px;
    min-width: 0;
}

#horel-history .hh-photo {
    width: 100%;
    position: relative;
}

#horel-history .hh-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 853 / 440;
    object-fit: cover;
}

#horel-history figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 32px 16px 12px;
    color: #fff;
    font-size: var(--horel-note);
    font-style: italic;
    line-height: 1.5;
    text-align: right;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}

#horel-history .hh-meeting {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--horel-gap);
    margin-bottom: var(--horel-chapter-gap);
    padding: var(--horel-panel-padding);
    background: var(--horel-panel);
}

#horel-history .hh-meeting h2 {
    margin: 0;
}

#horel-history .hh-friends {
    margin-bottom: var(--horel-break-space);
    padding-top: 12px;
    border-top: 1px solid var(--horel-ink);
}

#horel-history .hh-friends-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--horel-gap);
}

#horel-history .hh-friend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--horel-card-padding);
    background: var(--horel-panel);
}

#horel-history .hh-friend .hh-link {
    margin-top: auto;
    padding-top: 16px;
}

#horel-history .hh-press {
    padding-top: 12px;
    border-top: 1px solid var(--horel-ink);
}

#horel-history .hh-press-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px var(--horel-gap);
}

/* la dernière rangée ne garde pas son padding bas : c'est la marge de
   #horel-history (30px) qui fixe seule l'écart avant le footer */
#horel-history .hh-press-card:nth-last-child(-n+2) {
    padding-bottom: 0;
}

#horel-history .hh-press-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 24px;
}

#horel-history .hh-press-media {
    width: 100%;
    margin: 0 0 18px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--horel-panel);
}

#horel-history .hh-press-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#horel-history .hh-press-card h3 {
    margin: 6px 0 0;
}

#horel-history .hh-press-card .hh-link {
    margin-top: auto;
    padding-top: 0;
}

@media (max-width: 991px) {

    #horel-history .hh-chapter,
    #horel-history .hh-chapter-reverse {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    #horel-history .hh-photo {
        grid-row: 1;
    }

    #horel-history .hh-copy {
        top: 0;
    }

    #horel-history .hh-meeting {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    #horel-history .hh-friends {
        padding: 12px 0 32px;
    }

    #horel-history .hh-friends-grid {
        gap: 24px;
    }

    #horel-history .hh-friend,
    #horel-history .hh-press-card {
        align-items: center;
    }

}

@media (max-width: 767px) {

    #horel-history .hh-friends-grid,
    #horel-history .hh-press-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* =========================================================
   PARTIE B — BOUTIQUE (#horel-places)
   ========================================================= */

/* ---------------------------------------------------------
   Statut d'ouverture (modèle de référence, repris en version
   simplifiée sur Atelier : .ha-status)
   --------------------------------------------------------- */

#horel-places .hp-open-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 2px 0 16px;
    font-size: var(--horel-note);
    line-height: 1.4;
}

#horel-places .hp-open-status[hidden] {
    display: none;
}

#horel-places .hp-open-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #777;
}

#horel-places .hp-open-status[data-state="open"] {
    color: var(--horel-open);
}

#horel-places .hp-open-status[data-state="open"] .hp-open-dot {
    background: var(--horel-open);
}

#horel-places .hp-open-status[data-state="closed"] {
    color: var(--horel-closed);
}

#horel-places .hp-open-status[data-state="closed"] .hp-open-dot {
    background: var(--horel-closed);
}

#horel-places .hp-open-status[data-state="appointment"] {
    color: var(--horel-appointment);
}

#horel-places .hp-open-status[data-state="appointment"] .hp-open-dot {
    background: var(--horel-appointment);
}

/* ---------------------------------------------------------
   Introduction et diaporama
   --------------------------------------------------------- */

#horel-places .hp-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    gap: var(--horel-gap);
    margin-bottom: 40px;
}

#horel-places .hp-copy {
    position: relative;
    top: -4px;
    min-width: 0;
}

#horel-places .hp-slider {
    position: relative;
    min-width: 0;
}

#horel-places .hp-slider-window {
    overflow: hidden;
}

#horel-places .hp-slider-track {
    display: flex;
    transition: transform 350ms ease;
}

#horel-places .hp-photo {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: auto;
    aspect-ratio: 853 / 440;
    object-fit: cover;
}

#horel-places button.hp-slider-arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--horel-ink);
    font-family: Arial, sans-serif;
    font-size: 32px;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
}

#horel-places .hp-slider-prev {
    left: 16px;
}

#horel-places .hp-slider-next {
    right: 16px;
}

#horel-places .hp-slider-count,
#horel-places .hp-slider-pause {
    position: absolute;
    bottom: 12px;
    padding: 6px 12px;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--horel-ink);
    font-family: inherit;
    font-size: var(--horel-micro);
    line-height: 1.5;
}

#horel-places .hp-slider-count {
    right: 16px;
}

#horel-places .hp-slider-pause {
    left: 16px;
    min-height: 44px;
    cursor: pointer;
}

#horel-places .hp-slider-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

#horel-places:not([data-initialized]) .hp-slider-track > img:not(:first-child),
#horel-places:not([data-initialized]) .hp-slider-arrow,
#horel-places:not([data-initialized]) .hp-slider-pause,
#horel-places:not([data-initialized]) .hp-slider-count {
    display: none;
}

/* ---------------------------------------------------------
   Venir à la boutique (bloc gris)
   --------------------------------------------------------- */

#horel-places .hp-visit {
    padding: var(--horel-panel-padding);
    background: var(--horel-panel);
}

#horel-places .hp-visit-heading {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--horel-line);
}

#horel-places .hp-visit-heading h2 {
    margin-bottom: 0;
}

#horel-places .hp-visit-title-copy {
    grid-column: 1 / 3;
    min-width: 0;
    padding-right: 32px;
    text-align: left;
}

#horel-places .hp-visit-sentence {
    margin-top: 12px;
}

#horel-places .hp-actions {
    grid-column: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#horel-places a.hp-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid var(--horel-ink);
    background: #fff;
    color: var(--horel-ink);
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
}

#horel-places a.hp-action:hover,
#horel-places a.hp-action:focus-visible {
    background: var(--horel-ink);
    color: #fff;
}

#horel-places a.hp-action-primary {
    background: var(--horel-ink);
    color: #fff;
}

#horel-places a.hp-action-primary:hover,
#horel-places a.hp-action-primary:focus-visible {
    background: #fff;
    color: var(--horel-ink);
}

#horel-places .hp-visit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
}

#horel-places .hp-visit-grid > div {
    min-width: 0;
    padding: 0 32px;
    text-align: center;
}

#horel-places .hp-visit-grid > div + div {
    border-left: 1px solid var(--horel-line);
}

#horel-places .hp-details .hp-access {
    margin-top: 28px;
}

/* ---------------------------------------------------------
   Horaires
   --------------------------------------------------------- */

#horel-places .hp-hours-column h3 {
    margin: 0;
}

#horel-places .hp-hours {
    margin: 0;
}

#horel-places .hp-hours > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 12px;
    padding: 3px 0;
}

#horel-places .hp-hours dt {
    text-align: left;
}

#horel-places .hp-hours dd {
    text-align: right;
}

#horel-places .hp-hours [aria-current="date"] dt,
#horel-places .hp-hours [aria-current="date"] dd {
    font-weight: 500;
}

/* ---------------------------------------------------------
   Plan interactif
   --------------------------------------------------------- */

#horel-places .hp-map-column > img {
    display: block;
    width: 100%;
    height: auto;
}

#horel-places .hp-inline-map-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1600 / 1240;
    background: var(--horel-panel);
    touch-action: pan-y;
    cursor: default;
}

#horel-places .hp-inline-map-stage[data-zoomed] {
    touch-action: none;
    cursor: grab;
}

#horel-places .hp-inline-map-stage[data-zoomed]:active {
    cursor: grabbing;
}

#horel-places .hp-inline-map-stage img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: contain;
    transform-origin: center;
    pointer-events: none;
    user-select: none;
}

#horel-places .hp-inline-map-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

#horel-places .hp-inline-map-controls button {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--horel-ink);
    background: #fff;
    color: var(--horel-ink);
    font: inherit;
    font-size: var(--horel-micro);
    cursor: pointer;
}

#horel-places .hp-inline-map-controls button:hover {
    background: var(--horel-ink);
    color: #fff;
}

#horel-places .hp-inline-map-controls button:disabled {
    opacity: .4;
    cursor: default;
}

#horel-places .hp-inline-map-controls output {
    min-width: 48px;
    font-size: var(--horel-micro);
}

#horel-places .hp-inline-map-controls button:focus-visible,
#horel-places .hp-inline-map-stage:focus-visible {
    outline: 2px solid var(--horel-ink);
    outline-offset: 2px;
}

#horel-places .hp-inline-map-help {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.4;
}

@media (max-width: 1199px) {

    #horel-places .hp-visit-grid > div {
        padding: 0 20px;
    }

}

@media (max-width: 991px) {

    #horel-places .hp-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    #horel-places .hp-copy {
        top: 0;
    }

    #horel-places .hp-slider {
        grid-row: 1;
    }

    #horel-places .hp-visit-heading {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding-top: 0;
    }

    #horel-places .hp-visit-title-copy {
        padding-right: 0;
        text-align: center;
    }

    #horel-places .hp-actions {
        justify-content: center;
    }

    #horel-places .hp-visit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #horel-places .hp-visit-grid .hp-map-column {
        grid-column: 1 / -1;
        margin-top: 28px;
        padding-top: 28px;
        border-left: 0;
        border-top: 1px solid var(--horel-line);
    }

    #horel-places .hp-map-column {
        width: 100%;
    }

    #horel-places .hp-inline-map-stage {
        max-width: 620px;
        margin: auto;
    }

    #horel-places .hp-hours {
        max-width: 320px;
        margin: 0 auto;
    }

}

@media (max-width: 575px) {

    #horel-places .hp-visit-heading {
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    #horel-places .hp-actions {
        width: 100%;
    }

    #horel-places a.hp-action {
        flex: 1 1 160px;
        font-size: var(--horel-small);
    }

    #horel-places .hp-visit-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #horel-places .hp-visit-grid > div {
        padding: 0;
    }

    #horel-places .hp-visit-grid > div + div {
        margin-top: 24px;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid var(--horel-line);
    }

    #horel-places .hp-visit-grid .hp-map-column {
        margin-top: 24px;
        padding-top: 24px;
    }

    #horel-places .hp-slider-prev,
    #horel-places .hp-slider-pause {
        left: 8px;
    }

    #horel-places .hp-slider-next,
    #horel-places .hp-slider-count {
        right: 8px;
    }

}

@media (prefers-reduced-motion: reduce) {

    #horel-places .hp-slider-track {
        transition: none;
    }

}


/* =========================================================
   PARTIE B — ATELIER (#horel-workshop)
   ========================================================= */

/* ---------------------------------------------------------
   Statut d'ouverture (version compacte, voir aussi Boutique)
   --------------------------------------------------------- */

#horel-workshop .ha-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--horel-note);
    line-height: 1.4;
    white-space: nowrap;
}

#horel-workshop .ha-status-dot {
    display: block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #777;
}

#horel-workshop .ha-status.is-open {
    color: var(--horel-open);
}

#horel-workshop .ha-status.is-open .ha-status-dot {
    background: var(--horel-open);
}

#horel-workshop .ha-status.is-closed {
    color: var(--horel-closed);
}

#horel-workshop .ha-status.is-closed .ha-status-dot {
    background: var(--horel-closed);
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

#horel-workshop .ha-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    gap: var(--horel-gap);
    margin-bottom: 40px;
}

#horel-workshop .ha-copy {
    position: relative;
    top: -4px;
    min-width: 0;
}

#horel-workshop .ha-photo {
    width: 100%;
}

#horel-workshop .ha-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 853 / 440;
    object-fit: cover;
}

/* ---------------------------------------------------------
   Service rapide (bloc gris)
   --------------------------------------------------------- */

#horel-workshop .ha-quick {
    margin-bottom: var(--horel-break-space);
    padding: var(--horel-panel-padding);
    background: var(--horel-panel);
}

#horel-workshop .ha-service-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0;
}

#horel-workshop .ha-service-grid::before,
#horel-workshop .ha-service-grid::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--horel-line);
}

#horel-workshop .ha-service-grid::before {
    left: 33.333%;
}

#horel-workshop .ha-service-grid::after {
    left: 66.666%;
}

#horel-workshop .ha-service-card {
    padding: 0 28px;
    text-align: center;
}

/* ---------------------------------------------------------
   Interventions atelier
   --------------------------------------------------------- */

#horel-workshop .ha-workshop {
    margin-bottom: var(--horel-break-space);
    padding-top: 12px;
    border-top: 1px solid var(--horel-ink);
}

#horel-workshop .ha-section-heading {
    max-width: 900px;
    margin-bottom: 30px;
}

#horel-workshop .ha-quick .ha-section-heading,
#horel-workshop .ha-workshop .ha-section-heading,
#horel-workshop .ha-sav .ha-section-heading,
#horel-workshop .ha-contact .ha-section-heading {
    max-width: none;
    margin-bottom: 20px;
}

#horel-workshop .ha-delay-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0;
}

#horel-workshop .ha-delay-grid::before,
#horel-workshop .ha-delay-grid::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--horel-line);
}

#horel-workshop .ha-delay-grid::before {
    left: 33.333%;
}

#horel-workshop .ha-delay-grid::after {
    left: 66.666%;
}

#horel-workshop .ha-delay-card {
    padding: 0 28px;
    text-align: center;
}

/* ---------------------------------------------------------
   SAV
   --------------------------------------------------------- */

#horel-workshop .ha-sav {
    margin-bottom: var(--horel-break-space);
    padding-top: 12px;
    border-top: 1px solid var(--horel-ink);
}

#horel-workshop .ha-sav-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--horel-gap);
}

#horel-workshop .ha-sav-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--horel-card-padding);
    background: var(--horel-panel);
}

/* ---------------------------------------------------------
   Contact
   --------------------------------------------------------- */

#horel-workshop .ha-contact {
    margin-bottom: var(--horel-chapter-gap);
    padding-top: 12px;
    border-top: 1px solid var(--horel-ink);
}

/* ---------------------------------------------------------
   Informations pratiques
   --------------------------------------------------------- */

#horel-workshop .ha-practical-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0;
}

#horel-workshop .ha-practical-grid::before,
#horel-workshop .ha-practical-grid::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--horel-line);
}

#horel-workshop .ha-practical-grid::before {
    left: 33.333%;
}

#horel-workshop .ha-practical-grid::after {
    left: 66.666%;
}

#horel-workshop .ha-practical-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0 28px;
    text-align: center;
}

/* ---------------------------------------------------------
   Horaires
   --------------------------------------------------------- */

#horel-workshop .ha-hours-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#horel-workshop .ha-hours-days {
    font-size: var(--horel-card-text);
    line-height: 1.5;
}

#horel-workshop .ha-hours-time {
    margin-top: 2px;
    font-size: var(--horel-card-text);
    line-height: 1.5;
}

/* ---------------------------------------------------------
   Formulaire
   --------------------------------------------------------- */

#horel-workshop .ha-form {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto var(--horel-break-space);
    padding: var(--horel-panel-padding);
    background: var(--horel-panel);
}

#horel-workshop .ha-form .horel-form {
    width: 100%;
    max-width: none;
}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */

#horel-workshop .ha-faq {
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--horel-ink);
}

#horel-workshop .ha-faq .ha-section-heading {
    margin-bottom: 26px;
}

#horel-workshop .ha-faq-item {
    margin: 0;
    border-top: 1px solid var(--horel-line);
}

#horel-workshop .ha-faq-item:last-child {
    border-bottom: 1px solid var(--horel-line);
}

#horel-workshop .ha-faq-item summary {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--horel-text);
    font-weight: 500;
    line-height: 1.5;
}

#horel-workshop .ha-faq-item summary::-webkit-details-marker {
    display: none;
}

#horel-workshop .ha-faq-number {
    font-size: var(--horel-micro);
    font-weight: 500;
}

#horel-workshop .ha-faq-plus {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    justify-self: end;
}

#horel-workshop .ha-faq-plus::before,
#horel-workshop .ha-faq-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--horel-ink);
    transform: translate(-50%, -50%);
}

#horel-workshop .ha-faq-plus::before {
    width: 16px;
    height: 1px;
}

#horel-workshop .ha-faq-plus::after {
    width: 1px;
    height: 16px;
    transition: transform .2s ease;
}

#horel-workshop .ha-faq-item[open] .ha-faq-plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

#horel-workshop .ha-faq-answer {
    max-width: 950px;
    padding: 0 0 26px 52px;
}

@media (max-width: 991px) {

    #horel-workshop .ha-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    #horel-workshop .ha-photo {
        grid-row: 1;
    }

    #horel-workshop .ha-copy {
        top: 0;
    }

    #horel-workshop .ha-section-heading,
    #horel-workshop .ha-contact {
        margin-left: auto;
        margin-right: auto;
    }

    #horel-workshop .ha-sav-card,
    #horel-workshop .ha-practical-card {
        align-items: center;
    }

    #horel-workshop .ha-hours-line {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Exceptions : les questions de la FAQ et le formulaire restent alignés à gauche */
    #horel-workshop .ha-faq-item,
    #horel-workshop .ha-form .horel-form {
        text-align: left;
    }

}

@media (max-width: 767px) {

    #horel-workshop .ha-service-grid,
    #horel-workshop .ha-delay-grid,
    #horel-workshop .ha-sav-grid,
    #horel-workshop .ha-practical-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #horel-workshop .ha-sav-grid {
        gap: 24px;
    }

    #horel-workshop .ha-service-card,
    #horel-workshop .ha-delay-card,
    #horel-workshop .ha-practical-card {
        padding: 24px 0;
    }

    #horel-workshop .ha-service-card + .ha-service-card,
    #horel-workshop .ha-delay-card + .ha-delay-card,
    #horel-workshop .ha-practical-card + .ha-practical-card {
        border-top: 1px solid var(--horel-line);
    }

    #horel-workshop .ha-service-grid::before,
    #horel-workshop .ha-service-grid::after,
    #horel-workshop .ha-delay-grid::before,
    #horel-workshop .ha-delay-grid::after,
    #horel-workshop .ha-practical-grid::before,
    #horel-workshop .ha-practical-grid::after {
        content: none;
    }

    #horel-workshop .ha-faq-answer {
        padding-left: 0;
    }

}

@media (max-width: 575px) {

    #horel-workshop .ha-hours-line {
        gap: 10px;
    }

    #horel-workshop .ha-faq-item summary {
        grid-template-columns: 32px minmax(0, 1fr) 20px;
    }

}


/* =========================================================
   PARTIE B — NOUS CONTACTER (.contact-page)
   14/10/2026 — fusion de horel-contact.css dans ce fichier
   commun, pour intégrer "Nous contacter" à la même famille
   que Notre histoire / Boutique / Atelier.

   Remarque : la page "Nous contacter" est une page PrestaShop
   standard (contrôleur "contact"), pas une page du module
   thrive_mystaticpages. Elle n'a donc pas de racine #horel-xxx
   ni les variables CSS de la PARTIE A : les règles ci-dessous
   sont volontairement autonomes (valeurs écrites en dur), et
   scopées par la classe .contact-page déjà posée sur son
   conteneur dans contact.tpl.
   ========================================================= */

/* ---------------------------------------------------------
   1. NAVIGATION
   Même rendu visuel que .hh-nav / .hp-nav / .ha-nav (PARTIE A3),
   dupliqué ici en valeurs fixes car hors de la famille #horel-xxx.
   --------------------------------------------------------- */

.contact-page .horel-contact-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 48px;
    margin: 0 0 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #121212;
    font-family: Montserrat, sans-serif;
}

.contact-page .horel-contact-nav a {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 44px;
    color: #121212;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
}

.contact-page .horel-contact-nav a::after {
    content: "";
    display: block;
    margin-top: 2px;
    border-bottom: 1.5px solid currentColor;
    transform: scaleX(0);
}

.contact-page .horel-contact-nav a[aria-current="page"] {
    font-weight: 700;
}

.contact-page .horel-contact-nav a[aria-current="page"]::after,
.contact-page .horel-contact-nav a:hover::after,
.contact-page .horel-contact-nav a:focus-visible::after {
    transform: scaleX(1);
}

@media (max-width: 991px) {

    .contact-page .horel-contact-nav {
        gap: 8px 24px;
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

}

@media (max-width: 575px) {

    .contact-page .horel-contact-nav {
        gap: 0 20px;
    }

    .contact-page .horel-contact-nav a {
        font-size: 13px;
        white-space: nowrap;
    }

}


/* ---------------------------------------------------------
   2. TITRE
   --------------------------------------------------------- */

.horel-contact-hero {
    max-width: 640px;
    margin: 50px auto 40px;
    text-align: center;
    font-family: Montserrat, sans-serif;
}

.horel-contact-hero h1 {
    margin: 0 0 14px;
    color: #121212;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: .02em;
}

.horel-contact-hero p {
    margin: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   3. CONTACT RAPIDE
   --------------------------------------------------------- */

.horel-contact-quick {
    max-width: 860px;
    margin: 0 auto 50px;
    font-family: Montserrat, sans-serif;
}

.hcq-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid #e3e3e3;
}

.hcq-row:first-child {
    border-top: 1px solid #e3e3e3;
}

.hcq-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.hcq-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: #121212;
}

/* HOREL 14/10/2026 — le CSS global du thème remplit les formes SVG
   (fill) en noir plein, ce qui écrase l'attribut fill="none" posé sur
   le <svg> et transforme les icônes en pavés noirs. On reforce ici
   explicitement le contour sur toutes les formes internes. */
.hcq-icon,
.hcq-icon * {
    fill: none;
    stroke: currentColor;
}

.hcq-title {
    margin: 0 0 4px;
    color: #121212;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hcq-desc {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.hcq-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 230px;
    padding: 11px 20px;
    border: 1px solid #121212;
    color: #121212;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.hcq-action:hover {
    background: #121212;
    color: #fff;
}


/* ---------------------------------------------------------
   4. CARTE DU FORMULAIRE
   --------------------------------------------------------- */

.horel-contact-card {
    max-width: 860px;
    margin: 0 auto 60px;
    padding: 44px 48px;
    border: 1px solid #121212;
    background: #fff;
}

.horel-contact-card-heading {
    text-align: center;
    margin: 0 0 32px;
    font-family: Montserrat, sans-serif;
}

.horel-contact-card-heading h2 {
    margin: 0 0 8px;
    color: #121212;
    font-size: 20px;
    font-weight: 600;
}

.horel-contact-card-heading p {
    margin: 0;
    color: #666;
    font-size: 14px;
}


/* ---------------------------------------------------------
   5. MESSAGE DE CONFIRMATION
   (surcharge .horel-form__notice de horel-form.css,
   chargé après lui sur cette page)
   --------------------------------------------------------- */

.horel-contact-card .horel-form__notice {
    max-width: 100%;
    margin: 0 0 32px;
    padding: 28px 32px;
    text-align: center;
}

.horel-contact-card .horel-form__notice ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}


/* ---------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .hcq-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .hcq-action {
        width: 100%;
    }

    .horel-contact-card {
        padding: 28px 22px;
    }

}