/* Théo De Bergh · effets « Poussière & Impact » (dépôt theoffroadspirit.site, wordpress/assets/effets.css)
 * Chargé par le mu-plugin theo-effets.php ; fichiers voisins copiés par l'étape 12 dans wp-content/uploads/theo/.
 * Calé sur les maquettes docs/charte/maquette-*.png (v3, 30/10/2026 : poussière fine posée sur la photo) : transitions nettes entre sections, photos
 * des en-têtes à fond perdu sur une moitié avec une lisière pulvérisée côté texte, petit trait terre cuite au-dessus
 * des titres, texture de roche discrète sur les aplats. Tout reste sobre ; aucun mouvement si l'appareil le demande.
 * Couleurs : --tos-orange #BF4819 (aplats, sur clair), --tos-accent #D9622F (sur charbon) = étape 27-charte. */
:root {
  --tos-charbon: #151515; --tos-clair: #F4F3EE; --tos-orange: #BF4819; --tos-accent: #D9622F; --tos-gris: #535650;
}

/* ---------- Logo (PNG provisoire) ---------- */
.uk-logo img { height: 42px; width: auto; }
.tm-header-mobile .uk-logo img { height: 34px; }

/* ---------- Grain très léger sur charbon ---------- */
.uk-section-secondary { background-image: url(grain.png); background-size: 240px; }
.uk-section-secondary.tos-heros, .uk-section-secondary.tos-split { background-image: none; }  /* raccord parfait avec la poussière */

/* ---------- Photos d'en-tête à fond perdu (≥ 960 px) ----------
 * .tos-heros : photo dans la dernière colonne, à droite ; .tos-split.tos-photo-gauche : photo dans la première, à gauche. */
.uk-section { position: relative; }
.tos-heros, .tos-split { overflow: hidden; }
@media (min-width: 960px) {
  .tos-heros .uk-container > .uk-grid > div:last-child:has(.el-image):not(:has(.tos-montage)),
  .tos-photo-gauche .uk-container > .uk-grid > div:first-child:has(.el-image):not(:has(.tos-montage)) {
    position: absolute; top: 0; bottom: 0; right: 0; width: 50%; margin: 0 !important; padding: 0 !important;
  }
  .tos-photo-gauche .uk-container > .uk-grid > div:first-child:has(.el-image):not(:has(.tos-montage)) { right: auto; left: 0; }
  /* En-têtes : photo sur les deux tiers, texte sur le tiers gauche (demande de Vincent, 30/10/2026) */
  .tos-heros { --tos-marge: clamp(24px, 5vw, 96px); }
  .tos-heros > .uk-container { max-width: none; padding-left: var(--tos-marge); }
  /* Deux tiers pour la photo, un tiers pour le texte. Les photos de Théo sont presque toutes verticales : la photo nette
     garde un format 4/3 calé à droite (ni zoom ni étirement), et le reste des deux tiers est rempli par la même photo,
     floutée et assombrie (variable --tos-fond posée par effets.js), sous la poussière. Photo horizontale : classe
     tos-photo-paysage sur la section, la photo nette occupe alors tous les deux tiers. */
  .tos-heros .uk-container > .uk-grid > div:last-child:has(.el-image):not(:has(.tos-montage)) { width: 65%; overflow: hidden; }
  .tos-heros .uk-container > .uk-grid > div:first-child { max-width: calc(35vw - var(--tos-marge) - 24px); }
  .tos-heros .uk-container > .uk-grid > div:last-child:has(.el-image):not(:has(.tos-montage))::before {
    content: ""; position: absolute; inset: -30px; z-index: 0; pointer-events: none;
    background: none;   /* 30/10/2026 : plus de double flouté de la photo (effet « fondu de la même image ») ; photo verticale = montage */
  }
  .tos-photo-gauche .uk-container > .uk-grid > div:last-child { margin-left: 52%; }
  .tos-heros .uk-container > .uk-grid > div:last-child .el-image:not(.tos-montage .el-image),
  .tos-photo-gauche .uk-container > .uk-grid > div:first-child .el-image:not(.tos-montage .el-image) {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 8%;
  }
  /* Fondu doux de la photo vers le charbon, côté texte */
  .tos-heros .uk-container > .uk-grid > div:last-child .el-image:not(.tos-montage .el-image) {
    z-index: 1; left: auto; right: 0; width: auto; aspect-ratio: 4 / 3; min-width: 72%; max-width: 100%;
    -webkit-mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 18%, #000 42%); mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 18%, #000 42%);
  }
  .tos-heros.tos-photo-paysage .uk-container > .uk-grid > div:last-child .el-image:not(.tos-montage .el-image) {
    left: 0; width: 100%; aspect-ratio: auto; object-position: center 62%;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 14%); mask: linear-gradient(90deg, transparent 0, #000 14%);
  }
  .tos-photo-gauche .uk-container > .uk-grid > div:first-child .el-image:not(.tos-montage .el-image) {
    -webkit-mask: linear-gradient(270deg, transparent 0, #000 14%); mask: linear-gradient(270deg, transparent 0, #000 14%);
  }
  /* Poussière levée PAR-DESSUS la photo : fumée charbon, voile gris, grains très fins (poussiere-lisiere-*.webp) */
  .tos-heros .uk-container > .uk-grid > div:last-child:has(.el-image):not(:has(.tos-montage))::after,
  .tos-photo-gauche .uk-container > .uk-grid > div:first-child:has(.el-image):not(:has(.tos-montage))::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: url(poussiere-lisiere-gauche.webp) left center / auto 100% no-repeat;
  }
  .tos-photo-gauche .uk-container > .uk-grid > div:first-child:has(.el-image):not(:has(.tos-montage))::after { background: url(poussiere-lisiere-droite.webp) right center / auto 100% no-repeat; }
}
/* Variantes de poussière (même principe, grain et inclinaison différents d'une page à l'autre) :
 * .tos-poussiere-inclinee : lisière penchée, plus loin sur la photo en haut ; .tos-poussiere-projection : grains plus
 * gros projetés comme par une roue, lisière penchée dans l'autre sens. Sans classe : poussière fine, lisière droite. */
@media (min-width: 960px) {
  .tos-heros.tos-poussiere-inclinee .uk-grid > div:last-child:has(.el-image):not(:has(.tos-montage))::after { background-image: url(poussiere-lisiere-inclinee.webp); }
  .tos-heros.tos-poussiere-projection .uk-grid > div:last-child:has(.el-image):not(:has(.tos-montage))::after { background-image: url(poussiere-lisiere-projection.webp); }
  .tos-photo-gauche.tos-poussiere-inclinee .uk-grid > div:first-child:has(.el-image):not(:has(.tos-montage))::after { background-image: url(poussiere-lisiere-inclinee-droite.webp); }
  .tos-photo-gauche.tos-poussiere-projection .uk-grid > div:first-child:has(.el-image):not(:has(.tos-montage))::after { background-image: url(poussiere-lisiere-projection-droite.webp); }
}
/* Téléphone : la photo passe sous le texte, d'un bord à l'autre ; la poussière descend du texte sur la photo */
@media (max-width: 959px) {
  .tos-heros .uk-container > .uk-grid > div:has(.el-image):not(:has(.tos-montage)), .tos-split .uk-container > .uk-grid > div:has(.el-image):not(:has(.tos-montage)) { position: relative; }
  .tos-heros:has(.el-image):not(:has(.tos-montage)) { padding-bottom: 0; }   /* la photo touche la section suivante */
  .tos-split:has(.el-image):not(:has(.tos-montage)) { padding-top: 0; }
  .tos-heros .uk-container > .uk-grid > div:has(.el-image):not(:has(.tos-montage)) > *, .tos-split .uk-container > .uk-grid > div:has(.el-image):not(:has(.tos-montage)) > * { margin-top: 0; }
  .tos-heros .el-image:not(.tos-montage .el-image), .tos-split .el-image:not(.tos-montage .el-image) { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); display: block; }
  .tos-heros .el-image:not(.tos-montage .el-image) { -webkit-mask: linear-gradient(180deg, transparent 0, #000 18%); mask: linear-gradient(180deg, transparent 0, #000 18%); }
  .tos-split .el-image:not(.tos-montage .el-image) { -webkit-mask: linear-gradient(0deg, transparent 0, #000 18%); mask: linear-gradient(0deg, transparent 0, #000 18%); }
  .tos-heros .uk-container > .uk-grid > div:has(.el-image):not(:has(.tos-montage))::after, .tos-split .uk-container > .uk-grid > div:has(.el-image):not(:has(.tos-montage))::after {
    content: ""; position: absolute; left: 50%; width: 100vw; margin-left: -50vw; top: 0; aspect-ratio: 4 / 3; pointer-events: none;
    background: url(poussiere-lisiere-haut.webp) center top / 100% auto no-repeat;
  }
  .tos-split .uk-container > .uk-grid > div:has(.el-image):not(:has(.tos-montage))::after { top: auto; bottom: 0; transform: scaleY(-1); }
}

/* ---------- Reliefs discrets à droite des aplats (comme sur les maquettes) ----------
 * terre cuite : crêtes sombres (silhouette générée, matière de roche) ; charbon : roche et névés en gris. */
.uk-section-primary::after,
.uk-section-secondary:not(.tos-heros)::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: url(texture-montagne.webp) right bottom / auto 100% no-repeat; opacity: .28;
}
.uk-section-primary::after { background-image: url(texture-cretes.webp); opacity: .38; }
/* Aucun bord visible : la texture s'efface vers la gauche, le haut et le bas de la section */
.uk-section-primary::after, .uk-section-secondary:not(.tos-heros)::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 75%), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 35%, #000 75%), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect;
}
/* Section avec photo à gauche : la texture ne commence qu'après la poussière */
.tos-split::after { left: 50%; }
/* Pied de page : uni (pas de texture) */
[class*="theo-pied"]::after { content: none !important; }
.uk-section-primary > .uk-container, .uk-section-secondary:not(.tos-heros):not(.tos-split) > .uk-container { position: relative; z-index: 1; }
.tos-split > .uk-container { position: static; }
.tos-split .uk-container > .uk-grid > div { z-index: 1; }
.tos-split .uk-container > .uk-grid > div:last-child { position: relative; }

/* ---------- Titres : petit trait incliné au-dessus (terre cuite ; charbon sur l'aplat terre cuite) ---------- */
.uk-section h2[class*="uk-heading"]::before, .uk-section h2.uk-h1::before {
  content: ""; display: block; width: 34px; height: 5px; margin-bottom: .5em; background: var(--tos-orange);
  transform: skewX(-28deg); transform-origin: left bottom;
}
.uk-section-secondary h2::before { background: var(--tos-accent) !important; }
.uk-section-primary h2::before { background: var(--tos-charbon) !important; }
.uk-text-center h2::before, h2.uk-text-center::before { margin-inline: auto; }

/* ---------- Signature des en-têtes (choix de Vincent, 30/10/2026 : options 3 et 5) ----------
 * Chevrons de vitesse « /// » devant le sur-titre des en-têtes seulement ; ailleurs le trait au-dessus du titre suffit (Vincent : pas les deux).
 * Option par page : classe tos-titre-filet sur la section d'en-tête = filet vertical à la place des chevrons. */
.tos-heros .uk-h6.uk-text-primary::before { content: "///"; display: inline-block; margin-right: .6em; font-style: italic; font-weight: 800; letter-spacing: -.08em; }
.tos-titre-filet .uk-container > .uk-grid > div:first-child :is(.uk-h6, h1, .uk-h2) {
  border-left: 4px solid var(--tos-accent); padding-left: 22px; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: .3em;
}
.tos-titre-filet .uk-container > .uk-grid > div:first-child .uk-h6 { padding-top: 0; }
.tos-titre-filet .uk-h6.uk-text-primary::before { content: none; }
.tos-titre-filet .uk-container > .uk-grid > div:first-child .uk-h2 { padding-bottom: .15em; }
.tos-titre-filet .uk-container > .uk-grid > div:first-child :is(.uk-h6, h1, .uk-h2) + :not(.uk-h6, h1, .uk-h2) { margin-top: 24px !important; }
@media (min-width: 960px) {
  .tos-titre-filet .uk-container > .uk-grid > div:first-child :is(.uk-h6, h1, .uk-h2) { margin-left: -26px; }
}

/* ---------- Boutons sur l'aplat terre cuite : jamais ton sur ton (forcé ici, quel que soit le mode inversé de Trek) ---------- */
.uk-section-primary .uk-button-secondary, .uk-section-primary .uk-button-primary:not(.tos-form .uk-button) { background-color: #151515 !important; color: #F4F3EE !important; border-color: #151515 !important; }
.uk-section-primary .uk-button-secondary:hover, .uk-section-primary .uk-button-primary:not(.tos-form .uk-button):hover { background-color: #2E2F2C !important; }
.uk-section-primary .uk-button-default { background: transparent !important; color: #F4F3EE !important; border: 1px solid #F4F3EE !important; }
/* Dates des bandeaux « prochain départ » : sur une seule ligne */
.uk-section-primary .uk-heading-medium:not(h2) { white-space: nowrap; }
/* Boutons serrés : jamais coupés sur plusieurs lignes */
.uk-button { white-space: nowrap; }

/* ---------- Rangs : chiffre en terre cuite, catégorie dans la couleur du texte ---------- */
.tos-chiffre { color: var(--tos-orange); }  /* taille : celle du style de titre choisi dans l'élément */
.uk-section-secondary .tos-chiffre { color: var(--tos-accent); }

/* ---------- Boutons : flèche, comme sur les maquettes ---------- */
.uk-section .uk-button-primary::after, .uk-section .uk-button-default::after, .uk-section .uk-button-secondary::after {
  content: "\2192"; display: inline-block; margin-left: .6em; transition: transform .2s ease;
}
.tos-form .uk-button::after { content: none !important; }
.uk-section .uk-button:hover::after { transform: translateX(3px); }

/* ---------- Fiche vélo, partenaires ---------- */
/* Élément Liste (classe tos-fiche) : points affichés en pastilles ; taille du texte = celle de la charte. */
:is(ul.tos-fiche, .tos-fiche ul) { list-style: none; padding: 0; margin: 0 0 1em; display: flex; flex-wrap: wrap; gap: 8px; }
.tos-fiche li { margin: 0 !important; font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .06em;
  padding: .4em .85em; border: 1px solid currentColor; border-radius: 8px; }
/* Élément Image (classe tos-logo-plaque) : logo fourni sur fond blanc, posé sur une plaque blanche avec marge et ombre. */
.tos-logo-plaque img { box-sizing: content-box; background: #fff; padding: 10px 14px; border-radius: 4px; box-shadow: 0 10px 26px -18px rgba(21, 21, 21, .45); }


/* ---------- Calendrier : ligne de temps et prochain départ ---------- */
.tos-ligne-temps .tos-course { position: relative; }
@media (min-width: 960px) {
  .tos-ligne-temps > .uk-container { position: relative; }
  .tos-ligne-temps > .uk-container::before {
    content: ""; position: absolute; left: 8px; top: 9rem; bottom: 0; width: 2px; background: var(--tos-orange);
    transform-origin: top; transform: scaleY(var(--tos-trace, 1)); opacity: .9;
  }
  .tos-ligne-temps .tos-course::before {
    content: ""; position: absolute; left: -32px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
    background: var(--tos-clair); border: 2px solid var(--tos-orange); box-sizing: border-box;
  }
  .tos-ligne-temps > .uk-container { padding-left: 64px; }
  .tos-ligne-temps > .uk-container::before { left: 37px; }
  .tos-ligne-temps .tos-a-venir::before { background: var(--tos-orange); }
}

/* ---------- Partenaires : « Votre place » en check-list ; formule choisie dans le formulaire ---------- */
.tos-checklist .el-item { position: relative; padding-left: 40px; }
.tos-checklist .el-item::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border: 2px solid var(--tos-accent); border-radius: 50%; box-sizing: border-box;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23D9622F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
#formules .el-item { transition: box-shadow .35s ease, transform .35s ease; border-radius: 8px; }
#formules .el-item.tos-choisi { box-shadow: 0 0 0 2px var(--tos-orange), 0 18px 40px -22px rgba(21, 21, 21, .55); }
#formules .el-item.tos-choisi .el-title::after { content: " ✓"; color: var(--tos-orange); }

/* ---------- Canvas de la poussière qui retombe ---------- */
.tos-retombee { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* ---------- Récits de course (articles) : lecture confortable, fin d'article ---------- */
.tos-article .uk-article, .tos-article article { max-width: 760px; margin-inline: auto; }
.tos-article .uk-article-title, .tos-article article h1 { letter-spacing: .01em; }
.tos-article .uk-article-title::after, .tos-article article h1::after {
  content: ""; display: block; width: 34px; height: 5px; margin-top: .35em; background: var(--tos-orange); transform: skewX(-28deg);
}
.tos-article article p { line-height: 1.7; }
.tos-article article img { border-radius: 4px; }
.tos-fin-article { display: grid; gap: 16px; }
.tos-fin-depart, .tos-fin-partenaire { padding: 28px 32px; border-radius: 8px; }
.tos-fin-depart { background: var(--tos-charbon); color: var(--tos-clair); background-image: url(grain.png); }
.tos-fin-depart .uk-h6 { color: var(--tos-accent); margin: 0 0 4px; }
.tos-fin-depart .uk-h3, .tos-fin-depart p { color: var(--tos-clair); }
.tos-fin-depart .uk-button { color: var(--tos-clair); border-color: var(--tos-clair); }
.tos-fin-partenaire { background: var(--tos-orange); color: var(--tos-clair); }
.tos-fin-partenaire .uk-h3, .tos-fin-partenaire p { color: var(--tos-clair); }
.tos-fin-partenaire .uk-button-primary { background: var(--tos-charbon); color: var(--tos-clair); }
.tos-fin-retour a { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Cadres photo et vidéo (planche du 30/10/2026, choix de Vincent) ----------
 * Classe posée sur l'élément Image ou Vidéo dans YOOtheme (Advanced › Class). Sur charbon, la terre cuite s'éclaircit.
 *  tos-cadre-passe  (A) passe-partout, plutôt sur fond clair      tos-cadre-bloc    (B) aplat décalé derrière
 *  tos-cadre-tirage (D) tirage penché avec adhésif                 tos-cadre-viseur  (E) coins de cadrage
 *  tos-cadre-poudre (F) bords qui se dissolvent en poussière       tos-cadre-trait   (G) contour décalé
 * Les décors natifs de Trek restent disponibles : réglage « Box Decoration » de l'élément Image. */
[class*="tos-cadre-"] { --cadre: var(--tos-orange); --cadre-fond: var(--tos-clair); width: 100%; max-width: 100%; margin-inline: auto; position: relative; box-sizing: border-box; }
.tos-cadre-viseur, .tos-cadre-tirage { width: fit-content; }
.uk-section-secondary [class*="tos-cadre-"] { --cadre: var(--tos-accent); --cadre-fond: var(--tos-charbon); }
.uk-section-primary [class*="tos-cadre-"] { --cadre: var(--tos-charbon); --cadre-fond: var(--tos-orange); }
/* Photos encadrées : toujours la largeur de leur colonne, recadrées en 4/3 (une photo très verticale ne devient plus une vignette) */
[class*="tos-cadre-"] img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; max-width: 100%; box-sizing: border-box; }
/* Densité : une photo encadrée ne dépasse jamais 400 px de haut (règle « pas de grandes sections ») */
[class*="tos-cadre-"] img { max-height: 340px; }
.tos-cadre-tirage img { width: min(100%, 520px); }
/* Cadrage réglable par photo (Advanced › Class, en plus du cadre) : sujet en haut, au centre ou en bas de la photo */
.tos-cadrage-haut img { object-position: center 6% !important; }
.tos-cadrage-bas img { object-position: center 88% !important; }
.tos-cadrage-trois-quarts img { object-position: center 70% !important; }
.tos-format-portrait img { aspect-ratio: 4 / 5 !important; max-height: 440px; }
[class*="tos-cadre-"] :is(video, iframe) { display: block; max-height: 480px; width: auto; height: auto; max-width: 100%; }
/* A — passe-partout */
.tos-cadre-passe :is(img, video) { padding: 12px; background: #fff; box-shadow: 0 18px 40px -22px rgba(21, 21, 21, .5); }
.uk-section-secondary .tos-cadre-passe :is(img, video) { background: #262624; }
/* B — bloc décalé */
.tos-cadre-bloc { margin-bottom: 22px; }
.tos-cadre-bloc :is(img, video) { box-shadow: 20px 20px 0 0 var(--cadre); }
/* G — trait décalé (l'ombre intérieure prend la couleur du fond pour ne garder qu'un contour) */
.tos-cadre-trait { margin-bottom: 18px; }
.tos-cadre-trait :is(img, video) { box-shadow: 16px 16px 0 -2px var(--cadre-fond), 16px 16px 0 0 var(--cadre); }
/* D — tirage penché, bout d'adhésif */
.tos-cadre-tirage { padding-top: 6px; }   /* pas d'adhésif : Vincent n'aime pas */
.tos-cadre-tirage :is(img, video) { padding: 10px 10px 38px; background: #fff; transform: rotate(-2.2deg); box-shadow: 0 20px 40px -20px rgba(21, 21, 21, .6); }
/* E — viseur : deux coins de cadrage */
.tos-cadre-viseur { padding: 14px; }
.tos-cadre-viseur .tos-voile { inset: 14px; }
.tos-cadre-viseur::before, .tos-cadre-viseur::after { content: ""; position: absolute; width: 34px; height: 34px; border: 3px solid var(--cadre); pointer-events: none; }
.tos-cadre-viseur::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tos-cadre-viseur::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
/* F — bord poudré */
.tos-cadre-poudre :is(img, video) { -webkit-mask: url(masque-poudre.webp) center / 100% 100% no-repeat; mask: url(masque-poudre.webp) center / 100% 100% no-repeat; }
/* Récits de course : les photos des articles en tirage penché */
.tos-article article .wp-block-image img, .tos-article article p > img { padding: 10px 10px 34px; background: #fff; transform: rotate(-1.5deg); box-shadow: 0 18px 36px -20px rgba(21, 21, 21, .55); }
@media (prefers-reduced-motion: no-preference) {
  .tos-cadre-tirage :is(img, video) { transition: transform .35s ease; }
  .tos-cadre-tirage:hover :is(img, video) { transform: rotate(0); }
  .tos-cadre-viseur::before, .tos-cadre-viseur::after { transition: width .3s ease, height .3s ease; }
  .tos-cadre-viseur:hover::before, .tos-cadre-viseur:hover::after { width: 48px; height: 48px; }
}

/* ---------- Pied de page v4 : compact, sans soulignement, poussière blanche animée (canvas posé par effets.js) ---------- */
/* v8 : plus aucune taille ni couleur de texte imposée ici ; tout vient des réglages YOOtheme (charte, étape 27). */
[class*="theo-pied"] { position: relative; overflow: hidden; }
[class*="theo-pied"] > .uk-container { position: relative; z-index: 1; }
.tos-pied-poussiere { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---------- Cartes de course (élément Grille, classe tos-cartes) : la photo seule remplit sa carte ---------- */
.tos-cartes div.el-item:not(:has(.el-title)) { padding: 0; overflow: hidden; }
.tos-cartes div.el-item:not(:has(.el-title)) :is(picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.tos-cartes .el-meta { margin-top: 6px !important; }
.tos-cartes .el-content p { margin: 0; }

/* ---------- Tous les panneaux en grille (Partenaires, Parcours, Accueil…) au format carte, comme Résultats ----------
 * Validé par Vincent le 30/10/2026 (« clair, pas trop haut, on lit bien »). */
.tos-cartes div.el-item {
  height: 100%; box-sizing: border-box; padding: 18px 20px 16px; background: #fff; border-left: 4px solid var(--tos-orange); border-radius: 4px;
  box-shadow: 0 10px 26px -20px rgba(21, 21, 21, .45);
}
.uk-section-secondary .tos-cartes div.el-item { background: #1F1F1E; border-left-color: var(--tos-accent); box-shadow: none; }
.uk-section-primary .tos-cartes div.el-item { background: rgba(21, 21, 21, .14); border-left-color: var(--tos-charbon); box-shadow: none; }
.tos-cartes div.el-item .el-title { margin-top: 0; }
.tos-cartes div.el-item .el-content { margin-top: 8px; }
.tos-cartes div.el-item .el-content p { margin: 0; }
.tos-cartes div.el-item { display: flex; flex-direction: column; }
.tos-cartes div.el-item > :last-child:has(.el-link, .uk-button), .tos-cartes div.el-item > .el-link { margin-top: auto !important; padding-top: 14px; }   /* boutons alignés en bas des cartes */
/* la grille garde les cartes à la même hauteur ; plus de filets verticaux entre cartes */
.tos-cartes .uk-grid-divider > :not(.uk-first-column)::before { display: none; }
.uk-section.tos-checklist div.el-item { padding-left: 56px; }
.uk-section.tos-checklist div.el-item::before { left: 18px; top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  /* (effet de soulèvement des cartes au survol retiré le 30/10/2026, demande de Vincent) */
}

/* ---------- Liens : jamais soulignés (règle de Vincent pour tous ses sites, 30/10/2026) ----------
 * Un lien se signale par sa couleur et son survol, pas par un soulignement. Exception possible au cas par cas. */
a, a:hover, .uk-link, .uk-link:hover, .el-link, .el-title a, .uk-article a, .tos-partenaires a { text-decoration: none !important; }
.uk-section-default p a, .uk-section-muted p a, .tos-article article p a { color: var(--tos-orange); font-weight: 500; }
.uk-section-secondary p a, .uk-section-primary p a { color: #F08A55; font-weight: 500; }
.uk-section p a:hover { color: inherit; }
.tos-partenaires a { color: inherit; }

/* ---------- Montage de photos verticales (sections photo + texte) ----------
 * Plusieurs photos portrait côte à côte remplissent la moitié de section sans agrandissement ni flou
 * (une seule photo portrait étirée sur une zone paysage devenait floue). HTML : theo_montage() (scripts/lib/theo.php). */
/* La classe peut se trouver sur la grille elle-même ou sur son conteneur, selon le gabarit YOOtheme : les deux cas sont couverts.
 * Filet charbon de 6 px entre les photos (fond de la section visible dans l'espace). */
.tos-montage { height: 100%; min-height: 300px; }
.tos-montage.uk-grid, .tos-montage .uk-grid { height: 100%; margin: 0 !important; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-rows: 100%; gap: 6px; }
:is(.tos-montage.uk-grid, .tos-montage .uk-grid) > * { width: auto !important; padding: 0 !important; margin: 0 !important; min-width: 0; }
.tos-montage .el-item, .tos-montage picture { display: block; height: 100%; }
.tos-montage img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; min-width: 0; }
/* Cadrage par photo (le nom du fichier reste dans l'adresse de l'image générée par YOOtheme) : visage en haut de la photo */
.tos-montage img[src*="portrait-sourire"], .tos-montage img[srcset*="portrait-sourire"] { object-position: center 4%; }
/* Raccords entre les photos (maquettes validées par Vincent le 30/10/2026 : A, B, F ; tirage par montage dans yo_montage) */
/* B · coupe en biais : photos taillées en diagonale (inclinaison du logo TDB), 8 px de charbon entre deux photos */
:is(.tos-raccord-biais.uk-grid, .tos-raccord-biais .uk-grid, .tos-raccord-biais-blanc.uk-grid, .tos-raccord-biais-blanc .uk-grid) { gap: 0; }
:is(.tos-raccord-biais.uk-grid, .tos-raccord-biais .uk-grid, .tos-raccord-biais-blanc.uk-grid, .tos-raccord-biais-blanc .uk-grid) > :not(:last-child) { margin-right: -44px !important; }
:is(.tos-raccord-biais.uk-grid, .tos-raccord-biais .uk-grid, .tos-raccord-biais-blanc.uk-grid, .tos-raccord-biais-blanc .uk-grid) > * { clip-path: polygon(52px 0, 100% 0, calc(100% - 52px) 100%, 0 100%); }
:is(.tos-raccord-biais.uk-grid, .tos-raccord-biais .uk-grid, .tos-raccord-biais-blanc.uk-grid, .tos-raccord-biais-blanc .uk-grid) > :first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 52px) 100%, 0 100%); }
:is(.tos-raccord-biais.uk-grid, .tos-raccord-biais .uk-grid, .tos-raccord-biais-blanc.uk-grid, .tos-raccord-biais-blanc .uk-grid) > :last-child { clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%); }
/* A blanc / B blanc : même filet et même coupe, le joint montre un fond blanc cassé au lieu du charbon */
:is(.tos-raccord-filet-blanc.uk-grid, .tos-raccord-filet-blanc .uk-grid, .tos-raccord-biais-blanc.uk-grid, .tos-raccord-biais-blanc .uk-grid) { background: #F4F3EE; }
/* F · bords en poudre, sur les côtés seulement : le masque est étiré en hauteur pour que ses bords haut et bas sortent de la photo ;
 * les photos se chevauchent un peu pour que les poudres se mêlent. Bords extérieurs nets (fondu du montage côté texte). */
:is(.tos-raccord-poudre.uk-grid, .tos-raccord-poudre .uk-grid) { gap: 0; }
:is(.tos-raccord-poudre.uk-grid, .tos-raccord-poudre .uk-grid) > :not(:last-child) { margin-right: -28px !important; }
:is(.tos-raccord-poudre.uk-grid, .tos-raccord-poudre .uk-grid) > * {
  -webkit-mask: url(masque-poudre.webp) center / 100% 160% no-repeat; mask: url(masque-poudre.webp) center / 100% 160% no-repeat; }
:is(.tos-raccord-poudre.uk-grid, .tos-raccord-poudre .uk-grid) > :first-child { -webkit-mask-position: right center; mask-position: right center; -webkit-mask-size: 125% 160%; mask-size: 125% 160%; }
:is(.tos-raccord-poudre.uk-grid, .tos-raccord-poudre .uk-grid) > :last-child { -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: 125% 160%; mask-size: 125% 160%; }
@media (min-width: 960px) {
  .tos-photo-gauche .uk-container > .uk-grid > div:first-child:has(.tos-montage) {
    position: absolute; top: 0; bottom: 0; left: 0; width: 50%; margin: 0 !important; padding: 0 !important; z-index: 0;
  }
  .tos-photo-gauche .uk-container > .uk-grid > div:first-child:has(.tos-montage) > * { height: 100%; margin: 0 !important; }
  .tos-photo-gauche .tos-montage { -webkit-mask: linear-gradient(270deg, transparent 0, #000 20%); mask: linear-gradient(270deg, transparent 0, #000 20%); }
  .tos-photo-gauche .uk-container > .uk-grid > div:first-child:has(.tos-montage)::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: url(poussiere-lisiere-droite.webp) right center / auto 100% no-repeat;
  }
}
@media (min-width: 960px) {
  /* Montage dans un en-tête : mêmes deux tiers que la photo, poussière par-dessus */
  .tos-heros .uk-container > .uk-grid > div:last-child:has(.tos-montage) {
    position: absolute; top: 0; bottom: 0; right: 0; width: 65%; margin: 0 !important; padding: 0 !important; z-index: 0;
  }
  .tos-heros .uk-container > .uk-grid > div:last-child:has(.tos-montage) > * { height: 100%; margin: 0 !important; }
  .tos-heros .tos-montage { -webkit-mask: linear-gradient(90deg, transparent 0, #000 22%); mask: linear-gradient(90deg, transparent 0, #000 22%); }
  .tos-heros .uk-container > .uk-grid > div:last-child:has(.tos-montage)::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: url(poussiere-lisiere-gauche.webp) left center / auto 100% no-repeat;
  }
  .tos-heros.tos-poussiere-inclinee .uk-container > .uk-grid > div:last-child:has(.tos-montage)::after { background-image: url(poussiere-lisiere-inclinee.webp); }
  .tos-heros.tos-poussiere-projection .uk-container > .uk-grid > div:last-child:has(.tos-montage)::after { background-image: url(poussiere-lisiere-projection.webp); }
}
@media (max-width: 959px) {
  .tos-montage { width: 100vw; margin-left: calc(50% - 50vw); min-height: 300px; height: 300px; }
}

/* ---------- Vidéos : vignette + bouton lecture (effets.js) ---------- */
.tos-video { position: relative; }
.tos-video video { display: block; object-fit: cover; background: #151515; }
.tos-lecture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: 0; padding: 0;
  font: 600 12px Oswald, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #F4F3EE; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.tos-lecture span { width: 76px; height: 76px; border-radius: 50%; background: var(--tos-orange); box-shadow: 0 0 0 8px rgba(191, 72, 25, .3);
  display: block; position: relative; transition: transform .2s ease; }
.tos-lecture span::after { content: ""; position: absolute; left: 30px; top: 23px; border-left: 22px solid #F4F3EE; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.tos-lecture:hover span { transform: scale(1.08); }
/* Libellé « Voir la vidéo » sur une étiquette charbon : lisible quelle que soit la photo (Vincent, 30/10/2026) */
.tos-lecture em { font-style: normal; font-size: 13px; white-space: nowrap; background: rgba(21, 21, 21, .85); color: #F4F3EE; padding: 6px 10px 5px; border-radius: 4px; text-shadow: none; }
.tos-lecture:focus-visible { outline: 3px solid var(--tos-accent); outline-offset: 6px; }
/* voile posé par un élément à part : ::before et ::after servent déjà aux coins du cadre « viseur » */
.tos-voile { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(21,21,21,.45)); }
.tos-video.tos-joue .tos-voile, .tos-video.tos-joue .tos-lecture { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .tos-video:not(.tos-joue) .tos-lecture span { animation: tos-appel 2.4s ease-out infinite; }
  @keyframes tos-appel { 0% { box-shadow: 0 0 0 0 rgba(191, 72, 25, .55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(191, 72, 25, 0); } }
}

/* ---------- Deux sections de même couleur qui se suivent : fin filet de séparation ---------- */
.uk-section-secondary + .uk-section-secondary { border-top: 1px solid rgba(244, 243, 238, .1); }
.uk-section-default + .uk-section-default, .uk-section-muted + .uk-section-muted { border-top: 1px solid #DDDCD5; }

/* ---------- Réseaux sociaux (« Retrouvez-moi ») ---------- */
.tos-reseaux-titre { margin: 0 0 6px !important; font: 600 12px Oswald, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--tos-accent) !important; }
.tos-reseaux ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.tos-reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid rgba(244, 243, 238, .25); color: #F4F3EE !important; transition: background .2s, border-color .2s; }
.tos-reseaux a:hover { background: var(--tos-orange); border-color: var(--tos-orange); }
.tos-reseaux svg { width: 20px; height: 20px; }
.tos-reseaux span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.uk-section-default .tos-reseaux a { color: var(--tos-charbon) !important; border-color: #CFCEC7; }
.uk-section-default .tos-reseaux a:hover { color: #F4F3EE !important; }

/* ---------- Fil Instagram ([theo_instagram], images servies par le site) ---------- */
.tos-insta-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.tos-insta-grille a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #262624; }
.tos-insta-grille img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tos-insta-grille span { position: absolute; inset: auto 0 0 0; padding: 28px 10px 8px; font-size: 12px; line-height: 1.3; color: #F4F3EE;
  background: linear-gradient(transparent, rgba(21,21,21,.85)); opacity: 0; transition: opacity .3s; }
.tos-insta-grille a:hover span, .tos-insta-grille a:focus-visible span { opacity: 1; }
.tos-insta-grille a:hover img { transform: scale(1.05); }
.tos-insta-video::after { content: ""; position: absolute; top: 8px; right: 8px; border-left: 12px solid #F4F3EE; border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.tos-insta-suivre { margin-top: 14px; }

/* ---------- Galerie de vidéos courtes ([theo_videos]) : cartes verticales, compactes ---------- */
.tos-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
/* Peu de vidéos (2 à 4) : cartes de largeur fixe réparties sur toute la ligne, jamais de grand vide à droite. */
.tos-videos:not(:has(> :nth-child(5))) { grid-template-columns: repeat(auto-fit, minmax(170px, 240px)); justify-content: space-evenly; }
.tos-video-carte { margin: 0; }
.tos-videos:has(> :only-child) { grid-template-columns: minmax(0, 240px); justify-content: center; }
.tos-video-boite { position: relative; }
/* Vidéo seule dans une section : cadre au choix ([theo_videos noms="…" cadre="tirage|passe|bloc|trait|viseur"], viseur par défaut),
 * légèrement penchée (sens alterné), redressée au survol et pendant la lecture. */
.tos-videos:has(> :only-child) .tos-video-carte { --pente: -2.5deg; transform: rotate(var(--pente)); transition: transform .35s ease; }
.uk-section:nth-of-type(even) .tos-videos:has(> :only-child) .tos-video-carte { --pente: 2deg; }
.tos-videos .tos-video-carte:hover, .tos-videos .tos-video-carte:focus-within, .tos-videos .tos-video-carte:has(.tos-joue) { --pente: 0deg !important; }
@media (prefers-reduced-motion: reduce) { .tos-videos .tos-video-carte { transition: none; } }
.tos-videos:has(> :only-child) figcaption { margin-top: 10px; }
.tos-video-carte[class*="tos-vcadre-"] .tos-video-boite { --c: var(--tos-orange); }
.uk-section-secondary .tos-video-carte[class*="tos-vcadre-"] .tos-video-boite { --c: var(--tos-accent); }
/* viseur */
.tos-vcadre-viseur .tos-video-boite { padding: 12px; }
.tos-vcadre-viseur .tos-voile { inset: 12px; }
.tos-vcadre-viseur .tos-video-boite::before, .tos-vcadre-viseur .tos-video-boite::after {
  content: ""; position: absolute; width: 30px; height: 30px; border: 3px solid var(--c); pointer-events: none; z-index: 3; }
.tos-vcadre-viseur .tos-video-boite::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tos-vcadre-viseur .tos-video-boite::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
/* tirage scotché */
.tos-vcadre-tirage .tos-video-boite { padding: 10px 10px 34px; background: #fff; box-shadow: 0 18px 36px -18px rgba(21,21,21,.55); }
.tos-vcadre-tirage .tos-voile { inset: 10px 10px 34px; }
/* passe-partout */
.tos-vcadre-passe .tos-video-boite { padding: 12px; background: #fff; box-shadow: 0 18px 40px -22px rgba(21,21,21,.5); }
.uk-section-secondary .tos-vcadre-passe .tos-video-boite { background: #262624; }
.tos-vcadre-passe .tos-voile { inset: 12px; }
/* bloc décalé */
.tos-vcadre-bloc .tos-video-boite { margin: 0 16px 16px 0; }
.tos-vcadre-bloc video { box-shadow: 16px 16px 0 0 var(--c); }
/* trait décalé */
.tos-vcadre-trait .tos-video-boite { margin: 0 14px 14px 0; }
.tos-vcadre-trait .tos-video-boite::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--c); z-index: -1; pointer-events: none; }
.tos-vcadre-trait .tos-video-boite { isolation: isolate; }
/* Photos encadrées penchées (classe tos-penche sur l'image, sens alterné), redressées au survol */
.tos-penche img { transform: rotate(-1.8deg); transition: transform .35s ease; }
.uk-section:nth-of-type(even) .tos-penche img { transform: rotate(1.6deg); }
.tos-penche:hover img { transform: none !important; }
.tos-video-carte video { width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 420px; object-fit: cover; border-radius: 4px; background: #151515; display: block; }
.tos-video-carte figcaption { margin-top: 6px; font: 600 12px Oswald, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--tos-gris); }
.uk-section-secondary .tos-video-carte figcaption { color: #A5AAA5; }
.tos-video-carte .tos-lecture span { width: 54px; height: 54px; }
.tos-video-carte .tos-lecture span::after { left: 21px; top: 15px; border-left-width: 17px; border-top-width: 12px; border-bottom-width: 12px; }
.tos-video-carte .tos-lecture { font-size: 13px; }

/* ---------- Deux à trois sections visibles par écran (Vincent, 30/10/2026) ----------
 * En-têtes photo : 420 px de haut au maximum ; vidéos et photos de section bornées ; titres et paragraphes resserrés. */
@media (min-width: 960px) {
  .tos-heros { max-height: 420px; }
  .tos-heros.uk-section { padding-top: 40px; padding-bottom: 40px; }   /* en-têtes : hauteur fixe inchangée, la marge des autres sections passe à 56 px */
  .tos-heros.tos-heros-accueil { max-height: 560px; }
  /* Hauteur fixe des en-têtes (Vincent, 30/10/2026 : « plus rien n'est homogène ») : même hauteur sur toutes les pages,
   * quelle que soit la longueur du texte ; l'accueil un peu plus haut. Texte centré verticalement. */
  .tos-heros > .uk-container > .uk-grid { min-height: 320px; align-items: center; }
  .tos-heros.tos-heros-accueil > .uk-container > .uk-grid { min-height: 440px; }   /* exception validée : l'accueil garde nom, accroche, texte et boutons visibles */
  .tos-heros > .uk-container { padding-top: 0; }
  .tos-video-carte video { max-height: 340px; }
  .tos-videos:has(> :only-child) { grid-template-columns: minmax(0, 200px); }
}
.uk-section h2 { margin-bottom: .35em; }
.uk-section .uk-margin-medium-top, .uk-section .uk-margin-medium { margin-top: 20px !important; }
.uk-section .el-item p:last-child, .uk-section .uk-text-large + * { margin-bottom: 0; }

/* ---------- Titres et chapeaux serrés (Vincent : « les titres et leurs espacements prennent la moitié de l'écran ») ---------- */
.uk-section h1, .uk-section h2, .uk-section .uk-h1, .uk-section .uk-h2 { line-height: 1.02; margin-top: 0 !important; margin-bottom: .25em !important; }
.uk-section h2[class*="uk-heading"]::before, .uk-section h2.uk-h1::before { height: 4px; width: 28px; margin-bottom: .3em; }
.uk-section .uk-h6 { margin-bottom: 2px !important; }
.uk-section .uk-text-large { line-height: 1.45; margin-top: 4px !important; }
.uk-section .el-content.uk-text-large, .uk-section p.uk-text-large { margin-bottom: 0; }
.uk-section > .uk-container > .uk-grid + .uk-grid, .uk-section > .uk-container > * + .uk-grid-margin { margin-top: 16px !important; }
.uk-section [class*="uk-margin-medium"] { margin-top: 16px !important; }
.uk-section [class*="uk-margin-large"] { margin-top: 24px !important; }
/* Titre de section centré + chapeau (ex. « Parlons du projet ») : sur une seule bande compacte */
.uk-section .uk-text-center h2 + .uk-text-large, .uk-section h2.uk-text-center + * { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- Barre de lecture (fine) ---------- */
.tos-progression {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 1100; pointer-events: none;
  background: var(--tos-accent); transform-origin: left; transform: scaleX(0);
}

/* ================= Mouvement discret (si l'appareil ne demande pas de le réduire) ================= */
@media (prefers-reduced-motion: no-preference) {
  /* En-tête : textes qui montent doucement ; photo intacte (affichage le plus rapide possible) */
  .tos-heros .uk-container > .uk-grid > div:first-child > * { animation: tos-monte .7s ease-out both; }
  .tos-heros .uk-container > .uk-grid > div:first-child > *:nth-child(2) { animation-delay: .08s; }
  .tos-heros .uk-container > .uk-grid > div:first-child > *:nth-child(3) { animation-delay: .16s; }
  .tos-heros .uk-container > .uk-grid > div:first-child > *:nth-child(n+4) { animation-delay: .24s; }
  @keyframes tos-monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* Apparition au défilement (classes posées par effets.js, jamais dans l'en-tête) */
  .tos-r { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .tos-r.tos-vu { opacity: 1; transform: none; }
  /* 2. Photo des en-têtes qui « freine » au défilement ; la poussière va un peu plus vite (profondeur) */
  .tos-freine { overflow: hidden; }
  .tos-freine .el-image { transform: translate3d(0, calc(var(--tos-p, 0) * -36px), 0) scale(1.07); will-change: transform; }
  .tos-freine::after { top: -60px !important; bottom: -60px !important; transform: translate3d(0, calc(var(--tos-p, 0) * -80px), 0); }

  /* 3. Trait des titres qui arrive en filant, comme une trace de pneu */
  h2.tos-r::before { width: 34px; opacity: 0; transform: translateX(-70px) skewX(-28deg) scaleX(2.2);
    transition: transform .55s .2s cubic-bezier(.2, .8, .2, 1), opacity .3s .2s ease; }
  h2.tos-r.tos-vu::before { opacity: 1; transform: skewX(-28deg); }

  /* 4. Rang « au chrono » */
  .tos-chrono { font-variant-numeric: tabular-nums; opacity: .85; }

  /* 5. Prochain départ qui pulse doucement */
  .tos-ligne-temps .tos-a-venir::before { animation: tos-pouls 2.2s ease-out infinite; }
  @keyframes tos-pouls { 0% { box-shadow: 0 0 0 0 rgba(191, 72, 25, .55); } 80%, 100% { box-shadow: 0 0 0 14px rgba(191, 72, 25, 0); } }

  /* 6. « Votre place » : la coche se dessine quand la ligne apparaît */
  .tos-checklist .el-item.tos-r::before { transform: scale(.4); opacity: 0; transition: transform .4s .25s cubic-bezier(.3, 1.6, .5, 1), opacity .3s .25s; }
  .tos-checklist .el-item.tos-r.tos-vu::before { transform: none; opacity: 1; }

  /* 7. Survols : photo qui se rapproche à peine, trait terre cuite qui file sous les boutons */
  .uk-section:not(.tos-heros):not(.tos-split) img.el-image { transition: transform .6s ease; }
  .uk-section:not(.tos-heros):not(.tos-split) img.el-image:hover { transform: scale(1.02); }
  /* (trait sous les boutons retiré le 30/10/2026 : remplacé par les styles de boutons validés, plus bas) */
}

@media (prefers-reduced-motion: reduce) { .tos-progression { display: none; } }

/* ---------- Titres alternés gauche / droite (Vincent, 30/10/2026 : plus lisible, mais pas d'alternance systématique) ----------
 * Classe tos-droite posée à la main sur certaines sections, page par page :
 *  - rangée à plusieurs colonnes : colonnes inversées (le texte passe de l'autre côté de l'image) ;
 *  - rangée à une colonne : sur-titre, titre, chapeau et boutons à droite ; cartes, grilles, vidéos et Instagram restent à gauche.
 * Sur téléphone, rien ne change (tout est empilé). */
@media (min-width: 960px) {
  .tos-droite > .uk-container > .uk-grid:has(> div + div) { flex-direction: row-reverse; }
  .tos-droite > .uk-container > .uk-grid:not(:has(> div + div)) > div { text-align: right; }
  .tos-droite > .uk-container > .uk-grid:not(:has(> div + div)) > div > [class*="uk-width-"] { margin-left: auto; }
  .tos-droite > .uk-container > .uk-grid:not(:has(> div + div)) .uk-child-width-auto { justify-content: flex-end; }
  .tos-droite > .uk-container > .uk-grid > div :is(.uk-grid:not(.uk-child-width-auto), .tos-cartes, .tos-videos, .tos-insta-grille) { text-align: left; }
  .tos-droite > .uk-container > .uk-grid:not(:has(> div + div)) h2::before,
  .tos-droite > .uk-container > .uk-grid:not(:has(> div + div)) .uk-h6::before,
  .tos-droite > .uk-container > .uk-grid:not(:has(> div + div)) .uk-h6::after { margin-left: auto; }
  .tos-droite > .uk-container > .uk-grid:not(:has(> div + div)) h2::before { transform-origin: right bottom; }
}

/* ---------- Pied de page : coupure nette avec la section au-dessus (jamais de grande plage noire continue) ---------- */
[class*="theo-pied"] { border-top: 4px solid var(--tos-orange); }

/* Photo verticale montrée en portrait, cadrée sur le sujet placé bas dans l'image (ex. Théo et son vélo sous l'arche). */
.tos-cadrage-sujet-bas img { object-position: center 80% !important; }


/* =====================================================================================================
 * Cartes et boutons validés par Vincent le 30/10/2026 (planche « Cartes et boutons »).
 * Les classes sont posées par theo_styles_page (scripts/lib/theo.php) et restent visibles et modifiables dans le builder :
 * grille : tos-carte-bandeau | tos-carte-coin | tos-carte-editorial | tos-carte-photo ; page : tos-boutons-coupes | tos-boutons-arrondis.
 * ===================================================================================================== */
/* Carte 3 · bandeau incliné : le titre dans une bande terre cuite coupée en biais */
.tos-carte-bandeau div.el-item { border-left: 0; padding: 0 0 18px; overflow: hidden; }
.tos-carte-bandeau div.el-item > :not(.el-title) { margin-left: 20px; margin-right: 20px; }
.tos-carte-bandeau .el-title { background: var(--tos-orange); color: #F4F3EE !important; padding: 14px 20px 22px; margin: 0 0 6px !important;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%); }
.uk-section-primary .tos-carte-bandeau .el-title { background: var(--tos-charbon); }
/* Carte 5 · coin coupé, trait terre cuite en haut */
.tos-carte-coin div.el-item { border-left: 0; border-top: 5px solid var(--tos-orange); border-radius: 0; box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.uk-section-secondary .tos-carte-coin div.el-item { border-top-color: var(--tos-accent); }
.uk-section-primary .tos-carte-coin div.el-item { border-top-color: var(--tos-charbon); }
/* Carte 7 · éditoriale : pas de fond, trait en haut. Grand numéro au contour terre cuite seulement avec la classe tos-numeros
 * (Vincent, 30/10/2026 : un numéro qui ne veut rien dire n'a pas d'intérêt — à réserver aux étapes, classements…). */
.tos-carte-editorial div.el-item { background: transparent !important; border-left: 0; border-radius: 0; box-shadow: none; border-top: 3px solid var(--tos-charbon); padding: 14px 0 0; }
:is(.uk-section-secondary, .uk-section-primary) .tos-carte-editorial div.el-item { border-top-color: #F4F3EE; }
.tos-carte-editorial.tos-numeros { counter-reset: tos-carte; }
.tos-carte-editorial.tos-numeros div.el-item { counter-increment: tos-carte; position: relative; padding-left: 72px; }
.tos-carte-editorial.tos-numeros div.el-item::after {
  content: counter(tos-carte, decimal-leading-zero); position: absolute; left: 0; top: 12px; font: 700 44px/1 Oswald, sans-serif;
  color: transparent; -webkit-text-stroke: 1.5px var(--tos-orange); }
.uk-section-secondary .tos-carte-editorial div.el-item::after { -webkit-text-stroke-color: var(--tos-accent); }
.uk-section-primary .tos-carte-editorial div.el-item::after { -webkit-text-stroke-color: #F4F3EE; }
/* Carte 6 · photo en tête, coupée en biais (photo recadrée par YOOtheme : options largeur / hauteur d'image de la grille) */
.tos-carte-photo div.el-item { border-left: 0; padding: 0 0 18px; overflow: hidden; }
.tos-carte-photo div.el-item > :not(:first-child) { margin-left: 20px; margin-right: 20px; }
.tos-carte-photo div.el-item > :first-child { margin-top: 0; }
.tos-carte-photo :is(picture, img.el-image) { display: block; width: 100%; }
.tos-carte-photo img.el-image { height: 110px; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); margin-bottom: 6px; }

/* Boutons — action secondaire (bouton « Default ») : contour qui se remplit au survol (3) */
.uk-section .uk-button-default:not(.tos-form .uk-button):not(.tos-cartes .uk-button) { background: transparent !important; border: 2px solid currentColor !important;
  color: #151515 !important; transition: background-color .2s ease, color .2s ease; }
.uk-section .uk-button-default:not(.tos-form .uk-button):not(.tos-cartes .uk-button):hover { background: #151515 !important; color: #F4F3EE !important; border-color: #151515 !important; }
:is(.uk-section-secondary, .uk-section-primary) .uk-button-default:not(.tos-form .uk-button):not(.tos-cartes .uk-button) { color: #F4F3EE !important; }
:is(.uk-section-secondary, .uk-section-primary) .uk-button-default:not(.tos-form .uk-button):not(.tos-cartes .uk-button):hover { background: #F4F3EE !important; color: #151515 !important; border-color: #F4F3EE !important; }
/* Action principale (bouton « Primary ») : coin coupé (5) ; survol charbon sur clair, blanc cassé sur fond sombre ou terre cuite */
body:has(.tos-boutons-coupes) .uk-section .uk-button-primary:not(.tos-form .uk-button):not(.tos-cartes .uk-button) {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); padding-right: 28px; outline-offset: -6px; }
.uk-section .uk-button-primary:not(.tos-form .uk-button):not(.tos-cartes .uk-button) { transition: background-color .2s ease, color .2s ease; }
.uk-section-default .uk-button-primary:not(.tos-form .uk-button):not(.tos-cartes .uk-button):hover,
.uk-section-muted .uk-button-primary:not(.tos-form .uk-button):not(.tos-cartes .uk-button):hover { background-color: #151515 !important; }
.uk-section-secondary .uk-button-primary:not(.tos-form .uk-button):not(.tos-cartes .uk-button):hover,
.uk-section-primary .uk-button-primary:not(.tos-form .uk-button):not(.tos-cartes .uk-button):hover { background-color: #F4F3EE !important; color: #151515 !important; }
/* Variante de page (8 et 8 bis) : un seul coin arrondi, en bas à droite, sur l'action principale et la secondaire */
body:has(.tos-boutons-arrondis) .uk-section :is(.uk-button-primary, .uk-button-default):not(.tos-form .uk-button):not(.tos-cartes .uk-button) { border-radius: 0 0 18px 0; }
/* Boutons dans les cartes : bicolores, la flèche dans un bloc terre cuite qui s'élargit au survol (4) */
.tos-cartes .uk-button:not(.tos-form .uk-button) { background: #151515 !important; color: #F4F3EE !important; border: 0 !important; border-radius: 0;
  padding-right: 0 !important; clip-path: none; }
.tos-cartes .uk-button:not(.tos-form .uk-button)::after { content: "\2192" !important; display: inline-block; margin-left: 18px; padding: 0 14px;
  background: var(--tos-orange); color: #F4F3EE; transform: none !important; transition: padding .2s ease; }
.tos-cartes .uk-button:not(.tos-form .uk-button):hover::after { padding: 0 20px; }
.uk-section-secondary .tos-cartes .uk-button:not(.tos-form .uk-button) { background: #F4F3EE !important; color: #151515 !important; }


/* ---------- Corrections du 30/10/2026, 17 h 30 ---------- */
/* Photo seule dans une grille de cartes (podium) : pas plus haute que les cartes voisines */
.tos-cartes div.el-item:not(:has(.el-title)) :is(picture, img) { max-height: 260px; }
/* Sur-titre lisible sur l'aplat terre cuite (le style « primary » le rendait terre cuite sur terre cuite) */
.uk-section.uk-section-primary :is(.uk-text-primary, .uk-h6.uk-text-primary, .el-title.uk-text-primary) { color: #F4F3EE !important; }
/* Cadrage par photo : cartes à photo (bandeau 110 px) et montages */
.tos-carte-photo img[src*="partenaire-spar"] { object-position: center 45%; }
.tos-carte-photo img[src*="megavalanche-neige"] { object-position: center 35%; }
.tos-carte-photo img[src*="commencal-clash"] { object-position: center 40%; }
.tos-montage img[src*="lac-glaciaire"] { object-position: 22% 50%; }
/* Parcours « Mon vélo » : photo verticale dans un cadre paysage, cadrée sur Théo et son vélo (il est aux deux tiers de la photo) */
.tos-velo img[src*="course-sous-bois"], .tos-montage img[src*="course-sous-bois"] { object-position: center 64% !important; }
/* Menu : textes blanc cassé bien lisibles ; page active et survol soulignés terre cuite ; « Partenaires » en blanc sur terre cuite */
.uk-navbar-nav > li > a { color: #F4F3EE !important; }
.uk-navbar-nav > li.uk-active:not(.tos-cta) > a { color: #F4F3EE !important; box-shadow: inset 0 -3px 0 #F4F3EE !important; }   /* page active : trait blanc (Vincent, 30/10/2026) */
.uk-navbar-nav > li:not(.tos-cta) > a:hover { color: #F4F3EE !important; box-shadow: inset 0 -3px 0 #F4F3EE !important; }   /* survol : trait blanc aussi (Vincent, 30/10/2026) */
.uk-navbar-nav > li > a:hover::before, .uk-navbar-nav > li > a:hover::after { background-color: #F4F3EE !important; border-color: #F4F3EE !important; }
.uk-navbar-nav > li.tos-cta > a:hover { box-shadow: inset 0 -3px 0 #F4F3EE !important; }
/* Trait propre au thème Trek sous le lien actif (pseudo-élément) : blanc lui aussi */
.uk-navbar-nav > li.uk-active:not(.tos-cta) > a::before, .uk-navbar-nav > li.uk-active:not(.tos-cta) > a::after { background-color: #F4F3EE !important; border-color: #F4F3EE !important; }   /* survol : trait terre cuite */
.uk-navbar-nav > li.tos-cta > a { color: #F4F3EE !important; background: #BF4819 !important; box-shadow: none; }
.uk-navbar-nav > li.tos-cta > a:hover, .uk-navbar-nav > li.tos-cta.uk-active > a { background: #A83E15 !important; }

/* Cartes sur fond charbon (30/10/2026, 17 h 55) : fond clair, plus de carte sombre sur fond sombre (« ton sur ton ») */
.uk-section-secondary .tos-cartes div.el-item { background: #F4F3EE !important; box-shadow: none; }
.uk-section-secondary .tos-cartes div.el-item :is(.el-title, .el-meta, .el-content, .el-content p) { color: #151515 !important; }
.uk-section-secondary .tos-carte-bandeau div.el-item .el-title.el-title.el-title { color: #F4F3EE !important; }   /* titres blancs dans le bandeau (priorité sur la règle charbon ci-dessus) */
.uk-section-secondary .tos-cartes div.el-item .uk-text-meta { color: #535650 !important; }
.uk-section-secondary .tos-carte-editorial div.el-item { background: transparent !important; }
.uk-section-secondary .tos-carte-editorial div.el-item :is(.el-title, .el-meta, .el-content, .el-content p) { color: #F4F3EE !important; }
/* Cartes à photo : bandeau photo plus haut (on voit davantage du sujet) */
.tos-carte-photo img.el-image { height: 150px; }

/* Cartes : aucune animation au survol (ni soulèvement, ni zoom de la photo) */
.tos-cartes div.el-item, .tos-cartes img.el-image { transform: none !important; transition: none !important; }
.tos-carte-photo img[src*="saut-foret"] { object-position: center 45%; }

/* Résultats (30/10/2026) : rangée de cartes à hauteur égale ; la photo du podium remplit sa carte quelle que soit sa hauteur */
.tos-cartes-resultats div.el-item:not(:has(.el-title)) { position: relative; min-height: 220px; }
.tos-cartes-resultats div.el-item:not(:has(.el-title)) :is(picture, img) { position: absolute; inset: 0; width: 100%; height: 100% !important; max-height: none; object-fit: cover; object-position: center 35%; }
.tos-cartes-resultats .el-content p:first-child b { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tos-orange); }

/* =====================================================================================================
 * Résultats (30/10/2026) : deux présentations dans la page, une seule visible selon Réglages › Présentation du site.
 * tos-res-photo (5, par défaut) : photo du podium coupée en biais + liste ; tos-res-chiffres (4) : grands chiffres sur charbon.
 * ===================================================================================================== */
body:not(.tos-resultats-chiffres) .tos-res-chiffres, body.tos-resultats-chiffres .tos-res-photo { display: none !important; }
/* Rang lisible dans le bandeau terre cuite des cartes (le chiffre était terre cuite sur terre cuite) */
.tos-carte-bandeau .el-title .tos-chiffre { color: inherit !important; }

/* 5 · photo + liste */
.tos-res-image img { display: block; width: 100%; height: 400px; max-height: none; object-fit: cover; object-position: center 40%; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
/* Liste toujours sur une colonne (la Grille YOOtheme garde sinon ses colonnes par défaut sur grand écran) */
.tos-res-liste .uk-grid > * { width: 100% !important; }
.tos-res-liste div.el-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 14px 0;
  border-top: 2px solid var(--tos-charbon); background: none !important; box-shadow: none !important; }
.tos-res-liste .uk-grid > :last-child div.el-item { border-bottom: 2px solid var(--tos-charbon); }
.tos-res-liste div.el-item > .el-title { grid-row: 1 / span 3; margin: 0 !important; line-height: 1; }
.tos-res-liste div.el-item > :not(.el-title) { grid-column: 2; margin: 0 !important; }
.tos-res-liste .el-content p { margin: 2px 0 0; }
.tos-res-k { font: 500 13px Oswald, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--tos-orange); }
.tos-res-liste .uk-text-meta b { font-weight: 500; color: var(--tos-charbon); }

/* 4 · grands chiffres sur charbon (chiffre géant décoratif : seule taille fixée en CSS, c'est un ornement) */
.tos-res-grille div.el-item { position: relative; overflow: hidden; min-height: 260px; padding: 8px 0 0 24px; border-left: 1px solid rgba(244, 243, 238, .18);
  background: none !important; box-shadow: none !important; }
.tos-res-grille div.el-item > .el-title { position: absolute; right: 0; top: -24px; margin: 0; z-index: 0; font: 700 210px/1 Oswald, sans-serif; letter-spacing: -.04em;
  color: transparent !important; -webkit-text-stroke: 2px var(--tos-accent); pointer-events: none; }
.tos-res-grille div.el-item > :not(.el-title) { position: relative; z-index: 1; max-width: 75%; }
.tos-res-grille .el-meta { color: #F4F3EE !important; order: 2; }
.tos-res-grille .tos-res-k { color: var(--tos-accent); margin: 0; }
.tos-res-grille .tos-res-rang { font: 700 30px/1 Oswald, sans-serif; color: #F4F3EE; margin: 10px 0 0; letter-spacing: .04em; }
.tos-res-grille .tos-res-rang .tos-chiffre { color: inherit; }
.tos-res-grille .uk-text-meta, .tos-res-grille .uk-text-meta b { color: #C9CCC6 !important; }
.tos-res-grille div.el-item:not(:has(.el-title)) { border-left: 0; padding: 0; }
.tos-res-grille div.el-item:not(:has(.el-title)) img { width: 100%; height: 280px; object-fit: cover; object-position: center 35%; display: block; }
/* « Partenaires » quand c'est la page en cours : même trait blanc que les autres pages actives (et plus de trait rouge du thème) */
.uk-navbar-nav > li.tos-cta.uk-active > a { box-shadow: inset 0 -3px 0 #F4F3EE !important; }
.uk-navbar-nav > li.tos-cta > a::before, .uk-navbar-nav > li.tos-cta > a::after { background-color: transparent !important; border-color: transparent !important; }
.uk-navbar-nav > li.tos-cta.uk-active > a::before, .uk-navbar-nav > li.tos-cta.uk-active > a::after { background-color: #F4F3EE !important; border-color: #F4F3EE !important; }
/* Menu : un seul trait, le même partout (4 px blanc), dessiné par nous ; le trait du thème Trek (pseudo-élément) est masqué,
 * il s'ajoutait au nôtre sur les liens ordinaires et les faisait paraître plus épais que sous « Partenaires ». */
.uk-navbar-nav > li > a::before, .uk-navbar-nav > li > a::after,
.uk-navbar-nav > li > a:hover::before, .uk-navbar-nav > li > a:hover::after,
.uk-navbar-nav > li.uk-active > a::before, .uk-navbar-nav > li.uk-active > a::after { content: none !important; display: none !important; }
.uk-navbar-nav > li.uk-active > a, .uk-navbar-nav > li > a:hover, .uk-navbar-nav > li.tos-cta.uk-active > a, .uk-navbar-nav > li.tos-cta > a:hover { box-shadow: inset 0 -4px 0 #F4F3EE !important; }
/* Sur-titre puis titre : un peu d'air pour les majuscules accentuées (le « É » de THÉO touchait « PILOTE VTT ») */
.uk-section .uk-h6 + :is(h1, h2, h3, [class*="uk-heading"]) { padding-top: 8px; }