/* --------------------------------------------------------------------------
   SITE CORBIOLI — socle front (polices, tokens, header, footer, animations)
   Chargé par l'entrypoint `app` uniquement (assets/js/app/main.js).
   Les styles propres à une page vivent dans leur fichier dédié (ex. home.css).
-------------------------------------------------------------------------- */

@font-face {
    font-family: 'CatchyMager';
    src: url("../../fonts/CatchyMager-2i9wkhk.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CocoGothic';
    src: url("../../fonts/CocoGothic-Regular-AkHX8Yl.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Les chiffres et le @ de CocoGothic s'affichent mal : repli sur une police système
   (même contournement que la préprod). */
@font-face {
    font-family: 'CocoGothic';
    src: local('Arial'), local('Helvetica Neue');
    unicode-range: U+0030-0039, U+0040;
}

:root {
    /* Charte (extraite de la préprod, à affiner avec les fichiers de charte du client) */
    --cb-navy: #18315f;
    --cb-navy-dark: #10244a;
    --cb-blue: #234f9b;
    --cb-green: #009741;
    --cb-green-dark: #008300;
    --cb-ink: #212529;
    --cb-ink-soft: #444444;
    --cb-paper: #ffffff;
    --cb-mist: #f5f7fa;
    --cb-line: rgba(24, 49, 95, 0.12);

    --cb-font-title: 'CatchyMager', Georgia, 'Times New Roman', serif;
    --cb-font-body: 'CocoGothic', 'Helvetica Neue', Arial, sans-serif;

    --cb-header-h: 88px;
    --cb-header-h-scrolled: 68px;

    --cb-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cb-shadow-soft: 0 18px 40px -22px rgba(16, 36, 74, 0.45);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--cb-header-h);
}

body {
    font-family: var(--cb-font-body);
    color: var(--cb-ink);
    background: var(--cb-paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.title,
.heading {
    font-family: var(--cb-font-title);
    font-weight: 400;
    color: #111;
}

::selection {
    background: var(--cb-green);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--cb-blue);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   BOUTONS
-------------------------------------------------------------------------- */
.cb-btn {
    --cb-btn-bg: var(--cb-navy);
    --cb-btn-bg-hover: var(--cb-blue);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.75rem;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 2px;
    background: var(--cb-btn-bg);
    color: #fff;
    font-family: var(--cb-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
    transition: transform 0.5s var(--cb-ease), box-shadow 0.4s var(--cb-ease);
}

/* Balayage de couleur au survol */
.cb-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--cb-btn-bg-hover);
    transform: translateX(-101%);
    transition: transform 0.5s var(--cb-ease);
}

.cb-btn:hover,
.cb-btn:focus-visible {
    color: #fff;
    transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 3px), 0);
    box-shadow: var(--cb-shadow-soft);
}

.cb-btn:hover::before,
.cb-btn:focus-visible::before {
    transform: translateX(0);
}

.cb-btn .cb-btn-arrow {
    transition: transform 0.4s var(--cb-ease);
}

.cb-btn:hover .cb-btn-arrow {
    transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   HEADER
-------------------------------------------------------------------------- */
.cb-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    transition: box-shadow 0.4s var(--cb-ease);
}

.cb-header.is-scrolled {
    box-shadow: 0 10px 30px -18px rgba(16, 36, 74, 0.5);
}

.cb-navbar {
    min-height: var(--cb-header-h);
    padding-block: 0;
    transition: min-height 0.4s var(--cb-ease);
}

.cb-header.is-scrolled .cb-navbar {
    min-height: var(--cb-header-h-scrolled);
}

.cb-brand img {
    display: block;
    height: 64px;
    width: auto;
    transition: height 0.4s var(--cb-ease);
}

.cb-header.is-scrolled .cb-brand img {
    height: 48px;
}

.cb-nav-link {
    position: relative;
    padding: 0.5rem 0 !important;
    color: var(--cb-navy) !important;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Soulignement qui se dessine au survol / sur la page active */
.cb-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1rem;
    height: 2px;
    background: var(--cb-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--cb-ease);
}

.cb-nav-link:hover::after,
.cb-nav-link:focus-visible::after,
.cb-nav-link.active::after {
    transform: scaleX(1);
}

.cb-nav-client {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--cb-navy);
    border-radius: 2px;
    background: var(--cb-navy);
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.35s var(--cb-ease), border-color 0.35s var(--cb-ease), color 0.35s var(--cb-ease);
}

.cb-nav-client:hover,
.cb-nav-client:focus-visible {
    border-color: var(--cb-green);
    background: var(--cb-green);
    color: #fff;
}

.cb-toggler {
    border: 0;
    padding: 0.5rem;
    color: var(--cb-navy);
    font-size: 1.9rem;
    line-height: 1;
    background: none;
}

.cb-toggler:focus {
    box-shadow: none;
}

/* Sous-menus : déroulant au survol / focus sur ordinateur, au clic (chevron) sur mobile */
.cb-has-sub {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.cb-sub-toggle {
    margin-left: 0.3rem;
    padding: 0.25rem 0.35rem;
    border: 0;
    background: none;
    color: var(--cb-navy);
    font-size: 0.7rem;
    line-height: 1;
}

.cb-sub-toggle i {
    display: block;
    transition: transform 0.4s var(--cb-ease);
}

.cb-sub-toggle[aria-expanded='true'] i {
    transform: rotate(180deg);
}

.cb-submenu {
    min-width: 16rem;
    margin-top: 0;
    padding: 0.5rem 0;
    border: 0;
    border-top: 2px solid var(--cb-green);
    border-radius: 0;
    box-shadow: 0 24px 40px -22px rgba(16, 36, 74, 0.55);
}

.cb-submenu .dropdown-item {
    position: relative;
    padding: 0.7rem 1.5rem;
    color: var(--cb-navy);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 0.3s ease, padding-left 0.4s var(--cb-ease);
}

.cb-submenu .dropdown-item:hover,
.cb-submenu .dropdown-item:focus-visible,
.cb-submenu .dropdown-item.active {
    padding-left: 2rem;
    background: var(--cb-mist);
    color: var(--cb-navy);
}

.cb-submenu .dropdown-item.active::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 0.5rem;
    height: 2px;
    background: var(--cb-green);
}

@media (min-width: 1200px) {
    .cb-has-sub {
        flex-wrap: nowrap;
    }

    .cb-submenu {
        top: 100%;
        left: -1rem;
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        transition: opacity 0.35s ease, transform 0.45s var(--cb-ease), visibility 0s 0.35s;
    }

    .cb-has-sub:hover > .cb-submenu,
    .cb-has-sub:focus-within > .cb-submenu,
    .cb-submenu.show {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .cb-has-sub:hover > .cb-sub-toggle i {
        transform: rotate(180deg);
    }
}

@media (max-width: 1199.98px) {
    .cb-menu {
        padding: 1rem 0 1.5rem;
        border-top: 1px solid var(--cb-line);
    }

    .cb-menu .cb-nav-link {
        display: inline-block;
        padding: 0.7rem 0 !important;
        font-size: 1rem;
    }

    .cb-nav-client {
        margin-top: 0.75rem;
    }

    .cb-submenu {
        flex-basis: 100%;
        box-shadow: none;
        background: var(--cb-mist);
    }
}

/* --------------------------------------------------------------------------
   FOOTER
-------------------------------------------------------------------------- */
.cb-footer {
    margin-top: auto;
    background: var(--cb-green);
    color: #fff;
}

.cb-footer a {
    color: #fff;
    text-decoration: none;
}

.cb-footer-box {
    height: 100%;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: border-color 0.4s var(--cb-ease), background-color 0.4s var(--cb-ease);
}

.cb-footer-box:hover {
    border-color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.05);
}

.cb-footer-title {
    margin: 0 0 1.5rem;
    font-family: var(--cb-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}

.cb-footer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-footer-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 0.65rem;
    line-height: 1.5;
}

.cb-footer-list i {
    margin-top: 0.2rem;
    font-size: 1.05rem;
}

.cb-footer-list a {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size 0.4s var(--cb-ease);
}

.cb-footer-list a:hover {
    background-size: 100% 1px;
}

.cb-footer-hours {
    line-height: 1.7;
}

.cb-footer-hours span {
    display: block;
    font-size: 0.95rem;
    opacity: 0.92;
}

.cb-social {
    display: flex;
    gap: 0.75rem;
}

.cb-social a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    font-size: 1.1rem;
    transition: transform 0.4s var(--cb-ease), background-color 0.3s ease, color 0.3s ease;
}

.cb-social a:hover,
.cb-social a:focus-visible {
    background: #fff;
    color: var(--cb-green);
    transform: translateY(-4px);
}

.cb-footer-bottom {
    padding: 1.4rem 0;
    font-size: 0.9rem;
}

.cb-footer-bottom a {
    opacity: 0.9;
}

.cb-footer-bottom a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   MOTIF « BLOCS EMPILÉS » — décor de fond en semi-transparence
   Escalier de cubes isométriques en tons gris (assets/media/motif-blocks.svg), collé à l'angle
   d'un bloc (les cubes sont coupés par les bords droit et bas, sans espace), estompée vers l'intérieur par un masque dégradé (le masque est
   retourné avec le motif pour la variante gauche). À ajouter à une <section> : `cb-motif` (angle bas droit) ou
   `cb-motif cb-motif--left` (angle bas gauche). Opacité réglable : --motif-opacity.
-------------------------------------------------------------------------- */
.cb-motif {
    position: relative;
    overflow: clip; /* un bloc plus bas que le motif le rogne au lieu de déborder sur le bloc voisin */
    isolation: isolate; /* le motif (z-index -1) reste au-dessus du fond du bloc, sous son contenu */
}

.cb-motif::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: clamp(14rem, 33vw, 29rem);
    aspect-ratio: 375 / 381;
    background: url("../../media/motif-blocks-RoF9h6X.svg") no-repeat right bottom / 100% 100%;
    opacity: var(--motif-opacity, 0.35);
    /* Fondu vers l'intérieur : plein dans l'angle, de plus en plus transparent vers le centre du bloc */
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.82) 34%, rgba(0, 0, 0, 0.4) 63%, transparent 96%);
    mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.82) 34%, rgba(0, 0, 0, 0.4) 63%, transparent 96%);
    pointer-events: none;
}

.cb-motif--left::before {
    right: auto;
    left: 0;
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   ANIMATIONS — révélation au scroll (contrôleur Stimulus `reveal`)
   L'état masqué n'est appliqué que si le JS a armé l'élément : sans JS, tout
   reste visible.
-------------------------------------------------------------------------- */
[data-reveal].is-armed {
    opacity: 0;
    transition: opacity 1s var(--cb-ease), transform 1.1s var(--cb-ease), clip-path 1.2s var(--cb-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

/* `clip` (et non `hidden`) : empêche tout débordement horizontal sans créer de conteneur de défilement,
   donc les éléments `position: sticky` continuent de fonctionner. */
main {
    overflow-x: clip;
}

[data-reveal='up'].is-armed { transform: translate3d(0, 40px, 0); }
[data-reveal='left'].is-armed { transform: translate3d(-48px, 0, 0); }
[data-reveal='right'].is-armed { transform: translate3d(48px, 0, 0); }
[data-reveal='zoom'].is-armed { transform: scale(0.94); }
[data-reveal='curtain'].is-armed { clip-path: inset(0 0 100% 0); transform: none; }

@media (max-width: 767.98px) {
    [data-reveal='left'].is-armed { transform: translate3d(-24px, 0, 0); }
    [data-reveal='right'].is-armed { transform: translate3d(24px, 0, 0); }
}

[data-reveal].is-armed.is-visible {
    opacity: 1;
    transform: none;
    clip-path: none; /* ne pas rogner les pseudo-éléments qui débordent (cadre du portrait) */
}

[data-reveal='curtain'].is-armed.is-visible {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-reveal].is-armed {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }

    .cb-btn,
    .cb-btn::before,
    .cb-nav-link::after {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   SLIDER TÉMOIGNAGES — composant partagé (accueil + page avis clients)
-------------------------------------------------------------------------- */
.cb-quotes {
    position: relative;
    overflow: hidden;
}

.cb-quotes-glyph {
    position: absolute;
    top: clamp(1rem, 3vw, 3rem);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--cb-font-title);
    font-size: clamp(14rem, 30vw, 28rem);
    line-height: 0.8;
    color: var(--cb-mist);
    pointer-events: none;
    user-select: none;
}

.cb-quotes .container {
    position: relative;
}

.cb-quote {
    max-width: 52rem;
    margin: 0 auto clamp(3rem, 6vw, 4.5rem);
    text-align: center;
}

.cb-quote blockquote {
    margin: 0 0 1.75rem;
    color: var(--cb-navy);
    font-family: var(--cb-font-title);
    font-size: clamp(1.2rem, 2.2vw, 1.75rem);
    line-height: 1.55;
}

.cb-quote figcaption {
    color: var(--cb-green);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Mode 1-par-page : grille empilée, une seule slide visible */
.cb-quote-stage.is-enhanced {
    display: grid;
}

.cb-quote-stage.is-enhanced .cb-quote {
    grid-area: 1 / 1;
    margin-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.9s var(--cb-ease), visibility 0s 0.7s;
}

.cb-quote-stage.is-enhanced .cb-quote.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0.25s, 0.25s, 0s;
}

/* Mode 2-par-page (desktop ≥768px) : défilement horizontal */
.cb-quote-stage.is-enhanced.has-per-page-2 {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.7s var(--cb-ease);
}

.cb-quote-stage.is-enhanced.has-per-page-2 .cb-quote {
    flex: 0 0 50%;
    max-width: 50%;
    grid-area: unset;
    margin-bottom: 0;
    padding: 0 1.5rem;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
}

.cb-quote-stage.is-enhanced.has-per-page-2 .cb-quote blockquote {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.7;
}

.cb-quote-stage.is-enhanced.has-per-page-2 .cb-quote figcaption {
    font-size: 0.75rem;
}

@media (max-width: 767.98px) {
    .cb-quote-stage.is-enhanced.has-per-page-2 {
        display: grid;
        transform: none !important;
    }

    .cb-quote-stage.is-enhanced.has-per-page-2 .cb-quote {
        flex: none;
        max-width: none;
        padding: 0;
        grid-area: 1 / 1;
        opacity: 0;
        visibility: hidden;
        transform: translateY(28px);
        transition: opacity 0.7s ease, transform 0.9s var(--cb-ease), visibility 0s 0.7s;
    }

    .cb-quote-stage.is-enhanced.has-per-page-2 .cb-quote.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0.25s, 0.25s, 0s;
    }
}

.cb-quote-controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3rem;
}

.cb-quote-stage.is-enhanced ~ .cb-quote-controls {
    display: flex;
}

.cb-quote-arrow {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid var(--cb-navy);
    border-radius: 50%;
    background: transparent;
    color: var(--cb-navy);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--cb-ease);
}

.cb-quote-arrow:hover,
.cb-quote-arrow:focus-visible {
    background: var(--cb-navy);
    color: #fff;
    transform: scale(1.08);
}

.cb-quote-count {
    min-width: 11rem;
    text-align: center;
    color: var(--cb-navy);
    font-family: var(--cb-font-title);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.cb-quote-bar {
    display: block;
    height: 2px;
    margin-top: 0.7rem;
    background: var(--cb-line);
}

.cb-quote-bar > span {
    display: block;
    height: 100%;
    background: var(--cb-green);
    transform: scaleX(0);
    transform-origin: left;
}