/* Page rules for /fr/creer-un-jeu-roblox-avec-ia only (shared CSS stays untouched).
   The page reuses the /roblox-ai-game-maker classes (seo-landing.css + game-maker.css);
   these rules only fit the longer French labels and the two sections the English twin
   lays out differently (Build vs RoCode tiles, the Starter strip without plan cards). */

/* The French header labels ("Connexion", "Commencer") are about 50px wider than the English
   ones, so below about 410px the signed-out header ran past the 16px gutter and the page
   scrolled sideways. There, the header hides its login link: "Commencer" opens /login too,
   and "Connexion" stays in the menu drawer. !important beats the inline display that
   lib/site-chrome.js sets on #nav-login-btn. */
@media (max-width: 420px) {
    .site-header #nav-login-btn { display: none !important; }
}

/* Step 6 of the build loop: "Briques mortelles" and "Sauvegarde" are wider than the English chips,
   so four rows ran past the 128px picture. Smaller chips keep it to three rows. */
.gm-art-next { gap: 6px; padding: 10px 12px; }
.gm-art-next .gm-loop-chip { height: 26px; padding: 0 9px; gap: 5px; font-size: 12px; }
/* Below 360px the four chips need four rows in a 114px box: 4 x 22 + 3 x 4 + 12 = 112px */
@media (max-width: 359px) {
    .gm-art-next { gap: 4px; padding: 6px 8px; }
    .gm-art-next .gm-loop-chip { height: 22px; padding: 0 7px; font-size: 11.5px; }
}

/* Build vs RoCode: the versus tiles (seo-landing.css .sl-vs), names as h3.
   The French facts are sentence length, so centred wrapped chips looked ragged: at every width
   each tile shows a centred block of equal-width checklist rows (6 and 5) that line up across the VS badge. */
.fr-vs .sl-vs-name { margin: 0; }
.fr-vs .sl-vs-facts { flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-self: center; width: 100%; max-width: 360px; }
.fr-vs .sl-vs-facts li { text-wrap: balance; }
/* Tablets, tiles still side by side: 280px of row left five facts wrapping onto a one-word
   second line. Slimmer tile sides and 13px text keep all but the longest fact on one line. */
@media (min-width: 761px) and (max-width: 960px) {
    .fr-vs .sl-vs-tile { padding-inline: 22px; }
    .fr-vs .sl-vs-facts li { font-size: 13px; }
    /* both subtitles on two lines, so the two checklists start level across the VS badge */
    .fr-vs .sl-vs-sub { max-width: 240px; }
}
.fr-vs + .v3-note { max-width: 720px; margin-top: 28px; }
.fr-vs + .v3-note a { color: var(--rc-text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(167, 139, 250, .5); }

/* Starter strip: a word, not a price, so a little smaller than the English "$0" */
#tarifs .gm-starter-price { font-size: 30px; letter-spacing: -.03em; }
#tarifs .gm-starter + .mb-foot { margin-top: 18px; }
/* The paid-plan point runs to two lines on phones: its dot stays on the first line
   (one 21px line: (21 - 6) / 2 = 7.5px) instead of centring between the two */
#tarifs .gm-starter-points li { align-items: flex-start; }
#tarifs .gm-starter-points li::before { margin-top: 7.5px; }
@media (max-width: 640px) {
    #tarifs .gm-starter-price { font-size: 26px; }
}

/* "Pour aller plus loin": five pills in a balanced 3 + 2 on desktop instead of 4 + 1 */
#plus .sl-pills { max-width: 760px; margin-inline: auto; }

/* Closing block: "fonctionnalité" is long, so the heading gets a wider measure and a smaller
   size on desktop, keeping it to two lines like the English "Start with one feature." */
@media (min-width: 1024px) {
    .gm .final-inner h2 { max-width: none; font-size: clamp(44px, 1rem + 2.9vw, 54px); }
}
/* Each secondary link moves to the next line as a whole, never mid-link. inline-block, not
   nowrap: the links and the dot have no spaces between them, so nowrap left no break point
   and the row ran past 320px */
#commence .micro-row a { display: inline-block; }
/* At 375px the two links plus the dot need 348px of a 343px row: 8px around the dot instead
   of 12px keeps them on one line, like the English twin */
@media (max-width: 420px) {
    #commence .micro-row .micro-sep { margin-inline: 8px; }
}

/* The dated short answer: its source line keeps the small caption size
   (game-maker.css sizes every answer paragraph alike, and the English twin has no source line there) */
.gm .sl-answer > p.sl-answer-date { font-size: 13.5px; line-height: 1.5; color: var(--rc-text-3); }