/* Skills UP — Comptes rendus : feuille de styles principale (chargée via functions.php) */

:root{
  --su-ink:#1a1f3a; --su-text:#1a1f3a; --su-text-soft:#4a5168; --su-muted:#8b91a8;
  --su-divider:#e7e9f1; --su-rule:#d3d6e2;
  --su-paper:#f7f6fb; --su-paper-pure:#fff; --su-surface:#f0eef7;
  --su-accent:#5b6cd5; --su-accent-strong:#4453b8; --su-accent-soft:#e8eafc; --su-accent-glow:rgba(91,108,213,.18);
  --su-warm:#e8826a; --su-warm-soft:#fceee8;
  --su-valid:#4a9b7a; --su-valid-soft:#e6f3ed;
  --su-invalid:#d35a5a; --su-invalid-soft:#fae8e8;
  --su-radius:8px; --su-radius-md:12px; --su-radius-lg:16px; --su-radius-xl:24px;
  --su-shadow-sm:0 1px 2px rgba(26,31,58,.04),0 1px 1px rgba(26,31,58,.04);
  --su-shadow:0 2px 4px rgba(26,31,58,.04),0 4px 12px rgba(26,31,58,.06);
  --su-shadow-lg:0 8px 16px rgba(26,31,58,.08),0 4px 8px rgba(26,31,58,.04);
  --su-shadow-xl:0 24px 48px rgba(26,31,58,.12),0 8px 16px rgba(26,31,58,.06);
  --su-ease:cubic-bezier(.32,.72,.24,1); --su-fast:150ms var(--su-ease); --su-medium:250ms var(--su-ease);
  --su-nav-height:64px; --su-content-width:1100px; --su-prose-width:720px;
}

/* ===== Base ===== */
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Rajdhani',system-ui,-apple-system,sans-serif;
  color:var(--su-text); background:var(--su-paper);
  -webkit-font-smoothing:antialiased; line-height:1.6; font-size:16px;
}
h1,h2,h3,h4{font-family:'Orbitron',sans-serif; color:var(--su-ink); margin:0 0 .5em; letter-spacing:-.01em; line-height:1.2;}
p{margin:0 0 1em;}
a{color:var(--su-accent); text-decoration:none; transition:color var(--su-fast);}
a:hover{color:var(--su-accent-strong);}
img{max-width:100%; height:auto;}
code,pre{font-family:'JetBrains Mono',monospace;}
:focus-visible{outline:2px solid var(--su-accent); outline-offset:2px;}

.su-container{max-width:var(--su-content-width); margin:0 auto; padding:0 24px;}
.su-section{padding:80px 0;}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--su-accent); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 8px 0;}
.skip-link:focus{left:0; color:#fff;}
.screen-reader-text{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap;}

.su-eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:5px 14px;
  background:var(--su-accent-soft); color:var(--su-accent); border-radius:999px;
  font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.su-eyebrow::before{content:''; width:6px; height:6px; background:currentColor; border-radius:50%; animation:su-pulse 1.8s ease-in-out infinite;}
@keyframes su-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}

/* ===== Boutons ===== */
.su-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; border-radius:var(--su-radius);
  border:none; cursor:pointer; line-height:1; text-decoration:none;
  transition:transform var(--su-fast),box-shadow var(--su-fast),opacity var(--su-fast);
}
.su-btn:hover{transform:translateY(-1px);}
.su-btn--primary{background:linear-gradient(135deg,var(--su-accent) 0%,var(--su-accent-strong) 100%); color:#fff; box-shadow:0 2px 8px var(--su-accent-glow);}
.su-btn--primary:hover{box-shadow:var(--su-shadow-lg); color:#fff;}
.su-btn--ghost{background:var(--su-paper-pure); color:var(--su-accent); box-shadow:inset 0 0 0 1.5px var(--su-accent-soft);}
.su-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--su-accent);}
.su-btn--lg{padding:15px 30px; font-size:16px;}

/* ===== Badges de statut ===== */
.su-badge{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px; letter-spacing:.04em;
  border:1px solid var(--su-divider); background:var(--su-surface); color:var(--su-text-soft);}
.su-badge::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor;}
.su-badge.valide{color:var(--su-valid); background:var(--su-valid-soft); border-color:#bfe3d3;}
.su-badge.vu{color:var(--su-accent); background:var(--su-accent-soft); border-color:#c9cffb;}
.su-badge.a_completer{color:var(--su-warm); background:var(--su-warm-soft); border-color:#f6cfc3;}

/* ===== Notices ===== */
.su-notice{max-width:var(--su-content-width); margin:16px auto 0; padding:12px 16px; border-radius:var(--su-radius); border-left:4px solid var(--su-accent); background:var(--su-accent-soft); color:var(--su-accent-strong); font-weight:600;}
.su-notice--error{border-color:var(--su-invalid); background:var(--su-invalid-soft); color:var(--su-invalid);}
.su-notice--success{border-color:var(--su-valid); background:var(--su-valid-soft); color:var(--su-valid);}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50; min-height:var(--su-nav-height);
  display:flex; align-items:center; background:rgba(247,246,251,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--su-divider); box-shadow:var(--su-shadow-sm);
}
.site-header__inner{max-width:var(--su-content-width); margin:0 auto; padding:10px 24px; width:100%; display:flex; align-items:center; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto;}
.brand__icon{
  width:36px; height:36px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg,var(--su-accent),var(--su-accent-strong));
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:13px; box-shadow:0 2px 8px var(--su-accent-glow);
}
.brand__name{font-family:'Orbitron',sans-serif; font-weight:700; font-size:17px; letter-spacing:.06em; text-transform:uppercase; color:var(--su-ink);}
.brand__name span{color:var(--su-accent);}
.custom-logo{display:block; max-height:44px; width:auto;}
.main-nav ul{list-style:none; display:flex; gap:4px; margin:0; padding:0;}
.main-nav a{display:block; padding:8px 12px; border-radius:var(--su-radius); color:var(--su-text-soft); font-weight:600; letter-spacing:.02em;}
.main-nav a:hover,.main-nav .current-menu-item>a{background:var(--su-accent-soft); color:var(--su-accent);}
.header-cta{display:flex; align-items:center; gap:10px;}
.nav-toggle{display:none; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--su-divider); border-radius:var(--su-radius); background:var(--su-paper-pure); color:var(--su-ink); cursor:pointer;}

@media(max-width:860px){
  .nav-toggle{display:inline-flex;}
  .main-nav{position:absolute; top:100%; left:0; right:0; background:var(--su-paper-pure); border-bottom:1px solid var(--su-divider); box-shadow:var(--su-shadow-lg); display:none;}
  .main-nav.is-open{display:block;}
  .main-nav ul{flex-direction:column; gap:0; padding:8px;}
  .main-nav a{padding:12px 14px;}
  .header-cta .su-btn--ghost{ display:none; }
  .header-cta .su-btn--primary{ padding:10px 14px; }
}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden; padding:96px 0 72px;
  background:
    radial-gradient(circle at 12% 18%,var(--su-accent-soft) 0%,transparent 45%),
    radial-gradient(circle at 88% 82%,var(--su-warm-soft) 0%,transparent 42%),
    var(--su-paper);
}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero__title{font-weight:900; font-size:clamp(32px,4.6vw,56px); line-height:1.1; margin:20px 0;}
.hero__title em{font-style:normal; background:linear-gradient(135deg,var(--su-accent) 0%,var(--su-warm) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.hero__sub{font-size:19px; color:var(--su-text-soft); max-width:540px; margin:0 0 32px; line-height:1.6;}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap;}
@media(max-width:860px){.hero__grid{grid-template-columns:1fr; gap:40px;}}

/* ===== Maquette compte rendu (signature) ===== */
.mockup{position:relative;}
.cr-card{background:var(--su-paper-pure); border:1px solid var(--su-divider); border-radius:var(--su-radius-lg); box-shadow:var(--su-shadow-xl); padding:22px; position:relative; z-index:2;}
.cr-card__top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.cr-card__who{display:flex; align-items:center; gap:10px;}
.cr-avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--su-accent),var(--su-warm)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Orbitron',sans-serif; font-weight:900; font-size:13px;}
.cr-card__name{font-family:'Orbitron',sans-serif; font-weight:700; font-size:14px; color:var(--su-ink);}
.cr-card__meta{font-size:13px; color:var(--su-muted); font-weight:600;}
.cr-row{margin:10px 0;}
.cr-row .lbl{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--su-muted);}
.cr-row .val{margin-top:3px; color:var(--su-text-soft); font-weight:500;}
.cr-bar{height:7px; border-radius:999px; background:var(--su-surface); margin-top:5px;}
.cr-bar span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--su-accent),var(--su-warm));}
.cr-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.cr-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--su-radius); background:var(--su-surface); color:var(--su-text-soft); font-weight:600; font-size:12.5px;}
.cr-mini{position:absolute; right:-18px; bottom:-26px; z-index:3; width:240px; background:var(--su-paper-pure); border:1px solid var(--su-divider); border-radius:var(--su-radius-md); box-shadow:var(--su-shadow-lg); padding:12px;}
.cr-mini__title{font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--su-muted); margin-bottom:8px;}
.cr-mini__line{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid var(--su-divider); font-size:13px; font-weight:600; color:var(--su-text-soft);}
.cr-mini__line:first-of-type{border-top:none;}
.cr-stack{position:absolute; inset:0; transform:rotate(-4deg) translate(-14px,16px); background:var(--su-paper-pure); border:1px solid var(--su-divider); border-radius:var(--su-radius-lg); box-shadow:var(--su-shadow); z-index:1;}
@media(max-width:520px){.cr-mini{display:none;}}

/* ===== Sections ===== */
.section-head{text-align:center; max-width:680px; margin:0 auto 48px;}
.section-head h2{font-size:clamp(26px,3.4vw,38px); font-weight:700;}
.section-head p{color:var(--su-text-soft); font-size:18px; margin:0;}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.feature{background:var(--su-paper-pure); border:1px solid var(--su-divider); border-radius:var(--su-radius-lg); padding:28px; box-shadow:var(--su-shadow-sm); transition:transform var(--su-medium),box-shadow var(--su-medium);}
.feature:hover{transform:translateY(-4px); box-shadow:var(--su-shadow-lg);}
.feature__icon{width:48px; height:48px; border-radius:var(--su-radius-md); margin-bottom:16px; display:flex; align-items:center; justify-content:center; font-size:22px; background:var(--su-accent-soft); color:var(--su-accent);}
.feature__icon.warm{background:var(--su-warm-soft); color:var(--su-warm);}
.feature__icon.valid{background:var(--su-valid-soft); color:var(--su-valid);}
.feature h3{font-size:19px; font-weight:700; margin-bottom:8px;}
.feature p{color:var(--su-text-soft); margin:0; font-size:15.5px;}
@media(max-width:820px){.features{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.features{grid-template-columns:1fr;}}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.step{position:relative; padding-top:20px;}
.step__num{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; color:var(--su-accent); letter-spacing:.1em;}
.step h3{font-size:20px; font-weight:700; margin:8px 0;}
.step p{color:var(--su-text-soft); margin:0;}
.step::before{content:''; position:absolute; top:0; left:0; width:40px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--su-accent),var(--su-warm));}
@media(max-width:720px){.steps{grid-template-columns:1fr;}}

.pillars{background:linear-gradient(135deg,var(--su-accent) 0%,var(--su-accent-strong) 100%); color:#fff;}
.pillars .su-section{padding:56px 0;}
.pillars__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.pillar strong{display:block; font-family:'Orbitron',sans-serif; font-size:20px; font-weight:900; margin-bottom:4px;}
.pillar span{opacity:.85; font-weight:600; letter-spacing:.03em;}
@media(max-width:720px){.pillars__grid{grid-template-columns:1fr 1fr; gap:32px 24px;}}

/* ===== CTA / formulaire ===== */
.cta{background:var(--su-surface);}
.cta__card{background:var(--su-paper-pure); border:1px solid var(--su-divider); border-radius:var(--su-radius-xl); box-shadow:var(--su-shadow-xl); padding:40px; max-width:760px; margin:0 auto;}
.cta__card h2{font-size:28px; font-weight:700; text-align:center;}
.cta__card p{text-align:center; color:var(--su-text-soft); margin:0 auto 28px; max-width:520px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-weight:700; font-size:13px; letter-spacing:.03em; color:var(--su-text-soft); text-transform:uppercase;}
.field input,.field select,.field textarea{
  padding:11px 14px; font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:600;
  color:var(--su-ink); background:var(--su-paper); border:1.5px solid var(--su-divider); border-radius:var(--su-radius);
  transition:border-color var(--su-fast),box-shadow var(--su-fast); width:100%;
}
.field input,.field select{height:44px;}
.field textarea{min-height:96px; resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--su-accent); box-shadow:0 0 0 3px var(--su-accent-glow);}
.form-actions{margin-top:8px; display:flex; justify-content:center;}
@media(max-width:560px){.form-grid{grid-template-columns:1fr;}}

/* ===== Contenu (pages, articles, blog) ===== */
.page-hero{padding:64px 0 0; text-align:center;}
.page-hero .su-eyebrow{margin-bottom:14px;}
.page-hero h1{font-size:clamp(28px,4vw,44px);}
.entry{max-width:var(--su-prose-width); margin:0 auto; padding:48px 24px 80px;}
.entry-content{font-size:17px; color:var(--su-text-soft);}
.entry-content h2{margin-top:1.6em; font-size:26px;}
.entry-content h3{margin-top:1.4em; font-size:21px;}
.entry-content a{text-decoration:underline;}
.entry-content blockquote{margin:1.5em 0; padding:12px 20px; border-left:4px solid var(--su-accent); background:var(--su-surface); border-radius:0 var(--su-radius) var(--su-radius) 0;}
.entry-content img{border-radius:var(--su-radius-md);}
.entry-meta{color:var(--su-muted); font-weight:600; font-size:14px; margin-bottom:8px;}

.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:var(--su-content-width); margin:0 auto;}
@media(max-width:820px){.post-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.post-grid{grid-template-columns:1fr;}}
.card-post{background:var(--su-paper-pure); border:1px solid var(--su-divider); border-radius:var(--su-radius-lg); overflow:hidden; box-shadow:var(--su-shadow-sm); transition:transform var(--su-medium),box-shadow var(--su-medium); display:flex; flex-direction:column;}
.card-post:hover{transform:translateY(-4px); box-shadow:var(--su-shadow-lg);}
.card-post__thumb{aspect-ratio:16/9; background:var(--su-surface); overflow:hidden;}
.card-post__thumb img{width:100%; height:100%; object-fit:cover;}
.card-post__body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card-post__body h3{font-size:18px; margin:0;}
.card-post__excerpt{color:var(--su-text-soft); font-size:15px; margin:0;}

.pagination{display:flex; gap:8px; justify-content:center; margin-top:40px;}
.pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--su-divider); border-radius:var(--su-radius); background:var(--su-paper-pure); font-weight:700; color:var(--su-text-soft);}
.pagination .page-numbers.current{background:var(--su-accent); border-color:var(--su-accent); color:#fff;}

/* ===== Sidebar / widgets ===== */
.widget{margin-bottom:28px;}
.widget-title{font-size:16px; margin-bottom:12px;}
.widget ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}

/* ===== 404 ===== */
.error-404{text-align:center; padding:120px 24px;}
.error-404 .code{font-family:'Orbitron',sans-serif; font-weight:900; font-size:96px; background:linear-gradient(135deg,var(--su-accent),var(--su-warm)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

/* ===== Comments ===== */
.comments-area{max-width:var(--su-prose-width); margin:0 auto; padding:0 24px 80px;}
.comment-list{list-style:none; margin:0; padding:0;}
.comment-list li{padding:16px 0; border-top:1px solid var(--su-divider);}

/* ===== Footer ===== */
.site-footer{background:var(--su-ink); color:#cfd3e6; padding:56px 0 28px;}
.site-footer a{color:#cfd3e6;} .site-footer a:hover{color:#fff;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;}
.footer-brand .brand__name{color:#fff;}
.footer-brand p{color:#9aa0bd; max-width:320px; margin:14px 0 0;}
.footer-col-title{font-family:'Orbitron',sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#fff; margin:0 0 14px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.footer-bottom{margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:14px; color:#9aa0bd; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr; gap:28px;}}

@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}}

/* ===== Hero des pages CR : titre à gauche, maquette à droite ===== */
.page-hero--cr{ text-align:left; padding:56px 0 16px; overflow:visible; }
.page-hero--cr .su-eyebrow{ margin-bottom:14px; }
.page-hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.page-hero__text{ grid-column:1; }            /* titre : colonne de gauche */
.page-hero__media{ grid-column:2; }           /* maquette : colonne de droite */
.page-hero__text h1{ text-align:left; margin:0; }
.page-hero__media{ position:relative; width:100%; }
@media(max-width:980px){
  .page-hero__grid{ grid-template-columns:1.1fr .9fr; gap:32px; }
}
@media(max-width:760px){
  .page-hero--cr{ text-align:center; }
  .page-hero__grid{ grid-template-columns:1fr; gap:28px; }
  .page-hero--cr .su-eyebrow{ display:inline-flex; }
  .page-hero__text h1{ text-align:center; }
  .page-hero__media{ margin:0 auto; max-width:400px; }
}
@media(max-width:480px){
  .page-hero__media{ display:none; } /* maquette masquée sur très petit écran */
}