@font-face{font-family:'CSMT Arabic';src:url('esg-arabic.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'CSMT Arabic';src:url('esg-arabic-bold.woff') format('woff');font-weight:700 900;font-display:swap}

/* ============ JETONS DE MARQUE — blason CSMT ============
   noir · blanc · bronze (titre de la fiche papier)
   Motif signature : les créneaux de la forteresse du blason.
   ======================================================== */
:root{
  --noir:#000;      --noir-2:#1C1C1C;  --noir-3:#2E2E2E;
  --blanc:#fff;     --pierre:#ECEBE7;  --pierre-2:#F7F6F3;
  --bronze:#B08A45; --bronze-l:#D9BC7E; --bronze-d:#6F5526;
  --ink:#141414;    --ink-2:#686762;   --line:#DDDBD4;
  --err:#C8102E;    --err-bg:#FDF2F3;  --err-line:#F3CBD0;
  --ok:#1E7F45;
  --r-lg:18px; --r-md:12px;
  --shadow:0 18px 40px -26px rgba(0,0,0,.55);
  --merlon:36px;   /* largeur d'un créneau */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--pierre); color:var(--ink); overflow-x:clip;
  font-family:'CSMT Arabic',system-ui,sans-serif; font-size:16px; line-height:1.65}
h1,h2,h3{font-family:'CSMT Arabic','CSMT Arabic',sans-serif; font-weight:700}
.lat{font-family:'CSMT Arabic','CSMT Arabic',sans-serif; letter-spacing:.04em}
.num{direction:ltr; unicode-bidi:isolate; -webkit-unicode-bidi:isolate; display:inline-block}
a{color:var(--noir)}
:focus-visible{outline:3px solid var(--bronze); outline-offset:3px; border-radius:6px}
.honeypot{position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; z-index:-1; pointer-events:none}

/* ============ CRÉNEAUX (motif du blason) ============ */
.wall{height:20px; width:100%;
  background:linear-gradient(90deg, var(--pierre) 0 50%, transparent 50% 100%) 0 0 / var(--merlon) 100% repeat-x}

/* ============ BARRE HAUTE ============ */
.topbar{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 26px; background:var(--noir); border-bottom:1px solid var(--noir-3)}
.brand{display:flex; align-items:center; gap:12px; color:#fff; min-width:0}
.brand img{width:48px; height:48px; object-fit:contain; mix-blend-mode:screen; flex:0 0 auto}
.brand .nm{font-family:'CSMT Arabic',sans-serif; font-weight:700; font-size:17px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56vw}
.brand .sg{font-size:13px; color:var(--bronze-l); direction:ltr; text-align:right}
.top-year{color:#fff; font:800 15px 'CSMT Arabic',sans-serif; letter-spacing:.08em;
  border:1px solid var(--noir-3); padding:6px 14px; border-radius:30px}
.top-year span{color:var(--bronze-l)}
.prog{position:sticky; top:68px; z-index:59; height:4px; background:var(--noir-3)}
.prog-in{height:100%; width:0; background:var(--bronze-l); transition:width .5s cubic-bezier(.2,.8,.25,1)}

/* ============ HÉROS ============ */
.hero{position:relative; background:var(--noir); color:#fff; padding:56px 26px 0; overflow:hidden}
.hero:before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 70% at 22% 40%, rgba(255,255,255,.07), transparent 70%)}
.hero-grid{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding-bottom:64px;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:48px}
.kicker{display:inline-block; color:var(--bronze-l); font-weight:800; font-size:14.5px; margin-bottom:14px}
.hero h1{font-size:clamp(34px,5vw,58px); line-height:1.25; margin:0 0 14px; color:#fff}
.wordmark{direction:ltr; text-align:right; margin:0 0 26px; line-height:.95; color:#fff;
  font-family:'CSMT Arabic',sans-serif; font-weight:700; font-size:clamp(22px,2.6vw,30px); letter-spacing:.06em; text-transform:uppercase}
.wordmark span{display:block}
.wordmark span:last-child{font-weight:900; color:var(--bronze-l)}
.intro{max-width:50ch; color:#D8D6D0; font-size:16.5px; margin:0 0 28px}
.intro strong{color:#fff}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.btn-cta{border:0; cursor:pointer; text-decoration:none; background:#fff; color:var(--noir);
  padding:15px 32px; border-radius:40px; font:800 16.5px 'CSMT Arabic',sans-serif; display:inline-flex; align-items:center; gap:11px;
  box-shadow:inset 0 -3px 0 var(--bronze); transition:transform .2s, background .2s}
.btn-cta:hover{transform:translateY(-2px); background:var(--bronze-l)}
.facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.fact{display:inline-flex; align-items:center; gap:8px; color:#E9E7E1; font-size:13.5px; font-weight:600;
  border:1px solid var(--noir-3); background:var(--noir-2); padding:8px 14px; border-radius:10px}
.fact i{color:var(--bronze-l)}

/* blason + année de fondation */
.crest-wrap{position:relative; display:grid; place-items:center; min-height:340px}
.year-ghost{position:absolute; inset:auto 0 50% 0; transform:translateY(50%); text-align:center; direction:ltr;
  font:900 clamp(150px,21vw,290px) 'CSMT Arabic',sans-serif; line-height:1; letter-spacing:-.01em;
  color:transparent; -webkit-text-stroke:1.5px rgba(217,188,126,.28); pointer-events:none; user-select:none}
.crest{position:relative; width:min(340px,82%); display:block; mix-blend-mode:screen;
  animation:crestIn 1.1s cubic-bezier(.2,.8,.25,1) both}
.crest-fb{display:none; position:relative; width:min(280px,74%); aspect-ratio:1; border-radius:24px; border:3px solid #fff;
  color:#fff; font:900 80px 'CSMT Arabic',sans-serif; align-items:center; justify-content:center}
@keyframes crestIn{from{opacity:0; transform:translateY(24px) scale(.94)}to{opacity:1; transform:none}}
.hero .wall{position:relative; z-index:3}

/* ============ FORMULAIRE ============ */
.sheet{position:relative; z-index:20; margin:34px auto 0; max-width:1180px; padding:0 20px 70px}
.layout{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr); gap:26px; align-items:start}
.sheet,.panel,.field{scroll-margin-top:104px}
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:32px 32px 36px; margin-bottom:22px; position:relative}
html.js .panel{opacity:0; transform:translateY(20px)}
html.js .panel.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1)}
.panel-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.panel-num{flex:0 0 auto; width:46px; height:46px; border-radius:10px; display:grid; place-items:center;
  background:var(--noir); color:var(--bronze-l); font:800 22px 'CSMT Arabic',sans-serif}
.panel-title{font-size:21px; margin:0; color:var(--ink)}
.panel-sub{color:var(--ink-2); font-size:14px; font-weight:500; margin:2px 0 0}
.sub-title{font-family:'CSMT Arabic',sans-serif; font-weight:700; font-size:16.5px; margin:26px 0 12px; color:var(--ink)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{margin-bottom:4px; position:relative}
.field label.lab, .lab-block{display:block; font-weight:800; font-size:14.5px; margin-bottom:7px; color:#262522}
.lab .req, .lab-block .req{color:var(--err); margin-inline-start:3px}
.lab .opt, .lab-block .opt{color:var(--ink-2); font-weight:600; font-size:12.5px; margin-inline-start:6px}
.ctl{width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--pierre-2);
  color:var(--ink); font:600 15px 'CSMT Arabic',sans-serif; transition:border-color .2s, box-shadow .2s, background .2s; outline:none}
.ctl:focus{border-color:var(--noir); background:#fff; box-shadow:0 0 0 4px rgba(176,138,69,.22)}
.ctl:disabled{background:#EFEEEA; color:#AAA8A1; cursor:not-allowed}
.ctl.locked{background:#fff; border-style:dashed; color:var(--noir); font-weight:800}
select.ctl{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%23686762' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:left 16px center; padding-left:42px}
textarea.ctl{resize:vertical; min-height:84px}
.ltr{direction:ltr; text-align:right}
.hint{font-size:12.5px; color:var(--ink-2); margin-top:6px}
.hint.strong{color:var(--bronze-d); font-weight:700}
.err-msg{display:none; color:var(--err); font-size:13px; font-weight:700; margin-top:6px}
.field.err .ctl{border-color:var(--err); background:var(--err-bg); animation:shake .38s}
.field.err .err-msg{display:block}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.field.ok:after{content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:11px;
  position:absolute; left:14px; bottom:16px; color:#fff; background:var(--ok); width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; animation:pop .3s cubic-bezier(.2,1.4,.4,1) both}
.field.ok select.ctl{padding-left:64px}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}

.seg{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg label{display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; padding:13px 10px; text-align:center;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--pierre-2); font-weight:800; font-size:15px; transition:.2s; margin:0}
.seg input:checked + label{border-color:var(--noir); background:var(--noir); color:#fff}
.seg input:checked + label i{color:var(--bronze-l)}
.seg input:focus-visible + label{outline:3px solid var(--bronze); outline-offset:2px}
.seg input:disabled + label{opacity:.45; cursor:not-allowed; text-decoration:line-through}

/* ============ BRANCHES ============ */
.branches{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.branch input{position:absolute; opacity:0; width:0; height:0}
.branch label{display:flex; align-items:center; gap:14px; cursor:pointer; margin:0; padding:16px; border-radius:14px; height:100%;
  border:2px solid var(--line); background:var(--pierre-2); transition:border-color .2s, background .2s}
.branch label:hover{border-color:#B9B6AD}
.branch .ic{flex:0 0 auto; width:50px; height:50px; border-radius:12px; display:grid; place-items:center;
  background:#fff; border:1.5px solid var(--line); color:var(--noir); font-size:21px}
.branch .nm{font-family:'CSMT Arabic',sans-serif; font-weight:700; font-size:16px; line-height:1.35}
.branch .fr{font-family:'CSMT Arabic',sans-serif; letter-spacing:.06em; font-size:13px; color:var(--ink-2)}
.branch .meta{font-size:12.5px; font-weight:700; color:var(--bronze-d); margin-top:3px}
.branch input:checked + label{border-color:var(--noir); background:#fff}
.branch input:checked + label .ic{background:var(--noir); color:var(--bronze-l); border-color:var(--noir)}
.branch input:focus-visible + label{outline:3px solid var(--bronze); outline-offset:3px}

/* ============ PASTILLES DE CATÉGORIES ============ */
.cat-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.cp{display:inline-flex; align-items:baseline; gap:7px; padding:7px 13px; border-radius:30px;
  border:1.5px solid var(--line); background:var(--pierre-2); font-weight:800; font-size:14px; transition:.25s}
.cp small{font:700 13px 'CSMT Arabic',sans-serif; color:var(--ink-2); letter-spacing:.04em}
.cp.on{background:var(--noir); border-color:var(--noir); color:#fff}
.cp.on small{color:var(--bronze-l)}

/* ============ ENCARTS ============ */
.info-box{border:1px solid var(--line); background:var(--pierre-2); border-radius:14px; padding:16px 18px; margin-top:20px}
.info-box .ib-t{display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; color:var(--noir); margin-bottom:8px}
.info-box .ib-t i{color:var(--bronze)}
.info-box p{margin:4px 0; font-size:14px; font-weight:600; color:#35342F}
.info-box .warn{color:var(--bronze-d); font-weight:800}

/* droits d'inscription */
.fees{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fee{border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; background:var(--pierre-2)}
.fee .big{font:900 40px 'CSMT Arabic',sans-serif; line-height:1; color:var(--noir); direction:ltr; display:inline-block}
.fee .big.accent{color:var(--bronze-d)}
.fee .t{font-weight:800; font-size:15px; margin-top:6px}
.fee .d{font-size:13.5px; color:var(--ink-2); font-weight:600; margin-top:2px}
.fee-incl{margin:14px 0 0; font-size:14px; font-weight:600; color:#35342F}
.fee-incl strong{color:var(--noir)}

/* pack équipement */
.kit{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kit-it{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:16px 8px 14px; border:1.5px solid var(--line); border-radius:14px; background:#fff}
.kit-ic{width:54px; height:54px; display:grid; place-items:center; color:var(--noir); font-size:24px}
.kit-ic svg{width:30px; height:30px}
.kit-it span{font-weight:800; font-size:13.5px}
.kit-it small{font:700 12px 'CSMT Arabic',sans-serif; color:var(--ink-2); letter-spacing:.06em}

/* dossier */
.docs{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.docs li{display:flex; align-items:flex-start; gap:10px; font-weight:700; font-size:14.5px; padding:11px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--pierre-2)}
.docs li i{color:var(--bronze); margin-top:4px}
.docs li small{display:block; color:var(--ink-2); font-weight:600; font-size:12.5px}

/* ============ PHOTO ============ */
.photo-pick{border:2px dashed #C9C6BD; border-radius:18px; background:var(--pierre-2);
  padding:22px; display:flex; align-items:center; gap:20px; transition:.25s; cursor:pointer}
.photo-pick:hover,.photo-pick.drag{border-color:var(--noir); background:#fff}
.photo-pick.has{border-style:solid; border-color:var(--noir); background:#fff}
.pp-ring{flex:0 0 auto; width:96px; height:116px; border-radius:48px 48px 14px 14px; background:var(--noir); padding:3px}
.pp-ring .inner{width:100%; height:100%; border-radius:45px 45px 11px 11px; overflow:hidden; background:var(--noir-2);
  display:grid; place-items:center; color:#8E8B84; font-size:28px}
.pp-ring img{width:100%; height:100%; object-fit:cover; display:none}
.pp-ring.on img{display:block; animation:pop .35s cubic-bezier(.2,1.4,.4,1) both}
.pp-ring.on .icn{display:none}
.pp-body{flex:1; min-width:0}
.pp-title{font-weight:800; font-size:16px; margin-bottom:3px}
.pp-desc{font-size:13px; color:var(--ink-2)}
.pp-name{font-size:13px; font-weight:700; color:var(--noir); margin-top:6px; word-break:break-all; display:none}
.pp-actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.btn-pick{background:var(--noir); color:#fff; border:0; cursor:pointer;
  padding:11px 22px; border-radius:40px; font:800 14px 'CSMT Arabic',sans-serif; display:inline-flex; align-items:center; gap:9px}
.btn-pick i{color:var(--bronze-l)}
.btn-clear{background:#fff; color:var(--err); border:1.5px solid var(--err-line); padding:11px 18px; border-radius:40px;
  font:800 14px 'CSMT Arabic',sans-serif; cursor:pointer; display:none; align-items:center; gap:8px}
.btn-clear.on{display:inline-flex}

/* ============ LOI 18-07 ============ */
.legal{border:1px solid #E2D8C2; background:#FBF8F1; border-radius:16px; padding:20px 22px; margin-bottom:20px}
.legal-top{display:flex; align-items:center; gap:11px; font-weight:800; font-size:16px; margin-bottom:10px; color:var(--noir)}
.legal-top i{color:var(--bronze)}
.legal p{font-size:14px; color:#3A3629; margin:0 0 10px}
.legal ul{margin:0 0 8px; padding-inline-start:20px; font-size:14px; color:#3A3629}
.legal li{margin-bottom:5px}
.legal details summary{cursor:pointer; font-weight:800; color:var(--bronze-d); font-size:14px; list-style:none}
.legal details summary::-webkit-details-marker{display:none}
.legal details summary:before{content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:11px; margin-inline-end:8px; display:inline-block; transition:.25s}
.legal details[open] summary:before{transform:rotate(180deg)}
.legal details .body{margin-top:12px; border-top:1px solid #E9E0CB; padding-top:12px}
.consent{display:flex; gap:13px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-md);
  border:1.5px solid var(--line); background:#fff; margin-bottom:10px; cursor:pointer; transition:border-color .2s, background .2s}
.consent:hover{border-color:#B9B6AD}
.consent input{margin:3px 0 0; width:20px; height:20px; accent-color:var(--noir); flex:0 0 auto; cursor:pointer}
.consent .txt{font-size:14.2px; color:#262522; font-weight:600}
.consent .note{display:block; font-size:12.5px; color:var(--ink-2); margin-top:4px}
.consent .tag{display:inline-block; font-size:11px; font-weight:800; padding:2px 9px; border-radius:20px; margin-inline-start:8px; vertical-align:middle}
.tag-req{background:#FDE7EA; color:var(--err)}
.tag-opt{background:#F2ECDD; color:var(--bronze-d)}
.consent.checked{border-color:var(--noir); background:#FBFAF7}
.consent.err{border-color:var(--err); background:var(--err-bg); animation:shake .38s}
.guardian{display:none; border-top:2px dashed var(--line); margin-top:22px; padding-top:22px}
.guardian.on{display:block; animation:slide .4s ease both}
@keyframes slide{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}
.age-flag{display:none; align-items:center; gap:9px; background:#FBF6EA; border:1px solid #E6D6B0; color:#5E4A1E;
  padding:11px 15px; border-radius:12px; font-size:13.5px; font-weight:700; margin-bottom:18px}
.age-flag.on{display:flex; animation:slide .4s ease both}
.age-flag.adult{background:#F2F2EF; border-color:var(--line); color:var(--noir)}

/* ============ CARTE LICENCE ============ */
.aside{position:sticky; top:96px}
.card{border-radius:22px; padding:3px; background:var(--noir); box-shadow:0 30px 56px -30px rgba(0,0,0,.9)}
.card-in{border-radius:19px; overflow:hidden; position:relative; background:#fff}
.card-top{position:relative; padding:30px 20px 18px; text-align:center; color:#fff; background:var(--noir)}
.card-top:before{content:""; position:absolute; top:0; left:0; right:0; height:12px;
  background:linear-gradient(90deg, #fff 0 50%, transparent 50% 100%) 0 0 / 26px 100% repeat-x}
.card-top > *{position:relative; z-index:2}
.card-badge{display:flex; align-items:center; justify-content:center; gap:10px; direction:ltr;
  font:800 14px 'CSMT Arabic',sans-serif; letter-spacing:.1em; color:var(--bronze-l); text-transform:uppercase}
.card-badge img{width:30px; height:30px; object-fit:contain; mix-blend-mode:screen}
.card-avatar{width:112px; height:134px; margin:14px auto 10px; border-radius:56px 56px 16px 16px; padding:3px; background:#fff}
.card-avatar .in{width:100%; height:100%; border-radius:53px 53px 13px 13px; overflow:hidden; background:var(--noir-2); display:grid; place-items:center; color:#8E8B84; font-size:34px}
.card-avatar img{width:100%; height:100%; object-fit:cover; display:none}
.card-avatar.on img{display:block}
.card-avatar.on .icn{display:none}
.card-name{font-family:'CSMT Arabic',sans-serif; font-weight:700; font-size:19px; min-height:26px}
.card-poste{display:inline-block; margin-top:9px; padding:5px 16px; border-radius:30px; background:#fff; color:var(--noir); font-weight:800; font-size:13px}
.card-body{padding:14px 20px 20px}
.card-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px}
.card-row .k{color:var(--ink-2); font-weight:700; flex:0 0 auto}
.card-row .v{font-weight:800; color:var(--ink); text-align:left}
.card-row .v.num{font-family:'CSMT Arabic',sans-serif; font-size:17px; letter-spacing:.04em}
.card-meter{margin-top:12px}
.card-meter .lbl{display:flex; justify-content:space-between; font-size:12px; font-weight:800; color:var(--ink-2); margin-bottom:6px}
.card-meter .bar{height:8px; border-radius:20px; background:#EEEDE9; overflow:hidden}
.card-meter .bar span{display:block; height:100%; width:0; background:var(--noir); transition:width .5s cubic-bezier(.2,.8,.25,1)}
.card-foot{display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:13px; border-top:2px solid #F1F0EC}
.card-foot .qr{flex:0 0 auto; width:44px; height:44px; border-radius:10px; background:var(--noir); color:var(--bronze-l); display:grid; place-items:center; font-size:20px}
.card-foot small{font-size:11.5px; color:var(--ink-2); font-weight:600; line-height:1.45}
.card-note{text-align:center; font-size:12px; color:var(--ink-2); margin-top:12px; font-weight:600}

/* ============ SOUMISSION ============ */
.submit-zone{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow); text-align:center}
.btn-submit{width:100%; max-width:430px; border:0; cursor:pointer;
  background:var(--noir); color:#fff; padding:17px 30px; border-radius:44px; font:800 18px 'CSMT Arabic',sans-serif;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  box-shadow:inset 0 -4px 0 var(--bronze); transition:transform .2s, background .2s}
.btn-submit i{color:var(--bronze-l)}
.btn-submit:hover{transform:translateY(-2px); background:var(--noir-2)}
.btn-submit:disabled{opacity:.7; cursor:wait; transform:none}
.form-alert{display:none; background:var(--err-bg); border:1px solid var(--err-line); color:#9E0C24; border-radius:14px;
  padding:13px 16px; font-weight:700; font-size:14px; margin-bottom:16px; text-align:right}
.form-alert.on{display:block; animation:slide .35s both}
.alert-err{background:var(--err-bg); border:1px solid var(--err-line); color:#9E0C24; border-radius:14px; padding:15px; font-weight:800; text-align:center; margin-bottom:22px}
.alert-warn{background:#FBF6EA; border:1px solid #E6D6B0; color:#5E4A1E; border-radius:14px; padding:14px; font-weight:800; text-align:center; margin-bottom:22px; font-size:14px}

/* ============ PIED ============ */
.foot{background:var(--noir); color:#CFCDC6; font-size:13.5px}
.foot .wall{transform:scaleY(-1)}
.foot-in{max-width:1180px; margin:0 auto; padding:30px 26px 36px; display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center}
.foot strong{color:#fff}
.foot a{color:var(--bronze-l)}
.foot .fr{direction:ltr; display:inline-block; font-family:'CSMT Arabic',sans-serif; letter-spacing:.05em; color:var(--bronze-l)}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr; text-align:center; gap:10px}
  .wordmark{text-align:center}
  .intro{margin-inline:auto}
  .hero-cta,.facts{justify-content:center}
  .crest-wrap{order:-1; min-height:260px}
  .layout{grid-template-columns:1fr}
  .aside{position:static; order:2; margin-top:4px}
  .card{max-width:420px; margin:0 auto}
}
@media (max-width:620px){
  :root{--merlon:26px}
  .topbar{padding:9px 14px}
  .top-year{display:none}
  .prog{top:66px}
  .brand .nm{font-size:14.5px}
  .brand img{width:42px; height:42px}
  .hero{padding:22px 18px 0}
  .hero-grid{padding-bottom:44px}
  .hero h1{font-size:32px}
  .crest,.crest-fb{width:210px}
  .crest-wrap{min-height:220px}
  .hero-cta .btn-cta{width:100%; max-width:330px; justify-content:center}
  .fact{font-size:12.5px; padding:7px 12px}
  .sheet{padding:0 14px 50px; margin-top:24px}
  .panel{padding:22px 18px 26px; border-radius:16px}
  .grid2,.fees{grid-template-columns:1fr}
  .kit{grid-template-columns:repeat(2,1fr)}
  .seg.three{grid-template-columns:1fr}
  .photo-pick{flex-direction:column; text-align:center}
  .pp-actions{justify-content:center}
  .announce-in{padding:20px 18px 22px}
  .announce-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html.js .panel{opacity:1; transform:none}
}

/* ============ TAGLINE / MOTTO ============ */
.tagline{margin:0 0 16px; color:var(--bronze-l); font-family:'CSMT Arabic',sans-serif; font-weight:600; font-size:clamp(15px,1.6vw,18px)}
.hero-motto{display:inline-flex; align-items:center; gap:6px; color:#E9E7E1; font-weight:700; font-size:14px}
.hero-motto .lat{color:var(--bronze-l); font-size:15px}

/* ============ ANNONCE DE RENTRÉE ============ */
.announce{position:relative; z-index:20; margin:34px auto 0; max-width:1180px; padding:0 20px}
.announce-in{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:28px 30px 30px}
.announce-head{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.announce-badge{display:inline-flex; align-items:center; gap:8px; background:var(--noir); color:var(--bronze-l);
  font:800 12.5px 'CSMT Arabic',sans-serif; padding:6px 14px; border-radius:30px; white-space:nowrap}
.announce-head h2{margin:0; font-size:21px; color:var(--ink)}
.announce-lead{font-size:15px; color:#35342F; font-weight:500; margin:0 0 20px}
.announce-lead strong{color:var(--noir)}
.announce-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px}
.announce-card{border:1.5px solid var(--line); background:var(--pierre-2); border-radius:14px; padding:16px 18px}
.announce-card .ac-t{display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--noir); margin-bottom:8px}
.announce-card .ac-t i{color:var(--bronze)}
.announce-card p{margin:2px 0; font-size:14px; font-weight:600; color:#35342F}
.announce-card a{color:var(--noir); text-decoration:none}
.announce-cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:14px}
.ac-cat{border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--pierre-2); display:flex; flex-direction:column; gap:4px}
.ac-cat .t{font-family:'CSMT Arabic',sans-serif; font-weight:700; font-size:15.5px; color:var(--ink)}
.ac-cat .y{font-size:13px; font-weight:600; color:var(--ink-2)}
.ac-cat .tag{align-self:flex-start; font-size:11.5px; font-weight:800; color:var(--bronze-d); background:#F2ECDD; padding:3px 10px; border-radius:20px; margin-top:2px}
.announce-foot{text-align:center; font-weight:700; color:var(--ink); background:var(--pierre-2); border:1px dashed var(--line);
  border-radius:14px; padding:12px; margin:0}

.registration-banner{background:#050505;color:#fff;display:flex;gap:40px;align-items:center;justify-content:space-between;padding:50px max(24px,calc((100vw - 1140px)/2));border-bottom:8px solid #b08a45}
.registration-banner h1{font-size:clamp(28px,4vw,48px);line-height:1.6;margin:12px 0}.registration-banner h1 span{color:#d9bc7e}.registration-banner img{width:150px;max-height:210px;object-fit:contain}.registration-banner a{color:#d9bc7e}.registration-banner p{max-width:630px}
.registration-summary{position:sticky;top:95px;text-align:center}.registration-summary ol{text-align:right;line-height:2.4}.summary-crest{width:75px}.registration-photo{width:110px;height:140px;object-fit:cover;margin-top:15px;border:2px solid #b08a45;border-radius:12px}
.validation{color:#b2192b;font-weight:700;font-size:14px}.confirmation{text-align:center}.confirmation strong{overflow-wrap:anywhere}.confirmation .panel-num{margin:auto}.registration-banner .lat{letter-spacing:.09em}.brand .sg{display:block}.btn-cta{cursor:pointer;margin-top:20px}.btn-cta:disabled{opacity:.5;cursor:wait}.guardian{display:block}.consent{margin-top:14px}.field{margin-top:12px}.top-year{color:white;text-decoration:none}[wire\:offline]{display:none}.registration-summary hr{border:0;border-top:1px solid #dddbd4}.ctl:focus-visible{outline:3px solid #b08a45;outline-offset:2px}.registration-summary .panel{padding:24px}.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.foot-in a{color:inherit}
@media(max-width:800px){.layout{display:block}.registration-summary{position:static}.registration-banner{padding:30px 20px;gap:15px}.registration-banner img{width:75px}.panel{padding:24px 18px}.grid2{grid-template-columns:1fr}.btn-cta{max-width:100%;font-size:14px}.brand .nm{font-size:13px}.topbar{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.registration-banner img{background:#fff;padding:12px;border-radius:18px}.brand img{mix-blend-mode:normal;background:#fff;padding:3px;border-radius:6px}