/* ===== Yavin — Programme de parrainage : styles =====
Servi par Vercel, appelé par un en tête du Code Embed.
POURQUOI UN FICHIER. Webflow plafonne chaque champ de code à 50 000
caractères, et l'embed les dépassait. Le CSS part donc ici — un vrai
fichier, que le navigateur met en cache et analyse normalement, plutôt
qu'une feuille injectée par JavaScript qui ferait clignoter la page.
La version est dans le NOM du fichier : le cache peut être éternel sans
jamais servir une version périmée. Pour publier une modification, créer
parrainage.v2.css et changer le — ne jamais modifier ce fichier en
place, des pages en cache continueraient d'appeler l'ancien nom.
Deux racines : #yvp pour la page et le formulaire, #yvr pour la fenêtre du
règlement, qui vit dans un second Code Embed et n'est donc pas descendante
de la première.
================================================================= */
#yvp,#yvr{--navy:#2e3140;--ink:#111214;--paper:#fff;--sky:#cfdaea;--sun:#fbe9ae;--mist:#f4f5f7;--line:#dfe1e6;--muted:#5d6170;--err:#b42318;--ok:#0a7c3f;
font-family:inherit;color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
#yvp *,#yvr *{box-sizing:border-box}
#yvp .yvp-wrap{max-width:1240px;margin:0 auto;padding:0 40px}
#yvp h1,#yvp h2,#yvp h3{font-weight:300;letter-spacing:-.02em;line-height:1.08;margin:0}
#yvp h2{font-size:clamp(32px,3.6vw,48px);margin-bottom:24px}
#yvp p{margin:0}
#yvp .yvp-tag{display:inline-flex;align-items:center;gap:8px;font-size:15px}
#yvp .yvp-tag::before{content:"";width:6px;height:6px;background:currentColor;display:inline-block}
#yvp .yvp-dark .yvp-tag{color:var(--sun)}
/* Hero */
#yvp .yvp-hero{position:relative;overflow:hidden;background:var(--sky);text-align:center;padding:200px 0 160px}
#yvp .yvp-hero::before{content:"";position:absolute;left:50%;top:300px;width:170vw;height:170vw;transform:translateX(-50%);border-radius:50%;
background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 18%,rgba(255,255,255,0) 40%);box-shadow:0 -6px 40px rgba(255,255,255,.55)}
#yvp .yvp-hero .yvp-wrap{position:relative}
#yvp .yvp-hero .yvp-tag::before{display:none}
#yvp .yvp-hero h1{font-size:clamp(44px,5.6vw,76px);max-width:15ch;margin:20px auto 24px}
#yvp .yvp-hero .lead{font-size:18px;max-width:46ch;margin:0 auto 36px}
/* Boutons */
#yvp .yvp-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:6px;padding:13px 20px;font:inherit;font-size:16px;cursor:pointer;text-decoration:none;transition:opacity .15s}
#yvp .yvp-btn:hover{opacity:.85}
#yvp .yvp-btn[disabled]{opacity:.5;cursor:wait}
#yvp .yvp-btn-sec{background:transparent;color:var(--ink);border:1px solid var(--line)}
#yvp .yvp-btn-sec:hover{border-color:var(--ink);opacity:1}
#yvp .yvp-btn:focus-visible,#yvp button:focus-visible,#yvp input:focus-visible,#yvp textarea:focus-visible,#yvp summary:focus-visible{outline:3px solid #6b8cff;outline-offset:2px}
/* Carte offre */
#yvp .yvp-offer{padding:96px 0;background:var(--paper)}
#yvp .yvp-split{display:grid;grid-template-columns:1fr 1fr;border-radius:12px;overflow:hidden;min-height:420px}
#yvp .yvp-split .txt{background:var(--sun);padding:56px 48px}
#yvp .yvp-split .txt p{font-size:17px;max-width:40ch;margin-bottom:36px}
#yvp .yvp-split .num{background:var(--navy);color:#fff;padding:56px 48px;display:flex;flex-direction:column;justify-content:center;gap:36px}
#yvp .yvp-split .num p,#yvp .yvp-dark h2,#yvp .yvp-dark h3,#yvp .yvp-dark p{color:#fff}
#yvp .yvp-dark .n,#yvp .yvp-dark .yvp-tag{color:var(--sun)}
#yvp .yvp-split .num div{border-left:2px solid var(--sun);padding-left:24px}
#yvp .yvp-split .big{font-size:clamp(22px,2.6vw,32px);font-weight:300;letter-spacing:-.02em;line-height:1.1}
#yvp .yvp-split .num .small{font-size:15px;color:rgba(255,255,255,.75);margin-top:10px}
#yvp .yvp-split .num .small a{color:#fff;text-decoration:underline}
/* Étapes : section navy */
#yvp .yvp-dark{background:var(--navy);color:#fff;padding:112px 0}
#yvp .yvp-dark h2{margin:16px 0 64px;max-width:22ch}
#yvp .yvp-dark ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
#yvp .yvp-dark li{border-top:1px solid rgba(255,255,255,.25);padding:24px 0 0;margin:0}
#yvp .yvp-dark .n{font-size:15px;color:var(--sun);margin-bottom:16px}
#yvp .yvp-dark h3{font-size:22px;margin-bottom:10px}
#yvp .yvp-dark li p:last-child{color:rgba(255,255,255,.72);font-size:16px}
/* Formulaire */
#yvp .yvp-form-sec{background:var(--paper);padding:112px 0}
#yvp .yvp-form-grid{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
#yvp .yvp-form-intro{position:sticky;top:120px}
#yvp .yvp-form-intro h2{margin-top:16px}
#yvp .yvp-recap{background:var(--sun);border-radius:12px;padding:28px 28px 20px;margin-top:32px}
#yvp .yvp-recap h3{font-size:20px;margin-bottom:16px;color:var(--ink)}
#yvp .yvp-recap ul{list-style:none;margin:0;padding:0}
#yvp .yvp-recap li{position:relative;padding:0 0 12px 26px;margin:0;font-size:15px;color:var(--ink)}
#yvp .yvp-recap li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
#yvp .yvp-form-intro p{color:var(--muted);font-size:17px;margin-bottom:14px;max-width:40ch}
#yvp .yvp-card{background:var(--mist);border-radius:12px;padding:40px}
/* Progression en 3 étapes */
#yvp .yvp-steps{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:s}
#yvp .yvp-steps li{margin:0;padding:12px 0 0;border-top:2px solid var(--line);font-size:14px;color:var(--muted);transition:color .15s,border-color .15s}
#yvp .yvp-steps li .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--muted);font-size:12px;margin-right:8px}
#yvp .yvp-steps li.is-done{border-top-color:var(--ink);color:var(--ink)}
#yvp .yvp-steps li.is-done .n{background:var(--ink);color:#fff}
#yvp .yvp-steps li.is-current{border-top-color:var(--ink);color:var(--ink);font-weight:500}
#yvp .yvp-steps li.is-current .n{background:var(--ink);color:#fff}
/* Une étape à la fois */
#yvp .yvp-step{display:none}
#yvp .yvp-step.is-active{display:block}
#yvp .yvp-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
#yvp fieldset{border:0;margin:0 0 24px;padding:0;min-width:0}
#yvp legend{font-size:20px;font-weight:300;letter-spacing:-.01em;margin:0 0 16px;padding:0}
#yvp .yvp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#yvp .yvp-field{margin-bottom:14px}
#yvp label.l{display:block;font-size:14px;margin-bottom:6px}
#yvp label.l span{color:var(--muted)}
#yvp p.l{display:block;font-size:14px;margin:0 0 8px;color:var(--ink)}
#yvp .yvp-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#yvp .yvp-choices-4{grid-template-columns:repeat(4,1fr)}
#yvp .yvp-choice{position:relative;display:block;margin:0;font-weight:400;cursor:pointer}
#yvp .yvp-choice input{position:absolute;opacity:0;width:1px;height:1px}
#yvp .yvp-choice span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:14px;line-height:1.3;color:var(--ink)}
#yvp .yvp-choice:hover span{border-color:var(--muted)}
#yvp .yvp-choice input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
#yvp .yvp-choice input:focus-visible+span{outline:3px solid #6b8cff;outline-offset:2px}
#yvp .yvp-field.invalid .yvp-choice span{border-color:var(--err)}
#yvp input[type=text],#yvp input[type=email],#yvp input[type=tel],#yvp textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 14px}
#yvp textarea{min-height:88px;resize:vertical}
#yvp input:focus,#yvp textarea:focus{border-color:var(--ink);outline:none}
#yvp .yvp-field.invalid input{border-color:var(--err)}
#yvp .yvp-hint{font-size:13px;color:var(--muted);margin-top:6px}
#yvp .yvp-check{display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:400;line-height:1.45;margin:0 0 12px;cursor:pointer}
#yvp .yvp-check span{flex:1;display:block}
#yvp .yvp-check input{margin:2px 0 0!important;margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--ink)}
#yvp .yvp-check a,#yvp .yvp-legal a{color:inherit}
#yvp .yvp-legal{font-size:12px;color:var(--muted);margin-top:20px}
#yvp .yvp-msg{border-radius:6px;padding:14px 16px;font-size:15px;margin-top:16px}
#yvp .yvp-msg.err{background:#fdecea;color:var(--err)}
#yvp .yvp-msg.info{background:#eef2f8;color:var(--ink)}
#yvp .yvp-done h3{font-size:30px;margin-bottom:12px}
#yvp .yvp-done p{color:var(--muted);margin-bottom:8px}
#yvp .yvp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Recherche d'établissement */
#yvp .yvp-results{margin:4px 0 14px;border:1px solid var(--line);border-radius:6px;background:#fff;overflow:hidden}
#yvp .yvp-results button{display:block;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--line);padding:12px 14px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
#yvp .yvp-results button:last-child{border-bottom:0}
#yvp .yvp-results button:hover,#yvp .yvp-results button:focus-visible{background:var(--mist)}
#yvp .yvp-results .sub{display:block;color:var(--muted);font-size:13px;margin-top:3px}
#yvp .yvp-chosen{background:#fff;border:1px solid var(--ink);border-radius:6px;padding:12px 14px;font-size:14px;margin-bottom:14px}
#yvp .yvp-chosen .sub{display:block;color:var(--muted);font-size:13px;margin-top:3px}
#yvp .yvp-chosen button{background:none;border:0;padding:0;margin-top:8px;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;cursor:pointer}
#yvp .yvp-lien-sans-siret{margin:-6px 0 14px}
#yvp .yvp-lien-sans-siret button{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;cursor:pointer}
#yvp .yvp-lien-sans-siret button:hover,#yvp .yvp-lien-sans-siret button:focus-visible{color:var(--ink)}
#yvp .yvp-aide{margin:-6px 0 6px;font-size:13px;color:var(--muted)}
/* Conteneur de l'anti-robot. Vide et sans hauteur tant que Turnstile est
éteint, ou tant qu'aucun défi n'est présenté : zéro friction visuelle. */
#yvp .yvp-turnstile:empty{display:none}
#yvp .yvp-turnstile{margin:0 0 14px}
#yvp select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
#yvp select:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
/* Récapitulatif de l'étape 3 */
/* Récapitulatif : deux cartes, pas un bloc de texte.
Refait le 2026-10-19 — l'ancien rendu alignait des paires brutes et
ressemblait à du code. C'est le dernier écran avant l'envoi : il doit se
relire d'un coup d'œil, sinon personne ne le relit. */
#yvp .yvp-sum{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
#yvp .yvp-carte{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px;min-width:0}
#yvp .yvp-carte header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
#yvp .yvp-carte h4{font-size:15px;font-weight:500;letter-spacing:0;margin:0}
#yvp .yvp-carte .modif{flex:none;background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;cursor:pointer}
#yvp .yvp-carte .modif:hover,#yvp .yvp-carte .modif:focus-visible{color:var(--ink)}
#yvp .yvp-carte dl{display:grid;grid-template-columns:minmax(72px,auto) 1fr;gap:9px 16px;margin:0;font-size:14px;align-items:baseline}
#yvp .yvp-carte dt{color:var(--muted);font-size:13px}
#yvp .yvp-carte dd{margin:0;min-width:0;word-break:break-word;color:var(--ink)}
#yvp .yvp-carte dd.fort{font-weight:500}
/* Phrase d'attribution : une ligne lisible, pas un champ de plus. */
#yvp .yvp-sum-ae{grid-column:1/-1;background:var(--sun);border-radius:10px;padding:14px 20px;font-size:14px;color:var(--ink)}
/* Aperçu de test (mode démo) */
#yvp .yvp-preview{margin-top:24px;border:1px dashed var(--muted);border-radius:8px;padding:20px;background:#fff}
#yvp .yvp-preview h4{font-size:15px;font-weight:500;margin:0 0 10px}
#yvp .yvp-preview h4+*{margin-top:0}
#yvp .yvp-preview pre{margin:0 0 16px;padding:12px;background:var(--mist);border-radius:6px;font-size:12px;line-height:1.45;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
#yvp .yvp-preview .mail{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
#yvp .yvp-preview .mail .obj{font-size:14px;margin-bottom:8px}
#yvp .yvp-preview .mail .corps{font-size:14px;color:var(--muted);white-space:pre-wrap}
/* FAQ */
#yvp .yvp-faq{padding:0 0 112px;background:var(--paper)}
#yvp .yvp-faq .inner{max-width:820px;margin:0 auto}
#yvp .yvp-faq h2{text-align:center;margin-bottom:40px}
#yvp details{border-bottom:1px solid var(--line)}
#yvp summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:18px;position:relative}
#yvp summary::-webkit-details-marker{display:none}
#yvp summary::after{content:"+";position:absolute;right:4px;top:17px;font-size:24px;font-weight:300;transition:transform .2s}
#yvp details[open] summary::after{transform:rotate(45deg)}
#yvp details p{margin-bottom:22px;color:var(--muted);max-width:68ch}
@media (max-width:991px){
#yvp .yvp-split,#yvp .yvp-form-grid{grid-template-columns:1fr}
#yvp .yvp-form-grid{gap:32px}
#yvp .yvp-form-intro{position:static}
#yvp .yvp-dark ol{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
#yvp .yvp-wrap{padding:0 20px}
#yvp .yvp-hero{padding:150px 0 110px}
#yvp .yvp-hero::before{top:360px;width:260vw;height:260vw}
#yvp .yvp-split .txt,#yvp .yvp-split .num{padding:36px 24px}
#yvp .yvp-offer,#yvp .yvp-dark,#yvp .yvp-form-sec{padding:72px 0}
#yvp .yvp-faq{padding-bottom:72px}
#yvp .yvp-dark ol,#yvp .yvp-row{grid-template-columns:1fr;gap:0}
#yvp .yvp-choices,#yvp .yvp-choices-4{grid-template-columns:1fr 1fr}
#yvp .yvp-dark li{margin-bottom:28px}
#yvp .yvp-card{padding:24px}
#yvp .yvp-steps{gap:6px}
#yvp .yvp-steps li{font-size:12px}
#yvp .yvp-sum{grid-template-columns:1fr}
#yvp .yvp-carte dl{grid-template-columns:1fr;gap:2px}
#yvp .yvp-carte dt{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){#yvp *{transition:none!important}}
/* ===== Règlement du programme, en fenêtre =====
Le règlement n'a pas de page à lui : il vit ici, sur
/devenir-parrain#reglement. Un seul texte, au même endroit que la case qui
le fait accepter — deux pages auraient fini par diverger.
Il s'ouvre en FENÊTRE et non plus en bloc dépliant : onze articles déroulés
sous le formulaire noyaient la page, et le parrain qui cliquait depuis la
case perdait le fil de sa saisie.
Fermée par défaut, sans aucune balise de script : l'embed Webflow n'en
accepte pas. L'ouverture, la touche Échap et le piège de focus vivent dans
parrainage-2-script.html. */
#yvp .yvp-reg-lien{background:var(--paper);padding:0 0 96px;text-align:center}
#yvp .yvp-reg-lien button{background:none;border:0;padding:8px 4px;font:inherit;font-size:14px;color:var(--muted);text-decoration:underline;cursor:pointer}
#yvp .yvp-reg-lien button:hover,#yvp .yvp-reg-lien button:focus-visible{color:var(--ink)}
/* La fenêtre. `hidden` suffit à la masquer : pas de classe à oublier. */
#yvr .yvp-modale[hidden]{display:none}
#yvr .yvp-modale{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
#yvr .yvp-modale .fond{position:absolute;inset:0;background:rgba(17,18,20,.55);backdrop-filter:blur(2px)}
#yvr .yvp-modale .boite{position:relative;background:var(--paper);border-radius:12px;width:min(860px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.28)}
#yvr .yvp-modale .tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 28px 16px;border-bottom:1px solid var(--line);flex:none}
#yvr .yvp-modale .tete h2{font-size:clamp(19px,2.2vw,25px);font-weight:300;letter-spacing:-.02em;margin:0}
#yvr .yvp-modale .tete .sous{display:block;font-size:13px;color:var(--muted);margin-top:6px}
#yvr .yvp-modale .fermer{flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;font-size:18px;line-height:1;color:var(--ink);cursor:pointer}
#yvr .yvp-modale .fermer:hover{background:var(--mist)}
/* Le défilement est INTERNE : la page derrière ne bouge pas. */
#yvr .yvp-modale .corps{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 28px 28px;line-height:1.6}
/* Le corps reçoit le focus à l'ouverture pour que le clavier et les lecteurs
d'écran entrent dans la fenêtre. Pas de cadre pour autant : ce n'est pas un
élément sur lequel on agit, et l'encadrer donne l'air d'un champ de saisie. */
#yvr .yvp-modale .corps:focus{outline:none}
/* Sommaire interne */
#yvr .yvp-reg-toc{background:var(--mist);border-radius:8px;padding:18px 22px 10px;margin:0 0 36px}
#yvr .yvp-reg-toc h3{font-size:15px;font-weight:500;letter-spacing:0;margin:0 0 12px}
#yvr .yvp-reg-toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
#yvr .yvp-reg-toc li{margin:0 0 9px;break-inside:avoid;font-size:14px;padding:0}
#yvr .yvp-reg-toc li::before{display:none}
#yvr .yvp-reg-toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
#yvr .yvp-reg-toc a:hover,#yvr .yvp-reg-toc a:focus-visible{border-bottom-color:var(--ink)}
/* Articles */
#yvr .yvp-modale article{scroll-margin-top:16px;margin-bottom:38px}
#yvr .yvp-modale article h2{font-size:clamp(18px,2vw,22px);font-weight:300;letter-spacing:-.02em;margin:0 0 16px;padding-top:22px;border-top:1px solid var(--line)}
#yvr .yvp-reg-cl{display:flex;gap:14px;margin:0 0 13px;align-items:baseline}
#yvr .yvp-reg-cl .n{flex:none;width:44px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
#yvr .yvp-reg-cl .t{flex:1;min-width:0;font-size:15px}
#yvr .yvp-reg-cl .t p{margin:0 0 12px}
#yvr .yvp-reg-cl .t p:last-child{margin-bottom:0}
#yvr .yvp-reg-cl .t strong{font-weight:500}
#yvr ul.yvp-reg-puces{list-style:none;margin:10px 0 0;padding:0}
#yvr ul.yvp-reg-puces li{position:relative;padding:0 0 8px 20px;margin:0;font-size:15px}
#yvr ul.yvp-reg-puces li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--muted)}
#yvr dl.yvp-reg-defs{margin:0;font-size:15px}
#yvr dl.yvp-reg-defs dt{font-weight:500;margin-top:14px}
#yvr dl.yvp-reg-defs dd{margin:2px 0 0}
#yvr .yvp-reg-tab{overflow-x:auto;margin:14px 0 0;-webkit-overflow-scrolling:touch}
#yvr .yvp-reg-tab table{border-collapse:collapse;width:100%;min-width:600px;font-size:13px}
#yvr .yvp-reg-tab th,#yvr .yvp-reg-tab td{text-align:left;vertical-align:top;padding:9px 11px;border-bottom:1px solid var(--line)}
#yvr .yvp-reg-tab th{font-weight:500;background:var(--mist);white-space:nowrap}
@media(max-width:700px){
#yvp .yvp-reg-lien{padding-bottom:72px}
/* Plein écran sur mobile : une fenêtre flottante y est inutilisable. */
#yvr .yvp-modale{padding:0}
#yvr .yvp-modale .boite{width:100%;max-height:100%;height:100%;border-radius:0}
#yvr .yvp-modale .tete{padding:18px 20px 14px}
#yvr .yvp-modale .corps{padding:16px 20px 28px}
#yvr .yvp-reg-toc ol{columns:1}
#yvr .yvp-reg-cl{display:block}
#yvr .yvp-reg-cl .n{width:auto;display:block;margin-bottom:2px}
}
}