/* =============================================================
   pages.css — Reproduction EXACTE du design SOS Roof
   + Toutes les animations SOS Roof (fadeInUp, parallax, hover)
   Source CSS analysée : post-1819.css + elementor animations
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════════════════════════════════════════════════
   ANIMATIONS GLOBALES — fadeInUp, fadeInLeft, fadeInRight
   Reproduit les animations Elementor de SOS Roof
   ══════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* Classe de base : invisible avant animation */
.anim-hidden {
    opacity: 0;
}
/* Une fois visible (JS ajoute .anim-visible) */
.anim-visible.fade-up       { animation: fadeInUp   .7s cubic-bezier(.25,.8,.25,1) both; }
.anim-visible.fade-left     { animation: fadeInLeft .7s cubic-bezier(.25,.8,.25,1) both; }
.anim-visible.fade-right    { animation: fadeInRight .7s cubic-bezier(.25,.8,.25,1) both; }
.anim-visible.fade-down     { animation: fadeInDown .7s cubic-bezier(.25,.8,.25,1) both; }
.anim-visible.scale-in      { animation: scaleIn    .6s cubic-bezier(.25,.8,.25,1) both; }

/* Délais échelonnés pour les grilles (stagger) */
.anim-delay-1  { animation-delay: .10s !important; }
.anim-delay-2  { animation-delay: .20s !important; }
.anim-delay-3  { animation-delay: .35s !important; }
.anim-delay-4  { animation-delay: .50s !important; }
.anim-delay-5  { animation-delay: .65s !important; }

/* ── VARIABLES ────────────────────────────────────────────── */
:root {
    /* Couleurs exactes SOS Roof */
    --sr-blue:        #172D96;          /* bleu principal */
    --sr-blue-t:      rgba(23,45,150,.26); /* bleu déco translucide */
    --sr-red:         #EB2129;          /* rouge principal */
    --sr-red-t:       rgba(235,33,41,.28); /* rouge déco translucide */
    --sr-red-btn:     #E8063A;          /* bouton urgence/devis */
    --sr-black:       #1a1a1a;          /* texte principal */
    --sr-grey-bg:     #f4f4f4;          /* fond étapes / sections */
    --sr-white:       #ffffff;
    --sr-border:      #e8e8e8;
    /* Police */
    --fh: 'Montserrat', sans-serif;
    --fb: 'Inter', sans-serif;
    /* Transition */
    --tr: 0.42s cubic-bezier(.25,.8,.25,1);
}

body {
    font-family: var(--fb);
    color: var(--sr-black);
    background: var(--sr-white);
    overflow-x: hidden;
}

/* Espace pour header fixe */
.page-main { padding-top: 80px; }

/* ══════════════════════════════════════════════════════════
   1. TITRE DE PAGE
   "NOS SERVICES POUR LES PARTICULIERS"
   Style SOS Roof : Montserrat 36px 700 uppercase, noir, marge 30px
   ══════════════════════════════════════════════════════════ */
.page-title-section {
    padding: 40px 40px 30px;
    background: var(--sr-white);
    max-width: 1200px;
    margin: 0 auto;
}

.page-title {
    font-family: var(--fh);
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);   /* ~36px */
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sr-black);
    letter-spacing: -0.3px;
    line-height: 1.15;
}

/* ══════════════════════════════════════════════════════════
   2. MOSAIC PHOTO GRID
   SOS Roof = grille 3 colonnes × 2 rangées
   - Rangée 1 : carte 1 span 2 col (grande) + carte 2 span 1 col
   - Rangée 2 : carte 3 span 1 col + carte 4 span 2 col
   Décoration : pastilles rouge et bleue translucides en coin
   ══════════════════════════════════════════════════════════ */
.mosaic-grid-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 0;
    position: relative;
}

/* Pastilles décoratives SOS Roof avec parallax */
.mosaic-deco-red {
    position: absolute;
    top: -20px; left: -20px;
    width: 160px; height: 160px;
    background: var(--sr-red-t);
    border-radius: 10px;
    z-index: 0;
    pointer-events: none;
    /* Parallax géré par JS via --tx, --ty */
    transform: translate(var(--tx, 0px), var(--ty, 0px));
    transition: transform .08s linear;
    will-change: transform;
}
.mosaic-deco-blue {
    position: absolute;
    bottom: -20px; right: -20px;
    width: 160px; height: 160px;
    background: var(--sr-blue-t);
    border-radius: 10px;
    z-index: 0;
    pointer-events: none;
    transform: translate(var(--tx, 0px), var(--ty, 0px));
    transition: transform .08s linear;
    will-change: transform;
}

.mosaic-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 300px 240px;
    gap: 8px;
}

/* Positions exactes SOS Roof */
.mosaic-card:nth-child(1) { grid-column: span 2; grid-row: 1; }  /* Réparation — grande */
.mosaic-card:nth-child(2) { grid-column: 3;      grid-row: 1; }  /* Urgences */
.mosaic-card:nth-child(3) { grid-column: 1;      grid-row: 2; }  /* Rénovation */
.mosaic-card:nth-child(4) { grid-column: span 2; grid-row: 2; }  /* Accompagnement — grande */

/* Carte */
.mosaic-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    text-decoration: none;
    border-radius: 10px;
    transition: box-shadow var(--tr), transform var(--tr);
    /* État initial pour fadeInUp */
    opacity: 0;
    transform: translateY(36px);
}
/* Déclenché par JS Intersection Observer */
.mosaic-card.anim-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .65s cubic-bezier(.25,.8,.25,1),
                transform .65s cubic-bezier(.25,.8,.25,1),
                box-shadow var(--tr);
}
.mosaic-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.24); }

.mosaic-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--tr);
}
.mosaic-card:hover .mosaic-bg { transform: scale(1.06); }

.mosaic-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0)    45%,
        rgba(0,0,0,.75) 100%);
    transition: background var(--tr);
}
.mosaic-card:hover .mosaic-overlay {
    background: linear-gradient(to bottom,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.85) 100%);
}

/* Label + "en savoir plus" */
.mosaic-label {
    position: relative;
    z-index: 2;
    padding: 20px 24px;
    width: 100%;
}

.mosaic-label-text {
    display: block;
    font-family: var(--fh);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sr-white);
    line-height: 1.25;
    margin-bottom: 6px;
}

/* "more_infos" — exactement comme SOS Roof */
.mosaic-label-more {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fb);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.88);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .28s ease, transform .28s ease;
}
.mosaic-card:hover .mosaic-label-more { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════
   3. "FAITES APPEL À NOS SERVICES !" + bouton Devis
   ══════════════════════════════════════════════════════════ */
.page-services-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 40px;
    border-top: 1px solid var(--sr-border);
}

.page-services-cta-title {
    font-family: var(--fh);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sr-black);
}

/* Bouton "Obtenir un devis" rouge SOS Roof */
.btn-devis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sr-red-btn);
    color: #fff;
    font-family: var(--fh);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 26px;
    border: none;
    border-radius: 4px;          /* SOS Roof utilise des coins légèrement arrondis */
    cursor: pointer;
    transition: opacity .2s, transform .2s;
    box-shadow: 0 2px 12px rgba(232,6,58,.3);
}
.btn-devis:hover { opacity: .9; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════
   4. VOTRE ACCOMPAGNEMENT EN 5 ÉTAPES
   ══════════════════════════════════════════════════════════ */
.page-steps {
    background: var(--sr-grey-bg);
    padding: 64px 0;
}

.page-steps-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.page-steps-title {
    font-family: var(--fh);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    color: var(--sr-black);
    line-height: 1.25;
    /* Column 1 = sticky title */
    position: sticky;
    top: 100px;
}

.steps-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* Ligne verticale */
.steps-list::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--sr-blue), var(--sr-red));
    z-index: 0;
}

.step-item {
    display: flex;
    gap: 20px;
    padding: 0 0 32px;
    cursor: pointer;
    /* fadeInLeft au scroll */
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity .55s cubic-bezier(.25,.8,.25,1),
                transform .55s cubic-bezier(.25,.8,.25,1);
}
.step-item.anim-visible {
    opacity: 1;
    transform: translateX(0);
}
.step-item:last-child { padding-bottom: 0; }

.step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--sr-blue);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fh);
    font-size: 0.9rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--sr-grey-bg); /* ring blanc sur fond gris */
    transition: background var(--tr);
}
.step-item:hover .step-num { background: var(--sr-red); }

.step-card {
    background: var(--sr-white);
    border-radius: 6px;
    padding: 16px 20px;
    flex: 1;
    border: 1px solid var(--sr-border);
    transition: box-shadow var(--tr), transform var(--tr);
}
.step-item:hover .step-card {
    box-shadow: 0 4px 20px rgba(23,45,150,.1);
    transform: translateX(4px);
}

.step-meta {
    font-family: var(--fh);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--sr-red);
    margin-bottom: 4px;
}
.step-title {
    font-family: var(--fh);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sr-blue);
    margin-bottom: 8px;
}
.step-desc {
    font-family: var(--fb);
    font-size: 0.88rem;
    color: #555;
    line-height: 1.65;
}
.step-desc a { color: var(--sr-red); }

/* ══════════════════════════════════════════════════════════
   5. DEMANDEZ UN DEVIS ! (bannière image avec overlay)
   ══════════════════════════════════════════════════════════ */
.page-cta-devis {
    position: relative;
    background-image: url('hero-entreprises.webp');
    background-size: cover;
    background-position: center;
    min-height: 240px;
    display: flex;
    align-items: center;
}
.page-cta-devis::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 30, 0.72);
}
.page-cta-devis-inner {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    padding: 60px 40px;
    width: 100%;
}
.page-cta-devis-inner h2 {
    font-family: var(--fh);
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sr-white);
    margin-bottom: 10px;
    letter-spacing: -0.2px;
}
.page-cta-devis-inner p {
    font-family: var(--fb);
    font-size: 0.92rem;
    color: rgba(255,255,255,.82);
    margin-bottom: 24px;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   6. PENSÉ PAR VOUS, RÉALISÉ AVEC NOUS
   Carrousel (image gauche + texte droite) — style SOS Roof
   ══════════════════════════════════════════════════════════ */
.page-testi-carousel {
    background: var(--sr-white);
    padding: 64px 0;
}
.page-testi-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}
.page-testi-title {
    font-family: var(--fh);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    color: var(--sr-black);
    margin-bottom: 36px;
    line-height: 1.3;
}
.testi-red  { color: var(--sr-red); font-style: italic; }
.testi-blue { color: var(--sr-blue); font-style: italic; }

.testi-carousel-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.testi-arrow {
    flex-shrink: 0;
    align-self: center;
    width: 38px; height: 38px;
    border: 1.5px solid #ccc;
    border-radius: 50%;
    background: var(--sr-white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--tr), border-color var(--tr);
}
.testi-arrow svg { width: 14px; height: 14px; fill: #444; }
.testi-arrow:hover { background: var(--sr-blue); border-color: var(--sr-blue); }
.testi-arrow:hover svg { fill: #fff; }

.testi-track-wrap { flex: 1; overflow: hidden; }

.testi-track {
    display: flex;
    transition: transform .5s cubic-bezier(.25,.8,.25,1);
}

/* Chaque slide = image gauche + texte droite */
.testi-slide {
    min-width: 100%;
    display: grid;
    grid-template-columns: 260px 1fr;
    background: var(--sr-grey-bg);
    border-radius: 8px;
    overflow: hidden;
    min-height: 220px;
}
.testi-slide-img {
    background-size: cover;
    background-position: center;
}
.testi-slide-content {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.testi-slide-text {
    font-family: var(--fb);
    font-size: 0.92rem;
    color: #444;
    line-height: 1.75;
    margin-bottom: 20px;
}
.testi-slide-name {
    font-family: var(--fh);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sr-black);
    display: block;
}
.testi-slide-role {
    font-family: var(--fb);
    font-size: 0.8rem;
    color: #888;
    display: block;
}

/* Dots */
.testi-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.testi-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ccc;
    border: none; cursor: pointer;
    transition: background .2s, transform .2s;
    padding: 0;
}
.testi-dot.active { background: var(--sr-blue); transform: scale(1.25); }

/* ══════════════════════════════════════════════════════════
   7. DÉCOUVREZ EN PLUS (cartes articles)
   ══════════════════════════════════════════════════════════ */
.page-discover {
    background: var(--sr-white);
    padding: 64px 0;
    border-top: 1px solid var(--sr-border);
}
.page-discover-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}
.page-discover-title {
    font-family: var(--fh);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sr-black);
    margin-bottom: 32px;
}

.discover-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.discover-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    background: var(--sr-white);
    transition: transform var(--tr), box-shadow var(--tr), opacity .55s ease;
    cursor: pointer;
    /* fadeInUp au scroll */
    opacity: 0;
    transform: translateY(30px);
}
.discover-card.anim-visible {
    opacity: 1;
    transform: translateY(0);
}
.discover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(23,45,150,.14);
}

.discover-card-img-wrap { display: block; overflow: hidden; }
.discover-card-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    transition: transform var(--tr);
}
.discover-card:hover .discover-card-img { transform: scale(1.05); }

.discover-card-body { padding: 18px 20px 22px; }

.discover-card-title {
    font-family: var(--fh);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sr-black);
    margin-bottom: 14px;
    line-height: 1.35;
}

/* Badge "En savoir plus" rouge — identique SOS Roof */
.discover-card-link {
    display: inline-block;
    background: var(--sr-red-btn);
    color: #fff;
    font-family: var(--fh);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity .2s;
}
.discover-card-link:hover { opacity: .85; }

/* ══════════════════════════════════════════════════════════
   8. BOUTON URGENCE flottant
   Dégradé rouge #EB2129 → bleu #172D96 — style EXACT SOS Roof
   Forme pilule arrondie, texte blanc bold uppercase
   ══════════════════════════════════════════════════════════ */
.page-urgence-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}
.btn-urgence {
    /* Dégradé exact SOS Roof : rouge gauche → bleu droite */
    background: linear-gradient(90deg, #EB2129 0%, #172D96 100%);
    color: #fff;
    font-family: var(--fh);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 14px 28px;
    border: none;
    border-radius: 50px;             /* Pilule parfaite */
    cursor: pointer;
    white-space: nowrap;
    box-shadow:
        0 4px 20px rgba(235,33,41,.45),
        0 4px 20px rgba(23,45,150,.35);
    animation: urgpulse 2.4s infinite;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-urgence:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow:
        0 8px 32px rgba(235,33,41,.65),
        0 8px 32px rgba(23,45,150,.5);
}

@keyframes urgpulse {
    0%,100% {
        box-shadow: 0 4px 20px rgba(235,33,41,.45), 0 4px 20px rgba(23,45,150,.35);
    }
    50% {
        box-shadow: 0 4px 30px rgba(235,33,41,.75), 0 4px 30px rgba(23,45,150,.6);
    }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-title-section,
    .mosaic-grid-section,
    .page-services-cta,
    .page-steps-inner,
    .page-cta-devis-inner,
    .page-testi-inner,
    .page-discover-inner { padding-left: 20px; padding-right: 20px; }

    .page-steps-inner { grid-template-columns: 1fr; }
    .page-steps-title { position: static; margin-bottom: 32px; }
}

@media (max-width: 768px) {
    .mosaic-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 220px 200px;
    }
    .mosaic-card:nth-child(1) { grid-column: span 2; }
    .mosaic-card:nth-child(4) { grid-column: span 2; }

    .testi-slide { grid-template-columns: 1fr; }
    .testi-slide-img { height: 180px; }
    .testi-arrow { display: none; }

    .discover-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .mosaic-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 200px);
    }
    .mosaic-card:nth-child(1),
    .mosaic-card:nth-child(4) { grid-column: 1; }

    .page-services-cta { flex-direction: column; }
    .btn-urgence { font-size: 0.68rem; padding: 11px 16px; }
}
/* Page Entreprises — mêmes proportions que la page Particuliers */
.entreprise-page .page-discover { display: none; }

.pro-contract-cta { height: 580px; margin: 160px 0; padding: 0; background: linear-gradient(105deg,#e31d35 0%,#8b2457 49%,#26359e 100%); }
.pro-contract-cta-inner { display: grid; grid-template-columns: 485px minmax(0,1fr); grid-template-rows: 100%; gap: 68px; width: min(1516px,calc(100% - 80px)); height: 100%; min-height: 0; margin: 0 auto; overflow: visible; }
.pro-contract-photo { align-self: center; width: 100%; height: 694px; border-radius: 9px; background: url('hero-entreprises.webp') center/cover no-repeat; box-shadow: none; }
.pro-contract-content { display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 0; color: #fff; }
.pro-contract-content h2 { max-width: 650px; margin: 0 0 26px; color: #fff; font-family: 'Montserrat',sans-serif; font-size: clamp(2.15rem,2.45vw,2.65rem); font-weight: 900; line-height: .98; letter-spacing: -.8px; text-transform: uppercase; }
.pro-contract-content ul { display: grid; gap: 18px; margin: 0 0 56px; padding: 0; list-style: none; }
.pro-contract-content li { position: relative; padding-left: 36px; font-size: 1rem; font-weight: 500; }
.pro-contract-content li::before { content: '✓'; position: absolute; left: 0; top: -.2em; color: #fff; font-size: 1.7rem; font-weight: 900; }
.pro-contract-button { align-self: flex-start; padding: 14px 29px; border-radius: 999px; background: #fff; color: #111; font-family: 'Montserrat',sans-serif; font-size: .8rem; font-weight: 900; text-decoration: none; text-transform: uppercase; transition: transform .2s ease,box-shadow .2s ease; }
.pro-contract-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.24); }

.pro-credentials { margin-top: 70px; padding: 58px 20px; background: #f5f5f5; }
.pro-credentials-inner { display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; width: min(1120px,100%); margin: 0 auto; }
.pro-credential { position: relative; padding-left: 44px; }
.pro-credential-icon { position: absolute; top: 0; left: 0; color: #eb2129; font-size: 1.6rem; font-weight: 900; }
.pro-credential h3 { margin: 0 0 12px; color: #eb2129; font-size: 1rem; }
.pro-credential p { margin: 0; color: #555; font-size: .78rem; line-height: 1.65; }
.pro-credential span { display: block; width: 30px; height: 2px; margin-top: 26px; background: #eb2129; }

.entreprise-page .page-cta-devis { width: min(1120px,calc(100% - 40px)); margin: 70px auto; border-radius: 12px; overflow: hidden; }
.particulier-page .page-cta-devis { width: min(1120px,calc(100% - 40px)); margin: 70px auto; border-radius: 12px; overflow: hidden; }
.entreprise-page .page-testi-carousel { display: none; }
.entreprise-page .page-testi-inner { max-width: 1120px; }
.entreprise-page .pro-main-testimonials { padding-top: 75px; padding-bottom: 85px; }

.pro-footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3,1fr); gap: 46px; padding-top: 55px; padding-bottom: 38px; }
.pro-footer-grid h4 { margin: 0 0 16px; color: #111; font-size: .78rem; text-transform: uppercase; }
.pro-footer-grid p,.pro-footer-grid a,.pro-footer-grid strong { display: block; margin: 0 0 8px; color: #666; font-size: .76rem; line-height: 1.55; text-decoration: none; }
.pro-footer-grid a:hover { color: #172d96; }
.pro-footer-brand img { width: 78px; margin-bottom: 15px; }
.pro-footer-brand p { max-width: 210px; text-transform: uppercase; font-size: .68rem; }
.pro-footer-phones { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid #e2e2e2; color: #666; font-size: .75rem; }
.pro-footer-bottom { display: flex; justify-content: space-between; align-items: center; color: #777; font-size: .68rem; }

@media(max-width:800px){.pro-contract-cta{height:auto;margin:70px 0;padding:24px 16px}.pro-contract-cta-inner{grid-template-columns:1fr;grid-template-rows:auto auto;width:100%;height:auto;min-height:0;gap:0}.pro-contract-photo{height:390px}.pro-contract-content{padding:52px 32px}.pro-credentials-inner{grid-template-columns:1fr;gap:32px}.pro-footer-grid{grid-template-columns:1fr 1fr}.pro-footer-phones{align-items:flex-start;flex-direction:column}.entreprise-page .mosaic-card{min-height:220px}}
@media(max-width:520px){.pro-contract-cta{margin-top:50px}.pro-contract-photo{height:290px;min-height:290px}.pro-contract-content{padding:40px 24px}.pro-contract-content h2{font-size:1.75rem}.pro-contract-content li{padding-left:38px}.pro-contract-button{width:100%;text-align:center}.pro-footer-grid{grid-template-columns:1fr}.pro-footer-bottom{align-items:flex-start;flex-direction:column;gap:8px}.entreprise-page .page-cta-devis,.particulier-page .page-cta-devis{width:calc(100% - 24px)}}