/* ════════════════════════════════════════════════════════════════════════════
   univers.css — pages UNIVERS (univers-immeubles / univers-gestion-locative / univers-professionnels-immo / univers-pro-tertiaire)
   Refonte du 2026-10-26 : mêmes sections, dans le même ordre, que la page d'accueil (index.html) ; seules 3 choses changent d'une page à l'autre
   et elles suivent <body data-univers="…"> (jetons --lavande / --lavande-d posés par produit.css) :
     1. le héros (aplat de la couleur de l'univers),
     2. le bandeau de chiffres clés (le .stats-band des pages produit : teinte foncée de l'univers, compteurs de js/stats-band.js),
     3. les produits de l'univers (<div class="bento" data-content="…"> : cartes générées par js/products.js, pas d'onglets).
   Tout le reste (engagements, témoignage, actualités, appel à l'action) est la copie des blocs de l'accueil et est mis en forme par home2.css (.hm-*).
   Ce fichier ne contient donc que ce qui est propre aux pages univers ; aucune couleur en dur, aucune règle sur .stats-band (produit.css).
   Anciennes pages et feuilles : _archive/avant-refonte-univers/.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── HÉROS : aplat de la couleur de l'univers, texte posé comme sur l'accueil ── */
.hero-univers{background-color:var(--lavande);padding-left:2.5rem;padding-right:2.5rem}
/* hauteur et marges verticales : règle commune des héros (header.css : 869 px ≥ 1101 px, texte dans la zone centrale), comme les pages produit à aplat */
.hero-univers .hero-inner{width:100%;max-width:1280px;margin:0 auto}
.hero-univers h1{max-width:900px;margin-bottom:36px}
.hero-univers .hero-sub{max-width:700px;color:#fff;font-size:var(--ty-h3-size);line-height:1.5;margin-bottom:48px}
.hero-univers .hero-actions{margin-bottom:0}

/* ── PHOTOS DE LA DA (2026-10-29, versions paysage 3200×1800 des photos des cartes « Nos univers ») : plein fond, sujet à droite, texte sur le mur.
   Immeubles = même visuel que le héros Particuliers, Pro = même visuel que le héros Professionnels (fichiers réutilisés). Risques d'entreprise : pas encore de
   photo, aplat d'univers. body[data-univers] : les pages légales, qui partagent .hero-univers sans data-univers, ne sont pas touchées. ── */
body[data-univers="immeubles"] .hero-univers{background:var(--lavande) url('../images/hero-particuliers.jpg') center/cover no-repeat}
body[data-univers="locative"]  .hero-univers{background:var(--lavande) url('../images/hero-univers-locative.jpg') center/cover no-repeat}
body[data-univers="pro"]       .hero-univers{background:var(--lavande) url('../images/hero-professionnels.jpg') center/cover no-repeat}
body[data-univers="entreprise"] .hero-univers{background:var(--lavande) url('../images/hero-univers-entreprise.jpg') center/cover no-repeat}
/* sujets des photos à partir de ≈ 55 % de la largeur : titre resserré pour ne pas passer dessus */
body[data-univers] .hero-univers h1{max-width:680px}
/* titres du document « Pages Univers » (2026-10-30) : jusqu'à 5 lignes à 680 px → le texte démarre plus haut, comme sur l'accueil (180 / 56 px au lieu de 294 / 220),
   sinon les boutons sortaient des 869 px du héros (Risques d'entreprise). Bureau seulement : tablette / téléphone gardent leurs marges (§23). */
@media(min-width:1101px){
  body.nav-overlay[data-univers] section.hero-univers,body.nav-solid[data-univers] section.hero-univers{padding-top:180px;padding-bottom:56px}
}

/* ── PRODUITS DE L'UNIVERS (section .hm-cat de l'accueil, sans les onglets) ── */
.hm-cat .hm-title+.bento{margin-top:38px}   /* titre → cartes (l'accueil met ses onglets entre les deux : margin 38 px) */
.un-kicker{color:var(--lavande-d,#525377)}   /* surtitre à la teinte foncée de l'univers (≥ 4,5:1 sur le greige) */

/* ── NOTRE EXPERTISE (Risques d'entreprise, 2026-11-02) : fond blanc entre le bandeau de chiffres et le catalogue greige ; 3 cartes bordées comme
   « Les garanties clés » des pages produit (#E5EAF0, 16 px), pictogramme et puces à la couleur de l'univers ── */
.un-exp{background:#fff;padding:88px 2.5rem 96px}
.un-exp .hm-desc{max-width:760px}
.un-exp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.un-exp-card{border:1px solid #E5EAF0;border-radius:16px;padding:32px 28px 34px;background:#fff}
.un-exp-ico{width:44px;height:44px;padding:10px;border-radius:50%;box-sizing:border-box;color:#fff;background:var(--lavande,#9a903a);margin-bottom:20px}
.un-exp-title{font-size:var(--ty-h4-size);font-weight:700;line-height:1.3;color:var(--navy,#1c1c36);margin-bottom:14px}
.un-exp-p{font-size:var(--ty-body);line-height:1.55;color:var(--navy,#1c1c36);margin-bottom:16px}
.un-exp-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.un-exp-list li{position:relative;padding-left:20px;font-size:var(--ty-body);line-height:1.55;color:var(--navy,#1c1c36)}
.un-exp-list li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--lavande,#9a903a)}
.un-exp-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.un-exp-tags li{font-size:var(--ty-body);font-weight:500;line-height:1;padding:10px 16px;border-radius:999px;color:var(--lavande-d,#64613e);background:color-mix(in srgb,var(--lavande-l,#d2d36d) 28%,#fff)}

@media(max-width:1100px){
  .un-exp-grid{grid-template-columns:minmax(0,1fr)}
}

/* ── Mobile ── */
@media(max-width:768px){
  .hero-univers{padding-left:1.25rem;padding-right:1.25rem}
  .un-exp{padding:64px 1.25rem 72px}
  .un-exp-grid{margin-top:36px;gap:16px}
  .un-exp-card{padding:26px 22px 28px}
}

/* liste longue en puces (carte « Nos garanties », 19 garanties, 2026-11-02) : sur 2 colonnes quand la carte prend toute la largeur
   (tablette), 1 colonne quand les 3 cartes sont côte à côte (bureau) ou sur téléphone */
.un-exp-list-cols{display:block}
.un-exp-list-cols li{break-inside:avoid;margin-bottom:12px}
@media(max-width:1100px) and (min-width:601px){.un-exp-list-cols{columns:2;column-gap:36px}}
/* bureau (> 1100 px) : la carte de la liste longue prend toute la largeur (liste sur 3 colonnes) et les 2 autres cartes se partagent la ligne
   suivante — sinon les 3 cartes côte à côte s'étirent toutes à la hauteur de la liste */
@media(min-width:1101px){
  .un-exp-grid:has(.un-exp-list-cols){grid-template-columns:repeat(2,minmax(0,1fr))}
  .un-exp-card:has(.un-exp-list-cols){grid-column:1/-1}
  .un-exp-list-cols{columns:3;column-gap:40px}
}