.mode-produit__titre-section { margin: var(--mode-art-espacement, 32px) 0 12px; }
.mode-produit__chapo {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--mode-art-texte, #333);
    line-height: 1.5;
    margin-bottom: 20px;
}
.mode-produit__paragraphe { line-height: 1.7; margin-bottom: 16px; }

.mode-produit { max-width: var(--mode-art-largeur-max, 780px); margin: 0 auto; font-family: var(--mode-art-police-texte, 'Inter', sans-serif); }
.mode-produit h1,
.mode-produit h2,
.mode-produit h3,
.mode-produit__titre-section,
.mode-produit__hero-titre {
    font-family: var(--mode-art-titre-police, 'Fraunces', serif);
}
.mode-produit__image-une { margin-bottom: 20px; }
.mode-produit__image-une img {
    width: 100%;
    height: auto;
    border-radius: var(--mode-art-rayon, 4px);
    display: block;
}
.mode-produit__colonne img,
.mode-art-carte { border-radius: var(--mode-art-rayon, 4px); }

.mode-produit__ligne {
    display: grid;
    gap: 24px;
    margin: var(--mode-art-espacement, 24px) 0;
}
.mode-produit__ligne--2.mode-produit__ligne--ratio-50-50 { grid-template-columns: 1fr 1fr; }
.mode-produit__ligne--2.mode-produit__ligne--ratio-30-70 { grid-template-columns: 3fr 7fr; }
.mode-produit__ligne--2.mode-produit__ligne--ratio-70-30 { grid-template-columns: 7fr 3fr; }
.mode-produit__ligne--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Inversion d'ordre : "direction:rtl" retourne visuellement l'ordre des colonnes
   de la grille sans toucher au HTML (colonne_1 reste bien colonne_1 dans le code) ;
   on repasse le texte en "ltr" à l'intérieur pour qu'il continue à se lire normalement.
   Utile pour alterner image/texte d'une ligne à l'autre. */
.mode-produit__ligne--inverse { direction: rtl; }
.mode-produit__ligne--inverse > .mode-produit__colonne { direction: ltr; }

.mode-produit__colonne--haut   { align-self: flex-start; }
.mode-produit__colonne--centre { align-self: center; }
.mode-produit__colonne--bas    { align-self: flex-end; }

.mode-produit__colonne img { width: 100%; height: auto; display: block; border-radius: 4px; }
.mode-produit__colonne-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.mode-produit__colonne-video iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

@media (max-width: 680px) {
    /* !important nécessaire ici : les règles de ratio (.mode-produit__ligne--2.mode-produit__ligne--ratio-50-50
       etc.) ont une spécificité CSS plus forte que ".mode-produit__ligne" seul, donc sans ça elles
       continuaient de gagner sur mobile malgré cette media query. */
    .mode-produit__ligne {
        grid-template-columns: 1fr !important; /* empile les colonnes (images/textes/vidéos) les unes sous les autres */
        gap: 16px !important;
    }
    .mode-produit__colonne:not(:last-child) {
        margin-bottom: 4px; /* petit respire supplémentaire entre deux éléments empilés */
    }
}

.mode-produit__palette { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.mode-produit__pastille {
    width: 100px; height: 100px; border-radius: 6px;
    display: flex; align-items: flex-end; padding: 8px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.mode-produit__pastille span {
    font-size: 11px; background: rgba(255,255,255,.85); padding: 2px 4px; border-radius: 3px;
}

.mode-produit__bouton-wrap { margin: 20px 0; display: flex; }
.mode-produit__bouton-wrap--gauche { justify-content: flex-start; }
.mode-produit__bouton-wrap--centre { justify-content: center; }
.mode-produit__bouton-wrap--droite { justify-content: flex-end; }

.mode-produit__bouton {
    display: inline-block;
    padding: 12px 28px;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--mode-art-rayon, 4px);
    transition: opacity .15s ease;
}
.mode-produit__bouton:hover { opacity: .85; }
.mode-produit__bouton--primaire {
    background: var(--mode-art-accent, #c9a24b);
    color: #fff;
}
.mode-produit__bouton--secondaire {
    background: transparent;
    color: var(--mode-art-accent, #c9a24b);
    box-shadow: inset 0 0 0 2px var(--mode-art-accent, #c9a24b);
}

.mode-produit__citation {
    border-left: 4px solid var(--mode-art-accent, #c9a24b);
    margin: 24px 0;
    padding: 8px 24px;
    font-style: italic;
    font-size: 1.1em;
}
.mode-produit__citation cite { display: block; margin-top: 8px; font-style: normal; font-size: .85em; opacity: .7; }

.mode-produit__separateur {
    border: none;
    border-top: 1px solid rgba(0,0,0,.1);
    margin: var(--mode-art-espacement, 32px) 0;
}

.mode-produit__encart {
    border-radius: var(--mode-art-rayon, 4px);
    padding: 16px 20px;
    margin: 20px 0;
}
.mode-produit__encart--astuce { background: #fff8e5; border-left: 4px solid #dba617; }
.mode-produit__encart--info   { background: #eaf3fb; border-left: 4px solid #2271b1; }
.mode-produit__encart--alerte { background: #fbeaea; border-left: 4px solid #d63638; }

.mode-produit__hero {
    position: relative;
    width: 100%;
    margin-top: var(--mode-art-espacement, 24px);
    margin-bottom: var(--mode-art-espacement, 24px);
    background-size: cover;
    background-position: center;
    background-color: #e5e5e5; /* couleur de secours si pas d'image */
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* Variante "Plein écran" — bord à bord, en option via le champ "affichage" du bloc.
   Ne fonctionne correctement que si la page respecte la structure attendue par le
   thème (voir #primary/.content-area dans les templates) : sinon repasser la
   cliente sur "Largeur du contenu" pour ce bloc. */
.mode-produit__hero--fullscreen {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.mode-produit__hero--compact     { min-height: 260px; }
.mode-produit__hero--moyen       { min-height: 440px; }
.mode-produit__hero--plein_ecran { min-height: 90vh; }

.mode-produit__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
}

.mode-produit__hero-contenu {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--mode-art-largeur-max, 780px);
    margin: 0 auto;
    padding: 32px 24px;
    color: #fff;
}
.mode-produit__hero--gauche .mode-produit__hero-contenu,
.mode-produit__hero--gauche .mode-produit__hero-titre,
.mode-produit__hero--gauche .mode-produit__hero-sous-texte { text-align: left !important; }

.mode-produit__hero--centre .mode-produit__hero-contenu,
.mode-produit__hero--centre .mode-produit__hero-titre,
.mode-produit__hero--centre .mode-produit__hero-sous-texte { text-align: center !important; }

.mode-produit__hero--droite .mode-produit__hero-contenu,
.mode-produit__hero--droite .mode-produit__hero-titre,
.mode-produit__hero--droite .mode-produit__hero-sous-texte { text-align: right !important; }

.mode-produit__hero-titre { margin: 0 0 8px; line-height: 1.15; }
.mode-produit__hero-sous-texte { font-size: 1.1em; opacity: .9; margin: 0 0 20px; }

@media (max-width: 680px) {
    /* Un H1/H2 en taille "desktop" déborde souvent sur mobile — on réduit
       proportionnellement plutôt que de laisser le navigateur gérer seul. */
    .mode-produit__hero-titre { font-size: clamp(22px, 7vw, 32px) !important; }
    .mode-produit__hero-sous-texte { font-size: 1em; }
    /* Hauteurs un peu moins généreuses sur petit écran, pour éviter un bloc
       qui occupe tout l'écran avant même d'arriver au contenu de l'article. */
    .mode-produit__hero--compact     { min-height: 200px; }
    .mode-produit__hero--moyen       { min-height: 320px; }
    .mode-produit__hero--plein_ecran { min-height: 70vh; }
    .mode-produit__hero-contenu { padding: 24px 20px; }
    .mode-produit__bouton-wrap .mode-produit__bouton { width: 100%; text-align: center; }
}

.mode-art-breadcrumb { margin: 0 0 16px; font-size: 13px; }
.mode-art-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 6px; }
.mode-art-breadcrumb a { text-decoration: none; color: var(--mode-art-accent, #c9a24b); }
.mode-art-breadcrumb a:hover { text-decoration: underline; }
.mode-art-breadcrumb span[aria-current] { opacity: .7; }
.mode-art-breadcrumb__sep { opacity: .4; }

.mode-archive__header { max-width: var(--mode-art-largeur-max, 780px); margin: 0 auto 24px; }
.mode-archive__intro { opacity: .75; }
.mode-archive__grille {
    max-width: var(--mode-art-largeur-max, 780px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(var(--mode-art-archive-colonnes, 3), 1fr);
    gap: 24px;
}
.mode-archive__carte {
    text-decoration: none;
    color: inherit;
    display: block;
}
.mode-archive__image img { width: 100%; height: auto; border-radius: var(--mode-art-rayon, 4px); display: block; }
.mode-archive__etiquette {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mode-art-accent, #c9a24b);
    margin: 8px 0 4px;
}
.mode-archive__carte h2 { font-size: 1.05em; margin: 0 0 4px; }
.mode-archive__extrait { font-size: .9em; opacity: .75; line-height: 1.5; margin: 0; }
.mode-archive__pagination {
    max-width: var(--mode-art-largeur-max, 780px);
    margin: 32px auto 0;
    text-align: center;
}

@media (max-width: 680px) {
    .mode-archive__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
    .mode-archive__grille { grid-template-columns: 1fr; }
}

/* "Vous aimerez aussi" — grille de suggestions en bas d'article */
.mode-produit__suggestions { margin-top: var(--mode-art-espacement, 32px); }
.mode-produit__suggestions h2 { margin-bottom: 16px; }
.mode-produit__suggestions-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.mode-produit__suggestion-carte {
    display: block;
    text-decoration: none;
    color: inherit;
}
.mode-produit__suggestion-carte img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--mode-art-rayon, 4px);
    display: block;
    margin-bottom: 8px;
}
.mode-produit__suggestion-carte span {
    display: block;
    font-size: 0.95em;
    font-weight: 500;
}

@media (max-width: 680px) {
    .mode-produit__suggestions-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
    .mode-produit__suggestions-grille { grid-template-columns: 1fr; }
}