/* Univers Gestion locative — couleur pilotée par <body data-univers="locative"> (voir produit.css).
   Page Garantie des Loyers Impayés, d'après la maquette Figma « Gli 1 » (2026-10-28). Les blocs déjà existants (bandeau de chiffres,
   résumé, Pourquoi choisir, documentation, conditions, À qui s'adresse, FAQ, produits en lien, CTA) gardent le design des autres pages
   produit ; ce fichier ne contient que les variantes et blocs propres au Figma (préfixe .gli-). Couleurs : jetons, pas de hex. */

/* sections suivantes : compenser la hauteur du header+breadcrumb fixes (109px) */
body.nav-overlay .produit-intro,body.nav-solid .produit-intro{scroll-margin-top:109px}

/* ── HERO — photo fournie le 2026-10-29 (hero-site-ODEALIM_GLI.jpg, même visuel que GLI baux commerciaux) ; remplace le dégradé marine du Figma ── */
.hero-gli{background-color:#a23620;background-image:url('../images/hero-gli-v2.jpg');background-size:cover;background-position:center}
.hero-gli .hero-sub{color:rgba(255,255,255,.85);font-style:italic;font-weight:300}

/* ── RÉSUMÉ : phrase d'accroche en gras ; Pourquoi choisir = paragraphe unique avec mots en gras, pastille marine ── */
.gli-punch{font-weight:700;font-size:var(--ty-h4-size)}
.pq-list{justify-content:flex-start;flex:unset}
.pq-card{align-items:center}
.pq-ico{background:var(--navy);color:#fff;width:48px;height:48px}
.pq-desc strong{font-weight:700}

/* ── TÉLÉCHARGER LES FICHES PRODUITS : fond de l'univers (même couleur que « À qui s'adresse », demande du 2026-10-28 ; le Figma avait un bleu clair),
   cartes blanches, pastille brique ── */
.gli-fiches{background:var(--bg)}
.gli-fiches .docu-grid{margin-top:32px}
.gli-fiches .docu-card{background:#fff}
.gli-fiches .docu-card-ico.ico-doc{background:var(--brique);color:#fff}
.gli-lead{font-size:var(--ty-body);color:var(--text2);line-height:1.6;max-width:680px}
.gli-lead ul{margin:6px 0 0;padding-left:24px}
.gli-lead li{margin:2px 0}

/* ── conteneur commun des blocs .gli- ── */
.gli-inner{max-width:1280px;margin:0 auto}

/* ── ACCROCHE : grand texte couleur d'univers sur fond de l'univers ── */
.gli-accroche{background:var(--bg);padding:100px 2.5rem}
.gli-accroche .kicker{color:var(--brique)}
.gli-accroche-txt{font-size:var(--ty-h2-size);font-weight:600;line-height:1.25;letter-spacing:-.5px;color:var(--corail);margin:0;max-width:1180px}

/* ── NOS OFFRES : 3 visuels (photos du Figma, légèrement voilées) ── */
.gli-offres{background:#fff;padding:100px 2.5rem 40px}
.gli-offres .kicker{color:var(--brique)}
.gli-offre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;margin-top:40px}
/* proportions = celles de la photo (900×1254 : recadrée de 12 px en haut le 2026-10-29 pour retirer la bande de mur rouge au-dessus du hublot) : la photo entière s'affiche, hublot jamais rogné sur les côtés (avant : 538px fixes → photo zoomée sous 1440px) */
.gli-offre-card{position:relative;aspect-ratio:900/1254;border-radius:var(--r-lg);overflow:hidden;background:#d9d9d9;display:flex;align-items:center;justify-content:center}
/* photos portrait de la DA (2026-10-29, images/gli/offre-*-photo.jpg, 900×1266) : sujet dans un cercle en haut, mur uni en bas → cadrage calé en haut */
.gli-offre-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* libellé sous le hublot (le bas du cercle est à ≈ 58 % de la largeur depuis le haut) : marge en % = % de la largeur, donc juste à toutes les tailles */
.gli-offre-card{align-items:flex-start}
.gli-offre-card span{margin-top:66%}
.gli-offre-card span{position:relative;padding:0 24px;line-height:1.3;font-size:24px;font-weight:600;color:#fff;text-align:center;text-shadow:0 1px 8px rgba(28,28,54,.35)}
/* les cartes sont des <button> : un clic affiche le tableau de l'offre */
button.gli-offre-card{border:0;padding:0;font-family:inherit;cursor:pointer;transition:transform .2s,box-shadow .2s}
button.gli-offre-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(28,28,54,.18)}
button.gli-offre-card:focus-visible,button.gli-offre-card[aria-expanded="true"]{outline:3px solid var(--lavande);outline-offset:4px}

/* ── DÉTAIL DE L'OFFRE — MASQUÉ tant qu'on n'a pas cliqué sur une carte.
   Même design que « Les garanties clés » de MRI (2026-10-29, demande de l'utilisateur) : section sur le fond de l'univers, tableau = carte blanche
   (bord #E5EAF0 comme .gar-table de produit.css), lignes séparées par un trait de 2px en retrait, intitulé 16px gras, valeurs 16px légères ;
   bandeau devis standard (.gc-footer de produit.css, couleur d'univers) 12px sous la carte, comme .gar-cards ── */
.gli-detail{display:none;background:var(--bg);padding:80px 2.5rem;scroll-margin-top:109px}
.gli-detail.is-open{display:block}
.gli-detail .kicker{color:var(--brique)}
.gli-table{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.gli-gar{background:#fff;border:1px solid #E5EAF0;border-radius:var(--r-lg);overflow:hidden}
/* tableau « Nos garanties » d'une offre (un .gli-gar par offre, affiché par le script) : garantie | montant | franchise | durée */
.gli-gr{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px;align-items:center;padding:22px 28px}
.gli-gr:not(.gli-gr-head){background:linear-gradient(#E5EAF0,#E5EAF0) 28px 0/calc(100% - 56px) 2px no-repeat}   /* = .gar-sep */
.gli-gr-head{font-size:var(--ty-xs);font-weight:600;color:var(--text);line-height:1.5}
.gli-group{display:none}   /* intertitres « Garanties socles » / « En option » masqués dans les 3 tableaux (demande du 2026-10-29) ; supprimer cette ligne pour les réafficher */
.gli-gn{font-size:var(--ty-xs);font-weight:600;color:var(--text);line-height:1.5}   /* = .gar-th */
.gli-gn small,.gli-gv small{display:block;font-weight:300;color:#3A4A5C}
.gli-gv{font-size:var(--ty-xs);color:#3A4A5C;line-height:1.75;font-weight:300}   /* = .gar-td */

/* ── AMÉNAGEMENTS : variante fond marine du Figma (pastilles transparentes bordées, puce ronde) ── */
.gli-amenagements{background:var(--navy);padding:100px 2.5rem}
.gli-amenagements .stitle{color:#fff}
.gli-amenagements .va-pill{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.25);border-radius:40px;color:#fff;font-size:var(--ty-body);font-weight:400;padding:18px 28px;align-items:center;gap:14px}
.gli-amenagements .va-pill::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--brume);margin-top:0}
.gli-amenagements .offre-bg-text{color:rgba(255,255,255,.05);opacity:1;left:auto;right:-20px;bottom:-.25em;white-space:nowrap}

/* aménagements masqués (style en ligne) ; conditions d'éligibilité (#gli-conditions) affichées seulement avec l'offre Lebonloc (.is-open + style posés
   par le script de la page, 2026-10-28). Alternance des fonds (tableau sur le fond de l'univers depuis le 2026-10-29) :
   tableau fermé → « Nos offres » blanc puis « À qui s'adresse » fond d'univers ; tableau ouvert → « À qui s'adresse » blanc ;
   tableau + conditions (Lebonloc) → conditions blanches, « À qui s'adresse » fond d'univers */
.gli-amenagements ~ .exclusions{background:#fff}
.gli-detail.is-open ~ .aqui{background:#fff}
.gli-detail.is-open ~ .exclusions.is-open ~ .aqui{background:var(--bg)}

/* ── EN SAVOIR PLUS (podcast + vidéo, au-dessus de la FAQ) : 2 cartes seulement → 2 colonnes au lieu des 3 de .docu-grid ── */
.gli-media .docu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.gli-media .docu-grid{grid-template-columns:minmax(0,1fr)}}
/* vidéo GLI (2026-10-30) : bouton « Regarder la vidéo » de la carte Vidéo → fenêtre js/video-modal.js (plus de lecteur dans la carte) */

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .gli-offre-grid{gap:24px}
  .gli-gr{gap:16px}
}
@media(max-width:768px){
  .gli-accroche,.gli-offres,.gli-detail,.gli-amenagements{padding-left:1.25rem;padding-right:1.25rem}
  .gli-accroche,.gli-amenagements{padding-top:48px;padding-bottom:48px}
  .gli-offres{padding-top:48px}
  .gli-detail{padding-bottom:48px}
  .gli-accroche-txt{font-size:24px}
  .gli-offre-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .gli-offre-card span{margin-top:0}
  .gli-offre-card{height:auto;aspect-ratio:4/5;align-items:flex-end;padding-bottom:28px}   /* portrait : le cercle de la photo en haut, le libellé sur le mur en bas (sinon il couvre le visage) */
  /* mobile : une garantie par bloc, chaque valeur précédée de son intitulé (data-l) ; cases vides et ligne d'en-tête masquées */
  .gli-gr{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 20px}
  .gli-gr:not(.gli-gr-head){background-position:20px 0;background-size:calc(100% - 40px) 2px}
  .gli-gr-head + .gli-group + .gli-gr{background:none}   /* 1re ligne (l'en-tête est masqué) : pas de trait au-dessus */
  .gli-gr-head,.gli-gv-vide{display:none}
  .gli-gv{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;text-align:right;white-space:nowrap}
  .gli-gv::before{white-space:normal}
  .gli-gv small{grid-column:2}
  .gli-gv::before{content:attr(data-l);font-size:var(--ty-xs);font-weight:600;color:var(--navy);text-align:left}
  .gli-amenagements .va-grid{grid-template-columns:minmax(0,1fr)}
  .gli-amenagements .va-pill{border-radius:var(--r-lg)}
}