/* ========================================
   ArchiNet — Sous-Offre Blocks CSS
   Nouveaux blocks ACF pour les pages sous-offres
   ======================================== */

/* --- Variables réutilisables --- */
:root {
    --archinet-cs: #FF6200;
    --archinet-cs-light: #F7B731;
    --archinet-sd: #198754;
    --archinet-sd-light: #7BC67E;
    --archinet-oi: #A60096;
    --archinet-oi-light: #E91E90;
    --archinet-primary: #00B1EB;
    --archinet-secondary: #143F83;
    --archinet-dark: #1C1C1C;
}

/* ========================================
   Block: Hero Sous-Offre
   ======================================== */
.block-hero-sous-offre {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    padding: 40px 0 50px;
    overflow: hidden;
}

.block-hero-sous-offre .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.block-hero-sous-offre .hero-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.75;
    z-index: 1;
}

.block-hero-sous-offre .hero-overlay.gradient-default { background-image: linear-gradient(142deg, #143f83 40%, #00b1eb 100%); }
.block-hero-sous-offre .hero-overlay.gradient-cs { background-image: linear-gradient(142deg, #143f83 40%, #FF6200 100%); }
.block-hero-sous-offre .hero-overlay.gradient-sd { background-image: linear-gradient(142deg, #143f83 40%, #198754 100%); }
.block-hero-sous-offre .hero-overlay.gradient-oi { background-image: linear-gradient(142deg, #143f83 40%, #A60096 100%); }

.block-hero-sous-offre .hero-trame {
    position: absolute;
    z-index: 5;
    left: 0;
    bottom: 0;
    right: 0;
    height: 160px;
    opacity: 0.25;
    background-position: top center;
    background-size: auto 250%;
    background-repeat: repeat-x;
    filter: brightness(0);
}

.block-hero-sous-offre .hero-watermark {
    position: absolute;
    z-index: 4;
    top: 50%;
    height: 200%;
    width: 100%;
    transform: translateY(-50%);
    opacity: 0.1;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 105% top;
}

.block-hero-sous-offre .hero-bottom-overlay {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(20, 40, 80, 0.7) 0%, transparent 100%);
    clip-path: polygon(0 40%, 100% 0%, 100% 100%, 0 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.block-hero-sous-offre .hero-content {
    position: relative;
    z-index: 20;
    max-width: 800px;
}

.block-hero-sous-offre .hero-breadcrumb {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 80px;
}

.block-hero-sous-offre .hero-breadcrumb a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

.block-hero-sous-offre .hero-breadcrumb a:hover {
    color: #fff;
}

.block-hero-sous-offre .hero-breadcrumb span {
    margin: 0 6px;
    opacity: 0.5;
}

.block-hero-sous-offre h1 {
    font-family: "DIN Pro Cond", sans-serif;
    font-size: calc(1.425rem + 2.1vw);
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.15;
    margin: 0 0 20px;
}

.block-hero-sous-offre .hero-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   Block: Chiffre Clé
   ======================================== */
.block-chiffre-cle {
    position: relative;
    overflow: hidden;
    margin: 30px 0;
    padding: 50px 40px;
    color: #fff;
}

.block-chiffre-cle .chiffre-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.block-chiffre-cle .chiffre-bg.gradient-default { background-image: linear-gradient(142deg, #143f83 40%, #00b1eb 100%); }
.block-chiffre-cle .chiffre-bg.gradient-cs { background-image: linear-gradient(142deg, #143f83 40%, #FF6200 100%); }
.block-chiffre-cle .chiffre-bg.gradient-sd { background-image: linear-gradient(142deg, #143f83 40%, #198754 100%); }
.block-chiffre-cle .chiffre-bg.gradient-oi { background-image: linear-gradient(142deg, #143f83 40%, #A60096 100%); }

.block-chiffre-cle .chiffre-diagonal {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.05);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

.block-chiffre-cle .chiffre-watermark {
    position: absolute;
    z-index: 1;
    right: -10%;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    height: 150%;
    opacity: 0.07;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.block-chiffre-cle .chiffre-content {
    position: relative;
    z-index: 10;
}

.block-chiffre-cle .chiffre-number {
    font-family: "DIN Pro Cond", sans-serif;
    font-size: 80px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 15px;
}

.block-chiffre-cle .chiffre-text {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.9;
}

.block-chiffre-cle .chiffre-text small {
    display: block;
    margin-top: 6px;
    opacity: 0.6;
    font-size: 13px;
}

/* ========================================
   Block: Offre Details (2 colonnes)
   ======================================== */
.block-offre-details {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.block-offre-details .offre-contenu,
.block-offre-details .offre-pourquoi {
    flex: 1;
}

.block-offre-details h2 {
    font-family: "DIN Pro Cond", sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--archinet-dark);
    margin: 0 0 20px;
}

/* Contenu list */
.block-offre-details .offre-contenu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.block-offre-details .offre-contenu li {
    font-family: 'Manrope', sans-serif;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    font-size: 15px;
    color: #444;
    line-height: 1.6;
}

.block-offre-details .offre-contenu li::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-left: 0;
    background: linear-gradient(135deg, var(--archinet-secondary), var(--archinet-primary));
    transform: translateY(2px);
}

/* Pourquoi items */
.block-offre-details .pourquoi-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
}

.block-offre-details .pourquoi-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--archinet-secondary), var(--archinet-primary));
    color: #fff;
    font-family: "DIN Pro Cond", sans-serif;
    font-size: 20px;
    font-weight: 500;
}

.block-offre-details .pourquoi-text strong {
    font-family: "DIN Pro Cond", sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--archinet-dark);
    display: block;
    margin-bottom: 4px;
}

.block-offre-details .pourquoi-text p {
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   Block: Partenariat
   ======================================== */
.block-partenariat {
    position: relative;
    overflow: hidden;
    margin: 40px 0;
    padding: 45px 40px;
    color: #fff;
}

.block-partenariat .partenariat-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(142deg, #143f83 40%, #00b1eb 100%);
    z-index: 0;
}

.block-partenariat .partenariat-diagonal {
    position: absolute;
    z-index: 1;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(20, 40, 80, 0.5) 0%, transparent 100%);
    clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0 100%);
}

.block-partenariat .partenariat-watermark {
    position: absolute;
    z-index: 1;
    top: 50%; height: 300%; width: 100%;
    transform: translateY(-50%);
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='241.958' height='300' viewBox='0 0 241.958 300'%3E%3Cpath d='M3.371,301.927,117.624,46.953s16.833-45.026,75.1-45.026h52.6V5.661s-24.356-3.572-38.643,30.523-93.417,215.1-93.417,215.1-19.036,50.64-77.872,50.64Z' transform='translate(-3.371 -1.927)' fill='%23FFFFFF' opacity='1'/%3E%3C/svg%3E");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 95% top;
}

.block-partenariat .partenariat-inner {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: start;
    gap: 30px;
}

.block-partenariat .partenariat-img {
    flex: 0 0 180px;
    height: 130px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.block-partenariat .partenariat-img img {
    max-width: 100%;
    max-height: 100%;
}

.block-partenariat .partenariat-content {
    max-width: 75%;
}

.block-partenariat .partenariat-content h3 {
    font-family: "DIN Pro Cond", sans-serif;
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px;
    color: #fff;
}

.block-partenariat .partenariat-content p {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.9;
    margin: 0 0 15px;
}

.block-partenariat .btn-sm {
    display: inline-flex;
    align-items: center;
    padding: 8px 22px;
    background: #fff;
    color: #143F83;
    text-decoration: none;
    font-family: "DIN Pro Cond", sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 15px;
    transition: transform .2s;
}

.block-partenariat .btn-sm:hover {
    transform: scale(1.05);
}

/* ========================================
   Block: Pullquote ArchiNet
   ======================================== */
.block-pullquote-archinet {
    margin: 40px 0;
    padding: 80px 60px;
    text-align: center;
}

.block-pullquote-archinet p {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    line-height: 1.8;
    margin: 0 auto;
    color: #444;
    max-width: 900px;
}

.block-pullquote-archinet p strong {
    color: var(--archinet-dark);
}

/* ========================================
   Block: CTA Hero
   ======================================== */
.block-cta-hero {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 40px;
    overflow: hidden;
    text-align: center;
}

.block-cta-hero .cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.block-cta-hero .cta-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(142deg, #143f83 40%, #00b1eb 100%);
    opacity: 0.75;
    z-index: 1;
}

.block-cta-hero .cta-content {
    position: relative;
    z-index: 20;
    color: #fff;
}

.block-cta-hero .cta-content h2 {
    font-family: "DIN Pro Cond", sans-serif;
    font-size: calc(1.2rem + 1.5vw);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 15px;
    color: #fff;
}

.block-cta-hero .cta-content p {
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    margin: 0 0 30px;
    opacity: 0.9;
}

.block-cta-hero .cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 16px 50px;
    background: #fff;
    color: var(--archinet-secondary);
    font-family: "DIN Pro Cond", sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: transform .2s;
}

.block-cta-hero .cta-btn:hover {
    transform: scale(1.05);
}

/* ========================================
   Block: Trame Separator
   ======================================== */
.block-trame-separator {
    position: relative;
    z-index: 0;
    height: 250px;
    background-size: auto 250%;
    background-position: center;
    background-repeat: repeat-x;
    opacity: 0.07;
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at center bottom, black 40%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 100% at center bottom, black 40%, transparent 75%);
}

.block-trame-separator.trame-top {
    margin-bottom: -125px;
}

.block-trame-separator.trame-bottom {
    transform: scaleY(-1);
    margin-top: -125px;
}

/* ========================================
   Block: FAQ
   ======================================== */
.block-faq {
    margin: 60px 0;
}

.block-faq h2 {
    font-family: "DIN Pro Cond", sans-serif;
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--archinet-dark);
    margin: 0 0 30px;
}

.faq-item {
    border-bottom: 1px solid #eee;
}

.faq-item:first-child {
    border-top: 1px solid #eee;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    cursor: pointer;
    font-family: "DIN Pro Cond", sans-serif;
    font-size: 19px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--archinet-dark);
    transition: color .2s;
    user-select: none;
}

.faq-question:hover {
    color: var(--archinet-primary);
}

.faq-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .3s;
    flex-shrink: 0;
    margin-left: 15px;
}

.faq-item.is-open .faq-chevron {
    transform: rotate(-135deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.faq-item.is-open .faq-answer {
    max-height: 500px;
}

.faq-answer-inner {
    padding: 0 0 20px;
    max-width: 75%;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    color: #555;
    line-height: 1.7;
}

.faq-answer-inner p {
    margin: 0 0 10px;
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Block: Expertises — homogeneous image ratios
   ----------------------------------------
   Native images have varying aspect ratios which makes the 3-card row
   look uneven. Force a fixed 16/9 rectangle with cover crop so all
   cards align. Higher specificity than main.css's .block-expertises
   .expertise img rule (which loads after this file).
   ======================================== */
.block-expertises .row .expertise img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0 0 1rem;
    display: block;
}

/* Homepage uses logo-style images (CS/SD/OI with transparent gradients),
   not photos. Override to "contain" so the full logo is visible. */
.home .block-expertises .row .expertise img {
    object-fit: contain;
}

/* ========================================
   Block: Expertises — align CTAs at the bottom of each card
   ----------------------------------------
   With varying description lengths, the "Decouvrir l'offre ..." CTA
   buttons end up at different vertical positions across cards. The
   existing main.css already sets `.read-more { margin-top: auto }`
   but it has no effect unless the .expertise card stretches to the
   full Bootstrap column height. Force that here.
   Applies to homepage 3-cards row and sous-offre pages (3/4 cards).
   ======================================== */
.block-expertises .row .expertise {
    height: 100%;
}

/* ========================================
   Block: Testimonial — breathing room below
   ----------------------------------------
   Testimonial block had zero bottom margin and was sticking to the
   blocks that follow it (Blog, Secteurs, etc.). Adds vertical
   separation so the layout breathes.
   ======================================== */
.block-testimonial {
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .block-testimonial {
        margin-bottom: 60px;
    }
}

/* ========================================
   Blog + Secteurs equal heights in Gutenberg columns
   ----------------------------------------
   When Blog and Secteurs blocks are placed side-by-side in a wp-block-
   columns layout, their heights diverge (Blog shorter than Secteurs).
   Force both to fill the column. Scoped to direct children of a
   wp-block-column so other usages stay unaffected.
   ======================================== */
.wp-block-columns .wp-block-column {
    display: flex;
    flex-direction: column;
}

.wp-block-columns .wp-block-column > .block-blog,
.wp-block-columns .wp-block-column > .block-secteurs {
    flex: 1;
    height: auto;
    min-height: 100%;
}

/* ========================================
   Contact page address block
   ----------------------------------------
   The .archinet-contact-address group block (used on /contact/) had no
   styling, rendering as raw paragraph at page top-left without container
   or visual treatment. Wraps it as a centered card with primary-blue
   accent so it reads as an info block, not a floating text fragment.
   ======================================== */
.archinet-contact-address {
    max-width: 1140px;
    margin: 30px auto;
    padding: 25px 30px;
    background-color: #F9F9FC;
    border-left: 4px solid var(--archinet-primary, #00B1EB);
    border-radius: 4px;
}

.archinet-contact-address .wp-block-group__inner-container {
    margin: 0;
}

.archinet-contact-address p {
    margin: 0;
    color: var(--archinet-dark, #1C1C1C);
    line-height: 1.7;
}

.archinet-contact-address strong {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--archinet-secondary, #143F83);
    font-size: 1.15rem;
}

.archinet-contact-address a {
    color: var(--archinet-primary, #00B1EB);
    text-decoration: none;
}

.archinet-contact-address a:hover {
    text-decoration: underline;
}

/* ========================================
   Block: Blog (variant "pleine largeur" / 2 articles)
   ======================================== */
.block-blog--double .block-blog__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 100%;
}

@media (min-width: 768px) {
    .block-blog--double .block-blog__grid {
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .block-blog--double .block-blog__grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Block: Separator (Gutenberg core) — invisible
   ----------------------------------------
   WordPress core injects an inline style
   `.wp-block-separator { border:none; border-top: 2px solid }`
   in the <head>, so every <hr class="wp-block-separator"> renders
   as a visible 2px line. Seb uses these separators to create
   vertical breathing room, not to display a line — kill the border
   so only the natural margin remains.
   ======================================== */
hr.wp-block-separator,
hr.wp-block-separator.has-alpha-channel-opacity {
    border: none;
    background: transparent;
}