/* ============================================================
   CHARTE COMPAS CLAIR — variante APPLE (apercu, non publique)
   Mission COMPAS-APPLE-V1 — 2026-09-23
   Servie uniquement derriere ?apercu=1 (compas_chat_apple.html).
   Ne remplace pas charte_clair.css (COMPAS-CHARTE-CLAIR-V2, 2026-07-18) :
   coexistence, la production reste inchangee jusqu'au GO de Dany.
   Tokens de couleur d'action et police signature repris tels quels de
   /opt/a360/config/palettes_blogs.json (BLOGS-RENOVATION-PALETTES-V1,
   valide Dany 23/09/2026) — seule source de verite pour ces valeurs.
   ============================================================ */

:root {
  /* Pile systeme — identique aux 3 blogs A360, zero Google Fonts */
  --police-systeme: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Police signature (une seule expression italique a empattement), surchargee en JS
     selon l'origine (src=blog-perc -> Newsreader, blog-sport -> Alegreya,
     blog-up/defaut -> Source Serif 4). Repli avant chargement JS : serif systeme. */
  --police-signature: Georgia, "Times New Roman", serif;

  /* Couleur d'action selon l'origine, surchargee en JS depuis palettes_blogs.json.
     Defaut = graphite (blog-up et defaut, C2). */
  --cta-couleur: #5B6069;
  --cta-texte: #FFFFFF;

  /* Echelle d'espacement A360/Apple (interface-apple-a360), en rem sur base 16px */
  --esp-1: .5rem;   /* 8px */
  --esp-2: 1rem;    /* 16px */
  --esp-3: 1.5rem;  /* 24px */
  --esp-4: 2.5rem;  /* 40px */
  --esp-5: 4rem;    /* 64px */
  --esp-6: 6rem;    /* 96px */

  /* Largeur de conversation (C1) */
  --largeur-conversation: 720px;

  /* Fond des suggestions selon l'origine (D3), surchargé en JS. Defaut = utilepratique. */
  --chip-fond: #F5F5F7;
  --chip-texte: #3A3D42;
  --bouton-fond: #5B6069;
  --bouton-texte: #FFFFFF;
}

/* ============================================================
   COMPAS-APPLE-V2 (2026-09-23) — D1 a D6, sur compas_chat_apple.html
   et charte_clair_apple.css uniquement. compas_chat.py intouche.
   ============================================================ */

/* ---------- D3 : fond de page blanc ---------- */
body, header, main, #progress-bar, .saisie {
  background: #FFFFFF !important;
}

/* ---------- D1 : en-tete aligne sur la colonne de 720px ----------
   Meme formule que #fil/#optin-wrapper/.saisie form (max-width 720 + marge auto)
   mais exprimee en padding pour ne pas exiger de wrapper HTML supplementaire :
   a gauche/droite du header, la meme distance qu'a gauche/droite de la colonne. */
header {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: max(20px, calc((100% - 760px) / 2 + 20px)) !important;
  padding-right: max(20px, calc((100% - 760px) / 2 + 20px)) !important;
}
header .marque { display: none !important; }
/* Le gabarit d'origine reduit le padding lateral de .saisie a 14px sous 560px
   (media query non touchee, hors perimetre) : on le realigne sur 20px pour que
   le bord gauche de la zone de saisie reste identique a celui du header/#fil a
   toutes les largeurs, y compris 390px (D1). */
.saisie { padding-left: 20px !important; padding-right: 20px !important; }

/* ---------- D2 : titre, expression signature, sous-titre ---------- */
.hero-promesse h2 {
  font-size: clamp(40px, 4.6vw, 56px) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
}
.hero-promesse p {
  font-size: 20px !important;
  line-height: 1.5 !important;
}

/* ---------- D3 : suggestions sur la couleur claire du blog d'origine ---------- */
.chip-reponse {
  background: var(--chip-fond) !important;
  color: var(--chip-texte) !important;
  border-color: transparent !important;
}
.chip-reponse:hover { filter: brightness(1.07) !important; }
.chip-autre {
  background: transparent !important;
  border: 1px solid var(--chip-texte) !important;
  border-style: solid !important;
  opacity: .55;
}
.chip-autre:hover { opacity: .8; filter: none !important; }

/* ---------- D4 : compteur d'inscrits masque ---------- */
.compteur-inscrits { display: none !important; }

/* ---------- D6 : mention de transparence, 14px minimum, contraste WCAG 4,5 ----------
   #4A4438 sur #FFFFFF = 9.4:1 (bien au-dessus de 4,5:1), remplace --texte-doux
   (#4A4438 sur --fond original) pour rester conforme sur le nouveau fond blanc (D3). */
.mention-ia {
  font-size: 14px !important;
  color: #4A4438 !important;
}

/* ---------- Typographie systeme partout, sauf .sig ---------- */
body, header, main, .saisie,
.titres .etiquette, .titres h1, header .marque,
.mention-ia, .compteur-inscrits, .hero-promesse h2, .hero-promesse p,
.chip-reponse, .bulle, #optin-wrapper h2, #optin-wrapper p,
.optin-fields input, #optin-submit, #message, #send-btn,
.progress-label, .rapport-web-card, .rapport-web-card * {
  font-family: var(--police-systeme) !important;
}

/* ---------- 0 texte sous 12px (C3) ---------- */
.titres .etiquette, .optin-kicker {
  font-size: 12px !important;
}

/* Interlettrage/interlignage selon la taille (skill interface-apple-a360) */
.titres h1 { letter-spacing: -.01em; line-height: 1.15; }
.hero-promesse h2 { letter-spacing: -.015em; line-height: 1.15; }
.titres .etiquette, .mention-ia { letter-spacing: .06em; }
body, .bulle, .hero-promesse p, #optin-wrapper p { line-height: 1.65; }

/* ---------- L'unique expression signature, italique a empattement ---------- */
.sig {
  font-family: var(--police-signature) !important;
  font-style: italic;
  font-weight: 500;
}

/* ---------- Couleur d'action (C2) ----------
   Specificite button#send-btn (0,1,1) pour battre la meme regle dans
   compas_apercu_bilan_clair.css (chargee avant celle-ci). */
button#send-btn, button#optin-submit, #send-btn, #optin-submit {
  background: var(--cta-couleur) !important;
  color: var(--cta-texte) !important;
}
.chip-reponse:hover, .chip-reponse:focus-visible { border-color: var(--cta-couleur) !important; }
.chip-autre { color: var(--cta-couleur) !important; }
.compteur-inscrits, .titres .etiquette { color: var(--cta-couleur) !important; }
#message:focus { border-color: var(--cta-couleur) !important; }

/* ---------- Reponse au toucher (skill interface-apple-a360) ---------- */
.chip-reponse, #send-btn, #optin-submit, #optin-wrapper .cloture-lien a {
  transition: transform 100ms ease-out !important;
}
.chip-reponse:active, #send-btn:active, #optin-submit:active {
  transform: scale(.97) !important;
}

/* ---------- Cibles de 44 px minimum (C1/C3) ---------- */
.chip-reponse, #send-btn, #optin-submit, #message { min-height: 44px; }

/* ---------- Zone de saisie fixe, marge de securite iPhone (C1) ---------- */
.saisie {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Accessibilite du mouvement, trois signaux independants ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .chip-reponse:active, #send-btn:active, #optin-submit:active { transform: none !important; }
}
@media (prefers-contrast: more) {
  .bulle, .chip-reponse, #message, .optin-fields input {
    border-width: 2px !important;
  }
  #send-btn, #optin-submit { outline: 2px solid var(--cta-texte); outline-offset: -4px; }
}

/* ============================================================
   COMPAS-APPLE-V3 (2026-09-25) — etats de conversation complets +
   gabarit par defaut. Couvre tous les selecteurs JS : bulles,
   frappe, chips pilule, progression, optin, banniere, rapport.
   ============================================================ */

/* ---------- En-tete barre Apple identique a l'accueil ----------
   logo-rond masque, .titres h1 masque, .etiquette = AUTONOMIE 360
   capitales espacees. Backdrop translucide : blanc semi-transparent. */
header {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  background: rgba(255,255,255,0.85) !important;
  border-bottom: 1px solid #E5E5EA !important;
}
.logo-rond { display: none !important; }
.titres h1 { display: none !important; }
.titres .etiquette {
  font-family: var(--police-systeme) !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: #1D1D1F !important;
  display: block !important;
}

/* ---------- Bulles ----------
   Compas : fond #F5F5F7, texte #1D1D1F, arrondi 18/4 px.
   Visiteur : fond #1D1D1F, texte #FFFFFF, arrondi 18/4 px. */
.ligne.compas .bulle {
  background: #F5F5F7 !important;
  color: #1D1D1F !important;
  border: none !important;
  border-radius: 18px !important;
  border-bottom-left-radius: 4px !important;
}
.ligne.visiteur .bulle {
  background: #42454B !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 18px !important;
  border-bottom-right-radius: 4px !important;
}
.ligne.compas .bulle a { color: var(--cta-couleur) !important; }
.ligne.visiteur .bulle a { color: #A8A8B3 !important; }

/* ---------- Indicateur de frappe — gris #6E6E73 ---------- */
.frappe span { background: #6E6E73 !important; }

/* ---------- Chips pilule Apple ----------
   Bordure #D2D2D7, fond blanc, arrondi 100px.
   Hover/actif : inversion #1D1D1F/#FFFFFF. */
.chip-reponse {
  background: #FFFFFF !important;
  color: var(--chip-texte) !important;
  border: 1px solid #D2D2D7 !important;
  border-radius: 100px !important;
}
.chip-reponse:hover, .chip-reponse:focus-visible {
  background: var(--cta-couleur) !important;
  color: #FFFFFF !important;
  border-color: var(--chip-texte) !important;
  filter: none !important;
}
.chip-autre {
  background: transparent !important;
  border: 1px solid #D2D2D7 !important;
  border-style: solid !important;
  border-radius: 100px !important;
  color: var(--chip-texte) !important;
  opacity: .7;
}
.chip-autre:hover { opacity: 1 !important; background: #F5F5F7 !important; filter: none !important; }

/* ---------- Barre de progression ---------- */
#progress-bar {
  background: rgba(255,255,255,0.85) !important;
  border-bottom: 1px solid #E5E5EA !important;
}
.progress-track { background: #E5E5EA !important; }
.progress-fill  { background: var(--cta-couleur) !important; }
.progress-label { color: #6E6E73 !important; }

/* ---------- Zone de saisie ---------- */
#message {
  background: #F5F5F7 !important;
  border: 1.5px solid #D2D2D7 !important;
  border-radius: 12px !important;
  color: #1D1D1F !important;
}
#message:focus, #message:focus-visible {
  border-color: var(--cta-couleur) !important;
  background: #FFFFFF !important;
  outline: none !important;
}
#message::placeholder { color: #6E6E73 !important; }

/* ---------- Optin — fond blanc, arrondi 18px ---------- */
#optin-wrapper {
  background: #FFFFFF !important;
  border: 1px solid #E5E5EA !important;
  border-top: 2px solid var(--cta-couleur) !important;
  border-radius: 18px !important;
}
.optin-kicker { color: #6E6E73 !important; }
#optin-wrapper h2 {
  font-family: var(--police-systeme) !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: #1D1D1F !important;
  letter-spacing: -.01em !important;
}
#optin-wrapper p { color: #6E6E73 !important; }
.optin-fields input {
  border-radius: 12px !important;
  background: #F5F5F7 !important;
  border: 1.5px solid #D2D2D7 !important;
  color: #1D1D1F !important;
  font-family: var(--police-systeme) !important;
}
.optin-fields input:focus {
  border-color: var(--cta-couleur) !important;
  background: #FFFFFF !important;
}
.optin-fields input::placeholder { color: #6E6E73 !important; }
.optin-consent-line { color: #6E6E73 !important; }
.optin-consent-line a { color: var(--cta-couleur) !important; }

/* ---------- Banniere fin ---------- */
.fin-banner {
  background: #F5F5F7 !important;
  border: 1px solid #E5E5EA !important;
  color: #1D1D1F !important;
  border-radius: 12px !important;
}

/* ---------- Bloc resultat profil (#profil-resultat, cree par JS) ----------
   Les inline styles portent 'Cormorant' : !important les ecrase. */
#profil-resultat {
  border: 1px solid #E5E5EA !important;
  border-top: 2px solid var(--cta-couleur) !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
}
#profil-resultat,
#profil-resultat * { font-family: var(--police-systeme) !important; }
#profil-resultat a[href] { border-radius: 100px !important; }

/* ---------- Carte rapport web — police systeme partout ---------- */
.rapport-web-card,
.rapport-web-card *:not(.sig) { font-family: var(--police-systeme) !important; }

/* ---------- Pied de page Apple (pages legales, merci) ---------- */
.pied-apple {
  margin-top: 48px;
  padding: 24px 20px;
  border-top: 1px solid #E5E5EA;
  font-size: .75rem;
  color: #6E6E73;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}
.pied-apple a { color: #6E6E73; text-decoration: none; }
.pied-apple a:hover { text-decoration: underline; }