/* ========================================================================
   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 ; 16/10 : seulement pour les petits textes, la couleur de la charte
       #10819E restant celle des fonds, pixels et filets — blanc sur #10819E : 4,51:1, conforme) :
       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: #FFFFFF;   /* 16/10 : texte clair sur l'ocre (charte) */
}


/* ========================================================================
   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: 72px; 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)
 ========================================================================== */

/* Tuiles des 6 familles (accueil) : élément Grid de YOOtheme (14/10). La couleur est portée par l'élément
   (.tm-tuile--<famille>), le lien (toute la tuile) porte les marges et la flèche ; le texte hérite de la tuile. */
.tm-tuile { color: var(--pixim-blanc); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.tm-tuile > a { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 28px 28px 56px; color: inherit; text-decoration: none; }
.tm-tuile:hover, .tm-tuile:focus-within { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
.tm-tuile > a:focus-visible { outline: 3px solid currentColor; outline-offset: -6px; }
.tm-tuile .el-meta, .tm-tuile .el-title, .tm-tuile .el-content { margin: 0 !important; color: inherit; }
.tm-tuile .el-meta { font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: .875rem; letter-spacing: 0; text-transform: none; opacity: .8; }
.tm-tuile .el-title { font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1.15; }
/* prestations de la famille en liste, puce pixel de la couleur du texte */
.tm-tuile__liste { list-style: none; margin: 6px 0 0; padding: 0; font-size: .9375rem; line-height: 1.4; opacity: .95; }
.tm-tuile__liste li { position: relative; padding-left: 16px; }
.tm-tuile__liste li + li { margin-top: 6px; }
.tm-tuile__liste li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: currentColor; }
.tm-tuile > a::after { content: "→"; position: absolute; right: 24px; bottom: 18px; font-size: 1.5rem; line-height: 1; transition: transform .25s; }
.tm-tuile:hover > a::after { transform: translateX(6px); }
.tm-tuile--conseil   { background: var(--pixim-activite-conseil); }
.tm-tuile--graphisme { background: var(--pixim-activite-graphisme); }   /* 16/10 : texte blanc, comme la charte */
.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); }   /* cyan de la charte : texte blanc 4,51:1 (AA) */
@media (prefers-reduced-motion: reduce) { .tm-tuile, .tm-tuile > a::after { transition: none; } }

/* ========================================================================
   Pages de famille et de prestation (tools/lib/famille_page.php)
   Chaque famille fournit sa couleur (--tm-famille) et la couleur du texte posé dessus (--tm-famille-sur), pour les repères
   (pixel, kicker, filets, numéros). Fonds et boutons de couleur : styles PixColors du Builder (tertiary → octonary).
 ========================================================================== */

/* couleur de famille : fonds, pixels, filets (charte) ; --tm-famille-texte pour les petits textes de couleur */
.tm-famille { --tm-famille-texte: var(--tm-famille); }
.tm-famille--conseil   { --tm-famille: var(--pixim-activite-conseil);   --tm-famille-sur: var(--pixim-blanc); }
.tm-famille--graphisme { --tm-famille: var(--pixim-activite-graphisme); --tm-famille-sur: var(--pixim-blanc); }   /* 16/10 : texte blanc sur l'ocre */
.tm-famille--dev       { --tm-famille: var(--pixim-activite-dev);       --tm-famille-sur: var(--pixim-blanc); }
.tm-famille--social    { --tm-famille: var(--pixim-activite-social);    --tm-famille-sur: var(--pixim-blanc); }
.tm-famille--image     { --tm-famille: var(--pixim-activite-image);     --tm-famille-sur: var(--pixim-blanc); }
.tm-famille--ia        { --tm-famille: var(--pixim-activite-ia);  --tm-famille-sur: var(--pixim-blanc); --tm-famille-texte: var(--pixim-activite-ia-texte); }   /* cyan de la charte ; petits textes en cyan foncé */

/* Repères : pixel des titres, famille au-dessus du H1, accroche, encadré */
.tm-pixel-famille.tm-pixel-fin::after,
.tm-pixel-famille.tm-pixel-fin > :last-child::after { background: var(--tm-famille); }
.tm-famille__kicker p { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-famille-texte); }
.tm-famille--graphisme .tm-famille__kicker p { color: var(--pixim-noir); }   /* ocre trop clair pour du texte */
.tm-famille__accroche p { font-weight: 600; color: var(--pixim-noir); }
.tm-famille__enjeu { padding-left: 16px; border-left: 3px solid var(--tm-famille); }

/* Cartes (prestations) : filet en haut ; « En option » en étiquette */
.tm-famille__cartes .uk-card { height: 100%; border-top: 3px solid var(--tm-famille); }
.tm-famille .tm-option .el-meta {
    display: inline-block; padding: 2px 10px; background: var(--tm-famille); color: var(--tm-famille-sur);
    font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
/* Situations : filet à gauche, sans fond */
.tm-famille__situations .el-item { height: 100%; padding-left: 20px; border-left: 3px solid var(--tm-famille); }

/* Liste à puces pixel (livrables) */
.tm-famille__liste { list-style: none; padding: 0; margin: 0 0 1.2em; }
.tm-famille__liste li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.tm-famille__liste li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: .5em; height: .5em; background: var(--tm-famille); }
.tm-famille__conclusion { color: var(--pixim-gris); }

/* Méthode : titre de l'élément = H2 de section ; repères de la famille */
.tm-famille__methode .tm-steps__heading { font-size: 2.23125rem; line-height: 1.2; margin-bottom: 30px; }
@media (min-width: 1200px) { .tm-famille__methode .tm-steps__heading { font-size: 2.625rem; } }
.tm-famille__methode .tm-steps__heading::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .12em; background: var(--tm-famille); }
.tm-famille__methode .tm-steps__num { color: var(--tm-famille); }
.tm-famille--graphisme .tm-famille__methode .tm-steps__num { color: var(--pixim-noir); }
.tm-famille__methode .tm-steps__item { border-left-color: var(--tm-famille); }
@media (min-width: 960px) { .tm-famille__methode.tm-steps--methode .tm-steps__item { border-top-color: var(--tm-famille); } }

/* Liens (références, portfolio) */
.tm-famille__references .el-link, .tm-famille__lien { color: var(--tm-famille-texte); font-weight: 600; }
.tm-famille--graphisme :is(.tm-famille__references .el-link, .tm-famille__lien) { color: var(--pixim-noir); }

/* Appel à l'action sur le fond de la famille */

/* H1 des pages de famille sur mobile : les mots longs (« communication ») ne débordent pas */
@media (max-width: 639px) { .tm-famille :is(.uk-heading-large, .uk-heading-medium) { font-size: 2.35rem; line-height: 1.1; } }
/* boutons dont le libellé passe sur deux lignes (mobile) : interligne resserré */
@media (max-width: 639px) { .tm-famille .uk-button { line-height: 1.4; padding-top: .7em; padding-bottom: .7em; } }
.tm-famille h1 { overflow-wrap: break-word; hyphens: auto; }
/* H1 des heros : le pixel suit le dernier mot (span insécable) au lieu de pouvoir passer seul à la ligne */
.tm-pixel-mot { white-space: nowrap; }
.tm-pixel-mot::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .24em; background: var(--tm-famille, var(--pixim-rouge)); }
/* hero avec visuel : le H1 n'a que 3/5 de la largeur, le mot le plus long (« photographique ») doit tenir sur une ligne */
/* (14/10) H1 des heros sur toute la largeur : plus de plafond de taille lié au visuel */

/* Projets (réalisations) : une ligne par projet, galerie au même format ; le logo (1er visuel) entier sur fond blanc */
.tm-famille__projet { padding-top: 40px; border-top: 1px solid rgba(0, 0, 0, .1); }
.tm-famille__projet-galerie .el-item { display: block; }   /* la vignette occupe toute sa colonne */
.tm-famille__projet-galerie .el-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tm-famille__projet-galerie--logo .uk-grid > :first-child .el-image { object-fit: contain; background: var(--pixim-blanc); padding: 8%; box-sizing: border-box; }
.tm-famille__projet-galerie--entier .el-image { aspect-ratio: auto; object-fit: contain; }   /* illustrations : œuvre entière, sans recadrage */
.tm-famille__visuel img { width: 100%; height: auto; max-height: 440px; object-fit: cover; }   /* photo verticale : hauteur plafonnée */
/* exemple fictif / statut d'un projet : mention visible */
.tm-famille__fictif, .tm-famille__mention { display: inline-block; padding: .3em .8em; border: 2px solid var(--tm-famille); color: var(--tm-famille-texte); font-size: .8rem !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4 !important; }
/* films : vignette cliquable (lecteur chargé au clic), bouton « Voir le film » précédé d'un triangle de lecture */
.tm-famille__film .el-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.tm-famille__film .el-link::before { content: ""; display: inline-block; margin-right: .6em; border-style: solid; border-width: .45em 0 .45em .75em; border-color: transparent transparent transparent currentColor; vertical-align: -.05em; }

/* Bloc prix (Diagnostic Dirigeant augmenté) : carte blanche, filet de la famille, montant en grand */
.tm-famille__prix { border-top: 3px solid var(--tm-famille); }
.tm-famille__prix .el-meta { color: var(--tm-famille-texte); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* Hero : ligne d'informations synthétiques (format, modalités) */
.tm-famille__infos { display: inline-block; font-weight: 600; color: var(--tm-famille-texte); letter-spacing: .02em; }
/* Cartes de prestations : modalités et prix (page de famille IA) */
.tm-famille__carte-mention { font-size: .875rem; font-weight: 600; color: var(--tm-famille-texte); }
.tm-famille__carte-prix { font-family: var(--pixim-font-display, inherit); font-size: 1.25rem; font-weight: 700; color: var(--pixim-noir); }

/* Texte suivi des sections de famille (deux colonnes, intros, texte + liens) : 18 px au lieu du « lead » à 24 px (14/10) */
.tm-famille__texte { font-size: 1.125rem; line-height: 1.65; max-width: 40em; }
.tm-famille__texte .tm-famille__liste { margin: .4em 0 1em; }
/* Schéma sous un titre de section (SVG intégré) */
.tm-famille__schema svg { width: 100%; max-width: 440px; height: auto; }

/* Page /expertises : six cartes de famille (couleur via .tm-famille--<clé> sur chaque carte) */
.tm-hub-familles .el-item { height: 100%; border-top: 4px solid var(--tm-famille); }
.tm-hub-familles .el-title::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .24em; background: var(--tm-famille); }
.tm-hub-reperes { list-style: none; padding: 0; margin: 1em 0 0; font-size: .9375rem; color: var(--pixim-gris); }
.tm-hub-reperes li { position: relative; padding: 3px 0 3px 18px; }
.tm-hub-reperes li::before { content: ""; position: absolute; left: 0; top: .8em; width: 7px; height: 7px; background: var(--tm-famille); }
.tm-hub-familles .el-link { color: var(--tm-famille-texte); font-weight: 600; }
.tm-hub-familles .tm-famille--graphisme .el-link { color: var(--pixim-noir); }   /* ocre trop clair pour du texte */
.tm-hub-kicker p { color: var(--pixim-rouge); }
.tm-hub-etapes .tm-steps__heading:empty { display: none; }
/* Liens « texte » des cartes : alignés à gauche même sur deux lignes (uk-button centre par défaut) */
.tm-famille .el-link.uk-button-text, .tm-hub-familles .el-link { text-align: left; }


/* ========================================================================
   Offre spéciale IA — Entrepreneur Augmenté (/offre-speciale-ia, 15/10/2026)
   Couleur de page : rouge Pixim (.tm-famille--offre), appels à l'action téléphoniques.
 ========================================================================== */

.tm-famille--offre { --tm-famille: var(--pixim-rouge); --tm-famille-sur: var(--pixim-blanc); }

/* bandeau « offre spéciale » : sobre, capitales espacées, filet rouge */
.tm-offre-badge p { display: inline-block; margin: 0; padding: .45em .9em; border: 2px solid var(--pixim-rouge); color: var(--pixim-rouge); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.uk-section-secondary .tm-offre-badge p { border-color: currentColor; color: var(--pixim-blanc); }

/* faits clés du hero : 4 semaines — 4 rendez-vous — prix */
.tm-offre-faits { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tm-offre-faits li { padding: .55em 1em; background: var(--pixim-blanc); border: 1px solid rgba(0, 0, 0, .12); font-weight: 600; }
.tm-offre-faits .tm-offre-faits__prix { background: var(--pixim-noir); border-color: var(--pixim-noir); color: var(--pixim-blanc); }
.tm-offre-validite { margin-top: .9em; font-weight: 600; }
.tm-offre-chapo { font-size: 1.25rem; font-weight: 600; line-height: 1.45; color: var(--pixim-noir); }
.uk-section-secondary .tm-offre-chapo { color: var(--pixim-blanc); }

/* appel : bouton rouge, numéro lisible, interlocuteur */
.tm-offre-appel .uk-button-primary { background: var(--pixim-rouge); color: var(--pixim-blanc); font-size: 1rem; padding: 0 28px; line-height: 52px; }
.tm-offre-appel .uk-button-primary:hover, .tm-offre-appel .uk-button-primary:focus-visible { background: var(--pixim-noir); color: var(--pixim-blanc); }
.uk-section-secondary .tm-offre-appel .uk-button-primary:hover { background: var(--pixim-blanc); color: var(--pixim-noir); }
.tm-offre-coordonnees p { margin: 0; }
.tm-offre-tel a { font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: 1.6rem; letter-spacing: .02em; color: inherit; text-decoration: none; }
.tm-offre-tel a:hover { text-decoration: underline; }
.tm-offre-interlocuteur { margin-top: .3em !important; }
.tm-offre-echange, .tm-offre-lieu { margin-top: .6em !important; font-size: .9375rem; opacity: .85; }

/* barre d'appel fixe (mobile et tablette ; masquée à partir de 960 px par la visibilité du Builder) */
@media (max-width: 959px) {
    .tm-offre-appel-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 980; margin: 0 !important; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); box-shadow: 0 -4px 18px rgba(0, 0, 0, .12); }
    .tm-offre-appel-mobile .uk-button { background: var(--pixim-rouge); color: var(--pixim-blanc); line-height: 48px; white-space: nowrap; }
    .tm-offre-appel-mobile > div, .tm-offre-appel-mobile .uk-button { display: block; width: 100%; }
    body:has(.tm-offre-appel-mobile) { padding-bottom: 72px; }
}

/* citations mises en valeur */
.tm-offre-citation blockquote { margin: 0; padding: 0 0 0 28px; border-left: 4px solid var(--pixim-rouge); font-family: "Pixim Display", "Arial Black", sans-serif; font-style: normal; font-weight: 700; font-size: 1.5rem; line-height: 1.3; color: var(--pixim-noir); max-width: 30em; }
.tm-offre-citation blockquote p { margin: 0; }
@media (min-width: 960px) { .tm-offre-citation blockquote { font-size: 2rem; } }
.tm-offre-question p { font-weight: 600; color: var(--pixim-noir); }

/* schéma : cheminement de la réflexion augmentée (5 étapes, flèches entre elles) */
.tm-flux .el-item { position: relative; height: 100%; padding: 20px 18px; background: var(--pixim-blanc); border-top: 3px solid var(--pixim-rouge); }
.tm-flux .el-meta { font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--pixim-rouge); text-transform: none; letter-spacing: 0; }
.tm-flux .el-title { font-size: 1.05rem; line-height: 1.25; }
.tm-flux .el-content { font-size: .9375rem; color: var(--pixim-gris); }
.tm-flux > .uk-grid > div:last-child .el-item { background: var(--pixim-noir); border-top-color: var(--pixim-noir); }
.tm-flux > .uk-grid > div:last-child .el-item :is(.el-title, .el-content, .el-meta) { color: var(--pixim-blanc); }
.tm-flux > .uk-grid > div:not(:last-child) .el-item::after { content: "↓"; position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); font-size: 1.25rem; color: var(--pixim-rouge); }
@media (min-width: 960px) {
    .tm-flux > .uk-grid > div:not(:last-child) .el-item::after { content: "→"; left: auto; right: -24px; bottom: auto; top: 50%; transform: translateY(-50%); }
}
.tm-flux__centre p { display: block; margin: 0; padding: 14px 18px; border: 2px dashed var(--pixim-rouge); text-align: center; font-weight: 700; color: var(--pixim-noir); }
.tm-offre-schema-titre { color: var(--pixim-noir); }

/* chronologie des quatre semaines */
.tm-chrono .el-item { position: relative; padding-left: 44px; max-width: 52em; }
.tm-chrono .el-item::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; background: var(--pixim-rouge); }
.tm-chrono .el-item::after { content: ""; position: absolute; left: 8px; top: 30px; bottom: -40px; width: 2px; background: rgba(196, 40, 28, .3); }
.tm-chrono > .uk-grid > div:last-child .el-item::after { display: none; }
.tm-chrono .el-meta { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pixim-rouge); }
.tm-chrono__chapo { font-size: 1.125rem; font-weight: 600; color: var(--pixim-noir); }
.tm-chrono__objectif { display: inline-block; margin-top: .4em; padding: .6em .9em; background: var(--pixim-blanc); border-left: 3px solid var(--pixim-rouge); }

/* piliers de la maîtrise des données */
.tm-piliers .el-meta { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pixim-rouge); }
.tm-piliers__liste { list-style: none; margin: 0; padding: 0; }
.tm-piliers__liste li { position: relative; padding-left: 16px; }
.tm-piliers__liste li + li { margin-top: 8px; }
.tm-piliers__liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--pixim-rouge); }

/* confidentialité : encadré identifiable (cadre sur le conteneur de la section, gouttières de la grille intactes) */
.tm-offre-confidentialite > .uk-container { padding-top: 32px; padding-bottom: 32px; background: var(--pixim-blanc); border: 2px solid var(--pixim-noir); }
@media (min-width: 960px) { .tm-offre-confidentialite > .uk-container { padding: 56px 48px; } }
.tm-offre-cadenas { color: var(--pixim-rouge); }
.tm-offre-engagements { list-style: none; margin: 1em 0; padding: 0; }
.tm-offre-engagements li { position: relative; padding: 10px 0 10px 32px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.tm-offre-engagements li::before { content: "✓"; position: absolute; left: 0; top: 9px; font-weight: 700; color: var(--pixim-rouge); }

/* valeurs de l'accompagnement */
.tm-offre-valeurs { display: flex; flex-wrap: wrap; gap: 8px; margin: 1em 0 0; padding: 0; list-style: none; }
.tm-offre-valeurs li { padding: .4em .85em; border: 1px solid var(--pixim-noir); font-size: .875rem; font-weight: 600; }

/* accompagnant */
.tm-offre-portrait img { width: 100%; max-width: 360px; height: auto; }
.tm-offre-nom { margin: 0 0 1em; font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--pixim-noir); }
.tm-offre-nom span { display: block; margin-top: .2em; font-family: "Pixim Text", sans-serif; font-size: 1rem; font-weight: 600; color: var(--pixim-gris); }

/* encart final */
.tm-offre-prix { margin: 0; font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: 3rem; line-height: 1; color: var(--pixim-blanc); }
.tm-offre-inclus { list-style: none; margin: .6em 0 1em; padding: 0; }
.tm-offre-inclus li { position: relative; padding: 7px 0 7px 28px; }
.tm-offre-inclus li::before { content: "✓"; position: absolute; left: 0; top: 6px; font-weight: 700; color: var(--pixim-rouge); }
.tm-offre-exclus { font-size: .875rem; opacity: .75; }
.tm-offre-signature p { margin: 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .25); font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: 1.25rem; }
.tm-offre-faq .uk-accordion-title { font-size: 1.125rem; font-weight: 600; }
.tm-offre-final { border-bottom: 1px solid rgba(255, 255, 255, .2); }   /* séparé du pied de page, noir lui aussi */

/* catégorie de l'offre sous le nom (Déclic IA) */
.tm-offre-categorie p { margin: 0; font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pixim-gris); }
.uk-section-secondary .tm-offre-categorie p { color: rgba(255, 255, 255, .7); }

/* états des offres (15/10) : message d'état, passerelle discrète vers l'offre complémentaire */
.tm-offre-statut { display: inline-block; margin: .9em 0 0; padding: .55em 1em; border-left: 4px solid var(--pixim-rouge); background: var(--pixim-blanc); font-weight: 700; color: var(--pixim-noir); }
.uk-section-secondary .tm-offre-statut { background: rgba(255, 255, 255, .08); color: var(--pixim-blanc); }
.tm-offre-passerelle { padding-top: 28px; border-top: 1px solid rgba(0, 0, 0, .12); }
.tm-offre-passerelle h3 { margin: 0 0 .4em; font-size: 1.125rem; }
.tm-offre-passerelle p { margin: 0; max-width: 46em; color: var(--pixim-gris); }

/* encart d'offre du diagnostic (carte blanche, filet de la famille) */
.tm-offre-carte { padding-top: 32px; padding-bottom: 32px; background: var(--pixim-blanc); border-top: 4px solid var(--tm-famille, var(--pixim-rouge)); }
@media (min-width: 960px) { .tm-offre-carte { padding: 40px 40px 40px calc(40px + var(--tm-gouttiere, 0px)); } }
.tm-offre-carte__titre { margin: 0; font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: 1.375rem; color: var(--pixim-noir); }
.tm-offre-carte__prix { margin: .3em 0 0; font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: 2.5rem; line-height: 1.1; color: var(--pixim-noir); }
.tm-offre-carte__prix span { display: block; margin-top: .2em; font-family: "Pixim Text", sans-serif; font-size: 1rem; font-weight: 600; color: var(--pixim-gris); }
.tm-offre-carte .tm-offre-badge p { border-color: var(--tm-famille-texte); color: var(--tm-famille-texte); }

/* tarif de lancement : tarif public barré, offre de lancement mise en avant (16/10) */
.tm-offre-tarif { margin: .4em 0 0; }
.tm-offre-tarif p { margin: 0; }
.tm-offre-tarif__public { font-size: 1rem; font-weight: 600; color: var(--pixim-gris); }
.tm-offre-tarif__public s { text-decoration-thickness: 2px; }
.tm-offre-tarif__lancement { margin-top: .15em !important; font-family: "Pixim Display", "Arial Black", sans-serif; font-weight: 700; font-size: 2.25rem; line-height: 1.1; color: var(--pixim-noir); }
.tm-offre-tarif__lancement span { display: block; margin-bottom: .15em; font-family: "Pixim Text", sans-serif; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-famille-texte, var(--pixim-rouge)); }
/* second bouton (renvoi vers l'encart du tarif) : lisible sur fond clair et foncé */
.tm-offre-appel .uk-button-default { line-height: 50px; }
/* boutons d'appel : libellés longs sur deux lignes sans hauteur démesurée (mobile) */
.tm-offre-appel .uk-button { line-height: 1.35; padding-top: 15px; padding-bottom: 15px; white-space: normal; }

/* diagnostic : chiffres clés de l'entretien approfondi et analyse mise en valeur (16/10) */
.tm-offre-chiffres { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 1.2em 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .tm-offre-chiffres { grid-template-columns: repeat(3, 1fr); } }
.tm-offre-chiffres li { padding: 20px 22px; background: var(--pixim-blanc); border-top: 4px solid var(--tm-famille, var(--pixim-rouge)); box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.tm-offre-chiffres strong { display: block; font-family: "Pixim Display", "Arial Black", sans-serif; font-size: 1.6rem; line-height: 1.15; color: var(--pixim-noir); }
.tm-offre-chiffres span { display: block; margin-top: .35em; font-size: .9375rem; color: var(--pixim-gris); }
.tm-offre-sous-titre { margin: 1.8em 0 0; font-size: 1.25rem; }
.tm-offre-analyse { margin: 0; padding: 22px 26px; background: var(--tm-famille, var(--pixim-rouge)); color: var(--pixim-blanc); font-size: 1.125rem; line-height: 1.55; }
.tm-offre-analyse strong { color: inherit; }
.tm-famille__texte:has(.tm-offre-chiffres) { max-width: none; }   /* chiffres clés sur toute la largeur */
.tm-famille__texte:has(.tm-offre-chiffres) .tm-offre-chapo { max-width: 40em; }

/* menu : « Offre spéciale IA » en rouge, avec le pixel de la charte qui pulse (16/10).
   3 pulsations (< 5 s, WCAG 2.2.2), aucune animation si l'utilisateur limite les animations. */
/* menu mobile (accordéon) : YOOtheme n'applique pas la classe de lien aux intitulés → intitulé dont le sous-menu mène à Déclic IA */
.tm-menu-offre, .tm-menu-offre:hover, .uk-active > .tm-menu-offre,
.js-accordion:has(> .uk-nav-sub a[href$="/declic-ia"]) > a { color: var(--pixim-rouge) !important; }
.js-accordion:has(> .uk-nav-sub a[href$="/declic-ia"]) > a::after,
.tm-menu-offre::after { content: ""; display: inline-block; flex: none; width: 7px; height: 7px; margin-left: 8px; background: var(--pixim-rouge); vertical-align: middle;
    animation: tm-pixel-pulse 1.6s ease-out .8s 3; }
@keyframes tm-pixel-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(196, 40, 28, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(196, 40, 28, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 40, 28, 0); }
}
@media (prefers-reduced-motion: reduce) { .tm-menu-offre::after, .js-accordion:has(> .uk-nav-sub a[href$="/declic-ia"]) > a::after { animation: none; } }