/* Hébergement gratuit : page de présentation et inscription en 5 étapes (couleurs réglables ici) */
.gr{--gr-nuit:#081C2D;--gr-vert:#1F7A63;--gr-vert-2:#26957A;--gr-clair:#E8F3EF;--gr-or:#F4B740;--gr-texte:#1D2B36;--gr-doux:#5A6B78;--gr-bord:rgba(8,28,45,.10);--gr-rouge:#B02A37;color:var(--gr-texte)}
.gr-wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.gr-crumb{font-size:13.5px;color:var(--gr-doux);margin-bottom:14px}
.gr-crumb a{color:inherit;text-decoration:none}.gr-crumb a:hover{color:var(--gr-vert)}
.gr-crumb-clair,.gr-crumb-clair a{color:rgba(245,247,250,.75)}
.gr-kicker{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--gr-clair);color:var(--gr-vert);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.gr-kicker-clair{background:rgba(255,255,255,.14);color:#9FE3C8}
.gr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border:0;border-radius:999px;background:var(--gr-vert-2);color:#fff !important;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;transition:transform .2s ease,background-color .2s ease}
.gr-btn:hover{transform:translateY(-2px);background:var(--gr-vert)}
.gr-btn:disabled{opacity:.6;cursor:wait;transform:none}
.gr-btn-clair{background:transparent;border:1px solid rgba(255,255,255,.55)}
.gr-btn-clair:hover{background:rgba(255,255,255,.08)}

/* En-tête de la présentation */
.gr-hero{position:relative;color:#fff;padding:56px 0 64px;background:linear-gradient(110deg,rgba(8,28,45,.94) 0%,rgba(8,28,45,.86) 45%,rgba(20,92,75,.72) 100%),url(/assets/img/hero-technicien.webp) center/cover no-repeat}
.gr-hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.gr-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.02em;color:#fff;margin:0 0 14px}
.gr-lead{font-size:18.5px;line-height:1.6;color:rgba(245,247,250,.88);margin:0 0 24px;max-width:600px}
.gr-quick{display:flex;flex-wrap:wrap;gap:10px;max-width:600px}
.gr-quick-field{display:flex;align-items:center;flex:1 1 280px;min-height:52px;background:#fff;border-radius:999px;padding:0 18px;color:var(--gr-texte)}
.gr-quick-field input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:16px;background:transparent;color:var(--gr-texte)}
.gr-quick-field span{color:var(--gr-doux);font-weight:600;white-space:nowrap}
.gr-quick-field:focus-within{box-shadow:0 0 0 3px rgba(159,227,200,.6)}
.gr-chips{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:18px 0 0}
.gr-chips li{display:flex;align-items:center;gap:7px;font-size:14.5px;color:rgba(245,247,250,.9)}
.gr-chips li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(159,227,200,.2);color:#9FE3C8;font-size:11px;font-weight:800}
.gr-browser{background:#fff;border-radius:18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.55);overflow:hidden;color:var(--gr-texte);transform:rotate(1.5deg)}
.gr-browser-top{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#F1F5F4;border-bottom:1px solid var(--gr-bord)}
.gr-browser-top i{width:10px;height:10px;border-radius:50%;background:#D5DEDA}
.gr-browser-url{flex:1;margin-left:8px;padding:6px 12px;border-radius:999px;background:#fff;font-size:13px;color:var(--gr-doux);display:flex;align-items:center;gap:6px}
.gr-browser-url b{color:var(--gr-texte)}
.gr-browser-body{padding:26px 22px 30px}
.gr-online{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--gr-clair);color:var(--gr-vert);font-weight:700;font-size:13px}
.gr-online::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gr-vert-2);box-shadow:0 0 0 4px rgba(38,149,122,.2)}
.gr-sk{height:12px;border-radius:6px;background:#EDF2F0;margin-top:14px}
.gr-sk-t{height:22px;width:70%;background:#DDE7E3;margin-top:18px}
.gr-sk-b{display:inline-block;height:34px;width:42%;border-radius:999px;background:var(--gr-vert-2);margin-top:18px}

/* Sections */
.gr-sec{padding:64px 0}
.gr-fond{background:#F5F9F7}
.gr-sec h2{font-size:clamp(25px,3vw,36px);line-height:1.15;color:var(--gr-nuit);margin:0 0 10px}
.gr-intro{color:var(--gr-doux);font-size:17px;max-width:680px;margin:0 0 30px}
.gr-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gr-card{background:#fff;border:1px solid var(--gr-bord);border-radius:20px;padding:24px;box-shadow:0 16px 36px -30px rgba(8,28,45,.5)}
.gr-feature{transition:transform .25s ease,box-shadow .25s ease}
.gr-feature:hover{transform:translateY(-4px);box-shadow:0 26px 48px -30px rgba(8,28,45,.55)}
.gr-ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--gr-clair);color:var(--gr-vert);margin-bottom:14px}
.gr-ic svg{width:24px;height:24px}
.gr-card h3{font-size:18px;color:var(--gr-nuit);margin:0 0 6px}
.gr-card p{margin:0;color:var(--gr-doux);line-height:1.55}
.gr-etapes{list-style:none;counter-reset:e;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gr-etapes li{counter-increment:e;background:#fff;border-radius:20px;padding:24px;border:1px solid var(--gr-bord)}
.gr-etapes li::before{content:counter(e);display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--gr-vert);color:#fff;font-weight:800;margin-bottom:12px}
.gr-etapes strong{display:block;color:var(--gr-nuit);font-size:17px;margin-bottom:6px}
.gr-etapes span{color:var(--gr-doux);line-height:1.55}
.gr-table{overflow-x:auto;border:1px solid var(--gr-bord);border-radius:18px;background:#fff}
.gr-table table{width:100%;border-collapse:collapse;font-size:15.5px}
.gr-table th,.gr-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--gr-bord)}
.gr-table thead th{background:var(--gr-nuit);color:#fff}
.gr-table thead th:nth-child(3){background:var(--gr-vert)}
.gr-table tbody tr:nth-child(even){background:#F7FAF9}
.gr-table tbody th{font-weight:600;color:var(--gr-nuit)}
.gr-note{color:var(--gr-doux);font-size:14.5px;margin:12px 0 0}
.gr-publics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gr-publics article{background:#fff;border-radius:18px;padding:20px;border-top:4px solid var(--gr-vert)}
.gr-publics h3{font-size:17px;color:var(--gr-nuit);margin:0 0 6px}
.gr-publics p{margin:0;color:var(--gr-doux);line-height:1.55;font-size:15px}
.gr-faq{max-width:860px}
.gr-faq details{background:#fff;border:1px solid var(--gr-bord);border-radius:14px;padding:16px 18px;margin-bottom:10px}
.gr-faq summary{font-weight:700;color:var(--gr-nuit);cursor:pointer}
.gr-faq p{margin:10px 0 0;color:var(--gr-doux);line-height:1.6}
.gr-cta{margin:0 auto 70px;border-radius:24px;padding:clamp(28px,4vw,48px);background:linear-gradient(120deg,#081C2D,#145C4B);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.gr-cta h2{color:#fff;margin:0 0 6px;font-size:clamp(23px,2.8vw,32px)}
.gr-cta p{margin:0;color:rgba(245,247,250,.82)}

/* Inscription : mise en page */
.gr-inscription{background:linear-gradient(180deg,#F3F8F6 0%,#fff 70%);padding:40px 0 70px}
.gr-ins-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.gr-ins-side h1{font-size:clamp(28px,3.6vw,42px);line-height:1.12;color:var(--gr-nuit);margin:0 0 12px}
.gr-ins-side .gr-lead{color:var(--gr-doux);font-size:17px}
.gr-check{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.gr-check li{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--gr-nuit)}
.gr-check li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;height:24px;border-radius:50%;background:var(--gr-clair);color:var(--gr-vert);font-weight:800;font-size:13px}
.gr-side-note{color:var(--gr-doux);font-size:14.5px}
.gr-side-note a{color:var(--gr-vert);font-weight:700}

/* Inscription : assistant */
.gr-wizard{padding:28px;border-radius:24px}
.gr-progress-top{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:var(--gr-nuit);margin-bottom:8px}
.gr-progress-top span:last-child{color:var(--gr-vert)}
.gr-bar{height:8px;border-radius:999px;background:#E6EEEB;overflow:hidden}
.gr-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1F7A63,#5FC2A4);transition:width .35s ease}
.gr-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;list-style:none;padding:0;margin:12px 0 26px;font-size:12.5px;text-align:center;color:var(--gr-doux)}
.gr-steps li{position:relative;padding-top:4px}
.gr-steps li.is-on{color:var(--gr-nuit);font-weight:800}
.gr-steps li.is-done{color:var(--gr-vert);font-weight:700}
.gr-steps li.is-done::before{content:"✓ "}
.gr-step{border:0;margin:0;padding:0;min-width:0}
.gr-step legend{font-size:clamp(21px,2.4vw,26px);font-weight:800;color:var(--gr-nuit);margin-bottom:6px;padding:0;line-height:1.25}
.gr-help{color:var(--gr-doux);margin:0 0 18px;font-size:15px}
.gr-field{display:block;margin:0 0 16px}
.gr-field>span{display:block;font-weight:700;color:var(--gr-nuit);margin-bottom:6px;font-size:15px}
.gr-field>span small{font-weight:500;color:var(--gr-doux)}
.gr-field input,.gr-field select{width:100%;box-sizing:border-box;min-height:52px;padding:0 16px;border:1px solid rgba(8,28,45,.18);border-radius:14px;font:inherit;font-size:16px;background:#fff;color:var(--gr-texte)}
.gr-field input:focus,.gr-field select:focus,.gr-sub:focus-within{outline:0;border-color:var(--gr-vert);box-shadow:0 0 0 3px rgba(31,122,99,.18)}
.gr-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gr-sub{display:flex;align-items:center;min-height:58px;border:1px solid rgba(8,28,45,.18);border-radius:14px;padding:0 16px;background:#fff}
.gr-sub input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:19px;font-weight:700;background:transparent;color:var(--gr-texte)}
.gr-sub span{color:var(--gr-doux);font-weight:700;font-size:17px}
.gr-avail{min-height:24px;margin:10px 0 0;font-size:15px;font-weight:600;color:var(--gr-doux)}
.gr-avail.is-ok{color:var(--gr-vert)}.gr-avail.is-ko{color:var(--gr-rouge)}
.gr-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.gr-choix label{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px;border:1px solid rgba(8,28,45,.18);border-radius:14px;cursor:pointer;font-weight:700;color:var(--gr-nuit)}
.gr-choix label:has(input:checked){border-color:var(--gr-vert);background:var(--gr-clair)}
.gr-choix input{accent-color:#1F7A63;width:18px;height:18px}
.gr-accept{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--gr-doux);line-height:1.5}
.gr-accept input{accent-color:#1F7A63;width:18px;height:18px;margin-top:2px;flex:0 0 18px}
.gr-accept a{color:var(--gr-vert)}
.gr-code{letter-spacing:.35em;font-size:24px !important;font-weight:800;text-align:center}
.gr-resend{background:none;border:0;padding:0;color:var(--gr-vert);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.gr-msg{min-height:22px;color:var(--gr-rouge);font-weight:600;margin:6px 0 0}
.gr-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.gr-nav .gr-btn{margin-left:auto;min-width:200px}
.gr-back{background:none;border:0;color:var(--gr-doux);font:inherit;font-weight:700;cursor:pointer;padding:12px 4px}
.gr-back:hover{color:var(--gr-nuit)}
.gr-done{text-align:center;padding:16px 4px 6px}
.gr-done-ic{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:var(--gr-clair);color:var(--gr-vert);margin-bottom:14px}
.gr-done-ic svg{width:38px;height:38px}
.gr-done h2{font-size:28px;color:var(--gr-nuit);margin:0 0 8px}
.gr-done p{color:var(--gr-doux);margin:0 0 22px;line-height:1.6}
.gr-done .gr-btn{margin:4px}

/* Écrans plus petits */
@media (max-width:980px){.gr-hero-grid,.gr-ins-grid{grid-template-columns:1fr}.gr-browser{display:none}.gr-grid3,.gr-etapes{grid-template-columns:1fr 1fr}.gr-publics{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.gr-grid3,.gr-etapes,.gr-publics,.gr-row,.gr-choix{grid-template-columns:1fr}.gr-steps{font-size:11px}.gr-wizard{padding:20px}.gr-nav .gr-btn{min-width:0;flex:1}}
@media (prefers-reduced-motion:reduce){.gr-btn,.gr-feature,.gr-bar span{transition:none}}
