/* ==========================================================
   OROS INFOGÉRANCE
   Feuille de style principale
   Version : 1.0.0
   ========================================================== */

/* ==========================================================
   VARIABLES
   ========================================================== */

:root {

    /* Couleurs */

    --color-primary: #0B3C5D;
    --color-primary-light: #F8FAFC;

    --color-accent: #D4AF37;
    --color-accent-hover: #C8A548;

    --color-text: #243746;
    --color-text-light: #5B6672;

    --color-white: #FFFFFF;
    --color-border: #E5E7EB;

    /* Ombres */

    --shadow-sm: 0 4px 12px rgba(11, 60, 93, 0.06);
    --shadow-md: 0 10px 30px rgba(11, 60, 93, 0.10);

    /* Rayons */

    --radius: 14px;

    /* Espacements */

    --section-spacing: 6rem;
    --container-width: 1200px;

    /* Animations */

    --transition: 0.2s ease-in-out;

}

/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--color-text);

    background: var(--color-white);

    line-height: 1.7;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

}

/* ==========================================================
   ÉLÉMENTS GÉNÉRAUX
   ========================================================== */

img {

    display: block;
    max-width: 100%;
    height: auto;

}

a {

    color: inherit;
    text-decoration: none;

}

ul {

    list-style: none;

}

button {

    font: inherit;
    cursor: pointer;

}

/* ==========================================================
   ACCESSIBILITÉ
   ========================================================== */

.skip-link {

    position: absolute;

    left: -9999px;
    top: auto;

}

.skip-link:focus {

    left: 1rem;
    top: 1rem;

    padding: .75rem 1rem;

    background: var(--color-primary);

    color: var(--color-white);

    border-radius: 8px;

    z-index: 9999;

}

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

.container {

    width: min(100% - 2rem, var(--container-width));

    margin-inline: auto;

}

.section {

    padding: var(--section-spacing) 0;

}

/* ==========================================================
   TYPOGRAPHIE
   ========================================================== */

h1,
h2,
h3 {

    color: var(--color-primary);

    line-height: 1.2;

    font-weight: 700;

}

h1 {

    font-size: clamp(2.4rem, 5vw, 4rem);

    margin-bottom: 1.5rem;

}

h2 {

    font-size: clamp(2rem, 4vw, 2.8rem);

    margin-bottom: 1rem;

}

h3 {

    font-size: 1.35rem;

    margin-bottom: .75rem;

}

p {

    margin-bottom: 1rem;

    color: var(--color-text-light);

}

.section-header {

    max-width: 760px;

    margin: 0 auto 4rem;

    text-align: center;

}

.section-kicker {

    display: inline-block;

    margin-bottom: .75rem;

    font-size: 0.95rem;

    font-weight: 800;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: var(--color-accent);

    text-shadow: 0 0 1px rgba(11,60,93,.15);
}

.section-intro {

    font-size: 1.1rem;

}

/* ==========================================================
   LIENS
   ========================================================== */

a:hover {

    color: var(--color-primary);

}

/* ==========================================================
   SÉLECTION TEXTE
   ========================================================== */

::selection {

    background: rgba(212, 175, 55, .25);

}

/* ==========================================================
   FOCUS CLAVIER
   ========================================================== */

:focus-visible {

    outline: 3px solid var(--color-accent);

    outline-offset: 3px;

}

/* ==========================================================
   HEADER
   ========================================================== */

.site-header {

    position: sticky;
    top: 0;

    z-index: 1000;

    background: rgba(255,255,255,.92);

    backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--color-border);

}

.site-header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: 82px;

}

.logo {

    display: flex;

    align-items: center;

    gap: 1rem;

    font-weight: 700;

    color: var(--color-primary);

}

.logo img {

    max-width: 220px;
    width: 100%;
    height: auto;
    display: block;

}


.logo-text {

    font-size: 1.15rem;

}

/* ==========================================================
   NAVIGATION
   ========================================================== */

.main-nav ul {

    display: flex;

    gap: 2rem;

    align-items: center;

}

.main-nav a {

    position: relative;

    font-weight: 600;

    color: var(--color-text);

    transition: var(--transition);

}

.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0;

    height: 2px;

    background: var(--color-accent);

    transition: .25s;

}

.main-nav a:hover::after {

    width: 100%;

}

/* ==========================================================
   HERO
   ========================================================== */

.hero {

    padding: 7rem 0;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        );

}

.hero-grid {

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    align-items: center;

    gap: 4rem;

}

.hero-kicker {

    display: inline-block;

    margin-bottom: 1rem;

    color: var(--color-accent);

    font-size: .95rem;

    font-weight: 700;

    letter-spacing: .08em;

}

.hero-description {

    font-size: 1.15rem;

    max-width: 640px;

}

.hero-location {

    margin: 2rem 0;

    font-weight: 500;

}

.hero-actions {

    margin-bottom: 2rem;

}

.hero-trust {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;

    align-items: center;

    color: var(--color-text-light);

    font-size: .95rem;

}

.hero-trust span {

    color: var(--color-accent);

}

/* ==========================================================
   BOUTONS
   ========================================================== */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 1rem 1.8rem;

    border-radius: 999px;

    font-weight: 700;

    transition: var(--transition);

}

.button-primary {

    color: white;

    background:

        linear-gradient(
            180deg,
            var(--color-accent),
            var(--color-accent-hover)
        );

    box-shadow: var(--shadow-md);

}

.button-primary:hover {

    transform: translateY(-2px);

    box-shadow:

        0 14px 35px rgba(212,175,55,.30);

}

/* ==========================================================
   ILLUSTRATION HERO
   ========================================================== */

.hero-visual {

    display: flex;

    justify-content: center;

}

.hero-visual img {

    width: min(100%, 460px);

}

/* ==========================================================
   CARTES
   ========================================================== */

.service-card,
.territory-card,
.contact-card, {

    background: var(--color-white);

    border: 1px solid #D6DEE8;

    border-radius: 16px;

    padding: 2rem;

    box-shadow: 0 10px 25px rgba(11, 60, 93, 0.08);

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        border-color .30s ease;

}/* ===========================
   HOVER
   =========================== */

.service-card:hover,
.territory-card:hover,
.contact-card:hover, {

    transform: translateY(-6px);

    border-color: var(--color-accent);

    box-shadow: 0 18px 40px rgba(11, 60, 93, 0.15);

}

/* ===========================
   ICÔNES
   =========================== */

.service-card img, {

    width: 72px;

    height: auto;

    display: block;

    margin-bottom: 1.5rem;

}


/* Les pseudo-éléments ont besoin de cette propriété */

.service-card,
.territory-card,
.contact-card, {

    position: relative;

    overflow: hidden;

}

.service-card:hover,
.territory-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-md);

}

/* ==========================================================
   SERVICES
   ========================================================== */

.services-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 2rem;

}

.service-card {

    padding: 2.2rem;

}

.service-card img {

    width: 56px;

    margin-bottom: 1.5rem;

}

.service-card p:last-child {

    margin-bottom: 0;

}

/* ==========================================================
   POURQUOI OROS
   ========================================================== */

.advantages-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.8rem;

    margin-top: 3rem;

}

.advantages-grid article {

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-left: 7px solid var(--color-accent);

    border-radius: var(--radius);

    padding: 1.8rem;

    box-shadow: var(--shadow-sm);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-left-width .25s ease;

}

.advantages-grid article:hover {

    transform: translateY(-6px);

    border-left-color: #C8A548;

    box-shadow: 0 18px 40px rgba(11, 60, 93, 0.12);

}

/* Ligne contenant la petite bordure et le titre */

.advantages-grid h3 {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1.25rem;

    color: var(--color-primary);

    font-size: 1.75rem;

}

/* Petite bordure or */

.advantages-grid h3::before {

    content: "";

    display: block;

    width: 6px;

    height: 42px;

    background: var(--color-accent);

    border-radius: 999px;

    flex-shrink: 0;

}

.advantages-grid p {

    color: var(--color-text-light);

    line-height: 1.8;

    margin-bottom: 0;

}

/* ==========================================================
   TERRITOIRE
   ========================================================== */

.territory {

    background: var(--color-primary-light);

}

.territory-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 2rem;

}

.territory-card {

    padding: 2rem;

}

.territory-card ul {

    margin-top: 1rem;

}

.territory-card li {

    padding: .5rem 0;

    border-bottom: 1px solid var(--color-border);

}

.territory-card li:last-child {

    border-bottom: none;

}

/* ==========================================================
   CONTACT
   ========================================================== */

.contact-card {

    max-width: 700px;

    margin: 0 auto;

    padding: 2.5rem;

    text-align: center;

}

.contact-card p:last-child {

    margin-bottom: 0;

}

.contact-card a {

    color: var(--color-primary);

    font-weight: 600;

}

.contact-card a:hover {

    color: var(--color-accent);

}

/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {

    background: var(--color-primary);

    color: var(--color-white);

    padding: 2.5rem 0;

    margin-top: 4rem;

}

.site-footer p {

    color: rgba(255,255,255,.85);

    text-align: center;

    margin-bottom: .75rem;

}

.site-footer p:last-child {

    margin-bottom: 0;

    font-size: .95rem;

}

/* ==========================================================
   ANIMATIONS
   ========================================================== */

.service-card,
.territory-card,
.button {

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        color .25s ease;

}

.service-card:hover,
.territory-card:hover {

    transform: translateY(-4px);

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 992px) {

    .hero-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-description {

        margin-inline: auto;

    }

    .hero-trust {

        justify-content: center;

    }

    .services-grid {

    grid-template-columns: repeat(2, 1fr);

}

.advantages-grid {

    grid-template-columns: 1fr;

}

}

@media (max-width: 768px) {

    .services-grid {

    grid-template-columns: 1fr;

}

    .site-header .container {

        flex-direction: column;

        justify-content: center;

        padding: 1rem 0;

    }

    .main-nav ul {

        flex-wrap: wrap;

        justify-content: center;

        gap: 1rem;

        margin-top: 1rem;

    }

    .hero {

        padding: 5rem 0;

    }

    .section {

        padding: 4rem 0;

    }

    h1 {

        font-size: 2.4rem;

    }

}

@media (prefers-reduced-motion: reduce) {

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}

/* ==========================================================
   Menu mobile
   ========================================================== */

.menu-toggle {
    display: none;
}

@media (max-width: 768px) {

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .main-nav {
        display: none;
    }

    .main-nav.is-open {
        display: block;
    }

}

/* ==========================================================
   Bouton retour en haut
   ========================================================== */

#back-to-top {

    position: fixed;

    right: 2rem;
    bottom: 2rem;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border: none;
    border-radius: 50%;

    background: var(--color-primary);
    color: var(--color-white);

    font-size: 1.5rem;
    font-weight: 700;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s;

    box-shadow: var(--shadow-md);

    z-index: 1000;

}

#back-to-top.is-visible {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}

#back-to-top:hover {

    transform: translateY(-3px);

    background: var(--color-accent);

}

/* ==========================================================
   Animations Oros
   ========================================================== */

.reveal {

    opacity: 0;

    transform: translateY(24px);

  transition:

    opacity 2s ease,

    transform 2s ease;

}

.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}