:root {
    /* Palette HB (bleu/vert) – inspirée du logo (PRIORITAIRE) */
    --c-bg-1: #0f2f4a;           /* bleu profond (fond gradient haut) */
    --c-bg-2: #0a2135;           /* bleu très foncé (fond gradient bas) */
    --c-accent: #46a447;         /* vert HB principal (boutons / accents) */
    --c-accent-2: #7ccc7e;       /* vert clair (hover / bordures) */
    --c-tint: #e7f6ea;           /* vert très pâle (texte secondaire) */
    --c-text: #ffffff;           /* texte principal */
    --c-card: rgba(255, 255, 255, .06);
    --c-border: rgba(231, 246, 234, .28);
    --radius: 14px;
    --radius-xl: 18px;
    --shadow: 0 10px 28px rgba(0, 0, 0, .22);

    /* Variables Secondaires conservées et harmonisées si possible */
    --colorBody: transparent; /* Conserve le transparent du secondaire */
    --colorText: var(--c-text); /* Aligné sur la variable principale */
    --ColorNumberOne: var(--c-bg-1); /* Aligné sur la variable principale */
    --ColorNumber2: var(--c-accent); /* Aligné sur la variable principale */
    --ColorNumber3: var(--c-bg-2); /* Aligné sur la variable principale */
    --ColorNumber4: var(--c-accent-2); /* Aligné sur la variable principale */
    --ColorNumber5: #236787; /* Spécifique au secondaire */
    --colorText2: white; /* Spécifique au secondaire */
}

/* Règle universelle */
* {
    box-sizing: border-box;
}

/* Sélecteurs html, body (PRIORITAIRE) */
html,
body {
    height: 100%;
    overflow-x: hidden;
    /* Ajout du secondaire */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Lato, Arial, sans-serif;
    color: var(--c-text);
    /* Fond du PRIORITAIRE (plus complexe) */
    background: linear-gradient(180deg, rgb(22 66 102 / 81%) 0%, rgb(15 50 80 / 96%) 70%, rgb(15 45 73 / 69%) 100%),
        url(images/BackG.png) center / cover no-repeat fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Propriétés du Secondaire ajoutées/remplacées si non conflictuelles */
    /* Le 'color: var(--colorText);' est géré par 'color: var(--c-text);' */
    /* Le 'background: var(--colorBody);' est remplacé par le fond complexe du Prioritaire */
}

/* La classe .Body du secondaire est très intrusive et pourrait entrer en conflit avec les layouts de la classe 'main' du prioritaire, mais elle définit un comportement de scroll et de fond potentiellement désiré pour une mise en page spécifique.
   Je la conserve, mais elle doit être utilisée avec précaution car elle fixe le corps. */
.Body {
    scroll-behavior: smooth;
    background-image: url('images/BackG.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: auto auto;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Images, liens, titres (PRIORITAIRE) */
img {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

h1 {
    font-size: clamp(1.8rem, 5vw, 3rem);
    line-height: 1.12;
    margin: 0;
    font-weight: 900;
}

h2 {
    font-size: clamp(1.25rem, 3.2vw, 2rem);
    line-height: 1.25;
    margin: .2em 0 .5em;
    font-weight: 900;
}

p,
li {
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.7;
}

/* Surcharge des h1, h2, h3 et p du Secondaire (conflit de margin/font-weight pour h1/h2) */
h1 {
    /* Le prioritaire l'emporte sur 'margin: 0;' */
}

h2 {
    /* Le prioritaire l'emporte sur 'margin: 0;' */
}

h3 {
    margin: 0; /* Ajout du secondaire */
}

p {
    /* Propriétés du Secondaire ajoutées/surchargées */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    font-weight: 100; /* Surcharge le font-weight du prioritaire s'il est utilisé */
    padding: 3vh; /* Ajout/Surcharge */
}

/* Liens du secondaire */
a:hover {
    color: grey;
}

a[href^="tel"] {
    text-decoration: none;
}

/* Scroll-margin */
:target {
    scroll-margin-top: 90px;
}

/* Scrollbar (Secondaire) */
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--ColorNumberOne);
    border-radius: 10px;
    border: 2px solid var(--ColorNumber2);
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: var(--ColorNumber2);
}

/* HR (Secondaire) */
hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 10px;
    border-color: var(--colorText);
}

/* Image rendering (Secondaire) */
img {
    /* Les règles du prioritaire l'emportent sur display/max-width/height (positionnement/taille) */
    /* Les règles spécifiques au rendu d'image du secondaire sont conservées */
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
}

/* Sections et layouts (PRIORITAIRE) */
header.hero {
    position: relative;
    isolation: isolate;
    background: url('images/hero-taxi.jpg') center/cover no-repeat;
    min-height: clamp(46vh, 64vh, 72vh);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 14vh 5vw 12vh;
    border-bottom: 1px solid var(--c-border);
}

header.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #003863b3, rgb(97 130 157 / 66%));
    z-index: 0;
}

header.hero .inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: auto;
    display: grid;
    gap: 22px;
}

header.hero p {
    margin: 0 auto;
    opacity: .96;
    font-weight: 600;
    font-size: clamp(1rem, 2.1vw, 1.2rem);
}

.hero-logos {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px auto 0;
    max-width: 760px;
}

.logo-card {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.logo-card img {
    display: block;
    height: 120px;
    width: auto;
    object-fit: contain;
}

main {
    width: 100%;
    max-width: 1100px;
    margin: 6vh auto 10vh;
    padding-inline: clamp(14px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

.features {
    display: grid;
    gap: clamp(12px, 2.2vw, 18px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: clamp(14px, 2.6vw, 20px);
    box-shadow: var(--shadow);
}

.card .icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(70, 164, 71, .18);
    margin-bottom: .6rem;
    color: var(--c-tint);
}

.card h3 {
    margin: .2rem 0 .3rem;
    font-size: 1.06rem;
}

.card2 {
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: clamp(14px, 2.6vw, 20px);
    box-shadow: var(--shadow);
    color: #0e0e0e;
}

.card2 .icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #46a447c2;
    margin-bottom: .6rem;
    color: #ffffff;
}



.two-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 36px);
    align-items: center;
}

.two-cols>* {
    min-width: 0;
}

.photo img {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    object-fit: cover;
}

.two-colsSPE {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 36px);
    align-items: center;
}

.two-colsSPE>* {
    min-width: 0;
}

.service-grid {
    display: grid;
    gap: clamp(12px, 2vw, 16px);
    grid-template-columns: 1fr;
}

.service-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: #0e0e0e;
    overflow: hidden;
}

.service-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #eee;
}

.service-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-body {
    padding: 14px 16px;
}

.service-body .icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #46a447c2;
    color: #fff;
    margin-bottom: .5rem;
}

.service-body h3 {
    margin: .1rem 0 .3rem;
    font-size: 1.08rem;
    line-height: 1.25;
}

.service-body p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.service-actions {
    padding: 0 16px 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-more {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: 14px 20px;
    border-radius: 999px;
    border: 2px solid var(--c-accent-2);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .3px;
    transition: .2s;
    background: #46a447c2;
    color: #ffffff;
}

.btn-more .material-icons {
    font-size: 1.1em;
}

.btn-more:hover {
    background: #fff;
    transform: translateY(-1px);
    border-color: var(--c-accent);
    color: #2e7d32;
}

.stats {
    display: grid;
    gap: clamp(12px, 2vw, 16px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
    text-align: center;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.stat-label {
    opacity: .95;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 900;
    color: var(--c-tint);
}

.stat-value {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1;
    margin: .15em 0;
}

.stat-sub {
    font-size: .98rem;
    opacity: .95;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgba(70, 164, 71, .15), rgba(70, 164, 71, .08));
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius-xl, 18px);
    padding: clamp(14px, 2.6vw, 22px);
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: .2em;
    padding: 14px 20px;
    border-radius: 999px;
    border: 2px solid var(--c-accent-2);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .3px;
    transition: .2s;
    background: #46a447c2;
	margin: 1vh;
}

.cta .material-icons {
    font-size: 1.2em;
}

.cta:hover {
    background: #fff;
    transform: translateY(-1px);
    border-color: var(--c-accent);
    color: #2e7d32;
}

.callbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: none;
    background: rgba(7, 24, 40, .92);
    backdrop-filter: saturate(1.1) blur(6px);
    padding: 10px 14px;
    border-top: 1px solid var(--c-border);
}

.callbar .cta {
    width: 100%;
    justify-content: center;
}

.center {
    text-align: center;
}

.muted {
    opacity: .9;
}

.muted-bis {
    opacity: .95;
    font-weight: 700;
}

.partners {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.partners img {
    height: 54px;
    width: auto;
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    box-shadow: var(--shadow);
}

.badge {
    display: inline-block;
    padding: .42em .8em;
    border-radius: 999px;
    background: rgba(70, 164, 71, .18);
    border: 1px solid var(--c-accent-2);
    font-weight: 900;
    letter-spacing: .2px;
    color: var(--c-tint);
}

.map-embed {
    width: 100%;
    aspect-ratio: 16/9;
    background: #cfd8dc;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@supports not (aspect-ratio: 1 / 1) {
    .map-embed {
        position: relative;
        padding-top: 56.25%;
    }

    .map-embed iframe {
        position: absolute;
        inset: 0;
    }
}

/* ------------------------------------------------------------------ */
/* Classes et ID spécifiques du SECONDAIRE (ajoutés après le prioritaire) */
/* ------------------------------------------------------------------ */

#prefond {
    position: fixed;
    background: linear-gradient(114deg, var(--ColorNumberOne), var(--ColorNumber2), var(--ColorNumberOne), var(--ColorNumber3));
    background-size: 200% 400%;
    animation: gradient 10s ease infinite;
    width: 70vw;
    height: 100vh;
    z-index: -2;
    top: 0vh;
    left: 15vw;
}

#fond {
    position: fixed;
    background-image: url(images/fond.jpg);
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 90vw;
    left: 5vw;
    height: 50vh;
    z-index: -1;
    top: 35vh;
    transition: background-image 1s ease;
    display: none;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.margin-top-10 {
    padding-top: 10px;
}

.line-break {
    border-bottom: 3px solid var(--colorText);
    width: 60vw;
    margin: 0 auto;
    margin-bottom: 6vh;
}

.alternative {
    background: linear-gradient(114deg, var(--ColorNumber2), var(--colorBody), var(--ColorNumber4), var(--colorBody));
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    color: var(--colorText2);
}

.alternative2 {
    background: #0000001f;
}

.flex {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

.Format80 {
    width: 80vw;
    margin: 3vh 10vw 3vh;
}

.Format60 {
    width: 60vw;
    margin: 3vh 20vw 3vh;
}

.Format60bis {
    width: 60vw;
    margin: 3vh 20vw 3vh;
    background-color: #4c819dcf;
    height: 60vh;
}

.supertitle {
    font-size: 2.5em;
    text-transform: uppercase;
    font-weight: 100;
    padding: 1vh;
    text-align: center;
}

.title {
    font-size: 2em;
    text-transform: uppercase;
    font-weight: 100;
    padding: 1vh;
    text-align: center;
}

.subtitle {
    font-size: 1.5em;
    text-align: center;
    padding: 1vh;
}

.Photo {
    width: 15vw;
    border-radius: 10%;
    background: linear-gradient(114deg, var(--ColorNumberOne), var(--ColorNumber2), var(--ColorNumber3), var(--ColorNumber4));
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin: 5vh;
}

.Photo img {
    width: 95%;
    height: auto;
    border-radius: 10%;
}

.shadow {
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(200, 200, 200, 0.2);
}

.shadow2 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.radius {
    border-radius: 2vh;
}

#BaliseH1 {
    width: 92%;
    margin: 4%;
}

.row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    width: 92%;
    margin: 4%;
}

.column {
    flex: 40%;
    margin: 20px;
    display: grid;
    align-content: center;
    max-width: 80vw;
    justify-content: center;
    justify-items: center;
}

.column1 {
    flex: 40%;
    margin: 20px;
    display: grid;
    align-content: center;
    max-width: 80vw;
    justify-content: center;
    justify-items: center;
}

.column2 {
    flex: 30%;
    margin: 20px;
    display: grid;
    align-content: center;
    max-width: 80vw;
    justify-content: center;
    justify-items: center;
}

.Boutique {
    position: fixed;
    width: 20vw;
    height: 12vh;
    background-color: var(--ColorNumberOne);
    z-index: 1000;
    opacity: .7;
    margin-top: 75vh;
    border-radius: 50px;
    left: 75vw;
    display: flex;
    transition: 1s ease-in;
    justify-content: center;
}

.Boutique:hover {
    transition: 1s ease-out;
    opacity: .95;
}

.Boutique img {
    width: 15%;
}

.Boutique a {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--colorText);
}

.Depannage img {
    width: 30%;
    border-radius: 2vh;
}

.Boutique2 {
    position: relative;
    width: 25vw;
    height: 12vh;
    background-color: var(--ColorNumber2);
    z-index: 1000;
    opacity: .7;
    border-radius: 50px;
    display: flex;
    transition: 1s ease-in;
    justify-content: center;
}

.Boutique2 a {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--colorText);
}

#Decennale1 img {
    width: 50%;
    border-radius: 2vh;
}

/* contact */
input {
    width: 30vw;
    padding: 6px 10px;
    margin: 8px 0;
    box-sizing: border-box;
    margin-left: 0vw;
    background-color: transparent;
    color: white;
    border: solid white 1px;
}

input::placeholder {
    font-style: italic;
    color: white;
}

textarea {
    width: 30vw;
    padding: 6px 10px;
    margin: 8px 0;
    box-sizing: border-box;
    margin-left: 0vw;
    background-color: transparent;
    color: white;
    border: solid white 1px;
}

textarea::placeholder {
    font-style: italic;
    color: white;
}

.ButtonForm {
    background-color: transparent;
    border: 1px solid white;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50px;
    width: 30vw;
    margin-left: 0vw;
}

.ButtonForm:hover {
    background-color: grey;
}

/* contact */

#SectionArticle {
    min-width: 90vw;
    max-width: 90vw;
    margin-left: 5vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px;
    position: relative;
    border-radius: 3vh;
}

#SectionArticleText {
    display: grid;
    align-content: center;
    color: white;
    justify-items: center;
}

.rowPresentation {
    display: flex;
    flex-wrap: wrap;
    top: 15vh;
    width: 90vw;
    justify-content: center;
}

.columnPresentationA {
    flex: 60%;
    padding: 2vh;
    margin: 2vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    hyphens: auto;
    text-align: justify;
}

.columnPresentationA .title {
    font-size: 2em;
    text-align: center;
    color: white;
    margin: 2vh;
}

.columnPresentationA .text {
    text-align: justify;
    hyphens: auto;
    color: white;
    margin: 2vh;
}

.columnPresentationA ul {
    max-width: 30vw;
    margin: 2vh;
}

.columnPresentationA ul .title {
    font-size: 1.1em;
    text-align: center;
    color: white;
    margin: 2vh;
    font-weight: 700;
}

.columnPresentationB {
    flex: 25%;
    padding: 3vh;
    margin: 3vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: white;
    border-radius: 3vh;
    height: fit-content;
}

.underMenu {
    font-size: 2em;
    padding: 2vh;
}

.underMenu li {
    margin: 0 0 2vh 0;
}

.underMenu a {
    color: white;
    text-decoration: underline;
    margin: 0;
}

#footer {
    background: black;
    display: flex;
    justify-content: center;
    padding: 2vh;
    height: 10vh;
}

#footer p {
    font-size: 12px;
}

#footer a {
    color: blue;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Media Queries (PRIORITAIRE et SECONDAIRE fusionnés) */
/* ------------------------------------------------------------------ */

@media screen and (orientation: portrait) {
    header.hero {
        background: url('images/hero-taxiP.jpg') center/cover no-repeat;
    }

    /* Secondaire */
    :target {
        scroll-margin-top: 110px;
    }

    .Format60 {
        width: 80vw;
        margin: 3vh 10vw 3vh;
    }

    .Format60bis {
        width: 80vw;
        margin: 3vh 10vw 3vh;
        height: 60vh;
    }

    .Photo {
        width: 70vw;
        float: unset;
        margin: 4% 4% 4% 7%;
    }

    .supertitle {
        font-size: 2em;
    }

    .title {
        font-size: 1.5em;
    }

    .subtitle {
        font-size: 1.2em;
    }

    .Boutique {
        width: 70vw;
        height: 10vh;
        left: 15vw;
        margin-top: 80vh;
    }

    .Boutique img {
        width: 15%;
    }

    .Depannage img {
        width: 100%;
    }

    .Boutique2 {
        width: 70vw;
        height: 10vh;
        position: relative;
    }

    .Boutique2 img {
        width: 15%;
    }

    input {
        width: 80vw;
    }

    textarea {
        width: 80vw;
    }

    .ButtonForm {
        width: 50vw;
    }

    .columnPresentationA .title {
        font-size: 1.3em;
    }

    .columnPresentationA ul {
        max-width: 50vw;
        margin: 2vh;
        font-size: 1em;
    }

    .underMenu {
        font-size: 1.3em;
    }
}

@media (max-width:480px) {
    .logo-card img {
        height: 90px;
    }
}

@media (max-width:900px) {
    .features {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:640px) {
    .features {
        grid-template-columns: 1fr;
    }

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

@media (max-width:1024px) {
    .two-cols {
        grid-template-columns: 1fr;
    }

    .two-colsSPE {
        grid-template-columns: 1fr;
    }
}

@media (min-width:720px) {
    .service-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:1100px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:680px) {
    .cta {
        width: 100%;
        justify-content: center;
    }

    .callbar {
        display: block;
    }
}

@media screen and (orientation: landscape) and (max-width: 1024px) {
    .supertitle {
        font-size: 1.5em;
    }

    .title {
        font-size: 1.2em;
    }

    .subtitle {
        font-size: 1.1em;
    }
}