/* Espace candidats : la porte depuis « Mise en relation » (accueil) et la page competences.html / en/skills.html.
   Mêmes jetons que style.css ; la couleur est celle de la facette Ressources (--dia). */
:root{--cd:#8A5A12;--cd-fond:#F3EDE3;--cd-trait:#D9CFC0;--cd-err:#8F2E20}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--cd:#E3B25A;--cd-fond:#202932;--cd-trait:#46525E;--cd-err:#F0A596}}
:root[data-theme="dark"]{--cd:#E3B25A;--cd-fond:#202932;--cd-trait:#46525E;--cd-err:#F0A596}

/* 1. Accueil, section Mise en relation (bande sombre) : le second chemin, pour les personnes */
.cand-bloc{margin-top:40px}
.cand-lien{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:10px 16px;border:1px solid var(--dia);border-radius:999px;color:var(--dia);font-weight:600;text-decoration:none;transition:background .2s}
.cand-lien:hover{background:rgba(201,147,46,.1)}
.cand-lien:focus-visible{outline:2px solid var(--dia);outline-offset:3px}
.cand-porte{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;padding:22px 26px;border:1px solid var(--mur);border-radius:16px;background:rgba(255,255,255,.04);color:var(--sur-encre);text-decoration:none;transition:border-color .2s,background .2s}
.cand-porte:hover{border-color:var(--dia);background:rgba(201,147,46,.08)}
.cand-porte:focus-visible{outline:2px solid var(--dia);outline-offset:3px}
.cand-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:2px solid var(--dia);color:var(--dia)}
.cand-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cand-t{display:grid;gap:4px;min-width:0}
.cand-t b{font-family:var(--titre);font-weight:500;font-size:1.45rem;line-height:1.2}
.ambition .cand-t span{color:var(--sur-encre-doux);font-size:1rem}
.cand-go{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap;padding:12px 18px;border-radius:999px;background:var(--dia);color:#1D2731}
.cand-go::after{content:"→";transition:transform .2s}
.cand-porte:hover .cand-go::after{transform:translateX(3px)}
.fo-cand{display:block;margin-top:8px;font-weight:400}
.fo-cand a{color:var(--dia)}
@media (max-width:700px){
  .cand-porte{grid-template-columns:auto minmax(0,1fr);padding:20px 18px;gap:16px}
  .cand-go{grid-column:1 / -1;justify-content:center}
  .cand-t b{font-size:1.25rem}
}

/* 2. La page candidats */
.cd .qp-f{color:var(--cd)}
.cd-gratuit{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--cd);color:var(--cd);font-weight:700}
.cd-gratuit::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#1D2731;font-size:.72rem}

/* trois temps, reliés : vous, l'organisation, votre accord */
.cd-temps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative;counter-reset:t}
.cd-temps::before{content:"";position:absolute;left:16%;right:16%;top:32px;height:2px;background:repeating-linear-gradient(90deg,var(--cd-trait) 0 8px,transparent 8px 14px)}
.cd-temps li{position:relative;display:grid;justify-items:center;align-content:start;text-align:center;gap:10px;counter-increment:t}
.cd-anneau{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface);border:3px solid var(--dia);color:var(--cd);box-shadow:0 0 0 6px var(--fond)}
.cd-anneau svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cd-temps b{font-size:1.02rem}
.cd-temps b::before{content:counter(t,decimal-leading-zero) " · ";color:var(--cd);font-weight:700}
.cd-temps span{color:var(--doux);font-size:.95rem;max-width:16em}

/* métiers : des exemples, pas une liste fermée */
.cd-metiers{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.qp .cd-metiers{display:flex;list-style:none;padding:0}
.cd-metiers li{padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--trait);font-weight:600;font-size:.92rem}

/* ce que nous ne faisons pas */
.cd-non{background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:22px 26px}
.cd-non ul{gap:12px}
.cd-non li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:baseline}
.cd-non li::before{content:"";width:12px;height:2px;background:var(--cd);transform:translateY(-4px)}

/* le formulaire */
.cd-form{scroll-margin-top:76px}
.cd-form form{display:grid;gap:16px;margin-top:18px;background:var(--cd-fond);border:0;border-radius:20px;padding:28px 30px 30px;box-shadow:none}
.cd-form .ligne{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cd-form input,.cd-form select,.cd-form textarea{background:var(--surface)}
.cd-form textarea{min-height:96px}
.cd-form ::placeholder{color:var(--doux);opacity:.85}
.cd-opt{font-weight:400;color:var(--doux)}
.cd-form button[type=submit]{justify-self:start;font:600 1rem/1 var(--police);padding:16px 24px;border:0;border-radius:8px;background:var(--accent);color:#1D2731;cursor:pointer;box-shadow:0 10px 28px -12px rgba(215,154,43,.8)}
.cd-form button[type=submit]:hover{filter:brightness(1.07)}
.cd-form button[type=submit]:disabled{opacity:.6;cursor:wait}
.cd-form button[type=submit]:focus-visible{outline:2px solid var(--texte);outline-offset:3px}
.cd-info{font-size:.86rem;line-height:1.5;color:var(--doux);max-width:46em}
.cd-info a{color:var(--cd)}
@media (max-width:700px){
  .cd-temps{grid-template-columns:1fr;gap:20px}
  .cd-temps::before{left:31px;right:auto;top:32px;bottom:32px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--cd-trait) 0 8px,transparent 8px 14px)}
  .cd-temps li{grid-template-columns:64px minmax(0,1fr);justify-items:start;text-align:left;column-gap:16px;row-gap:2px}
  .cd-anneau{grid-row:span 2}
  .cd-form form{padding:22px 18px 24px}
  .cd-form .ligne{grid-template-columns:1fr}
  .cd-form button[type=submit]{justify-self:stretch}
  .cd-non{padding:20px 18px}
}
.hero h1{font-size:clamp(1.95rem,3vw,2.6rem)}
@media (min-width:701px){.cd-temps li{grid-row:span 3;grid-template-rows:subgrid;row-gap:10px}}
.cd-puces{list-style:none;margin:-6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cd-puces:empty{display:none}
.cd-puces button{font:600 .92rem/1 var(--police);padding:9px 12px;border:1px solid var(--cd-trait);border-radius:999px;background:var(--surface);color:var(--texte);cursor:pointer}
.cd-puces button:hover{border-color:var(--cd)}
.cd-puces button:focus-visible{outline:2px solid var(--texte);outline-offset:2px}
.cd-form form .cd-puces{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:-6px 0 0;padding:0}
.cd-form form .cd-puces li{display:block;margin:0;padding:0;width:auto}
.cd-form form .cd-puces li::before{content:none}
.cd-apres{display:inline-block;margin-top:10px;font-weight:600;color:var(--texte)}
.qp-retour-bas{margin:28px 0 0}

/* Champs obligatoires, champs à corriger, confirmation d'envoi */
.cd-req{color:var(--cd);font-weight:700}
.cd-oblig{margin:0;font-size:.9rem;color:var(--doux)}
.cd-form input[aria-invalid=true],#besoin [aria-invalid=true]{border-color:#B3402F;box-shadow:0 0 0 2px rgba(179,64,47,.22)}
.cd-form .note:not(:empty):not(.ok),#besoin .note:not(:empty):not(.ok){color:var(--cd-err);font-weight:600;border-left:3px solid #B3402F;padding:10px 14px;background:var(--surface)}
/* Après l'envoi : le formulaire laisse la place à la confirmation */
.cd-form form.envoye>*:not(#c-note),#besoin.envoye>*:not(#f-note){display:none}
.cd-form #c-note:empty,#besoin #f-note:empty{display:none}
.cd-form form.envoye #c-note.ok,#besoin.envoye #f-note.ok{display:grid;justify-items:start;gap:12px;padding:30px 28px;font-size:1.12rem;line-height:1.5;border-left:0;border-radius:14px;background:var(--surface);border:2px solid var(--cd)}
.cd-form form.envoye #c-note.ok::before,#besoin.envoye #f-note.ok::before{content:"✓";display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#1D2731;font-size:1.3rem;font-weight:700}
.cd-form .cd-autre,#besoin .cd-autre{justify-self:start;font:600 .98rem/1 var(--police);padding:12px 18px;border-radius:8px;border:1.5px solid var(--cd);background:transparent;color:var(--cd);cursor:pointer}
#c-note{scroll-margin-top:110px}
#f-note{scroll-margin-top:110px}

/* en-tête : sur mobile, seuls « Mise en relation » et la langue restent (le logo ramène à l’accueil) */
@media (max-width:700px){.qp-barre .qp-nav li:nth-child(2),.qp-barre .qp-nav li:nth-child(4){display:none}}
