@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/helvetica-neue-bold.woff2') format('woff2'),
         url('../fonts/helvetica-neue-bold.woff') format('woff'),
         url('../fonts/helvetica-neue-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

red {
    color: #b20933;
}

#header {
    color: #424242;
}
    #header a.logo {
        font-family: 'Helvetica', sans-serif;
        letter-spacing: 0.07em;
        font-size: 1em;
        font-style: normal;
        text-transform: none;
        font-weight: normal;
        line-height: 1em;
        height: unset;
    }
        #header a.logo .pdata {
            background-color: #b20933;
            /* opacity: 0.7; */
            height: 1em;
            padding: 0.1em 3em 0em 0em;
            margin: 0;
            display: inline-block;
            color: #c3c3c3;
        }

#banner {
    background-image: none;
    overflow: hidden;
}
    #banner::after {
        opacity: 0.65;
    }
        #banner video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        #banner .inner h1 {
            font-family: 'Helvetica', sans-serif;
            letter-spacing: 0.05em;
            font-style: normal;
            line-height: 1em;
            text-transform: none;
        }
        #banner .inner h1 .pdata {
            background-color: #b20933;
            opacity: 0.7;
            height: 1em;
            padding: 0.1em 3em 0em 0em;
            margin: 0;
            display: inline-block;
        }

#about-us {
    padding: 5rem 0 5rem 0;
}

/* Largeur max du contenu : plein cadre jusqu'à ~1600px, puis centré
   (sinon l'image et les lignes de texte s'étirent trop sur grands écrans) */
.spotlight .inner {
    max-width: var(--spotlight-max-width);
}

/* ==========================================================================
   Spotlights — titre en haut, tags, carte blanche chevauchant l'image
   Mise en page en alternance :
     .odd  → image à droite, colonne calée à gauche, carte débordant à droite
     .even → image à gauche, colonne calée à droite, carte débordant à gauche
   ========================================================================== */

/* Réglages : ratio d'image fixe + part de largeur occupée par l'image,
   et les deux teintes du logo pour l'alternance des couleurs.
   Modifiez ces variables pour ajuster tous les segments d'un coup. */
.spotlight {
    --spotlight-image-ratio: 16 / 9;   /* format allongé (paysage) */
    --spotlight-image-width: 55%;
    --spotlight-max-width: 100rem;      /* largeur max du contenu : évite l'étirement sur grands écrans */
    --spotlight-gray: #424242;   /* gris du logo (Publi…Ta) */
    --spotlight-red:  #7e2327;   /* rouge du logo (…daTa…)  */
}

/* Aligne la colonne de texte en haut de la zone de couleur (au lieu de centrée) */
.spotlight > .inner {
    -moz-align-items: flex-start;
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
}

/* Image à ratio fixe, ~55 % de la largeur, toujours responsive.
   L'image entre dans le flux (au lieu d'être en position absolue) : une
   seule image par segment suffit, quel que soit son format d'origine. */
.spotlight .image {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    -moz-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    -moz-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;   /* centre l'image face à la colonne de texte (le titre reste en haut) */
    width: var(--spotlight-image-width);
    height: auto;
}
    .spotlight .image img {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: var(--spotlight-image-ratio);
        -moz-object-fit: cover;
        -webkit-object-fit: cover;
        -ms-object-fit: cover;
        object-fit: cover;
    }

/* Alternance (image dans le flux) : image à droite pour .odd, à gauche pour .even */
.spotlight.odd > .inner {
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.spotlight.even > .inner {
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

/* Colonne de texte : le reste de la largeur (titre, puis tags, puis carte blanche) */
.spotlight .text {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: calc(100% - var(--spotlight-image-width));
}

/* Titre en haut */
.spotlight .text h2 {
    width: 100%;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

/* Tags entre le titre et la carte blanche */
.spotlight .tags {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.6rem;
    -moz-transition: opacity 0.5s ease-out, -moz-transform 0.5s ease-out;
    -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out, -ms-transform 0.5s ease-out;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
    .spotlight .tags li {
        display: inline-block;
        margin: 0;
        padding: 0.4em 1.1em;
        border-radius: 2em;
        background-color: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.6);
        color: #ffffff;
        font-size: 0.8rem;
        line-height: 1.6;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

/* Carte blanche : déborde légèrement par-dessus l'image */
.spotlight .text .content {
    width: calc(100% + 6rem);
    -moz-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
}

/* --- .odd : image à droite → colonne à gauche, carte débordant vers la droite --- */
.spotlight.odd .text {
    -moz-align-items: flex-start;
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
}
    .spotlight.odd .text h2 {
        text-align: left;
    }

/* --- .even : image à gauche → colonne à droite, carte débordant vers la gauche --- */
.spotlight.even .text {
    -moz-align-items: flex-end;
    -webkit-align-items: flex-end;
    -ms-align-items: flex-end;
    align-items: flex-end;
}
    .spotlight.even .text h2 {
        text-align: right;
    }
    .spotlight.even .tags {
        -moz-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        -ms-justify-content: flex-end;
        justify-content: flex-end;
    }

/* Anime les tags avec le reste de la colonne au scroll */
.spotlight.is-inactive .tags {
    -moz-transform: translateY(2rem);
    -webkit-transform: translateY(2rem);
    -ms-transform: translateY(2rem);
    transform: translateY(2rem);
    opacity: 0;
}

/* ==========================================================================
   Couleurs des segments — alternance Gris / Rouge (teintes du logo)
     .odd  → gris   |   .even → rouge
   (remplace les fonds accent1/2/3 du gabarit ; le titre reste blanc)
   ========================================================================== */
.spotlight.odd {
    background-color: var(--spotlight-gray);
}
.spotlight.even {
    background-color: var(--spotlight-red);
}
    .spotlight.odd .text h2,
    .spotlight.even .text h2 {
        color: #ffffff;
    }

/* Boutons de la carte blanche accordés à la teinte du segment */
.spotlight.odd .button.special {
    background-color: var(--spotlight-gray) !important;
    color: #ffffff !important;
}
    .spotlight.odd .button.special:hover,
    .spotlight.odd .button.special:focus {
        background-color: #565656 !important;
    }
    .spotlight.odd .button.special:active {
        background-color: #333333 !important;
    }
.spotlight.even .button.special {
    background-color: var(--spotlight-red) !important;
    color: #ffffff !important;
}
    .spotlight.even .button.special:hover,
    .spotlight.even .button.special:focus {
        background-color: #cc1440 !important;
    }
    .spotlight.even .button.special:active {
        background-color: #990b2b !important;
    }

@media screen and (max-width: 980px) {

    /* Image pleine largeur au ratio fixe : on annule aussi le min-height du
       gabarit (20rem) qui laissait une bande grise sous l'image */
    .spotlight .image {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    /* Empilement mobile : tout centré, avec des marges latérales cohérentes */
    .spotlight.odd .text,
    .spotlight.even .text {
        width: 100%;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        padding: 2.5rem 1.5rem 2.5rem 1.5rem;
    }

    .spotlight.odd .text h2,
    .spotlight.even .text h2 {
        padding: 0;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .spotlight .tags,
    .spotlight.even .tags {
        margin-bottom: 1.75rem;
        padding: 0;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
    }

    /* Carte blanche : encart distinct (marges, coins arrondis, ombre légère) */
    .spotlight .text .content {
        width: 100%;
        padding: 2rem 1.5rem 2rem 1.5rem;
        border-radius: 4px;
        -moz-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
        -webkit-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    }

}

/* ==========================================================================
   Section « À propos » (about us) — juste sous la bannière
   Titre, sous-titre, sous-sous-titre, texte — centrés et lisibles
   ========================================================================== */
#about-us > .inner {
    max-width: 55rem;
    text-align: center;
}
#about-us h2 {
    margin-bottom: 0;
}
    /* filet rouge du logo sous le titre */
    #about-us h2:after {
        content: '';
        display: block;
        width: 4rem;
        height: 3px;
        margin: 1.5rem auto 2rem auto;
        background-color: var(--spotlight-red, #b20933);
    }
#about-us h3 {
    margin-bottom: 0.75rem;
}
#about-us h4 {
    margin-bottom: 2rem;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.9rem;
}
#about-us p {
    margin-bottom: 0;
}

/* ==========================================================================
   Couleurs de marque : liens en rouge PubliData + menu gris
   ========================================================================== */
:root {
    --pd-red:        #b20933;   /* rouge PubliData             */
    --pd-red-hover:  #cc1440;   /* survol : rouge un peu plus clair */
    --pd-red-active: #990b2b;   /* actif  : rouge un peu plus foncé */
    --pd-gray:       #424242;   /* gris du logo                */
}

/* Liens en rouge (survol / actif = variations légères et cohérentes) */
a {
    color: var(--pd-red);
}
    a:hover,
    a:focus {
        color: var(--pd-red-hover);
    }
    a:active {
        color: var(--pd-red-active);
    }

/* En-tête : survol/actif des liens en rouge (au lieu du vert) */
#header a:hover,
#header a:focus,
#header a:active {
    color: var(--pd-red-hover);
}

/* Pied de page : coordonnées cliquables (adresse/itinéraire, tél, e-mail) en rouge */
#footer .contact-icons a {
    color: var(--pd-red);
}
    #footer .contact-icons a:hover,
    #footer .contact-icons a:focus,
    #footer .contact-icons a:active {
        color: var(--pd-red-hover);
    }

/* --- Menu déroulant : fond gris du logo, liens blancs, accents rouges ---
   (les liens du gabarit utilisent un sélecteur très spécifique
    `#menu > ul.links > li > a:not(.button)` : on le reprend tel quel pour
    l'emporter sur la couleur et le survol.) */
#menu {
    /* gris un peu plus clair + légère transparence dépolie : plus lisible
       qu'un rouge sur gris pour les liens */
    background: rgba(74, 74, 74, 0.9);
    background-color: rgba(74, 74, 74, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #ffffff;
}
    #menu > ul.links > li > a:not(.button) {
        color: #ffffff;
        border-top-color: rgba(255, 255, 255, 0.12);
        position: relative;
        -moz-transition: padding-left 0.2s ease;
        -webkit-transition: padding-left 0.2s ease;
        transition: padding-left 0.2s ease;
    }
        /* petit repère rouge à gauche, qui grandit au survol (texte blanc, lisible) */
        #menu > ul.links > li > a:not(.button):before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 3px;
            height: 0;
            background-color: var(--pd-red);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            -moz-transition: height 0.2s ease;
            -webkit-transition: height 0.2s ease;
            transition: height 0.2s ease;
        }
    /* survol : léger décalage vers la droite + repère rouge (pas de rouge sur le texte) */
    #menu > ul.links > li > a:not(.button):hover,
    #menu > ul.links > li > a:not(.button):focus,
    #menu > ul.links > li > a:not(.button):active {
        color: #ffffff;
        padding-left: 0.9rem;
    }
        #menu > ul.links > li > a:not(.button):hover:before,
        #menu > ul.links > li > a:not(.button):focus:before,
        #menu > ul.links > li > a:not(.button):active:before {
            height: 1.5rem;
        }
    #menu .close {
        color: rgba(255, 255, 255, 0.6);
    }
    #menu .close:hover,
    #menu .close:focus {
        color: #ffffff;
    }

#footer .copyright {
    margin: 0;
}
    #footer .copyright a.logo-mink {
        color: #bbb;
    }
    #footer .copyright a.logo-mink > img {
        margin-top: 10px;
        width: 50px;
    }