/* =========================================================
   GROUPE TEC : styles personnalisés (hors Webflow)
   Remplace le Custom code <head> (style) et l'embed "tec-styles".
   Chargé dans Site settings > Custom code > Head :
   <link rel="stylesheet" href="https://www.groupe-tec.com/2026/css/tec.css">
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--tec-navy:#1e4155;--tec-ink:#13232d;--tec-teal:#1a87a8;--tec-teal-light:#8dc5d5;--tec-teal-mid:#5d8fa3;--tec-teal-on-dark:#5fb8d3;--tec-text:#24465a;--tec-muted:#4b6575;--tec-line:#cdd3d6;--tec-soft:#f4f5f5;--tec-ph:#e5e9eb;--tec-red:#e30613;--tec-font-title:"Comfortaa",system-ui,sans-serif;--tec-font-body:"Manrope",system-ui,sans-serif;--tec-header-h:72px;--tec-radius:14px}
.tec-page{box-sizing:border-box}
.tec-page *{box-sizing:border-box}
.tec-page *::before{box-sizing:border-box}
.tec-page *::after{box-sizing:border-box}
.tec-ask{box-sizing:border-box}
.tec-ask *{box-sizing:border-box}
.tec-page{-webkit-font-smoothing:antialiased}
:where(.tec-page) h1{margin:0}
:where(.tec-page) h2{margin:0}
:where(.tec-page) h3{margin:0}
:where(.tec-page) p{margin:0}
:where(.tec-page) figure{margin:0}
:where(.tec-page) ul{margin:0}
:where(.tec-page) a{color:inherit;text-decoration:none}
:where(.tec-page) img{display:block;max-width:100%}
:where(.tec-page) video{display:block;max-width:100%}
.tec-page :focus-visible{outline:2px solid var(--tec-teal);outline-offset:3px}
.tec-text strong{color:var(--tec-navy);font-weight:700}
.tec-eyebrow::before{content:"+"}
.tec-logo__c::after{content:"";position:absolute;right:0.04em;top:50%;width:0.24em;height:0.24em;border-radius:50%;background:var(--tec-red);transform:translateY(-50%)}
.tec-btn:hover .tec-btn__label{background:var(--tec-navy)}
.tec-btn:hover .tec-btn__icon{background:var(--tec-navy)}
.tec-btn:hover .tec-btn__icon{transform:rotate(45deg)}
.tec-links{list-style:none}
.tec-link::before{content:"→";font-size:0.8em}
.tec-nav__link[aria-current="page"]{font-weight:800}
.tec-media::before{content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;font-size:12px;font-weight:600;letter-spacing:0.04em;text-align:center;color:#7a8c96}
.tec-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tec-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tec-media.is-missing img{display:none}
.tec-media.is-missing video{display:none}
.tec-header + .tec-split{border-top:0}
.tec-subnav + .tec-split{border-top:0}
.tec-split__text>*{max-width:30rem}
.tec-split__text>.tec-specs{max-width:26rem}
.tec-block .tec-stack{max-width:620px}
.tec-block--center .tec-stack{max-width:720px}
.tec-specs__row:last-child{border-bottom:0}
.tec-intro .tec-stack{gap:16px}
.tec-video{aspect-ratio:16 / 9}
.tec-play::before{content:"";margin-left:4px;border-left:15px solid var(--tec-navy);border-top:9px solid transparent;border-bottom:9px solid transparent}
.tec-bar{--tec-ratio:.5}
.tec-bar strong{margin-right:6px;font-size:0.95rem;font-weight:800;color:#fff}
.tec-bar__bracket::after{content:"";position:absolute;left:50%;width:1.5px;height:8px;background:rgba(255,255,255,.85)}
.tec-bar__bracket--top{width:calc(var(--tec-ratio) * 100%)}
.tec-bar__bracket--top::after{top:-9px}
.tec-bar__bracket--bottom::after{bottom:-9px}
.tec-bar__fill{width:calc(var(--tec-ratio) * 100%)}
.tec-card__media{aspect-ratio:1 / 1.05}
.tec-cards--3 .tec-card__media{aspect-ratio:16 / 11}
.tec-cards--feature .tec-card__media{aspect-ratio:1.42 / 1;border-radius:var(--tec-radius)}
.tec-card__media img{transition:transform .8s cubic-bezier(.16,.84,.3,1)}
.tec-card:hover .tec-card__media img{transform:scale(1.04)}
.tec-other .tec-card{max-width:380px}
.tec-other .tec-card__media{aspect-ratio:16 / 9}
.tec-footer ul{list-style:none;margin:0;padding:0}
.tec-footer a{transition:color .25s ease}
.tec-footer a:hover{color:#fff}
.tec-ask{user-select:none}
html.tec-menu-open{overflow:hidden}
@media (max-width:991px){:root{--tec-header-h:84px}
.tec-burger__line::before{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .3s ease,background-color .2s ease}
.tec-burger__line::after{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .3s ease,background-color .2s ease}
.tec-burger__line::before{content:"";position:absolute;left:0}
.tec-burger__line::after{content:"";position:absolute;left:0}
.tec-burger__line::before{top:-6px}
.tec-burger__line::after{top:6px}
.tec-header.is-open .tec-burger__line{background:transparent}
.tec-header.is-open .tec-burger__line::before{transform:translateY(6px) rotate(45deg)}
.tec-header.is-open .tec-burger__line::after{transform:translateY(-6px) rotate(-45deg)}
.tec-nav{visibility:hidden;overflow-y:auto}
.tec-header.is-open .tec-nav{opacity:1;visibility:visible;transform:none}
.tec-nav__link:hover{color:var(--tec-teal-light)}
.tec-split__media{aspect-ratio:4 / 3}
.tec-split__text>*{max-width:36rem}}
.tec-anim [data-anim="words"]:not(.is-split){opacity:0}
.tec-anim [data-anim="words"] .tec-word{opacity:0;transform:translateY(16px) rotate(3deg);transform-origin:0 100%;transition:opacity .7s ease,transform 1s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--tec-i,0) * 45ms);will-change:transform,opacity}
.tec-anim [data-anim="words"].is-in .tec-word{opacity:1;transform:none}
.tec-anim [data-anim="scale"]{opacity:0;transform:scale(.94);transform-origin:0 50%;transition:opacity .9s ease var(--tec-delay,.15s),transform 1.1s cubic-bezier(.16,.84,.3,1) var(--tec-delay,.15s)}
.tec-anim [data-anim="scale"].is-in{opacity:1;transform:none}
.tec-anim [data-anim="bar"] .tec-bar__track{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.16,.84,.3,1) .15s}
.tec-anim [data-anim="bar"] .tec-bar__fill{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.16,.84,.3,1) .15s}
.tec-anim [data-anim="bar"] .tec-bar__fill{transition-delay:.55s}
.tec-anim [data-anim="bar"] .tec-bar__label{opacity:0;transition:opacity .8s ease .9s}
.tec-anim [data-anim="bar"] .tec-bar__bracket{opacity:0;transition:opacity .8s ease .9s}
.tec-anim [data-anim="bar"].is-in .tec-bar__track{transform:none}
.tec-anim [data-anim="bar"].is-in .tec-bar__fill{transform:none}
.tec-anim [data-anim="bar"].is-in .tec-bar__label{opacity:1}
.tec-anim [data-anim="bar"].is-in .tec-bar__bracket{opacity:1}




/* ---------- Images des blocs texte / image (ex-Custom code head) ---------- */
.tec-media.tec-split__media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
}

/* ---------- Animations : état avant le démarrage de tec.js ----------
   Webflow ajoute la classe w-mod-js sur <html> dès le <head> : les éléments
   animés restent masqués jusqu'à ce que tec.js ajoute .tec-anim.
   Filet de sécurité : si tec.js ne charge pas, tout réapparaît après 2,5 s. */
html.w-mod-js:not(.tec-anim) [data-anim] {
  opacity: 0;
  animation: tec-failsafe 0s linear 2.5s forwards;
}
@keyframes tec-failsafe { to { opacity: 1; } }

/* ---------- Menu mobile (burger) : même rendu que le menu dessiné dans Webflow ----------
   Le burger ouvre la nav du header (.tec-header.is-open .tec-nav) : on lui donne
   le look du menu tec-mmenu-2 (plein écran bleu nuit, logo blanc, liens centrés). */
@media (max-width: 991px) {
  .tec-header.is-open { background-color: #1e4155; }
  .tec-header.is-open .tec-logo { background: url('../images/logo-tec-white.svg') no-repeat left center / contain; }
  .tec-header.is-open .tec-logo img { opacity: 0; }
  .tec-nav {
    top: 84px;                         /* = hauteur du header */
    align-items: center;
    justify-content: safe center;      /* centré, sans couper le haut si l'écran est bas */
    grid-row-gap: 56px; row-gap: 56px;
    padding: 24px 24px 84px;
    overflow-y: auto;
  }
  .tec-nav__link {
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
  }
  .tec-nav__link[aria-current="page"] { font-weight: 600; }
  .tec-nav .tec-btn-pill {
    color: #fff;
    background-color: #1a87a8;
    border-radius: 999px;
    padding: 7px 39px;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .25s;
  }
  .tec-nav .tec-btn-pill:hover { background-color: #22a0c4; }
  html.tec-menu-open .tec-ask { display: none; }   /* le bouton du chatbot ne passe pas sur le menu */
}
@media (max-width: 767px) {
  .tec-nav { grid-row-gap: 32px; row-gap: 32px; }
}
@media (max-width: 479px) {
  .tec-nav { top: 60px; grid-row-gap: 20px; row-gap: 20px; }   /* header de 60 px sur téléphone */
}

/* ---------- « Réduire les animations » activé (Windows, Bureau à distance…) ----------
   Les éléments apparaissent quand même, en fondu simple : aucun mouvement, aucun zoom. */
@media (prefers-reduced-motion: reduce) {
  .tec-anim [data-anim], .tec-anim [data-anim] * { transform: none !important; }
  .tec-anim [data-anim="scale"] { transition: opacity .6s ease !important; }
  .tec-anim [data-anim="words"] .tec-word { transition: opacity .6s ease !important; transition-delay: calc(var(--tec-i, 0) * 30ms) !important; }
}