/* Site de présentation EditRail — reprend la charte de l'application (commun\theme.css et commun\accueil.html) :
   bandeau bleu nuit + trait orange, fond crème, cartes « P3 » teintées de la couleur du module (palette « livrées de matériel »). */

:root{--bg:#e8dcc6;--panel:#fffaf1;--ink:#0f1d33;--mute:#4c5566;--line:#d8c9ac;
 --bande:#1d3557;--bande-ink:#e3d6bd;--bande-mute:#9fb0c6;--bande-line:#3b5a86;--orange:#e0873a;
 --ok:#1f9d55;--acc:#1c5fa8;--err:#c92a2a;
 --m-cf:#46795f;--m-si:#4b6994;--m-re:#924646;--m-ob:#6e5e86;--m-ba:#947941;--m-pa:#617282;--m-su:#37767e;--m-ci:#d4a24c;--m-ma:#c98a62;
 color-scheme:light}
:root[data-theme="dark"]{--bg:#2a2e34;--panel:#162740;--ink:#ece7dc;--mute:#c4c9d0;--line:#34496a;
 --bande:#0f1d33;--bande-mute:#8e9cb0;--bande-line:#2c4266;
 --m-cf:#72a189;--m-si:#7792b9;--m-re:#c18585;--m-ob:#9789ad;--m-ba:#b9a16e;--m-pa:#8b9aa9;--m-su:#6fa9b0;--m-ci:#d4a24c;--m-ma:#c98a62;
 color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:15px/1.5 system-ui,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--acc)}:root[data-theme="dark"] a{color:#8fb6e6}
img{max-width:100%}
.lien-direct{position:absolute;left:-999px}.lien-direct:focus{left:16px;top:8px;z-index:99;background:var(--panel);padding:6px 10px}

/* ---------- bandeau ---------- */
header.bandeau{background:var(--bande);color:var(--bande-ink);border-bottom:3px solid var(--orange)}
.bande{max-width:1440px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--bande-ink);text-decoration:none}
.logo img{width:52px;height:52px}
.logo span{font-size:32px;font-weight:700;letter-spacing:.01em}.logo span b{color:var(--orange)}
nav.menu{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
nav.menu a{color:var(--bande-ink);text-decoration:none;font-size:13.5px;padding:6px 12px;border:1px solid transparent;border-radius:8px}
nav.menu a:hover{border-color:var(--bande-line)}
nav.menu a[aria-current="page"]{border-color:var(--orange);color:#fff}
.theme{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--bande-mute)}
.sw{width:36px;height:20px;border-radius:999px;border:0;background:var(--bande-line);position:relative;cursor:pointer;padding:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.sw[aria-checked="true"]{background:var(--orange)}.sw[aria-checked="true"]::after{left:19px}
.sw:focus-visible,nav.menu a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- choix de la langue (ajouté par js/langue.js) ---------- */
.langue{position:relative}
.langue-btn,.langue-liste button{display:flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;cursor:pointer;color:var(--bande-ink);background:transparent;border:1px solid var(--bande-line);border-radius:8px;padding:4px 8px}
.langue-btn:hover,.langue.ouvert .langue-btn{border-color:var(--orange)}
.langue svg{width:22px;height:15px;flex:none;border-radius:2px;box-shadow:0 0 0 1px #00000033}
.langue-liste{list-style:none;margin:0;padding:6px;position:absolute;right:0;top:100%;z-index:60;min-width:160px;background:var(--bande);border:1px solid var(--bande-line);border-top:2px solid var(--orange);border-radius:0 0 8px 8px;box-shadow:0 12px 26px #00000055;display:none}
.langue.ouvert .langue-liste{display:grid;gap:2px}
.langue-liste button{width:100%;border-color:transparent}
.langue-liste button:hover,.langue-liste button:focus-visible{border-color:var(--orange);outline:none}
.langue-liste button[aria-current="true"]{background:color-mix(in srgb,var(--orange) 22%,transparent)}
.langue-liste .nom{font-weight:400;letter-spacing:0;color:var(--bande-mute)}
.langue-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- héros ---------- */
[hidden]{display:none!important}
.heros{background:var(--bande);color:var(--bande-ink);padding:44px 24px 56px;position:relative;overflow:hidden}
.heros .in{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.heros h1{margin:0 0 12px;font-size:clamp(30px,5vw,48px);line-height:1.1}.heros h1 b{color:var(--orange)}
.heros p{margin:0 0 22px;color:var(--bande-mute);font-size:17px;max-width:560px}
.heros .rails{width:100%;max-width:460px;justify-self:center}
.heros-petit{padding:30px 24px 34px}
.heros-petit .in{grid-template-columns:1fr}
.heros-petit h1{font-size:clamp(26px,4vw,36px);margin-bottom:6px}.heros-petit p{margin:0}

.bouton{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:14px;padding:10px 18px;border-radius:8px;border:1px solid var(--orange);background:var(--orange);color:#1b1206;text-decoration:none;cursor:pointer}
.bouton:hover{filter:brightness(1.08)}
.bouton.creux{background:transparent;color:var(--bande-ink);border-color:var(--bande-line)}.bouton.creux:hover{border-color:var(--orange)}
.boutons{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- contenu ---------- */
main{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:36px 24px 56px}
section{margin-bottom:48px}
h2{font-size:24px;margin:0 0 6px}
h2+.sous{margin:0 0 20px;color:var(--mute)}
h3{margin:0;font-size:18px}
.sous{color:var(--mute)}

/* chiffres clés */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.chiffre{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:10px;padding:16px 18px}
.chiffre b{display:block;font-size:30px;line-height:1.1}.chiffre span{color:var(--mute);font-size:13.5px}

/* atouts de l'accueil : pictogramme, titre court, phrase simple */
.atouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.atout{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 18px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.atout .pic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--orange);background:color-mix(in srgb,var(--orange) 15%,transparent);margin-bottom:4px}
.atout .pic svg{width:28px;height:28px}
.atout b{font-size:18px}
.atout>span:last-child{color:var(--mute);font-size:14.5px;line-height:1.45}

/* cartes « P3 » : en-tête teinté de la couleur du module, icône + titre, puis texte */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));row-gap:26px;column-gap:32px}
.carte{--c:var(--acc);position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--c);border-radius:0;overflow:hidden;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s,background-color .15s}
a.carte:hover{transform:translateY(-4px);border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--panel));box-shadow:0 0 0 1px var(--c),0 14px 30px #00000040}
.carte .etat{transition:transform .15s}a.carte:hover .etat{transform:translateX(4px)}
a.carte:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.carte .tete{display:flex;align-items:center;gap:14px;padding:16px 22px;min-height:82px;background:color-mix(in srgb,var(--c) 13%,var(--panel));border-bottom:1px solid color-mix(in srgb,var(--c) 30%,var(--panel))}
.ic{width:50px;height:50px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c)}
.ic svg{width:30px;height:30px}
.carte .corps{padding:14px 22px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.carte h3{font-size:20px}
.carte p{margin:0;color:var(--mute);font-size:14px;line-height:1.45}
.carte ul{margin:0;padding-left:18px;color:var(--mute);font-size:14px}
.carte .etat{margin-top:auto;font-size:13px;font-weight:600;color:var(--c)}
.pastille{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--mute)}
.pastille.integre{border-color:var(--orange);color:var(--orange)}
.pastille.ok{border-color:var(--ok);color:var(--ok)}
.tete .pastille{margin-left:auto}

.m-cf{--c:var(--m-cf)}.m-si{--c:var(--m-si)}.m-re{--c:var(--m-re)}.m-ob{--c:var(--m-ob)}.m-ba{--c:var(--m-ba)}.m-pa{--c:var(--m-pa)}.m-su{--c:var(--m-su)}.m-ci{--c:var(--m-ci)}.m-ma{--c:var(--m-ma)}

/* filtres de la page plugins */
.filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filtres button{font:inherit;font-size:13.5px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.filtres button[aria-pressed="true"]{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 18%,var(--panel))}
.recherche{font:inherit;padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);min-width:220px;flex:1;max-width:320px}
.vide{color:var(--mute);padding:20px 0}

/* schéma d'architecture */
.schema{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;overflow-x:auto}
.schema svg{display:block;width:100%;min-width:620px;height:auto}
.schema text{font:13px system-ui,"Segoe UI",sans-serif;fill:var(--ink)}
.schema .petit{font-size:11.5px;fill:var(--mute)}
.schema .boite{fill:var(--bg);stroke:var(--line);stroke-width:1.5}
.schema .fl{stroke:var(--mute);stroke-width:1.6;fill:none;marker-end:url(#fleche)}

/* tableaux */
.tableau{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:14px}
.tableau th,.tableau td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tableau th{background:color-mix(in srgb,var(--bande) 10%,var(--panel));font-weight:600}
.tableau tr:last-child td{border-bottom:0}
.tableau code,code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;background:color-mix(in srgb,var(--line) 45%,transparent);padding:1px 5px;border-radius:4px}
.defile{overflow-x:auto}

/* frise des versions */
.frise{list-style:none;margin:0;padding:0 0 0 22px;border-left:3px solid var(--line)}
.frise li{position:relative;padding:0 0 22px 18px}
.frise li::before{content:"";position:absolute;left:-31px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--panel);border:3px solid var(--orange)}
.frise li.actuelle::before{background:var(--orange)}
.frise .v{font-weight:700;font-size:16px}.frise .d{color:var(--mute);font-size:13px;margin-left:8px}
.frise p{margin:4px 0 0;color:var(--mute);font-size:14px}

/* encadrés */
.encadre{background:color-mix(in srgb,var(--orange) 14%,var(--panel));border:1px solid var(--orange);border-radius:10px;padding:14px 18px}
.encadre p{margin:0}
.encadre.fort{border-width:2px;border-left-width:6px;margin:14px 0}.encadre.fort p{color:var(--ink)}
.deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.etapes{counter-reset:e;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.etapes li{counter-increment:e;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px 14px 58px;position:relative}
.etapes li::before{content:counter(e);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--bande);color:var(--bande-ink);display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid var(--orange)}
.etapes b{display:block}.etapes span{color:var(--mute);font-size:14px}

/* onglet « Rejoindre l'aventure » */
nav.menu a.cta{border-color:var(--orange);color:#fff;font-weight:600}
nav.menu a.cta[aria-current="page"],nav.menu a.cta:hover{background:var(--orange);color:#1b1206}

/* formulaires */
.formulaire{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--orange);padding:22px;display:grid;gap:14px;align-content:start}
.formulaire label{display:block;font-size:14px;font-weight:600}
.formulaire input:not([type=checkbox]){display:block;margin-top:5px;font:inherit;font-weight:400;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.formulaire textarea{display:block;margin-top:5px;font:inherit;font-weight:400;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%;resize:vertical;min-height:140px}
.formulaire textarea.petit{min-height:60px}
.formulaire textarea:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.compteur{display:block;text-align:right;font-size:12px;font-weight:400;color:var(--mute);margin-top:4px}
.formulaire input:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.formulaire fieldset{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:0;display:grid;gap:6px}
.formulaire legend{font-size:14px;font-weight:600;padding:0 4px}
.formulaire .case{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.formulaire .case input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--orange)}
.formulaire .accord{font-size:13.5px}
.formulaire .bouton{justify-self:start}
.champs-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.obl{color:var(--err)}.fac{font-weight:400;color:var(--mute)}
.defi-etat{margin:-6px 0 0;font-size:12.5px;color:var(--mute)}.defi-etat.ok{color:var(--ok)}
.mention{margin:0;font-size:12.5px;color:var(--mute)}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.alerte{margin:0;padding:10px 14px;border-radius:8px;border:1px solid var(--err);color:var(--err);background:color-mix(in srgb,var(--err) 10%,var(--panel));font-size:14px}
.liste-ok{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.liste-ok li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px 12px 44px;position:relative;font-size:14px;color:var(--mute)}
.liste-ok li::before{content:"✓";position:absolute;left:16px;top:11px;color:var(--ok);font-weight:700}
.liste-ok b{color:var(--ink)}
.encart{max-width:720px}.encart.centre{margin-left:auto;margin-right:auto}
.encart .formulaire{margin-top:16px}

/* page Données personnelles */
.texte{max-width:860px}
.texte h2{margin-top:30px}.texte h2:first-child{margin-top:0}
.texte p,.texte li{color:var(--mute)}.texte b{color:var(--ink)}
.a-completer{background:color-mix(in srgb,var(--orange) 30%,transparent);color:var(--ink);padding:0 4px;border-radius:4px;font-weight:600}

/* aperçu vidéo au survol des cartes (Modules, Plugins) */
.apercu-video{position:fixed;z-index:50;width:520px;max-width:calc(100vw - 24px);background:#000;border:2px solid var(--orange);border-radius:8px;overflow:hidden;box-shadow:0 12px 30px #00000066;pointer-events:none}
.apercu-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

footer.pied a{color:var(--bande-ink)}
.liens-pied{display:flex;gap:18px;flex-wrap:wrap}
footer.pied{background:var(--bande);color:var(--bande-mute);border-top:3px solid var(--orange);font-size:13px}
footer.pied .in{max-width:1440px;margin:0 auto;padding:18px 24px;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}

@media (max-width:820px){
 .heros .in{grid-template-columns:1fr}
 .heros .rails{max-width:320px}
 nav.menu{margin-left:0;width:100%}
 .bande{padding:12px 16px}
 main{padding:28px 16px 44px}
 .heros{padding:32px 16px 40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Vidéo en grand sur écran tactile (toucher une carte des pages Modules et Plugins) */
.video-plein{position:fixed;inset:0;z-index:1000;background:rgba(10,14,20,.86);display:flex;align-items:center;justify-content:center;padding:16px}
.video-plein[hidden]{display:none!important}
.vp-cadre{position:relative;width:100%;max-width:960px}
.vp-cadre video{display:block;width:100%;max-height:80vh;border-radius:10px;background:#000}
.vp-fermer{position:absolute;top:-14px;right:-6px;width:40px;height:40px;border-radius:50%;border:0;background:#e0873a;color:#fff;font-size:20px;line-height:40px;cursor:pointer;box-shadow:0 2px 8px #0006}
body.sans-defil{overflow:hidden}
.carte.a-video{cursor:pointer}
.carte.a-video .tete h3::after{content:" ▶";font-size:.7em;opacity:.55}
.marge-20{margin-top:20px}
.marge-28{margin-top:28px}