/* ====== WorkSanté — page d'inscription (chargée seulement par inscription.php via $pageCss) ======
   18/10/2026, demande de Patrick : page « encore ancien style » et « trop espacée verticalement ». Haut de page compact
   au style du site (titre en dégradé souligné du pouls, ligne de pouls), carte de formulaire posée dessus, cinq blocs
   courts numérotés (Profil · Identité · Contact · Activité · Sécurité), libellés intégrés aux champs : vrais <label>,
   remontés en petit en haut du cadre dès que le champ est actif ou rempli (jamais un simple placeholder qui disparaît).
   Mobile d'abord ; tablette : grille de 12 colonnes ; ordinateur : intitulés des blocs dans une colonne à gauche, colonne
   d'aide à droite, photo habillée de bulles d'information dans le haut de page. Pas de blanc pur (mémoire de design).
   Toutes les classes sont préfixées rg- (ou limitées à .rg) pour ne rien changer aux autres pages. */

/* ---------- haut de page ---------- */
.rg-hero {
    position: relative; overflow: hidden; padding: 24px 0 100px;
    background: radial-gradient(45% 120% at 96% 0%, rgba(83, 163, 215, .26) 0%, transparent 70%),
        linear-gradient(180deg, #EEF3F8 0%, #E8EFF7 100%);
}
.rg-hero .container { position: relative; z-index: 2; }
.rg-head { max-width: 860px; margin: 0 auto; }
.rg-hero .hero-kicker { margin-bottom: 10px; font-size: 13.5px; }
.rg-hero h1 { font-size: clamp(27px, 3.3vw, 40px); line-height: 1.14; font-weight: 800; letter-spacing: -.02em; color: var(--primary-ink); margin-bottom: 8px; }
/* « WorkSanté » en dégradé bleu (apprécié de Patrick), souligné par le tracé du pouls (site.css, dessiné par main.js) */
.rg-hero h1 .h-brand { position: relative; display: inline-block; padding-bottom: 8px; background: linear-gradient(120deg, var(--primary) 0%, var(--primary-soft) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rg-lead { max-width: 660px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
/* ligne de pouls juste au-dessus de la carte (comme au-dessus des garanties de l'accueil) */
.rg-hero .hero-pulse { bottom: 52px; height: 44px; }
.rg-hero .hero-pulse path.w { display: none; }   /* tracé réservé au grand écran avec photo */
/* photo et bulles : grand écran seulement (sur téléphone l'image, en chargement différé, n'est même pas téléchargée) */
.rg-photo, .rg-spots { display: none; }

/* ---------- carte du formulaire, posée sur le bas du haut de page ---------- */
.rg-main { position: relative; z-index: 3; margin-top: -50px; padding-bottom: 56px; background: linear-gradient(180deg, transparent 0, transparent 50px, #E8EFF7 50px, #F2F5F9 360px, #F6F1EA 100%); }
.rg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; max-width: 860px; margin: 0 auto; }
.rg-card {
    position: relative; padding: 18px 16px 18px; border-radius: 22px;
    /* pas de blanc pur (fatigant pour les yeux, mémoire de design) : papier à peine bleuté, plus soutenu vers le bas */
    background: linear-gradient(180deg, #FAFCFE 0%, #F6F9FC 100%); border: 1px solid #DCE5EF;
    box-shadow: 0 24px 56px rgba(0, 31, 54, .12), 0 2px 6px rgba(0, 31, 54, .05);
}
/* fin liseré aux couleurs du site en haut de la carte */
.rg-card::before { content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-soft) 60%, var(--accent) 100%); }
.rg-req { margin: 0 0 10px; font-size: 12.5px; color: #5B6B80; }
.rg-req b { color: var(--primary); }

/* ---------- blocs : intitulé numéroté + tracé de pouls (téléphone), colonne de gauche (ordinateur) ---------- */
.rg-blk { min-width: 0; margin: 0; padding: 0; border: 0; }
.rg-blk + .rg-blk { margin-top: 16px; }
/* légende flottante : rendue comme un bloc ordinaire (pas de rendu spécial de <legend> dans le cadre du fieldset) */
.rg-leg {
    float: left; width: 100%; display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 0;
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
}
.rg-leg::after {
    content: ""; flex: 1 1 auto; min-width: 40px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpath d='M0 7H16l3-4 3 8 3-10 3 9 2-3H46' fill='none' stroke='%23D78753' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 46px 12px no-repeat,
        linear-gradient(#DCE4EE, #DCE4EE) left center / calc(100% - 46px) 1px no-repeat;
}
.rg-leg small { display: none; }
.rg-num {
    position: relative; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11.5px; letter-spacing: 0;
    background: #E3F0FA; color: var(--primary); box-shadow: inset 0 0 0 1px rgba(0, 91, 150, .18);
    transition: background .2s ease, color .2s ease;
}
.rg-num i { display: none; font-size: 10px; }
/* bloc complet (contrôle léger fait par inscription.js) : le numéro devient une coche verte */
.rg-blk.is-done .rg-num { background: var(--success); color: #fff; box-shadow: none; }
.rg-blk.is-done .rg-num b { display: none; }
.rg-blk.is-done .rg-num i { display: block; }
/* champs : grille de 2 colonnes sur téléphone (paires prénom/nom, CP/ville, mots de passe), pleine largeur par défaut */
.rg-body { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px; }
.rg-body > * { grid-column: 1 / -1; }
.rg-body > .m2 { grid-column: auto; }
.rg-body .zone-warn { margin: 0; }
.rg-body .form-row { display: block; margin: 0; }
.rg-body .form-row[hidden] { display: none; }

/* ---------- champs à libellé intégré ---------- */
.rg .field { gap: 4px; }
.rg .fl { position: relative; }
.rg .fl input {
    display: block; width: 100%; height: 54px; padding: 22px 14px 6px; margin: 0;
    font-size: 16px; line-height: 1.25; color: var(--ink);   /* 16 px : pas d'agrandissement automatique de l'écran sur iPhone */
    background: #EFF4F9; border: 1px solid #D0DCE8; border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.rg .fl input:hover { border-color: #B6C9DC; }
.rg .fl input:focus { background: #FDFEFF; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 91, 150, .15); }
.rg .fl label {
    position: absolute; top: 17px; left: 15px; right: 12px; z-index: 1;
    font-size: 15.5px; font-weight: 500; line-height: 20px; color: #5B6B80;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none; transform-origin: 0 0; transition: transform .15s ease, color .15s ease;
}
/* libellé remonté : champ actif, rempli ou rempli automatiquement par le navigateur */
.rg .fl input:focus + label,
.rg .fl input:not(:placeholder-shown) + label,
.rg .fl input:-webkit-autofill + label { transform: translateY(-10px) scale(.76); font-weight: 700; color: #526377; }   /* 5,6:1 sur le fond du champ (--ink-3 : 4,3:1, sous le seuil AA) */
.rg .fl input:focus + label { color: var(--primary); }
/* exemple de saisie (« 06 12 34 56 78 ») visible seulement champ actif et vide, sous le libellé remonté ; masqué par
   l'opacité et non par la couleur : en contraste élevé (Windows), la couleur est imposée et l'exemple recouvrait le libellé */
.rg .fl input::placeholder { color: transparent; opacity: 0; }
.rg .fl input:focus::placeholder { color: #64748B; opacity: 1; }   /* 4,7:1 ; le texte saisi (--ink) reste bien plus foncé */
.rg .field .hint { padding-left: 2px; font-size: 12px; line-height: 1.35; color: #5B6B80; }   /* 5,1:1 sur la carte (--ink-3 : 4,5:1 juste) */
.rg .field .err { padding-left: 2px; font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--danger); }
.rg .field.has-err .fl input { border-color: var(--danger); background: #FFF6F5; }
.rg .field.has-err .fl input:focus { box-shadow: 0 0 0 3px rgba(214, 45, 32, .15); }
.rg .field.has-err .fl label { color: var(--danger); }
/* bouton « afficher les mots de passe » dans le premier champ */
.rg .fl.has-eye input { padding-right: 48px; }
/* œil masqué tant que le champ est vide et inactif : le libellé « Mot de passe * » garde toute la largeur (champ étroit
   sur téléphone) ; remonté et réduit, il tient à gauche de l'œil */
.rg .fl.has-eye:not(:focus-within) input:placeholder-shown ~ .fl-eye { visibility: hidden; }
.fl-eye { position: absolute; top: 7px; right: 6px; z-index: 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); font-size: 16px; }
.fl-eye:hover { background: #EAF1F8; color: var(--primary); }
.fl-eye[aria-pressed="true"] { color: var(--primary); }

/* ---------- profil : trois cartes basses (icône + titre), phrase du profil choisi dessous ---------- */
.rg-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rg-type { position: relative; display: block; cursor: pointer; }
/* bouton radio masqué mais toujours atteignable au clavier (flèches) ; l'aspect est porté par .rg-type-in */
.rg-type input, .rg-seg input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.rg-type-in {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    height: 100%; min-height: 72px; padding: 10px 6px 9px; border-radius: 14px; text-align: center;
    background: #EFF4F9; border: 1px solid #D0DCE8; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.rg-type:hover .rg-type-in { border-color: #9DBBD8; }
.rg-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: #E3F0FA; color: var(--primary); transition: background .15s ease, color .15s ease; }
.rg-tt { min-width: 0; line-height: 1.2; }
.rg-tt strong { display: block; font-size: 13.5px; color: var(--primary-ink); }
/* précision (« IDEL », « ou maison médicale ») : lue par les lecteurs d'écran, visible à partir de 600 px */
.rg-tt small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rg-type input:checked + .rg-type-in { background: #EAF3FB; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), 0 8px 18px rgba(0, 91, 150, .12); }
.rg-type input:checked + .rg-type-in .rg-ic { background: var(--primary); color: #fff; }
/* coche dans l'angle de la carte choisie */
.rg-type input:checked + .rg-type-in::after {
    content: ""; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.rg-type input:focus-visible + .rg-type-in,
.rg-seg input:focus-visible + span { outline: 3px solid var(--primary-soft); outline-offset: 2px; }
.rg-type-desc { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.rg-type-desc i { margin-top: 2px; color: var(--primary-soft); }

/* ---------- civilité : deux boutons côte à côte ---------- */
.rg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rg-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 50px; padding: 4px; border: 1px solid #D0DCE8; border-radius: 12px; background: #EFF4F9; }
.rg-seg label { position: relative; display: block; cursor: pointer; }
.rg-seg span { display: grid; place-items: center; height: 100%; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--ink-2); background: #FBFCFE; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), inset 0 0 0 1px #E2EAF2; transition: background .15s ease, color .15s ease; }
.rg-seg label:hover span { background: #F0F6FC; }
.rg-seg input:checked + span { background: var(--primary); color: #fff; box-shadow: 0 4px 10px rgba(0, 91, 150, .25); }
.rg .rg-civ.has-err .rg-seg { border-color: var(--danger); background: #FFF6F5; }
/* contraste élevé (Windows) : fonds et ombres neutralisés, le choix ne se voyait plus une fois le focus parti ; couleurs
   système de sélection (comme une liste native) pour le bouton choisi, exemple de saisie jamais affiché au repos */
@media (forced-colors: active) {
    .rg-seg input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; box-shadow: none; }
    .rg-type input:checked + .rg-type-in { border-width: 2px; border-color: Highlight; }
    .rg .fl input:not(:focus)::placeholder { opacity: 0; }
}

/* ---------- parrainage replié (ouvert d'office avec un lien ?promo=) ---------- */
.rg-promo summary { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 14px; font-weight: 600; color: var(--primary); cursor: pointer; list-style: none; border-radius: 6px; }
.rg-promo summary::-webkit-details-marker { display: none; }
.rg-promo summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.rg-promo[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.rg-promo summary i { color: var(--accent); }
.rg-promo .field { margin-top: 8px; }

/* ---------- conditions, bouton, pied ---------- */
.rg-cgu { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #E6EDF4; }
.rg .cgu-row { gap: 10px; padding: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.rg .cgu-row input { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); cursor: pointer; }
.rg .cgu-row a, .rg-foot a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rg-submit {
    margin-top: 16px; padding: 15px 22px; font-size: 16px; font-weight: 700; border: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    box-shadow: 0 12px 26px rgba(0, 63, 105, .26), 0 0 0 3px rgba(0, 91, 150, .06);
    transition: filter .15s ease, transform .12s ease;
}
.rg-submit:hover { filter: brightness(1.08); }
.rg-submit:active { background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-ink) 100%); }
.rg-submit:disabled { opacity: .65; cursor: progress; filter: none; }
@media (max-width: 359px) { .rg-submit { white-space: normal; padding: 13px 16px; font-size: 15px; line-height: 1.3; } }
.rg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: #5B6B80; }
.rg-foot span:first-child, .rg-foot .rg-foot-help { font-size: 13.5px; }
/* bulle « Nous contacter » masquée tant que la carte du formulaire ou la colonne d'aide passe dessous (inscription.js) :
   elle recouvrait le bord droit des champs sur téléphone ; le lien « Une question ? » de la carte ou de la colonne la remplace */
.fab { transition: transform .12s ease, background .12s ease, opacity .2s ease, visibility .2s; }
body.rg-fab-off .fab { opacity: 0; visibility: hidden; pointer-events: none; }
.rg-foot i { color: var(--success); margin-right: 3px; }
.rg .feedback { line-height: 1.5; }

/* focus clavier visible (le thème retire tous les contours) */
.rg a:focus-visible, .rg button:focus-visible, .rg summary:focus-visible, .rg .cgu-row input:focus-visible, .rg-side a:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 2px; border-radius: 6px; }
.rg .rg-submit:focus-visible { outline-offset: 3px; border-radius: var(--r-pill); }

/* ---------- colonne d'aide (ordinateur) ---------- */
.rg-side { display: none; }
.rg-next {
    position: relative; overflow: hidden; padding: 22px 22px 18px; border-radius: 22px; color: #fff;
    background: radial-gradient(70% 60% at 100% 0%, rgba(83, 163, 215, .35) 0%, transparent 70%), linear-gradient(160deg, var(--primary-deep) 0%, var(--primary-ink) 100%);
    box-shadow: 0 24px 50px rgba(0, 31, 54, .22);
}
.rg-next h2 { margin-bottom: 14px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.rg-steps { position: relative; display: grid; gap: 14px; list-style: none; }
/* fil pointillé reliant les étapes */
.rg-steps::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 17px; width: 2px; background: repeating-linear-gradient(180deg, rgba(142, 209, 255, .55) 0 5px, transparent 5px 10px); }
.rg-steps li { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.rg-steps b { display: block; font-size: 14.5px; color: #fff; }
.rg-step-ic { position: relative; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #fff; background: linear-gradient(135deg, #1F7BBF, var(--primary-soft)); box-shadow: 0 0 0 4px rgba(0, 31, 54, .6); }
.rg-trust { display: grid; gap: 8px; margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: #F9FBFD; border: 1px solid #DCE5EF; box-shadow: 0 12px 30px rgba(0, 31, 54, .07); list-style: none; }
.rg-trust li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.rg-trust i { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; background: #E3F0FA; color: var(--primary); }
.rg-help { margin-top: 14px; padding-left: 4px; font-size: 14px; color: var(--ink-2); }
.rg-help i { margin-right: 4px; color: var(--accent); }
.rg-help a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ====== RÉACTIVITÉ ====== */
/* téléphones de moins de 420 px (360 px : la largeur Android la plus courante, 375 : iPhone SE/mini) : marges de la
   carte et écart des cartes de profil resserrés, titre des cartes proportionnel à la largeur de l'écran ; « Remplaçant(e) »
   garde au moins 5,5 px d'air de chaque côté, bordure comprise, jusqu'à 320 px (il touchait la bordure à 360 px) */
@media (max-width: 419px) {
    .rg-card { padding-left: 12px; padding-right: 12px; }
    .rg-types { gap: 6px; }
    .rg-type-in { padding-left: 4px; padding-right: 4px; }
    .rg-tt strong { font-size: clamp(11px, calc((100vw - 110px) / 20.5), 13.5px); }
}
@media (max-width: 349px) {
    .rg-tt strong { letter-spacing: -.02em; }
}
@media (max-width: 339px) {
    .rg-body { grid-template-columns: minmax(0, 1fr); }
    .rg-body > .m2 { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .rg-hero .container, .rg-main .container { padding: 0 16px; }
    .rg-hero { padding: 18px 0 94px; }
    .rg-lead { font-size: 15px; }
}
@media (min-width: 600px) {
    .rg-card { padding: 26px 28px 24px; }
    /* tablette en portrait comprise : champs sur une grille de 12 colonnes (civilité/prénom/nom, e-mail/mobile,
       adresse/code postal, ville/RPPS sur une ligne) au lieu de la mise en page du téléphone étirée */
    .rg-body { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
    .rg-body > .m2 { grid-column: 1 / -1; }
    .rg-body > .d4 { grid-column: span 4; }
    .rg-body > .d6 { grid-column: span 6; }
    .rg-body > .d8 { grid-column: span 8; }
    .rg-seg { height: 54px; }
    .rg-seg span { font-size: 14.5px; }
}
/* 600 à 659 px : civilité sur un tiers de ligne, « Monsieur » resserré pour garder de l'air dans son bouton */
@media (min-width: 600px) and (max-width: 659px) {
    .rg-seg { gap: 3px; padding: 3px; }
    .rg-seg span { font-size: 14px; }
}
/* cartes de profil en ligne (icône à gauche, précision visible) dès que « Remplaçant(e) » tient sur une ligne */
@media (min-width: 680px) {
    .rg-type-in { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 0; padding: 11px 12px; text-align: left; }
    .rg-ic { flex-basis: 34px; width: 34px; height: 34px; }
    .rg-tt strong { font-size: 14.5px; }
    .rg-tt small { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: #526377; white-space: normal; }   /* 5,6:1 sur la carte de profil */
}
/* ordinateur et tablette en largeur : intitulés des blocs dans une colonne à gauche (aucune hauteur perdue) */
@media (min-width: 820px) {
    .rg-hero { padding: 30px 0 104px; }
    .rg-hero .hero-pulse { bottom: 54px; height: 50px; }
    .rg-blk { position: relative; padding-left: 164px; }
    .rg-blk + .rg-blk { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #DCE4EE; }
    .rg-leg { position: absolute; top: 0; left: 0; width: 140px; float: none; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 0; padding-top: 3px; }
    .rg-blk + .rg-blk .rg-leg { top: 12px; }
    .rg-leg::after { display: none; }
    .rg-leg small { display: block; width: 100%; padding-left: 31px; font-size: 12.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; color: #5B6B80; }
    .rg-num { flex-basis: 24px; width: 24px; height: 24px; }
    .rg-end { padding-left: 164px; }
    /* note des champs obligatoires dans la marge haute de la carte : aucune hauteur prise */
    .rg-card { padding-top: 32px; }
    .rg-req { position: absolute; top: 9px; right: 30px; margin: 0; font-size: 12px; }
    .rg-promo { margin-top: -2px; }
    /* Activité : code postal, ville et RPPS / SIRET sur une ligne (la paire CP / ville reste côte à côte) */
    .rg-body > .w3 { grid-column: span 3; }
    .rg-body > .w4 { grid-column: span 4; }
    .rg-body > .w5 { grid-column: span 5; }
}
/* grand écran : photo fondue à droite du haut de page (comme « Comment ça marche »), habillée de deux bulles
   d'information ; le texte garde la partie gauche. Le fondu est un masque sur l'image (elle se mêle au fond teinté,
   sans raccord de couleur) ; la hauteur du haut de page ne change pas. */
@media (min-width: 1000px) {
    .rg-photo {
        display: block; position: absolute; top: 0; right: 0; z-index: 0; width: min(48%, 720px); height: 100%;
        object-fit: cover; object-position: 50% 25%; mix-blend-mode: multiply;   /* fond gris du studio pris dans la teinte bleutée */
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(0deg, transparent 0, #000 36%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(0deg, transparent 0, #000 36%);
        mask-composite: intersect;
    }
    .rg-spots { display: block; width: min(48%, 720px); }
    .rg-spots .spot { max-width: 215px; font-size: 12.5px; }
    .rg-spots .spot.s1 { top: 26px; right: 18px; }
    .rg-spots .spot.s3 { top: auto; bottom: 116px; left: 4%; right: auto; }
    /* Texte d'introduction arrêté 24 px avant la bulle « Ouvert … » (à hauteur de sa dernière ligne) : bord gauche de la
       bulle = 100 % - 0,96 × zone de la photo (bulle à 4 % de la zone), début du texte = bord du bloc centré de 860 px.
       Unités cqw = largeur du haut de page (conteneur), hors barre de défilement ; navigateur sans cqw : 44vw. */
    .rg-hero { container-type: inline-size; }
    .rg-lead { max-width: min(660px, 44vw); max-width: min(660px, calc(50cqw - .96 * min(48cqw, 720px) + 406px)); }
    /* ligne de pouls effacée là où commence la photo (elle traversait les bras des infirmières) ; tracé w : sa grande
       pointe tombe juste avant, entre le texte et la bulle */
    .rg-hero .hero-pulse {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - min(48%, 720px)), transparent calc(100% - min(32%, 480px)));
        mask-image: linear-gradient(90deg, #000 calc(100% - min(48%, 720px)), transparent calc(100% - min(32%, 480px)));
    }
    .rg-hero .hero-pulse path.d { display: none; }
    .rg-hero .hero-pulse path.w { display: inline; }
}
/* assez large pour la colonne d'aide : formulaire + aide côte à côte, l'aide reste visible en défilant */
@media (min-width: 1180px) {
    .rg-head, .rg-grid { max-width: none; }
    /* même calcul, texte au bord gauche du conteneur (1200 px de large, 24 px de marge intérieure) */
    .rg-lead { max-width: min(660px, calc(100cqw - .96 * min(48cqw, 720px) - max(24px, 50cqw - var(--maxw) / 2 + 24px) - 24px)); }
    .rg-grid { grid-template-columns: minmax(0, 1fr) 300px; }
    .rg-side { display: block; position: sticky; top: calc(var(--header-h) + 20px); }
    /* lien d'aide déjà dans la colonne de droite */
    .rg-foot-help { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rg .fl label, .rg .fl input, .rg-type-in, .rg-seg span, .rg-num, .fab { transition: none; }
}
@media print { .rg-side, .rg-hero .hero-pulse, .rg-photo, .rg-spots { display: none; } }