/* =========================================================================
   ESC Amiens — Espace candidature multilingue (FR / EN / 中文)
   Charte graphique reproduite depuis www.esc-amiens.com/candidater.html
   Couleurs : Rose #E5328A · Violet #34162F · Cyan #23B7D4
   Police   : Familjen Grotesk
   ========================================================================= */

:root{
  --rose:#E5328A;
  --rose-hover:#EA6BA4;
  --violet:#34162F;
  --cyan:#23B7D4;
  --cyan-fonce:#008ca8;
  --noir:#0B050A;
  --gris-barre:#D7D0D6;
  --gris-champ:#eee;
  --gris-placeholder:#b7b7b7;
  --blanc:#ffffff;
  --ombre:0px 0px 20px 0px #34162F1A;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:"Familjen Grotesk",sans-serif;
  color:var(--noir);
  background:#ffffff;
  line-height:1.5;
}

a{color:var(--rose);text-decoration:none;}
a:hover{text-decoration:underline;}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------- En-tête (blanc, logo SVG réel) ---------- */
.site-header{
  background:#fff;
  border-bottom:1px solid #efeaee;
  padding:8px 0;
  position:sticky;top:0;z-index:50;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.brand{display:inline-flex;align-items:center;padding:12px 0;}
.brand .logo{height:48px;width:auto;display:block;}

.header-right{display:flex;align-items:center;gap:18px;}

/* ---------- Méga-menu de navigation ---------- */
.main-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;}
.nav-item{position:static;}
.nav-top{
  font-family:inherit;
  background:none;border:none;cursor:pointer;
  color:var(--violet);font-weight:700;font-size:15px;
  padding:10px 14px;border-radius:6px;
  display:flex;align-items:center;gap:5px;
  transition:color .15s;
}
.nav-top:hover{color:var(--rose);}
.nav-top .caret{font-size:10px;opacity:.7;transition:transform .2s;}
.nav-item.open .nav-top{color:var(--rose);}
.nav-item.open .nav-top .caret{transform:rotate(180deg);}

.mega-panel{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  background:#fff;
  border-top:3px solid var(--rose);
  box-shadow:0 12px 24px rgba(52,22,47,.12);
  z-index:60;
}
.nav-item.open .mega-panel{display:block;animation:fadeIn .2s ease;}
.mega-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
  padding:28px 20px;
}
.mega-col-titre{
  display:block;font-weight:700;font-size:15px;color:var(--rose);
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #f0e7ed;
}
a.mega-col-titre:hover{text-decoration:underline;}
.mega-col ul{list-style:none;margin:0;padding:0;}
.mega-col li{margin-bottom:8px;}
.mega-col li a{color:#333;font-size:14px;line-height:1.35;display:block;text-decoration:none;}
.mega-col li a:hover{color:var(--rose);}

/* Hamburger (mobile) */
.burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:10px;}
.burger span{display:block;width:24px;height:2px;background:var(--violet);border-radius:2px;transition:.2s;}
.site-header.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.site-header.nav-open .burger span:nth-child(2){opacity:0;}
.site-header.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.bouton-cta{
  background:var(--cyan);
  color:#fff !important;
  font-weight:600;
  padding:11px 22px;
  border-radius:6px;
  font-size:15px;
  text-decoration:none;
  transition:background .15s;
  white-space:nowrap;
}
.bouton-cta:hover{background:var(--rose);text-decoration:none;}

.lang-switch{display:flex;gap:6px;}
.lang-switch button{
  font-family:inherit;
  background:#fff;
  border:1px solid #d7cfd5;
  color:var(--violet);
  padding:7px 14px;
  border-radius:20px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  transition:all .15s;
}
.lang-switch button:hover{border-color:var(--rose);color:var(--rose);}
.lang-switch button.active{
  background:var(--rose);
  border-color:var(--rose);
  color:#fff;
}

/* ---------- Bandeau titre ---------- */
.candidature-espace-h1{
  margin:40px 0 30px;
}
.candidature-espace-h1 h1{
  font-size:34px;
  font-weight:700;
  color:var(--violet);
  margin:0 0 8px;
}
.candidature-espace-h1 a{font-size:18px;color:var(--rose);}

/* ---------- Barre de progression ---------- */
.candidature-barre-progression{
  display:flex;
  margin:0 0 10px;
}
.candidature-barre-progression-etape{
  height:5px;
  width:100%;
  background:var(--gris-barre);
  margin-right:8px;
  border-radius:3px;
  transition:background .3s;
}
.candidature-barre-progression-etape:last-child{margin-right:0;}
.candidature-barre-progression-etape.active,
.candidature-barre-progression-etape.valide{background:var(--rose);}

.candidature-titre-etape{
  color:var(--rose);
  font-weight:600;
  font-size:18px;
  margin:0 0 24px;
}

/* ---------- Carte d'étape ---------- */
.col-etape{
  background:#fff;
  padding:35px 40px;
  box-shadow:var(--ombre);
  border-radius:8px;
  margin-bottom:60px;
}

.form-etape{display:none;}
.form-etape.active{display:block;animation:fadeIn .35s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.form-etape h2{
  font-family:inherit;
  color:var(--noir);
  font-weight:600;
  font-size:22px;
  margin:36px 0 20px;
  padding-bottom:8px;
  border-bottom:2px solid var(--rose);
}
.form-etape h2:first-of-type{margin-top:0;}
.form-etape h3{font-size:16px;color:var(--violet);margin:0 0 10px;font-weight:600;}
.form-etape p{color:#333;}

/* ---------- Grille de champs ---------- */
.row-champs{
  display:flex;
  flex-wrap:wrap;
  gap:0 24px;
}
.div-champ{
  position:relative;
  flex:1 1 100%;
  margin-bottom:22px;
}
.div-champ.col-6{flex:1 1 calc(50% - 12px);}
.div-champ.col-4{flex:1 1 calc(33.333% - 16px);}
.div-champ.col-3{flex:1 1 calc(25% - 18px);}

label{
  display:block;
  font-size:16px;
  font-weight:500;
  margin-bottom:8px;
  min-height:20px;
}
label .req{color:var(--rose);font-weight:700;margin-left:2px;}

/* ---------- Champs ---------- */
.form-control{
  width:100%;
  background:var(--gris-champ);
  border:2px solid transparent;
  border-radius:8px;
  padding:12px 16px;
  font-family:inherit;
  font-size:16px;
  color:var(--noir);
  outline:none;
  transition:border-color .15s,background .15s;
}
.form-control::placeholder{color:var(--gris-placeholder);}
.form-control:focus{border-color:var(--cyan);background:#fff;}
.form-control.is-invalid{border-color:var(--rose);background:#fff;}
.form-control.is-valid{border-color:#28a745;}

select.form-control{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2334162F' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:42px;
  cursor:pointer;
}
textarea.form-control{min-height:120px;resize:vertical;line-height:1.5;}

/* groupe téléphone */
.tel-group{display:flex;gap:8px;}
.tel-group input[type=tel]{flex:1;}

/* ---------- Sélecteur d'indicatif (drapeau + recherche) ---------- */
.iti{position:relative;flex:0 0 auto;}
.iti-current{
  display:flex;align-items:center;gap:7px;
  height:100%;min-height:48px;
  background:var(--gris-champ);
  border:2px solid transparent;border-radius:8px;
  padding:0 14px;cursor:pointer;font-family:inherit;font-size:16px;
  transition:border-color .15s,background .15s;
}
.iti.open .iti-current,.iti-current:focus{border-color:var(--cyan);background:#fff;outline:none;}
.iti-flag{font-size:20px;line-height:1;}
.iti-dial{font-weight:600;color:var(--noir);}
.iti-caret{font-size:10px;opacity:.6;margin-left:2px;}

.iti-dropdown{
  display:none;
  position:absolute;top:calc(100% + 4px);left:0;z-index:70;
  width:320px;max-width:80vw;
  background:#fff;border:1px solid #e7dfe4;border-radius:10px;
  box-shadow:0 12px 28px rgba(52,22,47,.18);
  overflow:hidden;
}
.iti.open .iti-dropdown{display:block;animation:fadeIn .15s ease;}
.iti-search{
  width:100%;border:none;border-bottom:1px solid #eee;border-radius:0;
  background:#fafafa;margin:0;padding:12px 14px;font-size:15px;
}
.iti-search:focus{border-color:var(--cyan);background:#fff;}
.iti-list{list-style:none;margin:0;padding:6px;max-height:280px;overflow-y:auto;}
.iti-list li{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:6px;cursor:pointer;font-size:15px;
}
.iti-list li:hover{background:#fdeef5;}
.iti-list li.selected{background:#fbe3ef;}
.iti-list .iti-flag{font-size:20px;}
.iti-list .iti-name{flex:1;color:var(--noir);}
.iti-list .iti-code{color:#888;font-weight:600;}
.iti-list:empty::after{content:"—";display:block;text-align:center;color:#bbb;padding:16px;}

/* ---------- Combobox recherchable générique (Nationalité, Pays) ---------- */
.combo{position:relative;}
.combo-current{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--gris-champ);border:2px solid transparent;border-radius:8px;
  padding:12px 16px;font-family:inherit;font-size:16px;cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s;
}
.combo.open .combo-current,.combo-current:focus{border-color:var(--cyan);background:#fff;outline:none;}
.combo-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.combo-label.placeholder{color:var(--gris-placeholder);}
.combo-flag{font-size:18px;}
.combo-caret{font-size:10px;opacity:.6;flex:0 0 auto;}
.div-champ.has-error .combo-current{border-color:var(--rose);background:#fff;}

.combo-dropdown{
  display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:70;
  background:#fff;border:1px solid #e7dfe4;border-radius:10px;
  box-shadow:0 12px 28px rgba(52,22,47,.18);overflow:hidden;
}
.combo.open .combo-dropdown{display:block;animation:fadeIn .15s ease;}
.combo-search{width:100%;border:none;border-bottom:1px solid #eee;border-radius:0;background:#fafafa;margin:0;padding:12px 14px;font-size:15px;}
.combo-search:focus{border-color:var(--cyan);background:#fff;}
.combo-list{list-style:none;margin:0;padding:6px;max-height:260px;overflow-y:auto;}
.combo-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;cursor:pointer;font-size:15px;}
.combo-list li:hover{background:#fdeef5;}
.combo-list li.selected{background:#fbe3ef;}
.combo-list:empty::after{content:"—";display:block;text-align:center;color:#bbb;padding:16px;}

/* ---------- Cases à cocher multi-réponses (Comment connu l'ESC) ---------- */
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.check-pill{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  border:2px solid #e6dfe4;border-radius:8px;padding:10px 14px;font-size:15px;font-weight:500;
  transition:all .15s;margin:0;
}
.check-pill:hover{border-color:var(--cyan);}
.check-pill input{width:18px;height:18px;accent-color:var(--rose);margin:0;flex:0 0 auto;}
.check-pill:has(input:checked){border-color:var(--rose);background:#fdeef5;}

/* ---------- Légende champs obligatoires ---------- */
.champ-requis-legende{font-size:14px;color:#777;margin:-4px 0 18px;}
.champ-requis-legende .req{color:var(--rose);font-weight:700;}

/* ---------- Champ de cascade verrouillé ---------- */
.form-control:disabled,select:disabled{opacity:.55;cursor:not-allowed;background:#f0ecef;}

/* ---------- Radios / checkboxes (style boutons) ---------- */
.options-inline{display:flex;flex-wrap:wrap;gap:10px;}
.opt{
  position:relative;
}
.opt input[type=radio],
.opt input[type=checkbox]{position:absolute;opacity:0;pointer-events:none;}
.opt label{
  display:inline-block;
  margin:0;
  padding:10px 22px;
  border:2px solid #ddd;
  border-radius:24px;
  cursor:pointer;
  font-weight:500;
  transition:all .15s;
  background:#fff;
}
.opt input:checked + label{
  border-color:var(--rose);
  background:var(--rose);
  color:#fff;
}
.opt input:focus-visible + label{outline:2px solid var(--cyan);outline-offset:2px;}

.check-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.check-row input[type=checkbox]{width:18px;height:18px;margin-top:3px;accent-color:var(--rose);flex:0 0 auto;}
.check-row label{margin:0;font-weight:400;}

/* ---------- Upload de fichier ---------- */
.file-field{
  border:2px dashed #cdbcc8;
  border-radius:8px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fafafa;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.file-field:hover{border-color:var(--cyan);background:#fff;}
.file-field input[type=file]{display:none;}
.file-field .file-btn{
  background:var(--cyan);color:#fff;border-radius:6px;
  padding:7px 14px;font-size:14px;white-space:nowrap;font-weight:500;
}
.file-field .file-name{color:#666;font-size:14px;overflow:hidden;text-overflow:ellipsis;}
.file-field.filled{border-style:solid;border-color:#28a745;}
.file-field.filled .file-name{color:var(--noir);}

/* ---------- Encart « répondez en FR/EN » ---------- */
.notice-lang{
  display:flex;gap:10px;align-items:flex-start;
  background:#fdeef5;
  border-left:4px solid var(--rose);
  border-radius:0 6px 6px 0;
  padding:10px 14px;
  margin:0 0 10px;
  font-size:14px;
  color:var(--violet);
}
.notice-lang .ico{flex:0 0 auto;font-weight:700;}

.help{font-size:13px;color:#777;margin-top:6px;}

/* ---------- Messages d'erreur ---------- */
.invalid-feedback{
  display:none;
  color:var(--rose);
  font-size:13px;
  margin-top:6px;
}
.div-champ.has-error .invalid-feedback{display:block;}

/* ---------- Sous-blocs (langues, parents) ---------- */
.subgrid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}
.lang-table{width:100%;border-collapse:collapse;}
.lang-table th{text-align:left;font-size:14px;color:var(--violet);padding:8px;font-weight:600;}
.lang-table td{padding:6px 8px;}
.lang-table td:first-child{font-weight:500;width:130px;}

/* ---------- Navigation ---------- */
.form-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:36px;
  gap:14px;
  flex-wrap:wrap;
}
.bouton-bleu{
  font-family:inherit;
  background:var(--cyan);
  color:#fff;
  border:none;
  padding:12px 28px;
  min-height:46px;
  border-radius:6px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.bouton-bleu:hover{background:var(--rose-hover);}
.bouton-rouge{
  background:var(--rose);color:#fff;border:none;
  padding:12px 32px;min-height:46px;border-radius:6px;
  font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:background .15s;
}
.bouton-rouge:hover{background:#c81f73;}
.precedent-lien{
  font-weight:400;font-size:16px;cursor:pointer;
  text-decoration:underline;color:var(--violet);
  background:none;border:none;font-family:inherit;padding:12px 0;
}
.precedent-lien[hidden]{display:none;}

.save-draft{
  background:none;border:1px solid var(--cyan);color:var(--cyan-fonce);
  padding:10px 18px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:14px;
}
.save-draft:hover{background:var(--cyan);color:#fff;}

/* ---------- Reprise de dossier ---------- */
.resume-box{
  background:#eaf7fa;
  border:1px solid var(--cyan);
  border-radius:8px;
  padding:18px 20px;
  margin-bottom:30px;
}
.resume-box h2{border:none;margin:0 0 12px;font-size:18px;}
.resume-box .inline{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.resume-box .inline .div-champ{margin:0;flex:1 1 220px;}

/* ---------- Récapitulatif / confirmation ---------- */
.recap dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;}
.recap dt{font-weight:600;color:var(--violet);}
.recap dd{margin:0;}
.confirm-box{text-align:center;padding:40px 20px;}
.confirm-box .big-ico{
  width:80px;height:80px;border-radius:50%;background:var(--rose);
  display:grid;place-items:center;margin:0 auto 24px;color:#fff;font-size:40px;
}
.confirm-box .dossier{
  display:inline-block;background:var(--violet);color:#fff;
  padding:10px 22px;border-radius:8px;font-size:22px;font-weight:700;letter-spacing:2px;margin:14px 0;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--violet);
  color:#fff;
  padding:30px 0;
  text-align:center;
  font-size:14px;
  margin-top:40px;
}
.site-footer a{color:var(--cyan);}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  .div-champ.col-6,.div-champ.col-4,.div-champ.col-3{flex:1 1 100%;}
  .col-etape{padding:24px 20px;}
  .subgrid{grid-template-columns:1fr;}
  .candidature-espace-h1 h1{font-size:26px;}
  .form-nav{flex-direction:column-reverse;align-items:stretch;}
  .form-nav button{width:100%;}
}

/* ---------- Menu responsive (tablette/mobile) ---------- */
@media(max-width:1100px){
  .burger{display:flex;order:3;margin-left:auto;}
  .header-right{order:2;}
  .main-nav{
    order:4;flex-basis:100%;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid #efeaee;margin-top:8px;padding-top:8px;
    max-height:70vh;overflow-y:auto;
  }
  .site-header.nav-open .main-nav{display:flex;}
  .nav-top{width:100%;justify-content:space-between;padding:14px 8px;border-radius:0;border-bottom:1px solid #f4eef2;}
  .mega-panel{position:static;box-shadow:none;border-top:none;background:#faf7f9;}
  .mega-grid{grid-template-columns:1fr;gap:18px;padding:14px 12px;}
  .nav-item.open .mega-panel{animation:none;}
}
@media(max-width:600px){
  .bouton-cta{padding:9px 14px;font-size:13px;}
  .lang-switch button{padding:6px 10px;}
}

/* langue chinoise : police adaptée */
html[lang="zh"] body{font-family:"Familjen Grotesk","PingFang SC","Microsoft YaHei",sans-serif;}