/* ==========================================================================
   Page d'accueil : harmonisation avec le simulateur Ray Mobile
   Chargé uniquement par index.html, après les feuilles du thème.
   ========================================================================== */

:root {
    --rpg-blue: #2800dd;
    --rpg-blue-deep: #1a0096;
    --rpg-blue-50: #f3f1ff;
    --rpg-orange: #f29100;
    --rpg-ink: #14132b;
    --rpg-ink-2: #45455f;
    --rpg-ink-3: #6e6e87;
    --rpg-line: #e6e5f0;
    --rpg-bg: #f6f5ff;
    --rpg-radius: 20px;
    --rpg-shadow: 0 1px 2px rgba(20, 19, 43, .04), 0 16px 40px -18px rgba(40, 0, 221, .18);
}

body {
    color: var(--rpg-ink-2);
}

/* Le texte justifié crée des « rivières » de blancs : on aligne à gauche. */
[style*="text-align: justify"],
.manager-speech p {
    text-align: left !important;
}

/* ---------- Titres de section ---------- */
.sec-title .subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--rpg-line);
    border-radius: 999px;
    background: #fff;
    color: var(--rpg-blue) !important;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sec-title .subtitle::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rpg-orange);
}

.sec-title h2 {
    padding: 18px 0 0;
    color: var(--rpg-ink);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.sec-title.light .subtitle {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    color: #fff !important;
}

.sec-title.light h2 {
    color: #fff;
}

.sec-title .rpg-lead {
    max-width: 620px;
    margin: 14px auto 0;
    color: var(--rpg-ink-2);
    font-size: 18px;
    line-height: 1.6;
}

/* ---------- En-tête ---------- */
.top-header .contact-area a,
.top-header .contact-area a:visited {
    color: inherit;
}

.top-header .contact-area a:hover {
    color: var(--rpg-blue);
}

.rpg-header-cta,
.rpg-header-cta:visited,
.rpg-mobile-cta,
.rpg-mobile-cta:visited {
    color: #fff;
}

.rpg-header-cta {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--rpg-blue);
    box-shadow: 0 12px 24px -12px rgba(40, 0, 221, .7);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color .2s ease, transform .2s ease;
}

.rpg-header-cta:hover,
.rpg-header-cta:focus {
    background: var(--rpg-blue-deep);
    color: #fff;
    transform: translateY(-1px);
}

.rpg-header-cta:focus-visible,
.rpg-mobile-cta:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rpg-blue);
}

/* Le thème masque cette zone sous 1024 px : on ne l'aligne qu'au-dessus. */
@media (min-width: 1024px) {
    .main-header .outer-box {
        display: flex;
        align-self: stretch;
        align-items: center;
        margin-top: 0;
    }
}

/* Majuscule en début d'entrée seulement, comme il se doit en français */
.main-header .navigation > li > a,
.mobile-menu .navigation li > a {
    text-transform: none !important;
}

.top-header .contact-area li {
    white-space: nowrap;
}

/* Les ancres du menu ne passent pas sous l'en-tête fixe */
#services-section,
#equipe,
#contact-page-section,
#coordonnees {
    scroll-margin-top: 100px;
}

.rpg-mobile-cta {
    display: block;
    margin: 20px 25px 10px;
    padding: 14px 20px;
    border-radius: 999px;
    background: var(--rpg-blue);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.rpg-mobile-cta:hover,
.rpg-mobile-cta:focus {
    background: var(--rpg-blue-deep);
    color: #fff;
}

/* ---------- Boutons ---------- */
.btn-style-one {
    padding: 14px 30px;
    border-radius: 999px;
    background-color: var(--rpg-blue);
    box-shadow: 0 14px 28px -12px rgba(40, 0, 221, .6);
    font-size: 16px;
    line-height: 1.5;
    text-transform: none;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-style-one::before,
.ray-im-read-more::before {
    display: none !important;
}

.btn-style-one:hover {
    background-color: var(--rpg-blue-deep);
    box-shadow: 0 18px 34px -12px rgba(40, 0, 221, .75);
    transform: translateY(-2px);
}

.btn-style-one:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rpg-blue);
}

.btn-style-one .txt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Bannière : bouton blanc sur fond bleu, avec flèche */
.banner-section .btn-style-one {
    background-color: #fff;
    box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .45);
}

.banner-section .btn-style-one .txt {
    color: var(--rpg-blue);
}

.banner-section .btn-style-one .txt::after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-size: .85em;
    font-weight: 900;
    transition: transform .2s ease;
}

.banner-section .btn-style-one:hover {
    background-color: #fff;
}

.banner-section .btn-style-one:hover .txt::after {
    transform: translateX(3px);
}

/* Bouton WhatsApp flottant */
.rpg-whatsapp,
.rpg-whatsapp:visited,
.rpg-whatsapp:hover,
.rpg-whatsapp:focus {
    color: #fff;
}

.rpg-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1001;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 14px 28px -10px rgba(18, 140, 75, .7);
    font-size: 30px;
    transition: transform .2s ease, opacity .25s ease, visibility .25s ease;
}

.rpg-whatsapp:hover {
    transform: scale(1.06);
}

.rpg-whatsapp:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #128c4b;
}

.rpg-whatsapp__label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--rpg-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(6px, -50%);
    transition: opacity .2s ease, transform .2s ease;
}

.rpg-whatsapp:hover .rpg-whatsapp__label,
.rpg-whatsapp:focus-visible .rpg-whatsapp__label {
    opacity: 1;
    transform: translate(0, -50%);
}

/* Sur mobile, la barre du simulateur a déjà son propre bouton */
body.rmci-bar-visible .rpg-whatsapp,
body.mobile-menu-visible .rpg-whatsapp {
    opacity: 0;
    visibility: hidden;
    transform: scale(.8);
}

/* Bouton retour en haut, au-dessus du bouton WhatsApp */
.scroll-to-top.btn-style-one {
    right: 30px;
    bottom: 96px;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    line-height: 48px;
}

/* ---------- Bannière ---------- */
/* --rpg-entete : bas de l'en-tête mesuré par js/accueil.js ; la valeur par défaut sert de secours. */
.banner-section.banner-slider .content-column .inner-column {
    padding-top: calc(var(--rpg-entete, 180px) + 48px);
    padding-bottom: 130px;
}

.banner-section.banner-slider .content-column .btns-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}

.banner-section.banner-slider .content-column .theme-btn {
    margin-right: 0;
}

.rpg-btn-ghost,
.rpg-btn-ghost:visited {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px;
    border: 1.5px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    transition: background-color .2s ease, border-color .2s ease;
}

.rpg-btn-ghost:hover,
.rpg-btn-ghost:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.rpg-btn-ghost:focus-visible {
    box-shadow: 0 0 0 3px var(--rpg-orange);
}

.rpg-hero-visuels {
    position: relative;
}

.rpg-hero-visuels > picture {
    display: block;
    opacity: 0;
    animation: rpg-fondu 15s ease-in-out infinite;
}

.rpg-hero-visuels > picture + picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.rpg-hero-visuels img {
    display: block;
    width: 100%;
    height: auto;
}

/* Chaque visuel reste 5 s à l'écran ; le premier est visible dès l'arrivée. */
.rpg-hero-visuels > picture:nth-child(1) { animation-delay: -1s; }
.rpg-hero-visuels > picture:nth-child(2) { animation-delay: 4s; }
.rpg-hero-visuels > picture:nth-child(3) { animation-delay: 9s; }

@keyframes rpg-fondu {
    0% { opacity: 0; }
    6.67% { opacity: 1; }
    33.33% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

.banner-section.banner-slider .content-column h1 {
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15em;
}

.banner-section.banner-slider .content-column p {
    max-width: 540px;
    color: rgba(255, 255, 255, .85);
    font-size: 18px;
    line-height: 1.7em;
}

/* ---------- Bloc paiements (fond bleu) ---------- */
.experince-sec-desc .inner-column {
    max-width: 520px;
}

.experince-sec-desc .logo-desc {
    color: #fff;
    font-size: 21px;
    line-height: 1.55;
}

.experince-sec-desc .logo-desc-title {
    margin: 28px 0 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .75;
}

.experince-sec-desc .logo-desc-list {
    margin: 0;
    padding: 0;
}

.experince-sec-desc .logo-desc-li {
    position: relative;
    margin-bottom: 14px;
    padding-left: 38px;
    color: rgba(255, 255, 255, .92);
    font-size: 17px;
    line-height: 1.6;
    list-style: none;
}

.experince-sec-desc .logo-desc-li::before {
    content: "\f00c";
    position: absolute;
    top: 2px;
    left: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rpg-orange);
    color: #241300;
    font-family: "Font Awesome 5 Free";
    font-size: 11px;
    font-weight: 900;
}

/* ---------- Mot du Président ---------- */
.manager-speech p {
    margin-bottom: 18px;
    color: var(--rpg-ink-2);
    font-size: 17px !important;
    line-height: 1.8;
}

.rpg-download {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding: 12px 20px 12px 12px;
    border: 1px solid var(--rpg-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--rpg-shadow);
    color: var(--rpg-ink);
    transition: border-color .2s ease, transform .2s ease;
}

.rpg-download:hover,
.rpg-download:focus,
.rpg-download:visited {
    color: var(--rpg-ink);
}

.rpg-download:hover {
    border-color: #c9c1ff;
    transform: translateY(-2px);
}

.rpg-download:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rpg-blue);
}

.rpg-download__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--rpg-blue-50);
    color: var(--rpg-blue);
    font-size: 18px;
}

.rpg-download strong {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
}

.rpg-download small {
    display: block;
    color: var(--rpg-ink-3);
    font-size: 13px;
    line-height: 1.3;
}

.rpg-download > .fa-arrow-right {
    color: var(--rpg-blue);
    font-size: 13px;
    transition: transform .2s ease;
}

.rpg-download:hover > .fa-arrow-right {
    transform: translateX(3px);
}

/* ---------- Services : fond clair et ballons ---------- */
.services-section.style-two {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 40px 0 36px;
    background: linear-gradient(180deg, #fff 0%, var(--rpg-bg) 100%);
}

.services-section .upper-box,
.services-section .services-box {
    position: relative;
    z-index: 1;
}

/* Un ballon par service, avec son logo. */
.rpg-balloons {
    --echelle: 1;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* Les ballons apparaissent et disparaissent en fondu aux bords de la section. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.rpg-balloons span {
    --t: calc(var(--s) * var(--echelle));
    position: absolute;
    bottom: calc(var(--t) * -2.4);
    left: var(--x);
    width: var(--t);
    height: calc(var(--t) * 1.18);
    border-radius: 50% 50% 48% 52% / 44% 44% 56% 56%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 30%),
        #f1efff;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 30%),
        color-mix(in srgb, var(--c) 22%, #fff);
    box-shadow: inset -6px -10px 18px color-mix(in srgb, var(--c) 20%, transparent);
    opacity: .9;
    animation: rpg-envol var(--d) linear var(--w) infinite;
    will-change: transform;
}

.rpg-balloons img {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 72%;
    max-width: none;
    max-height: 52%;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

/* Nœud du ballon */
.rpg-balloons span::before {
    content: "";
    position: absolute;
    top: calc(100% - 2px);
    left: 50%;
    width: 10px;
    height: 8px;
    margin-left: -5px;
    background: color-mix(in srgb, var(--c) 40%, #fff);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Ficelle */
.rpg-balloons span::after {
    content: "";
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    width: 1.5px;
    height: calc(var(--t) * 1.1);
    margin-left: -.75px;
    background: linear-gradient(color-mix(in srgb, var(--c) 45%, #fff), rgba(255, 255, 255, 0));
    transform-origin: top center;
    animation: rpg-ficelle 2.6s ease-in-out infinite alternate;
}

/* La montée dépasse la hauteur de la section : le ballon sort par le haut avant de reboucler. */
@keyframes rpg-envol {
    0% { transform: translate3d(0, 0, 0) rotate(-5deg); }
    20% { transform: translate3d(16px, -300px, 0) rotate(4deg); }
    40% { transform: translate3d(-12px, -600px, 0) rotate(-4deg); }
    60% { transform: translate3d(14px, -900px, 0) rotate(4deg); }
    80% { transform: translate3d(-10px, -1200px, 0) rotate(-3deg); }
    100% { transform: translate3d(8px, -1500px, 0) rotate(3deg); }
}

@keyframes rpg-ficelle {
    from { transform: rotate(-6deg); }
    to { transform: rotate(6deg); }
}

/* Grille des métiers : chaque carte est entièrement cliquable */
.rpg-metiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.rpg-metier {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    border: 1px solid var(--rpg-line);
    border-radius: var(--rpg-radius);
    background: #fff;
    box-shadow: var(--rpg-shadow);
    color: var(--rpg-ink);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.rpg-metier:hover,
.rpg-metier:focus,
.rpg-metier:visited {
    color: var(--rpg-ink);
}

.rpg-metier:hover {
    border-color: #c9c1ff;
    box-shadow: 0 28px 50px -24px rgba(40, 0, 221, .35);
    transform: translateY(-6px);
}

.rpg-metier:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rpg-blue);
}

.rpg-metier__logo {
    display: flex;
    align-items: center;
    height: 64px;
    margin-bottom: 18px;
}

.rpg-metier__logo img {
    width: auto;
    max-width: 150px;
    max-height: 64px;
    object-fit: contain;
}

.rpg-metier__nom {
    margin-bottom: 6px;
    color: var(--rpg-ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.rpg-metier__texte {
    margin-bottom: 18px;
    color: var(--rpg-ink-2);
    font-size: 15px;
    line-height: 1.6;
}

.rpg-metier__lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--rpg-blue);
    font-size: 15px;
    font-weight: 700;
}

.rpg-metier__lien .fas {
    font-size: 12px;
    transition: transform .2s ease;
}

.rpg-metier:hover .rpg-metier__lien .fas {
    transform: translateX(4px);
}

/* ---------- Partenaires ---------- */
.clients-section .sec-title h2 {
    font-size: 34px;
}

.clients-section .sponsors-outer {
    border: 1px solid var(--rpg-line);
    box-shadow: var(--rpg-shadow);
}

.clients-section .slide-item img {
    filter: grayscale(1);
    opacity: .7;
    transition: filter .3s ease, opacity .3s ease;
}

.clients-section .slide-item:hover img {
    filter: none;
    opacity: 1;
}

/* ---------- Contact ---------- */
.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="tel"],
.contact-form .form-group input[type="email"],
.contact-form .form-group textarea {
    display: block;
    width: 100%;
    height: 56px;
    padding: 16px 20px;
    border: 1.5px solid var(--rpg-line);
    border-radius: 14px;
    background: #fff;
    color: var(--rpg-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-form .form-group textarea {
    height: 160px;
}

.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {
    color: var(--rpg-ink-3);
}

.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
    border-color: var(--rpg-blue);
    box-shadow: 0 0 0 4px rgba(40, 0, 221, .12);
}

.contact-form .form-group label.error {
    display: block;
    margin: 6px 0 0 4px;
    color: #c4002b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.contact-form .form-group input.error,
.contact-form .form-group textarea.error {
    border-color: #c4002b;
}

.rpg-form-retour {
    margin: 0 15px 20px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.rpg-form-retour--succes {
    background: #e8f8ef;
    color: #0f6b3a;
}

.rpg-form-retour--erreur {
    background: #fdecef;
    color: #a3001f;
}

.contact-form .form-group button:disabled {
    opacity: .7;
    cursor: progress;
}

.contact-form .form-group button {
    padding: 16px 34px;
    text-transform: none;
}

.contact-page-section .contact-info {
    scroll-margin-top: 120px;
}

.contact-page-section .contact-info .info-block .inner {
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 16px;
}

.contact-page-section .contact-info .info-block .inner .icon-box {
    display: grid;
    flex: none;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--rpg-blue-50);
}

.contact-page-section .contact-info .info-block .inner .icon-box i {
    color: var(--rpg-blue);
    font-size: 26px;
    line-height: 1;
}

.contact-page-section .contact-info .info-block .inner .icon-box i::before {
    margin: 0;
    font-size: 26px;
}

.contact-page-section .contact-info .info-block .inner .text-box {
    width: auto;
    padding-left: 0;
}

.contact-page-section .contact-info .info-block h4 {
    margin-bottom: 6px;
    color: var(--rpg-ink);
    font-size: 18px;
    font-weight: 700;
}

.contact-page-section .contact-info .info-block p {
    color: var(--rpg-ink-2);
    font-size: 15px;
    line-height: 1.7;
}

.contact-page-section .contact-info .info-block p a {
    color: var(--rpg-ink-2);
}

.contact-page-section .contact-info .info-block p a:hover {
    color: var(--rpg-blue);
}

.contact-page-section .map-column .inner-column {
    height: auto;
}

.contact-page-section .map-column .map-outer {
    position: relative;
    height: auto;
    border-radius: var(--rpg-radius);
    background: var(--rpg-bg);
}

.rpg-map {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: var(--rpg-radius);
    box-shadow: var(--rpg-shadow);
}

.rpg-map-link {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 24px -10px rgba(20, 19, 43, .45);
    color: var(--rpg-ink);
    font-size: 14px;
    font-weight: 700;
}

.rpg-map-link:hover,
.rpg-map-link:focus,
.rpg-map-link:visited {
    color: var(--rpg-blue);
}

.rpg-map-link .fas {
    color: var(--rpg-blue);
}

/* ---------- Pied de page ---------- */
.main-footer .widget-content p,
.main-footer .footer-bottom .copyright-text p {
    line-height: 1.75;
}

.main-footer .links-widget .list li a:hover {
    color: #fff;
}

/* ---------- Adaptations ---------- */
/* Sous 1000 px, la barre du haut se replie sur plusieurs lignes : on la retire.
   Ses informations restent dans le menu mobile, le contact, le pied de page et WhatsApp. */
@media (max-width: 999px) {
    .main-header .top-header {
        display: none;
    }
}

@media (max-width: 1200px) {
    .banner-section.banner-slider .content-column h1 {
        font-size: 40px;
    }

    /* Barre du haut : l'adresse et la boîte postale restent dans le pied de page */
    .top-header .contact-area li:nth-child(2),
    .top-header .contact-area li:nth-child(3) {
        display: none;
    }
}

@media (max-width: 991px) {
    .sec-title h2 {
        font-size: 36px;
    }

    .rpg-metiers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .banner-section.banner-slider .content-column .inner-column {
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .sec-title h2 {
        font-size: 30px;
    }

    .sec-title .rpg-lead {
        font-size: 16px;
    }

    .experince-sec-desc .inner-column {
        padding-left: 0 !important;
    }

    .experince-sec-desc .logo-desc {
        font-size: 19px;
    }

    .rpg-map {
        height: 300px;
    }

    .services-section.style-two {
        padding: 20px 0 28px;
    }

    .banner-section.banner-slider .content-column h1 {
        font-size: 32px;
        line-height: 1.2em;
    }

    /* Mobile : cartes horizontales compactes, logo à gauche */
    .rpg-metiers {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rpg-metier {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
        padding: 16px 18px;
    }

    .rpg-metier__logo {
        grid-row: 1 / span 3;
        justify-content: center;
        height: auto;
        margin: 0;
    }

    .rpg-metier__logo img {
        max-width: 76px;
        max-height: 56px;
    }

    .rpg-metier__nom {
        margin: 0;
        font-size: 17px;
    }

    .rpg-metier__texte {
        margin: 2px 0 6px;
        font-size: 14px;
        line-height: 1.5;
    }

    .rpg-metier__lien {
        margin: 0;
        font-size: 14px;
    }

    .rpg-whatsapp {
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

    .scroll-to-top.btn-style-one {
        right: 20px;
        bottom: 84px;
    }

    /* Section « Mot du Président » : même rythme que le reste de la page */
    .experince-sec:not(.experince-sec-desc) {
        padding-bottom: 70px;
    }

    .rpg-balloons {
        --echelle: .62;
        opacity: .75;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-style-one,
    .rpg-metier,
    .rpg-download {
        transition: none;
    }

    .rpg-balloons span,
    .rpg-balloons span::after,
    .rpg-hero-visuels > picture {
        animation: none;
    }

    .rpg-hero-visuels > picture:first-child {
        opacity: 1;
    }

    .rpg-balloons span {
        transform: translateY(calc(var(--y) * -1));
    }
}