@font-face{font-family:VT323;src:url('/assets/fonts/vt323-regular.ttf') format('truetype');font-weight:400;font-display:swap}
/* Première page uniquement. Charte v1 ; aucune modification du thème global. */
@font-face{font-family:Oxanium;src:url('/assets/fonts/oxanium-variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
body.branding-accueil{--white:#FFF8E8;--off-white:#F3E7CF;--dark:#172027;--dark2:#31594B;--slate:#46524C;--gray:#46524C;--light-gray:#F3E7CF;--border:#D8C9AB;--teal:#31594B;--teal-dark:#172027;--teal-light:#F29A38;--relais-1:#B65C3A;--relais-2:#F29A38;--relais-3:#70866A;--relais-4:#416E73;--relais-1-texte:#914426;--relais-2-texte:#914426;--relais-3-texte:#31594B;--relais-4-texte:#31594B;--purple:#70866A;--marqueur:#F5BD70;--marqueur-froid:#D4DFC9;background:var(--white);font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.7}
.branding-accueil h1,.branding-accueil h2,.branding-accueil h3{font-family:Oxanium,system-ui,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.16;text-wrap:balance}
.branding-accueil h1{font-size:clamp(34px,4.2vw,58px);max-width:15ch}
.branding-accueil h2{font-size:clamp(28px,3.1vw,42px);max-width:25ch}
.branding-accueil h3{font-size:24px}
.branding-accueil p{max-width:68ch}
.branding-accueil .wrap{max-width:1220px;padding-inline:28px}
.branding-accueil .hero{padding:64px 0 48px}
.branding-accueil .hero-grille{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.branding-accueil .surtitre{font-family:'DM Sans',system-ui,sans-serif;color:#31594B;letter-spacing:.09em;line-height:1.55;font-size:12px;font-weight:700;max-width:48ch}
.branding-accueil .marqueur,.branding-accueil .marqueur.froid{background:none;box-shadow:inset 0 -.22em 0 #F5BD70;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.branding-accueil .marqueur.froid{box-shadow:inset 0 -.22em 0 #D4DFC9}
.branding-accueil .nav{background:#FFF8E8;border-bottom:1px solid #D8C9AB}
.branding-accueil .nav .wrap{gap:18px}
.branding-accueil .nav-liens{gap:18px}
.branding-accueil .filet{height:4px}
.branding-accueil .btn{background:#31594B;color:#FFF8E8;border:2px solid #31594B;border-radius:4px;min-height:48px;padding:13px 19px;box-shadow:3px 3px 0 #172027;font-weight:700;white-space:normal;line-height:1.35}
.branding-accueil .btn:hover{background:#172027;color:#FFF8E8;border-color:#172027}
.branding-accueil .btn.fantome{background:transparent;color:#172027;border-color:#172027;box-shadow:none}
.branding-accueil .btn.fantome:hover{background:#F3E7CF;color:#172027}
.branding-accueil .nav .btn{color:#FFF8E8}
.branding-accueil :focus-visible{outline:3px solid #B65C3A;outline-offset:5px}
.branding-accueil section{padding:64px 0}
.branding-accueil .hero-agent{margin:0;min-width:0}
.pixel-scene{display:block;width:100%;aspect-ratio:1;background-image:url('/assets/branding-inarretables/agents-scenes-v2-alpha.png');background-size:300% 200%;background-repeat:no-repeat;image-rendering:pixelated;background-color:transparent}
.scene-0{background-position:0 0}.scene-1{background-position:50% 0}.scene-2{background-position:100% 0}.scene-3{background-position:0 100%}.scene-4{background-position:50% 100%}.scene-5{background-position:100% 100%}
.hero-agent .pixel-scene{max-width:512px;margin:auto}
.hero-agent figcaption{font-size:13px;text-align:center;color:#46524C;margin:0 0 18px}
.branding-accueil .agent-badges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;border-top:1px solid #D8C9AB;padding-top:14px}
.branding-accueil .agent-badges .badge{position:static!important;box-shadow:none;background:transparent;border:0;padding:0;max-width:none;border-radius:0;font-size:13px;flex:1;text-align:center}
.branding-accueil .badge b{font-size:16px;font-family:Oxanium,sans-serif;color:#31594B}
.branding-accueil .badge em{font-family:'DM Sans',sans-serif;color:#46524C;letter-spacing:0;font-size:11px}
.branding-accueil .chiffres{gap:20px;margin-top:28px;padding-top:18px;border-top:1px solid #D8C9AB;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.branding-accueil .chiffres b{font-family:Oxanium,sans-serif;font-size:30px;letter-spacing:-.02em}
.branding-accueil .chiffres span{font-size:13px;line-height:1.5}
.branding-accueil .defile{background:#F3E7CF;border-block:1px solid #D8C9AB}
.branding-accueil .defile ul{animation:none;flex-wrap:wrap;justify-content:center;gap:12px 24px;width:auto;padding:20px 28px;max-width:1220px;margin:auto}
.branding-accueil .defile li{color:#31594B;font-size:13px}
.branding-accueil .defile li:nth-child(n+15){display:none}
.branding-accueil .mini-entete{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:24px;align-items:center;margin-bottom:24px}
.branding-accueil .mini-entete .pixel-scene{width:180px}
.branding-accueil .miroir-cartes p{background:#FFF8E8;border-radius:4px;border-color:#D8C9AB}
.branding-accueil .miroir-cartes b{background:#F3E7CF;color:#914426;border-radius:2px}
.branding-accueil .journee-agents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0}
.branding-accueil .journee-agents details{background:#FFF8E8;border:1px solid #D8C9AB;padding:20px;border-radius:4px;box-shadow:4px 4px 0 #F3E7CF}
.branding-accueil .journee-agents summary{display:flex;flex-wrap:wrap;gap:10px;align-items:start;font-family:Oxanium,sans-serif;font-weight:700;font-size:21px;line-height:1.3}
.branding-accueil .journee-agents summary .pixel-scene{width:100%;order:-2;max-width:224px;margin:0 auto 10px}
.branding-accueil .journee-agents .journee-rang{color:#914426;background:#F3E7CF;border-radius:2px}
.branding-accueil .journee-agents p{font-size:16px;margin-top:20px}
.branding-accueil .journee-agents summary::after{color:#31594B}
.branding-accueil section.sombre{background:#31594B;color:#FFF8E8}
.branding-accueil section.sombre p,.branding-accueil section.sombre .chapeau{color:#FFF8E8}
.branding-accueil section.sombre .surtitre{color:#F5BD70}
.branding-accueil section.sombre h2,.branding-accueil section.sombre h3{color:#FFF8E8}
.branding-accueil section.sombre .btn.fantome{border-color:#FFF8E8;color:#FFF8E8}
.branding-accueil section.sombre .btn:not(.fantome){background:#F29A38;border-color:#F29A38;color:#172027}
.branding-accueil .etapes-lignes i{border-radius:0}
.branding-accueil .schema{max-width:460px}
.branding-accueil .apercu-diagnostic{border-radius:4px;border:1px solid #D8C9AB}
.branding-accueil .apercu-diagnostic p{color:#46524C!important}
.branding-accueil .apercu-diagnostic h3{color:#172027!important}
.branding-accueil .gratuits{grid-template-columns:repeat(3,minmax(0,1fr))}
.branding-accueil .gratuit{background:#FFF8E8;border:1px solid #D8C9AB;border-radius:4px;padding:24px;box-shadow:5px 5px 0 #F3E7CF}
.branding-accueil .gratuit>.pixel-scene{width:100%;max-width:224px;margin:0 auto 18px}
.branding-accueil .gratuit .etiquette{font-family:'DM Sans',sans-serif}
.branding-accueil .gratuit .etiquette b{color:#172027;background:#F5BD70;border-radius:2px}
.branding-accueil .coeur-encart{border-radius:4px;background:#31594B;margin-top:34px}
.branding-accueil .coeur-encart .chiffres{display:flex}
.branding-accueil .commencer{border-radius:4px;background:#F3E7CF;border:1px solid #D8C9AB;grid-template-columns:120px minmax(0,1fr) auto}
.point-agent{background-image:url('/assets/branding-inarretables/agents-specialistes-v2-alpha.png');background-size:200% 100%;background-position:0 0}
.mail-agent{background-image:url('/assets/branding-inarretables/agents-specialistes-v2-alpha.png');background-size:200% 100%;background-position:100% 0}
.branding-accueil .adrien-grille img{border-radius:4px;border:2px solid #F3E7CF;filter:none}
.branding-accueil .etiquettes li{border-radius:2px;font-family:'DM Sans',sans-serif;color:#FFF8E8}
.branding-accueil footer{background:#172027;color:#F3E7CF}
.branding-accueil footer .btn{background:#F29A38!important;border-color:#F29A38!important;color:#172027!important}
.branding-accueil footer a{color:#F5BD70}
.branding-accueil .lettre-form input{min-width:0;border-radius:4px}
.branding-accueil .lettre-label{display:block;margin-top:20px;font-size:15px}
.branding-accueil .lettre-form{margin-top:8px}
.branding-accueil details summary{min-height:44px}
.branding-accueil .ressources-liens{border-radius:4px}
@media(max-width:1050px){.branding-accueil .nav-liens{gap:12px}.branding-accueil .nav a{font-size:14px}.branding-accueil .hero-grille{gap:24px}.branding-accueil .commencer{grid-template-columns:96px minmax(0,1fr)}.branding-accueil .commencer>.btn{grid-column:2}}
@media(max-width:860px){.branding-accueil .hero-grille{grid-template-columns:1fr}.hero-agent .pixel-scene{max-width:384px}.branding-accueil .hero-agent{max-width:480px;margin:auto;width:100%}.branding-accueil .journee-agents{grid-template-columns:1fr}.branding-accueil .journee-agents summary .pixel-scene{width:112px;flex:none;margin:0;order:0}.branding-accueil .journee-agents summary{align-items:center}.branding-accueil .journee-agents summary::after{margin-left:auto}.branding-accueil .gratuits{grid-template-columns:1fr}.branding-accueil .gratuit>.pixel-scene{max-width:192px}.branding-accueil .methode-grille,.branding-accueil .adrien-grille{grid-template-columns:1fr}.branding-accueil .adrien-grille img{max-width:320px}.branding-accueil .coeur-encart{grid-template-columns:1fr}.branding-accueil .pied-grille{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.branding-accueil .wrap{padding-inline:20px}.branding-accueil section{padding:40px 0}.branding-accueil .hero{padding:32px 0 40px}.branding-accueil h1{font-size:34px;line-height:1.16;max-width:17ch}.branding-accueil h2{font-size:29px}.branding-accueil h3{font-size:23px}.branding-accueil .hero p.chapeau{font-size:17px;line-height:1.7}.branding-accueil .hero-grille{gap:24px}.branding-accueil .nav .wrap{gap:10px;padding-inline:16px}.branding-accueil .marque img{height:40px;width:auto}.branding-accueil .nav .btn{font-size:12px;padding:9px 12px}.branding-accueil .chiffres{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.branding-accueil .mini-entete{grid-template-columns:minmax(0,1fr) 96px;gap:12px}.branding-accueil .mini-entete .pixel-scene{width:96px}.branding-accueil .mini-entete h2{font-size:28px}.branding-accueil .journee-agents summary .pixel-scene{width:96px}.branding-accueil .journee-agents summary{font-size:19px}.branding-accueil .journee-agents details{padding:16px}.branding-accueil .journee-agents .journee-rang{font-size:13px}.branding-accueil .commencer{grid-template-columns:80px minmax(0,1fr);padding:20px;gap:14px}.branding-accueil .commencer>.btn{grid-column:1/-1}.branding-accueil .pied-grille{grid-template-columns:1fr}.branding-accueil .coeur-encart .btn{white-space:normal}.branding-accueil .coeur-encart .chiffres b{font-size:25px}.branding-accueil .coeur-encart{padding:24px}.branding-accueil .hero-agent .pixel-scene{width:288px;max-width:100%}.branding-accueil .defile ul{gap:10px 16px;padding:18px 20px}.branding-accueil .actions .btn{max-width:100%}.branding-accueil .reassurance{font-family:'DM Sans',sans-serif;letter-spacing:0;line-height:1.6}.branding-accueil .lettre-form .btn{width:100%}}
@media(max-width:350px){.branding-accueil .wrap{padding-inline:16px}.branding-accueil h1{font-size:30px}.branding-accueil .nav .wrap{gap:8px;padding-inline:12px}.branding-accueil .marque img{height:32px}.branding-accueil .nav .btn{font-size:11px;padding:9px}.branding-accueil .hero-agent .pixel-scene{width:288px}.branding-accueil .journee-agents summary{gap:8px}.branding-accueil .mini-entete{grid-template-columns:1fr}.branding-accueil .mini-entete .pixel-scene{width:144px}.branding-accueil .journee-agents summary .pixel-scene{width:80px}}
@media(prefers-reduced-motion:reduce){.branding-accueil *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Sur téléphone, les agents arrivent juste après le message principal. */
@media(max-width:640px){
 .branding-accueil .hero-grille{display:flex;flex-direction:column;align-items:stretch}
 .branding-accueil .hero-grille>div:first-child{display:contents}
 .branding-accueil .hero-grille h1{order:2;margin-bottom:0}
 .branding-accueil .hero-grille .surtitre{order:1;margin-bottom:0}
 .branding-accueil .hero-agent{order:3;margin:0 auto}
 .branding-accueil .hero-agent .pixel-scene{width:240px}
 .branding-accueil .hero-grille .chapeau{order:4;margin-bottom:0}
 .branding-accueil .hero-grille .actions{order:5;margin-top:0;display:grid;grid-template-columns:1fr}
 .branding-accueil .hero-grille .actions .btn{width:100%;flex:auto}
 .branding-accueil .hero-grille .reassurance{order:6;margin:0}
 .branding-accueil .hero-grille .chiffres{order:7;margin-top:0}
 .branding-accueil .hero-agent figcaption{margin-bottom:8px}
 .branding-accueil .agent-badges{gap:8px;padding-top:10px}
 .branding-accueil .agent-badges .badge b{font-size:13px}
 .branding-accueil .agent-badges .badge em{font-size:10px}
 .branding-accueil .journee-agents summary .pixel-scene{width:144px;order:-2}
}
.branding-accueil .defile li{max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere}
.branding-accueil .coeur-encart .btn{background:#F29A38;border-color:#F29A38;color:#172027}
@media(min-width:1051px){.branding-accueil .commencer{grid-template-columns:minmax(0,1fr) 120px auto}.branding-accueil .commencer>.pixel-scene{grid-column:2;grid-row:1}.branding-accueil .commencer>div{grid-column:1;grid-row:1}.branding-accueil .commencer>.btn{grid-column:3;grid-row:1}}
.schema-mobile{display:none}
@media(max-width:640px){.branding-accueil .schema{display:none}.schema-mobile{display:block;margin:24px 0}.schema-mobile .pixel-scene{max-width:240px;margin:auto}.schema-mobile ol{display:grid;gap:10px;margin:20px 0;padding-left:24px;color:#FFF8E8;font-size:16px;line-height:1.6}.schema-mobile li::marker{color:#F5BD70;font-weight:700}}
.branding-accueil .apercu-diagnostic{background:#FFF8E8;color:#172027;padding:24px}
.branding-accueil .apercu-diagnostic .scores strong{font-size:14px}
.branding-accueil .apercu-diagnostic .scores b{font-family:Oxanium,sans-serif;font-size:22px}

/* Grands titres pixel art ; texte courant et petits titres restent fluides. */
.branding-accueil h1,.branding-accueil h2{font-family:VT323,system-ui,sans-serif;font-weight:400;letter-spacing:0;line-height:1.08}
.branding-accueil h1{font-size:clamp(40px,4.6vw,64px);max-width:19ch}
.branding-accueil h2{font-size:clamp(34px,3.6vw,48px)}
@media(max-width:640px){.branding-accueil h1{font-size:40px;max-width:19ch}.branding-accueil h2,.branding-accueil .mini-entete h2{font-size:34px}}
@media(max-width:350px){.branding-accueil h1{font-size:36px}.branding-accueil h2,.branding-accueil .mini-entete h2{font-size:32px}}