/* Page secteur (Éducation, Santé, Entreprises) — voir IHM_PAGE_SECTEUR_algo.md.
   Toutes les règles préfixées #secteur (namespacing manuel, voir
   nafabeat-landing/CLAUDE.md § Namespacing CSS). Panneau "sante" encore sur
   l'ancien système .sc-row (non repris) ; "education" sur le système de
   familles .scf-* (voir algo). --scf-ink/body/muted en attente de
   formalisation /design-token (décision différée, voir algo § Tokens à
   formaliser). */

/* Bug corrigé (2026-08-27) : [hidden] et une classe posant display:flex ont la
   même spécificité CSS — la classe, déclarée après la feuille de style du
   navigateur, l'emportait, donc les panneaux masqués (secteur non actif dans
   l'URL) restaient affichés et s'empilaient tous à l'écran ("mélange de
   plusieurs secteurs"). Règle explicite, prioritaire sur tout le reste. */
#secteur [hidden] { display: none !important; }

/* Neutres de texte dérivés de --marine (color-mix), pas des gris génériques
   improvisés — retour utilisateur 2026-08-27 : "il manque quelque chose"
   dans les couleurs/police. --scf-ink était d'abord du marine quasi pur
   (proche du noir) — retour ultérieur : "pas élégant". Un noir froid sur
   blanc tranche trop dur ; on y mélange une pointe de --gold-dark pour
   une encre chaude (brun-prune) plutôt qu'un noir clinique, cohérent avec
   la teinte or de la marque. --scf-body/--scf-muted restent tels quels
   (pas mis en cause). Pas de --scf-quote séparé : .scf-quote utilise
   directement --gold-dark (voir plus bas) depuis le retrait de
   l'italique, plus besoin d'un ton dédié rien que pour cet usage. */
:root {
  --scf-ink:    color-mix(in srgb, var(--marine) 82%, var(--gold-dark) 18%);
  --scf-body:   color-mix(in srgb, var(--marine) 74%, white 26%);
  --scf-muted:  color-mix(in srgb, var(--marine) 45%, white 55%);
}

#secteur .secteur-masthead {
  position: relative; overflow: hidden;
  background: var(--marine);
  padding: 128px 24px 60px;
}
#secteur .secteur-texture { position: absolute; inset: 0; z-index: 0; }
#secteur .secteur-texture svg { width: 100%; height: 100%; display: block; }
#secteur .secteur-glow {
  position: absolute; width: 560px; height: 560px; z-index: 0;
  background: radial-gradient(ellipse, rgba(202,138,4,0.15) 0%, transparent 68%);
  top: -280px; left: 50%; margin-left: -280px;
}
#secteur .secteur-masthead-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; text-align: center; }
#secteur .secteur-back {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--text-sec-dark); text-decoration: none; margin-bottom: 32px; transition: color 0.2s;
}
#secteur .secteur-back:hover { color: var(--gold-light); }
/* Entrée en fondu — cohérence avec hero/loop/leadmagnet, oubliée jusqu'ici
   sur cette page (2026-08-27). Reste la seule animation de la page : la
   liste elle-même n'en a pas, volontairement (voir échange en session). */
#secteur .secteur-eyebrow {
  display: block; width: fit-content; margin: 0 auto 16px;
  background: rgba(var(--gold-rgb),0.12); border: 1px solid rgba(var(--gold-rgb),0.35);
  border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 600;
  color: var(--gold-light);
  animation: fadeUp 0.7s ease both;
}
#secteur .secteur-title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.3px;
  font-size: clamp(32px, 4.4vw, 48px); color: var(--text-cream); margin: 0 0 16px;
  animation: fadeUp 0.7s 0.08s ease both;
}
#secteur .secteur-tagline {
  font-size: 15.5px; line-height: 1.7; color: var(--text-sec-dark); max-width: 560px; margin: 0 auto 26px;
  animation: fadeUp 0.7s 0.16s ease both;
}

/* Carte d'accès tableau de bord — même style que .flagship (grille 1fr
   auto, padding 32px 34px, radius 12px), et surtout même EMPLACEMENT :
   premier enfant de .secteur-body, pas frère de .secteur-masthead. Trois
   tentatives précédentes (margin -56px/-32px en position frère, puis
   transform:translateY(-50%)) échouaient toutes pour la même raison
   structurelle, identifiée en comparant à la vraie maquette (2026-08-27) :
   .flagship est DANS .sec-body, dont le fond crème vient de #secteur (pas
   d'.sec-body lui-même) — sa marge négative "fuit" par collapsing vers le
   haut et entraîne .secteur-body avec elle, sans bloc crème rectangulaire
   parasite. -50px (au lieu des -32px de la référence) choisi explicitement
   par l'utilisateur en session pour un recouvrement plus marqué. Contenu
   simplifié en description + bouton (pas
   d'eyebrow/titre — ce n'est pas une promotion d'outil, mais l'accès au
   tableau de bord d'un lead déjà connu — voir lead_magnet_qr_technique.md,
   flow POST .../login). Bouton non câblé ici (pas de route de connexion
   dans ce statique) : à brancher au moment de l'extraction /new-section. */
#secteur .secteur-access {
  position: relative; z-index: 2;
  max-width: 700px; margin: -50px auto 40px;
  background: var(--marine-light); border-radius: 12px;
  padding: 32px 34px; display: grid; grid-template-columns: 1fr auto;
  gap: 22px; align-items: center;
  box-shadow: 0 24px 48px -20px rgba(26,26,46,0.4);
}
#secteur .secteur-access-text p { font-size: 13.5px; line-height: 1.6; color: var(--text-sec-dark); max-width: 420px; }
#secteur .secteur-access-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--gold); color: var(--marine); font-family: var(--font-body);
  font-weight: 700; font-size: 13px; border: none; border-radius: 4px;
  padding: 13px 22px; white-space: nowrap; cursor: pointer; transition: background 0.2s;
}
#secteur .secteur-access-btn:hover { background: var(--gold-light); }
#secteur .secteur-access-btn svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  #secteur .secteur-access { grid-template-columns: 1fr; padding: 24px 22px; }
  #secteur .secteur-access-btn { width: 100%; }
}

/* Le crème vit sur #secteur (toute la hauteur de la section), pas sur
   .secteur-body — .secteur-masthead peint juste par-dessus, sur sa propre
   portion. C'est ce qui permet à .secteur-access, premier enfant de
   .secteur-body avec padding-top:0, de "fuir" par collapsing de marge
   négative vers le haut et de chevaucher le masthead sans qu'un bloc
   crème rectangulaire n'apparaisse derrière elle sur toute la largeur
   (bug identifié en session 2026-08-27 — la référence .flagship suit
   exactement cette structure : .flagship est DANS .sec-body, pas frère
   de .sec-hero). */
#secteur { background: var(--background-clair); }
#secteur .secteur-body { padding: 0 24px 110px; }

/* "Feuille" flottante plutôt que la liste posée nue sur le fond crème — c'est
   ce battement carte-sombre / feuille-claire-élevée qui manquait pour que la
   page tienne le même registre que le bloc d'accueil (retour utilisateur,
   2026-08-27 : "le premium manque"). Ombre douce, coins arrondis, colonne
   resserrée (680px, plus éditorial qu'un tableau). */
#secteur .secteur-list-wrap {
  max-width: 700px; margin: 0 auto;
  background: #fff; border-radius: 20px;
  padding: 6px 8px; box-shadow: 0 36px 80px -44px rgba(15,23,42,0.28), 0 1px 0 rgba(15,23,42,0.03);
}

/* Liste éditoriale — plus scannable pour 8-9 outils qu'une grille de cartes,
   registre "liste de consultant" plutôt que "grille produit SaaS". Ni
   numéro ni badge d'impact (retour utilisateur, 2026-08-27) : la perception
   de valeur appartient au client, pas à nous de la lui souffler. À la place :
   un type de livrable neutre (informatif, pas une note de qualité) et une
   accroche traitée en italique serif — registre citation, plus littéraire
   que l'italique sans-serif générique d'avant. */
#secteur .secteur-list { display: flex; flex-direction: column; }
#secteur .sc-row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 28px 24px;
  border: none; border-bottom: 1px solid rgba(31,36,48,0.07);
  background: transparent; font-family: var(--font-body); text-align: left; cursor: pointer;
  transition: background 0.2s;
}
#secteur .sc-row:first-child { border-top-left-radius: 16px; border-top-right-radius: 16px; }
#secteur .sc-row:last-child { border-bottom: none; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
#secteur .sc-row::before {
  content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  opacity: 0; transition: opacity 0.2s;
}
#secteur .sc-row:hover { background: rgba(202,138,4,0.04); }
#secteur .sc-row:hover::before { opacity: 1; }
#secteur .sc-row-main { flex: 1; min-width: 0; }
#secteur .sc-row-type {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--gold-dark); margin-bottom: 9px;
}
#secteur .sc-row-title { font-family: var(--font-display); font-weight: 400; font-size: 19.5px; color: #1F2430; margin-bottom: 9px; line-height: 1.3; }
#secteur .sc-row-hook {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 14.5px; line-height: 1.55; color: #5B6072; max-width: 480px;
}
#secteur .sc-row-arrow { flex-shrink: 0; width: 18px; height: 18px; color: var(--gold); opacity: 0.4; transition: transform 0.25s ease, opacity 0.25s ease; }
#secteur .sc-row:hover .sc-row-arrow { transform: translateX(5px); opacity: 1; }

@media (max-width: 640px) {
  #secteur .secteur-list-wrap { border-radius: 16px; }
  #secteur .sc-row { padding: 22px 16px; gap: 14px; }
  #secteur .sc-row-title { font-size: 17px; }
}

/* ============ Panneau "education" — regroupement par mécanisme, pas une
   liste plate (retour utilisateur 2026-08-27 : "le premium manque encore"
   même après la feuille flottante). Trois familles qui racontent le système
   plutôt qu'un inventaire : Collecte (QR → formulaire, alimente le reste),
   Restitution (documents générés depuis les données déjà là), Au quotidien
   (LM-19, seul outil non saisonnier — voir lead_magnet_education_technique.md
   Section 1/3/4). Classes préfixées scf- pour ne jamais entrer en collision
   avec .sc-row (panneau "sante", pas encore repris). ---- */
#secteur .secteur-families { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; }
#secteur .scf-family { padding-top: 46px; }
#secteur .scf-family:first-child { padding-top: 0; }
#secteur .scf-head { margin-bottom: 22px; padding: 0 6px; }
#secteur .scf-eyebrow {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold-dark); margin-bottom: 8px;
}
#secteur .scf-eyebrow::before { content: ''; width: 16px; height: 1.5px; background: var(--gold); display: inline-block; }
#secteur .scf-rationale {
  font-family: var(--font-display); font-weight: 400;
  font-size: 16.5px; line-height: 1.55; color: var(--scf-body); max-width: 540px;
}

#secteur .scf-sheet {
  background: #fff; border-radius: 18px;
  padding: 4px 6px; box-shadow: 0 30px 70px -40px rgba(15,23,42,0.26), 0 1px 0 rgba(15,23,42,0.03);
}
#secteur .scf-row {
  position: relative; display: flex; align-items: flex-start; gap: 16px;
  width: 100%; padding: 22px 18px;
  border: none; border-bottom: 1px solid rgba(31,36,48,0.08);
  background: transparent; font-family: var(--font-body); text-align: left; cursor: pointer;
  transition: background 0.2s, transform 0.25s ease, box-shadow 0.25s ease;
}
#secteur .scf-row:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
#secteur .scf-row:last-child { border-bottom: none; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
/* Même sensation que #leadmagnet .lm-card-v2:hover dans preview.html
   (translateY + ombre portée), réduite en amplitude (-3px, pas -8px) —
   ces lignes sont adjacentes dans une même feuille, un décollement trop
   fort casserait la continuité visuelle avec la ligne suivante. */
#secteur .scf-row:hover {
  background: rgba(202,138,4,0.045); transform: translateY(-3px);
  box-shadow: 0 14px 28px -18px rgba(26,26,46,0.28); z-index: 1;
}

#secteur .scf-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(202,138,4,0.09); color: var(--gold-dark);
  transition: background 0.2s, color 0.2s;
}
#secteur .scf-icon svg { width: 18px; height: 18px; }
#secteur .scf-row:hover .scf-icon { background: var(--gold); color: #fff; }

#secteur .scf-main { flex: 1; min-width: 0; }
#secteur .scf-toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
#secteur .scf-type { font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--scf-muted); }
#secteur .scf-feed {
  font-size: 10.5px; font-weight: 600; color: var(--gold-dark);
  background: rgba(202,138,4,0.1); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
/* Reste en font-weight 400 : DM Serif Display n'a pas de graisse gras
   distincte (Google Fonts ne fournit que Regular + Italic pour cette
   police) — un font-weight:700 dessus serait du "faux gras" synthétisé
   par le navigateur (traits épaissis artificiellement, empattements
   déformés), l'explication la plus probable du rendu jugé "quelque chose
   qui manque" (retour utilisateur 2026-08-27). Présence renforcée par la
   taille et la teinte pleine plutôt que par un poids que la police ne
   possède pas. */
#secteur .scf-title {
  font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: -0.2px;
  color: var(--scf-ink); margin-bottom: 8px; line-height: 1.22;
}
/* Affirmation forte issue des documents de référence (plus une citation
   entre guillemets depuis le changement de ton — voir plus bas). Plus
   aucun italique sur cette page (retour utilisateur 2026-08-27, confirmé
   après essai d'alternative à DM Serif Display — on reste dessus mais
   sans italique nulle part). La distinction avec .scf-desc/.scf-mechanism
   ne passe plus par le style de caractère mais par la couleur : ton or de
   la marque (--gold-dark, déjà utilisé pour les eyebrows/icônes) plutôt
   qu'une variante de gris/encre — se lit comme "l'accroche" sans avoir
   besoin d'italique ni d'un gras que la police n'a pas. */
#secteur .scf-quote { font-family: var(--font-display); font-weight: 400; font-size: 14.5px; line-height: 1.5; color: var(--gold-dark); margin-bottom: 6px; }
#secteur .scf-mechanism { font-size: 12.5px; line-height: 1.6; color: var(--scf-muted); }
#secteur .scf-desc { font-family: var(--font-body); font-size: 13.5px; line-height: 1.65; color: var(--scf-body); }

#secteur .scf-arrow { flex-shrink: 0; width: 17px; height: 17px; color: var(--gold); opacity: 0.35; margin-top: 9px; transition: transform 0.25s ease, opacity 0.25s ease; }
#secteur .scf-row:hover .scf-arrow { transform: translateX(4px); opacity: 1; }

/* Famille "Au quotidien" — seule rupture visuelle de la page : usage
   journalier plutôt que saisonnier, une vraie information, pas une
   décoration (cf. lead_magnet_education_technique.md, LM-19). */
#secteur .scf-family--daily .scf-sheet { background: var(--marine); box-shadow: 0 30px 70px -40px rgba(15,23,42,0.4); }
#secteur .scf-family--daily .scf-row { border-bottom: none; }
#secteur .scf-family--daily .scf-icon { background: rgba(226,168,50,0.14); color: var(--gold-light); }
#secteur .scf-family--daily .scf-row:hover { background: rgba(226,168,50,0.06); box-shadow: 0 14px 28px -18px rgba(0,0,0,0.5); }
#secteur .scf-family--daily .scf-row:hover .scf-icon { background: var(--gold-light); color: var(--marine); }
#secteur .scf-family--daily .scf-type { color: var(--text-tert); }
#secteur .scf-family--daily .scf-title { color: var(--text-cream); }
#secteur .scf-family--daily .scf-quote { color: var(--gold-light); }
#secteur .scf-family--daily .scf-desc { color: var(--text-sec-dark); }
#secteur .scf-family--daily .scf-mechanism { color: var(--text-tert); }
#secteur .scf-family--daily .scf-arrow { color: var(--gold-light); }

@media (max-width: 640px) {
  #secteur .scf-sheet { border-radius: 14px; }
  #secteur .scf-row { padding: 18px 14px; gap: 12px; }
  #secteur .scf-title { font-size: 16.5px; }
}

#secteur .secteur-soon-panel { max-width: 560px; margin: 0 auto; text-align: center; padding: 40px 24px; }
#secteur .secteur-soon-panel p { font-size: 15px; line-height: 1.7; color: #5B6072; margin-bottom: 24px; }
#secteur .secteur-soon-panel .btn-primary { border-radius: 4px; }

@media (max-width: 700px) {
  #secteur .secteur-masthead { padding: 120px 20px 52px; }
  /* padding-top reste à 0 (voir commentaire plus haut sur .secteur-body) — un padding-top
     ici bloquerait le collapsing de marge négative qui fait chevaucher .secteur-access
     sur le masthead. Ne jamais utiliser le raccourci padding ici. */
  #secteur .secteur-body { padding: 0 20px 80px; }
}