/* ==========================================================================
   Thème du site — palette de marque
   ==========================================================================

   Chargé APRÈS taga.webflow.css dans layout.tsx.
   À spécificité égale, la dernière déclaration gagne : redéfinir une variable
   ici suffit, sans toucher au CSS Webflow d'origine.

   Ne pas modifier les couleurs dans le fichier Webflow : la valeur définie ici
   la remplacerait silencieusement. Tout se passe dans ce fichier.

   --------------------------------------------------------------------------
   MÉTHODE
   --------------------------------------------------------------------------
   Couleur de base demandée : #117C78 = hsl(178, 76%, 28%).
   Les couleurs compagnes sont dérivées de cette teinte 178, pas choisies à
   l'œil, puis leur luminosité est résolue pour le seuil WCAG que leur rôle
   réel impose dans cette feuille de style.

   Tons sombres : la luminosité d'origine est conservée, seule la teinte est
   réalignée. Les valeurs Webflow dépassaient déjà largement AAA ; les
   « ramener » vers un seuil aurait dégradé la lisibilité, pas l'inverse.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Échelle tonale de la teinte 178 — non utilisée par le CSS Webflow.
     Disponible pour les prochains ajustements : nuances de survol, bordures,
     fonds de section. Contraste indiqué face au blanc.
     ------------------------------------------------------------------------ */
  --brand-50: #f1fbfb;   /*  1.05:1  fond de section très clair */
  --brand-100: #dff9f8;  /*  1.10:1  fond clair, badges */
  --brand-200: #bdf2f0;  /*  1.23:1  bordures, séparateurs */
  --brand-300: #8be4e1;  /*  1.47:1  états désactivés */
  --brand-400: #3edad5;  /*  1.72:1  décoratif uniquement */
  --brand-500: #1dafab;  /*  2.70:1  décoratif — insuffisant pour du texte */
  --brand-600: #117c78;  /*  5.03:1  COULEUR DE BASE */
  --brand-700: #0c6461;  /*  6.97:1  survol du primaire */
  --brand-800: #084947;  /* 10.22:1  texte sur fond clair */
  --brand-900: #042f2d;  /* 14.49:1  titres */
  --brand-950: #011b1a;  /* 17.90:1  fonds sombres */

  /* ------------------------------------------------------------------------
     Variables réellement consommées par le CSS Webflow
     ------------------------------------------------------------------------ */

  /* Couleur de base. 41 usages : boutons principaux, bandeau CTA, hover des
     liens, blocs de contact.
     Webflow : #025747 */
  --_colors---color--primary-color: #117c78;

  /* Nom Webflow trompeur : ce n'est plus un jaune. Double rôle, 17 usages —
     texte sur fond primaire (.primary-button, .contact-submit) ET surface
     teintée (.navbar-menu-wrap, .contact-single-block, .secondary-button).
     Les deux rôles imposent la MÊME paire de contraste face au primaire,
     puisque .secondary-button inverse simplement fond et texte.
     Plafond structurel : sur #117C78, même du blanc pur ne dépasse pas
     5,03:1. Cette valeur atteint 4,66:1 tout en restant visiblement aqua
     (1,08:1 face au blanc).
     Webflow : #e4ffb8 (vert-jaune pâle) */
  --_colors---color--light-yellow-color: #e4fbfa;

  /* Accent sémantique. 2 usages, dont .less-price (prix affiché en texte).
     CORRIGE UNE ERREUR D'ACCESSIBILITÉ DU TEMPLATE : le #46ca83 d'origine ne
     donnait que 2,09:1 sur blanc, très en dessous des 4,5:1 requis pour du
     texte. Teinte décalée à 158 pour se distinguer du primaire tout en
     restant dans la même famille. Désormais 4,64:1.
     Webflow : #46ca83 */
  --_colors---color--accent-color: #1f845f;

  /* Fond sombre (.footer-section). Réalignement de teinte uniquement :
     l'écart avec l'original est imperceptible à l'œil, il ne sert que la
     cohérence de la palette. Texte blanc dessus : 20,04:1.
     Webflow : #000a08 */
  --_colors---color--black-bg: #000a0a;

  /* Texte principal. 64 usages : body, h1-h6, liens. Même remarque :
     réalignement de teinte, différence imperceptible, lisibilité préservée
     à 19,62:1 sur blanc.
     Webflow : #010c0a */
  --_colors---color--black-text-color: #010e0e;

  /* Texte secondaire, 17 usages. Même couleur que ci-dessus à 70% d'opacité.
     Réaligné pour rester cohérent avec le texte principal.
     Webflow : #010c0ab3 */
  --_colors---color--dark-text-primary: #010e0eb3;
}

/* ==========================================================================
   BANDE DÉFILANTE — COMTÉS ET SERVICES
   ==========================================================================

   Le template y plaçait six lockups gris d'entreprises inventées, en guise de
   « nos partenaires ». Les slots portent désormais les comtés et les services.

   L'animation n'est pas touchée : IX2 se déclenche sur `.marquee-section` par
   classe et translate chaque `.marquee-single-wrap` de 0 à −100 % sur 25 s.
   Aucun `data-w-id` n'entre en jeu, donc changer le contenu des slots est sans
   effet sur le défilement.

   `.marquee-logo-wrap` était calibré pour une image (`max-width: 133px`) : le
   texte doit définir sa propre largeur, sinon les libellés se rognent.
   ========================================================================== */

.marquee-logo-wrap.taga-marquee-item {
  display: flex;
  align-items: center;
  gap: 26px;
  width: auto;
  max-width: none;
  /* La marge d'origine était énorme (spacing-massive) pour espacer des logos ;
     le point de séparation joue ce rôle plus proprement pour du texte. */
  margin-right: 26px;
}

.taga-marquee-text {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--_colors---color--primary-color);
}

.taga-marquee-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--_colors---color--accent-color);
}

/* ==========================================================================
   ZONE DESSERVIE — CARTE ET BULLES DE COMTÉ
   ==========================================================================

   Le template affichait une carte du monde en pointillés avec les 5 cartes
   positionnées en absolu : `_01 { top: 24px; left: 309px }` et compagnie
   correspondaient à Dubaï, Sydney, Singapour, Londres et Toronto sur ce
   planisphère. Les coordonnées ne voulaient donc rien dire pour quatre comtés
   de l'Indiana — mais la DISPOSITION, elle, restait bonne. On ne remplace que
   la carte et les coordonnées, pas le principe.

   Carte : `indiana-service-area.svg`, composée depuis les fonds de carte de
   comté du domaine public de David Benbennick (Wikimedia Commons). Les 92
   comtés en tint clair, les 4 desservis en couleur primaire, halo pulsé au
   centre. Elle est en format portrait (ratio 0,654) : posée au centre du bloc,
   elle laisse ~490 px de gouttière de chaque côté à 1350 px de conteneur, où
   les bulles de 318 px se placent sans jamais recouvrir la carte.

   Les décalages horizontaux sont volontairement inégaux (0, 3,5 %, 0 à gauche ;
   0, 3 % à droite) : c'est ce qui donnait au template son aspect dispersé
   plutôt que tabulaire.

   Sous 992 px le template passe de lui-même en grille 2 colonnes avec les
   blocs en `position: static` ; on garde ce comportement et on retire
   simplement le planisphère qu'il posait en `background-image`.

   La forme signature de la bulle est conservée
   (`border-radius: 100px 60px 8px 100px`) ; seuls la couleur, la profondeur et
   le mouvement changent.
   ========================================================================== */

/* ---- desktop : carte centrée, bulles dispersées autour ---------------- */

@media (min-width: 992px) {
  .location-wrap {
    /* Hauteur du plus grand des deux : la carte (~524 px à 1350 px de
       conteneur) ou la pile de bulles (3 rangées, la dernière à 72 %). */
    min-height: 620px;
  }

  /* La carte occupe tout le bloc et se centre dedans, ce qui la garde alignée
     avec les gouttières quelle que soit la largeur. */
  .location-bg-wrap {
    z-index: 1;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 25 % laisse 37,5 % de gouttière de chaque côté. La bulle mesure 318 px, donc
     le cas le plus serré est le tout début du desktop (bloc de 962 px) : il reste
     23 px de dégagement, et ça ne fait que s'ouvrir plus haut. */
  .location-bg {
    width: 25%;
    min-width: 240px;
    max-width: 380px;
    height: auto;
    /* Garde-fou : si la hauteur disponible devient le facteur limitant,
       `contain` réduit la carte au lieu de l'écraser. */
    max-height: 94%;
    object-fit: contain;
  }

  /* Colonne de gauche. */
  .location-single-block._01 {
    inset: 0 auto auto 0;
  }

  .location-single-block._02 {
    inset: 36% auto auto 2%;
  }

  .location-single-block._04 {
    inset: 72% auto auto 0;
  }

  /* Colonne de droite. */
  .location-single-block._05 {
    inset: 6% 0 auto auto;
  }

  .location-single-block._03 {
    inset: 46% 1.5% auto auto;
  }
}

/* ---- sous 992 px : la grille du template, sans le planisphère --------- */

@media (max-width: 991px) {
  .location-wrap {
    background-image: none;
  }

  .location-details-wrap {
    width: 100%;
    max-width: none;
  }
}

/* ---- la bulle --------------------------------------------------------- */

.location-details-wrap {
  gap: 16px;
  padding: 10px;
  /* Le gris #f4f4f4 du template devient le ton clair de la marque. */
  background-color: var(--_colors---color--light-yellow-color);
  box-shadow: 0 1px 2px rgb(1 14 14 / 6%);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.45s ease;
}

.location-single-block:hover .location-details-wrap {
  transform: translateY(-6px);
  background-color: #eefdfc;
  box-shadow: 0 18px 40px -18px rgb(17 124 120 / 45%);
}

/* ---- la pastille photo ------------------------------------------------ */

.location-image-wrap {
  position: relative;
  /* Deux anneaux : un liseré blanc puis un halo à la couleur primaire. */
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 5px rgb(17 124 120 / 20%);
  transition:
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.location-single-block:hover .location-image-wrap {
  transform: scale(1.04);
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 6px var(--_colors---color--primary-color);
}

.location-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Léger surdimensionnement au repos pour que le zoom n'expose aucun bord. */
  transform: scale(1.03);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.location-single-block:hover .location-image {
  transform: scale(1.14);
}

.location-name {
  transition: color 0.35s ease;
}

.location-single-block:hover .location-name {
  color: var(--_colors---color--primary-color);
}

/* ---- apparition au défilement ----------------------------------------- */
/* Déclenché par <CountyReveal>, qui pose `taga-reveal-armed` puis
   `taga-reveal-in` quand la section entre dans la fenêtre.

   La première version utilisait `animation-timeline: view()`, en CSS pur. Deux
   erreurs : Firefox garde les animations pilotées par le défilement derrière un
   drapeau et Safari ne les a qu'à partir de la 26, donc le `@supports`
   n'animait rien du tout au lieu d'animer moins ; et chaque bulle avait sa
   propre timeline, ce qui les déclenchait à des positions de défilement
   différentes — du bruit, pas une vague.

   L'état masqué dépend de `.taga-reveal-armed`, que seul le JS ajoute. Aucune
   feuille de style ne cache donc quoi que ce soit d'elle-même : sans JS, sans
   IntersectionObserver ou en cas d'erreur, les bulles restent visibles. C'est
   la leçon du texte de hero du template, livré en `opacity: 0` et révélé
   uniquement par une interaction qui pouvait ne jamais tourner. */

.location-wrap.taga-reveal-armed .location-single-block {
  opacity: 0;
  transform: translateY(30px) scale(0.94);
  transition:
    opacity 0.5s ease-out,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  /* 5 bulles × 110 ms = 440 ms d'étalement, plus 750 ms de course : la vague
     dure ~1,2 s, assez lente pour être vue, assez courte pour ne pas retenir. */
  transition-delay: calc(var(--taga-reveal-i, 0) * 110ms);
}

.location-wrap.taga-reveal-armed.taga-reveal-in .location-single-block {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .location-details-wrap,
  .location-image-wrap,
  .location-image,
  .location-name {
    transition: none;
  }
}

/* ==========================================================================
   ICÔNES SOCIALES DU FOOTER
   ==========================================================================

   Le bloc social du template était conçu pour un fond CLAIR : bordure
   `dark-stroke`, icône noire visible au repos (les deux icônes empilées dans un
   cadre de 16px en `overflow: hidden`, `justify-content: flex-end` ne laissant
   voir que la dernière). Sur le footer sombre, la bordure et l'icône noire
   seraient invisibles.

   Cette variante inverse la logique : icône blanche au repos, icône sombre au
   survol sur un fond clair qui se remplit.

   L'échange se fait en CSS, pas via IX2 : l'animation d'origine était liée à
   des `data-w-id` précis, qui ne portent aucune donnée d'interaction pour de
   nouveaux éléments comme ceux-ci.
   ========================================================================== */

/* Toujours sur une seule ligne : `nowrap` plutôt que `wrap`, sinon la 4ᵉ icône
   passe à la ligne dès que la colonne se resserre. */
.taga-social-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

/* Cercle repris de `.social-link` mais agrandi (32 -> 40px) et rendu plus
   présent : un fond translucide au repos détache le bouton du footer sombre. */
.taga-social {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-color: rgb(255 255 255 / 22%);
  background-color: rgb(255 255 255 / 8%);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.taga-social-icon {
  width: 20px;
  height: 20px;
  /* Jamais masquée, ni au repos ni au survol. */
  opacity: 1;
}

/* Le survol renforce le contour et le fond, sans jamais toucher à l'icône.
   L'effet d'origine échangeait une icône blanche contre une sombre derrière un
   fond qui se remplissait : à mi-transition les deux étaient partiellement
   transparentes et l'icône semblait disparaître. */
.taga-social:hover {
  border-color: var(--_colors---color--light-yellow-color);
  background-color: rgb(255 255 255 / 18%);
}

/* Le titre « Follow Us » tient sur une ligne. La colonne fait environ 205px,
   largement de quoi l'accueillir — c'est le retour à la ligne automatique qui
   le coupait. */
.taga-nowrap {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .taga-social {
    transition: none;
  }
}

/* ==========================================================================
   TUILE NUMÉROTÉE (section « HOW SUPPORT IS DELIVERED » sur /about)
   ==========================================================================

   Cette section était la grille d'équipe du template : 4 portraits de personnes
   réelles présentées comme le personnel de Taga's. Aucun nom n'ayant été
   communiqué, elle présente désormais les 4 étapes d'accompagnement du client.

   `.team-image-wrap` n'a pas de hauteur propre — c'était l'image qui la
   donnait. Sans elle, la zone s'effondrait à zéro. `aspect-ratio` sur la tuile
   restitue la proportion portrait d'origine.
   ========================================================================== */

.taga-step-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  background-color: var(--_colors---color--light-yellow-color);
  color: var(--_colors---color--primary-color);
  font-family: var(--_typography---font-family--primary-font);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   LIENS DU MENU ET DU FOOTER — FENÊTRE DE DÉFILEMENT
   ==========================================================================

   Chaque lien empile deux copies du libellé (`[text-top]` et `[text-bottom]`).
   IX2 fait glisser l'une hors du cadre et l'autre dedans au survol ; le cadre
   ne doit donc laisser voir qu'une seule ligne.

   Webflow fixait ce cadre à `height: 24px`. Deux problèmes :

   1. Les polices concernées vont de 15 à 18px avec un line-height de 144–150 %,
      soit jusqu'à 26px par ligne. À 18px, une ligne unique dépassait déjà les
      24px : le libellé était rogné et on apercevait la copie suivante.
   2. Un libellé plus long que la colonne passait à la ligne, occupait 2 lignes
      et se faisait couper au milieu.

   Correction : la hauteur du cadre est exprimée en `em`, donc elle suit
   exactement le line-height à chaque palier, et les libellés ne peuvent plus
   passer à la ligne.
   ========================================================================== */

.nav-link {
  /* paragraph-02 line-height = 150% */
  height: 1.5em;
}

.footer-link {
  /* text-medium line-height = 144% */
  height: 1.44em;
}

.nav-link-text,
.footer-link-text {
  display: block;
  white-space: nowrap;
}

/* ==========================================================================
   MARQUE TEXTUELLE (en attente du logo client)
   ==========================================================================

   Le template livrait deux marques Serenova : brand-logo.svg dans le header et
   footer-logo.svg répété dans la bande défilante du footer. Les deux sont
   remplacées par le nom de l'entreprise en texte, le temps que le client
   fournisse son logo.

   À noter : `.brand-logo` n'avait aucune règle CSS — le SVG s'affichait à sa
   taille naturelle dans `.brand-logo-wrap`, une cellule de 156px maximum. D'où
   le verrouillage sur deux lignes ici : le nom complet sur une seule ligne ne
   tiendrait pas.

   Pour revenir à une image : remettre un <img className="brand-logo"> dans
   site-header.tsx et supprimer ce bloc.
   ========================================================================== */

.taga-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.taga-wordmark-name {
  font-family: var(--_typography---font-family--primary-font);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--_colors---color--primary-color);
}

.taga-wordmark-sub {
  margin-top: 3px;
  font-family: var(--_typography---font-family--secondary-font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--_colors---color--dark-text-primary);
}

@media screen and (max-width: 479px) {
  .taga-wordmark-name {
    font-size: 18px;
  }

  .taga-wordmark-sub {
    font-size: 8.5px;
    letter-spacing: 0.12em;
  }
}

/* Bande défilante du footer. Le slot d'origine était calibré pour une image
   (max-width 501px, overflow hidden) : le texte doit définir sa propre largeur,
   sinon il serait rogné — surtout en mobile où le slot descend à 200px. */
.footer-logo-wrap.taga-mark {
  width: auto;
  max-width: none;
  overflow: visible;
}

.taga-footer-wordmark {
  display: block;
  font-family: var(--_typography---font-family--primary-font);
  font-size: clamp(26px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--_colors---color--light-yellow-color);
}

/* ==========================================================================
   HERO — HAUTEUR NON BLOQUANTE
   ==========================================================================

   Webflow fixe `.hero-wrapper { height: 92vh }` avec le contenu aligné en bas
   (`justify-content: flex-end`), et `.hero-section` est en `overflow: hidden`.
   Comme `.header-section` est en `position: relative`, il occupe sa place :
   header + 92vh dépasse déjà la fenêtre.

   Conséquence : dès que le texte du hero est plus long que la copie Serenova
   d'origine — et celui de Taga's l'est — il s'étend vers le haut et se fait
   couper. Le texte devenait partiellement illisible.

   `height: auto` + `min-height` garde exactement le même rendu quand le texte
   est court, mais laisse le bloc grandir au lieu de rogner le contenu. Le
   padding haut évite que le texte vienne coller au menu sur petits écrans.
   ========================================================================== */

.hero-wrapper {
  height: auto;
  min-height: 92vh;
  padding-top: 32px;
}

/* ==========================================================================
   LISIBILITÉ SANS ANIMATION
   ==========================================================================

   Webflow livre les textes de héros avec `style="opacity:0"` en inline et
   compte entièrement sur l'interaction IX2 pour les révéler. C'est fragile :
   quand `prefers-reduced-motion` est actif, Webflow saute l'animation et
   l'élément reste à zéro indéfiniment — bug d'accessibilité connu de la
   plateforme.

   Du contenu ne doit jamais dépendre d'une animation pour être lisible.
   `!important` est nécessaire ici : seule cette déclaration bat un style
   inline.

   Liste explicite plutôt que `[data-w-id]` en bloc : tous les éléments ci-
   dessous sont des révélations de contenu. Forcer aveuglément tous les
   `[data-w-id]` risquerait d'afficher un élément légitimement masqué, comme un
   menu déroulant.

   WebflowRuntime.revealStuckElements() couvre les autres causes de blocage
   (bundle manquant, échec d'IX2) après un délai de 1200 ms.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Every IX2 target, not a hand-kept class list: under reduced motion Webflow
     skips all animations, so everything that would have been revealed must
     simply be visible. A list would silently miss elements as pages change —
     the restored About page alone has a dozen more.

     Safe here because Webflow's genuinely-hidden UI (nav menu, dropdowns,
     tabs) is toggled with `display`, not `opacity`. */
  [data-w-id] {
    opacity: 1 !important;
  }
}

/* ==========================================================================
   ICÔNES SVG
   ==========================================================================
   Les 45 icônes du jeu codaient les couleurs en dur (hex figé, pas
   currentColor). Changer les variables CSS seules les aurait laissées dans
   l'ancienne palette verte. Elles ont donc été réécrites dans
   public/assets/images/ — 104 remplacements :

     #025747 -> #117c78   50x   ancien primaire
     #e4ffb8 -> #e4fbfa   46x   ancien ton pâle
     #010c0a -> #010e0e    8x   ancien texte

   Cela inclut brand-logo.svg et footer-logo.svg, qui portent le logo du
   template Serenova et seront de toute façon remplacés par celui de Taga.

   Conséquence : ces icônes ne suivront PAS un futur changement de palette
   automatiquement. Pour les rendre pilotables par le CSS, il faudrait
   remplacer leurs valeurs figées par `currentColor`.
   ========================================================================== */

/* ==========================================================================
   CONTRASTES VÉRIFIÉS
   ==========================================================================
   paire                                    ratio    seuil   verdict
   ---------------------------------------------------------------------
   texte clair sur primaire (boutons)       4,66:1    4,5     OK
   texte primaire sur ton clair             4,66:1    4,5     OK
   texte principal sur blanc               19,62:1    7,0     OK (AAA)
   texte principal sur ton clair           18,20:1    4,5     OK
   accent en texte sur blanc                4,64:1    4,5     OK  (avant : 2,09 ECHEC)
   blanc sur fond sombre                   20,04:1    4,5     OK
   primaire en texte sur blanc              5,03:1    4,5     OK
   visibilité du ton clair sur blanc        1,08:1    1,05    OK

   Note : les boutons font 16px semi-bold, ce qui n'est PAS du « grand texte »
   au sens WCAG (seuil 24px, ou 18,7px en gras). Le seuil applicable est donc
   4,5:1 et non 3:1.
   ========================================================================== */