/* ===========================================================================
   AGL Pixel — feuille de style globale

   Base : ressources/css/style_general.css (CSS écrit à la main par le graphiste
   du site WEBDEV). Les valeurs sont reprises telles quelles ; seuls les
   sélecteurs WEBDEV (#dwwFLEX_*, .DivCellFlex_*) sont traduits en classes
   sémantiques et les chemins /AGL_PIXEL_WEB/... en /img/... et /video/...

   Les tailles de police à décimales (16.245px, 15.3px…) ne sont pas des
   approximations : ce sont les valeurs calculées relevées sur le site en ligne,
   produites là-bas par une cascade de pourcentages du framework WEBDEV.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-texte);
    font-size: 16px;
    color: var(--c-sombre);
    background: var(--c-blanc);
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

body a,
body button {
    outline: none;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-titres);
    font-weight: 400;
    margin: 0;
}

/* Conteneurs — largeurs relevées sur le site (voir DIRECTIVES §5) */
.conteneur {
    width: 100%;
    max-width: var(--largeur-contenu);
    margin: 0 auto;
}

.conteneur-interne {
    width: 100%;
    max-width: var(--largeur-interne);
    margin: 0 auto;
}

/* Sur téléphone, le contenu des sections collait aux deux bords de l'écran. Le
   site, lui, donne une gouttière à ses blocs à cette largeur (20 px) ; on la
   porte à 30 px, comme celle du hero. Elle est posée sur le conteneur et non sur
   chaque titre : titres, textes et cartes s'alignent ainsi sur la même verticale. */
@media (max-width: 600px) {
    .conteneur-interne {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Le carrousel de témoignages reste en pleine largeur, comme sur le site :
       ses flèches logent dans son propre retrait de 20 px. Le sélecteur passe par
       .page-content pour l'emporter sur les `max-width` des feuilles de page,
       chargées après celle-ci. */
    .page-content .conteneur-interne > .liste_temoignage {
        width: calc(100% + 60px);
        max-width: calc(100% + 60px);
        margin-left: -30px;
        margin-right: -30px;
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Témoignages empilés (Studio, pages prestation) : sur téléphone, chacun
       faisait plus de 1 000 px de haut, l'un sous l'autre. Ils passent sur une
       seule rangée qu'on fait défiler au doigt (demande du client du
       2026-10-01) : chaque carte s'aimante sur la gouttière, et la suivante
       dépasse de ~40 px pour signaler qu'il y a de quoi faire défiler. Toutes
       prennent la hauteur de la plus haute. Le préfixe .page-content l'emporte
       sur les règles des témoignages, écrites plus bas dans cette feuille.

       Le carrousel de la page Réalisations (.defilement-mobile) prend le même
       chemin sur téléphone (demande du client du 2026-10-01) : son script n'y
       lance pas Slick, et `:not(.slick-initialized)` écarte ces règles tant que
       le carrousel est en place, au-delà de 600 px. L'accueil garde son
       carrousel. */
    .page-content .liste_temoignage.sans-slick,
    .page-content .liste_temoignage.defilement-mobile:not(.slick-initialized) {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 30px;
        scrollbar-width: none;
    }

    .page-content .liste_temoignage.sans-slick::-webkit-scrollbar,
    .page-content .liste_temoignage.defilement-mobile:not(.slick-initialized)::-webkit-scrollbar {
        display: none;
    }

    .page-content .liste_temoignage.sans-slick .bloc-temoignage,
    .page-content .liste_temoignage.defilement-mobile:not(.slick-initialized) .bloc-temoignage {
        flex: 0 0 calc(100% - 24px);
        min-width: 0;
        margin: 0;
        scroll-snap-align: start;
    }

    /* Les diapositives du carrousel n'ont pas de fond : en rangée, elles
       reçoivent la carte blanche des témoignages empilés, sans quoi rien ne
       signalerait la carte suivante qui dépasse. */
    .page-content .liste_temoignage.defilement-mobile:not(.slick-initialized) .bloc-temoignage {
        background: var(--c-blanc);
        border-radius: 40px;
        padding: 30px;
    }

    /* Quinze témoignages, de 486 à 1 129 px de haut à 375 px de large : étirées
       à la hauteur de la plus haute, les cartes les plus courtes montraient
       jusqu'à 640 px de blanc. Chacune garde ici sa propre hauteur. */
    .page-content .liste_temoignage.defilement-mobile:not(.slick-initialized) {
        align-items: flex-start;
    }

    /* La pastille du logo client est en content-box (240 px + 2 x 20 px de
       retrait, comme sur le site) : ses 280 px imposaient leur largeur à la carte,
       et la suivante ne dépassait plus du tout. Elle se rétrécit avec la carte. */
    .page-content .liste_temoignage.sans-slick .temoignage .logo-client,
    .page-content .liste_temoignage.defilement-mobile:not(.slick-initialized) .temoignage .logo-client {
        min-width: 0;
        max-width: calc(100% - 40px);
    }

    /* L'ovale large des cartes empilées devient un rond, et le logo y passe à
       180 px de large au lieu de 120 (demande du client du 2026-10-01, d'abord
       sur Studio puis sur toutes les rangées) : la pastille, blanche sur la carte
       blanche, ne se voit pas, seul le logo compte. Il ne dépasse pas la carte
       sur les plus petits écrans. La pastille étant en content-box,
       `aspect-ratio` porte sur sa boîte de contenu : elle reste ronde. */
    .page-content .liste_temoignage.sans-slick .temoignage .logo-client,
    .page-content .liste_temoignage.defilement-mobile:not(.slick-initialized) .temoignage .logo-client {
        width: min(180px, calc(100% - 40px));
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 1;
    }
}

/* Exposants ® et marques — repris de style_general.css */
.brand {
    white-space: nowrap;
    text-transform: none;
}

/* Reprise du reset du framework WEBDEV. `line-height: 0` est indispensable :
   sans lui, chaque ® en exposant gonfle la hauteur de sa ligne et décale tout
   le bloc (relevé : +8 px sur le cartouche « PC SOFT® » du hero). */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sub {
    font-size: 30% !important;
    font-weight: 100 !important;
    bottom: -0.1em !important;
    right: 10px;
}

sub.small {
    font-size: 80% !important;
    font-weight: 400 !important;
    vertical-align: sub;
    right: 4px;
}

sub.small2 {
    font-size: 50% !important;
    font-weight: 400 !important;
    vertical-align: baseline;
    right: 4px;
}

.brand sub.small2 {
    font-size: 120% !important;
    font-weight: 400 !important;
    vertical-align: baseline;
    right: 4px;
    bottom: -7px !important;
}

.highlight-word {
    color: var(--c-vert-fonce);
    font-weight: bold;
}

/* Titre de section — 70 px fixes sur le site (pas de clamp, contrairement au H1) */
.TitreH2 {
    font-family: var(--font-titres);
    font-size: 70px;
    font-weight: 400;
    line-height: 70px;
    color: var(--c-sombre);
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

/* Le site place souvent un <h2> à l'intérieur du conteneur porteur de .TitreH2 :
   sans cette règle, le titre imbriqué reprend la taille par défaut du navigateur
   (1.5em, soit 105 px) et se compose sur une ligne de trop. */
.TitreH2 h1,
.TitreH2 h2,
.TitreH2 h3 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    text-transform: inherit;
    color: inherit;
    margin: 0;
}

/* ÉCART VOLONTAIRE (demande du 2026-09-18) : sous 640 px, les titres de section
   suivent la largeur de l'écran au lieu de rester à 70 px.

   Le site les laisse à 70 px quelle que soit la largeur : à 375 px ses propres
   titres occupent des boîtes de 945 px et sortent de l'écran. Les nôtres étaient
   contenus à 375 px, mais leur texte dépassait tout de même sa boîte — jusqu'à
   516 px de contenu sur la page Intégration — donc se coupait.

   `!important` est nécessaire : les feuilles de page sont chargées après celle-ci
   et leurs sélecteurs sont plus spécifiques (`.page-refonte .titre-intro`).
   Au-delà de 636 px le clamp plafonne à 70 px : le rendu desktop ne bouge pas. */
@media (max-width: 640px) {
    .TitreH2,
    .TitreH2 h1,
    .TitreH2 h2,
    .TitreH2 h3 {
        font-size: clamp(30px, 11vw, 70px) !important;
        line-height: 1.1 !important;
    }
}

/* Séparateur à trois carrés verts — motif récurrent entre le titre et le texte
   d'une section. Bloc de 56 px (3 x 12 + 2 gouttières de 10), centré. */
.separateur-carres {
    width: 56px;
    height: 114px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.separateur-carres span {
    width: 12px;
    height: 12px;
    background: var(--c-vert);
    display: block;
}

/* Bande d'appel « CONTACT » et sa flèche dessinée, en bas des pages accueil,
   studio, prestation et réalisations. Sur le site, la pointe de la flèche finit
   à droite du bouton et un peu sous lui : elle vise le vide. Le bouton descend
   donc de 63 à 150 px, demande du client du 2026-10-01 — la pointe, orientée à
   ~33° vers le bas-gauche, tombe ainsi en face du milieu de son bord droit. La
   bande garde 27 px sous le bouton, comme avant. */
.contact-cta {
    position: relative;
    height: 232px;
    padding-top: 150px;
    text-align: center;
}

.contact-fleche {
    position: absolute;
    top: -3px;
    left: 50%;
    margin-left: 117px;
    width: 172px;
    height: 171px;
    pointer-events: none;
}

/* Sous 980 px, la flèche dépasserait la largeur de l'écran : elle disparaît,
   et le bouton reprend sa place d'origine, rien n'ayant plus à le pointer. */
@media (max-width: 980px) {
    .contact-cta {
        height: 145px;
        padding-top: 63px;
    }

    .contact-fleche {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Grille de vignettes clients — le logo remonte et les tags apparaissent au survol.
   Repris tel quel de style_general.css (section « Grille ref clients »).
   --------------------------------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: 2fr;
    gap: 30px;
}

@media (min-width: 360px) { .grid { grid-template-columns: repeat(1, 1fr); } }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(4, 1fr); } }

/* L'accueil reste à 3 colonnes au-delà de 1400 px, contrairement aux autres pages */
@media (min-width: 1400px) {
    .page-accueil .bloc-realisations .grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
    position: relative;
    height: 350px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

.card:hover .card-background {
    transform: scale(1.1);
}

.card-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.4s ease;
}

.card:hover .card-background::before {
    background: rgba(0, 0, 0, 0.6);
}

.card-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

.card:hover .card-logo {
    transform: translate(-50%, -130%);
}

/* `height: auto` et non `100%` : le parent est lui-même en hauteur automatique,
   donc un pourcentage n'y résout rien et l'image restait haute de 0 px — jamais
   visible, donc jamais chargée puisqu'elle est en `loading="lazy"`. Ses attributs
   width/height lui donnent un rapport avant même son arrivée. */
.card-logo img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.card-tags {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    z-index: 1;
    min-height: 180px;
    align-items: flex-end;
    justify-content: center;
    align-content: flex-end;
}

.card:hover .card-tags {
    transform: translateY(0);
    opacity: 1;
}

.tag {
    text-transform: uppercase;
    padding: 6px 14px;
    background: transparent;
    color: var(--c-blanc);
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------------
   Cartes de prestation (partial _CartesOffres) — accueil et page Studio.
   Seules la largeur des cartes et leur gouttière varient d'une page à l'autre,
   via .grille-offres.
   --------------------------------------------------------------------------- */

.carte-offre {
    position: relative;
    background: var(--c-blanc);
    border-radius: 40px;
    padding: 30px 30px 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 300ms box-shadow ease-in-out;
}

/* Toute la carte est cliquable. Le site y parvient en JS — un `click` sur le bloc
   qui pose `window.location` —, mais un calque transparent rattaché au lien du titre
   donne le même geste sans script, et surtout sans rien perdre : le clavier atteint
   toujours la carte, le lecteur d'écran n'annonce qu'un lien, le clic du milieu ouvre
   un onglet, et la transition de page se déclenche comme pour n'importe quel
   `.page-link` (le clic atterrit sur un vrai <a>). */
.carte-offre .LienOffre::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.carte-offre:hover,
.carte-offre:focus-within {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Le titre d'une carte d'offre. Partagé par l'accueil et Studio via
   _CartesOffres : il vivait dans accueil.css, et les titres sortaient donc en
   liens bleus soulignés sur Studio. */
.LienOffre {
    font-family: var(--font-alt);
    font-size: 30px;
    font-weight: 700;
    line-height: 105%;
    color: var(--c-sombre);
    text-align: center;
    text-decoration: none;
    display: block;
}

/* ---------------------------------------------------------------------------
   Bouton d'appel

   Partagé par toutes les pages ; il était lui aussi dans accueil.css, d'où des
   boutons sans style sur Studio, Réalisations et Contact. Les variantes propres
   à une page (`.envoi` sur Contact, `.interesse` sur les pages prestation)
   restent dans leur feuille : chargées après site.css, elles le complètent.
   --------------------------------------------------------------------------- */

.BoutonCTA {
    display: inline-block;
    background: var(--c-vert);
    border: 1px solid var(--c-vert);
    border-radius: 30px;
    padding: 10px 20px;
    font-family: var(--font-alt);
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: var(--c-blanc);
    text-decoration: none;
    text-align: center;
    min-width: 371px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.BoutonCTA:hover,
.BoutonCTA:focus-visible {
    background: var(--c-vert-fonce);
    border-color: var(--c-vert-fonce);
}

/* Variante sombre, sur les fonds clairs */
.BoutonCTA.fonce {
    background: var(--c-sombre);
    border: 3px solid var(--c-sombre);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    min-width: 0;
}

.BoutonCTA.fonce:hover,
.BoutonCTA.fonce:focus-visible {
    background: var(--c-vert);
    border-color: var(--c-vert);
}

/* Le bouton du bloc « Intéressé par nos services ? » passe devant la flèche */
.BoutonCTA.contact {
    position: relative;
    z-index: 1;
    width: 225px;
    min-width: 0;
    padding: 10px 20px;
    font-size: 24px;
    font-weight: 400;
    line-height: 29px;
}

/* Le bouton passe au vert quand la carte est survolée (comportement du site) */
.carte-offre:hover .BoutonPetitCTA,
.carte-offre:focus-within .BoutonPetitCTA {
    background: var(--c-vert);
}

/* Les illustrations de hero sont écrites dans la page pour que leurs animations
   soient atteignables : le SVG remplit son conteneur, qui porte la taille. Le
   viewBox conserve le rapport, exactement comme le faisait la balise <img>. */
.hero-studio-illustration > .svg-illustration,
.hero-prestation-illustration > .svg-illustration,
.hero-realisations-illustration > .svg-illustration,
.hero-contact-illustration > .svg-illustration {
    display: block;
    width: 100%;
    height: 100%;
}

/* Les illustrations SVG sont écrites dans la page (voir _CartesOffres et
   _PagePrestation) : n'ayant plus les attributs width/height d'une <img>, elles se
   dimensionnent par leur contexte — et `flex: none` leur évite de se tasser dans la
   colonne de la carte. */
.carte-offre .svg-illustration {
    width: 215px;
    height: 215px;
    display: block;
    flex: none;
}

/* ---------------------------------------------------------------------------
   Conteneurs d'animations Lottie
   --------------------------------------------------------------------------- */

.animation-container {
    width: 150px;
    height: 150px;
}

.animation-container.small {
    width: 70px;
    height: 70px;
}

.animation-container svg path[stroke="rgb(0,0,0)"] {
    stroke: var(--c-sombre) !important;
}

.animation-container svg path[stroke="rgb(51,204,204)"],
.animation-container svg [stroke*="204"] {
    stroke: var(--c-vert) !important;
}

.animation-container svg [fill*="204"] {
    fill: var(--c-vert-clair) !important;
}

.animation-container.small svg path[stroke="rgb(0,0,0)"] {
    stroke: var(--c-vert-clair) !important;
}

.animation-container.small.blanc svg path[stroke="rgb(51,204,204)"] {
    stroke: var(--c-blanc) !important;
}

.offre-titre {
    margin: 35px 0 0;
    width: 100%;
}

/* `margin-bottom: auto` absorbe l'espace restant : combiné à la marge fixe du
   bouton, il aligne les trois boutons sur la même ligne quelle que soit la
   longueur de la description (c'est la carte la plus longue qui fixe la
   hauteur commune). */
.offre-description {
    font-family: var(--font-texte);
    font-size: 20px;
    font-weight: 400;
    line-height: 110%;
    color: var(--c-gris-texte);
    text-align: center;
    margin: 30px 0 auto;
    width: 100%;
}

/* Le bouton se dimensionne par son padding (187 px sur Studio) ; l'accueil le
   force à 197 px. */
.BoutonPetitCTA {
    margin-top: 35px;
    padding: 15px 25px;
    font-family: var(--font-alt);
    font-size: 20px;
    font-weight: 500;
    line-height: 16px;
    color: var(--c-blanc);
    background-color: var(--c-sombre);
    border: none;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    transition: all 150ms ease 0ms;
}
/* Repli des cartes : trois colonnes fixes ne tiennent pas sous 1240 px. Défini
   ici plutôt que par page, la grille étant partagée par l'accueil et Studio. */
@media (max-width: 1240px) {
    .grille-offres {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 30px;
        justify-content: stretch !important;
        padding: 0 24px;
    }
}

/* ---------------------------------------------------------------------------
   Témoignages et carrousel Slick — repris de style_general.css
   --------------------------------------------------------------------------- */

/* max-width 70vw (1008 px à 1440), avec 40 px de part et d'autre pour dégager
   les flèches, et 60 px sous le pictogramme de pause. Valeurs relevées sur le site. */
.liste_temoignage {
    max-width: 70vw;
    margin: 60px auto 0px;
    padding: 0 40px;
}

/* Hors carrousel, le pictogramme n'occupe qu'une ligne dans le flux */
.pause-icon {
    height: 20px;
}

/* Variante sans carrousel : les témoignages sont empilés dans des cartes blanches
   (page Studio). Le logo client y est un ovale plus large que le rond du carrousel. */
.liste_temoignage.sans-slick {
    margin: 70px auto 0;
}

.liste_temoignage.sans-slick .bloc-temoignage {
    margin: 10px 0 30px;
}

.bloc-temoignage.sans-slick {
    background: var(--c-blanc);
    border-radius: 40px;
    padding: 30px;
}

.bloc-temoignage.sans-slick .temoignage .logo-client {
    width: 240px;
    height: 120px;
    min-width: 240px;
    min-height: 120px;
    max-width: 240px;
    max-height: 120px;
}

.temoignage {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* content-box : sur le site, les 20 px de retrait s'ajoutent aux 180 px déclarés,
   ce qui donne une pastille de 220 px. En border-box le texte à côté gagnerait
   40 px de large et se composerait sur moins de lignes. */
.temoignage .logo-client {
    box-sizing: content-box;
    display: flex;
    align-items: center;
    background: var(--c-blanc);
    border-radius: 50%;
    width: 180px;
    height: 180px;
    min-width: 180px;
    min-height: 180px;
    max-width: 180px;
    max-height: 180px;
    padding: 20px;
}

.temoignage .logo-client img {
    width: 100%;
    height: auto;
}

.temoignage .texte-temoignage {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.TexteDescription {
    font-family: var(--font-texte);
    font-size: 20px;
    color: var(--c-gris-texte);
    line-height: 110%;
    text-align: center;
}

.temoignage .TexteDescription {
    text-align: left;
    line-height: 130%;
}

/* Le reset WEBDEV annule la marge haute des paragraphes ; seule la marge basse
   est redonnée ici. Sans cela chaque témoignage gagne 20 px. */
.temoignage .TexteDescription p {
    margin-top: 0;
    margin-bottom: 10px;
}

.temoignage .TexteDescription p a,
.temoignage .TexteDescription p a:hover,
.temoignage .TexteDescription p a:focus {
    color: var(--c-gris-texte);
}

/* Le site écrit `font-size: 1.4em` dans un conteneur à 11,7 px — résultat d'une
   cascade de pourcentages WEBDEV qui n'a pas d'équivalent ici. On pose donc la
   taille finale relevée (16,38 px). Le line-height est explicite car Paytone One
   a des métriques hautes : un `normal` donnerait 31 px par ligne au lieu de 23. */
.auteur {
    font-family: var(--font-titres);
    font-size: 16.38px;
    line-height: 140%;
}

.auteur .prenom {
    text-transform: uppercase;
}

.auteur .fonction {
    color: var(--c-vert);
}

/* Pastille « pause » qui apparaît au survol du carrousel */
.slick-slider {
    position: relative;
}

.slick-slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(29, 34, 32, 0.6);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 30%, transparent 30%, transparent 70%, #ffffff 70%, #ffffff 100%);
    background-size: 40px 40px;
    background-position: center;
    background-repeat: no-repeat;
}

.slick-slider:hover::after {
    opacity: .1;
}

.slick-slider .pause-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.slick-slider:hover .pause-icon {
    opacity: 1;
}

.pause-icon::before,
.pause-icon::after {
    content: '';
    width: 8px;
    height: 40px;
    background: var(--c-blanc);
    border-radius: 2px;
}

.pause-icon::before {
    margin-right: 10px;
}

/* Points du carrousel (Slick ne les affiche que sous 600 px) : de petits carrés,
   comme ceux du séparateur, gris au repos et vert vif pour la diapositive
   affichée (demande du client du 2026-10-01). Ils s'alignent sous les cartes —
   positionnés en absolu par slick-theme.css, ils s'empilaient en colonne dans
   l'angle haut gauche. Le carré est dessiné en ::before dans un bouton de 22 px,
   pour garder une cible tactile confortable. Le préfixe .liste_temoignage
   l'emporte sur slick-theme.css, chargé après cette feuille. La rangée passe à
   la ligne : les quinze points de la page Réalisations (28 px chacun) faisaient
   415 px et élargissaient la page de 20 px à 375 px de large. */
.liste_temoignage .slick-dots {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: auto;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.liste_temoignage .slick-dots li {
    width: 22px;
    height: 22px;
    margin: 0;
}

.liste_temoignage .slick-dots li button {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
}

.liste_temoignage .slick-dots li button::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    background: #bdbdbd;
    opacity: 1;
}

.liste_temoignage .slick-dots li.slick-active button::before {
    background: var(--c-vert);
}

.liste_temoignage .slick-dots li button:focus-visible {
    outline: 2px solid var(--c-sombre);
    outline-offset: 0;
}

/* ---------------------------------------------------------------------------
   Responsive des témoignages — repris de style_general.css
   --------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .liste_temoignage {
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 40px;
        font-size: 0.9em;
    }

    /* Le logo passe au-dessus du texte : côte à côte, la colonne de texte
       n'a plus la place et pousse la page en largeur. */
    .temoignage {
        gap: 15px;
        flex-direction: column;
        padding-top: 20px;
    }

    .temoignage .texte-temoignage {
        gap: 15px;
        width: 100%;
    }

    /* Le site passe la pastille à 180 x 100 ici : avec ses 20 px de retrait, un
       ovale de 220 x 140. Un vrai rond à la place, de 160 px (demande du client
       du 2026-10-01). */
    .temoignage .logo-client {
        width: 120px;
        height: 120px;
        min-width: 0;
        min-height: 0;
        max-width: 120px;
        max-height: 120px;
    }

    .liste_temoignage.sans-slick {
        margin: 40px auto 0;
    }

    .liste_temoignage.sans-slick .bloc-temoignage {
        margin: 30px 0;
    }

    /* Les flèches rentrent dans le conteneur : à -150 px elles sortaient de
       l'écran. `!important` est nécessaire, slick-theme.css étant chargé après
       cette feuille. */
    .slick-prev { left: 0 !important; }
    .slick-next { right: 0 !important; }
}

@media (max-width: 600px) {
    .liste_temoignage {
        padding: 0 20px;
    }

    /* 20 px sur téléphone faisaient des cartes de près de 1 500 px de haut :
       15 px, interligne gardé dans le même rapport (demande du 2026-10-01).
       Posée sur le bloc de texte et non sur ses seuls paragraphes : la liste du
       témoignage Syndex restait sinon à 20 px sous une phrase d'ouverture à 15. */
    .temoignage .TexteDescription {
        font-size: 15px;
        line-height: 20px;
    }

    .temoignage .TexteDescription p {
        margin-bottom: 10px;
        max-width: 80vw;
    }

    .slick-prev,
    .slick-next { display: none !important; }
}

/* Texte réservé aux lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   2. Transition de page (grille de pixels noirs)
   --------------------------------------------------------------------------- */

.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(25, 1fr);
    grid-template-rows: repeat(25, 1fr);
    gap: 0;
    background: transparent;
    transition: background-color 0.5s linear;
}

body.page-enter .page-transition,
body.page-exit .page-transition {
    background: #000;
}

body.page-loaded .page-transition {
    background: transparent;
}

.pixel {
    background: #000;
    opacity: 0;
    width: 40px;
    height: 40px;
}

body.page-enter .pixel {
    animation: pixelFadeIn 0.05s ease-in forwards;
}

body.page-exit .pixel {
    opacity: 1;
    animation: pixelFadeOut 0.05s ease-out forwards;
}

@keyframes pixelFadeIn {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.8); }
}

@keyframes pixelFadeOut {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

.page-content {
    opacity: 0;
}

body.page-loaded .page-content {
    animation: fadeInContent 0.6s ease forwards;
    animation-delay: 0.4s;
}

@keyframes fadeInContent {
    to { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   3. Entête flottante
   --------------------------------------------------------------------------- */

.header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hauteur-header);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    border-radius: 80px;
    margin-top: 10px;
    width: 100%;
    max-width: var(--largeur-header);
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    box-shadow: none;
    transition: opacity 0.3s ease,
                background-color 0.3s ease,
                transform 0.3s ease;
}

.header.transparent,
.header.solid {
    background-color: transparent;
    box-shadow: none;
    opacity: 1;
    transform: translateY(0);
}

/* Le JS masque l'entête au défilement vers le bas */
.header.masque {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
}

.header-logo {
    display: inline-block;
    line-height: 0;
    color: var(--c-sombre);
}

.header-logo svg {
    width: 198px;
    height: auto;
    display: block;
}

/* Le logo passe en blanc sur les fonds sombres (classe posée par le JS) */
.header-logo.clair {
    color: var(--c-blanc);
}

/* Le logo s'efface quand l'entête n'est plus au repos */
.header-logo {
    transition: opacity 0.3s ease;
}

.header.sans-logos .header-logo {
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   4. Bouton burger
   --------------------------------------------------------------------------- */

.burger-btn {
    background: transparent;
    border-radius: 50%;
    padding: 18px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    border: none;
    position: fixed;
    right: 32px;
    top: 10px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    pointer-events: auto;
    box-shadow: none;
}

.solid .burger-btn {
    background: var(--c-blanc);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.burger-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--c-sombre);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.burger-btn.active {
    background: transparent;
    padding: 0;
    width: 35px;
    height: 30px;
    top: 25px;
    right: 44px;
    box-shadow: none;
}

.burger-btn.active span {
    background: var(--c-blanc);
}

.burger-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(11px, 8px);
}

.burger-btn.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.burger-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(11px, -8px);
}

/* ---------------------------------------------------------------------------
   5. Menu de navigation
   --------------------------------------------------------------------------- */

body.menu-open {
    position: fixed;
    overflow: hidden;
    width: 100%;
}

html.menu-open {
    overflow: hidden;
}

body.nav-open .header.solid {
    background: transparent;
    box-shadow: none;
}

.nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 30vw;
    min-width: 300px;
    height: 100vh;
    background: var(--c-sombre);
    backdrop-filter: blur(20px);
    transition: right 0.4s ease-in-out;
    z-index: 99;
    padding: 5rem 2rem 1.5rem 2rem;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    margin: 0;
}

.nav-menu.active {
    right: 0;
    visibility: visible;
}

.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0;
}

.nav-menu.active li {
    opacity: 1;
    transform: translateX(0);
}

.nav-menu.active li:nth-child(1) { transition-delay: 0.3s; }
.nav-menu.active li:nth-child(2) { transition-delay: 0.4s; }
.nav-menu.active li:nth-child(3) { transition-delay: 0.5s; }
.nav-menu.active li:nth-child(4) { transition-delay: 0.6s; }
.nav-menu.active li:nth-child(5) { transition-delay: 0.7s; }
.nav-menu.active li:nth-child(6) { transition-delay: 0.8s; }
.nav-menu.active li:nth-child(7) { transition-delay: 0.9s; }

.nav-menu a {
    font-family: var(--font-titres);
    font-size: 20px;
    font-weight: 400;
    display: inline-block;
    padding: 1rem 0;
    color: var(--c-blanc);
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
    text-transform: uppercase;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--c-blanc);
    transition: width 0.4s ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
    color: var(--c-blanc);
}

.nav-menu a:hover::after,
.nav-menu a:focus-visible::after {
    width: 100%;
}

/* Pictogrammes du menu */
.picto-menu {
    display: block;
    width: 27px;
    height: 27px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex: 0 0 27px;
}

.picto-menu.accueil     { background-image: url(../img/picto-accueil.svg); }
.picto-menu.studio      { background-image: url(../img/picto-studio.svg); }
.picto-menu.refonte     { background-image: url(../img/picto-refonte.svg); }
.picto-menu.integration { background-image: url(../img/picto-integration.svg); }
.picto-menu.gabarit     { background-image: url(../img/picto-gabarit.svg); }
.picto-menu.realisation { background-image: url(../img/picto-realisation.svg); }
.picto-menu.contact     { background-image: url(../img/picto-contact.svg); }

/* Voile derrière le menu */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 98;
    pointer-events: none;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .nav-menu {
        width: 85vw;
        right: -100%;
    }
}
/* Les cartouches verts des heros sont en `width: max-content` : sans plafond ils
   refusent de se comprimer et poussent la page en largeur sur petit écran.
   `.brand` garde son `nowrap` (« WINDEV Mobile® » ne doit pas se couper), mais
   l'ensemble peut désormais passer à la ligne. */
@media (max-width: 980px) {
    /* `!important` : les feuilles de page, chargées après celle-ci, posent des
       largeurs fixes avec des sélecteurs plus spécifiques. */
    .TitreH1 .highlight {
        max-width: 100% !important;
        width: auto !important;
    }

    .TitreH1,
    .TitreH1 .SousTitreH1 {
        flex-wrap: wrap;
        max-width: 100%;
    }

    /* Les titres de hero doivent pouvoir se comprimer avec leur colonne */
    .hero-studio-texte,
    .hero-prestation-texte,
    .hero-realisations-texte,
    .hero-contact-texte {
        min-width: 0;
        max-width: 100%;
    }
}

/* Sous 600 px, le logo partenaire ne tient plus entre le logo AGL Pixel et le
   bouton du menu : il sort de l'écran. On le retire de l'entête. */
@media (max-width: 600px) {
    .header-logo svg {
        width: 150px;
    }

    /* Les heros passent en pleine largeur avec une gouttière de 20 px. En haut,
       80 px et non plus 40 (demande du client du 2026-10-01) : l'entête fixe
       occupe les 90 premiers pixels, et les titres démarraient juste sous le
       logo — collés à lui depuis qu'ils remplissent la largeur. */
    .hero-studio-contenu,
    .hero-prestation-contenu,
    .hero-realisations-contenu,
    .hero-contact-contenu {
        max-width: 100% !important;
        padding: 80px 20px 0 !important;
    }

    /* Textes des heros centrés, comme ceux de l'accueil (demandes du client du
       2026-10-01). Les titres sont des colonnes flex : `align-items` centre
       chaque ligne, `text-align` le texte qu'elle porte. */
    .hero-studio-texte,
    .hero-prestation-texte,
    .hero-realisations-texte,
    .hero-contact-texte {
        text-align: center;
    }

    .hero-studio-texte .TitreH1,
    .hero-prestation-texte .TitreH1,
    .hero-realisations-texte .TitreH1,
    .hero-contact-texte .TitreH1 {
        align-items: center;
    }

    .hero-studio-illustration,
    .hero-prestation-illustration,
    .hero-realisations-illustration,
    .hero-contact-illustration {
        max-width: 100%;
        height: auto;
    }

    /* Le conteneur n'a plus de hauteur propre : laisser aussi le SVG en `100%` les
       rendrait circulaires et l'illustration disparaîtrait. Le viewBox suffit. */
    .hero-studio-illustration > .svg-illustration,
    .hero-prestation-illustration > .svg-illustration,
    .hero-realisations-illustration > .svg-illustration,
    .hero-contact-illustration > .svg-illustration {
        height: auto;
    }
}

/* Sur petit écran, 100 px de retrait en haut et en bas de chaque section
   (160 px pour « Production graphique ») étirent la page sans rien apporter :
   ramenés à 50 et 70 px. Demande du 2026-09-18. */
@media (max-width: 600px) {
    /* Les heros sont exclus : leur hauteur vient d'un `min-height` et de retraits
       posés sur leurs conteneurs internes, pas de la section elle-même. La bande
       de la frise des technologies aussi : collée sous le hero de l'accueil, elle
       le prolonge et garde son retrait serré (voir accueil.css). */
    .page-content > section:not([class*="hero-"]):not(.bloc-technos) {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .page-accueil .bloc-production {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }
}

/* ---------------------------------------------------------------------------
   6. Pied de page
   --------------------------------------------------------------------------- */

.footer {
    background: var(--c-sombre);
    color: var(--c-blanc);
    padding: 80px 0 40px;
}

.footer-inner {
    width: 100%;
    max-width: 1252px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}

.footer-marque {
    width: 345px;
    flex: 0 0 345px;
}

/* En colonne, `flex-basis` porte sur la hauteur : les 345 px prévus pour la
   largeur du bloc devenaient 345 px de haut pour un logo de 54 px. */
@media (max-width: 980px) {
    .footer-marque {
        width: auto;
        flex: none;
    }
}

/* Bouton « Gestion des cookies » (BTNCOOKIE du site) : carré vert de 50 px arrondi
   à 10, l'icône en fond, qui rouvre le panneau de tarteaucitron. Sous le logo, à
   30 px — sur le site, ces 30 px le séparent du bloc du logo, qui porte encore la
   mention WEBDEV retirée ici. */
.footer-cookies {
    display: block;
    width: 50px;
    height: 50px;
    margin-top: 30px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--c-vert) url(../img/icon-cookie.svg) no-repeat 0 0 / contain;
    cursor: pointer;
}

.footer-cookies:focus-visible {
    outline: 2px solid var(--c-blanc);
    outline-offset: 2px;
}

/* Sur téléphone, le site range le bouton au bout de la ligne du logo. Le bloc
   s'étire sur toute la largeur : la colonne du pied de page aligne ses éléments
   au début, et le bouton restait collé au logo. */
@media (max-width: 980px) {
    .footer-marque {
        display: flex;
        align-self: stretch;
        align-items: center;
        justify-content: space-between;
    }

    .footer-cookies {
        margin-top: 0;
    }
}

/* --- Arrivée du logo ------------------------------------------------------
   Reprise du site : le logo monte en fusée, avec un tremblement au décollage,
   quand le pied de page entre dans l'écran. La chorégraphie du site comptait deux
   temps de plus — « réalisé avec » puis le logo WEBDEV — retirés à la demande du
   client le 2026-09-18.

   L'état masqué est conditionné à `.animation-prete`, que le script pose lui-même :
   sans JavaScript le logo reste visible au lieu de disparaître. Le site, lui, met
   `opacity: 0` en dur. */

.footer.animation-prete .footer-logo {
    opacity: 0;
    position: relative;
}

.footer.animation-prete .footer-logo.animate {
    animation: rocketLaunch 1.8s ease-out 0.5s forwards;
}

@keyframes rocketLaunch {
    0%   { transform: translateY(80px); opacity: 0; }
    25%  { transform: translateY(20px); opacity: 1; }
    30%  { transform: translateY(20px) translateX(-3px); }
    33%  { transform: translateY(18px) translateX(3px); }
    36%  { transform: translateY(20px) translateX(-3px); }
    39%  { transform: translateY(18px) translateX(3px); }
    42%  { transform: translateY(20px) translateX(-2px); }
    45%  { transform: translateY(19px) translateX(2px); }
    48%  { transform: translateY(20px) translateX(-1px); }
    51%  { transform: translateY(19px) translateX(1px); }
    55%  { transform: translateY(20px) translateX(0); opacity: 1; }
    75%  { transform: translateY(-15px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

.footer-logo {
    width: 145px;
    height: 54px;
    display: block;
}

.footer-colonnes {
    display: flex;
    gap: 39px;
    flex: 1;
}

.footer-colonne {
    width: 276px;
    flex: 0 0 276px;
}

.footer-colonne h2 {
    font-family: var(--font-texte);
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: var(--c-vert);
    margin: 0 0 30px;
}

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

/* Marge entre les entrées seulement : un margin-bottom ajouterait un blanc
   parasite sous la dernière et allongerait le pied de page. */
.footer-colonne li + li {
    margin-top: 15px;
}

.footer-colonne li {
    line-height: 23px;
}

/* Les trois lignes de l'adresse sont plus serrées que les liens */
.footer-colonne li.footer-adresse {
    line-height: 21px;
}

.footer-colonne a,
.footer-colonne p {
    font-family: var(--font-alt);
    font-weight: 500;
    font-size: 16.245px;
    line-height: 20px;
    color: var(--c-blanc);
    text-decoration: none;
    margin: 0;
}

.footer-colonne strong {
    font-family: var(--font-alt);
    font-weight: 700;
    font-size: 17.1px;
    color: var(--c-blanc);
}

/* Soulignement animé des liens du pied de page */
.footer-link {
    position: relative;
    display: inline-block;
}

.footer-link a {
    position: relative;
    display: inline-block;
    padding: 0;
}

.footer-link a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--c-blanc);
    transition: width 0.4s ease;
}

.footer-link a:hover::after,
.footer-link a:focus-visible::after {
    width: 100%;
}

.footer-copyright {
    width: 100%;
    max-width: 1252px;
    margin: 80px auto 0;
    font-family: var(--font-alt);
    font-weight: 500;
    font-size: 15.3px;
    line-height: 19px;
    /* Seul gris posé sur fond sombre : il doit s'éclaircir là où les autres
       s'assombrissent (4,67:1 sur #1d2220). Site : #777, soit 3,60:1. */
    color: #8a8a8a;
    text-align: center;
}

@media (max-width: 980px) {
    .footer-inner {
        flex-direction: column;
        gap: 40px;
        padding: 0 24px;
    }

    .footer-colonnes {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------------
   Défilement de la frise clients (Réalisations). La piste est écrite deux fois :
   la translation jusqu'à -50 % ramène la copie exactement à la place de
   l'original, d'où une boucle sans rupture. La frise des technologies de
   l'accueil, en trois passages, a ses propres keyframes (accueil.css).
   --------------------------------------------------------------------------- */

@keyframes marquee-gauche {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marquee-droite {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ---------------------------------------------------------------------------
   Bandeau cookies (tarteaucitron), repris du site

   Deux sources, dans l'ordre où le site les charge : le bloc <style> de son
   <head>, puis les règles de style_general.css. La feuille de tarteaucitron,
   injectée par la bibliothèque après toutes les autres, garde le dernier mot à
   spécificité égale : c'est elle qui pose la fenêtre en bas à gauche (252 px de
   large), comme sur le site, malgré le centrage que visait le bloc du <head>.
   Le voile flou dépend de la classe tac-open, posée par site.js.
   --------------------------------------------------------------------------- */

/* --- Bloc du <head> du site --- */

body #tarteaucitronRoot.tarteaucitronSize-popup div#tarteaucitronAlertBig {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90%;
    max-width: 340px !important;
    z-index: 999999 !important;
    border-radius: 15px !important;
    padding: 20px;
    text-align: center;
}

/* Voile sombre et flou derrière la fenêtre */
body.tac-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    z-index: 999998;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#tarteaucitronAlertBig {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.95);
    width: 92%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 999999 !important;
    opacity: 0;
    transition: all 0.35s cubic-bezier(.22, .9, .3, 1);
}

#tarteaucitronDisclaimerAlert::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: url(../img/icon-cookie.svg) no-repeat center;
    background-size: contain;
}

#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
    font-family: 'Paytone One', sans-serif;
    text-transform: uppercase;
    font-weight: normal !important;
    font-size: 1.7em;
    line-height: 50px;
}

body.tac-open #tarteaucitronAlertBig {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#tarteaucitronDisclaimerAlert {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #333;
}

#tarteaucitronAlertBig button {
    display: inline-block;
    margin: 6px 4px;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.tarteaucitronAllow {
    background: #2563eb;
    color: #fff;
    font-weight: 600;
}

.tarteaucitronAllow:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

#tarteaucitronCloseAlert {
    background: #f3f4f6;
    color: #111;
}

#tarteaucitronCloseAlert:hover {
    background: #e5e7eb;
}

#tarteaucitronPrivacyUrl {
    background: transparent;
    color: #2563eb;
    text-decoration: underline;
}

#tarteaucitronCloseCross {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    font-size: 16px;
    opacity: 0.6;
}

.tarteaucitronSize-popup div#tarteaucitronAlertBig button:not(#tarteaucitronCloseCross) {
    margin: 0 auto 30px !important;
}

#tarteaucitronCloseCross:hover {
    opacity: 1;
}

#tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig::before,
#tarteaucitronRoot.tarteaucitronSize-popup #tarteaucitronAlertBig::before {
    content: '' !important;
}

#tarteaucitronRoot.tarteaucitronSize-popup span#tarteaucitronDisclaimerAlert {
    margin: 0px 0 30px !important;
}

@media (max-width: 480px) {
    #tarteaucitronAlertBig {
        padding: 22px 16px;
    }

    #tarteaucitronAlertBig button {
        width: 100%;
        margin: 6px 0;
    }

    #tarteaucitronRoot.tarteaucitronSize-popup span#tarteaucitronDisclaimerAlert {
        margin: 0px !important;
    }
}

/* --- Règles de style_general.css --- */

#tarteaucitronDisclaimerAlert,
#tarteaucitronPrivacyUrl,
#tarteaucitronServices {
    font-family: 'Poppins', sans-serif !important;
}

#tarteaucitronRoot #tarteaucitronAlertBig,
#tarteaucitronDisclaimerAlert {
    background-color: #0FC777 !important;
    color: #fff !important;
}

#tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitronAlertBig #tarteaucitronPersonalize2,
.tarteaucitronCTAButton,
#tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow,
#tarteaucitronRoot .tarteaucitronAllow,
#tarteaucitronRoot .tarteaucitronDeny {
    background-color: #D1FEEB !important;
    color: #1D2220 !important;
    font-family: 'Poppins', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    border-radius: 40px;
    font-size: 14px !important;
}

#tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow {
    background-color: #77EFBB !important;
}

#tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny {
    background-color: #d6837d !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    border-radius: 40px;
    font-size: 15px !important;
}

#tarteaucitron #tarteaucitronPrivacyUrl,
#tarteaucitron #tarteaucitronPrivacyUrlDialog,
#tarteaucitronAlertBig #tarteaucitronCloseAlert {
    background-color: #77EFBB !important;
    font-family: 'Poppins', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    border-radius: 40px;
}

#tarteaucitronRoot button#tarteaucitronSaveButton {
    background-color: #000 !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    border-radius: 40px !important;
}

#tarteaucitronRoot button#tarteaucitronCloseAlert,
#tarteaucitronRoot button#tarteaucitronPrivacyUrl,
#tarteaucitronRoot button.tarteaucitronCTAButton,
#tarteaucitron #tarteaucitronPrivacyUrlDialog {
    border-radius: 40px !important;
}

#tarteaucitronPrivacyUrl {
    font-size: 15px;
}

#tarteaucitronRoot span#tarteaucitronDisclaimerAlert {
    padding: 20px 10px;
    text-align: center;
}

#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
    color: #fff !important;
}

#tarteaucitronPrivacyUrl {
    color: #fff !important;
    text-decoration: underline !important;
}

.tarteaucitronSize-bottom #tarteaucitronCloseCross,
.tarteaucitronSize-top #tarteaucitronCloseCross {
    border-radius: 50%;
    background-color: #fff;
    width: 30px;
    height: 30px;
}

#tarteaucitronRoot button#tarteaucitronBack {
    background-color: #40C1C5 !important;
}

#tarteaucitronRoot .tarteaucitronH1 {
    color: #1D2220 !important;
    font-family: 'Paytone One', sans-serif;
    text-transform: uppercase;
}

#tarteaucitronRoot .tarteaucitronAllow .tarteaucitronCheck::before,
#tarteaucitronRoot .tarteaucitronDeny .tarteaucitronCross::before,
#tarteaucitronRoot .tarteaucitronIsAllowed .tarteaucitronDeny .tarteaucitronCross::before {
    content: "" !important;
}

.tarteaucitronCheck,
.tarteaucitronCross {
    color: #fff !important;
}