:root {
  --terrain: #0e3a2c;      /* vert terrain profond : fonds sombres */
  --terrain-2: #14503c;
  --pelouse: #1f6b47;      /* vert pelouse : accents */
  --craie: #f4f1e8;        /* craie : fonds clairs */
  --papier: #ebe7db;
  --ligne: rgba(255, 255, 255, .10);
  --poteau: #f2b632;       /* jaune des poteaux : appel à l'action */
  --cuir: #8a5a2b;         /* cuir du ballon : détails */
  --encre: #12221b;        /* texte sur fond clair */
  --gris: #55665d;
  --gris-sombre: #a9c2b5;  /* texte secondaire sur fond sombre */
  --fragile: #b8522f;
  --rayon: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--encre); background: var(--craie); }
a { color: inherit; }
.enveloppe { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* en-tête */
header { position: sticky; top: 0; z-index: 10; background: var(--terrain); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
header .enveloppe { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: .01em; text-decoration: none; }
.marque b { color: var(--poteau); }
nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
nav a { text-decoration: none; opacity: .88; }
nav a:hover { opacity: 1; }
.langue { border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.bouton { display: inline-block; background: var(--poteau); color: var(--terrain); font-weight: 700; border: 0; border-radius: 999px; padding: 12px 22px; text-decoration: none; cursor: pointer; font-size: 16px; }
.bouton.petit { padding: 8px 16px; font-size: 14px; }
.menu-bouton { display: none; background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 18px; }

/* héros */
.heros { background: var(--terrain); color: #fff; position: relative; overflow: hidden;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(255,255,255,.22); }
/* Le terrain, dessiné en entier et seulement avec des dégradés (aucune image, aucune requête de plus).
   Demandes de Hugh (19 sept. 2026) : « enlever les hachures », puis « enlever les parties droite et gauche qui ne
   font pas partie du terrain ». Il n’y a donc plus de zones des buts ni de lignes de but : le champ de jeu traverse
   tout le héros, d’un bord à l’autre, comme une vue rapprochée du centre d’un terrain. Plus aucune couche n’est
   posée à une position particulière — tout se répète sur toute la largeur, ce qui donne exactement le même dessin
   au téléphone et à l’écran large. Les trois rythmes se referment sur les deux bords : une ligne toutes les
   5 verges (vingt intervalles), une bande de tonte de 10 verges centrée sur une ligne sur quatre (cinq intervalles),
   et les rangées de tirets. */
.terrain { position: absolute; inset: 0; pointer-events: none;
  --pas: 5%;      /* une ligne toutes les 5 verges : 100 / 5 = 20 intervalles, donc une ligne sur chaque bord */
  --tonte: 10%;   /* une bande de tonte de 10 verges, une ligne sur quatre : 100 / 20 = 5 intervalles */
  --tirets: 1%;   /* les tirets : un par verge */
  --trait: rgba(255,255,255,.17);
  --tiret: rgba(255,255,255,.15);
  --bande: rgba(255,255,255,.05);
  background:
    /* quatre rangées de tirets : les deux lignes de côté et les deux rangées de marques de centre */
    repeating-linear-gradient(90deg, var(--tiret) 0 1.5px, transparent 1.5px var(--tirets)) 0 5% / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--tiret) 0 1.5px, transparent 1.5px var(--tirets)) 0 33% / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--tiret) 0 1.5px, transparent 1.5px var(--tirets)) 0 67% / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--tiret) 0 1.5px, transparent 1.5px var(--tirets)) 0 95% / 100% 10px no-repeat,
    /* lignes de 5 verges */
    repeating-linear-gradient(90deg, transparent 0 calc(var(--pas) - 1.5px), var(--trait) calc(var(--pas) - 1.5px) var(--pas)),
    /* bandes de tonte : centrées sur les bords et sur une ligne sur quatre, donc symétriques d’un bord à l’autre */
    repeating-linear-gradient(90deg, var(--bande) 0 calc(var(--tonte) / 2), transparent calc(var(--tonte) / 2) calc(var(--tonte) * 1.5), var(--bande) calc(var(--tonte) * 1.5) calc(var(--tonte) * 2)); }

/* au téléphone, seuls les tirets s’espacent (un pour deux verges) : les lignes et les bandes gardent le même rythme
   qu’à l’écran large, pour que le décor soit le même dessin d’un appareil à l’autre. */
@media (max-width: 700px) {
  .terrain { --tirets: 2%; }
}
.heros .enveloppe { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; padding-top: 72px; padding-bottom: 80px; align-items: center; }
.surtitre { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--poteau); font-weight: 700; }
h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.05; margin: 14px 0 18px; letter-spacing: -.01em; }
.heros p.chapeau { font-size: 18px; color: var(--gris-sombre); max-width: 34em; margin: 0 0 28px; }
.heros p.chapeau strong { color: #fff; }
.carte { background: var(--terrain-2); border: 1px solid rgba(255,255,255,.12); border-radius: var(--rayon); padding: 22px; }
.carte h2 { font-size: 15px; margin: 0 0 4px; }
.carte .sous { font-size: 13px; color: var(--gris-sombre); margin: 0 0 12px; }
.carte svg { width: 100%; height: auto; display: block; }
.legende { display: flex; gap: 16px; font-size: 12px; color: var(--gris-sombre); margin-top: 8px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* chiffres de la preuve */
.chiffre b { display: block; font-size: 26px; color: var(--terrain); }
.chiffre span { font-size: 13px; color: var(--gris); }

section { padding: 72px 0; }
h2.titre { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 10px; color: var(--terrain); }
p.intro { color: var(--gris); max-width: 42em; margin: 0 0 32px; }

/* actions */
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.action { background: #fff; border: 1px solid #e0dacb; border-radius: var(--rayon); padding: 18px; }
.action h3 { margin: 0 0 6px; font-size: 16px; }
.action .seuils { font-size: 13px; color: var(--gris); }
.action .postes { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.poste { font-size: 11px; font-weight: 700; letter-spacing: .06em; background: var(--craie); border: 1px solid #ddd6c4; border-radius: 6px; padding: 2px 7px; color: var(--terrain); }
.etiquette { font-size: 11px; font-weight: 700; color: var(--fragile); border: 1px solid var(--fragile); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }

/* mesure */
.mesure { background: var(--terrain); color: #fff; }
.mesure h2.titre { color: #fff; }
.mesure p.intro { color: var(--gris-sombre); }
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.etape { border-top: 3px solid var(--poteau); padding-top: 14px; }
.etape b { display: block; font-size: 18px; margin-bottom: 6px; }
.etape span { color: var(--gris-sombre); font-size: 15px; }

/* ce que ce n'est pas */

/* liste d'attente */
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--terrain); }
.champ input { width: 100%; min-width: 0; font: inherit; font-weight: 400; color: var(--encre); padding: 12px 14px; border: 1px solid #cfc7b3; border-radius: 10px; background: #fff; }
.champ input:focus-visible, .consentement input:focus-visible, .bouton:focus-visible, .langue:focus-visible, .menu-bouton:focus-visible { outline: 3px solid var(--poteau); outline-offset: 2px; }
.consentement { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--gris); }
.consentement input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--pelouse); }
.formulaire .bouton { justify-self: start; }
.formulaire .bouton[disabled] { opacity: .6; cursor: wait; }
.etat { grid-column: 1 / -1; margin: 0; min-height: 1.5em; font-size: 15px; font-weight: 600; }
.etat.reussi { color: var(--pelouse); }
.etat.erreur { color: var(--fragile); }
/* Le champ piège : hors de vue pour un humain, présent pour un robot qui remplit tout. */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.note { font-size: 13px; color: var(--gris); margin-top: 10px; }

/* graphique de fiabilité */
.grille line { stroke: rgba(255,255,255,.10); stroke-width: 1; }
.diagonale { stroke: rgba(255,255,255,.45); stroke-dasharray: 4 4; }
.points { fill: var(--poteau); }
.axes { fill: var(--gris-sombre); font-size: 11px; font-family: system-ui, sans-serif; }
.pastille.observee { background: var(--poteau); }
.pastille.parfaite { background: rgba(255,255,255,.45); }
footer a { color: #fff; }

footer { background: var(--terrain); color: var(--gris-sombre); font-size: 13px; padding: 28px 0; }
footer p { margin: 4px 0; }

@media (max-width: 900px) {
  .heros .enveloppe { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 44px; padding-bottom: 52px; }
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--terrain); flex-direction: column; align-items: flex-start; padding: 16px 20px 20px; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
  nav.ouvert { display: flex; }
  .menu-bouton { display: inline-block; }
}
@media (max-width: 480px) {
  .actions { grid-template-columns: minmax(0, 1fr); }
  section { padding: 52px 0; }
}

/* page publique « Comment ça marche » */
.page-guide { padding-block: 48px 64px; }
.page-guide article { max-width: 780px; line-height: 1.7; font-size: 17px; }
.page-guide h1 { color: var(--terrain); font-size: clamp(32px, 4.5vw, 46px); margin: 10px 0 18px; }
.page-guide .guide-intro { font-size: 19px; color: var(--encre); }
.page-guide .guide-section h2 { color: var(--terrain); font-size: 23px; margin: 34px 0 8px; }
.page-guide .guide-note { background: #fff8e4; border-left: 4px solid var(--poteau); padding: 12px 16px; border-radius: 8px; }
.page-guide ul { padding-left: 22px; }
.page-guide .appel { margin-top: 36px; }
nav a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--poteau); }

/* vedettes de la semaine */
/* Deux sections voisines, deux natures (demande de Hugh, 19 sept. 2026 : « ajouter une différence de design entre
   ces deux sections »). Avant, « Les vedettes de la semaine » et « Les huit actions » avaient le MÊME fond que le
   corps de page : rien ne les distinguait. Désormais les vedettes sont une vitrine vivante — fond blanc, liséré or,
   la semaine en cours affichée — et les huit actions restent sur le fond craie avec un dessin sobre de page de
   référence : des filets, pas des cartes. */
.vedettes { background: #fff; border-top: 3px solid var(--poteau); border-bottom: 1px solid #e0dacb; padding-bottom: 40px; }
.vivant { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px;
  background: rgba(31,107,71,.10); border: 1px solid rgba(31,107,71,.35);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pelouse); }
.vivant i { width: 8px; height: 8px; border-radius: 50%; background: var(--pelouse); flex: none; }
/* la page de référence : une étiquette discrète, et huit filets au lieu de huit cartes */
.repere { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
#actions .action { background: transparent; border: 0; border-top: 2px solid #ddd6c4; border-radius: 0; padding: 14px 2px 0; }
#actions .action h3 { font-size: 17px; color: var(--terrain); }
#actions .poste { background: #fff; }
.vedettes-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vedette-carte { position: relative; background: #fff; border: 1px solid #e0dacb; border-top: 4px solid var(--poteau); border-radius: var(--rayon); padding: 18px 18px 16px; }
.vedette-etoile { position: absolute; top: 12px; right: 14px; color: var(--poteau); font-size: 22px; }
.vedette-carte h3 { margin: 0 0 6px; font-size: 20px; color: var(--terrain); padding-right: 24px; }
.vedette-carte p { margin: 4px 0; }
.vedette-qui { font-size: 14px; color: var(--encre); }
.vedette-quand { font-size: 13px; color: var(--gris); }
.vedette-action { font-weight: 700; margin-top: 12px !important; }
.vedette-chiffre b { font-size: 30px; color: var(--pelouse); margin-right: 6px; }
.vedette-chiffre span { font-size: 13px; color: var(--gris); }
@media (max-width: 900px) { .vedettes-grille { grid-template-columns: minmax(0, 1fr); } }

/* haut de page : la vedette de la semaine, les boutons Connexion */
.bouton.contour { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.bouton.contour:hover { border-color: #fff; }
.appels { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.heros .enveloppe.sans-vedette { grid-template-columns: minmax(0, 1fr); }
.carte-vedette { background: var(--craie); color: var(--encre); border-radius: var(--rayon); border-top: 5px solid var(--poteau); padding: 24px 24px 18px; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.carte-vedette .surtitre { color: var(--cuir); }
.carte-vedette p { margin: 4px 0; }
.vedette-nom { font-size: clamp(26px, 3vw, 34px); color: var(--terrain); margin: 8px 0 8px; line-height: 1.1; }
.carte-vedette .vedette-chiffre b { font-size: 44px; }
.vedette-pied { font-size: 13px; color: var(--gris); margin-top: 14px !important; }
.vedette-pied a { color: var(--pelouse); font-weight: 600; }

/* bandeau de preuve sous le héros (décision de Hugh, 11 sept. 2026) ; le graphique est dans « Comment on mesure » */
.bandeau { background: #fff; }   /* la séparation d’en dessous est le liséré or de .vedettes */
.bandeau .enveloppe { display: block; padding-top: 26px; padding-bottom: 28px; }
.bandeau-titre { margin: 0 0 16px; font-size: 14px; color: var(--gris); }
.bandeau-titre a { color: var(--pelouse); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bandeau-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bandeau-chiffres .chiffre { padding: 2px 24px; border-left: 1px solid #e0dacb; }
.bandeau-chiffres .chiffre:first-child { padding-left: 0; border-left: 0; }
.bandeau-chiffres .chiffre b { font-size: 32px; line-height: 1.15; margin-bottom: 4px; }
.mesure-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.etapes.empilees { grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (max-width: 900px) {
  .bandeau-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .bandeau-chiffres .chiffre:nth-child(3) { padding-left: 0; border-left: 0; }
  .mesure-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 480px) { .bandeau-chiffres .chiffre { padding: 2px 14px; } .bandeau-chiffres .chiffre b { font-size: 26px; } }

/* logos d'équipe (chez nous) et photos de joueur (chez la NFL) — décision de Hugh, 11 sept. 2026 */
.logo-eq { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin: 0 2px; }
.logo-eq.vide { display: none; }
.photo-j { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--papier); border: 2px solid #fff; box-shadow: 0 0 0 1px #e0dacb; flex: none; }
.vedette-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.vedette-carte .vedette-tete h3 { margin: 0; }
.carte-vedette .photo-j { width: 84px; height: 84px; }
.carte-vedette .vedette-nom { margin: 4px 0 0; }

/* /methode : l'espacement (demande de Hugh, 11 sept. 2026). La règle générale « section { padding: 72px 0 } » de
   l'accueil s'appliquait aussi à chaque section du guide : près de 180 px entre deux paragraphes de sections voisines. */
.page-guide .guide-section { padding: 0; }
.page-guide article { line-height: 1.6; }
.page-guide article p { margin: 0 0 12px; }
.page-guide .guide-intro { margin-bottom: 4px; }
.page-guide .guide-section h2 { margin: 32px 0 8px; }
.page-guide .guide-note { margin: 4px 0 12px; }
.page-guide ul { margin: 0 0 12px; }
.page-guide li { margin-bottom: 4px; }

/* pied de page : la signature (demande de Hugh, 11 sept. 2026) */
footer .credit { margin-top: 10px; color: #fff; }
footer .credit a { font-weight: 700; color: var(--poteau); text-decoration: none; }
footer .credit a:hover { text-decoration: underline; }

/* 0.10.2 — « Ce que YardOdds n'est pas » et « Accès sur invitation » : moins beige, plus invitant (demande de Hugh, 11 sept. 2026) */
.section-non, .attente { background: #fff; }
.section-non { padding-bottom: 24px; }
.non { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.non-carte { display: flex; flex-direction: column; gap: 6px; background: #f3f8f5; border: 1px solid #dcebe2; border-radius: var(--rayon); padding: 22px 22px 20px; font-size: 15px; color: var(--gris); }
.non-carte b { font-size: 18px; color: var(--terrain); }
.non-icone { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--terrain); margin-bottom: 8px; }
.non-icone svg { width: 32px; height: 32px; fill: none; stroke: var(--poteau); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.non-icone .barre-non { stroke: #ff8a6b; stroke-width: 2.2; }
.non-lien { margin-top: 6px; color: var(--pelouse); font-weight: 700; text-decoration: none; }
.non-lien:hover { text-decoration: underline; }

.attente { padding-top: 40px; }
#attente { scroll-margin-top: 36px; } /* l’en-tête collant ne doit pas recouvrir le haut du panneau */
.invitation { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: center;
  background: radial-gradient(90% 80% at 100% 0%, rgba(74,170,120,.30), transparent 60%), linear-gradient(135deg, var(--terrain) 0%, var(--terrain-2) 100%);
  color: #fff; border-radius: 24px; padding: 52px 52px; box-shadow: 0 24px 60px rgba(14,58,44,.28); }
.invitation::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--ligne) calc(10% - 1px) 10%); }
.invitation > * { position: relative; }
.vague { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: rgba(242,182,50,.14); border: 1px solid rgba(242,182,50,.45);
  color: var(--poteau); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vague i { width: 8px; height: 8px; border-radius: 50%; background: var(--poteau); box-shadow: 0 0 0 0 rgba(242,182,50,.7); animation: vague 2s infinite; }
@keyframes vague { 70% { box-shadow: 0 0 0 8px rgba(242,182,50,0); } 100% { box-shadow: 0 0 0 0 rgba(242,182,50,0); } }
@media (prefers-reduced-motion: reduce) { .vague i { animation: none; } }
.invitation h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; margin: 0 0 14px; color: #fff; }
.invitation-intro { font-size: 17px; color: var(--gris-sombre); margin: 0 0 26px; max-width: 32em; }
.invitation-sous { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .9; margin: 0 0 12px; }
.avantages { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.avantages li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.avantages li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--poteau)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230e3a2c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.invitation-carte { background: #fff; color: var(--encre); border-radius: 18px; border-top: 6px solid var(--poteau); padding: 28px 28px 22px; box-shadow: 0 18px 44px rgba(0,0,0,.30); }
.carte-titre { margin: 0 0 16px; font-size: 21px; font-weight: 800; color: var(--terrain); }
.formulaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.invitation-carte .champ input { background: #f8faf8; }
.invitation-carte .champ input:focus { border-color: var(--pelouse); background: #fff; }
.invitation-carte .formulaire .bouton { justify-self: stretch; font-size: 17px; padding: 14px 22px; box-shadow: 0 6px 16px rgba(242,182,50,.35); transition: transform .12s, box-shadow .12s; }
.invitation-carte .formulaire .bouton:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(242,182,50,.45); }
.invitation-carte .note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid #e8efe9; }
.cadenas { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--pelouse); stroke-width: 2; stroke-linecap: round; }
.deja { text-align: center; font-size: 15px; color: var(--gris); margin: 22px 0 0; }
.deja a { color: var(--pelouse); font-weight: 700; }
@media (max-width: 900px) {
  .non { grid-template-columns: minmax(0, 1fr); }
  .invitation { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 38px 28px; }
}
@media (max-width: 480px) {
  .invitation { padding: 30px 18px 18px; border-radius: 18px; }
  .invitation-carte { padding: 22px 18px 18px; }
}