/* ============================================================
   HIG LAYER — AB Odyssée V6
   Application du Guide HIG Apple (couleur, accessibilité,
   typographie, mise en page). Chargé APRÈS main.css, qu'il
   corrige sans le modifier. Supprimer ce fichier annule tout.
   ============================================================ */

/* ---------- 1. Couleur : rôles sémantiques, contraste AA ---------- */
:root {
  /* Or lisible en texte : 5,6:1 sur --bg-main, 5,1:1 sur --bg-secondary */
  --accent-text: #7A5C1E;
  /* Label tertiaire : 5,4:1 sur --bg-main (était #8E8E93 à 2,9:1) */
  --text-light: #636366;
  --text-quaternary: #6E6E73;
}

.accent-gold-italic,
.text-\[var\(--accent\)\],
.text-\[\#C39F5F\],
.text-\[\#B08D3E\],
.text-\[\#B48A3C\],
.text-\[var\(--accent\)\]\/60,
.mobile-menu-manifesto {
  color: var(--accent-text) !important;
}

/* Sur fond sombre (pied de page), l'or clair reste le bon choix */
footer {
  --accent-text: #D4B15F;
}

footer .text-\[\#F6F2E8\]\/40,
footer .text-\[\#F6F2E8\]\/50 {
  color: rgba(246, 242, 232, 0.72) !important;
}

/* Gris codés en dur (page Diagnostic SEO) ramenés au label secondaire */
.text-gray-400,
.text-gray-500 {
  color: var(--text-light) !important;
}

/* Bouton d'envoi : fond teinté, texte blanc à 6,2:1 */
#contactForm button[type="submit"] {
  background: #7A5C1E !important;
  color: #fff !important;
}

/* La couleur ne porte jamais seule l'information : liens de contenu soulignés */
main p a:not([class*="btn"]),
main li a:not([class*="btn"]) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-contrast: more) {
  :root {
    --accent-text: #5C4410;
    --text-light: #3A3A3C;
    --text-muted: #1C1C1E;
    --separator: rgba(60, 60, 67, 0.45);
  }
}

/* ---------- 2. Typographie : taille minimale, pas de césure ---------- */
.text-\[10px\],
.text-\[9px\],
.text-\[11px\] {
  font-size: 12px !important;
}

p, li, h1, h2, h3, h4, span, a, label, blockquote {
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}

/* ---------- 3. Accessibilité : focus visible, cibles de 44 px ---------- */
:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 6px;
}

#mobileNavToggle {
  width: 44px;
  height: 44px;
  gap: 6px !important;
}

.hig-lang a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

footer a[aria-label="LinkedIn"] {
  min-width: 44px;
  min-height: 44px;
}

footer a[href^="mailto"] {
  white-space: nowrap;
}

/* ---------- 4. Menu mobile ---------- */
.mobile-menu-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html.menu-open,
html.menu-open body {
  overflow: hidden !important;
}

html.menu-open #ulysse-widget {
  display: none !important;
}

/* Croix de fermeture : deux barres égales croisées au centre */
#mobileNavToggle[aria-expanded="true"] span {
  width: 1.5rem !important;
}

#mobileNavToggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg) !important;
}

#mobileNavToggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg) !important;
}

.mobile-menu-link[aria-current="page"] {
  color: var(--accent-text) !important;
}

.mobile-menu-link[aria-current="page"]::after {
  width: 100%;
}

.mobile-menu-nav {
  gap: clamp(1rem, 4vh, 2.5rem) !important;
}

.mobile-menu-manifesto {
  margin-bottom: clamp(1.5rem, 6vh, 4rem) !important;
}

/* ---------- 5. Mise en page mobile ---------- */
@media (max-width: 639px) {

  /* Le premier bloc de chaque page commence sous l'en-tête fixe (96 px) */
  section.pt-40,
  section.hero-section-spacing,
  main > section:first-child {
    padding-top: 7.5rem !important;
  }

  /* Une grille « 1 colonne » reste sur 1 colonne */
  .grid.grid-cols-1,
  .grid.grid-cols-1.sm\:grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
  }

  .grid.grid-cols-1 > div,
  .grid.grid-cols-1.sm\:grid-cols-3 > div {
    padding: 1.25rem !important;
    text-align: left !important;
  }

  .grid.grid-cols-1 h3,
  .grid.grid-cols-1.sm\:grid-cols-3 h3,
  .grid.grid-cols-1 h4 {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  .grid.grid-cols-1 p,
  .grid.grid-cols-1 p.text-sm,
  .grid.grid-cols-1.sm\:grid-cols-3 p.text-sm {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

}

/* ============================================================
   6. BOUTONS — fiche « Boutons » du guide
   Cible 44 px minimum, un seul bouton principal (teinté) par
   zone, bouton secondaire bordé de même hauteur, 12 px d'écart.
   ============================================================ */
.hero-btn-primary,
.hero-btn-secondary,
.btn-action,
.btn-primary-outline,
main a[class*="rounded-full"][class*="border"],
.cookie-btn {
  min-height: 48px !important;
  padding: 0.75rem 1.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal;
  text-wrap: balance;
  box-sizing: border-box;
}

/* Principal : fond teinté, texte blanc (6,2:1) */
.hero-btn-primary {
  background: var(--accent-text) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

.hero-btn-primary:hover,
.hero-btn-primary:focus-visible {
  background: #654B16 !important;
  color: #fff !important;
}

footer .hero-btn-primary {
  background: #D4B15F !important;
  color: #1C1C1E !important;
}

/* Pas de reflet animé : le retour visuel est le changement de teinte */
.hero-btn-primary::after,
.hero-btn-primary::before {
  display: none !important;
}

/* Secondaire : bordé, même gabarit */
.hero-btn-secondary,
.btn-primary-outline {
  background: transparent !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(60, 60, 67, 0.36) !important;
}

.hero-btn-secondary:hover,
.btn-primary-outline:hover {
  border-color: var(--text-main) !important;
}

/* Bouton de l'en-tête : version compacte, toujours sur une ligne */
#mainHeader .hero-btn-primary {
  min-height: 44px !important;
  padding: 0.5rem 1.25rem !important;
  font-size: 0.8125rem !important;
  white-space: nowrap;
}

/* Liens d'action en texte : zone de toucher de 44 px */
main a[class*="border-b"]:not([class*="rounded"]):not(p a),
.mobile-menu-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Groupes de boutons : 12 px entre deux boutons */
.hero-buttons,
main .flex:has(> .hero-btn-primary):has(> .hero-btn-secondary) {
  gap: 12px !important;
}

@media (max-width: 639px) {
  /* Sur téléphone, les boutons d'une même zone ont la même largeur */
  main .hero-btn-primary,
  main .hero-btn-secondary,
  main .btn-action,
  main .btn-primary-outline,
  main a[class*="rounded-full"][class*="border"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   7. HIÉRARCHIE — surtitre, titre, sous-titre, corps
   Échelle inspirée des styles de texte (Large Title 34,
   Title 1 28, Title 2 22, Title 3 20, Body 17, Footnote 13).
   ============================================================ */
h1, h2, h3, h4 {
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

p, li, blockquote, summary {
  text-wrap: pretty;
}

/* Un mot doré au fil du titre reste dans la phrase */
h1 .accent-gold-italic,
h2 .accent-gold-italic,
h3 .accent-gold-italic {
  display: inline !important;
}

/* Sous-titre écrit après un retour à la ligne : toujours sur sa propre ligne */
h1 br + .accent-gold-italic,
h2 br + .accent-gold-italic {
  display: block !important;
  margin-top: 0.15em;
}

/* Surtitre (libellé de section) : même style partout */
section p[class*="uppercase"][class*="tracking"],
section span[class*="uppercase"][class*="tracking"]:not(a span):not(button span) {
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
}

@media (max-width: 639px) {
  section h1:not(#_) {
    font-size: 2.125rem !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em;
    margin-bottom: 1rem !important;
  }

  section h2:not(#_) {
    font-size: 1.75rem !important;
    line-height: 1.18 !important;
    margin-bottom: 0.75rem !important;
  }

  section h3:not(#_) {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
  }

  section h4:not(#_) {
    font-size: 1.0625rem !important;
    line-height: 1.3 !important;
    font-weight: 600;
  }

  /* Le titre de haut de page s'aligne sur le reste du bloc */
  section h1:not(#_),
  .hero-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Le sous-titre doré reste plus petit que son titre */
  h1 .accent-gold-italic,
  h2 .accent-gold-italic {
    font-size: 0.82em !important;
  }

  /* Les retours à la ligne forcés ne valent que devant un sous-titre */
  h1 br:not(:has(+ .accent-gold-italic)),
  h2 br:not(:has(+ .accent-gold-italic)),
  h3 br, p br {
    display: none;
  }

  /* Corps : 17 px pour le texte d'introduction, 16 px courant, 15 px en carte */
  main p.text-lg,
  main p.text-xl {
    font-size: 1.0625rem !important;
    line-height: 1.55 !important;
  }

  main p.text-base {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  main p.text-sm,
  .grid.grid-cols-1 p,
  .grid.grid-cols-1 p.text-sm {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
  }

  /* Un même bloc = un même alignement : surtitre, titre, sous-titre et texte à gauche */
  main section h1,
  main section h2,
  main section h3,
  main section p,
  main section .text-center {
    text-align: left !important;
  }

  main section p.mx-auto,
  main section h1.mx-auto,
  main section h2.mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Haut de page d'accueil : surtitre, titre et texte sur le même axe */
  #hero .items-center:not(a):not(button) {
    align-items: flex-start !important;
  }

  #hero p,
  #hero h1 {
    text-align: left !important;
    align-self: flex-start;
  }

  /* Le libellé d'un bouton reste centré */
  main a[class*="btn"] *,
  main button * {
    text-align: center !important;
  }
}

@media (min-width: 640px) {
  section h1 { line-height: 1.08; }
  section h2 { line-height: 1.12; }
  /* Longueur de ligne confortable, pour le texte courant uniquement
     (un surtitre ne doit pas être borné : il se décalerait de l'axe du titre) */
  main p.text-base,
  main p.text-lg,
  main p.text-xl { max-width: 68ch; }
  main .text-center p.text-base,
  main .text-center p.text-lg,
  main .text-center p.text-xl,
  main p.mx-auto { margin-left: auto; margin-right: auto; }
  main .text-left p { margin-left: 0; margin-right: 0; }

  /* Cartes d'une même rangée : même hauteur */
  .grid.grid-cols-1.sm\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-3 { align-items: stretch !important; }
  .grid.grid-cols-1.sm\:grid-cols-3 > .glass-card,
  .grid.grid-cols-1.md\:grid-cols-3 > .glass-card { height: 100%; }
}

/* Haut de page d'accueil sur grand écran : tout le bloc est centré */
@media (min-width: 640px) {
  #hero h1,
  #hero p {
    text-align: center !important;
  }
}

/* ============================================================
   8. SURVOL — aucun déplacement du bouton
   Le retour visuel se limite à la teinte ; la transition ne
   porte plus sur la position (elle faisait « suivre » le bouton).
   ============================================================ */
.hero-btn-primary,
.hero-btn-secondary,
.btn-action,
.btn-primary,
.btn-primary-outline,
.btn-gold,
.cookie-btn,
.ulysse-toggle,
.ulysse-send,
.ulysse-minimize {
  transition-property: background-color, border-color, color, box-shadow, opacity !important;
  transition-duration: 0.2s !important;
}

.hero-btn-primary:hover,
.hero-btn-primary:focus,
.hero-btn-secondary:hover,
.btn-action:hover,
.btn-primary:hover,
main .btn-primary:hover,
.btn-primary-outline:hover,
.btn-gold:hover,
.cookie-btn:hover,
.ulysse-toggle:hover,
.ulysse-send:hover,
.ulysse-minimize:hover {
  transform: none;
}

/* ============================================================
   9. ULYSSE — mêmes règles que le site
   Couleur : rôles du site, un seul accent, aucun dégradé.
   Typographie : police du site, 17 / 16 / 13 px.
   Boutons : cibles de 44 px, une seule commande de fermeture.
   Mouvement : fondu simple, aucun déplacement au survol.
   ============================================================ */
#ulysse-widget {
  --ulysse-primary: var(--accent-text);
  --ulysse-primary-dark: #654B16;
  --ulysse-bg: var(--bg-main);
  --ulysse-bg-secondary: var(--bg-secondary);
  --ulysse-text: var(--text-main);
  --ulysse-text-muted: var(--text-light);
  --ulysse-border: var(--separator);
  --ulysse-message-bg: #fff;
  font-family: var(--font-sans) !important;
}

#ulysse-widget * {
  font-family: var(--font-sans) !important;
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
  letter-spacing: normal !important;
}

/* Bouton d'ouverture : fond d'accent, icône blanche (6,2:1) */
.ulysse-toggle {
  width: 56px !important;
  height: 56px !important;
  background: var(--accent-text) !important;
  border: 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}

.ulysse-toggle,
.ulysse-toggle:hover,
.ulysse-toggle.active,
.ulysse-send,
.ulysse-send:hover,
.ulysse-send:active,
.ulysse-minimize:hover {
  transform: none !important;
}

.ulysse-toggle:hover {
  background: #654B16 !important;
}

.ulysse-toggle-pulse {
  display: none !important;
}

/* Fenêtre ouverte : une seule commande de fermeture, dans l'en-tête */
.ulysse-toggle.active {
  display: none !important;
}

.ulysse-chat {
  bottom: 0 !important;
  border: 1px solid var(--separator) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16) !important;
  background: var(--bg-main) !important;
  transform: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* En-tête : fond de regroupement, pas de dégradé */
.ulysse-header {
  padding: 12px 12px 12px 16px !important;
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--separator) !important;
}

.ulysse-avatar,
.ulysse-message-avatar {
  background: var(--accent-text) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* La pastille verte ne porte aucune information vérifiable */
.ulysse-status {
  display: none !important;
}

.ulysse-header-text h3 {
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--text-main) !important;
  margin: 0 !important;
}

.ulysse-header-text p {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--text-light) !important;
  margin: 0 !important;
}

.ulysse-minimize {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--text-main) !important;
}

.ulysse-minimize:hover {
  background: rgba(60, 60, 67, 0.08) !important;
}

.ulysse-minimize svg {
  width: 20px !important;
  height: 20px !important;
}

/* Messages */
.ulysse-messages {
  padding: 16px !important;
  gap: 12px;
}

.ulysse-message-bubble {
  border-radius: 16px !important;
  box-shadow: none !important;
  border: 1px solid var(--separator) !important;
  padding: 10px 14px !important;
}

.ulysse-message-bot .ulysse-message-bubble {
  background: #fff !important;
}

.ulysse-message-user .ulysse-message-bubble {
  background: var(--accent-text) !important;
  border-color: transparent !important;
}

.ulysse-message-bubble p {
  font-size: 16px !important;
  line-height: 1.45 !important;
  text-wrap: pretty;
  margin: 0 !important;
}

.ulysse-message-time,
.ulysse-message-bot .ulysse-message-time {
  font-size: 12px !important;
  color: var(--text-light) !important;
  margin-top: 4px !important;
}

.ulysse-message-user .ulysse-message-time {
  color: rgba(255, 255, 255, 0.92) !important;
}

.ulysse-message-bubble a {
  color: var(--accent-text) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ulysse-message-user .ulysse-message-bubble a {
  color: #fff !important;
}

/* Saisie */
.ulysse-input-container {
  padding: 12px 16px 12px !important;
  background: var(--bg-main) !important;
  border-top: 1px solid var(--separator) !important;
}

.ulysse-form {
  gap: 12px !important;
  align-items: center !important;
}

/* 16 px : pas de zoom automatique à la saisie sur iPhone */
.ulysse-input {
  font-size: 16px !important;
  min-height: 44px !important;
  background: #fff !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(60, 60, 67, 0.3) !important;
  border-radius: 22px !important;
  padding: 0 16px !important;
}

.ulysse-input:focus {
  border-color: var(--accent-text) !important;
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
}

.ulysse-input::placeholder {
  color: var(--text-light) !important;
  opacity: 1;
}

.ulysse-send {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  border-radius: 50% !important;
  background: var(--accent-text) !important;
  box-shadow: none !important;
  color: #fff !important;
}

.ulysse-send:hover {
  background: #654B16 !important;
}

.ulysse-typing span {
  background: var(--text-light) !important;
}

.ulysse-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-light);
  margin: 8px 0 0;
  text-align: left;
}

@media (max-width: 480px) {
  /* Sur téléphone : feuille pleine largeur, marges de 16 px */
  .ulysse-chat {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    height: min(560px, calc(100dvh - 128px)) !important;
    max-height: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ulysse-chat,
  .ulysse-message-animate,
  .ulysse-typing span {
    transition: none !important;
    animation: none !important;
  }
}
.ulysse-send { height: 44px !important; }
.ulysse-message-content { max-width: calc(100% - 44px) !important; }

/* Lien client du bandeau de confiance : souligné (la couleur ne suffit pas), cible de 44 px */
.trust-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(28, 28, 30, 0.35);
  transition: text-decoration-color 0.2s, color 0.2s;
}

.trust-link:hover,
.trust-link:focus-visible {
  color: var(--accent-text) !important;
  text-decoration-color: currentColor;
}

/* Bandeau de confiance : libellé et nom centrés sur le même axe */
main section#trust-band p {
  text-align: center !important;
}