/* G3 — home (front-page) — handoff IndexHome sections */

/* SITES / ANNUAIRE */
.g3-sites{background:var(--g3-paper);padding-bottom:80px;scroll-margin-top:24px}
.g3-sites__head{padding:120px 56px 56px}
.g3-sites__title{font-family:var(--g3-font-display);font-size:148px;line-height:1.02;letter-spacing:-.02em;color:var(--g3-ink);margin:0;max-width:1280px}
.g3-sites__intro{font-family:var(--g3-font-body);font-size:22px;line-height:1.5;color:var(--g3-ink);margin:40px 0 0;max-width:820px}

.g3-site-card{position:relative;margin:0 56px 96px;transform:rotate(var(--g3-tilt,0deg))}
.g3-site-card__inner{background:var(--g3-paper);border:2px solid var(--g3-ink);box-shadow:12px 12px 0 var(--g3-ink);display:grid;grid-template-columns:160px 360px 1fr;align-items:stretch;min-height:280px}
.g3-site-card--right .g3-site-card__inner{grid-template-columns:1fr 360px 160px}
.g3-site-card__rank{order:1;background:var(--g3-paper-soft);padding:24px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.g3-site-card__photo{order:2}
.g3-site-card__body{order:3}
.g3-site-card--right .g3-site-card__rank{order:3;align-items:flex-end}
.g3-site-card--right .g3-site-card__body{order:1;text-align:right}
.g3-site-card--left .g3-site-card__rank,.g3-site-card--left .g3-site-card__photo{border-right:2px solid var(--g3-ink)}
.g3-site-card--right .g3-site-card__rank,.g3-site-card--right .g3-site-card__photo{border-left:2px solid var(--g3-ink)}
.g3-site-card__tag{font-family:var(--g3-font-mono);font-size:10px;letter-spacing:.16em;color:var(--g3-ink-soft);min-height:1em;text-transform:uppercase}
.g3-site-card__tag.is-fav{color:var(--g3-accent)}
.g3-site-card__num{font-family:var(--g3-font-display);font-size:140px;line-height:.8;-webkit-text-stroke:3px var(--g3-accent);color:transparent;letter-spacing:-.02em}
.g3-site-card__total{font-family:var(--g3-font-mono);font-size:10px;color:var(--g3-ink-soft);letter-spacing:.16em}
.g3-site-card__photo img{width:100%;height:100%;object-fit:cover;display:block;min-height:280px}
.g3-site-card__body{padding:32px 36px;display:flex;flex-direction:column;justify-content:space-between;background:var(--g3-paper)}
.g3-site-card__name{font-family:var(--g3-font-display);font-size:52px;line-height:.92;text-transform:uppercase;letter-spacing:-.015em;margin:0;color:var(--g3-ink)}
.g3-site-card__tagline{font-family:var(--g3-font-mono);font-size:17px;font-weight:700;line-height:1.35;color:var(--g3-accent);letter-spacing:.02em;text-transform:uppercase;margin:12px 0 0;max-width:560px}
.g3-site-card--right .g3-site-card__tagline{margin-left:auto}
.g3-site-card__blurb{font-family:var(--g3-font-body);font-size:16px;line-height:1.55;color:var(--g3-ink);margin:16px 0 0;max-width:580px}
.g3-site-card--right .g3-site-card__blurb{margin-left:auto}
.g3-site-card__blurb a{color:inherit;font-weight:700;text-decoration:underline}
.g3-site-card__meta{margin-top:22px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.g3-site-card--right .g3-site-card__meta{align-items:flex-end}
.g3-site-card__rating{display:flex;align-items:center;gap:14px;font-family:var(--g3-font-mono);font-size:14px;font-weight:700;color:var(--g3-ink);letter-spacing:.04em}
.g3-stars .on{color:var(--g3-accent)}
.g3-stars .off{color:var(--g3-ink-mute)}
.g3-site-card__pricing{font-family:var(--g3-font-mono);font-size:13.5px;color:var(--g3-ink);letter-spacing:.02em;line-height:1.7}
.g3-site-card__cta{align-self:flex-start;padding:12px 20px;background:var(--g3-ink);color:var(--g3-paper);font-family:var(--g3-font-fat);font-size:13px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;margin-top:4px}
.g3-site-card--right .g3-site-card__cta{align-self:flex-end}

/* ABOUT (lime) */
.g3-about{background:var(--g3-accent2);color:var(--g3-ink);padding:160px 56px 140px;border-top:2px solid var(--g3-ink);border-bottom:2px solid var(--g3-ink)}
.g3-about__title{font-family:var(--g3-font-display);font-size:148px;line-height:1.02;letter-spacing:-.02em;margin:0;max-width:1280px;color:var(--g3-ink)}
.g3-about__title--long{font-size:clamp(48px,7vw,104px);line-height:1.04}
.g3-about__intro{font-family:var(--g3-font-body);font-size:22px;line-height:1.55;margin:48px 0 0;max-width:920px}
.g3-about__grid{margin-top:100px;display:grid;grid-template-columns:repeat(3,1fr);gap:56px;border-top:2px solid var(--g3-ink);padding-top:64px}
.g3-about__grid--duo{grid-template-columns:repeat(2,1fr);gap:72px}
.g3-about__col--wide{grid-column:1/-1;max-width:920px;justify-self:center}
.g3-about__reel{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.g3-reel-card{margin:0;border:2px solid var(--g3-ink);background:var(--g3-ink);box-shadow:6px 6px 0 var(--g3-ink)}
.g3-reel-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--g3-ink)}
.g3-reel-card figcaption{font-family:var(--g3-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--g3-ink);background:var(--g3-paper);border-top:2px solid var(--g3-ink);padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px}
.g3-reel-card__name{white-space:nowrap}
.g3-reel-card__link{color:var(--g3-accent);font-weight:700;text-decoration:none;white-space:nowrap}
.g3-reel-card__link:hover{text-decoration:underline}
.g3-chapter{font-family:var(--g3-font-mono);font-size:12px;color:var(--g3-accent);letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.g3-about__h3{font-family:var(--g3-font-display);font-size:44px;line-height:.95;color:var(--g3-ink);text-transform:uppercase;letter-spacing:-.01em;margin:0}
.g3-about__col p{font-family:var(--g3-font-body);font-size:16px;line-height:1.6;color:var(--g3-ink);margin:22px 0 0}
.g3-about__col a,.g3-about__intro a{color:inherit;font-weight:700;text-decoration:underline}
.g3-about__list{list-style:none;padding:0;margin:22px 0 0;font-family:var(--g3-font-body);font-size:16px;line-height:1.55;display:flex;flex-direction:column;gap:12px}
.g3-about__list li{display:flex;gap:12px}
.g3-mark{color:var(--g3-accent);font-family:var(--g3-font-fat);font-size:14px;flex-shrink:0;margin-top:2px}

/* FAQ */
.g3-faq{background:var(--g3-paper);padding:160px 56px 140px}
.g3-faq__title{font-family:var(--g3-font-display);font-size:108px;line-height:1.02;letter-spacing:-.02em;color:var(--g3-ink);margin:0 0 80px;max-width:1200px}
.g3-faq__list{display:flex;flex-direction:column;gap:64px}
.g3-faq__row{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;border-top:2px solid var(--g3-ink);padding-top:48px}
.g3-faq__qnum{font-family:var(--g3-font-mono);font-size:11px;color:var(--g3-accent);letter-spacing:.16em;margin-bottom:14px}
.g3-faq__qtitle{font-family:var(--g3-font-display);font-size:56px;line-height:.95;color:var(--g3-ink);text-transform:uppercase;letter-spacing:-.015em;margin:0}
.g3-faq__a{font-family:var(--g3-font-body);font-size:17px;line-height:1.65;color:var(--g3-ink);margin:0}
.g3-faq__a a{color:inherit;font-weight:700;text-decoration:underline}
.g3-faq__a p{margin:0 0 18px}
.g3-faq__a p:last-child{margin-bottom:0}

/* FEATURES / LE MAG */
.g3-features{background:var(--g3-paper);padding:160px 0 140px}
html[lang^="en"] .g3-features{padding-top:64px}
.g3-features__head{padding:0 56px 80px;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px}
.g3-features__title{font-family:var(--g3-font-display);font-size:148px;line-height:1.02;letter-spacing:-.02em;color:var(--g3-ink);margin:0}
.g3-btn-shadow{text-decoration:none;padding:14px 22px;background:var(--g3-ink);color:var(--g3-paper);font-family:var(--g3-font-fat);font-size:14px;letter-spacing:.04em;text-transform:uppercase;box-shadow:5px 5px 0 var(--g3-accent2);white-space:nowrap;align-self:flex-end}
.g3-features__grid{padding:0 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}

@media (max-width:760px){
  .g3-eyebrow{margin-bottom:18px;font-size:11px}
  .g3-sites__head{padding:64px 20px 32px}
  .g3-sites__title{font-size:clamp(40px,11vw,72px)}
  .g3-sites__intro{font-size:16px;margin-top:24px}
  .g3-site-card{margin:0 14px 36px;transform:none}
  .g3-site-card__inner,.g3-site-card--right .g3-site-card__inner{grid-template-columns:1fr;box-shadow:6px 6px 0 var(--g3-ink);min-height:0}
  .g3-site-card--left .g3-site-card__rank,.g3-site-card--right .g3-site-card__rank{order:1!important;flex-direction:row;align-items:center;justify-content:space-between;padding:14px 18px;border:0!important;border-bottom:2px solid var(--g3-ink)!important}
  .g3-site-card--left .g3-site-card__photo,.g3-site-card--right .g3-site-card__photo{order:2!important;border:0!important;border-bottom:2px solid var(--g3-ink)!important}
  .g3-site-card--left .g3-site-card__body,.g3-site-card--right .g3-site-card__body{order:3!important;text-align:left;padding:24px 20px}
  .g3-site-card__num{font-size:64px}
  .g3-site-card__photo img{aspect-ratio:3/4;height:auto;min-height:0}
  .g3-site-card__name{font-size:34px}
  .g3-site-card__tagline,.g3-site-card--right .g3-site-card__tagline{font-size:14px;margin-left:0}
  .g3-site-card__blurb,.g3-site-card--right .g3-site-card__blurb{font-size:15px;margin-left:0}
  .g3-site-card__meta,.g3-site-card--right .g3-site-card__meta{align-items:flex-start}
  .g3-site-card--right .g3-site-card__cta{align-self:flex-start}
  .g3-about{padding:72px 20px 64px}
  .g3-about__title{font-size:clamp(40px,11vw,72px)}
  .g3-about__intro{font-size:16px;margin-top:28px}
  .g3-about__grid{margin-top:56px;grid-template-columns:1fr;gap:44px;padding-top:40px}
  .g3-about__reel{margin-top:36px;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .g3-faq{padding:72px 20px 64px}
  .g3-faq__title{font-size:clamp(38px,10vw,64px);margin-bottom:44px}
  .g3-faq__list{gap:40px}
  .g3-faq__row{grid-template-columns:1fr;gap:18px;padding-top:28px}
  .g3-faq__qtitle{font-size:30px}
  .g3-faq__a{font-size:15.5px}
  .g3-features{padding:72px 0 72px}
  .g3-features__head{flex-direction:column;align-items:flex-start;gap:24px;padding:0 20px 44px}
  .g3-features__title{font-size:clamp(44px,12vw,72px)}
  .g3-btn-shadow{align-self:flex-start}
  .g3-features__grid{grid-template-columns:1fr;gap:28px;padding:0 14px}
}

/* TABLETTE (761-1016px) : les colonnes rang et photo des cartes de l'annuaire rétrécissent
   avec la fenêtre et retrouvent 160px / 360px à 1016px, la colonne texte garde ~380px.
   Sans ça le 1fr du texte ne descend pas sous le nom le plus long et pousse le rang hors de la carte. */
@media (min-width:761px) and (max-width:1016px){
  .g3-site-card{margin:0 calc(32px + (100vw - 761px)*.094) 72px}
  .g3-site-card__inner{grid-template-columns:calc(96px + (100vw - 761px)*.25) calc(220px + (100vw - 761px)*.55) minmax(0,1fr)}
  .g3-site-card--right .g3-site-card__inner{grid-template-columns:minmax(0,1fr) calc(220px + (100vw - 761px)*.55) calc(96px + (100vw - 761px)*.25)}
  .g3-site-card__rank{padding:20px 14px}
  .g3-site-card__num{font-size:calc(76px + (100vw - 761px)*.25)}
  .g3-site-card__body{padding:28px}
  .g3-site-card__name{font-size:44px;overflow-wrap:break-word}
}

/* PETITE TABLETTE (761-860px) : les 3 cartes du Mag gardent des colonnes égales.
   En 1fr, le mot le plus long d'un titre élargissait sa colonne et poussait la 3e hors de l'écran. */
@media (min-width:761px) and (max-width:860px){
  .g3-features__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .g3-features__grid .g3-feat-card__body{padding:22px 18px}
  .g3-features__grid .g3-feat-card__title{font-size:24px;overflow-wrap:break-word}
}

/* 1017-1069px : la colonne texte fait moins de 434px, le nom le plus long (MakeLoveNotPorn)
   ne tient plus en 52px et poussait le rang hors du cadre. Le nom suit la largeur
   de la colonne (44px à 1017, 52px à 1070), pour toutes les cartes. */
@media (min-width:1017px) and (max-width:1069px){
  .g3-site-card__inner{grid-template-columns:160px 360px minmax(0,1fr)}
  .g3-site-card--right .g3-site-card__inner{grid-template-columns:minmax(0,1fr) 360px 160px}
  .g3-site-card__name{font-size:calc((100vw - 708px)*.142);overflow-wrap:break-word}
}