/* =====================================================================
     Proposition 3 « Tableau de bord » (js/p3-tableau.js), combinée à la
     proposition 2 : les onglets de la 2 structurent les écrans, la 3 ajoute
     la carte d'identité, les résultats ATS en tableau de bord, la lettre au
     centre, les filtres et l'agrandissement des modèles.
     D'après la fiche formateur, les colonnes latérales du blog, la page de
     contact et la galerie à agrandissement du modèle Educeet.
     ===================================================================== */

  /* ---------- Mon CV : carte d'identité dans l'onglet Profil ---------- */

  /* Carte d'identité (fiche formateur) */
  .p3-id{margin:0 0 22px;padding:20px;border-radius:18px;background:var(--card);border:1px solid var(--line);
    box-shadow:8px 8px 0 var(--grad-1);position:relative;overflow:hidden;}
  .p3-id::before{content:'';position:absolute;inset:0 0 auto 0;height:62px;background:linear-gradient(120deg,var(--grad-1),var(--grad-2));}
  .p3-id::after{content:'';position:absolute;right:-30px;top:-40px;width:120px;height:120px;opacity:.3;
    background:url('../assets/shapes/cercle-points-or.webp') center/contain no-repeat;}
  .p3-id-top{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:end;}
  .p3-id-photo{width:74px;height:74px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--gold);color:#12203a;
    font-family:var(--da-heading);font-size:26px;font-weight:700;border:4px solid var(--card);box-shadow:0 6px 16px rgba(0,0,0,.18);}
  .p3-id-photo img{width:100%;height:100%;object-fit:cover;}
  .p3-id-name{margin:0;font-family:var(--da-heading);font-size:20px;font-weight:700;line-height:1.15;color:var(--ink);overflow-wrap:anywhere;}
  .p3-id-job{margin:2px 0 0;font-size:13.5px;color:var(--gold-ink);font-weight:600;}
  .p3-id-ring{--p:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(closest-side,var(--card) 76%,transparent 78% 100%),conic-gradient(var(--gold) calc(var(--p)*1%),var(--line) 0);}
  .p3-id-ring b{font-family:var(--da-heading);font-size:15px;color:var(--brand-ink);}
  .p3-id-ring b::after{content:'%';font-size:9px;}
  .p3-id-contact{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
  .p3-id-contact li{font-size:12px;padding:4px 10px;border-radius:99px;background:var(--paper-2);color:var(--ink-2);overflow-wrap:anywhere;}
  .p3-id-stats{list-style:none;margin:14px 0 0;padding:12px 0 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px dashed var(--line);}
  .p3-id-stats li{text-align:center;border-left:1px solid var(--line);}
  .p3-id-stats li:first-child{border-left:0;}
  .p3-id-stats b{display:block;font-family:var(--da-heading);font-size:22px;color:var(--brand-ink);line-height:1;}
  .p3-id-stats span{font-size:11.5px;color:var(--muted);}
  .p3-id-model{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:10px 12px;border-radius:10px;
    background:var(--gold-soft);font-size:13px;color:var(--ink-2);}
  .p3-link{background:none;border:0;padding:0;cursor:pointer;font-family:var(--ui-sans);font-size:13px;font-weight:700;color:var(--brand-ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;}

  /* Panneaux : widgets de colonne latérale (titre souligné d'un filet). */
  #editor.p3-editor > .section{border-radius:16px;}
  #editor.p3-editor > .section > h2{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);position:relative;}
  #editor.p3-editor > .section > h2::after{content:'';position:absolute;left:0;bottom:-1px;width:44px;height:2px;background:var(--gold);}
  #editor.p3-editor > .section.collapsed > h2{border-bottom-color:transparent;margin-bottom:0;padding-bottom:0;}
  #editor.p3-editor > .section.collapsed > h2::after{display:none;}

  /* Jauge de longueur (résumé, lettre) */
  .p3-len{display:flex;align-items:center;gap:10px;margin:8px 0 0;font-size:12.5px;color:var(--muted);}
  .p3-len-bar{position:relative;flex:0 0 90px;height:6px;border-radius:99px;background:var(--line);overflow:hidden;}
  .p3-len-bar span{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:var(--gold);transition:width .3s ease;}
  .p3-len[data-etat="ok"] .p3-len-bar span{background:#2FA96A;}
  .p3-len[data-etat="ok"] .p3-len-txt{color:#1f7a4b;}
  .p3-len[data-etat="long"] .p3-len-bar span{background:#D98C1F;}

  /* Résultats en tableau de bord. Le verrou du rapport (paywall) garde son
     apparence : seuls le score, les jauges et « Optimiser » changent. */
  .p3-res .ats-results .ats-verdict{background:var(--grad-1);color:#fff;border:0;border-radius:22px;padding:28px 30px;position:relative;overflow:hidden;box-shadow:0 20px 44px rgba(18,42,64,.2);}
  .p3-res .ats-results .ats-verdict::after{content:'';position:absolute;right:-40px;bottom:-50px;width:170px;height:170px;opacity:.25;
    background:url('../assets/shapes/cercle-points-or.webp') center/contain no-repeat;pointer-events:none;}
  .p3-res .ats-verdict-title{color:#fff;font-family:var(--da-heading);font-size:24px;}
  .p3-res .ats-verdict-sub,.p3-res .ats-verdict-file{color:rgba(255,255,255,.75);}
  .p3-res .ats-gauge-num{color:#fff;}
  .p3-res .ats-gauge-track{stroke:rgba(255,255,255,.15);}
  .p3-res .ats-gauge-value{stroke:var(--gold);}
  .p3-res .ats-summary-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 16px;border-radius:14px;}
  .p3-res .ats-summary-pill b{display:block;font-family:var(--da-heading);font-size:26px;line-height:1;}
  .p3-res .ats-results .ats-layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;background:none;border:0;padding:0;margin:18px 0;}
  .p3-res .ats-layer-bar{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;position:relative;}
  .p3-res .ats-layer-label{display:block;font-family:var(--da-heading);font-size:16px;font-weight:700;margin:0 0 14px;}
  .p3-res .ats-layer-track{height:8px;border-radius:99px;background:var(--line);}
  .p3-res .ats-layer-fill{height:100%;border-radius:99px;background:var(--gold);}
  .p3-res .ats-layer-pct{position:absolute;right:16px;top:16px;font-family:var(--da-heading);font-size:18px;color:var(--brand-ink);}
  .p3-res .ats-optimize{border-radius:18px;border-left:5px solid var(--gold);}

  /* ---------- Lettre : la lettre au centre, les réglages en colonne ---------- */
  #letterSection .letter-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:30px;align-items:start;}
  #letterSection .letter-preview-wrap{order:-1;position:sticky;top:90px;min-width:0;}
  #letterSection .letter-editor{min-width:0;}
  #letterEditor > .section{border-radius:16px;}
  #letterEditor > .section > h2{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);position:relative;}
  #letterEditor > .section > h2::after{content:'';position:absolute;left:0;bottom:-1px;width:44px;height:2px;background:var(--gold);}
  #letterSection .letter-page{box-shadow:0 30px 60px rgba(18,42,64,.18),0 0 0 1px var(--line);border-radius:4px;}
  @media (max-width: 900px){
    #letterSection .letter-wrap{grid-template-columns:1fr;}
    #letterSection .letter-preview-wrap{order:0;position:static;}
  }

  /* ---------- Choix du modèle : filtres à gauche, agrandissement ---------- */
  .p3-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:26px;align-items:start;}
  .p3-filters{position:sticky;top:20px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 14px 30px rgba(18,42,64,.06);}
  .p3-filters-title{margin:0 0 6px;font-family:var(--da-heading);font-size:20px;font-weight:700;}
  .p3-filters fieldset{border:0;margin:0;padding:14px 0;border-bottom:1px solid var(--line);}
  .p3-filters legend{padding:0;margin:0 0 10px;font-family:var(--da-heading);font-size:15px;font-weight:600;position:relative;}
  .p3-filters label{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--ui-sans);font-size:14px;font-weight:500;color:var(--ink-2);text-transform:none;letter-spacing:0;cursor:pointer;}
  .p3-filters input{width:17px;height:17px;accent-color:var(--grad-1);}
  .p3-filters label span{flex:1;}
  .p3-filters em{font-style:normal;font-size:12px;color:var(--muted);background:var(--paper-2);border-radius:99px;padding:1px 8px;}
  .p3-reset{margin-top:14px;width:100%;border:1px solid var(--line);background:var(--paper-2);border-radius:10px;padding:9px;cursor:pointer;font-family:var(--ui-sans);font-size:13px;font-weight:600;color:var(--ink);}
  .p3-reset:hover{border-color:var(--gold);}
  .p3-layout .tpl-chooser-grid{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));}
  .tpl-card[hidden]{display:none !important;}
  .p3-zoom{position:absolute;inset:auto 10px 10px auto;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;border:0;cursor:pointer;
    background:var(--grad-1);color:#fff;font-family:var(--ui-sans);font-size:12.5px;font-weight:700;opacity:0;translate:0 6px;transition:opacity .2s ease,translate .2s ease;box-shadow:0 8px 18px rgba(0,0,0,.25);}
  .p3-zoom svg{width:15px;height:15px;}
  .tpl-card:hover .p3-zoom,.p3-zoom:focus-visible{opacity:1;translate:0 0;}
  @media (hover: none){ .p3-zoom{opacity:1;translate:0 0;} }
  @media (max-width: 900px){
    .p3-layout{grid-template-columns:1fr;}
    .p3-filters{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
    .p3-filters-title,.p3-reset{grid-column:1/-1;}
  }
  @media (max-width: 520px){ .p3-filters{grid-template-columns:1fr;} }

  .p3-lb{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(8,16,26,.86);padding:20px;}
  .p3-lb[hidden]{display:none;}
  .p3-lb-stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;width:min(760px,100%);}
  .p3-lb-view{grid-column:2;display:grid;place-items:center;max-height:74vh;}
  .p3-lb-view img{max-width:100%;max-height:74vh;height:auto;border-radius:8px;box-shadow:0 30px 70px rgba(0,0,0,.5);background:#fff;}
  .p3-lb-view .p3-lb-live{width:min(520px,70vw);margin:0;border-radius:8px;box-shadow:0 30px 70px rgba(0,0,0,.5);}
  .p3-lb-nav{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff;font-size:28px;line-height:1;cursor:pointer;}
  .p3-lb-nav:hover{background:var(--gold);border-color:var(--gold);color:#12203a;}
  .p3-lb-close{position:absolute;right:-6px;top:-54px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#12203a;font-size:26px;cursor:pointer;}
  .p3-lb-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#fff;border-radius:14px;padding:14px 18px;}
  .p3-lb-name{margin:0;font-family:var(--da-heading);font-size:20px;font-weight:700;color:#12203a;}
  .p3-lb-tag{margin:2px 0 0;font-size:13px;color:#5F6460;}
  @media (max-width: 600px){
    .p3-lb-stage{grid-template-columns:1fr 1fr;}
    .p3-lb-view{grid-column:1/-1;grid-row:1;}
    .p3-lb-prev{grid-row:2;justify-self:start;}
    .p3-lb-next{grid-row:2;justify-self:end;}
    .p3-lb-close{top:-50px;right:0;}
  }

  /* Carte d'identité : tout le haut sur fond bleu nuit, texte en clair (le
     nom sur deux lignes débordait du bandeau sur le fond blanc). */
  .p3-id::before{display:none;}
  .p3-id-top{margin:-20px -20px 0;padding:20px;background:linear-gradient(120deg,var(--grad-1),var(--grad-2));align-items:center;}
  .p3-id-name{color:#fff;}
  .p3-id-job{color:var(--gold);}
  .p3-id-ring{background:radial-gradient(closest-side,var(--grad-1) 76%,transparent 78% 100%),conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.18) 0);}
  .p3-id-ring b{color:#fff;}
  .p3-id::after{z-index:0;}
  .p3-id-top{position:relative;z-index:1;}
  .p3-id-stats span{font-size:11px;}

  /* Thème sombre : lien « Changer de modèle » lisible. */
  :root[data-theme="dark"] .p3-link{color:var(--gold);}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .p3-link{color:var(--gold);} }