/**
 * Notre Histoire — Thibierge Notaires
 * Specs Figma : viewport de référence 1728px
 * Note : les shapes décoratifs bleus en arrière-plan ne sont volontairement pas intégrés.
 */

/* =============================================
   PAGE LAYOUT
============================================= */

.histoire-page {
    padding: 0;
    margin: 0;
    overflow-x: clip;
}

/* =============================================
   HERO (identique à la page Expertises mais avec contenu propre)
============================================= */

.histoire-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
}

/* Overlay sombre sur le hero — comme sur le Figma, pour assurer la lisibilité du texte */
.histoire-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
}

.histoire-hero__content {
    position: relative;
    z-index: 2;
    max-width: 1273px;
    margin: 0 auto;
    padding: 0 var(--gutter-desktop);
}

.histoire-hero__title {
    font-family: var(--font-magnetik);
    font-weight: 200;
    font-size: 81.37px;
    line-height: 90px;
    color: #fff;
    margin: 0 0 28px;
}

.histoire-hero__text {
    font-family: var(--font-magnetik);
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    color: #fff;
    max-width: 458px;
    margin: 0 auto;
}

.histoire-hero__scroll {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    cursor: pointer;
    animation: histoire-bounce 2s ease-in-out infinite;
}

.histoire-hero__scroll svg {
    display: block;
    width: 54px;
    height: 54px;
    transition: transform 0.3s ease;
}

.histoire-hero__scroll:hover svg {
    transform: translateY(5px);
}

@keyframes histoire-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(10px); }
}

/* =============================================
   STATS BAR — chiffres clés
   Positionnée juste sous le hero, légèrement remontée pour
   ressembler à un bandeau flottant.
============================================= */

.histoire-stats {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    margin-top: 348px;
    margin-bottom: -355px;
    padding: 0 var(--gutter-desktop);
}

.histoire-stats__box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    width: 100%;
    max-width: 1040px;
    min-height: 140px;
    padding: 30px 40px;
    background-color: #ffffff;
    border: 1px solid #eff2f6;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.histoire-stats__item {
    text-align: center;
    color: #222f30;
}

.histoire-stats__chiffre {
    font-family: var(--font-bodoni);
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.32;
    margin: 0 0 6px;
}

.histoire-stats__label {
    font-family: var(--font-magnetik);
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    margin: 0;
}

/* =============================================
   CONTENT WRAPPER
============================================= */

.histoire-content {
    position: relative;
    background: transparent;
    overflow: visible;
}

/* =============================================
   SHAPES DÉCORATIFS (arrière-plan)
   Mêmes principes que la page Équipe : position absolute, z-index 0,
   pointer-events none.
============================================= */

.histoire-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.histoire-shape {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Trait vertical reliant le bas de la photo "de génération en génération" (section 3)
   au haut de la section "5 pôles d'expertises" (section 4).
   Centré horizontalement sur la photo de la section 3 (left: 126 + 530/2 = 391px). */
.histoire-trait-vertical {
    position: absolute;
    /* Section 1 (836) + margin section 2 (130) + section 2 (785) + section 3 (836)
       => bas de la photo section 3 dans histoire-content = 836 + 130 + 785 + 836 = 2587 */
    top: 2587px;
    left: calc(126px + 530px / 2); /* centre horizontal de la photo section 3 */
    width: 1px;
    height: 100px; /* descend jusqu'au haut de la section 4 (margin-top: 100) */
    background-color: #eff2f6;
    z-index: 0;
    pointer-events: none;
}

/* Shape "shape-popup.webp" — en dessous des deux photos siège, bleed off à droite. */
.histoire-shape--bottom-siege {
    bottom: -698px;
    right: -155px;
    width: 875px;
    height: 1370px;
    object-fit: contain;
}

/* Shape "shape-team.svg" — calée à droite, à hauteur de la section 5 pôles d'expertises. */
.histoire-shape--right-poles {
    bottom: 1529px;
    right: -200px;
    width: 755px;
    height: 887px;
    object-fit: contain;
}

/* =============================================
   SECTIONS DE CONTENU
============================================= */

.histoire-section {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    /* padding: 130px 0; */
    /* border: 1px solid #eff2f6; */
    border-left: 0;
    border-right: 0;
    margin-top: -1px;
    background: transparent;
    overflow: visible;
}

/* Section 1 (Prestation de serment) — layout en absolute, chevauchement avec la barre de stats.
   Le contenu suit verticalement le block des deux photos siège (x = calc(45.83% + 62px))
   pour rester constamment aligné, et est calé en bas de la photo. */
.histoire-section--1 {
    position: relative;
    display: block;
    height: 836px;
    min-height: 836px;
    padding: 0;
    border-top: 0;
}

.histoire-section--1 .histoire-section__image {
    position: absolute;
    top: 0;
    left: 126px;
    width: 530px;
    height: 836px;
    /* margin-left: 126px; */
    margin: 0;
    z-index: 1;
}

.histoire-section--1 .histoire-section__content {
    position: absolute;
    bottom: 0;
    left: calc(45.83% + 62px);
    max-width: 517px;
    margin: 0;
}

.histoire-section--image-left,
.histoire-section--image-right {
    gap: 200px;
}

.histoire-section--image-right-double {
    gap: 120px;
}

/* Layout : image à gauche, texte à droite */
.histoire-section--image-left {
    flex-direction: row;
}

/* Layout : texte à gauche, image à droite */
.histoire-section--image-right {
    flex-direction: row;
}

/* Layout : texte à gauche, deux images à droite */
.histoire-section--image-right-double {
    flex-direction: row;
}

/* Image principale (cas standard) */
.histoire-section__image {
    flex: 0 0 auto;
    width: 530px;
    height: 836px;
    overflow: hidden;
}

.histoire-section__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Cas section-1 (founder) : image à gauche
   (la section utilise un layout absolute, voir plus haut) */
.histoire-section--1 .histoire-section__image {
    /* margin-left: 126px; */
}

/* Cas section-3 (130 collaborateurs) : layout en absolute,
   le texte suit verticalement le block des deux photos siège (x = calc(45.83% + 62px))
   pour rester constamment aligné, et est calé en bas de la photo. */
.histoire-section--3 {
    position: relative;
    display: block;
    height: 836px;
    min-height: 836px;
}

/* Trait horizontal — démarre au bord droit de la photo (≈38% du viewport)
   et s'étend jusqu'au bord droit de la page. Positionné 98px au-dessus du
   surtitre "DE GÉNÉRATION EN GÉNÉRATION".
   Le bloc content est ancré bottom:0, donc on positionne depuis le bas :
   bottom = hauteur estimée du contenu + 98px. À ré-ajuster si le texte
   du contenu change significativement. */
.histoire-section--3::before {
    content: '';
    position: absolute;
    bottom: 520px;
    left: 656px; /* = 126px (left photo) + 530px (width photo) → collé au bord droit de l'image */
    right: 0;
    height: 1px;
    background-color: #eff2f6;
    z-index: 0;
}

.histoire-section--3 .histoire-section__image {
    position: absolute;
    top: 0;
    left: 126px;
    width: 530px;
    height: 836px;
    margin: 0;
}

.histoire-section--3 .histoire-section__content {
    position: absolute;
    bottom: 0;
    left: calc(45.83% + 62px);
    max-width: 517px;
    margin: 0;
}

/* Cas section-2 (siège) : layout en absolute pour caler la photo de gauche
   à la même verticale que le texte Claude Thibierge de la section 1
   (calc(45.83% + 62px) = 854px à 1728px viewport).
   Les traits horizontaux sont créés via des div absolute alignés
   exactement sur le haut et le bas des photos. */
.histoire-section--2 {
    position: relative;
    display: block;
    padding: 0;
    margin-top: 130px;
    height: 785px;
    min-height: 785px;
    border: none;
}

.histoire-section--2 .histoire-section__content {
    position: absolute;
    top: 40%;
    left: 126px;
    transform: translateY(-50%);
    max-width: 517px;
    margin: 0;
}

.histoire-section--2 .histoire-section__images {
    position: absolute;
    top: 0;
    left: calc(45.83% + 62px);
    display: flex;
    flex: 0 0 auto;
    gap: 23px;
    height: 785px;
}

.histoire-section--2 .histoire-section__images .histoire-section__image {
    width: 530px;
    height: 785px;
    flex: 0 0 530px;
}

/* Trait horizontal HAUT — bleed off-right, s'arrête à 65% de la largeur */
.histoire-section--2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    right: 0;
    height: 1px;
    background-color: #eff2f6;
    z-index: 0;
}

/* Trait horizontal BAS — placé 160px au-dessus du bas, s'étend à 69% de la largeur */
.histoire-section--2::after {
    content: '';
    position: absolute;
    bottom: 160px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #eff2f6;
    z-index: -1;
    width: 69%;
}

/* Cas section-4 (5 pôles) : layout en absolute,
   l'image suit verticalement le block des deux photos siège (x = calc(45.83% + 62px))
   pour rester constamment alignée. */
.histoire-section--4 {
    margin-top: 100px;
    position: relative;
    display: block;
    height: 786px;
    min-height: 786px;
}

.histoire-section--4 .histoire-section__image {
    position: absolute;
    top: 0;
    left: calc(45.83% + 62px);
    width: 530px;
    height: 786px;
    margin: 0;
}

.histoire-section--4 .histoire-section__content {
    position: absolute;
    top: 0;
    left: 126px;
    max-width: 517px;
    margin-top: 150px;
}

/* Trait horizontal HAUT — bord supérieur de la section, pleine largeur */
.histoire-section--4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #eff2f6;
    z-index: 0;
}

/* Trait horizontal BAS — placé 218px au-dessus du bas, s'étend à 69% de la largeur */
.histoire-section--4::after {
    content: '';
    position: absolute;
    bottom: 218px;
    left: 0;
    width: 69%;
    height: 1px;
    background-color: #eff2f6;
    z-index: -1;
}

/* Contenu (titre + texte) */
.histoire-section__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 517px;
}

.histoire-section--1 .histoire-section__content,
.histoire-section--3 .histoire-section__content {
    /* texte à droite : on laisse l'auto-centrage par flex */
}

.histoire-section--4 .histoire-section__content {
    /* margin-left: 126px; — désactivé : la section 4 utilise un layout absolute (left: 126px) */
}

.histoire-section__surtitre {
    font-family: var(--font-geometos);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1.4px;
    color: #72777b;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.histoire-section__titre {
    font-family: var(--font-bodoni);
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.32;
    color: #222f30;
    margin: 0 0 18px;
}

.histoire-section__texte {
    font-family: var(--font-magnetik);
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    color: #72777b;
    margin: 0;
}

.histoire-section__texte p {
    margin: 0 0 18px;
}

.histoire-section__texte p:last-child {
    margin-bottom: 0;
}

/* Lien type "Button_third" (texte + flèche + soulignement) */
.histoire-section__link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 14px;
    text-decoration: none;
    width: max-content;
}

.histoire-section__link-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 1px;
}

.histoire-section__link-text {
    font-family: var(--font-magnetik);
    font-weight: 300;
    font-size: 18px;
    color: #1e1e1e;
    white-space: nowrap;
}

.histoire-section__link-icon {
    width: 12px;
    height: 11px;
    color: #1e1e1e;
    transition: transform 0.3s ease;
}

.histoire-section__link:hover .histoire-section__link-icon {
    transform: translateX(4px);
}

.histoire-section__link-line {
    position: relative;
    width: 100%;
    height: 1px;
    background-color: transparent;
    overflow: hidden;
}

.histoire-section__link-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1e1e1e;
}

.histoire-section__link:hover .histoire-section__link-line::after {
    animation: lineWipeHistoire 0.5s ease;
}

@keyframes lineWipeHistoire {
    0%      { transform: translateX(0); }
    50%     { transform: translateX(100%); }
    50.01%  { transform: translateX(-100%); }
    100%    { transform: translateX(0); }
}

/* =============================================
   AJUSTEMENT TEAM (réutilisée depuis expertises.css)
   On enlève juste le grand padding-top puisqu'on enchaîne après
   la dernière section.
============================================= */

.histoire-team {
    padding: 207px 0 0;
    background: transparent;
    overflow: visible;
}

/* =============================================
   RESPONSIVE — 1700px : ajustements légers (les positions "calc(45.83% + …)"
   restent justes, on resserre juste les gutters latéraux pour les sections
   qui restent en flex (5 pôles).
============================================= */

@media (max-width: 1700px) {
    .histoire-section--4 .histoire-section__image {
        margin-right: 60px;
    }
}

/* =============================================
   RESPONSIVE — 1520px : on réduit la typographie hero et on ajuste les hauteurs
============================================= */

@media (max-width: 1520px) {
    .histoire-hero__title {
        font-size: 64px;
        line-height: 72px;
    }
}

/* =============================================
   RESPONSIVE — 1279px (tablet) : on quitte le layout absolute, tout passe
   en colonne (image puis texte). Les shapes et le trait vertical sont masqués.
============================================= */

@media (max-width: 1279px) {
    .histoire-hero__title {
        font-size: 52px;
        line-height: 60px;
    }
    .histoire-hero__text {
        font-size: 16px;
        line-height: 26px;
    }

    .histoire-stats {
        margin-top: 0;
        margin-bottom: 0;
        padding: 60px var(--gutter-tablet) 0;
    }
    .histoire-stats__box {
        padding: 24px;
        min-height: 0;
    }
    .histoire-stats__chiffre {
        font-size: 28px;
    }
    .histoire-stats__label {
        font-size: 14px;
        line-height: 22px;
    }

    /* Reset des layouts absolute en flex column pour les 4 sections */
    .histoire-section,
    .histoire-section--1,
    .histoire-section--2,
    .histoire-section--3,
    .histoire-section--4 {
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 40px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 60px var(--gutter-tablet) !important;
    }

    /* Reset des éléments positionnés en absolute */
    .histoire-section__image,
    .histoire-section__content,
    .histoire-section--1 .histoire-section__image,
    .histoire-section--1 .histoire-section__content,
    .histoire-section--2 .histoire-section__images,
    .histoire-section--2 .histoire-section__content,
    .histoire-section--3 .histoire-section__image,
    .histoire-section--3 .histoire-section__content,
    .histoire-section--4 .histoire-section__image,
    .histoire-section--4 .histoire-section__content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Hauteurs des images en mode tablet */
    .histoire-section__image,
    .histoire-section--1 .histoire-section__image,
    .histoire-section--3 .histoire-section__image,
    .histoire-section--4 .histoire-section__image {
        height: 480px !important;
    }
    .histoire-section--2 .histoire-section__images {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        height: 420px !important;
    }
    .histoire-section--2 .histoire-section__images .histoire-section__image {
        height: 420px !important;
        flex: 1 1 50% !important;
    }
    .histoire-section__titre {
        font-size: 30px;
    }

    /* Section 4 (5 pôles d'expertises) : inverser pour avoir la photo au-dessus du texte */
    .histoire-section--4 {
        flex-direction: column-reverse !important;
    }

    /* On masque les éléments décoratifs spécifiques au desktop */
    .histoire-section--2::before,
    .histoire-section--2::after,
    .histoire-section--3::before,
    .histoire-section--4::before,
    .histoire-section--4::after,
    .histoire-trait-vertical,
    .histoire-shapes {
        display: none !important;
    }

    .histoire-team {
        padding: 80px 0 0;
    }
}

/* =============================================
   RESPONSIVE — 767px (mobile)
============================================= */

@media (max-width: 767px) {
    .histoire-hero__title {
        font-size: 36px;
        line-height: 44px;
        margin-bottom: 20px;
    }
    .histoire-hero__text {
        font-size: 15px;
        line-height: 24px;
    }
    .histoire-hero__scroll {
        bottom: 60px;
    }
    .histoire-hero__scroll svg {
        width: 40px;
        height: 40px;
    }

    .histoire-stats {
        padding: 40px var(--gutter-mobile) 0;
    }
    .histoire-stats__box {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 28px 20px;
    }
    .histoire-stats__chiffre {
        font-size: 24px;
    }
    .histoire-stats__label {
        font-size: 13px;
        line-height: 18px;
    }

    .histoire-section,
    .histoire-section--1,
    .histoire-section--2,
    .histoire-section--3,
    .histoire-section--4 {
        padding: 40px var(--gutter-mobile) !important;
        gap: 28px !important;
    }
    .histoire-section__image,
    .histoire-section--1 .histoire-section__image,
    .histoire-section--3 .histoire-section__image,
    .histoire-section--4 .histoire-section__image {
        height: 413px !important;
    }
    /* Section 2 (siège) sur mobile uniquement : on "défait" le wrapper des
       deux photos pour les rendre frères directs de section--2, ce qui permet
       de les intercaler avec le bloc de texte (photo / texte / photo). */
    .histoire-section--2 .histoire-section__images {
        display: contents !important;
    }
    .histoire-section--2 .histoire-section__images .histoire-section__image {
        height: 413px !important;
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    .histoire-section--2 .histoire-section__images .histoire-section__image:first-child {
        order: 1;
    }
    .histoire-section--2 .histoire-section__content {
        order: 2;
    }
    .histoire-section--2 .histoire-section__images .histoire-section__image:last-child {
        order: 3;
    }
    /* Cas avec une seule photo : on force order:1 pour qu'elle reste au-dessus
       du texte (sinon elle hérite de :last-child → order:3, donc passe en bas). */
    .histoire-section--2 .histoire-section__images .histoire-section__image:only-child {
        order: 1;
    }

    /* Section 4 : photo au-dessus du texte (héritée du breakpoint 1279) */
    .histoire-section--4 {
        flex-direction: column-reverse !important;
    }
    .histoire-section__surtitre {
        font-size: 12px;
        letter-spacing: 1.2px;
    }
    .histoire-section__titre {
        font-size: 26px;
    }
    .histoire-section__texte {
        font-size: 16px;
        line-height: 26px;
    }

    .histoire-team {
        padding: 60px 0 0;
    }
}

/* =============================================
   RESPONSIVE — 375px (très petit mobile) : ajustements typo
============================================= */

@media (max-width: 380px) {
    .histoire-hero__title {
        font-size: 30px;
        line-height: 38px;
    }
    .histoire-stats__box {
        padding: 22px 16px;
    }
    .histoire-stats__chiffre {
        font-size: 20px;
    }
    .histoire-section__titre {
        font-size: 22px;
    }
}