/* ──────────────────────────────────────────────────────────────────────
   Overrides ciblés, HORS pipeline Tailwind compilé (main.css).
   main.css est un artefact minifié régénéré hors-repo : on ne l'édite
   jamais à la main. Ce fichier, chargé APRÈS main.css, porte les quelques
   règles custom qui ne peuvent pas passer par des utilities purgées.
   ────────────────────────────────────────────────────────────────────── */

/* Nav desktop (pill) : ne JAMAIS repasser à la ligne quand l'écran se
   resserre entre lg et le confort. Le texte d'un lien ne wrappe plus
   (white-space:nowrap) et, s'il manque vraiment de place, on tronque
   proprement en ellipsis plutôt que de casser la pill sur deux lignes. */
.emilie-nav {
    flex-wrap: nowrap;
    min-width: 0;
}
.emilie-nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

/* Mosaïque marques (home) : cellules en carte blanche (au lieu du gris plat)
   avec liseré fin et ombre portée douce. */
.brands-mosaic__cell {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 24px 24px -24px rgba(0, 0, 0, .1);
}

/* Vrais logos SVG au lieu des labels serif. object-fit:contain pour respecter
   les ratios très variés des logos ; on borne la taille pour garder de la
   marge dans la cellule 110×110. */
.brands-mosaic__cell img {
    width: auto;
    height: auto;
    max-width: 68%;
    max-height: 40%;
    object-fit: contain;
}

/* Garde-fou panier homogène : modale de choix affichée quand le client tente
   d'ajouter un article d'un type incompatible (occasion vs neuf) au panier.
   Construite dynamiquement en JS (public/assets/public/main.js), stylée ici. */
.emilie-cartguard {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.emilie-cartguard__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 28, 30, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: emilie-cartguard-fade .4s ease both;
}
.emilie-cartguard__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .35);
    animation: emilie-cartguard-in .5s cubic-bezier(.8, 0, 0, .8) both;
}
@keyframes emilie-cartguard-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes emilie-cartguard-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .emilie-cartguard__panel,
    .emilie-cartguard__backdrop { animation: none; }
}
.emilie-cartguard__title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    line-height: 1.15;
    color: var(--color-noir);
    margin-bottom: .6rem;
}
.emilie-cartguard__text {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--color-noir);
    margin-bottom: 1.4rem;
}
.emilie-cartguard__actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.emilie-cartguard__actions .btn-emilie,
.emilie-cartguard__actions .btn-emilie-phantom {
    width: 100%;
    justify-content: center;
    text-align: center;
    /* Autorise le retour à la ligne des libellés longs sur écran étroit
       (les boutons sont nowrap par défaut). */
    white-space: normal;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Titres "about" : couleur noire forcée. about-h3 = taille d'affichage
   (48px responsive / 72px desktop), interligne serré (1). Override du compilé. */
.about-h2,
.about-h3 {
    color: var(--color-noir);
}
.about-h3 {
    font-size: 48px;
    line-height: .9;
}
@media (min-width: 1024px) {
    .about-h3 { font-size: 64px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Duo d'images verticales (colonne "image à droite" des blocs intro :
   réparation, expertise, agréments). Deux portraits CÔTE À CÔTE, alignées
   en responsive ; en desktop, plus larges et la 2ᵉ décalée plus bas.
   ────────────────────────────────────────────────────────────────────── */
.emilie-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;                 /* responsive : gap réduit, colonnes alignées */
    width: 100%;
    max-width: 500px;          /* mobile : borné + centré */
    margin-inline: auto;
}
.emilie-duo__item {
    position: relative;
    aspect-ratio: 4 / 7;       /* portrait élancé */
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--color-cream);
}
.emilie-duo__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Badge logo (ex : WatchCertificate) incrusté sur la 1ʳᵉ image : fond blanc,
   padding, coins arrondis, décollé du bord. Responsive. */
.emilie-duo__badge {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    z-index: 2;
    width: 92px;
    background: #fff;
    border-radius: 14px;
    padding: .55rem .7rem;
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35);
}
.emilie-duo__badge img {
    display: block;
    width: 100%;
    height: auto;
}
@media (min-width: 1024px) {
    /* Desktop uniquement : pleine largeur de colonne (images plus larges,
       collées à chaque bord), gap 32px, et 2ᵉ colonne décalée plus bas.
       En responsive elles restent ALIGNÉES (pas de décalage). */
    .emilie-duo { max-width: none; margin: 0; gap: 2rem; }
    .emilie-duo__item:nth-child(2) { margin-top: 2.75rem; }
    .emilie-duo__badge { width: 124px; left: 1rem; bottom: 1rem; padding: .65rem .8rem; }
}

/* ──────────────────────────────────────────────────────────────────────
   Page "Nos agréments" — marques agréées par groupe (cards, inspiré de la
   page /marque/). Card cream + puces de marques. La 1ʳᵉ (Swatch, niveau
   3/3) est mise en avant : pleine largeur, fond noir.
   ────────────────────────────────────────────────────────────────────── */
.emilie-agrements {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .emilie-agrements { grid-template-columns: 1fr 1fr; }
}
.emilie-agrements__group {
    background: var(--color-cream);
    border-radius: 20px;
    padding: 1.75rem 2rem;
}
.emilie-agrements__group--featured {
    background: var(--color-noir);
}
@media (min-width: 768px) {
    .emilie-agrements__group--featured { grid-column: 1 / -1; }
}
.emilie-agrements__name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--color-noir);
    margin-bottom: 1rem;
}
.emilie-agrements__group--featured .emilie-agrements__name { color: #fff; }
.emilie-agrements__brands {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.emilie-agrements__brand {
    display: inline-flex;
    align-items: center;
    font-size: .85rem;
    line-height: 1;
    color: var(--color-noir);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    padding: .4rem .85rem;
}
.emilie-agrements__group--featured .emilie-agrements__brand {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
}

/* ──────────────────────────────────────────────────────────────────────
   Bloc "Certifiez votre montre" (partenaire agréé WatchCertificate) — page
   expertise. Bandeau 2 colonnes : contenu sombre (texte blanc) + photo.
   ────────────────────────────────────────────────────────────────────── */
.emilie-certify {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 32px;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(0, 0, 0, .1);
}
@media (min-width: 1024px) {
    /* Image à gauche, contenu à droite (colonnes inversées). */
    .emilie-certify { grid-template-columns: 1fr 1.05fr; }
}
.emilie-certify__content {
    padding: 2.5rem 1.75rem;
    color: var(--color-noir);
    order: 2;
}
@media (min-width: 1024px) {
    .emilie-certify__content { padding: 3.5rem; }
}
.emilie-certify__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .68rem;
    font-weight: 600;
    color: var(--color-bronze);
    margin-bottom: 1.25rem;
}
.emilie-certify__title {
    font-family: var(--font-serif);
    font-size: 40px;
    line-height: 1;
    color: var(--color-noir);
    margin-bottom: .75rem;
}
@media (min-width: 1024px) {
    .emilie-certify__title { font-size: 56px; }
}
.emilie-certify__subtitle {
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(28, 28, 30, .72);
    max-width: 42ch;
    margin-bottom: 2rem;
}
.emilie-certify__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.25rem;
}
.emilie-certify__item {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.emilie-certify__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--color-cream);
    border: 1px solid rgba(0, 0, 0, .08);
    color: var(--color-bronze);
}
.emilie-certify__text {
    font-size: .95rem;
    line-height: 1.35;
    color: var(--color-noir);
}
.emilie-certify__media {
    position: relative;
    min-height: 280px;
    order: 1;
    background: var(--color-cream);
}
@media (min-width: 1024px) {
    .emilie-certify__media { min-height: 100%; }
}
.emilie-certify__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Chevauchement volontaire du bloc certif sur la section "Comment ça se passe"
   (desktop) : le bloc déborde d'environ 25% de sa hauteur. Sur mobile : pas de
   débordement, paddings harmonisés pour que le bloc ne soit pas trop collé. */
.emilie-certify-section {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}
@media (min-width: 1024px) {
    .emilie-certify-section { padding-top: 0; padding-bottom: 0; }
    .emilie-certify {
        position: relative;
        z-index: 1;
        margin-bottom: -7rem;   /* ≈ 25% de la hauteur du bloc */
    }
    .emilie-certify-overlap { padding-top: 13rem; }
}