/* ========================================================================
   Thème enfant Pixim — chargé automatiquement par YOOtheme après le style
   Charte graphique 2026 : polices auto-hébergées (WOFF2, sous-ensemble latin)
   et couleurs exposées en propriétés CSS pour les éléments sur mesure.
 ========================================================================== */

/* Funnel Display Bold 700 — titres (SIL OFL 1.1, fonts/OFL-funnel-display.txt) */
@font-face {
    font-family: "Pixim Display";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/funnel-display-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat 400 à 600, police variable — texte (SIL OFL 1.1, fonts/OFL-montserrat.txt) */
@font-face {
    font-family: "Pixim Text";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/montserrat-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Valeurs de la charte (identiques à less/theme.pixim.less) */
:root {
    --pixim-rouge: #C4281C;
    --pixim-noir: #000000;
    --pixim-gris: #58585A;
    --pixim-blanc: #FFFFFF;
    --pixim-fond-chaud: #F4F3EF;

    --pixim-activite-conseil: #2E6B4F;
    --pixim-activite-graphisme: #D19A1E;
    --pixim-activite-dev: #2F5A9E;
    --pixim-activite-social: #5E4A82;
    --pixim-activite-image: #9B3E63;
    --pixim-activite-ia: #10819E;

    /* Variantes « texte » conformes RGAA (décision du 07/10) :
       cyan foncé : 6,07:1 sur blanc, 5,47:1 sur fond chaud ; ocre : texte noir dessus (8,35:1) */
    --pixim-activite-ia-texte: #0C6B85;
    --pixim-activite-graphisme-sur: #000000;
}


/* ========================================================================
   Pixel d'activité (charte 06 « Le pixel ») : carré en fin de titre
 ========================================================================== */

.tm-activite { --tm-pixel: var(--pixim-rouge); }
.tm-activite--conseil   { --tm-pixel: var(--pixim-activite-conseil); }
.tm-activite--graphisme { --tm-pixel: var(--pixim-activite-graphisme); }
.tm-activite--dev       { --tm-pixel: var(--pixim-activite-dev); }
.tm-activite--social    { --tm-pixel: var(--pixim-activite-social); }
.tm-activite--image     { --tm-pixel: var(--pixim-activite-image); }
.tm-activite--ia        { --tm-pixel: var(--pixim-activite-ia); }

.tm-activite::after {
    content: "";
    display: inline-block;
    width: .42em;
    height: .42em;
    margin-left: .2em;
    background: var(--tm-pixel);
}


/* ========================================================================
   Élément « Pixim — Étapes » (workflow, méthode, maturité)
 ========================================================================== */

.tm-steps__heading { margin-bottom: .5em; }
.tm-steps__intro { margin-bottom: 1.5em; }

.tm-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.tm-steps__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--pixim-blanc);
    border-left: 3px solid var(--pixim-gris);
}

/* Les étapes humaines sont signalées par un libellé ET une bordure (jamais la seule couleur) */
.tm-steps__item--humain {
    border-left-color: var(--pixim-rouge);
    background: var(--pixim-fond-chaud);
}
.tm-steps__item--ia { border-left-color: var(--pixim-activite-ia); }

.tm-steps__num {
    font-family: "Pixim Display", "Arial Black", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    min-width: 2ch;
}

.tm-steps__title { margin: 0; font-weight: 600; color: var(--pixim-noir); }
.tm-steps__text > :last-child { margin-bottom: 0; }

.tm-steps__tags { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tm-steps__tag {
    font-size: .8125rem;
    line-height: 1.4;
    padding: 2px 8px;
    border: 1px solid currentColor;
    color: var(--pixim-gris);
}
.tm-steps__item--humain .tm-steps__tag--actor { color: var(--pixim-rouge); font-weight: 600; }
.tm-steps__item--ia .tm-steps__tag--actor { color: var(--pixim-activite-ia-texte); }

/* Méthode : frise horizontale à partir de 960px */
@media (min-width: 960px) {
    .tm-steps--methode .tm-steps__list { grid-auto-flow: column; grid-auto-columns: 1fr; }
    .tm-steps--methode .tm-steps__item { flex-direction: column; border-left: 0; border-top: 3px solid var(--pixim-noir); }
}

/* Maturité : échelle, chaque niveau un peu plus marqué que le précédent */
.tm-steps--maturite .tm-steps__item { border-left-width: 3px; }
.tm-steps--maturite .tm-steps__item:nth-child(2) { border-left-width: 6px; }
.tm-steps--maturite .tm-steps__item:nth-child(3) { border-left-width: 9px; }
.tm-steps--maturite .tm-steps__item:nth-child(4) { border-left-width: 12px; border-left-color: var(--pixim-activite-ia); }

.tm-steps__list--plain .tm-steps__num { display: none; }


/* ========================================================================
   Élément « Pixim — 4A » : 4 leviers dans le cadre « Humain »
 ========================================================================== */

.tm-4a__subtitle { color: var(--pixim-gris); margin-top: 0; }

.tm-4a__frame {
    border: 2px solid var(--pixim-noir);
    padding: 24px;
    margin-top: 24px;
}

.tm-4a__levers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 24px;
}
@media (min-width: 640px) { .tm-4a__levers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tm-4a__levers { grid-template-columns: repeat(4, 1fr); } }

.tm-4a__num { font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; color: var(--pixim-gris); }
.tm-4a__name {
    margin: 4px 0 8px;
    font-family: "Pixim Display", "Arial Black", sans-serif;
    font-weight: 700;
    font-size: 1.375rem;
    text-transform: uppercase;
    color: var(--pixim-noir);
}
.tm-4a__text { margin: 0; }

.tm-4a__human {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--pixim-noir);
    font-weight: 600;
}
.tm-4a__human-label {
    display: inline-block;
    margin-right: 8px;
    padding: 0 8px;
    background: var(--pixim-noir);
    color: var(--pixim-blanc);
    text-transform: uppercase;
    font-size: .8125rem;
    letter-spacing: .05em;
}
.tm-4a__human-label::after {   /* le pixel rouge, une fois par composition */
    content: "";
    display: inline-block;
    width: .45em;
    height: .45em;
    margin-left: .3em;
    background: var(--pixim-rouge);
}


/* ========================================================================
   Élément « Pixim — Métriques »
 ========================================================================== */

.tm-metrics__list {
    display: grid;
    gap: 24px;
    margin: 0;
}
@media (min-width: 640px) { .tm-metrics__list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

.tm-metric { border-top: 2px solid var(--pixim-noir); padding-top: 12px; }
.tm-metric dd { margin: 0; }
.tm-metric__label { font-weight: 600; color: var(--pixim-noir); }
.tm-metric__value {
    font-family: "Pixim Display", "Arial Black", sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.1;
    color: var(--pixim-noir);
}
.tm-metric__unit { font-size: 1rem; }
.tm-metric__meta { font-size: .8125rem; color: var(--pixim-gris); }
.tm-metric__soon { color: var(--pixim-gris); font-style: italic; }


/* ========================================================================
   Contenus migrés
 ========================================================================== */

/* Vidéos intégrées (YouTube sans cookie, Vimeo) en 16:9 */
.tm-video { position: relative; aspect-ratio: 16 / 9; margin: 1.5em 0; }
.tm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tm-gallery figure { margin: 0; }
.tm-gallery img { width: 100%; height: auto; }

/* Marqueur de travail « [À RÉÉCRIRE] » (à retirer de chaque page lors de la réécriture) */
.tm-a-reecrire { border-left: 4px solid var(--pixim-activite-graphisme); background: #FFF8E6; padding: 8px 16px; margin-bottom: 24px; color: var(--pixim-noir); }


/* ========================================================================
   Fiche portfolio (modèle « pixim-portfolio »), sur le principe de l'ancien site :
   bandeau sombre, informations à gauche / image à droite, sections 1/4 – 3/4
 ========================================================================== */

/* Pixel rouge en fin de titre (charte 06) */
.tm-pixel-fin > :is(h1, h2, h3, div, a):last-child::after,
:is(h1, h2, h3).tm-pixel-fin::after,
div.tm-pixel-fin::after {
    content: "";
    display: inline-block;
    width: .32em;
    height: .32em;
    margin-left: .12em;
    background: var(--pixim-rouge);
}

.tm-projet-meta { margin: 0; }
.tm-projet-meta__label,
.tm-projet-label {
    display: block;
    font-family: "Pixim Text", sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pixim-gris);
}
.tm-projet-tags a { color: var(--pixim-noir); }

/* Sections du contenu : titre à gauche (1/4), texte et galerie à droite (3/4) */
.tm-projet-section { padding: 40px 0; border-top: 1px solid rgba(0, 0, 0, .15); }
.tm-projet-section:first-child { border-top: 0; padding-top: 0; }
.tm-projet-section__titre { font-size: 1.5rem; margin: 0 0 16px; }
.tm-projet-section__corps > :first-child { margin-top: 0; }
.tm-projet-section__corps h3 { font-size: 1.125rem; }
@media (min-width: 960px) {
    .tm-projet-section { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; }
    .tm-projet-section--intro .tm-projet-section__corps { grid-column: 2; }
    .tm-projet-section__titre { margin: 0; }
}
.tm-projet-contenu .tm-gallery { margin-top: 24px; }

/* Cas client : lignes 1/4 – 3/4 séparées par un filet */
.tm-projet-ligne { padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, .15); }


/* ========================================================================
   Articles de blog (modèle « pixim-blog-article »)
 ========================================================================== */

/* Colonne de lecture confortable ; les blocs riches hérités (« Résolutions ») ont leur CSS
   cantonné à .tm-blog-article, réintégré dans l'article lors de la migration */
.tm-blog-article { font-size: 1.0625rem; line-height: 1.7; }
.tm-blog-article h2 { margin-top: 1.8em; }
.tm-blog-article img { height: auto; }
.tm-blog-meta { color: var(--pixim-gris); }

/* Mouvement réduit : aucune animation héritée des anciens blocs */
@media (prefers-reduced-motion: reduce) {
    .tm-blog-article *, .tm-blog-article *::before, .tm-blog-article *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ========================================================================
   En-tête et pied de page (tools/build_header_footer.php)
 ========================================================================== */

/* « Contact » du menu principal en bouton rouge */
.uk-navbar-nav > li:has(> a.tm-nav-cta) { display: flex; align-items: center; }
.uk-navbar-nav > li > a.tm-nav-cta {
    height: auto;
    min-height: 0;
    margin-left: 10px;
    padding: 10px 22px;
    background: var(--pixim-rouge);
    color: var(--pixim-blanc);
}
.uk-navbar-nav > li > a.tm-nav-cta:hover,
.uk-navbar-nav > li.uk-active > a.tm-nav-cta { background: var(--pixim-noir); color: var(--pixim-blanc); }

/* Pied de page : intitulés de colonne discrets ; les activités gardent leur pixel de couleur (comme le méga-menu) */
.tm-footer .tm-footer__titre { text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; color: rgba(255, 255, 255, .6); }
.tm-footer a[href^="tel:"], .tm-footer a[href^="mailto:"] { color: inherit; }
.tm-footer__bas { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); }
.tm-footer__bas p { margin: 0; color: rgba(255, 255, 255, .6); }

/* Bouton principal rouge aussi sur les sections sombres (UIkit le passe en blanc) */
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary { background: var(--pixim-rouge); color: var(--pixim-blanc); }
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover { background: var(--pixim-blanc); color: var(--pixim-noir); }


/* ========================================================================
   Pages d'expertise (modèle « pixim-expertise »)
 ========================================================================== */

/* Texte courant à une largeur de lecture confortable ; images et galeries gardent toute la largeur */
.tm-expertise-contenu > :is(p, ul, ol, h2, h3, h4, blockquote, .tm-a-reecrire) { max-width: 48rem; }
.tm-expertise-contenu h2 { margin-top: 1.6em; }
.tm-expertise-contenu > h2:first-child, .tm-expertise-contenu > .tm-a-reecrire + h2 { margin-top: 0; }
.tm-expertise-contenu > figure { margin: 1.5em 0 .75em; max-width: 48rem; }
.tm-expertise-contenu img { height: auto; }

/* Cartes reprises de l'ancien site (grilles du Builder converties) : image, titre, texte côte à côte */
.tm-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 40px 30px; margin: 2em 0; }
.tm-carte figure { margin: 0 0 1em; }
.tm-carte img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tm-carte h3 { margin: 0 0 .4em; font-size: 1.125rem; }
.tm-carte h3 a { color: inherit; }
.tm-carte p { margin: 0 0 .5em; font-size: .9375rem; }

/* Situations : cartes repérées par un filet rouge */
.tm-expertise-situations .uk-card { border-top: 3px solid var(--pixim-rouge); }


/* ========================================================================
   Accueil (article « accueil », tools/build_home.php)
 ========================================================================== */

/* Baseline animée « Agence ___ » : une ligne par partie, mots superposés (aucun décalage de mise en page) */
.tm-baseline {
    margin: 0;
    font-size: clamp(2.25rem, 1rem + 4vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.01em;
}
.tm-baseline > span { display: block; }
.tm-baseline__mots { display: grid !important; color: var(--pixim-rouge); white-space: nowrap; }
.tm-baseline__mot {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(.3em);
    transition: opacity .45s cubic-bezier(.2, .7, .2, 1), transform .45s cubic-bezier(.2, .7, .2, 1);
}
.tm-baseline__mot.is-active { opacity: 1; transform: none; }
.tm-baseline__apres::after {   /* pixel de fin */
    content: "";
    display: inline-block;
    width: .26em;
    height: .26em;
    margin-left: .1em;
    background: var(--pixim-rouge);
}
@media (prefers-reduced-motion: reduce) { .tm-baseline__mot { transition: none; } }

/* Logos clients en bas du hero : fichiers gris clair (prévus pour fond sombre), assombris sur le fond chaud */
.tm-hero-logos__titre p { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pixim-gris); }
.tm-hero-logos .el-item { display: flex; align-items: center; justify-content: center; }
.tm-hero-logos img { max-height: 52px; width: auto; filter: brightness(0); opacity: .7; transition: opacity .2s; }
.tm-hero-logos img:hover { opacity: .85; }

/* Activités : un filet à la couleur de l'activité */
.tm-home-activite__titre { border-top: 3px solid var(--tm-pixel); padding-top: 20px; }

/* Bloc IA : ambiance propre (accent cyan de l'activité IA) */
.tm-home-ia .tm-home-ia__kicker { color: var(--pixim-activite-ia); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: .875rem; }
/* 4A sur fond sombre (sections « secondaire » de YOOtheme, ou .uk-light) */
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color)) .tm-4a__subtitle { color: rgba(255, 255, 255, .75); }
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color)) .tm-4a__frame { border-color: var(--pixim-activite-ia); }
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color)) .tm-4a__name { color: var(--pixim-blanc); }
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color)) .tm-4a__num { color: var(--pixim-activite-ia); }
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color)) .tm-4a__human { border-top-color: rgba(255, 255, 255, .3); }
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color)) .tm-4a__human-label { background: var(--pixim-blanc); color: var(--pixim-noir); }

/* Bloc IA mis en avant sous le hero */
.tm-badge-nouveau {
    display: inline-block;
    margin-right: .6em;
    padding: 2px 10px;
    background: var(--pixim-activite-ia);
    color: var(--pixim-blanc);
    letter-spacing: .08em;
}
.tm-pixel-ia.tm-pixel-fin::after,
.tm-pixel-ia.tm-pixel-fin > :last-child::after { background: var(--pixim-activite-ia); }   /* le pixel prend la couleur IA */
.tm-home-ia__situations .el-item { height: 100%; padding: 20px 22px; border-top: 3px solid var(--pixim-activite-ia); background: rgba(255, 255, 255, .06); }
.tm-home-ia__situations .el-content { color: rgba(255, 255, 255, .8); }
.tm-home-ia__parcours .tm-steps__heading { color: var(--pixim-blanc); }
.tm-home-ia__parcours .tm-steps__item { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .85); }
@media (min-width: 960px) { .tm-home-ia__parcours.tm-steps--methode .tm-steps__item { border-top-color: var(--pixim-activite-ia); } }
.tm-home-ia__parcours .tm-steps__num { color: var(--pixim-activite-ia); }
.tm-home-ia__parcours .tm-steps__title { color: var(--pixim-blanc); }
.tm-home-ia__parcours a { color: var(--pixim-blanc); text-decoration: underline; text-underline-offset: 3px; }
.tm-home-ia__conclusion { max-width: 48rem; }


/* ========================================================================
   Page Agence (tools/build_agence.php)
 ========================================================================== */

.tm-equipe .el-image { filter: grayscale(1); }   /* portraits homogènes, quelle que soit la photo d'origine */
.tm-partenaires .el-item { display: flex; align-items: center; justify-content: center; min-height: 80px; }
.tm-partenaires img { max-height: 56px; width: auto; object-fit: contain; opacity: .85; }


/* ========================================================================
   Hub /expertises (tools/build_hub_expertises.php)
 ========================================================================== */

/* filet à la couleur de l'activité, sans déborder dans la gouttière de la grille (40 px, 70 px dès 1200 px) */
.tm-hub-activite { padding-top: 24px; background: linear-gradient(var(--tm-pixel), var(--tm-pixel)) right top / calc(100% - 40px) 3px no-repeat; }
@media (min-width: 1200px) { .tm-hub-activite { background-size: calc(100% - 70px) 3px; } }
.tm-hub-activite__num p { font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; color: var(--pixim-gris); }
@media (min-width: 640px) { .tm-hub-activite__pages { columns: 2; column-gap: 40px; } }
.tm-hub-activite__pages > li { break-inside: avoid; }
.tm-hub-activite__pages a { font-size: 1.0625rem; }


/* ========================================================================
   Page pilier IA & productivité (tools/build_page_ia.php)
 ========================================================================== */

.tm-ia-situations .uk-card, .tm-ia-offres .uk-card { border-top: 3px solid var(--pixim-activite-ia); }
.tm-ia-offres .el-meta { color: var(--pixim-activite-ia-texte); }
.tm-ia-securite .el-title::before {   /* puce pixel à la couleur IA */
    content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; background: var(--pixim-activite-ia);
}
.tm-ia-exemple dt { text-transform: uppercase; letter-spacing: .05em; }
.uk-section-secondary .tm-ia-labo li { color: rgba(255, 255, 255, .85); }


/* ========================================================================
   Liste du portfolio : mosaïque filtrable (modèle « pixim-portfolio-liste », js/custom.js)
 ========================================================================== */

.tm-portfolio-mosaique .el-item .uk-inline-clip { display: block; }
.tm-portfolio-mosaique video.el-hover-image {   /* la vidéo recouvre l'image (UIkit « cover » désactivé par js/custom.js) */
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.tm-portfolio-mosaique video.el-hover-image.is-playing { opacity: 1; }
.tm-portfolio-mosaique .el-title { margin-top: 12px; }
.tm-portfolio-mosaique .el-content { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .tm-portfolio-mosaique video.el-hover-image { display: none; } }


/* ========================================================================
   Page simple (pages légales, accessibilité, plan du site, recrutement)
 ========================================================================== */

.tm-page-contenu h2 { margin-top: 1.6em; font-size: 1.5rem; }
.tm-page-contenu h3 { margin-top: 1.4em; font-size: 1.2rem; }
.tm-page-contenu ul ul { margin-top: .3em; }

/* Baseline sans suite (« Agence ___ ») : le pixel de fin suit le mot affiché */
.tm-baseline--sans-suite .tm-baseline__mot::after {
    content: "";
    display: inline-block;
    width: .26em;
    height: .26em;
    margin-left: .1em;
    background: var(--pixim-rouge);
}

/* Visuel du hero : « ! » en filigrane, pixel qui tombe puis respire, trame de pixels aux couleurs des activités */
.tm-hero-visuel { display: flex; justify-content: center; }
.tm-hero-ex { display: block; width: 100%; max-width: 460px; height: auto; overflow: visible; }
.tm-hero-ex__grille rect { fill: var(--pixim-noir); opacity: .07; }
.tm-hero-ex__barre {   /* le « ! » de la charte, en noir plein : la barre se dessine de bas en haut, puis le pixel tombe */
    fill: var(--pixim-noir);
    transform-box: fill-box;
    transform-origin: bottom;
    animation: tm-barre-monte .7s cubic-bezier(.2, .8, .2, 1) .1s both;
}
@keyframes tm-barre-monte { from { transform: scaleY(0); } to { transform: none; } }
.tm-hero-ex__pixel {
    fill: var(--pixim-rouge);
    transform-box: fill-box;
    transform-origin: center;
    animation: tm-pixel-chute 1.1s cubic-bezier(.2, .8, .2, 1) .7s both, tm-pixel-respire 5s ease-in-out 2.2s infinite;
}
.tm-hero-ex__scintille { opacity: 0; animation: tm-scintille 7s ease-in-out infinite; }
.tm-hero-ex__scintille--conseil   { fill: var(--pixim-activite-conseil); }
.tm-hero-ex__scintille--graphisme { fill: var(--pixim-activite-graphisme); }
.tm-hero-ex__scintille--dev       { fill: var(--pixim-activite-dev); }
.tm-hero-ex__scintille--social    { fill: var(--pixim-activite-social); }
.tm-hero-ex__scintille--image     { fill: var(--pixim-activite-image); }
.tm-hero-ex__scintille--ia        { fill: var(--pixim-activite-ia); }
@keyframes tm-pixel-chute { from { transform: translateY(-380px); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateY(6px); } to { transform: none; } }
@keyframes tm-pixel-respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }
@keyframes tm-scintille { 0%, 100% { opacity: 0; } 12%, 30% { opacity: 1; } 45% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .tm-hero-ex__barre, .tm-hero-ex__pixel, .tm-hero-ex__scintille { animation: none; }
}

/* Section IA courte : texte à droite du titre */
.tm-home-ia .uk-text-lead, .tm-home-ia p { max-width: 40rem; }


/* ========================================================================
   Accueil, proposition B : les activités en tuiles de couleur (fond d'activité de la charte)
 ========================================================================== */

.tm-tuiles-activites { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tm-tuiles-activites { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tm-tuiles-activites { grid-template-columns: repeat(3, 1fr); } }
.tm-tuile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    padding: 28px 28px 56px;
    color: var(--pixim-blanc);
    text-decoration: none;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.tm-tuile:hover, .tm-tuile:focus-visible { color: var(--pixim-blanc); text-decoration: none; transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
.tm-tuile__num { font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: .875rem; opacity: .8; }
.tm-tuile__titre { font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1.15; }
.tm-tuile__pages { font-size: .9375rem; line-height: 1.5; opacity: .92; }
.tm-tuile__fleche { position: absolute; right: 24px; bottom: 18px; font-size: 1.5rem; transition: transform .25s; }
.tm-tuile:hover .tm-tuile__fleche { transform: translateX(6px); }
.tm-tuile--conseil   { background: var(--pixim-activite-conseil); }
.tm-tuile--graphisme { background: var(--pixim-activite-graphisme); color: var(--pixim-noir); }   /* ocre : texte noir (contraste) */
.tm-tuile--graphisme:hover, .tm-tuile--graphisme:focus-visible { color: var(--pixim-noir); }
.tm-tuile--dev       { background: var(--pixim-activite-dev); }
.tm-tuile--social    { background: var(--pixim-activite-social); }
.tm-tuile--image     { background: var(--pixim-activite-image); }
.tm-tuile--ia        { background: var(--pixim-activite-ia-texte); }   /* cyan foncé : contraste suffisant pour le texte courant */
@media (prefers-reduced-motion: reduce) { .tm-tuile, .tm-tuile__fleche { transition: none; } }