/* Pages de contenu à tranches (Prestations, Pour les professionnels, À propos, pages projet
   non migrées) : mise en page d'origine, typo, tailles de texte et d'images mises à jour
   sur le design system. Ne change que l'apparence, pas le balisage. Classe body .olv-contenu
   (inc/projets.php). */

/* Contenu centré, plus étroit : les images ne prennent plus la moitié de l'écran */

.olv-contenu .flexible_container > section > div > .grid {
    max-width: 1080px;
    margin: 0 auto;
    align-items: start;
}

.olv-contenu .flexible_container .main-section {
    padding: 2.5rem max(1.25rem, env(safe-area-inset-left, 0px));
}

@media (min-width: 1024px) {
    .olv-contenu .flexible_container .main-section { padding: 3rem 3rem; }
}

/* ---------- Typo ---------- */
.olv-contenu .flexible_container .text-gray { color: var(--olv-texte); }

.olv-contenu .flexible_container .h2 {
    margin: 0;
    padding: 0;
    font-family: argent-cf, Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
    line-height: 1.2;
    color: var(--olv-texte);
    text-wrap: balance;
}

/* Le premier titre de la page (titre du projet) un cran au-dessus */
.olv-contenu .flexible_container:first-child .h2 {
    font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem);
}

/* Filet sous le titre */
.olv-contenu .flexible_container .max-w-\[10vw\] {
    max-width: none;
    padding: 1rem 0 1.1rem;
}

.olv-contenu .flexible_container hr {
    width: 4.5rem;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--olv-beige);
}

.olv-contenu .flexible_container .h2 + .body-1,
.olv-contenu .flexible_container h2.h2 { margin-bottom: 1rem; }

.olv-contenu .flexible_container .body-1 {
    max-width: 34rem;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--olv-texte);
}

.olv-contenu .flexible_container .body-1 p { margin: 0 0 0.75rem; }
.olv-contenu .flexible_container .body-1 p:last-child { margin-bottom: 0; }
.olv-contenu .flexible_container .body-1 a { color: var(--olv-terracotta-fonce); }

/* ---------- Images (tranche image + texte) ---------- */
.olv-contenu .flexible_container .col-2.bg-orange {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem max(1.25rem, env(safe-area-inset-left, 0px));
    background: transparent;
}

@media (min-width: 1024px) {
    .olv-contenu .flexible_container .col-2.bg-orange { padding: 2.5rem 2rem; }
}

.olv-contenu .flexible_container .col-2 > img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 480px;
    object-fit: contain;
}

/* ---------- Carrousel (tranche slider + texte) ---------- */
.olv-contenu .flexible_container .col-2 > .h-full {
    width: 100%;
}

.olv-contenu .flexible_container .swiper-image {
    --swiper-theme-color: var(--olv-terracotta-fonce);
    --swiper-navigation-size: 26px;
    height: clamp(300px, 38vw, 460px);
    min-height: 0;
    background: var(--olv-creme);
}

.olv-contenu .flexible_container .swiper-image .swiper-slide {
    background-size: contain;
}

.olv-contenu .flexible_container .swiper-button-prev,
.olv-contenu .flexible_container .swiper-button-next {
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -1.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
}

.olv-contenu .flexible_container .swiper-button-prev::after,
.olv-contenu .flexible_container .swiper-button-next::after { font-size: 14px; font-weight: 700; }



/* ---------- Boutons des tranches (comme .olv-btn--primary) ---------- */
.olv-contenu .flexible_container a.button {
    display: inline-block;
    padding: 0.85rem 1.6rem;
    border: 1px solid var(--olv-terracotta-fonce);
    background: var(--olv-terracotta-fonce);
    color: var(--olv-blanc);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
}

.olv-contenu .flexible_container a.button:hover,
.olv-contenu .flexible_container a.button:focus-visible {
    background: var(--olv-texte);
    border-color: var(--olv-texte);
}

.olv-contenu .flexible_container .text-center.pt-6 { text-align: left; }

/* ---------- Tranche « colonnage » (texte long en colonne) ---------- */
.olv-contenu .hook_contenu_avec_colonnage > section {
    padding: 3rem max(1.25rem, env(safe-area-inset-left, 0px));
}

.olv-contenu .hook_contenu_avec_colonnage > section > div {
    max-width: 46rem;
    margin: 0 auto;
}

.olv-contenu .hook_contenu_avec_colonnage [class*="lg:w-"] {
    width: 100%;
    margin: 0;
}

.olv-contenu .hook_contenu_avec_colonnage .content {
    max-width: none;
}

.olv-contenu .flexible_container :is(.content, .body-1) :is(h2, h3, h4) {
    margin: 2rem 0 0.75rem;
    padding: 0;
    font-family: argent-cf, Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
    line-height: 1.25;
    color: var(--olv-texte);
}

.olv-contenu .flexible_container :is(.content, .body-1) :is(h3, h4) { font-size: 1.2rem; }

.olv-contenu .flexible_container :is(.content, .body-1) > :first-child { margin-top: 0; }

.olv-contenu .flexible_container .content ul,
.olv-contenu .flexible_container .body-1 ul { list-style: disc outside; margin: 0 0 0.75rem 1.25rem; padding: 0; }
.olv-contenu .flexible_container .content li { margin-bottom: 0.25rem; }

/* ---------- Tranche « image + lien » (portrait + texte, À propos) ---------- */
.olv-contenu .hook_contenu_double_colonne_image__lien > section {
    min-height: 0;
    padding: 3rem max(1.25rem, env(safe-area-inset-left, 0px));
}

.olv-contenu .hook_contenu_double_colonne_image__lien > section > div > .grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}

@media (min-width: 768px) {
    .olv-contenu .hook_contenu_double_colonne_image__lien > section > div > .grid {
        grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
        gap: 3.5rem;
    }
}

/* Les colonnes Tailwind (col-span-6) ne s'appliquent plus : 2 colonnes explicites */
.olv-contenu .hook_contenu_double_colonne_image__lien > section > div > .grid > div {
    grid-column: auto;
    min-width: 0;
}

.olv-contenu .hook_contenu_double_colonne_image__lien .flex.items-center.justify-center,
.olv-contenu .hook_contenu_double_colonne_image__lien .h-full.flex { display: block; height: auto; }

/* Grilles internes seulement : la grille extérieure (2 colonnes) doit rester en grid, sinon plus d'espace */
.olv-contenu .hook_contenu_double_colonne_image__lien > section > div > .grid .grid.grid-cols-12,
.olv-contenu .hook_contenu_double_colonne_image__lien .grid.relative { display: block; }

.olv-contenu .hook_contenu_double_colonne_image__lien img {
    display: block;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: none;
    padding: 0;
    margin: 0 auto;
    object-fit: cover;
    object-position: 50% 15%;
}

@media (min-width: 768px) {
    .olv-contenu .hook_contenu_double_colonne_image__lien img { position: sticky; top: 2rem; }
}

.olv-contenu .hook_contenu_double_colonne_image__lien .lg\:-top-5 { top: 0; }
.olv-contenu .hook_contenu_double_colonne_image__lien .max-w-xl { max-width: 36rem; }

/* Titre « Olivia Offroy » + « décoratrice d'intérieur » en manuscrite, comme sur l'accueil */
.olv-contenu .flexible_container .h2 .olv-titre-nom { display: block; }
.olv-contenu .flexible_container .h2 .olv-titre-accroche {
    display: block;
    margin-top: .2rem;
    font-family: 'Alex Brush', cursive;
    font-size: clamp(1.7rem, 1.35rem + 1vw, 2.2rem);
    line-height: 1.1;
    color: var(--olv-terracotta);
}

.olv-contenu .hook_contenu_double_colonne_image__lien .h2 { margin-bottom: 1.25rem; }

/* Intertitres saisis en gras dans l'éditeur : la serif reste en graisse normale */
.olv-contenu .flexible_container :is(.content, .body-1) :is(h2, h3, h4) strong { font-weight: 400; }

/* Tranche image + texte : texte en haut de colonne, photo collée en haut et qui suit le défilement */
.olv-contenu .hook_contenu_double_colonne_image__texte .col-1 > .h-full { display: block; height: auto; }

@media (min-width: 1024px) {
    .olv-contenu .hook_contenu_double_colonne_image__texte .col-2.bg-orange {
        position: sticky;
        top: 1.5rem;
        align-self: start;
    }
}

/* Intertitres (paragraphes en gras convertis, olv_intertitres) */
.olv-contenu .flexible_container .olv-intertitre {
    margin: 1.75rem 0 .6rem;
    font-family: argent-cf, Georgia, serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--olv-texte);
}

.olv-contenu .flexible_container .body-1 > .olv-intertitre:first-child { margin-top: 0; }