/*!
 * Deladev — feuille de style du thème.
 * FICHIER GÉNÉRÉ : ne pas modifier à la main.
 * Modifier les sources dans assets/css/src/ puis relancer ./build-css.sh
 */

/* ==================== 00-fonts.css ==================== */
/* Polices locales. Chemins relatifs à assets/css/theme.css. */

@font-face {
    font-family: "poppins";
    src: url("../fonts/Poppins-Regular.woff") format("woff"),
        url("../fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "poppinsBold";
    src: url("../fonts/Poppins-Bold.woff") format("woff"),
        url("../fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "disolve";
    src: url("../fonts/Disolve_regular.woff") format("woff"),
        url("../fonts/Disolve_regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "disolveLight";
    src: url("../fonts/Disolve_light.woff") format("woff"),
        url("../fonts/Disolve_light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "roboto";
    src: url("../fonts/Roboto-Regular.woff") format("woff"),
        url("../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "robotoBold";
    src: url("../fonts/Roboto-Bold.woff") format("woff"),
        url("../fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "robotoLight";
    src: url("../fonts/Roboto-Light.woff") format("woff"),
        url("../fonts/Roboto-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* ==================== 01-tokens.css ==================== */
/* Jetons de design. Repris de resources/css/app.css du site Laravel.
   Les mêmes valeurs sont déclarées dans theme.json pour que l'éditeur
   WordPress et, plus tard, WooCommerce héritent de la palette. */

:root {
    --beige: #ebecd4;
    --black: #000;
    --blue: #083d77;
    --gray: #d3d3d3;
    --light-gray: #f5f5f5;
    --white: #fff;
    --transparent: rgba(0, 0, 0, 0);
    --orange: #ee964b;
    --yellow: #f4de8d;

    --max-width: 1440px;
}

/* ==================== 02-base.css ==================== */
/* Base globale. Le site Laravel imbriquait ces règles dans `:root` pour
   gagner en spécificité face aux utilitaires Tailwind ; sans Tailwind ici,
   on les écrit à plat — les classes l'emportent naturellement sur les
   sélecteurs de type. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-synthesis: none;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    background-color: var(--beige);
    color: var(--blue);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

img {
    max-width: 100%;
}

/* Familles de polices */
.disolve {
    font-family: disolve, sans-serif;
}
.disolveLight {
    font-family: disolveLight, sans-serif;
}
.poppins {
    font-family: poppins, sans-serif;
}
.poppinsBold {
    font-family: poppinsBold, sans-serif;
}
.roboto {
    font-family: roboto, sans-serif;
}
.robotoBold {
    font-family: robotoBold, sans-serif;
}
.robotoLight {
    font-family: robotoLight, sans-serif;
}

a,
button {
    transition: all 0.2s ease-in-out;
}

a:hover {
    text-decoration: underline;
    color: var(--blue);
}

/* Contour au clavier uniquement, pas au clic souris. */
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

h1 {
    font-size: clamp(1.875rem, 5vw, 2.25rem);
    font-weight: bold;
    margin-bottom: 1rem;
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.875rem, 4vw, 2rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 3rem;
    position: relative;
}

h2::after {
    content: "";
    background-color: var(--orange);
    width: 7rem;
    height: 10px;
    position: absolute;
    top: 100%;
    left: 50%;
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: bold;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: bold;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

h5 {
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: bold;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

h6 {
    font-size: clamp(0.875rem, 1.8vw, 1rem);
    font-weight: bold;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.text-responsive {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.6;
}

/* Le H1 de l'accueil reprend l'allure d'un H2 : c'est le rendu d'origine,
   conservé après sa promotion en H1 pour le référencement. */
.home-h1 {
    font-size: clamp(1.875rem, 4vw, 2rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 3rem;
    position: relative;
}

.home-h1::after {
    content: "";
    background-color: var(--orange);
    width: 7rem;
    height: 10px;
    position: absolute;
    top: 100%;
    left: 50%;
}

/* Masqué visuellement mais lu par les lecteurs d'écran. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    nav,
    button,
    label,
    .disolve {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
}

/* ==================== 03-utilities.css ==================== */
/* Utilitaires repris de Tailwind.
   Le site Laravel compilait Tailwind via Vite ; le thème est livré avec un
   CSS déjà prêt, sans build Node. On réécrit donc à la main les seuls
   utilitaires que la page d'accueil emploie, en conservant les noms de
   classes d'origine (échappés comme Tailwind le fait) pour que le balisage
   reste identique à celui du .fr.
   Points de rupture Tailwind : md = 768px, lg = 1024px. */

.flex {
    display: flex;
}
.inline-block {
    display: inline-block;
}
.grid {
    display: grid;
}
.flex-col {
    flex-direction: column;
}
.items-start {
    align-items: flex-start;
}
.justify-center {
    justify-content: center;
}

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

.gap-4 {
    gap: 1rem;
}
.gap-6 {
    gap: 1.5rem;
}
.gap-16 {
    gap: 4rem;
}

.w-full {
    width: 100%;
}
.h-full {
    height: 100%;
}
.h-\[450px\] {
    height: 450px;
}
.max-w-md {
    max-width: 28rem;
}
.max-w-7xl {
    max-width: 80rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.ml-10 {
    margin-left: 2.5rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.p-4 {
    padding: 1rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-center {
    text-align: center;
}
.text-justify {
    text-align: justify;
}
.leading-relaxed {
    line-height: 1.625;
}
.font-semibold {
    font-weight: 600;
}
.font-bold {
    font-weight: 700;
}
.font-black {
    font-weight: 900;
}

.text-white {
    color: var(--white);
}
.text-blue {
    color: var(--blue);
}
.bg-white {
    background-color: var(--white);
}
.bg-amber-400 {
    background-color: #fbbf24;
}

.rounded {
    border-radius: 0.25rem;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.border {
    border-width: 1px;
    border-style: solid;
}
.border-gray\/10 {
    border-color: rgba(211, 211, 211, 0.1);
}
.overflow-hidden {
    overflow: hidden;
}
.object-cover {
    object-fit: cover;
}
.inset-0 {
    inset: 0;
}
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.transition {
    transition-property: color, background-color, border-color, fill, stroke,
        opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.duration-500 {
    transition-duration: 500ms;
}

.hover\:bg-amber-100:hover {
    background-color: #fef3c7;
}
.hover\:text-black:hover {
    color: var(--black);
}
.hover\:shadow-md:hover {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==================== 04-nav.css ==================== */
/* Menu « liquid glass » et burger, repris de Components/NavUser.vue.
   Le composant Vue s'appuyait sur l'imbrication CSS native ; ici tout est
   écrit à plat, puisque le thème livre une feuille déjà prête.
   Effet de verre initialement publié par lucasromerodb. */

.liquidGlass-wrapper {
    position: relative;
    display: flex;
    font-weight: 400;
    overflow: hidden;
    border-radius: 1.5rem;
    justify-content: center;
    align-items: center;
    box-shadow:
        0 6px 6px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquidGlass-wrapper:hover {
    transform: scale(102%);
}

.liquidGlass-effect {
    position: absolute;
    z-index: 0;
    inset: 0;
    backdrop-filter: blur(3px);
    filter: url(#glass-distortion);
    overflow: hidden;
    isolation: isolate;
}

.liquidGlass-tint {
    z-index: 1;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
}

.liquidGlass-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    box-shadow:
        inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
        inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
}

.liquidGlass-text {
    width: 100%;
    z-index: 3;
    font-size: 1.6rem;
}

/* Ces deux règles d'état doivent battre le bloc mobile plus bas, d'où le
   sélecteur composé et non la classe seule. */
.site-nav ul.show-menu {
    display: flex !important;
}

.site-nav nav.active_nav {
    height: 80vh;
}

.site-nav {
    z-index: 10000;
    position: sticky;
    top: 60px;
    width: 90%;
    margin: 2rem auto;
    max-width: var(--max-width);
}

.site-nav nav {
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.site-nav nav ul {
    position: relative;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.site-nav nav ul a {
    font-size: 1.2rem;
    color: var(--blue);
    text-decoration: none !important;
}

.site-nav nav li::before {
    content: "";
    position: absolute;
    transform: translate(50%, 0%);
    z-index: -1;
    display: block;
}

.site-nav nav li:hover {
    position: relative;
}

.site-nav nav ul li a:hover {
    cursor: pointer;
    animation: impulseColor 0.5s ease-in-out;
}

.site-nav nav li:hover::before {
    transition: 0.4s ease-in-out;
    content: "";
    position: absolute;
    z-index: -1;
    display: block;
    width: 100%;
    right: 50%;
    transform: translate(50%, 300%);
    height: 2px;
    background-color: var(--blue);
    border-radius: 0.8rem;
    margin: 1.5rem auto;
}

@keyframes impulseColor {
    0% {
        color: var(--blue);
    }
    50% {
        color: var(--beige);
    }
    100% {
        color: var(--blue);
    }
}

/* Burger */

.visuallyHidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.hamburger {
    margin: 0 auto;
    width: 30px;
    height: 30px;
    position: relative;
}

.hamburger .bar {
    padding: 0;
    width: 30px;
    height: 4px;
    background-color: var(--blue);
    display: block;
    border-radius: 4px;
    transition: all 0.4s ease-in-out;
    position: absolute;
}

.bar1 {
    top: 0;
}

.bar2,
.bar3 {
    top: 13.5px;
}

.bar3 {
    right: 0;
}

.bar4 {
    bottom: 0;
}

.checkbox1:checked + label > .hamburger1 > .bar1 {
    transform: rotate(45deg);
    transform-origin: 5%;
    width: 41px;
}

.checkbox1:checked + label > .hamburger1 > .bar2 {
    transform: translateX(-40px);
    background-color: transparent;
}

.checkbox1:checked + label > .hamburger1 > .bar3 {
    transform: translateX(40px);
    background-color: transparent;
}

.checkbox1:checked + label > .hamburger1 > .bar4 {
    transform-origin: 5%;
    transform: rotate(-45deg);
    width: 41px;
}

.site-nav nav > div > div {
    display: none;
}

@media (max-width: 1024px) {
    .site-nav {
        top: 20px;
        max-width: 100%;
        height: 80px;
        transition: all 0.2s ease-in-out;
    }

    /* `height: auto` : les 60px du desktop rognaient la ligne logo + burger,
       qui en fait 70. `flex-start` la maintient en haut quand le menu s'ouvre,
       au lieu de la laisser remonter hors du panneau. */
    .site-nav nav {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: auto;
    }

    .site-nav nav > div {
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 1rem;
        justify-content: space-between;
        flex-shrink: 0;
    }

    .site-nav nav > div > div {
        display: flex;
    }

    /* `flex: 1` au lieu d'une hauteur fixe : la liste occupe exactement la
       place restante et ne pousse plus rien dehors. */
    .site-nav ul {
        display: none !important;
        margin-top: 0;
        margin-bottom: 0;
        width: 100%;
        height: auto;
        flex: 1;
        min-height: 0;
        flex-direction: column !important;
        gap: 3rem !important;
        justify-content: center;
        align-items: center;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .site-nav ul li a {
        font-size: 2rem;
        background-color: #ffffffce;
        padding: 1rem 3rem;
        border-radius: 1rem;
    }

    .label1 {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    /* Ouverture du menu sans JavaScript. La case à cocher est trop
       profondément imbriquée pour qu'un sélecteur de voisinage atteigne la
       liste, d'où `:has()` porté par le <nav>. Le script du thème pose en
       plus les classes `active_nav` et `show-menu`, par sécurité. */
    .site-nav nav:has(.checkbox1:checked) {
        height: 80vh;
    }

    .site-nav nav:has(.checkbox1:checked) ul {
        display: flex !important;
    }
}

/* La marque « DELADEV » du menu, cliquable vers l'accueil. */
.site-brand,
.site-brand:hover {
    color: var(--blue);
    text-decoration: none;
}

.site-brand img {
    height: 40px;
    width: auto;
}

/* ==================== 05-hero.css ==================== */
/* Hero. Repris de resources/css/Components/hero.css.
   Le tracé du SVG et le brouillage du texte étaient produits par GSAP ;
   le thème s'en passe, le SVG est servi statiquement et les quatre mots
   sont écrits directement dans le balisage. */

.container_animation_deladev .wrapper_screen {
    top: -30px;
    position: absolute;
    left: 0;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container_animation_deladev p {
    font-weight: 500;
    z-index: -1;
    width: 115vw;
    color: #083e7725;
    text-align: center;
    text-transform: uppercase;
    font-size: 320px;
    letter-spacing: 25.6px;
    animation: horizontalScrollHero 10s linear infinite;
    opacity: 0.5;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

#hero {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

@keyframes horizontalScrollHero {
    0% {
        opacity: 1;
        transform: translateX(100%);
    }
    100% {
        opacity: 0.5;
        transform: translateX(-100%);
    }
}

#scramble-text-original {
    --font-size-heroAnimation: 5rem;
    font-size: var(--font-size-heroAnimation);
    color: var(--blue);
    text-align: start;
    line-height: 6rem;
}

#scramble-text-1 {
    text-shadow: 2px 2px 2px var(--white);
    font-size: var(--font-size-heroAnimation);
    font-weight: 600;
    color: var(--orange);
}

#scramble-text-2 {
    font-size: var(--font-size-heroAnimation);
    font-weight: 400;
    color: var(--blue);
    padding: 5px;
}

#scramble-text-3 {
    font-size: var(--font-size-heroAnimation);
    text-shadow: 3px 4px 2px var(--white);
    color: var(--black);
}

#scramble-text-4 {
    font-size: var(--font-size-heroAnimation);
    color: var(--blue);
}

.svgHero img {
    width: 500px;
    height: 500px;
    max-width: 100%;
}

@media screen and (max-width: 1024px) {
    #scramble-text-original {
        --font-size-heroAnimation: 4rem;
        font-size: var(--font-size-heroAnimation);
        color: var(--blue);
        text-align: start;
        padding: 0 2rem;
        line-height: 4rem;
    }

    .svgHero img {
        width: 350px;
        height: 350px;
        margin-bottom: 2rem;
    }
}

/* Le rideau « DELADEV » est purement décoratif : on le coupe pour qui a
   demandé moins d'animations. */
@media (prefers-reduced-motion: reduce) {
    .container_animation_deladev p {
        animation: none;
    }
}

/* ==================== 06-sections.css ==================== */
/* Sections de la page d'accueil : orbites, articles, bloc jaune, cartes.
   Sources : resources/css/Components/image-animate.css, le <style> de
   Pages/Welcome.vue et les styles scoped de Card.vue. */

.imageAnimateContainer {
    --orbitalSizeOne: 240px;
    --orbitalSizeTwo: 220px;
    --colorOrbit: var(--orange);
    --colorLineOrbit: #083d77;
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0 3rem;
}

.ArticlesSection {
    background-color: var(--yellow);
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.ArticlesSectionReverse {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.ArticlesSectionReverse .containerArticles {
    flex-direction: row-reverse !important;
    height: auto;
}

.containerArticles {
    height: auto;
    max-width: 1180px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column;
}

.containerArticles div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.containerArticles img {
    max-width: 400px;
    min-width: 100px;
    width: auto;
    z-index: 3000;
}

.containerArticles p {
    color: var(--blue);
    padding: 0 2rem;
    max-width: 500px;
    min-width: 30vw;
    font-size: 1.5rem;
    line-height: 1.6;
}

/* Liens dans les textes de l'accueil */
.container_homeText p a,
.containerArticles p a {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-underline-offset: 3px;
}

/* Orbites */

.parallax-image {
    position: absolute;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Remplace la rotation que GSAP ScrollTrigger appliquait à l'arrière-plan
   étoilé : une rotation CSS lente, sans JavaScript. */
.imageParallax {
    animation: rotateOrbit 120s linear infinite;
}

.boxOrbital {
    height: var(--orbitalSizeOne);
    width: var(--orbitalSizeOne);
    border: 1px solid var(--colorLineOrbit);
    border-radius: 50%;
    position: relative;
    bottom: 10px;
    left: 0;
    z-index: 3000;
}

.orbitOne {
    height: var(--orbitalSizeOne);
    width: var(--orbitalSizeOne);
    position: absolute;
    top: 0;
    left: 0;
    animation: rotateOrbit 5s linear infinite;
    z-index: 3000;
}

.boxOrbitalTwo {
    position: absolute;
    height: var(--orbitalSizeTwo);
    width: var(--orbitalSizeTwo);
    border: 1px solid var(--colorLineOrbit);
    border-radius: 50%;
    left: -20px;
}

.orbitTwo {
    height: var(--orbitalSizeTwo);
    width: var(--orbitalSizeTwo);
    position: absolute;
    top: 0;
    left: 0;
    animation: rotateOrbitReverse 7s linear infinite;
}

.orbit {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: var(--colorOrbit);
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--beige);
}

.imageOrbitAnimate {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    transform: translate(-50%, -50%);
}

@keyframes rotateOrbit {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 360deg;
    }
}

@keyframes rotateOrbitReverse {
    0% {
        rotate: 360deg;
    }
    100% {
        rotate: 0deg;
    }
}

/* Bloc « Un accompagnement de A à Z » */

.backgroundContainerCommercial {
    background-color: var(--yellow);
    display: flex;
    padding: 4rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Cartes */

.card-container {
    transition: transform 0.3s ease;
}

.card {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
    will-change: transform;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Le survol était joué par GSAP (y, rotation, scale) ; rendu ici en CSS. */
.card:hover {
    transform: translateY(-8px) rotate(0.5deg) scale(1.02);
    box-shadow: 0 12px 30px rgba(8, 61, 119, 0.15);
    border-color: var(--blue);
}

.card-image-container {
    overflow: hidden;
    position: relative;
    max-height: 40%;
    min-height: 40%;
}

.card-image-container img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card:hover .card-image-container img {
    transform: scale(1.05);
}

.card-image-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
}

.card-content {
    color: var(--black);
}

.card-content p,
.card-content h3 {
    color: var(--blue);
}

@media (prefers-reduced-motion: reduce) {
    .card:hover {
        transform: none;
    }
}

@media (max-width: 1024px) {
    .imageParallaxRelatif img {
        height: 300px;
        width: auto;
    }

    .ArticlesSection p,
    .ArticlesSectionReverse p,
    .container_homeText p,
    .containerArticles p,
    .backgroundContainerCommercial p {
        text-align: justify;
    }

    .ArticlesSectionReverse .containerArticles {
        flex-direction: column !important;
    }

    .ArticlesSectionReverse {
        padding-bottom: 0 !important;
    }

    .imageAnimateContainer {
        margin-bottom: 3rem;
    }

    .backgroundContainerCommercial {
        padding: 5rem;
    }

    .container_homeText {
        padding: 3rem;
    }
}

@media screen and (max-width: 768px) {
    .imageAnimateContainer {
        --orbitalSizeOne: 130px;
        --orbitalSizeTwo: 120px;
    }

    .orbit {
        height: 10px;
        width: 10px;
    }

    .boxOrbital {
        bottom: 10px;
    }

    .boxOrbitalTwo {
        left: -10px;
    }
}

@media screen and (max-width: 767px) {
    .backgroundContainerCommercial {
        padding: 0rem;
    }
}

/* ==================== 07-footer.css ==================== */
/* Pied de page. Repris des styles de Components/Footer.vue.
   `width: 100vw` d'origine remplacé par `100%` : 100vw inclut la largeur de
   la barre de défilement et provoquait un débordement horizontal. */

.footer {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    margin-top: 170px;
    transition: all 0.5s ease-in-out;
    background-color: var(--yellow);
}

.containerFooter {
    position: relative;
    width: 100%;
    max-width: 1180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.containerFooter > p {
    transition: all 0.5s ease-in-out;
    font-size: 322px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #083e7725;
    z-index: -1;
}

.footerContent {
    width: 100%;
    margin-top: 6rem;
    display: flex;
    justify-content: space-evenly;
    padding: 0 1rem;
    color: var(--blue);
}

.footerContent h3 {
    font-size: 1.5rem;
    text-transform: uppercase;
}

.contentImage {
    height: 160px;
    width: auto;
}

.contentContact {
    text-align: start;
}

.contentSitePlan ul {
    list-style: none;
    text-align: start;
}

.contentSitePlan ul li {
    padding: 3px 0;
}

.contentSitePlan ul li:hover {
    cursor: pointer;
    text-decoration: underline;
}

.legalContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: var(--blue);
}

.legalContainer p {
    text-align: center;
    padding: 0.5rem 1rem;
}

.legalContainer ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

.legalContainer a {
    color: var(--blue);
    text-decoration: none;
    margin: 0 1rem;
}

.astroDraw {
    font-size: 10px;
}

@media screen and (max-width: 768px) {
    .legalContainer ul {
        flex-direction: column;
        align-items: center;
    }

    .containerFooter > p {
        left: 50%;
        margin: 0 !important;
        text-align: center;
    }

    .footerContent {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    .footerContent div {
        margin: 1rem 0;
    }

    .contentImage {
        margin-top: 1rem;
        height: 120px;
    }

    .contentContact {
        text-align: center;
    }

    .contentContact p {
        margin: 0 !important;
    }

    .contentSitePlan {
        text-align: center;
    }
}

/* Le mot « DELADEV » en filigrane suit la largeur de la fenêtre. */
@media screen and (max-width: 1475px) {
    .containerFooter > p {
        font-size: 300px;
    }
}
@media screen and (max-width: 1371px) {
    .containerFooter > p {
        font-size: 280px;
    }
}
@media screen and (max-width: 1273px) {
    .containerFooter > p {
        font-size: 250px;
    }
}
@media screen and (max-width: 1177px) {
    .containerFooter > p {
        font-size: 200px;
    }
}
@media screen and (max-width: 915px) {
    .containerFooter > p {
        font-size: 110px;
    }
}
@media screen and (max-width: 767px) {
    .footerContent p,
    .footerContent a {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .containerFooter > p {
        font-size: 90px;
    }
}
@media screen and (max-width: 450px) {
    .containerFooter > p {
        font-size: 76px;
    }
}

/* ==================== 08-animations.css ==================== */
/* Briques d'animation du design system, reprises de
   resources/css/animations.css. Conservées pour les pages à venir. */

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.button-hover {
    transition: all 0.3s ease-in-out;
}

.button-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.link-hover {
    transition: color 0.2s ease-in-out;
}

.link-hover:hover {
    color: var(--orange);
}

.image-fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

.card-hover {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Aucune animation décorative pour qui en a demandé moins. */
@media (prefers-reduced-motion: reduce) {
    .orbitOne,
    .orbitTwo,
    .imageParallax {
        animation: none !important;
    }
}

/* ==================== 09-content.css ==================== */
/* Pages, articles, archives, résultats de recherche, 404.
   L'accueil a son propre gabarit et n'utilise rien d'ici ; ces règles
   servent aux contenus rédigés dans l'administration, et fourniront la base
   des pages de boutique si WooCommerce est installé. */

.site-main {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.page-header {
    margin-bottom: 3rem;
}

.page-title,
.entry-title {
    color: var(--blue);
}

.entry-title a {
    color: inherit;
    text-decoration: none;
}

.entry {
    margin-bottom: 4rem;
}

.entry-meta {
    color: #475569;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.entry-thumbnail {
    margin-bottom: 1.5rem;
}

.entry-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

.entry-content > * + * {
    margin-top: 1.25rem;
}

.entry-content {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.7;
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.5rem;
}

.entry-content li + li {
    margin-top: 0.5rem;
}

.entry-content blockquote {
    border-left: 4px solid var(--orange);
    padding-left: 1.25rem;
    font-style: italic;
}

.entry-content img {
    height: auto;
    border-radius: 0.5rem;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
}

.entry-content th,
.entry-content td {
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    text-align: left;
}

/* Un tableau large défile dans son cadre plutôt que d'élargir la page. */
.entry-content .wp-block-table {
    overflow-x: auto;
}

.entry-content pre {
    overflow-x: auto;
    background-color: var(--light-gray);
    padding: 1rem;
    border-radius: 0.5rem;
}

/* Pagination et navigation entre contenus */

.pagination,
.post-navigation,
.comments-navigation {
    margin-top: 3rem;
}

.pagination .nav-links,
.post-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.pagination .page-numbers {
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    text-decoration: none;
    color: var(--blue);
}

.pagination .page-numbers.current {
    background-color: var(--orange);
    color: var(--white);
}

/* Commentaires */

.comments-area {
    margin-top: 4rem;
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment-list li {
    margin-bottom: 2rem;
}

/* Page introuvable */

.error-404 {
    text-align: center;
}

.error-404 img {
    max-width: 320px;
    height: auto;
    margin: 0 auto 2rem;
}

/* Coordonnée reconstituée par le script : elle doit ressembler à un lien. */
.contact-link {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-underline-offset: 3px;
}