/* ============================================================
   Amosphère — direction « Éditorial » (pages profil MOA / MOE /
   Entreprise). Pas de cartes pastel, pas de code couleur
   rouge/vert : la hiérarchie est portée par la typographie
   (Outfit 300 / 800), les filets et la largeur des colonnes.
   Palette : navy #0e295c, terracotta #e1622b, gris #F4F6FA.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#0e295c;--terra:#e1622b;--bg:#F4F6FA;--white:#fff;--border:#E5E8EF;--muted:#596475;--rule:#12203c}
body{font-family:'Outfit',sans-serif;background:var(--white);color:var(--navy);-webkit-font-smoothing:antialiased}
.inner{max-width:1060px;margin:0 auto;padding:0 48px}
.section{padding:64px 0}

/* --- libellés de rubrique : pilule reprise de /notre-projet (fond #FDEEE7, texte terracotta) --- */
.section-tag,.hero-badge,.eyebrow{display:inline-block;font-family:'Outfit',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--terra);
  background:#FDEEE7;padding:5px 14px;border-radius:100px;margin-bottom:14px}
.section-title{font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.section-title b,.section-title strong{font-weight:800}
.section-sub{font-size:15px;color:var(--muted);font-weight:300;line-height:1.75;max-width:62ch;margin-bottom:32px}

/* --- héros --- */
.hero{background:var(--white);padding:64px 0 56px;position:relative;overflow:hidden;text-align:left;border-bottom:1px solid var(--rule)}
.hero::before{display:none}
.hero-fg{position:absolute;right:0;bottom:0;width:66%;height:100%;opacity:1;pointer-events:none;z-index:0}
.hero-fg g{stroke:#0e295c;stroke-opacity:.13}
.hero-inner{max-width:1060px;margin:0 auto;padding:0 48px;position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:start}
.hero h1{font-size:clamp(30px,4.2vw,46px);font-weight:800;color:var(--navy);letter-spacing:-.025em;line-height:1.1;margin-bottom:0}
.hero h1 em{font-style:normal;font-weight:800;color:var(--terra)}
.hero .hero-sub{font-size:16px;color:var(--muted)!important;font-weight:300;line-height:1.7;margin-top:20px;max-width:48ch;
  border-left:2px solid var(--terra);padding-left:16px}
.hero-sub2{font-size:13.5px;color:var(--muted);font-weight:300;margin-top:14px;max-width:52ch}

/* --- appels à l'action : bloc terracotta franc, angles quasi vifs --- */
.btn-hero,.btn-terra,.btn-green,.btn-blue{display:inline-block;background:var(--terra);color:#fff;font-family:'Outfit',sans-serif;
  font-size:15px;font-weight:600;padding:14px 30px;border:none;border-radius:2px;text-decoration:none;cursor:pointer;
  transition:background .2s;margin-top:26px}
.btn-hero:hover,.btn-terra:hover,.btn-green:hover,.btn-blue:hover{background:var(--navy);opacity:1;transform:none}
.cta-card .btn-hero,.cta-card .btn-terra,.cta-card .btn-green,.cta-card .btn-blue{background:var(--terra)}
.cta-card .btn-hero:hover,.cta-card .btn-terra:hover,.cta-card .btn-green:hover,.cta-card .btn-blue:hover{background:#fff;color:var(--navy)}

/* --- ligne de réassurance : petites capitales Outfit, séparateurs discrets --- */
.hero-tagline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-start;margin-top:20px;
  font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.hero .hero-tagline{color:var(--muted)}
.hero-tagline.muted{color:var(--muted)}
.cta-card .hero-tagline{color:rgba(255,255,255,.55)}
.trust-dot{width:4px;height:4px;border-radius:0;background:var(--terra);flex:none}

/* --- panneau de caractéristiques (colonne droite du héros) --- */
.hero-specs{border-top:1px solid var(--rule)}
.hero-specs > div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border);
  font-size:13px;color:var(--muted);font-weight:300;line-height:1.4}
.hero-specs b{color:var(--navy);font-weight:700;font-family:'Outfit',sans-serif;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;flex:none;padding-top:2px}
.hs-label{display:inline-flex;align-items:center;gap:9px}
.hs-icon{width:16px;height:16px;color:var(--terra);flex:none}
/* Variante MOA : pas de filet, décalé pour s'aligner avec le H1 plutôt qu'avec la pastille */
.hero-specs.moa-specs{border-top:0;margin-top:54px;margin-left:14px}
.hero-avantages{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.hero-av-item{display:flex;align-items:baseline;gap:10px;font-size:14px;color:var(--muted);font-weight:300}
.hero-av-dot{width:5px;height:5px;background:var(--terra);flex:none}
.hero-visual{display:block;border-top:1px solid var(--rule)}
.hv-card{background:none;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:14px 0;box-shadow:none}
.hv-label{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--terra);margin-bottom:4px}
.hv-title{font-size:15px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:6px}
.hv-score{font-size:12.5px;color:var(--muted);font-weight:300;margin-top:2px}

/* --- le constat : énumération typographique, aucun encadré rouge --- */
.problemes-grid{display:block;border-top:1px solid var(--rule);margin-bottom:36px}
.pb-card{display:grid;grid-template-columns:52px minmax(0,.85fr) minmax(0,1.4fr);gap:24px;align-items:baseline;
  background:none;border:none;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;padding:16px 0;text-align:left}
.pb-num{position:static;font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--terra);line-height:1.6}
.pb-title{font-size:16px;font-weight:700;color:var(--navy);margin:0}
.pb-desc{font-size:14px;color:var(--muted);font-weight:300;line-height:1.65}
.pb-card:has(.pb-title:only-of-type) .pb-title{grid-column:2 / -1}

/* --- ce que ça change : deux colonnes, filets, pas de vert --- */
.plus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-bottom:36px;
  border-top:1px solid var(--rule)}
.plus-card{background:none;border:none;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;padding:16px 0}
.plus-num{position:static;font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--terra);line-height:1;display:block;margin-bottom:8px}
.plus-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px}
.plus-desc{font-size:14px;color:var(--muted);font-weight:300;line-height:1.65}

/* --- étapes : grands ronds pleins alternant navy/terracotta, repris des présentations --- */
.solution-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0 12px;max-width:none;margin:0 0 40px}
.step-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0}
.step-dot{width:52px;height:52px;border-radius:50%;background:var(--terra);color:#fff;box-shadow:none;
  font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex:none}
.step-wrap:nth-child(even) .step-dot{background:var(--navy)}
.step-label{font-size:13.5px;color:var(--navy);font-weight:600;text-align:center;max-width:none;line-height:1.4}

/* --- atouts : listes à filets, icône visible en accent terracotta --- */
.avantages-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-bottom:40px}
.av-card{background:none;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:18px 0;text-align:left;
  display:block;transition:none}
.av-card::before{display:none}
.av-card:hover{transform:none;box-shadow:none;border-color:transparent;border-bottom-color:var(--border)}
.av-pastille{display:block;color:var(--terra);margin-bottom:10px}
.av-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px}
.av-desc{font-size:14px;color:var(--muted);font-weight:300;line-height:1.65}

/* --- bénéfices : bandeau de mots-clés --- */
.benefices-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:28px 0}
.ben-card{background:none;border:none;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  border-radius:0;padding:16px 20px 18px 0;display:block;text-align:left;transition:none}
.ben-card:not(:nth-child(3n+1)){padding-left:24px}
.ben-card:nth-child(3n){border-right:0;padding-right:0}
.ben-card:hover{transform:none;border-right-color:var(--border)}
.ben-icon{font-size:0;color:var(--terra);margin-bottom:10px;display:block}
.ben-icon svg{width:20px;height:20px}
.ben-label{font-size:14px;font-weight:600;color:var(--navy)}
/* Variante 2 colonnes (4 items) : mêmes filets, logique pair/impair plutôt que 3n */
.benefices-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.benefices-grid.cols-2 .ben-card{padding-left:0}
.benefices-grid.cols-2 .ben-card:nth-child(2n+1){border-right:1px solid var(--border)}
.benefices-grid.cols-2 .ben-card:nth-child(2n){border-right:0;padding-right:0;padding-left:24px}

/* --- piliers / colonnes de listes --- */
.grid3,.trio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.grid3 > *,.trio-grid > *{border-right:1px solid var(--border);padding:20px 24px 22px 0;text-align:left}
.grid3 > *:not(:first-child),.trio-grid > *:not(:first-child){padding-left:24px}
.grid3 > *:last-child,.trio-grid > *:last-child{border-right:0;padding-right:0}
.pillar-card{background:none;border:none;border-radius:0;box-shadow:none;padding:0}
.pillar-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:12px;letter-spacing:-.01em}
.check-list{display:flex;flex-direction:column;gap:8px}
.check-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted);font-weight:300;line-height:1.55}

/* --- piliers en bulles (profil MOE uniquement — seule page à utiliser .pillar-card) :
   fond + coins arrondis à la place du filet partagé, pastille ronde à la place du chiffre nu.
   Scopé via :has() pour ne pas toucher le .grid3 « why-card » (Entreprise), qui garde le filet. --- */
.grid3:has(.pillar-card){border-top:0;gap:20px}
.grid3:has(.pillar-card) > *{border-right:0;padding:26px 28px 28px;background:var(--bg);
  border:1px solid var(--border);border-radius:14px}
.check-mark{background:var(--terra);color:#fff;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:0;flex:none;margin-top:2px}
.visib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.visib-card{background:none;border:none;border-radius:0;box-shadow:none;padding:0}
.visib-num{width:44px;height:44px;border-radius:50%;background:var(--terra);color:#fff;
  font-family:'Outfit',sans-serif;font-size:18px;font-weight:800;display:flex;align-items:center;
  justify-content:center;margin-bottom:14px}
.visib-card:nth-child(even) .visib-num{background:var(--navy)}
.visib-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:12px}
.visib-item{font-size:14px;color:var(--muted);font-weight:300;line-height:1.55;padding:6px 0}

/* --- bloc appairé (page entreprise, section « développement commercial ») :
   chaque ligne combine l'atout (gauche) et le module correspondant avec icône (droite),
   dans un même encadré — garantit l'alignement entre les deux colonnes ligne par ligne. --- */
.visib-pair-box{max-width:760px;margin:0 auto 24px;border:1px solid var(--border);border-radius:14px;
  padding:0 28px;background:var(--bg)}
.visib-pair-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:18px 0;border-bottom:1px solid var(--border)}
.visib-pair-row:last-child{border-bottom:0}
.visib-pair-left{font-size:15px;font-weight:600;color:var(--navy);flex:1 1 220px;
  border-left:2px solid var(--terra);padding-left:12px}
.visib-pair-right{display:flex;align-items:center;gap:10px;flex:1 1 280px}
.visib-pair-ic{color:var(--terra);flex:none}
.visib-pair-label{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--terra);margin-bottom:2px}
.visib-pair-desc{font-size:13px;color:var(--muted);font-weight:300;line-height:1.5}

/* --- partenaires --- */
.partenariats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.part-card{background:none;border:none;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  border-radius:0;box-shadow:none;padding:18px 24px 20px 0;display:flex;gap:12px;align-items:flex-start}
.part-card:nth-child(3n){border-right:0;padding-right:0}
.part-card:not(:nth-child(3n+1)){padding-left:24px}
.part-ic{color:var(--terra);flex:none;margin-top:2px}
.part-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px}
.part-item{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.6}

/* Badge « module pas encore ouvert » (services négociés) — même recette que .rm-soon
   sur /notre-projet, où ce module est présenté comme à venir. */
.soon-badge{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  background:#EEF1F7;color:var(--muted);border:1px solid var(--border);padding:3px 9px;
  border-radius:6px;vertical-align:middle;white-space:nowrap}

/* --- « ce n'est pas / c'est » : opposition typographique, pas chromatique --- */
.versus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.vs-col-title{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)!important;padding:16px 0 10px;font-weight:700}
.vs-item{font-size:15px;padding:9px 0;border-bottom:1px solid var(--border);background:none;border-radius:0}
.vs-item.bad{color:var(--muted);font-weight:300;text-decoration:line-through;text-decoration-color:rgba(89,100,117,.45)}
.vs-item.good{color:var(--navy);font-weight:600}

/* --- pastilles et bandeaux --- */
.pill-terra{background:none;color:var(--navy);font-size:15px;font-weight:600;border:none;border-bottom:1px solid var(--border);
  border-left:2px solid var(--terra);border-radius:0;padding:10px 0 10px 14px}
.banner-green,.banner-terra{background:none;color:var(--navy);border:none;
  border-radius:0;padding:16px 0 0;font-size:15px;font-weight:600;text-align:left}
.nav-card{background:none;border:none;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;padding:14px 0}
.nav-card-label{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--terra);margin-bottom:4px}
.nav-card-txt{font-size:14px;color:var(--muted);font-weight:300;line-height:1.6}
.why-card{background:none;border:none;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;
  padding:14px 0;font-size:15px;font-weight:600;color:var(--navy);display:flex;gap:10px;align-items:baseline}
.why-tick{color:var(--terra);font-weight:400}

/* --- à qui s'adresse Amosphère : nuage de tags groupé par catégorie, pas de liste/tableau --- */
.metiers-audience{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.metiers-cat-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:baseline}
.metiers-cat-label{font-family:'Outfit',sans-serif;font-size:13px;font-weight:800;letter-spacing:-.01em;line-height:1.35}
.metiers-tags{display:flex;flex-wrap:wrap;gap:8px}
.metier-tag{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:100px;border:1px solid currentColor;
  background:none;white-space:nowrap;opacity:.92}

/* --- extraits annuaire / annonces --- */
.extrait-section{background:var(--bg);padding:64px 0}
.profils-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-bottom:18px}
.profil-preview-card{background:none;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:14px 0;
  display:flex;align-items:center;gap:14px}
.pp-av{width:36px;height:36px;border-radius:0;font-size:12px;font-weight:700;letter-spacing:.04em;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.pp-spec{font-size:14.5px;font-weight:600;color:var(--navy)}
.pp-blur{font-size:12.5px;color:var(--muted);filter:blur(4px);user-select:none}
.pp-note{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:500;color:var(--terra);margin-left:auto}
.ann-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:16px}
.ann-prev-card{background:none;border:none;border-right:1px solid var(--border);border-radius:0;padding:16px 24px 18px 0}
.ann-prev-card:last-child{border-right:0;padding-right:0}
.ann-prev-card:not(:first-child){padding-left:24px}
.ann-prev-tag{background:none;color:var(--terra);font-family:'Outfit',sans-serif;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding:0;border-radius:0;margin-bottom:8px;display:block}
.ann-prev-metier{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:4px}
.ann-prev-blur{font-size:12px;color:var(--muted);filter:blur(3px);user-select:none;line-height:1.5}
.ann-prev-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--border)}

/* --- appel final : aplat navy, aligné à gauche --- */
.cta-card{background:var(--navy);border-radius:2px;padding:44px;text-align:left;margin:44px 0 0}
.cta-card h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:12px;line-height:1.15}
.cta-card p{font-size:15px;color:rgba(255,255,255,.62);font-weight:300;margin-bottom:0;max-width:56ch}

/* --- utilitaires de page --- */
.split-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.lead{font-size:clamp(17px,1.8vw,20px);font-weight:400;line-height:1.75;color:var(--navy);max-width:66ch}
.lead b{font-weight:700}
.lead s{text-decoration:none;color:var(--terra)}
.note{font-size:13px;color:var(--muted);font-weight:300;max-width:70ch}

@media(max-width:900px){
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-fg{display:none}
  .solution-steps{grid-auto-flow:row;grid-auto-columns:auto;gap:24px 0}
}
@media(max-width:768px){
  .inner,.hero-inner{padding:0 20px}
  .avantages-grid,.plus-grid,.profils-preview,.ann-preview,.versus-grid,.grid3,.trio-grid,.visib-grid,
  .partenariats-grid,.split-2,.benefices-grid{grid-template-columns:minmax(0,1fr)}
  .ben-card,.grid3 > *,.trio-grid > *,.visib-card,.part-card,.ann-prev-card{border-right:0;padding-right:0;
    border-bottom:1px solid var(--border)}
  /* Repris avec les mêmes sélecteurs :not()/:nth-child() que les règles desktop ci-dessus (ex.
     .part-card:not(:nth-child(3n+1))) : un simple .part-card{padding-left:0} a une spécificité CSS
     plus faible que ces règles et ne les emporte donc jamais, même placé après elles dans la feuille —
     c'est ce qui laissait un décalage à gauche sur les cartes en colonne unique sur mobile. */
  .ben-card:not(:nth-child(3n+1)),.grid3 > *:not(:first-child),.trio-grid > *:not(:first-child),
  .visib-card:not(:first-child),.part-card:not(:nth-child(3n+1)),.ann-prev-card:not(:first-child){padding-left:0}
  .pb-card{grid-template-columns:36px minmax(0,1fr)}
  .pb-desc{grid-column:2}
  .cta-card{padding:28px 22px}
  .metiers-cat-row{grid-template-columns:minmax(0,1fr);gap:8px}
}