/* Première intégration des maquettes : les trois visuels se remplacent dans img/refonte. */
.page-refonte {
    --bandeau-fond: #f2f2f2;
    --bandeau-panneau: #706f6f;
    --bandeau-orange: #ed7102;
}

/* Le nouveau logo conserve ses proportions dans l'en-tête existant. */
.page-refonte-accueil header .bot a.logo { width: 360px; height: auto; }
.page-refonte-accueil header .bot a.logo img { width: 100%; height: auto; }
.page-refonte-accueil header .bot .flex-center { min-height: 4.95em; }
/* Le logo du mini-site garde son ancrage à gauche, avec une largeur bornée pour l'en-tête fixe. */
.page-refonte-agence header .bot a.logo { width: 360px; height: auto; }
.page-refonte-agence header .bot a.logo img { width: 100%; height: auto; }
.page-refonte-accueil header.transparent .bot { background: var(--bandeau-fond); }
/* Un en-tête plus compact laisse apparaître le haut du personnage comme sur la maquette. */
.page-refonte-accueil header .bot { padding: 16px 0; }
.page-refonte-accueil header .bot .flex-center { min-height: 60px; }

.page .bandeau-accueil {
    padding: clamp(150px, 12vw, 210px) 24px 0;
    background: var(--bandeau-fond);
    isolation: isolate;
}
.page .bandeau-accueil .bandeau-decor-ville { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.page .bandeau-accueil .bandeau-ville {
    position: absolute;
    left: calc(50% + min(28vw, 390px));
    bottom: 50px;
    width: clamp(270px, 25vw, 390px);
    opacity: .3;
    pointer-events: none;
}
.page .bandeau-accueil .box-devis {
    --decalage-formulaire: clamp(220px, 21vw, 310px);
    display: block;
    box-sizing: border-box;
    width: 80%;
    max-width: 1150px;
    margin: 0 auto;
    padding-left: var(--decalage-formulaire);
    padding-right: clamp(0px, calc((100vw - 950px) * .18), 140px);
    font-size: 14px;
    z-index: 1;
}
.page .bandeau-accueil .box-devis .holder {
    padding: clamp(20px, 2vw, 30px) 24px clamp(24px, 2vw, 35px);
    background: var(--bandeau-panneau);
    border-top: 5px solid var(--bandeau-orange);
}
.page .bandeau-accueil .box-devis h1 { font-size: clamp(24px, 2.1vw, 36px); }
.page .bandeau-accueil .box-devis .midsize { font-size: clamp(16px, 1.4vw, 24px); }
.page .bandeau-accueil .box-devis .theme-input { margin-top: clamp(18px, 1.5vw, 24px); }
.page .bandeau-accueil .box-devis .option.big { font-size: clamp(16px, 1.2vw, 20px); }
.page .bandeau-accueil .box-devis .btn.big { font-size: clamp(18px, 1.4vw, 24px); }
.page .bandeau-accueil .box-devis .theme-input.inline-select { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.page .bandeau-accueil .box-devis .theme-input.inline-select .option.big { padding: 0; margin: 0; white-space: nowrap; }
.page .bandeau-accueil .box-devis .theme-input.submit { margin-top: 28px; }
.page .bandeau-accueil .bandeau-personnage {
    position: absolute;
    /* Ancrer la main au panneau pour conserver le chevauchement à toutes les largeurs. */
    left: calc(var(--decalage-formulaire) + clamp(50px, 5vw, 80px));
    transform: translateX(-100%);
    bottom: -50px;
    width: clamp(300px, 24vw, 400px);
    /* Le personnage reste sous l'en-tête, même lorsque le formulaire devient moins haut. */
    height: calc(100% + 50px);
    object-fit: contain;
    object-position: right bottom;
    max-width: none;
    z-index: 1001;
    pointer-events: none;
}
/* Le décor se termine avec le bandeau ; le simulateur possède sa propre ligne en dessous. */
.page .bandeau-accueil { padding-bottom: 50px; }
/* Reprendre le décalage du panneau de devis pour partager exactement le même axe central. */
.page-refonte-accueil .blocEspaceActu { position: relative; z-index: 2; box-sizing: border-box; height: auto; margin: -20px 0 0; padding: 0 24px 0 calc(24px + clamp(220px, 21vw, 310px) - clamp(0px, calc((100vw - 950px) * .18), 140px)); background: transparent; }
.page .bandeau-accueil #blockSimulateur { position: static; width: 100%; max-width: 440px; }
.page-refonte-accueil .blocEspaceActu #blockSimulateur { position: static; width: 100%; max-width: 440px; }
/* Rapprocher le premier titre du simulateur, sans modifier les autres sections. */
.page-refonte-accueil .content-subsection#subsection-diagnostics { padding-top: 32px; }

.page .bandeau-agence { background: var(--bandeau-fond); padding: 0; }
.page .bandeau-agence > .centered { box-sizing: border-box; min-height: 320px; padding: 42px 30px; }
.page .bandeau-agence h1 { position: relative; z-index: 1; padding: 0; max-width: 78%; font-size: 40px; line-height: 1.2; text-align: left; color: var(--bandeau-orange); }
.page .bandeau-agence h1 .color-dark { color: #3d3d3b; }
.page .bandeau-agence h1 a.btn { max-width: 100%; box-sizing: border-box; }
.page .bandeau-agence .bandeau-secteur { position: relative; z-index: 1; max-width: 340px; margin-top: 20px; font-size: 25px; line-height: 1.3; color: var(--bandeau-orange); }
.bandeau-agence .bandeau-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bandeau-agence .bandeau-ville { position: absolute; right: 130px; bottom: 15px; width: 560px; opacity: .3; }
/* Garder le cadre à l'intérieur du décor pour ne pas rogner le coude sur son bord droit. */
.bandeau-agence .bandeau-personnage { position: absolute; right: 8px; bottom: 0; width: 235px; height: 310px; overflow: hidden; }
/* Recadrer le PNG transparent en buste en conservant le visage et la tablette à chaque largeur. */
.bandeau-agence .bandeau-personnage img { position: absolute; width: 200%; max-width: none; height: auto; left: -46%; top: -7%; }
/* Les coordonnées et les avis commencent sous le nouveau bandeau. */
.page-refonte-agence #subsection-agence { padding-top: 12px; }
.page-refonte-agence #subsection-agence .sidecol { margin-top: 0; }
.page-refonte-agence #blocAvis { position: relative; top: auto; right: auto; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }

@media (min-width: 876px) {
    /* Le panneau blanc retrouve son chevauchement d'origine ; les avis restent à droite. */
    .page-refonte-agence #subsection-agence > .centered { display: grid; grid-template-columns: 30% minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 3em; align-items: start; }
    .page-refonte-agence #subsection-agence .sidecol { grid-column: 1; grid-row: 1 / span 2; width: 100%; margin-top: -10.5em; }
    .page-refonte-agence #subsection-agence #blocAvis { grid-column: 2; grid-row: 1; }
    .page-refonte-agence #subsection-agence .maincol { grid-column: 2; grid-row: 2; width: 100%; margin-left: 0; }
}

@media (max-width: 1200px) {
    .page-refonte-agence header .bot a.logo { width: 300px; }
    .page-refonte-accueil header .bot a.logo { width: 300px; }
}
@media (max-width: 1000px) {
    .page-refonte-agence header .bot a.logo { width: 250px; }
    .page-refonte-accueil header .bot { padding: 12px 0; }
    .page-refonte-accueil header .bot .flex-center { min-height: 45px; }
    .page-refonte-accueil header .bot .side-menu { height: 45px; line-height: 45px; }
    .page-refonte-accueil header .bot a.logo { width: 250px; }
    .page .bandeau-accueil .box-devis { --decalage-formulaire: 220px; width: 80%; padding-right: 0; }
    .page-refonte-accueil .blocEspaceActu { padding-left: 244px; }
    .page .bandeau-agence h1 { font-size: 34px; }
    .bandeau-agence .bandeau-ville { right: 100px; width: 430px; }
    .bandeau-agence .bandeau-personnage { width: 200px; height: 264px; }
}
@media (min-width: 676px) and (max-width: 875px) {
    /* Sur tablette, conserver deux colonnes pour éviter une longue fiche contact avant le contenu. */
    .page-refonte-agence .section-content { padding-top: 155px; }
    .page .bandeau-agence > .centered { min-height: 240px; padding: 28px 16px; }
    .page .bandeau-agence h1 { max-width: calc(100% - 170px); font-size: 27px; line-height: 1.25; }
    .bandeau-agence .bandeau-personnage { width: 165px; height: 218px; }
    .page-refonte-agence #subsection-agence > .centered { display: grid; grid-template-columns: 34% minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 20px; align-items: start; }
    .page-refonte-agence #subsection-agence .sidecol { grid-column: 1; grid-row: 1 / span 2; width: 100%; padding: 16px 8px; }
    .page-refonte-agence #subsection-agence #blocAvis { grid-column: 2; grid-row: 1; }
    .page-refonte-agence #subsection-agence .maincol { grid-column: 2; grid-row: 2; width: 100%; margin-left: 0; }
    .page-refonte-agence #subsection-agence .maincol h2 { font-size: 24px; line-height: 1.3; text-align: left; }
    /* Préserver la largeur utile du formulaire avant le passage à la version mobile. */
    .page .bandeau-accueil .box-devis { --decalage-formulaire: 190px; width: 100%; }
    .page-refonte-accueil .blocEspaceActu { padding-left: 214px; }
    .page .bandeau-accueil .bandeau-personnage { width: 240px; }
}
@media (max-width: 675px) {
    /* Réserver la hauteur de l'en-tête fixe, y compris lorsque les étoiles passent à la ligne. */
    .page-refonte-agence .section-content { padding-top: 135px; }
    /* Le mini-site conserve le logo à gauche et les actions à droite, sans étirer le logo. */
    .page-refonte-agence header .bot a.logo { width: min(50vw, 250px); height: auto; }
    .page-refonte-agence header .bot a.logo img { width: 100%; height: auto; }
    /* Sur mobile, le simulateur reste sous le formulaire pour conserver des zones tactiles distinctes. */
    .page-refonte-accueil .blocEspaceActu { margin-top: 0; padding: 12px 16px 0; }
    .page-refonte-accueil .content-subsection#subsection-diagnostics { padding-top: 24px; }
    /* Sur l'accueil, les actions tactiles ont la même taille et le menu reste bien détaché du compte. */
    .page-refonte-accueil header .bot .side-menu { display: flex; align-items: center; gap: 8px; height: 44px; line-height: normal; }
    .page-refonte-accueil header .bot .side-menu .btn.icon { box-sizing: border-box; width: 44px; height: 44px; padding: 0 !important; margin: 0; line-height: 44px; border-radius: 6px; }
    .page-refonte-accueil header .bot .side-menu .btn.icon + .btn.icon { margin-left: 0; }
    .page-refonte-accueil header .bot .side-menu #btn-menu-mobile { box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; border: 1px solid #bdbbbc; border-radius: 6px; background-color: white; background-position: center; background-size: 24px auto; }
    .page-refonte-accueil header.menu-open .bot .side-menu #btn-menu-mobile { background-size: 20px auto; }
    .page-refonte-accueil header .bot .side-menu #btn-menu-mobile:hover { background-color: #e8e8e9; }
    /* Garder le logo et les trois actions sur une ligne, même à 320 px. */
    .page-refonte-accueil header .bot > .centered { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .page-refonte-accueil header .bot > .centered > .float-left { flex: 1; min-width: 0; }
    .page-refonte-accueil header .bot > .centered > .float-right { flex-shrink: 0; }
    .page-refonte-accueil header .bot > .centered > .clear { display: none; }
    .page-refonte-accueil header .bot a.logo { width: 100%; max-width: 250px; }
    .page-refonte-accueil header .bot .flex-center { min-height: 0; }
    .page .bandeau-accueil { padding: 135px 16px 24px; }
    .page .bandeau-accueil .box-devis { width: 100%; padding: 0; }
    .page .bandeau-accueil .box-devis .holder { padding: 26px 12px 30px; }
    .page .bandeau-accueil .box-devis h1 { font-size: 29px; }
    .page .bandeau-accueil .box-devis h1 .only-mobile { display: none !important; }
    .page .bandeau-accueil .box-devis .theme-input.inline-select { gap: 10px; flex-wrap: nowrap; }
    .page .bandeau-accueil .box-devis .theme-input.inline-select .option.big { font-size: 15px; letter-spacing: 0; width: auto; flex: 1; max-width: 105px; }
    .page .bandeau-accueil .bandeau-personnage { display: none; }
    .page .bandeau-accueil .bandeau-ville { width: 90%; left: auto; right: 0; top: auto; bottom: 0; }
    /* Un bandeau mobile à hauteur naturelle laisse les coordonnées immédiatement accessibles. */
    .page .bandeau-agence > .centered { min-height: 120px; max-width: 100%; padding: 20px 16px 24px; }
    .page .bandeau-agence h1 { max-width: 100%; font-size: 18px; line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; }
    .page .bandeau-agence h1 > br { display: none; }
    .page .bandeau-agence h1 .color-dark { display: block; margin-top: 4px; font-size: 22px; line-height: 1.2; }
    /* Le décor reste sous le texte : il n'impose plus une grande zone vide au bandeau. */
    /* Sur mobile, les bâtiments remplacent le personnage et restent discrets derrière le titre. */
    .bandeau-agence .bandeau-ville { width: min(85%, 300px); right: 0; bottom: -5px; opacity: .25; }
    .bandeau-agence .bandeau-personnage { display: none; }
    .page-refonte-agence #subsection-agence .maincol h2 { font-size: 22px; line-height: 1.3; letter-spacing: 0; text-align: left; }
    .page-refonte-agence #blocAvis { width: 100%; justify-content: center; }
}