/* tchin.tech - la vitrine, sur le modèle de wintg.group (kit Tchin v1.0 : couleurs, police et motif de Wintg).
   Des panneaux arrondis posés sur le Blanc Wintg, en retrait du bord ; le panneau de tête est Nuit, avec le motif au
   trait. Toutes les tailles sont proportionnelles (rem, qui suit la largeur sur téléphone, %, vw) : jamais de px. */
.vt {
  --orange: #E67A1E; --orange-ton: #D96F14; --orange-profond: #A84A08; --orange-pale: #FDE8D4;
  --blanc: #FFF8EF; --blanc-pur: #FFFFFF; --cacao: #3A1C0A; --taupe: #6E5846; --argile: #B5A08C; --filet: #EADFD0;
  --nuit: #171310; --surface: #221A14; --bordure-sombre: #3B2F26;
  --titre: "Slabo 27px", Georgia, serif; --petit: "Slabo 13px", Georgia, serif;
  --mouvement: cubic-bezier(.2, .8, .2, 1);
  --bord: clamp(.625rem, 1.2vw, 1.125rem);
  --rayon: clamp(1.25rem, 2vw, 2rem);
  --dedans: clamp(1.25rem, 4vw, 4.5rem);
  --espace: clamp(3.5rem, 8vw, 8.5rem);
  --trait: .0625rem;
  position: relative; z-index: 0;
  display: flex; flex-direction: column; gap: var(--bord);
  min-height: 100dvh; padding: 0 var(--bord) var(--bord);
  background: var(--blanc); color: var(--cacao);
  font: 400 1.125rem/1.55 var(--titre);
  overflow-x: clip;
}
.vt main { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--bord); }
.vt h1, .vt h2, .vt h3, .vt b, .vt strong { font-weight: 400; }
.vt h1, .vt h2, .vt h3, .vt p, .vt ul, .vt ol { margin: 0; }
.vt ul, .vt ol { padding: 0; list-style: none; }
.vt img, .vt svg { display: block; max-width: 100%; }
.vt :focus-visible { outline: .125rem solid var(--orange); outline-offset: .1875rem; border-radius: .375rem; }

/* --- Texte --- */
.vt .etiquette { display: flex; align-items: center; gap: .625rem; margin-bottom: 1.125rem; font: 400 .75rem/1.3 var(--petit); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-profond); }
.vt .etiquette::before { content: ""; flex: none; width: 1.375rem; height: .125rem; background: currentColor; }
.vt .etiquette--sombre { color: var(--orange); }
.vt .etiquette--sur-orange { color: var(--cacao); }
.vt .titre-section { font-size: clamp(2rem, 3.4vw, 3.75rem); line-height: 1.06; letter-spacing: -.005em; max-width: 20ch; text-wrap: balance; }
.vt .chapeau { font-size: clamp(1.125rem, 1.4vw, 1.4375rem); line-height: 1.45; color: var(--taupe); max-width: 46ch; }
.vt .surligne { background: var(--orange); color: var(--cacao); padding: 0 .12em; border-radius: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vt .insecable { white-space: nowrap; }
.vt .lien-fleche { display: inline-flex; align-items: center; gap: .625rem; width: fit-content; padding-bottom: .375rem; border-bottom: var(--trait) solid var(--orange); color: var(--cacao); text-decoration: none; font-size: 1.125rem; transition: color .24s var(--mouvement), border-color .24s var(--mouvement); }
.vt .lien-fleche span { transition: transform .3s var(--mouvement); }
.vt .lien-fleche:hover { color: var(--orange-profond); border-bottom-color: var(--orange-profond); }
.vt .lien-fleche:hover span { transform: translateX(.3125rem); }

/* Le cadre de sélection (bannière X de Wintg) : un trait, quatre poignées ; il se trace à l'arrivée */
.vt .cadre { --poignee: var(--blanc); --trait-cadre: var(--orange); position: relative; display: inline-block; padding: 0 .14em .03em; line-height: 1.1; }
.vt .cadre::before { content: ""; position: absolute; inset: 0; border: .125rem solid var(--trait-cadre); }
.vt .cadre i { position: absolute; z-index: 1; width: .625rem; height: .625rem; background: var(--poignee); border: .125rem solid var(--trait-cadre); border-radius: .125rem; }
.vt .cadre i:nth-of-type(1) { top: 0; left: 0; transform: translate(-50%, -50%); }
.vt .cadre i:nth-of-type(2) { top: 0; right: 0; transform: translate(50%, -50%); }
.vt .cadre i:nth-of-type(3) { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.vt .cadre i:nth-of-type(4) { bottom: 0; right: 0; transform: translate(50%, 50%); }
.vt .panneau--nuit .cadre { --poignee: var(--nuit); }
.js .vt .cadre::before { clip-path: inset(0 100% 100% 0); animation: vt-tracer .9s var(--mouvement) .9s forwards; }
.js .vt .cadre i { opacity: 0; animation: vt-paraitre .3s var(--mouvement) 1.6s forwards; }
@keyframes vt-tracer { 50% { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vt-paraitre { to { opacity: 1; } }

/* Le curseur qui porte un prénom, posé sur la poignée du cadre */
.vt .curseur { position: absolute; left: 100%; top: 100%; z-index: 2; pointer-events: none; font-size: 1rem; line-height: 1; animation: vt-derive 6s .4s ease-in-out infinite alternate; }
.vt .curseur svg { width: clamp(1.125rem, 1.5vw, 1.5rem); max-width: none; height: auto; fill: var(--blanc); transform-origin: 10% 8%; }
.vt .curseur span { position: absolute; top: calc(100% + .25rem); left: 70%; padding: .4375rem .875rem .5rem; border-radius: 999rem; background: var(--blanc); color: var(--cacao); font: 400 .9375rem/1 var(--petit); white-space: nowrap; }
.js .vt .curseur { opacity: 0; animation: vt-paraitre .4s var(--mouvement) 1.8s forwards, vt-derive 6s 2.2s ease-in-out infinite alternate; }
@keyframes vt-derive { from { transform: translate(0, 0); } to { transform: translate(.75rem, -.5625rem); } }

/* --- Boutons --- */
.vt .actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.vt .bouton { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.25rem; padding: .875rem 1.625rem; border-radius: 999rem; border: var(--trait) solid transparent; font: 400 1.0625rem/1 var(--titre); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s var(--mouvement), background-color .24s var(--mouvement), color .24s var(--mouvement), border-color .24s var(--mouvement); }
.vt .bouton:active { transform: scale(.97); }
.vt .bouton .fleche { transition: transform .3s var(--mouvement); }
.vt .bouton:hover .fleche { transform: translateX(.25rem); }
.vt .bouton svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.vt .bouton--principal { background: var(--orange); color: var(--cacao); }
.vt .bouton--principal:hover { background: var(--orange-ton); }
.vt .bouton--cacao { background: var(--cacao); color: var(--blanc); }
.vt .bouton--cacao:hover { background: #4D2611; }
.vt .bouton--contour { background: transparent; color: var(--cacao); border-color: rgba(58, 28, 10, .4); }
.vt .bouton--contour:hover { border-color: var(--cacao); }
.vt .bouton--contour-clair { background: transparent; color: var(--blanc); border-color: rgba(255, 248, 239, .35); }
.vt .bouton--contour-clair:hover { border-color: var(--blanc); }

/* --- En-tête : posé dans le haut sombre ; quand on descend, la barre se détache et flotte --- */
.vt .entete { position: relative; z-index: 40; margin: var(--bord) 0 calc(-1 * var(--bord)); padding: clamp(.875rem, 1.6vw, 1.375rem) var(--dedans) 0; background: var(--nuit); border-radius: var(--rayon) var(--rayon) 0 0; }
.vt .entete::before, .vt .panneau--motif::before, .vt .pied::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("/images/marque/tchin_motif_trait_blanc.svg") 0 0 / 35rem; opacity: .03; pointer-events: none; }
.vt .entete__barre { position: relative; display: flex; align-items: center; gap: 1.25rem; min-height: 4rem; padding-bottom: clamp(.875rem, 1.6vw, 1.375rem); border-bottom: var(--trait) solid var(--bordure-sombre); transition: transform .45s var(--mouvement); }
.vt .entete__logo { flex: none; display: block; border-radius: .375rem; }
.vt .entete__logo img { width: clamp(6.5rem, 8vw, 8.25rem); height: auto; }
.vt .entete__nav { flex: 1; display: flex; justify-content: center; }
.vt .entete__liens { display: flex; gap: .25rem; }
.vt .entete__liens a { display: block; padding: .6875rem 1.125rem; border-radius: 999rem; color: var(--argile); text-decoration: none; font-size: 1.0625rem; transition: color .24s var(--mouvement), background-color .24s var(--mouvement); }
.vt .entete__liens a:hover { color: var(--blanc); }
.vt .entete__liens a[aria-current="page"] { color: var(--blanc); background: var(--surface); }
/* Les entrées à méga-menu sont des boutons, habillés comme les liens (17 oct. 2026) */
.vt .entete__liens button { display: inline-flex; align-items: center; gap: .375rem; padding: .6875rem 1.125rem; border: 0; border-radius: 999rem; background: none; color: var(--argile); font: 400 1.0625rem/1.55 var(--titre); cursor: pointer; transition: color .24s var(--mouvement), background-color .24s var(--mouvement); }
.vt .entete__liens button:hover, .vt .entete__liens button[aria-expanded="true"] { color: var(--blanc); }
.vt .entete__liens button[aria-current="page"] { color: var(--blanc); background: var(--surface); }
.vt .entete__chevron { width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--mouvement); }
.vt .entete__liens button[aria-expanded="true"] .entete__chevron { transform: rotate(180deg); }
.vt .entete__liens a { display: inline-flex; align-items: center; gap: .5rem; }
.vt .entete__pastille { padding: .1875rem .5rem; border-radius: 999rem; background: var(--orange); color: var(--cacao); font: 400 .6875rem/1.2 var(--petit); letter-spacing: .04em; }

/* Les méga-menus : un panneau blanc sous la barre ; colonnes de liens par catégorie, cartes mises en avant à droite */
.vt .mega { position: absolute; left: 0; right: 0; top: calc(100% + .625rem); z-index: 90; display: grid; grid-template-columns: minmax(0, 1fr) clamp(19rem, 27vw, 25rem); overflow: hidden; border-radius: var(--rayon); background: var(--blanc-pur); color: var(--cacao); box-shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, .55); }
.vt .mega__colonnes { display: grid; grid-template-columns: repeat(var(--nb, 3), minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.5rem); align-content: start; padding: clamp(1.5rem, 2.4vw, 2.5rem); }
.vt .mega__categorie { padding-bottom: .875rem; margin-bottom: .625rem; border-bottom: var(--trait) solid var(--filet); font: 400 .75rem/1.3 var(--petit); letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.vt .mega__colonne ul { display: grid; gap: .125rem; list-style: none; }
.vt .mega__lien { display: flex; align-items: center; gap: .875rem; padding: .625rem .25rem; border-radius: .75rem; color: var(--cacao); text-decoration: none; transition: color .2s var(--mouvement); }
.vt .mega__icone { flex: none; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: .625rem; background: #F4EEE6; transition: background-color .2s var(--mouvement); }
.vt .mega__icone svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--taupe); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s var(--mouvement); }
.vt .mega__nom { font-size: 1.0625rem; line-height: 1.25; }
.vt .mega__externe { color: var(--orange-profond); }
.vt .mega__lien:hover { color: var(--orange-profond); }
.vt .mega__lien:hover .mega__icone { background: var(--orange-pale); }
.vt .mega__lien:hover .mega__icone svg { stroke: var(--orange-profond); }
.vt .mega__cartes { display: grid; gap: .875rem; align-content: start; padding: clamp(1.25rem, 2vw, 2rem); border-left: var(--trait) solid var(--filet); }
.vt .mega__carte { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 9.5rem; overflow: hidden; padding: 1.25rem; border-radius: 1.125rem; color: var(--cacao); text-decoration: none; transition: transform .3s var(--mouvement); }
.vt .mega__carte:hover { transform: translateY(-.125rem); }
.vt .mega__carte--orange { background: linear-gradient(135deg, #FDE8D4 0%, #FFF3E3 60%, #FFF8EF 100%); }
.vt .mega__carte--sable { background: linear-gradient(135deg, #F1E4D3 0%, #F8EFE4 100%); }
.vt .mega__carte--nuit { background: linear-gradient(135deg, #2A211A 0%, #171310 100%); color: var(--blanc); }
.vt .mega__carte-texte { position: relative; z-index: 1; display: grid; gap: .5rem; max-width: 64%; }
.vt .mega__etiquette { width: fit-content; padding: .3125rem .75rem; border-radius: 999rem; background: rgba(58, 28, 10, .08); border: var(--trait) solid rgba(58, 28, 10, .12); font: 400 .6875rem/1.2 var(--petit); letter-spacing: .1em; text-transform: uppercase; }
.vt .mega__carte--nuit .mega__etiquette { background: rgba(230, 122, 30, .16); border-color: rgba(230, 122, 30, .3); color: var(--orange); }
.vt .mega__carte-titre { font-size: 1.125rem; line-height: 1.25; }
.vt .mega__carte-phrase { font: 400 .8125rem/1.4 var(--petit); color: var(--taupe); }
.vt .mega__carte--nuit .mega__carte-phrase { color: var(--argile); }
.vt .mega__carte-image { position: absolute; right: -.5rem; top: 50%; width: 40%; max-height: 120%; object-fit: contain; transform: translateY(-50%); transition: transform .4s var(--mouvement); }
.vt .mega__carte:hover .mega__carte-image { transform: translateY(-50%) scale(1.05); }

/* La page d'un lien du menu, en attendant son contenu */
.vt .bandeau-page { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: clamp(1.5rem, 4vw, 4rem); min-height: clamp(22rem, 52vh, 34rem); }
.vt .bandeau-page h1 { margin-top: .25rem; font-size: clamp(2.5rem, 5.4vw, 6rem); line-height: 1.05; letter-spacing: -.01em; max-width: 16ch; }
.vt .bandeau-page__chapeau { margin: 1.5rem 0 2rem; font-size: clamp(1.0625rem, 1.4vw, 1.375rem); color: var(--argile); max-width: 44ch; }
.vt .bandeau-page__visuel { overflow: hidden; border-radius: calc(var(--rayon) - .5rem); }
.vt .bandeau-page__visuel img { width: 100%; height: auto; }
.vt .bandeau-page__suite { display: grid; gap: 1.25rem; }

/* Le menu du téléphone : les groupes qui se déplient */
.vt .menu-mobile__groupe { border-bottom: var(--trait) solid var(--bordure-sombre); }
.vt .menu-mobile__groupe > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; border: 0; background: none; color: var(--blanc); font: 400 1.75rem/1.1 var(--titre); cursor: pointer; text-align: left; }
.vt .menu-mobile__groupe > button span { color: var(--orange); font-size: 1.5rem; }
.vt .menu-mobile__sous { display: grid; padding: 0 0 1rem .25rem; }
.vt .menu-mobile .menu-mobile__sous a { padding: .5rem 0; border: 0; font-size: 1.125rem; color: var(--argile); }

.vt .entete__actions { flex: none; display: flex; align-items: center; gap: .125rem; padding: .3125rem; background: var(--orange); border-radius: 999rem; }
.vt .entete__reseau { display: grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: 50%; color: var(--cacao); transition: background-color .24s var(--mouvement); }
.vt .entete__reseau:hover { background: rgba(58, 28, 10, .12); }
.vt .entete__reseau svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; }
.vt .entete__connexion { display: inline-flex; align-items: center; gap: .625rem; height: 2.625rem; margin-left: .25rem; padding: 0 1.125rem 0 1rem; border: 0; border-left: var(--trait) solid rgba(58, 28, 10, .22); border-radius: 0 999rem 999rem 0; background: none; color: var(--cacao); font: 400 1.0625rem/1 var(--titre); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .24s var(--mouvement); }
.vt .entete__connexion:hover { background: rgba(58, 28, 10, .1); }
.vt .entete__connexion--court { display: none; }
.vt .entete__connexion .fleche { transition: transform .3s var(--mouvement); }
.vt .entete__connexion:hover .fleche { transform: translateX(.25rem); }
.vt .entete__menu { display: none; flex: none; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; border: var(--trait) solid var(--bordure-sombre); background: transparent; cursor: pointer; }
.vt .entete__menu span { display: block; width: 1.125rem; height: .09375rem; background: var(--blanc); }
.vt .entete__menu span + span { margin-top: .3125rem; }
.vt .entete--flottant .entete__barre { position: fixed; z-index: 50; top: var(--bord); left: var(--bord); right: var(--bord); min-height: 0; padding: .5rem .5rem .5rem clamp(1.25rem, 2.2vw, 2rem); background: rgba(23, 19, 16, .94); -webkit-backdrop-filter: blur(.75rem); backdrop-filter: blur(.75rem); border: 0; border-radius: calc(var(--rayon) - .25rem); animation: vt-descendre .45s var(--mouvement); }
.vt .entete--flottant.entete--cache .entete__barre { transform: translateY(calc(-100% - var(--bord) - .625rem)); }
@keyframes vt-descendre { from { transform: translateY(-120%); } }

/* La bulle de connexion, accrochée sous le bouton */
.vt .bulle-connexion { position: absolute; right: 0; top: calc(100% + .75rem); z-index: 100; width: 24rem; padding: 1.625rem; border-radius: var(--rayon); background: var(--blanc); border: var(--trait) solid var(--filet); box-shadow: 0 1.5rem 3rem -1.5rem rgba(23, 19, 16, .45); color: var(--cacao); }
.vt .bulle-connexion::before { content: ""; position: absolute; top: -.5rem; right: 2.5rem; width: 1rem; height: 1rem; transform: rotate(45deg); background: var(--blanc); border-left: var(--trait) solid var(--filet); border-top: var(--trait) solid var(--filet); }

/* Le menu du téléphone : un panneau Nuit plein écran */
.vt .menu-mobile { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: var(--bord); background: var(--blanc); }
.vt .menu-mobile__panneau { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 1rem var(--dedans) var(--dedans); border-radius: var(--rayon); background: var(--nuit); color: var(--blanc); }
.vt .menu-mobile__haut { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: var(--trait) solid var(--bordure-sombre); }
.vt .menu-mobile__haut img { width: 6.5rem; }
.vt .menu-mobile__fermer { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: var(--trait) solid var(--bordure-sombre); background: none; color: var(--blanc); cursor: pointer; }
.vt .menu-mobile__fermer svg { width: 1.125rem; height: 1.125rem; }
.vt .menu-mobile__liens { flex: 1; display: grid; align-content: start; padding-top: 1.5rem; }
.vt .menu-mobile__liens a { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: var(--trait) solid var(--bordure-sombre); color: var(--blanc); text-decoration: none; font-size: 1.75rem; line-height: 1.1; }
.vt .menu-mobile__liens a span { color: var(--orange); font-size: 1.25rem; }
.vt .menu-mobile__liens a[aria-current="page"] { color: var(--orange); }
.vt .menu-mobile .bouton { width: 100%; }

/* --- Panneaux (arrondis, en retrait du bord) et sections --- */
.vt .panneau { position: relative; overflow: hidden; border-radius: var(--rayon); padding: var(--dedans); }
.vt .panneau > * { position: relative; }
.vt .panneau--nuit { background: var(--nuit); color: var(--blanc); }
.vt main > .panneau:first-child { border-top-left-radius: 0; border-top-right-radius: 0; }
.vt .panneau--orange { background: var(--orange) url("/images/marque/tchin_motif_orange_carreau.svg") 0 0 / 35rem; color: var(--cacao); }
.vt .panneau--blanc { background: var(--blanc-pur); border: var(--trait) solid var(--filet); }
.vt .section { padding: var(--espace) var(--dedans); }
.vt .section__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.vt .deux-colonnes { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 7.5rem); align-items: start; }

/* --- Accueil : le panneau de tête --- */
.vt .heros { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: 1fr auto; column-gap: clamp(1.5rem, 4vw, 4rem); min-height: clamp(34rem, calc(100svh - 12.5rem), 54rem); padding-bottom: 0; }
.vt .heros__texte { align-self: center; position: relative; z-index: 1; padding: clamp(1.5rem, 3vw, 3rem) 0; }
.vt .heros h1 { font-size: clamp(2.4rem, 4.9vw, 6rem); line-height: 1.12; letter-spacing: -.01em; }
.vt .heros h1 .cadre { white-space: nowrap; }
.vt .heros h1 .ligne { display: block; padding: .06em 0; }
.vt .heros__chapeau { margin: 2rem 0 2.25rem; font-size: clamp(1.0625rem, 1.4vw, 1.375rem); line-height: 1.5; color: var(--argile); max-width: 42ch; }
.vt .heros__globe { position: relative; min-height: 24rem; }
.vt .globe { --point: #B5A08C; --vif: #E67A1E; --lome: #FFF8EF; --bord-globe: #3B2F26; position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.vt .globe:active { cursor: grabbing; }
.vt .heros__faits { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 calc(-1 * var(--dedans)); border-top: var(--trait) solid var(--bordure-sombre); }
.vt .heros__faits li { display: grid; gap: .25rem; padding: clamp(1.25rem, 2.4vw, 2.25rem) var(--dedans); }
.vt .heros__faits li + li { border-left: var(--trait) solid var(--bordure-sombre); }
.vt .heros__faits strong { font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1; color: var(--blanc); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt .heros__faits span { font: 400 .875rem/1.4 var(--petit); color: var(--argile); }

/* Entrée du panneau de tête : chaque ligne glisse depuis le bas */
.js .vt .entree { opacity: 0; transform: translateY(2rem); animation: vt-entrer .9s var(--mouvement) calc(.15s + var(--i, 0) * .12s) forwards; }
.vt .heros h1 .entree { display: inline-block; }
@keyframes vt-entrer { to { opacity: 1; transform: none; } }
.js .vt .apparait { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s var(--mouvement), transform .8s var(--mouvement); }
.js .vt .apparait.vu { opacity: 1; transform: none; }

/* Les logos des marchands qui défilent, d'un bord à l'autre */
.vt .defile { overflow: hidden; margin: 0 calc(-1 * var(--bord)); padding: clamp(1.75rem, 3vw, 2.75rem) 0; border-bottom: var(--trait) solid var(--filet); }
.vt .defile__piste { display: flex; align-items: center; width: max-content; animation: vt-defile 48s linear infinite; }
.vt .defile img { flex: none; height: clamp(1.875rem, 2.8vw, 2.75rem); width: auto; margin-right: clamp(3.5rem, 6vw, 7rem); object-fit: contain; opacity: .75; transition: opacity .24s var(--mouvement); }
.vt .defile img:hover { opacity: 1; }
.vt .defile a { flex: none; display: block; }
.vt .defile:hover .defile__piste { animation-play-state: paused; }
@keyframes vt-defile { to { transform: translateX(-50%); } }

/* Ce que fait Tchin : trois colonnes égales */
.vt .principes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 4.5rem); }
.vt .principes li { position: relative; display: grid; align-content: start; gap: .875rem; padding-top: 1.75rem; border-top: var(--trait) solid var(--filet); }
.vt .principes li::before { content: ""; position: absolute; top: calc(-1 * var(--trait)); left: 0; width: 3.5rem; height: .125rem; background: var(--orange); transition: width .6s var(--mouvement); }
.vt .principes li:hover::before { width: 100%; }
.vt .icone { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: .5rem; border-radius: 1rem; background: var(--orange-pale); }
.vt .icone svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--orange-profond); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vt .principes h3 { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.12; }
.vt .principes p { color: var(--taupe); max-width: 44ch; }
.vt .principes__liens { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .25rem; }
.vt .principes__liens span { padding: .375rem .75rem; border-radius: 999rem; background: var(--blanc-pur); border: var(--trait) solid var(--filet); font: 400 .8125rem/1 var(--petit); color: var(--taupe); }

/* La couverture : un pays par ligne, ses moyens en tuiles */
.vt .couverture__texte { position: sticky; top: 7.5rem; display: grid; gap: 1.375rem; }
.vt .couverture__pays { display: grid; border-top: var(--trait) solid var(--filet); }
.vt .pays-ligne { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: 1rem 2rem; padding: clamp(1.25rem, 2.2vw, 2rem) 0; border-bottom: var(--trait) solid var(--filet); }
.vt .pays-ligne__nom { display: flex; align-items: center; gap: .875rem; }
.vt .pays-ligne__nom img { width: 2.75rem; height: 2.75rem; object-fit: contain; }
.vt .pays-ligne__nom strong { display: block; font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.1; }
.vt .pays-ligne__nom span { font: 400 .8125rem/1.4 var(--petit); color: var(--taupe); }
.vt .pays-ligne__familles { display: grid; gap: .75rem; align-content: center; }
.vt .famille { display: flex; align-items: center; gap: .875rem; }
.vt .famille__logos { display: flex; }
.vt .famille__logos img { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: .125rem solid var(--blanc-pur); background: var(--blanc-pur); object-fit: cover; }
.vt .famille__logos img + img { margin-left: -.625rem; }
.vt .famille__nom { font: 400 .9375rem/1.3 var(--petit); color: var(--taupe); }

/* Ce que vous pouvez faire : le titre reste, les cartes s'empilent au défilement (« Le mot des cofondateurs » de wintg.group) */
.vt .pile { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 7.5rem); align-items: start; }
.vt .pile__gauche { position: sticky; top: 8rem; display: grid; gap: 1.375rem; }
.vt .pile__texte { color: var(--taupe); max-width: 36ch; }
.vt .pile__cartes { display: grid; gap: 2rem; }
.vt .carte-pile { position: sticky; top: calc(7.5rem + var(--n) * 1.25rem); margin: 0; display: flex; flex-direction: column; gap: 1rem; min-height: clamp(22rem, 30vw, 30rem); padding: clamp(1.75rem, 3.4vw, 3.5rem); padding-bottom: 0; overflow: hidden; background: var(--blanc-pur); border: var(--trait) solid var(--filet); border-radius: var(--rayon); box-shadow: 0 -1rem 2.5rem -2rem rgba(58, 28, 10, .35); }
.vt .carte-pile--nuit { background: var(--nuit); border-color: transparent; color: var(--blanc); }
.vt .carte-pile__haut { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vt .carte-pile__numero { font: 400 .8125rem/1 var(--petit); letter-spacing: .14em; color: var(--orange-profond); }
.vt .carte-pile--nuit .carte-pile__numero { color: var(--orange); }
.vt .carte-pile h3 { font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1.08; }
.vt .carte-pile p { font-size: clamp(1.0625rem, 1.3vw, 1.3125rem); line-height: 1.5; color: var(--taupe); max-width: 44ch; }
.vt .carte-pile--nuit p { color: var(--argile); }
.vt .carte-pile__image { display: block; width: 100%; max-height: 16rem; margin-top: auto; object-fit: contain; object-position: center bottom; }
.vt .carte-pile:not(:has(.carte-pile__image)) { padding-bottom: clamp(1.75rem, 3.4vw, 3.5rem); }

/* Les développeurs : le panneau orange, le code sur Nuit */
.vt .dev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.vt .dev__texte { display: grid; gap: 1.375rem; }
.vt .dev__texte p { font-size: clamp(1.0625rem, 1.3vw, 1.3125rem); line-height: 1.5; max-width: 44ch; }
.vt .code { overflow: hidden; border-radius: calc(var(--rayon) - .25rem); background: var(--nuit); color: var(--blanc); box-shadow: 0 2rem 4rem -2rem rgba(58, 28, 10, .55); }
.vt .code__barre { display: flex; align-items: center; gap: .4375rem; padding: .875rem 1.125rem; border-bottom: var(--trait) solid var(--bordure-sombre); font: 400 .8125rem/1 var(--petit); color: var(--argile); }
.vt .code__barre i { width: .6875rem; height: .6875rem; border-radius: 50%; background: var(--bordure-sombre); }
.vt .code__barre span { margin-left: .5rem; }
.vt .code pre { margin: 0; padding: clamp(1.125rem, 2vw, 1.75rem); min-height: 17.5em; overflow-x: auto; white-space: pre; font: 400 clamp(.6875rem, .95vw, .9375rem)/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; }
.vt .code__fichier { transition: opacity .3s var(--mouvement); }
.vt .code .curseur-texte { display: inline-block; width: .55em; height: 1.15em; margin-left: .05em; vertical-align: text-bottom; background: var(--orange); animation: vt-clignote 1s steps(2, start) infinite; }
@keyframes vt-clignote { to { visibility: hidden; } }
.vt .code .c-cmd { color: var(--blanc); } .vt .code .c-pon { color: rgba(255, 248, 239, .4); } .vt .code .c-cle { color: #F2A949; }
.vt .code .c-txt { color: #8FD694; } .vt .code .c-num { color: #8AB4F8; }

/* Nos partenaires : défilement infini sur deux lignes, en sens contraires, d'un bord de l'écran à l'autre */
.vt .defile2 { display: grid; gap: var(--bord); margin: 0 calc(-1 * var(--bord)); padding: clamp(3rem, 6vw, 6rem) 0 clamp(1rem, 2vw, 2rem); overflow: hidden; }
.vt .defile2__entete { padding: 0 calc(var(--dedans) + var(--bord)); margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.vt .defile2__ligne { overflow: hidden; }
.vt .defile2__piste { display: flex; width: max-content; list-style: none; animation: vt-defile2 40s linear infinite; }
.vt .defile2__ligne--inverse .defile2__piste { animation-direction: reverse; animation-duration: 46s; }
.vt .defile2__ligne:hover .defile2__piste { animation-play-state: paused; }
.vt .defile2__piste li { flex: none; padding-right: var(--bord); }
.vt .defile2__tuile { display: grid; place-items: center; width: clamp(10rem, 17vw, 16rem); height: clamp(5.5rem, 8vw, 7.5rem); padding: clamp(1rem, 1.6vw, 1.5rem); transition: opacity .3s var(--mouvement); }
.vt .defile2__tuile { opacity: .85; }
.vt .defile2__tuile:hover { opacity: 1; }
.vt .defile2__tuile img { max-width: 82%; max-height: 70%; width: auto; height: auto; object-fit: contain; }
@keyframes vt-defile2 { to { transform: translateX(-50%); } }

/* Pour les développeurs : un écran d'éditeur (IDE), un seul fichier, déjà écrit */
.vt .devs { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.vt .devs__entete { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end; }
.vt .devs__titre { color: var(--blanc); max-width: 16ch; font-size: clamp(2.25rem, 4.4vw, 4.75rem); }
.vt .devs__droite { display: grid; gap: 1.5rem; }
.vt .devs__droite > p:first-child { color: var(--argile); font-size: clamp(1.0625rem, 1.3vw, 1.3125rem); line-height: 1.5; }
.vt .ide { overflow: hidden; border-radius: .875rem; background: #13100D; border: var(--trait) solid #2E241C; box-shadow: 0 2.5rem 5rem -2.5rem rgba(0, 0, 0, .75); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.vt .ide__titre { position: relative; display: flex; align-items: center; justify-content: center; height: 2.375rem; background: #1B1612; border-bottom: var(--trait) solid #2E241C; font: 400 .8125rem/1 var(--petit); color: var(--argile); }
.vt .ide__points { position: absolute; left: 1rem; display: flex; gap: .5rem; }
.vt .ide__points i { width: .75rem; height: .75rem; border-radius: 50%; background: #3B2F26; }
.vt .ide__points i:nth-child(1) { background: #E5624C; } .vt .ide__points i:nth-child(2) { background: #E6B13A; } .vt .ide__points i:nth-child(3) { background: #5CB868; }
.vt .ide__corps { display: grid; grid-template-columns: 3rem 13.5rem minmax(0, 1fr); min-height: clamp(26rem, 38vw, 36rem); }
.vt .ide__activite { display: flex; flex-direction: column; align-items: center; gap: 1.375rem; padding-top: 1rem; background: #1B1612; border-right: var(--trait) solid #2E241C; }
.vt .ide__activite svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: #6E5846; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vt .ide__activite svg.actif { stroke: var(--blanc); }
.vt .ide__explorateur { display: flex; flex-direction: column; gap: .125rem; padding: .875rem .5rem; background: #17130F; border-right: var(--trait) solid #2E241C; font-size: .8125rem; color: var(--argile); }
.vt .ide__explorateur p { margin: 0 0 .625rem .5rem; font: 400 .6875rem/1 var(--petit); letter-spacing: .14em; text-transform: uppercase; }
.vt .ide__dossier, .vt .ide__fichier { padding: .375rem .5rem; border-radius: .375rem; white-space: nowrap; }
.vt .ide__fichier { padding-left: 1.5rem; }
.vt .ide__fichier.actif { background: #2A211A; color: var(--blanc); }
.vt .ide b { font-weight: 400; font-size: .6875rem; color: #E6B13A; margin-right: .25rem; }
.vt .ide__editeur { display: flex; flex-direction: column; min-width: 0; }
.vt .ide__onglets { display: flex; background: #17130F; border-bottom: var(--trait) solid #2E241C; font-size: .8125rem; }
.vt .ide__onglets span { padding: .625rem 1.125rem; color: var(--argile); border-right: var(--trait) solid #2E241C; }
.vt .ide__onglets span.actif { background: #13100D; color: var(--blanc); box-shadow: inset 0 .125rem 0 var(--orange); }
.vt .ide__chemin { padding: .4375rem 1.25rem; font-size: .75rem; color: #6E5846; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt .ide__code { position: relative; flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) 4.5rem; font-size: clamp(.6875rem, .86vw, .875rem); line-height: 1.75; }
.vt .ide__numeros { margin: 0; padding: .375rem .75rem 1.25rem 1rem; list-style: none; color: #4A3C31; text-align: right; user-select: none; }
.vt .ide__numeros li.actif { color: var(--blanc); }
.vt .ide pre { margin: 0; padding: .375rem 0 1.25rem; overflow-x: auto; white-space: pre; font: inherit; color: #E9DCCB; }
.vt .ide__ligne { display: block; padding: 0 1rem 0 .5rem; }
.vt .ide__ligne.actif { background: rgba(230, 122, 30, .08); box-shadow: inset .125rem 0 0 var(--orange); }
.vt .ide .c-com { color: #7D6A59; font-style: italic; } .vt .ide .c-txt { color: #9BD38A; } .vt .ide .c-cle { color: #F28C4B; }
.vt .ide .c-num { color: #8AB4F8; } .vt .ide .c-fn { color: #F2C66D; }
.vt .ide__curseur { display: inline-block; width: .125rem; height: 1.15em; margin-left: .0625rem; vertical-align: text-bottom; background: var(--blanc); animation: vt-clignote 1.1s steps(2, start) infinite; }
.vt .ide__carte { display: flex; flex-direction: column; gap: .1875rem; padding: .75rem .625rem; border-left: var(--trait) solid #2E241C; }
.vt .ide__carte i { display: block; height: .1875rem; margin-left: calc(var(--d) * .09rem); width: calc(var(--l) * 1.1%); max-width: 100%; border-radius: .0625rem; background: #4A3C31; }
.vt .ide__carte i.com { background: #352A21; }
.vt .ide__etat { display: flex; gap: 1.25rem; padding: .375rem 1rem; background: var(--orange); color: var(--cacao); font: 400 .75rem/1.4 var(--petit); white-space: nowrap; overflow: hidden; }
.vt .ide__etat-droite { margin-left: auto; }
@keyframes vt-clignote { to { visibility: hidden; } }

/* --- Contact (17 oct. 2026) --- */
.vt .contact-tete { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); min-height: clamp(30rem, 70vh, 44rem); }
.vt .contact-tete h1 { font-size: clamp(2.6rem, 5.4vw, 6rem); line-height: 1.08; letter-spacing: -.01em; }
.vt .contact-tete__chapeau { margin: 1.75rem 0 2.25rem; font-size: clamp(1.0625rem, 1.4vw, 1.375rem); color: var(--argile); max-width: 42ch; }
.vt .conversation { max-width: 26rem; margin-left: auto; overflow: hidden; border-radius: 1.5rem; background: #0F0C0A; border: var(--trait) solid var(--bordure-sombre); box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, .7); }
.vt .conversation__haut { display: flex; align-items: center; gap: .75rem; padding: .875rem 1.125rem; background: var(--surface); border-bottom: var(--trait) solid var(--bordure-sombre); }
.vt .conversation__haut img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.vt .conversation__haut strong { display: block; font-size: 1rem; color: var(--blanc); }
.vt .conversation__haut span { font: 400 .8125rem/1.2 var(--petit); color: #6FCF97; }
.vt .conversation__fil { display: grid; gap: .625rem; padding: 1.25rem 1.125rem 1.5rem; }
.vt .bulle { max-width: 82%; padding: .625rem .875rem; border-radius: 1rem; font-size: .9375rem; line-height: 1.45; opacity: 0; transform: translateY(.5rem); animation: vt-bulle .5s var(--mouvement) forwards; }
.vt .bulle--client { justify-self: end; background: var(--orange); color: var(--cacao); border-bottom-right-radius: .25rem; }
.vt .bulle--tchin { justify-self: start; background: var(--surface); color: var(--blanc); border-bottom-left-radius: .25rem; }
.vt .bulle:nth-child(1) { animation-delay: .9s; } .vt .bulle:nth-child(2) { animation-delay: 1.8s; } .vt .bulle:nth-child(3) { animation-delay: 2.7s; } .vt .bulle:nth-child(4) { animation-delay: 3.4s; }
.vt .bulle--saisie { display: flex; gap: .25rem; padding: .75rem .875rem; }
.vt .bulle--saisie i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--argile); animation: vt-saisie 1.2s ease-in-out infinite; }
.vt .bulle--saisie i:nth-child(2) { animation-delay: .15s; } .vt .bulle--saisie i:nth-child(3) { animation-delay: .3s; }
@keyframes vt-bulle { to { opacity: 1; transform: none; } }
@keyframes vt-saisie { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-.1875rem); } }

.vt .contact-moyens { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(2rem, 4vw, 4rem); }
.vt .contact-moyens__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bord); }
.vt .contact-carte { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.75rem, 3.4vw, 3.25rem); border-radius: var(--rayon); background: var(--blanc-pur); border: var(--trait) solid var(--filet); color: var(--cacao); text-decoration: none; transition: border-color .3s var(--mouvement), transform .3s var(--mouvement); }
.vt a.contact-carte:hover { border-color: var(--orange); transform: translateY(-.25rem); }
.vt .contact-carte__icone { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: .75rem; border-radius: 1rem; color: #fff; }
.vt .contact-carte--whatsapp .contact-carte__icone { background: #25D366; }
.vt .contact-carte--email .contact-carte__icone { background: var(--orange); color: var(--cacao); }
.vt .contact-carte__icone svg { width: 1.625rem; height: 1.625rem; fill: currentColor; }
.vt .contact-carte--email .contact-carte__icone svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.vt .contact-carte__etiquette { font: 400 .75rem/1.3 var(--petit); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-profond); }
.vt .contact-carte__valeur { font-size: clamp(1.75rem, 3.2vw, 3rem); line-height: 1.1; letter-spacing: -.01em; color: var(--cacao); text-decoration: none; overflow-wrap: anywhere; }
.vt .contact-carte__texte { color: var(--taupe); max-width: 40ch; }
.vt .contact-carte__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: auto; padding-top: 1rem; }
.vt .contact-carte__action { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; margin-top: auto; padding-bottom: .375rem; border-bottom: var(--trait) solid var(--orange); color: var(--cacao); text-decoration: none; }
.vt .contact-carte__actions .contact-carte__action { margin-top: 0; }
.vt .contact-carte__action .fleche { transition: transform .3s var(--mouvement); }
.vt .contact-carte:hover .contact-carte__action .fleche, .vt .contact-carte__action:hover .fleche { transform: translateX(.25rem); }
.vt .contact-carte__copier { padding: .5rem 1rem; border: var(--trait) solid var(--filet); border-radius: 999rem; background: var(--blanc); color: var(--cacao); font: 400 .875rem/1 var(--petit); cursor: pointer; transition: border-color .2s; }
.vt .contact-carte__copier:hover { border-color: var(--orange); }

.vt .contact-reseaux__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.vt .contact-reseaux__liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; list-style: none; }
.vt .contact-reseaux__liste li { transition-delay: calc(var(--i, 0) * 80ms); }
.vt .reseau-tuile { position: relative; display: flex; flex-direction: column; gap: .375rem; height: 100%; min-height: 12rem; padding: 1.5rem; border-radius: 1.25rem; background: var(--blanc); border: var(--trait) solid var(--filet); color: var(--cacao); text-decoration: none; overflow: hidden; transition: border-color .3s var(--mouvement), transform .3s var(--mouvement); }
.vt .reseau-tuile::before { content: ""; position: absolute; right: -30%; bottom: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--c); opacity: 0; transform: scale(.6); transition: opacity .35s var(--mouvement), transform .5s var(--mouvement); }
.vt .reseau-tuile:hover { border-color: var(--c); transform: translateY(-.25rem); }
.vt .reseau-tuile:hover::before { opacity: .12; transform: scale(1); }
.vt .reseau-tuile__icone { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: auto; border-radius: 50%; background: var(--c); color: #fff; }
.vt .reseau-tuile__icone svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
.vt .reseau-tuile__nom { position: relative; margin-top: 1.5rem; font-size: 1.25rem; }
.vt .reseau-tuile__action { position: relative; font: 400 .875rem/1.3 var(--petit); color: var(--taupe); }
.vt .reseau-tuile__fleche { position: absolute; top: 1.5rem; right: 1.5rem; transition: transform .3s var(--mouvement); }
.vt .reseau-tuile:hover .reseau-tuile__fleche { transform: rotate(-45deg); }

.vt .contact-locaux__grille { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.vt .contact-locaux__grille--carte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.vt .contact-locaux__adresse { margin-top: 1.25rem; white-space: pre-line; color: var(--taupe); }
.vt .contact-locaux__jour { display: inline-flex; align-items: center; gap: .5rem; margin: 1.5rem 0 1rem; padding: .375rem .875rem; border-radius: 999rem; background: var(--blanc); }
.vt .contact-locaux__jour i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--argile); }
.vt .contact-locaux__jour i.ouvert { background: #25D366; }
.vt .contact-locaux__heures { margin-bottom: 1.75rem; border-top: var(--trait) solid var(--filet); }
.vt .contact-locaux__heures div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: var(--trait) solid var(--filet); }
.vt .contact-locaux__heures dt { color: var(--taupe); }
.vt .contact-locaux__heures dd { margin: 0; }
.vt .contact-locaux__carte { position: relative; min-height: 22rem; overflow: hidden; border-radius: calc(var(--rayon) - .5rem); }
.vt .contact-locaux__carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Pied de page (17 oct. 2026) : la marque et ses réseaux, la lettre WhatsApp, les liens, la signature --- */
.vt .pied { position: relative; overflow: hidden; border-radius: var(--rayon); background: var(--nuit); color: var(--blanc); padding: var(--dedans) var(--dedans) 1.75rem; }
.vt .pied > * { position: relative; }
.vt .pied__haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 2.5rem clamp(2rem, 6vw, 7rem); padding-bottom: clamp(2.25rem, 4vw, 3.5rem); border-bottom: var(--trait) solid var(--bordure-sombre); }
.vt .pied__logo { width: clamp(8rem, 11vw, 11rem); height: auto; }
.vt .pied__marque p { margin-top: 1.5rem; color: var(--argile); max-width: 40ch; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
.vt .pied__reseaux { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.5rem; list-style: none; }
.vt .pied__reseaux a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: var(--trait) solid var(--bordure-sombre); background: var(--surface); color: var(--argile); transition: background-color .25s var(--mouvement), color .25s var(--mouvement), border-color .25s var(--mouvement), transform .25s var(--mouvement); }
.vt .pied__reseaux a:hover { background: var(--orange); border-color: var(--orange); color: var(--cacao); transform: translateY(-.125rem); }
.vt .pied__reseaux svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.vt .pied__lettre { display: grid; gap: .875rem; justify-self: end; width: min(100%, 36rem); }
.vt .pied__lettre h2 { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.15; }
.vt .pied__lettre > p:not(.pied__lettre-retour) { color: var(--argile); font-size: 1rem; max-width: 50ch; }
.vt .pied__desabonner { color: var(--argile); text-decoration: underline; text-underline-offset: .1875rem; }
.vt .pied__desabonner:hover { color: var(--blanc); }
.vt .pied__lettre-champ { display: flex; align-items: flex-end; gap: 1rem; margin-top: .5rem; }
.vt .pied__indicatif { flex: none; display: flex; align-items: baseline; gap: .125rem; width: 5.25rem; border-bottom: .125rem solid var(--bordure-sombre); transition: border-color .2s; }
.vt .pied__indicatif span { font-size: 1.1875rem; color: var(--argile); }
.vt .pied__indicatif input, .vt .pied__numero { width: 100%; min-width: 0; padding: .625rem 0; border: 0; background: transparent; color: var(--blanc); font: 400 1.1875rem/1.4 var(--titre); outline: none; caret-color: var(--orange); }
.vt .pied__numero { flex: 1; border-bottom: .125rem solid var(--bordure-sombre); transition: border-color .2s; }
.vt .pied__indicatif:focus-within, .vt .pied__numero:focus { border-bottom-color: var(--orange); }
.vt .pied__indicatif input::placeholder, .vt .pied__numero::placeholder { color: var(--argile); opacity: .6; }
.vt .pied__lettre-champ button { flex: none; display: inline-flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 1.375rem; border: 0; border-radius: 999rem; background: var(--orange); color: var(--cacao); font: 400 1rem/1 var(--titre); cursor: pointer; transition: background-color .24s var(--mouvement); }
.vt .pied__lettre-champ button:hover { background: var(--orange-ton); }
.vt .pied__lettre-champ button .fleche { transition: transform .3s var(--mouvement); }
.vt .pied__lettre-champ button:hover .fleche { transform: translateX(.1875rem); }
.vt .pied__lettre-champ button[disabled] { opacity: .6; pointer-events: none; }
.vt .pied__lettre-retour { min-height: 1.4em; font: 400 .875rem/1.4 var(--petit); color: #F2A08A; }
.vt .pied__lettre-retour.est-ok { color: var(--orange); }
.vt .pied__piege { position: absolute !important; left: -100vw; width: .0625rem; height: .0625rem; opacity: 0; }
.vt .pied__liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 6rem); padding: clamp(2rem, 3.5vw, 3rem) 0; border-bottom: var(--trait) solid var(--bordure-sombre); }
.vt .pied__colonne h2 { margin-bottom: 1.25rem; font: 400 .75rem/1.3 var(--petit); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.vt .pied__colonne ul { display: grid; gap: .875rem; list-style: none; }
.vt .pied__colonne a { display: inline-flex; align-items: center; gap: .375rem; color: var(--blanc); text-decoration: none; transition: color .24s var(--mouvement); }
.vt .pied__colonne a:hover { color: var(--orange); }
.vt .pied__externe { font-size: .8125rem; color: var(--argile); }
.vt .pied__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-top: 1.375rem; font: 400 .8125rem/1.4 var(--petit); color: var(--argile); }
.vt .pied__propulse { display: block; border-radius: .375rem; opacity: .85; transition: opacity .24s var(--mouvement); }
.vt .pied__propulse:hover { opacity: 1; }
.vt .pied__propulse img { height: 1.75rem; width: auto; }

/* --- Ordinateur moyen --- */
@media (max-width: 68.75em) {
  .vt .contact-reseaux__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt .entete__liens button { padding: .6875rem .625rem; }
  .vt .mega { grid-template-columns: minmax(0, 1fr); }
  .vt .mega__cartes { display: none; }
  .vt .entete__reseau { display: none; }

  .vt .entete__liens a { padding: .6875rem .75rem; }
}

/* --- Tablette et téléphone --- */
@media (max-width: 56.25em) {
  .vt .entete__nav, .vt .entete__actions .entete__reseau, .vt .entete__connexion--long { display: none; }
  .vt .mega { display: none !important; }
  .vt .contact-tete { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .vt .conversation { margin: 0 auto; }
  .vt .contact-moyens__grille, .vt .contact-locaux__grille--carte { grid-template-columns: minmax(0, 1fr); }
  .vt .contact-reseaux__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt .bandeau-page { grid-template-columns: 1fr; }
  .vt .entete__menu { display: grid; place-content: center; }
  .vt .entete__connexion--court { display: inline; }
  .vt .entete__barre { gap: .625rem; }
  .vt .entete__actions { margin-left: auto; }
  .vt .entete__connexion { border-left: 0; border-radius: 999rem; margin-left: 0; padding: 0 1rem; }
  .vt .heros { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .vt .heros__globe { min-height: 0; aspect-ratio: 1 / 1; order: 2; margin: 0 calc(-1 * var(--dedans) / 2) 1rem; }
  .vt .entete__actions { padding: .1875rem; }
  .vt .entete__connexion { height: 1.875rem; padding: 0 .75rem; font-size: .8125rem; gap: .25rem; }
  .vt .entete__connexion .fleche { display: none; }
  .vt .entete__menu { width: 2.25rem; height: 2.25rem; }
  .vt .entete__logo img { width: 5.75rem; }
  .vt .entete__barre { min-height: 3.25rem; }
  .vt .pile { grid-template-columns: 1fr; }
  .vt .pile__gauche { position: static; }
  .vt .carte-pile { top: calc(5rem + var(--n) * .75rem); }
  .vt .devs__entete { grid-template-columns: 1fr; }
  .vt .ide__corps { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .vt .ide__activite, .vt .ide__explorateur, .vt .ide__carte, .vt .ide__chemin { display: none; }
  .vt .ide__code { grid-template-columns: auto minmax(0, 1fr); }
  .vt .ide__etat span:nth-child(n+4) { display: none; }
  .vt .heros__faits { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt .heros__faits li:nth-child(3) { border-left: 0; }
  .vt .heros__faits li:nth-child(n+3) { border-top: var(--trait) solid var(--bordure-sombre); }
  .vt .principes, .vt .deux-colonnes, .vt .dev { grid-template-columns: 1fr; }
  .vt .couverture__texte { position: static; }
  .vt .pied__haut { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .vt .pied__lettre { justify-self: stretch; }
}
@media (max-width: 47.99em) {
  .vt .bulle-connexion { display: none; }
}
@media (max-width: 35em) {
  .vt .pays-ligne { grid-template-columns: 1fr; }
  .vt .pied__liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt .pied__lettre-champ { flex-wrap: wrap; }
  .vt .pied__numero { flex: 1 1 60%; }
  .vt .pied__lettre-champ button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .vt .bulle { opacity: 1; transform: none; }
  .vt *, .vt *::before, .vt *::after { animation: none !important; transition: none !important; }
  .js .vt .entree, .js .vt .apparait, .js .vt .curseur, .js .vt .cadre i { opacity: 1; transform: none; }
  .js .vt .cadre::before { clip-path: none; }
}

/* --- Tarifs v2 (20 oct. 2026) : défilement infini des moyens, cartes empilées par famille --- */
.vt .tarifs-tete { padding-bottom: 0; }
.vt .tarifs-tete__texte { padding: clamp(2.5rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 4rem); }
.vt .tarifs-tete h1 { font-size: clamp(2.4rem, 4.9vw, 6rem); line-height: 1.12; letter-spacing: -.01em; }
.vt .tarifs-tete h1 .ligne { display: block; padding: .06em 0; }
.vt .tarifs-tete h1 .entree { display: inline-block; }
.vt .tarifs-tete h1 .cadre { white-space: nowrap; }
.vt .tarifs-tete__chapeau { margin-top: 2rem; font-size: clamp(1.0625rem, 1.4vw, 1.375rem); color: var(--argile); max-width: 46ch; }
.vt .tarifs-tete__faits strong { color: var(--orange); }
.vt .tarifs-titre { font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1.08; }

/* Les pastilles qui défilent : logo, nom, tarif */
.vt .tarifs-pastille { display: inline-flex; align-items: center; gap: .875rem; padding: .625rem 1.5rem .625rem .625rem; border: var(--trait) solid var(--filet); border-radius: 999rem; background: var(--blanc-pur); white-space: nowrap; transition: border-color .24s var(--mouvement), transform .3s var(--mouvement); }
.vt .tarifs-pastille:hover { border-color: var(--orange); transform: translateY(-.1875rem); }
.vt .tarifs-pastille__logo { flex: none; display: grid; place-items: center; width: clamp(2.75rem, 3.6vw, 3.5rem); height: clamp(2.75rem, 3.6vw, 3.5rem); overflow: hidden; border-radius: 50%; }
.vt .tarifs-pastille__logo img { width: 100%; height: 100%; object-fit: cover; }
.vt .tarifs-pastille__nom { font-size: clamp(1.125rem, 1.5vw, 1.5rem); }
.vt .tarifs-pastille b { padding: .3125rem .75rem; border-radius: 999rem; background: var(--orange-pale); color: var(--orange-profond); font: 400 .9375rem/1 var(--petit); }

/* Les cartes empilées */
.vt .tarifs-carte-pile { gap: 1.25rem; }
.vt .tarifs-badge { padding: .3125rem .75rem; border-radius: 999rem; background: var(--orange); color: var(--cacao); font: 400 .75rem/1.2 var(--petit); letter-spacing: .06em; white-space: nowrap; }
.vt .tarifs-prix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .5rem 0; border-top: var(--trait) solid var(--filet); border-bottom: var(--trait) solid var(--filet); }
.vt .carte-pile--nuit .tarifs-prix, .vt .carte-pile--nuit .tarifs-prix div + div { border-color: var(--bordure-sombre); }
.vt .tarifs-prix div { display: grid; gap: .375rem; padding: 1.25rem 0; }
.vt .tarifs-prix div + div { padding-left: clamp(1rem, 2vw, 2rem); border-left: var(--trait) solid var(--filet); }
.vt .tarifs-prix strong { font-size: clamp(2.75rem, 5vw, 5rem); line-height: 1; letter-spacing: -.02em; color: var(--orange); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vt .tarifs-prix span { font: 400 .9375rem/1.3 var(--petit); color: var(--taupe); white-space: nowrap; }
.vt .carte-pile--nuit .tarifs-prix span { color: var(--argile); }
.vt .tarifs-logos { display: flex; margin-top: auto; }
.vt .tarifs-logos span { flex: none; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: 50%; border: .125rem solid var(--blanc-pur); background: var(--blanc-pur); transition: transform .3s var(--mouvement); }
.vt .tarifs-logos span + span { margin-left: -.625rem; }
.vt .carte-pile--nuit .tarifs-logos span { border-color: var(--nuit); }
.vt .tarifs-logos span:hover { transform: translateY(-.25rem); }
.vt .tarifs-logos img { width: 100%; height: 100%; object-fit: cover; }

/* Inclus, sur fond orange */
.vt .tarifs-inclus { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.vt .tarifs-pastilles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.vt .tarifs-pastilles li { display: inline-flex; align-items: center; gap: .5rem; padding: .5625rem 1.125rem; border-radius: 999rem; background: var(--blanc); font: 400 .9375rem/1.2 var(--petit); white-space: nowrap; transition: transform .24s var(--mouvement); }
.vt .tarifs-pastilles li:hover { transform: translateY(-.125rem); }
.vt .tarifs-pastilles svg { width: .875rem; height: .875rem; fill: none; stroke: var(--orange-profond); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.vt .tarifs-inclus__mesure { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: calc(var(--rayon) - .25rem); background: var(--blanc); }
.vt .tarifs-inclus__mesure .etiquette { margin-bottom: 0; }
.vt .tarifs-inclus__texte { color: var(--taupe); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; }

@media (max-width: 56.25em) {
  .vt .tarifs-inclus { grid-template-columns: minmax(0, 1fr); }
  .vt .tarifs-tete__faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 35em) {
  .vt .tarifs-pastille { gap: .625rem; padding: .5rem 1rem .5rem .5rem; }
  .vt .tarifs-pastille b { font-size: .8125rem; }
  .vt .tarifs-pastilles li { font-size: .8125rem; }
  .vt .tarifs-logos span { width: 2.25rem; height: 2.25rem; }
}
/* Tarifs (23 oct. 2026) : la ligne qui défile coupait le haut de la bordure orange d’une carte touchée (elle monte de .19rem) : de l’air en haut et en bas. */
.tarifs-defile .defile2__ligne { padding-block: .5rem; }
.tarifs-defile .defile2__ligne + .defile2__ligne { margin-top: -.25rem; }

/* Le pied v2 (23 oct. 2026) : quatre groupes ; une vraie icône de lien externe ; « Bientôt » pour ce qui n'est pas en ligne. */
.vt .pied__liens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vt .pied__colonne .pied__externe { width: .8em; height: .8em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .45; transition: opacity .24s var(--mouvement), transform .24s var(--mouvement); }
.vt .pied__colonne a:hover .pied__externe { opacity: 1; transform: translate(.1em, -.1em); }
.vt .pied__bientot { display: inline-flex; align-items: center; gap: .5rem; color: var(--argile); }
.vt .pied__bientot em { font: 400 .625rem/1 var(--petit); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .5rem; border-radius: 999rem; background: rgba(230, 122, 30, .16); color: var(--orange); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .vt .pied__liens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt .pied__bientot { flex-wrap: wrap; row-gap: .35rem; }
.vt .pied__bientot > span { white-space: nowrap; }
/* Propulsé par Wintg (23 oct. 2026) : la version courte du kit (sans la devise, illisible en petit) ; sur téléphone, le bas du pied centré. */
@media (max-width: 640px) { .vt .pied__bas { flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding-bottom: .5rem; } .vt .pied__propulse img { height: 2rem; } }