/* =====================================================================
     Proposition 2 « Onglets » (js/p2-onglets.js)
     D'après les onglets de la fiche de cours, de la FAQ et du catalogue du
     modèle Educeet : écrans courts, un onglet à la fois.
     ===================================================================== */

  /* ---------- Barre d'onglets commune ---------- */
  .p2-tabs{display:flex;gap:4px;padding:6px;border-radius:16px;background:var(--card);border:1px solid var(--line);
    box-shadow:0 10px 24px rgba(18,42,64,.07);overflow-x:auto;scrollbar-width:none;}
  .p2-tabs::-webkit-scrollbar{display:none;}
  .p2-tabs [role="tab"]{
    flex:1 0 auto;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 12px;border:0;border-radius:11px;background:none;cursor:pointer;white-space:nowrap;
    font-family:var(--da-heading);font-size:14px;font-weight:600;color:var(--muted);transition:background .2s ease,color .2s ease;
  }
  .p2-tabs [role="tab"]:hover{color:var(--ink);background:var(--paper-2);}
  .p2-tabs [role="tab"][aria-selected="true"]{background:var(--grad-1);color:#fff;}
  .p2-tabs [role="tab"][aria-selected="true"]::after{content:'';position:absolute;left:30%;right:30%;bottom:4px;height:2px;border-radius:2px;background:var(--gold);}
  .p2-tab-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--brand-ink);font-size:12px;flex:none;}
  .p2-tab-ic svg{width:15px;height:15px;}
  [aria-selected="true"] .p2-tab-ic{background:rgba(255,255,255,.14);color:var(--gold);}
  [data-state="ok"] .p2-tab-ic{box-shadow:0 0 0 2px var(--gold);}
  .p2-tab-badge:empty{display:none;}
  .p2-tab-badge{min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:grid;place-items:center;font-family:var(--ui-sans);font-size:11px;font-weight:700;
    background:var(--gold-soft);color:var(--gold-ink);}
  [aria-selected="true"] .p2-tab-badge{background:var(--gold);color:#12203a;}

  /* Pied d'onglet */
  .p2-next{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0 10px;}
  .p2-next .p2-go{margin-left:auto;}
  .p2-next [hidden]{display:none;}

  /* ---------- Mon CV : un onglet à la fois ---------- */
  .p2-cv-tabs{position:sticky;top:-26px;z-index:6;margin:-10px -12px 20px;}
  #editor[data-p2-tab="profil"] > [data-p2-tab]:not([data-p2-tab="profil"]),
  #editor[data-p2-tab="parcours"] > [data-p2-tab]:not([data-p2-tab="parcours"]),
  #editor[data-p2-tab="competences"] > [data-p2-tab]:not([data-p2-tab="competences"]),
  #editor[data-p2-tab="plus"] > [data-p2-tab]:not([data-p2-tab="plus"]),
  #editor[data-p2-tab="reglages"] > [data-p2-tab]:not([data-p2-tab="reglages"]){display:none;}
  @keyframes p2In{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion: no-preference){
    #editor > [data-p2-tab]{animation:p2In .35s ease both;}
    #letterEditor > [data-p2-tab]{animation:p2In .35s ease both;}
  }
  /* Champs : formulaires de la référence (ombre décalée sur les cartes). */
  #editor > .section,#letterEditor > .section{border-radius:18px;box-shadow:6px 6px 0 rgba(18,42,64,.08);}
  #editor :is(input,textarea,select),#letterEditor :is(input,textarea,select){background:var(--paper-2);border-color:transparent;border-radius:10px;}
  #editor :is(input,textarea,select):focus,#letterEditor :is(input,textarea,select):focus{background:var(--card);border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft);outline:none;}
  @media (max-width: 1024px){
    .p2-cv-tabs{top:0;margin:0 0 16px;}
    .p2-tabs [role="tab"]{flex-direction:column;gap:4px;padding:8px 10px;font-size:12px;}
  }

  /* ---------- Test ATS : grande carte à onglets ---------- */
  .p2-ats .ats-head{text-align:center;}
  .p2-ats .ats-head-text{margin:0 auto;}
  .p2-ats .ats-lede{margin-inline:auto;}
  .p2-ats .ats-privacy{justify-content:center;}
  .p2-ats-tabs{max-width:760px;margin:0 auto 22px;}
  .p2-ats .ats-grid{
    display:block;max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:22px;
    padding:30px;box-shadow:12px 12px 0 var(--grad-1);
  }
  .p2-ats[data-p2-tab="drop"] .ats-job,
  .p2-ats[data-p2-tab="drop"] aside.ats-layers,
  .p2-ats[data-p2-tab="job"] .ats-drop,
  .p2-ats[data-p2-tab="job"] aside.ats-layers,
  .p2-ats[data-p2-tab="layers"] .ats-grid-main{display:none;}
  .p2-ats[data-p2-tab="job"] .ats-job > summary{display:none;}
  .p2-ats[data-p2-tab="job"] .ats-job{border:0;padding:0;margin:0;background:none;}
  .p2-ats .ats-drop{border-radius:18px;min-height:240px;display:grid;}
  .p2-ats aside.ats-layers{background:none;border:0;box-shadow:none;padding:0;margin:0;position:static;}
  .p2-ats aside.ats-layers .ats-layers-title{text-align:center;font-size:22px;margin:0 0 18px;}
  .p2-ats[data-p2-tab="layers"] aside.ats-layers{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .p2-ats[data-p2-tab="layers"] .ats-layers-title{grid-column:1/-1;}
  .p2-ats aside.ats-layers .ats-layer{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0;}
  .p2-ats aside.ats-layers .ats-layer:last-child{grid-column:1/-1;}
  .p2-ats .ats-results{max-width:980px;margin-inline:auto;}
  @media (max-width: 700px){
    .p2-ats .ats-grid{padding:18px;box-shadow:7px 7px 0 var(--grad-1);}
    .p2-ats[data-p2-tab="layers"] aside.ats-layers{grid-template-columns:1fr;}
    .p2-ats-tabs [role="tab"]{flex-direction:column;gap:4px;font-size:12px;}
  }

  /* ---------- Lettre : onglets ---------- */
  .p2-letter-tabs{margin:0 0 22px;}
  #letterEditor[data-p2-tab="depart"] > [data-p2-tab]:not([data-p2-tab="depart"]),
  #letterEditor[data-p2-tab="dest"] > [data-p2-tab]:not([data-p2-tab="dest"]),
  #letterEditor[data-p2-tab="contenu"] > [data-p2-tab]:not([data-p2-tab="contenu"]),
  #letterEditor[data-p2-tab="fin"] > [data-p2-tab]:not([data-p2-tab="fin"]){display:none;}
  @media (max-width: 700px){ .p2-letter-tabs [role="tab"]{flex-direction:column;gap:4px;font-size:12px;} }

  /* ---------- Choix du modèle : aide au choix ---------- */
  .p2-quiz{position:relative;overflow:hidden;margin:0 0 30px;padding:26px 28px;border-radius:20px;background:var(--grad-1);color:#fff;
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px 24px;box-shadow:0 18px 40px rgba(18,42,64,.2);}
  .p2-quiz::after{content:'';position:absolute;right:-40px;bottom:-50px;width:170px;height:170px;opacity:.25;pointer-events:none;
    background:url('../assets/shapes/cercle-points-or.webp') center/contain no-repeat;}
  .p2-quiz-head{grid-column:1/-1;}
  .p2-quiz-kicker{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}
  .p2-quiz h3{margin:0;font-family:var(--da-heading);font-size:24px;}
  .p2-q-t{margin:0 0 10px;font-family:var(--da-heading);font-size:15px;font-weight:600;color:rgba(255,255,255,.9);}
  .p2-q-r{display:flex;flex-wrap:wrap;gap:6px;}
  .p2-q-r button{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;border-radius:99px;padding:7px 13px;cursor:pointer;
    font-family:var(--ui-sans);font-size:13px;font-weight:600;transition:all .2s ease;}
  .p2-q-r button:hover{border-color:var(--gold);}
  .p2-q-r button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#12203a;}
  .p2-quiz-res{grid-column:1/-1;margin:4px 0 0;font-size:14px;color:rgba(255,255,255,.85);position:relative;z-index:1;}
  .p2-quiz-res b{color:var(--gold);}
  .p2-quiz-reset{grid-column:1/-1;justify-self:start;background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;font-size:13px;padding:0;position:relative;z-index:1;}
  .p2-quiz-reset[hidden]{display:none;}
  .tpl-card.p2-reco{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft),0 18px 36px rgba(18,42,64,.12);}
  .p2-reco-tag{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;
    background:var(--gold);color:#12203a;font-size:12px;font-weight:700;box-shadow:0 6px 14px rgba(0,0,0,.2);}
  .p2-reco-tag::before{content:'★';font-size:11px;}
  @media (max-width: 900px){ .p2-quiz{grid-template-columns:1fr;padding:22px 20px;} }

  /* Retouches : les cinq onglets de l'éditeur tiennent dans sa largeur
     (icône au-dessus du libellé), et la carte du Test ATS prend toute sa
     largeur (son parent la centrait en la rétrécissant). */
  .p2-cv-tabs [role="tab"]{flex:1 1 0;min-width:0;flex-direction:column;gap:4px;padding:8px 4px;font-size:12px;}
  .p2-cv-tabs .p2-tab-t{max-width:100%;overflow:hidden;text-overflow:ellipsis;}
  .p2-cv-tabs .p2-tab-badge{position:absolute;top:4px;right:6px;min-width:18px;height:18px;font-size:10px;}
  .p2-ats .ats-grid,.p2-ats-tabs{width:100%;box-sizing:border-box;}
  /* Téléphone : tous les onglets tiennent sur la largeur, sans défilement. */
  @media (max-width: 700px){
    .p2-tabs [role="tab"]{flex:1 1 0;min-width:0;flex-direction:column;gap:4px;padding:8px 4px;font-size:11.5px;white-space:normal;text-align:center;line-height:1.2;}
  }