* { box-sizing: border-box; }
body.gr-page { margin: 0; background: #F8F7F2; font-family: Inter, system-ui, sans-serif; color: #0B0F3B; }
.gr-evitement { position: absolute; left: -9999px; top: 0; }
.gr-evitement:focus { left: 12px; top: 12px; z-index: 10; padding: 8px 14px; background: #FFFFFF; border: 2px solid #0B0F3B; border-radius: 8px; }
a { color: #0B0F3B; }
a:hover { color: #4A4A5A; }

.gr-entete { border-bottom: 1px solid #E4E2D8; }
.gr-entete-int { max-width: 1140px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.gr-logo img { display: block; height: 34px; width: auto; }
.gr-bouton { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 100px; background: #C6FF00; color: #0B0F3B; font-weight: 700; font-size: 14px; text-decoration: none; }
.gr-bouton:hover { color: #0B0F3B; filter: brightness(0.96); }
.gr-bouton:focus-visible { outline: 3px solid #0B0F3B; outline-offset: 2px; }
.gr-bouton-grand { padding: 15px 30px; font-size: 15px; }

.gr-intro { max-width: 860px; margin: 0 auto; padding: 64px 40px 40px; display: flex; flex-direction: column; gap: 18px; }
.gr-surtitre { margin: 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6C6A5E; }
.gr-titre { margin: 0; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 46px; line-height: 1.15; }
.gr-surligne { background: linear-gradient(transparent 62%, #C6FF00 0%); }
.gr-chapo { margin: 0; font-size: 17px; line-height: 1.65; color: #4A4A5A; }
.gr-legende { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E4E2D8; }
.gr-legende svg { flex: none; }
.gr-legende p { margin: 0; font-size: 15px; line-height: 1.55; }

.gr-liste { max-width: 860px; margin: 0 auto; padding: 0 40px 72px; display: flex; flex-direction: column; }
.gr-item { display: flex; gap: 36px; align-items: flex-start; padding: 30px 0; border-top: 1px solid #E4E2D8; }
.gr-item-dernier { border-bottom: 1px solid #E4E2D8; }
.gr-dessin { width: 240px; height: 160px; flex: none; border-radius: 14px; background: #FFFFFF; border: 1px solid #E4E2D8; display: flex; align-items: center; justify-content: center; }
.gr-texte { display: flex; flex-direction: column; gap: 8px; }
.gr-texte h2 { margin: 0; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 26px; }
.gr-texte p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #4A4A5A; }

.gr-bande { background: #0B0F3B; }
.gr-bande-int { max-width: 860px; margin: 0 auto; padding: 56px 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.gr-bande h2 { margin: 0; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 30px; color: #F8F7F2; }
.gr-bande p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #B8B6CF; max-width: 560px; }

@media (max-width: 700px) {
  .gr-entete-int, .gr-intro, .gr-liste, .gr-bande-int { padding-left: 20px; padding-right: 20px; }
  .gr-entete-int { flex-wrap: wrap; }
  .gr-intro { padding-top: 36px; }
  .gr-titre { font-size: 34px; }
  .gr-item { flex-direction: column; gap: 16px; }
  .gr-dessin { width: 100%; max-width: 320px; }
  .gr-legende { flex-direction: column; align-items: flex-start; }
}