/* Landing « équipiers IA pour le Customer Success » (voir EquipiersCsPage).

   La maquette a été dessinée sans reset CSS : les valeurs par défaut du
   navigateur y comptent (content-box, liens soulignés, interligne normal). Le
   reset de Tailwind les change, et avec elles les hauteurs et les marges. Le
   cadre .eqcs les rétablit, pour que la page rende comme la maquette. */

/* Police auto-hébergée (Plus Jakarta Sans, licence OFL) : Ragnight ne fait pas
   appeler Google par ses visiteurs, sans bandeau de consentement. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans-latin-ext-977b89d0.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans-latin-817f351b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.eqcs { font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: #0B1426; background: #F6F8FB; width: 100%; min-width: 0; line-height: normal; }
.eqcs, .eqcs *, .eqcs *::before, .eqcs *::after { box-sizing: content-box; }
.eqcs a { color: #3F6212; text-decoration: underline; }
.eqcs a:hover { color: #1A2E05; }
.eqcs img, .eqcs svg { display: inline; vertical-align: baseline; max-width: none; }
/* Le contrôleur product-clip bascule ces deux classes : on ne dépend pas de la feuille Tailwind. */
.eqcs .hidden { display: none; }
.eqcs .inline-flex { display: inline-flex; }

@keyframes eqcs-flow { to { stroke-dashoffset: -24; } }
.eqcs .flow { stroke-dasharray: 6 6; animation: eqcs-flow 1.1s linear infinite; }
@keyframes eqcs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(138, 194, 1, .35); } 50% { box-shadow: 0 0 0 16px rgba(138, 194, 1, 0); } }
.eqcs .pulse { animation: eqcs-pulse 2.4s ease-in-out infinite; }
@keyframes eqcs-ping { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.6); opacity: 0; } }
.eqcs .ping { animation: eqcs-ping 1.6s ease-out infinite; }
@keyframes eqcs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.eqcs .bob { animation: eqcs-bob 3.2s ease-in-out infinite; }
.eqcs .bob2 { animation: eqcs-bob 3.2s ease-in-out .8s infinite; }
.eqcs .bob3 { animation: eqcs-bob 3.2s ease-in-out 1.6s infinite; }
.eqcs .bob4 { animation: eqcs-bob 3.2s ease-in-out 2.4s infinite; }
.eqcs .gridbg { background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 40px 40px; }
.eqcs .tile { transition: transform .2s; }
.eqcs .tile:hover { transform: translateY(-3px); }

@media (max-width: 900px) { .eqcs .conn { display: none; } }
/* La tête de Camille se pose sur le bord de l'agenda, à droite du texte. Quand
   l'agenda passe sous le texte (en dessous de ~1040 px), elle le recouvrirait :
   on la retire. La maquette ne dit pas ce qui se passe à cette largeur. */
@media (max-width: 1040px) { .eqcs .eqcs-peek { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .eqcs .flow, .eqcs .pulse, .eqcs .ping, .eqcs .bob, .eqcs .bob2, .eqcs .bob3, .eqcs .bob4 { animation: none; }
}

/* Titres : les tailles de la maquette à 1440 px, réduites sur téléphone (la
   maquette fixe 58 px et ne dit pas ce qui se passe en dessous). */
.eqcs .eqcs-h1 { font-size: clamp(34px, 6.2vw, 58px); }
/* Hero à deux colonnes dont la vidéo est la plus large : le titre loge dans une colonne plus étroite. */
.eqcs .eqcs-h1-hero { font-size: clamp(32px, 3.3vw, 48px); }
.eqcs .eqcs-h2 { font-size: clamp(28px, 4.5vw, 42px); }
.eqcs .eqcs-h2-44 { font-size: clamp(30px, 4.6vw, 44px); }
.eqcs .eqcs-h2-46 { font-size: clamp(30px, 4.8vw, 46px); }
.eqcs .eqcs-h2-38 { font-size: clamp(26px, 4vw, 38px); }
.eqcs .eqcs-h3-34 { font-size: clamp(26px, 3.6vw, 34px); }
.eqcs .eqcs-quote { font-size: clamp(20px, 2.4vw, 26px); }

/* Brief d'exemple du hero de la page Sales : au format 16:10 de la carte quand il y a la place, souple en
   dessous, où son texte serait plus haut que la carte et déborderait. */
.eqcs .eqcs-brief-box { aspect-ratio: 16 / 10; }
.eqcs .eqcs-brief-card { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 8%; }
@media (max-width: 560px) {
  .eqcs .eqcs-brief-box { aspect-ratio: auto; padding: 22px 18px 74px; }
  .eqcs .eqcs-brief-card { position: static; }
}

/* Lien d'évitement : hors écran, visible au focus clavier. Indépendant de
   Tailwind, dont la feuille compilée ne porte pas toujours ses classes. */
.eqcs-skip { position: absolute; left: -9999px; top: 0; }
.eqcs-skip:focus { left: 12px; top: 12px; z-index: 100; background: #0B1426; color: #8AC201; font: 600 15px "Plus Jakarta Sans", system-ui, sans-serif; padding: 10px 16px; border-radius: 10px; }

/* Pages entretien et « semaine » (planches Design du 08/10/2026). */
.eqcs .mate { transition: transform .2s; }
.eqcs .mate:hover { transform: translateY(-3px); }
.eqcs input:focus { outline: 3px solid #8AC201; outline-offset: 1px; }
.eqcs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* La file de Noa : chaque ticket (ou tous d'un coup) bascule de « sans Noa » à « avec Noa » par une case à cocher,
   sans JavaScript. */
.eqcs .q .avec { display: none; }
.eqcs .q li { position: relative; }
.eqcs .sw:checked ~ .q .sans, .eqcs .tsw:checked ~ .sans, .eqcs .tsw:checked ~ div .sans { display: none; }
.eqcs .sw:checked ~ .q p.avec, .eqcs .tsw:checked ~ p.avec { display: block; }
.eqcs .sw:checked ~ .q span.avec, .eqcs .tsw:checked ~ div span.avec { display: inline-block; }
.eqcs .knob { transition: transform .25s; }
.eqcs .track { transition: background .25s; }
.eqcs .tsw:checked ~ div .knob, .eqcs .sw:checked ~ .q .knob, .eqcs .sw:checked ~ .swl .knob { transform: translateX(22px); }
.eqcs .tsw:checked ~ div .track, .eqcs .sw:checked ~ .q .track, .eqcs .sw:checked ~ .swl .track { background: #8AC201; }
.eqcs .tsw:checked ~ div .hint, .eqcs .sw:checked ~ .q .hint { visibility: hidden; }
.eqcs .tsw:focus-visible ~ div .tk, .eqcs .sw:focus-visible ~ .swl { outline: 3px solid #8AC201; outline-offset: 3px; border-radius: 999px; }
@keyframes eqcs-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.eqcs .hint { animation: eqcs-nudge 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .eqcs .hint { animation: none; } }

/* Frise des pages « semaine » : date, puce et carte tiennent côte à côte sur grand écran ; sur téléphone la
   carte passe sous la date, sinon la page déborde de l'écran. */
@media (max-width: 560px) {
  .eqcs li[style*="110px 28px"] { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .eqcs li[style*="110px 28px"] > :nth-child(2) { display: none; }
}
@media (max-width: 560px) {
  .eqcs [style*="flex: 1 1 260px"] { box-sizing: border-box; max-width: 100%; }
}
/* Le tampon incliné de la page d'entretien dépasse d'un pixel : on le coupe, sans créer de défilement. */
.eqcs { overflow-x: clip; }

/* « Équipier ou agent IA ? » (pages/equipiers_cs/_difference) : repliée par défaut, dépliée au clic, sans
   JavaScript (<details>). Sur téléphone, le tableau se lit ligne par ligne, chaque case portant son en-tête. */
.eqcs .eqcs-diff > summary { list-style: none; cursor: pointer; transition: background .2s; }
.eqcs .eqcs-diff > summary::-webkit-details-marker { display: none; }
.eqcs .eqcs-diff > summary:hover { background: #1E2A42 !important; }
.eqcs .eqcs-diff > summary:focus-visible { outline: 3px solid #8AC201; outline-offset: 3px; }
.eqcs .eqcs-diff-icon { transition: transform .2s; }
.eqcs .eqcs-diff[open] .eqcs-diff-icon { transform: rotate(45deg); }
.eqcs .eqcs-diff-table { width: 100%; border-collapse: collapse; text-align: left; }
.eqcs .eqcs-diff-table th, .eqcs .eqcs-diff-table td { padding: 16px 14px; vertical-align: top; border-top: 1px solid #E3E8EF; font-size: 15px; line-height: 1.55; }
.eqcs .eqcs-diff-table thead th, .eqcs .eqcs-diff-table thead td { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #6B7689; }
.eqcs .eqcs-diff-table tbody th { width: 20%; font-weight: 800; color: #0B1426; }
.eqcs .eqcs-diff-table td.agent { color: #6B7689; }
.eqcs .eqcs-diff-table td.mate { color: #0B1426; background: #F4F9E8; }
@media (max-width: 720px) {
  .eqcs .eqcs-diff-table thead { display: none; }
  .eqcs .eqcs-diff-table, .eqcs .eqcs-diff-table tbody, .eqcs .eqcs-diff-table tr, .eqcs .eqcs-diff-table th, .eqcs .eqcs-diff-table td { display: block; width: auto; }
  .eqcs .eqcs-diff-table tr { border-top: 1px solid #E3E8EF; padding: 14px 0; display: flex; flex-direction: column; gap: 8px; }
  .eqcs .eqcs-diff-table tbody th { width: auto; border-top: 0; padding: 0; }
  .eqcs .eqcs-diff-table td { border-top: 0; padding: 10px 12px; border-radius: 12px; }
  .eqcs .eqcs-diff-table td.agent { background: #F6F8FB; }
  .eqcs .eqcs-diff-table td::before { content: attr(data-col); display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6B7689; margin-bottom: 4px; }
}