/* ============================================================
   mesindependants.fr — refresh visuel 2026
   Rapproche l'identité visuelle de mesSimulateursRH.fr (cartes
   modernes, badges de confiance en pilules vertes, titres Manrope)
   tout en conservant la palette teal/ochre propre au site et
   TOUTES les classes/variables existantes (aucun HTML/JS à changer).
   Chargé après le <style> de chaque page : à spécificité égale,
   ces règles gagnent la cascade.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap');

:root{
  --paper:#F5F6F2;
  --paper-alt:#EAEDE6;
  --ink:#16221F;
  --ink-soft:#54615A;
  --teal:#1F5C56;
  --teal-deep:#123B36;
  --ochre:#C97A2E;
  --sage:#4B7A5B;
  --brick:#A34A3A;
  --line:#E1E4DC;
  --ok:#12806B;
  --ok-bg:#E4F4F0;
  --radius:12px;
  --radius-sm:8px;
  --max:1040px;
}

/* ===== Refresh visuel léger (10/09/2026, sur demande de Nathan) =====
   Objectif : différencier mesindependants.fr de messimulateursRH.fr ET
   des concurrents identifiés (IndepNet) sans copier leur identité visuelle —
   en restaurant la voix éditoriale distinctive déjà présente dans le <style>
   de chaque page (Fraunces + papier crème + teal/ochre) plutôt qu'en la
   gommant. La règle ci-dessous, qui alignait les titres sur la police
   Manrope de messimulateursRH, est retirée : les titres reviennent donc à
   Fraunces (leur police d'origine). Le reste du rapprochement visuel avec
   messimulateursRH (cartes arrondies, badges pilule, largeur de page,
   menu en tiroir) est conservé — ce n'était pas ce qui posait problème. */

/* ===== En-tête avec vrai menu responsive (hamburger sur mobile, horizontal
   au-delà de 900px), sur le modèle exact de messimulateursRH ===== */
header{ box-shadow: 0 1px 0 var(--line); padding:0 !important; }

.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
}

header .brand{ text-decoration:none; }
header .brand:hover{ opacity:.85; }

.brand-col{ display:flex; flex-direction:column; line-height:1.15; }
.brand-tagline{
  display:none;
  font-family:'IBM Plex Sans', sans-serif; font-weight:500; font-size:.62rem;
  letter-spacing:.02em; color:var(--ink-soft); margin-top:1px;
}
@media (min-width:560px){
  .brand-tagline{ display:block; }
}

.nav-toggle-input{ position:absolute; opacity:0; pointer-events:none; }
.nav-toggle-label{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:8px; cursor:pointer;
  border-radius:var(--radius-sm); order:2;
}
.nav-toggle-label:hover{ background:var(--paper-alt); }
.nav-toggle-label span{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; }

nav.main{
  display:none; flex-direction:column; gap:2px; width:100%; order:4;
  padding-top:8px; margin-top:2px; border-top:1px solid var(--line);
}
.nav-toggle-input:checked ~ nav.main{ display:flex; }
nav.main a{
  color:var(--ink-soft) !important; text-decoration:none; font-size:.92rem;
  padding:11px 8px !important; border-radius:var(--radius-sm);
  margin-left:0 !important;
}
nav.main a:hover{ color:var(--teal) !important; background:var(--paper-alt); }

@media (min-width: 900px){
  .header-inner{ flex-wrap:nowrap; }
  .nav-toggle-label{ display:none; }
  nav.main{
    display:flex !important; flex-direction:row; flex-wrap:wrap;
    width:auto; order:2; border-top:none; padding-top:0; margin-top:0; gap:2px;
  }
  nav.main a{ margin-left:6px !important; padding:8px 12px !important; }
}

/* Badges de confiance en pilules (11/09/2026 : teinte --ok/--ok-bg
   rapprochée du teal de l'identité mesindependants.fr — remarque de Nathan,
   Vague 9 point 8 — plutôt que le vert générique #0F7A4C/#E7F6EE partagé
   jusqu'ici avec messimulateursRH.fr ; même forme pilule conservée, choix
   de fond déjà tranché en Vague 0 et non rouvert). */
.trust-badges span, .trust-strip span{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ok-bg); color:var(--ok);
  border:none !important; font-weight:600; border-radius:999px;
  padding:6px 12px; font-size:.78rem;
}
.trust-strip{ gap:8px 10px; }

/* Note de confidentialité sous le bouton PDF, reprise telle quelle de messimulateursRH */
.pdf-privacy-note{
  margin:8px 0 0; font-size:.78rem; color:var(--ink-soft);
  display:flex; align-items:center; gap:5px;
}
.pdf-privacy-note::before{ content:'🔒'; font-size:.85rem; }
.pdf-privacy-note[hidden]{ display:none; } /* 20/09/2026 : sinon le display:flex ci-dessus affichait un cadenas seul sous les boutons */

/* Cartes modernisées : coins arrondis + effet de survol "lift", à la RH */
.tool-card, .fiche, .card, .bridge, .partner-slot,
.toolbox a, .toolbox-mini a, .bridge-links a, .result-card,
.field input, .field select, .table-wrap, details, .toc {
  border-radius: var(--radius) !important;
}
.tool-card::before{ border-radius: var(--radius) 0 0 var(--radius) !important; }

.tool-card, .toolbox-mini a, .bridge-links a, .toolbox a {
  transition: box-shadow .15s ease, transform .15s ease;
}
.tool-card:hover, .toolbox-mini a:hover, .bridge-links a:hover, .toolbox a:hover {
  box-shadow: 0 8px 24px rgba(18, 40, 35, .10);
  transform: translateY(-2px);
}

.result-card.winner{ box-shadow: 0 4px 16px rgba(31, 92, 86, .12); }

/* Bouton PDF en pilule, cohérent avec le style "compute" de RH */
/* ===== Vague 11 (12/09/2026) : forme alignee sur .hero-cta (rectangle a coins
   arrondis, ombre legere) au lieu de la pilule + ombre marquee -- fond/texte/
   padding deja corrects par page, seule la forme etait datee. ===== */
.pdf-btn{
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(22, 34, 31, .12);
}
.pdf-btn:hover{ box-shadow: 0 2px 6px rgba(18, 59, 54, .18); }

/* ===== 20/09/2026 : style de référence des boutons PDF / Partager, centralisé ici.
   Jusqu'ici fond/texte/padding étaient déclarés dans le <style> de chaque page :
   une page qui oubliait de les recopier (salarie-vers-independant) affichait le
   bouton gris natif du navigateur. :where() = spécificité nulle, donc les
   variantes locales existantes (ex. ochre des modules de formation) gardent
   la main ; une nouvelle page n'a plus rien à déclarer. ===== */
:where(.pdf-btn){
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px; padding:11px 16px;
  background:var(--teal); color:#fff;
  border:none; border-radius:6px;
  font-family:'IBM Plex Sans', sans-serif; font-size:.85rem; font-weight:600;
  cursor:pointer;
}
:where(.pdf-btn):hover{ background:var(--teal-deep); }
:where(.partage-btn){ background:transparent; color:var(--teal); border:1px solid var(--teal); margin-left:8px; }
:where(.partage-btn):hover{ background:var(--paper-alt); }
@media (max-width:560px){ :where(.partage-btn){ margin-left:0; } }

/* FAQ / détails en carte, sans toucher aux indicateurs +/- déjà en place par page */
details{
  background:#fff;
  border:1px solid var(--line) !important;
  padding:14px 16px !important;
  margin-bottom:10px;
}

/* Footer légal, cohérent sur tout le site */
footer{ border-top:1px solid var(--line); padding-top:18px; }
footer .disclaimer{ max-width:inherit; }
footer a{ font-weight:600; }

/* ===== Correction du bug de centrage du footer (10/09/2026), puis de
   <main> (11/09/2026) : max-width seul ne centre rien, contrairement à
   .header-inner qui a margin:0 auto + padding. Sans ça, sur grand écran,
   le contenu collait au bord gauche de la fenêtre au lieu d'être centré
   avec la même marge que l'en-tête (repéré par Nathan sur une capture
   d'écran desktop, d'abord sur le footer puis, non corrigé à l'époque,
   sur <main> lui-même — .hero/.content-block/.fiche restaient centrés
   à l'intérieur de <main>, mais <main> restait collé au bord). ===== */
footer, .footer-sitemap, main{ margin-left:auto !important; margin-right:auto !important; }
.footer-sitemap{ padding:0 18px; }

/* ===== Largeur de page alignée sur messimulateursRH (--max: 1040px) :
   moins de vide sur les côtés en grand écran. Les formulaires (.fiche/.card)
   restent un peu plus resserrés pour rester lisibles comme formulaire. ===== */
main, .content-block, .crumb, footer, .bridge, .partner-slot,
.toolbox, .toolbox-mini, .toc, .tools, .hero {
  max-width: var(--max) !important;
}
.fiche, .card{ max-width: 820px !important; }

/* Cartes d'outils et listes de liens en grille responsive au lieu d'un
   empilement vertical unique : plus engageant, plus proche du .grid de RH */
.tools, .toolbox, .toolbox-mini{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px){
  .tools, .toolbox, .toolbox-mini{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }
}
.toolbox a, .toolbox-mini a{ height:100%; }

/* Liens du pont vers messimulateursRH en ligne plutôt qu'empilés en pleine largeur */
.bridge-links{
  display:flex !important; flex-direction:column; flex-wrap:wrap; gap:8px;
}
@media (min-width: 640px){
  .bridge-links{ flex-direction:row !important; }
  .bridge-links a{ flex:1 1 260px; }
}

@media (max-width: 600px){
  .trust-badges, .trust-strip{ gap:6px 8px; }
}

/* ===== Footer plan du site multi-colonnes, sur le modèle de messimulateursRH
   (Vague 0 du guide de développement pré-lancement, 04/09/2026) ===== */
.footer-sitemap{ padding-top:4px; }
.footer-tagline{
  max-width:64ch; margin:0 0 20px; font-size:.85rem; color:var(--ink-soft);
}
.footer-links{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px 24px; margin-bottom:20px;
}
@media (min-width:700px){
  /* 11/09/2026 (suite Vague 9) : auto-fit plutot que 4 colonnes figees, pour
     que la colonne "Choisir son statut" une fois scindee en deux (HTML,
     meme session) s'etale sur 5 colonnes sans point de rupture manuel -- la
     colonne la plus haute passe de ~10 a ~7 liens. */
  .footer-links{ grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)); }
}
@media (min-width:1100px){
  /* Vague 11 (12/09/2026) : a 1040px de contenu (--max), minmax(175px) ne
     laisse tenir que 5 colonnes sur 6 (5*175 + 4*24 = 971px ; 6 en demanderait
     1170px) -- la 6e colonne retombait donc systematiquement sur une 2e ligne.
     Force les 6 colonnes existantes sur une seule ligne a partir d'une largeur
     de viewport ou le conteneur (~1004px utiles) les accueille confortablement
     (~147px/colonne) ; aucun lien retire, en dessous de 1100px le repli
     auto-fit ci-dessus reste inchange. */
  .footer-links{ grid-template-columns:repeat(6, 1fr); }
}
.footer-col h4{
  margin:0 0 8px; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink); font-family:'Manrope','IBM Plex Sans',sans-serif; font-weight:800;
}
.footer-col h4 a{
  color:var(--ink) !important; font-weight:800 !important; font-size:inherit !important;
  text-transform:uppercase; letter-spacing:.04em; text-decoration:none; padding:0 !important;
  display:inline !important;
}
.footer-col h4 a:hover{ color:var(--teal) !important; text-decoration:underline; }
.footer-col{ display:flex; flex-direction:column; }
.footer-col a{
  display:block; padding:3px 0; font-size:.8rem; color:var(--ink-soft) !important;
  text-decoration:none; font-weight:500 !important;
}
.footer-col a:hover{ color:var(--teal) !important; text-decoration:underline; }
.footer-utility{
  margin:0; padding-top:14px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--ink-soft);
}
.footer-utility a{ font-weight:600; }

/* ===== .footer-subhead (Vague 9 piste 7, 11/09/2026) retiree : la colonne
   "Choisir son statut" est desormais scindee en 2 vraies colonnes (HTML,
   Vague 10) plutot que sous-titree a l'interieur d'une seule -- plus de
   <span class="footer-subhead"> dans le HTML des 47 pages, regle retiree
   avec lui. ===== */
/* ===== .toolbox-mini-group* (Vagues 9 et 10, 11/09/2026) retirees a la
   Vague 11 (12/09/2026) : "Aller plus loin" passe de 19 liens en 4 groupes
   a une selection resserree de 6 liens a plat (plus un lien "voir tout" vers
   aller-plus-loin.html) -- decision de Nathan pour repondre au constat que
   le bloc restait trop haut et desequilibre (8 liens dans un groupe contre 2
   dans un autre) malgre 3 chantiers de mise en page successifs qui n'avaient
   jamais reduit le contenu. Plus de <div class="toolbox-mini-group"> dans le
   HTML de la home, regles retirees avec lui. ===== */
@media (min-width: 700px){
  .toolbox-mini{ grid-template-columns: repeat(3, 1fr) !important; }
}


/* ===== Menu dropdown par catégorie, sur le modèle exact de messimulateursRH
   (Vague 1 du guide de développement pré-lancement, 04/09/2026). Remplace le
   menu plat à 5 entrées par : Accueil, tiroir "Catégories" (4 hubs), Actualités,
   Ressources officielles, FAQ (conservée en accès direct, contrairement à
   messimulateursRH qui n'a pas de FAQ dédiée dans son menu), À propos. ===== */
.nav-dropdown{ position:relative; }
.nav-dropdown summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:5px;
  color:var(--ink-soft) !important; text-decoration:none; font-size:.92rem;
  padding:11px 8px !important; border-radius:var(--radius-sm);
}
.nav-dropdown summary:hover, .nav-dropdown summary:focus-visible{ color:var(--teal) !important; background:var(--paper-alt); }
.nav-dropdown summary::-webkit-details-marker{ display:none; }
.nav-dropdown summary::after{ content:'▾'; font-size:.7em; transition:transform .15s; }
.nav-dropdown[open] summary::after{ transform:rotate(180deg); }
.nav-dropdown-menu{ display:flex; flex-direction:column; gap:2px; padding:2px 0 4px 14px; }
.nav-dropdown-menu a{
  color:var(--ink-soft) !important; text-decoration:none; font-size:.9rem;
  padding:9px 8px !important; border-radius:var(--radius-sm); display:block;
  margin-left:0 !important;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible{ color:var(--teal) !important; background:var(--paper-alt); }

@media (min-width:900px){
  .nav-dropdown summary{ margin-left:6px !important; padding:8px 12px !important; }
  .nav-dropdown-menu{
    position:absolute; top:100%; left:6px; background:#fff; border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:0 10px 30px rgba(20,30,60,.14); padding:8px;
    margin-top:6px; min-width:230px; gap:0; z-index:30;
  }
  .nav-dropdown-menu a{ padding:9px 10px !important; }
}

/* ===== Ouverture au survol sur desktop (10/09/2026, idée de Nathan) : le
   tiroir "Catégories" ne s'ouvrait qu'au clic, y compris sur les écrans à
   souris/trackpad. La bascule réelle de l'attribut [open] se fait en JS
   (voir le petit script en bas de chaque page), réservée aux pointeurs fins
   capables de survol — un simple display:flex en CSS ne suffit pas à
   afficher le contenu d'un <details> fermé dans les navigateurs actuels.
   Cette règle ne fait que garder la flèche cohérente visuellement pendant
   le survol, avant même que le JS n'ait basculé [open]. ===== */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .nav-dropdown:hover > summary::after{ transform:rotate(180deg); }
}
/* ===== Refresh visuel léger (10/09/2026), suite : un peu plus de présence
   visuelle sans gradient façon SaaS — reste dans la palette existante. ===== */

/* Cartes avec une légère élévation au repos (pas seulement au survol),
   pour un rendu un peu plus "matière" que le simple contour 1px. */
.tool-card, .fiche, .card, .result-card {
  box-shadow: 0 1px 3px rgba(22, 34, 31, .06);
}

/* Fond de hero légèrement travaillé (halo teal très doux en haut à droite),
   pour donner un peu de présence sans basculer sur un gradient plein cadre. */
.hero{
  position: relative;
  /* 14/09/2026 : le halo décoratif .hero::before (right:-60px, 320px de large)
     dépassait à droite et rendait chaque page scrollable horizontalement sur
     mobile (scrollWidth 434-488 px pour 390-444 px d'écran). clip = coupe
     visuellement sans créer de conteneur de défilement. */
  overflow-x: hidden;
  overflow-x: clip;
}
.hero::before{
  content: "";
  position: absolute;
  top: -40px; right: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(31,92,86,.10) 0%, rgba(31,92,86,0) 70%);
  pointer-events: none;
  z-index: -1;
}

/* Titre du hero un peu plus affirmé sur grand écran (restait modeste à
   1.7rem même en desktop large). */
@media (min-width: 900px){
  .hero h1{ font-size: 2.1rem; }
}

/* ===== Refonte home/menu/logo (11/09/2026, chantier demandé par Nathan) =====
   1. Menu réorganisé par type de contenu plutôt que par thème fiscal (idée
   #13 de la Vague 4, en attente depuis le 10/09/2026) : le tiroir unique
   "Catégories" (Vague 1, 04/09) devient "Guides par thème" (4 hubs
   inchangés) et deux nouveaux tiroirs apparaissent — "Simulateurs & outils"
   (les 5 pages de calcul, jusqu'ici éparpillées entre accès direct et
   tiroir thématique) et "Ressources" (Ressources officielles, Glossaire —
   absent du menu jusqu'ici, FAQ). Formation et Actualités restent en accès
   direct. Inspiré du regroupement d'IndepNet (Simulateurs / Guides /
   Comparatifs / Métiers / Blog / À propos, Vague 4) sans le copier tel
   quel : adapté au contenu réel du site plutôt qu'à une structure calquée.
   2. Bouton hamburger avec fond/bordure visible (remarque de Nathan en
   Vague 6 : jusqu'ici 3 traits fins dans le vide, sans repère cliquable).
   3. État "page courante" (aria-current), absent jusqu'ici du menu (constat
   Vague 6) : appliqué en JS-free via l'attribut aria-current="page" posé
   directement dans le HTML de chaque page.
   ----- Retouches suite au retour de Nathan sur le premier jet (même jour) -----
   4. "Accueil" et "À propos" retirés du menu (déjà accessibles : le logo
   renvoie vers l'accueil sur les 42 pages, et "À propos" reste lié dans le
   footer-utility de chaque page — aucune perte de maillage interne/SEO).
   5. Barre de menu allégée : les tiroirs (<details class="nav-dropdown">)
   héritaient sans le vouloir de la règle générique `details{ background:#fff;
   border:1px solid var(--line) !important; padding:14px 16px !important; }`
   prévue pour les accordéons de FAQ — d'où l'effet "boîte" épaisse repéré par
   Nathan sur les 3 tiroirs. Neutralisée ci-dessous spécifiquement pour
   `.nav-dropdown`, et le padding des liens/résumés est resserré pour se
   rapprocher de la barre fine de mesSimulateursRH (référence donnée par
   Nathan), sans copier son bandeau de segmentation d'audience (pas
   d'équivalent pertinent sur mesindependants.fr, cf. Vague 6). ===== */
.nav-toggle-label{
  background: var(--paper-alt);
  border: 1px solid var(--line);
}
.nav-toggle-label:hover{ border-color: var(--teal); }

nav.main > a[aria-current="page"],
.nav-dropdown-menu a[aria-current="page"]{
  color: var(--teal-deep) !important;
  font-weight: 700;
  background: var(--paper-alt);
}
.nav-dropdown:has(> .nav-dropdown-menu a[aria-current="page"]) > summary{
  color: var(--teal-deep) !important;
  font-weight: 700;
}

/* Neutralise la règle générique `details{...}` (accordéons FAQ) pour les
   tiroirs de menu : plus de fond/bordure/marge/padding sur le <details>
   lui-même, tout le style visuel reste porté par <summary> ci-dessous. */
.nav-dropdown{
  background: transparent !important;
  border: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.nav-dropdown summary{
  padding: 8px 10px !important;
}
nav.main a{
  padding: 8px 10px !important;
}
@media (min-width:900px){
  .header-inner{ padding-top: 9px; padding-bottom: 9px; }
  .nav-dropdown summary{ padding: 7px 10px !important; }
  nav.main a{ padding: 7px 10px !important; }
}

/* Signature auteur (E-E-A-T) — ajoutée le 16/09/2026 */
.byline{ font-size:.82rem; color:var(--ink-soft, #4A564F); margin:4px 0 14px; line-height:1.5; }
.byline a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }