/* ==========================================================================
   SunSys AI Studio — feuille de style unique
   Tous les styles sont portés par la classe racine .sas : la page peut être
   intégrée dans un site existant sans collision.
   ========================================================================== */

/* --- Jetons ------------------------------------------------------------- */
.sas{--bg:#f2f2f3;--surface:#e9e9ea;--text:#1d1f20;--divider:rgba(29,31,32,.22);
--a100:#e8f7ef;--a300:#93dcb5;--a:#2fbf68;--a700:#1a8a66;--a800:#16746c;--a900:#145d6d;
--green:#1a7a46;--green-lt:#6fe0a3;
--fh:'Barlow Condensed',Impact,sans-serif;--fb:'Barlow',Helvetica,Arial,sans-serif;
background:var(--bg);color:var(--text);font-family:var(--fb);text-wrap:pretty;-webkit-font-smoothing:antialiased}
.sas.sas-dark{--bg:#0f1517;--surface:#182124;--text:#e9efec;--divider:rgba(233,239,236,.22);
--a100:#12312a;--a300:#1d5a41;--a700:#79e2a5;--a800:#a6edc3;--a900:#d3f6e1;--green:#6fe0a3;--green-lt:#1a7a46}

/* --- Base --------------------------------------------------------------- */
html,body{margin:0;padding:0}
body{background:#f2f2f3}
body.sas-body-dark{background:#0f1517}
.sas *,.sas *::before,.sas *::after{box-sizing:border-box}
.sas h1,.sas h2,.sas h3{font-family:var(--fh);font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin:0}
.sas p{margin:0}
.sas a{color:var(--green);text-decoration:none}
.sas a:hover{color:var(--a800)}
.sas .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.sas .kick{display:block;font-size:13px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--green);margin-bottom:12px}
.sas .rule{height:1px;border:0;margin:0 0 32px;background:var(--divider)}
.sas section{padding:24px 0 72px}

/* --- Cadre « blueprint » ------------------------------------------------ */
.sas .bp{position:relative;border:1px solid var(--divider);background:transparent}
.sas .bp>.c{position:absolute;width:9px;height:9px;pointer-events:none;color:var(--divider)}
.sas .bp>.c::before,.sas .bp>.c::after{content:"";position:absolute;background:currentColor}
.sas .bp>.c::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.sas .bp>.c::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.sas .bp>.tl{left:-5px;top:-5px}.sas .bp>.tr{right:-5px;top:-5px}
.sas .bp>.bl{left:-5px;bottom:-5px}.sas .bp>.br{right:-5px;bottom:-5px}

/* --- Boutons et étiquettes ---------------------------------------------- */
.sas .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border:1px solid var(--divider);border-radius:0;background:transparent;color:var(--text);font-family:var(--fb);font-size:14px;font-weight:500;line-height:1.2;letter-spacing:.02em;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}
.sas .btn:hover{background:color-mix(in srgb,var(--green) 10%,transparent);border-color:var(--green);color:var(--text)}
.sas .btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.sas .btn-primary:hover{background:var(--a800);border-color:var(--a800);color:#fff}
.sas.sas-dark .btn-primary,.sas.sas-dark .btn-primary:hover{color:#0f2b1c}
.sas .btn:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.sas .tag{display:inline-block;padding:4px 9px;border:1px solid var(--divider);font-size:12px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.sas .tag-a{background:var(--a100);border-color:var(--green);color:var(--a900)}

/* --- Sélecteur de langue ------------------------------------------------ */
.sas .lang{display:flex;border:1px solid var(--divider)}
.sas .lang-opt{display:block;padding:8px 11px;font-family:var(--fh);font-weight:600;font-size:14px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--text) 62%,transparent);text-decoration:none;transition:background .15s ease,color .15s ease}
.sas .lang-opt+.lang-opt{border-left:1px solid var(--divider)}
.sas .lang-opt:hover{background:color-mix(in srgb,var(--green) 10%,transparent);color:var(--text)}
.sas .lang-opt.is-on{background:var(--green);color:#fff}
.sas.sas-dark .lang-opt.is-on{color:#0f2b1c}
.sas .lang-opt:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* --- Tableaux ----------------------------------------------------------- */
.sas table{width:100%;border-collapse:collapse;color:inherit;font-family:inherit}
.sas th,.sas td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--divider);vertical-align:top;color:inherit;font-family:inherit;font-size:inherit}
.sas thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;background:color-mix(in srgb,var(--text) 5%,transparent)}
.sas tbody tr:last-child td{border-bottom:0}
.sas .num{font-family:var(--fh);font-weight:600;font-variant-numeric:tabular-nums}
.sas .muted{color:color-mix(in srgb,var(--text) 70%,transparent)}

/* --- Grilles ------------------------------------------------------------ */
.sas .grid{display:grid;gap:clamp(20px,3vw,40px)}
.sas .g2{grid-template-columns:1fr 1fr}
.sas .g3{grid-template-columns:repeat(3,1fr)}
.sas .g4{grid-template-columns:repeat(4,1fr)}
.sas .g4-fixed{display:grid;grid-template-columns:repeat(4,1fr)}
.sas .g2-fixed{display:grid;grid-template-columns:1fr 1fr}

/* --- Média -------------------------------------------------------------- */
.sas .duo{position:relative;overflow:hidden}
.sas .duo>video,.sas .duo>img{display:block;width:100%;filter:grayscale(1) contrast(1.05)}
.sas .duo::after{content:"";position:absolute;inset:0;background:var(--a900);mix-blend-mode:screen;opacity:.55;pointer-events:none}

/* --- Accordéon FAQ ------------------------------------------------------ */
.sas details{border-bottom:1px solid var(--divider);padding:20px 0}
.sas summary{list-style:none;cursor:pointer;font-family:var(--fh);font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.sas summary::-webkit-details-marker{display:none}
.sas summary:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* --- Divers ------------------------------------------------------------- */
.sas .ico{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--green);background:var(--a100)}
.sas .tile{padding:24px;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.sas .tile:hover{transform:translateY(-3px);border-color:var(--green);background-color:color-mix(in srgb,var(--green) 6%,transparent)}

/* --- Animations --------------------------------------------------------- */
@keyframes sasflow{to{background-position:-16px 0}}
@keyframes sasflowv{to{background-position:0 -16px}}
@keyframes saspulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes sasscan{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.sas .link{height:1px;width:100%;color:var(--green);background-image:repeating-linear-gradient(to right,currentColor 0 8px,transparent 8px 16px);background-size:16px 1px;animation:sasflow .9s linear infinite}
.sas .chip{border:1px solid var(--divider);padding:7px 0;text-align:center;font-family:var(--fh);font-weight:600;font-size:15px;letter-spacing:.06em;animation:saspulse 4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.sas .link,.sas .chip,.sas .scan{animation:none!important}}

/* ==========================================================================
   Formulaire d'inscription (traité par inscription.php)
   ========================================================================== */
.sas .form{display:grid;gap:18px}
.sas .field{display:grid;gap:7px}
.sas .field>label{font-size:13px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--text)}
.sas .field .req{color:var(--green)}
.sas .field .hint{font-size:12px;line-height:18px;color:color-mix(in srgb,var(--text) 60%,transparent)}
.sas .input,.sas .textarea{width:100%;padding:10px 12px;border:1px solid var(--divider);border-radius:0;background:transparent;color:var(--text);font-family:var(--fb);font-size:15px;line-height:22px;transition:border-color .15s ease}
.sas .textarea{resize:vertical;min-height:84px}
.sas .input:hover,.sas .textarea:hover{border-color:color-mix(in srgb,var(--green) 55%,var(--divider))}
.sas .input:focus-visible,.sas .textarea:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-color:var(--green)}
.sas .input::placeholder,.sas .textarea::placeholder{color:color-mix(in srgb,var(--text) 40%,transparent)}
.sas .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sas .check{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:13px;line-height:20px;color:color-mix(in srgb,var(--text) 78%,transparent);cursor:pointer}
.sas .check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:1px 0 0;border:1px solid var(--divider);border-radius:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.sas .check input:checked{border-color:var(--green);background:var(--green)}
.sas .check input:checked::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.sas.sas-dark .check input:checked::after{border-color:#0f2b1c}
.sas .check input:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.sas .form .btn-primary{width:100%}
.sas .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sas .field-error{font-size:12px;line-height:18px;color:#c0392b;font-weight:500}
.sas.sas-dark .field-error{color:#ff9b8f}
.sas .input[aria-invalid="true"],.sas .textarea[aria-invalid="true"]{border-color:#c0392b}
.sas .notice{border:1px solid var(--divider);padding:14px 16px;font-size:14px;line-height:22px}
.sas .notice-ok{border-color:var(--green);background:var(--a100);color:var(--a900)}
.sas .notice-ko{border-color:#c0392b;color:#c0392b}
.sas.sas-dark .notice-ko{color:#ff9b8f}
.sas .ref{font-family:'Courier New',Courier,monospace;font-size:18px;font-weight:700;letter-spacing:.04em}

/* --- Adaptatif ---------------------------------------------------------- */
@media(max-width:1060px){
.sas .g2,.sas .g3,.sas .g4,.sas .split{grid-template-columns:1fr!important}
.sas .band{grid-template-columns:1fr!important}
.sas .link{height:40px!important;width:1px!important;justify-self:center;background-image:repeating-linear-gradient(to bottom,currentColor 0 8px,transparent 8px 16px)!important;background-size:1px 16px!important;animation-name:sasflowv!important}}
@media(max-width:560px){.sas .field-row{grid-template-columns:1fr}}