/* ==========================================================================
   INTIS MAROC — v4 : navigation complète + gabarits de pages intérieures
   Se charge APRÈS app.css. Aucune couleur nouvelle.
   ========================================================================== */

/* ---------------- header avec catégories ---------------- */
.topbar{ gap:24px; }
.mainnav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); margin-left:auto; }
.mainnav a{
  color:rgba(255,255,255,.66); text-decoration:none; font-size:.93rem; font-weight:500;
  position:relative; padding:6px 0; white-space:nowrap; transition:color .2s;
}
.mainnav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--sun); transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.mainnav a:hover{ color:#fff }
.mainnav a:hover::after, .mainnav a.active::after{ transform:scaleX(1) }
.mainnav a.active{ color:#fff }
.mainnav a.ext::after{ background:var(--teal) }
.topbar-right{ display:flex; align-items:center; gap:14px; }

.burger{
  display:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.24);
  border-radius:10px; background:none; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.burger i, .burger i::before, .burger i::after{
  content:""; display:block; width:17px; height:1.5px; background:#fff; position:relative;
  transition:transform .22s ease, opacity .22s ease;
}
.burger i::before{ position:absolute; top:-5.5px }
.burger i::after{ position:absolute; top:5.5px }
.nav-open .burger i{ background:transparent }
.nav-open .burger i::before{ transform:translateY(5.5px) rotate(45deg) }
.nav-open .burger i::after{ transform:translateY(-5.5px) rotate(-45deg) }

@media (max-width:1000px){
  .burger{ display:inline-flex }
  .mainnav{
    position:fixed; inset:74px 0 auto 0; background:var(--void);
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:8px var(--pad) 26px; border-top:1px solid rgba(255,255,255,.1);
    transform:translateY(-10px); opacity:0; visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav-open .mainnav{ opacity:1; visibility:visible; transform:none }
  .mainnav a{ padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:1.05rem }
  .mainnav a::after{ display:none }
  .topbar-right .top-cta{ display:none }
}

/* ---------------- entête de page intérieure ---------------- */
.phero{ padding:clamp(140px,20vh,220px) 0 clamp(60px,9vh,110px); position:relative; overflow:hidden; }
.phero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--sun),rgba(255,255,255,.06) 55%,transparent);
}
.phero .label{ margin-bottom:24px }
.phero h1{
  font-family:var(--font-display); font-weight:700; line-height:1.0; letter-spacing:-.035em;
  font-size:clamp(2.3rem,6.4vw,5rem); color:#fff; margin:0; max-width:17ch;
}
.phero p{ margin:28px 0 0; color:#A7AEC2; max-width:56ch; font-size:clamp(1rem,1.4vw,1.16rem); }
.crumb{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; color:#6E7689; margin:0 0 18px; text-transform:uppercase; }
.crumb a{ color:#6E7689; text-decoration:none } .crumb a:hover{ color:#fff }

/* ---------------- blocs génériques ---------------- */
.blk{ padding:clamp(64px,11vh,140px) 0; }
.blk + .blk{ border-top:1px solid rgba(255,255,255,.08) }
.blk-head{ max-width:52ch; margin-bottom:clamp(34px,6vh,60px) }
.blk-head .h2{ margin-top:16px }
.blk-head p{ color:#98A0B6; margin:18px 0 0 }

/* cartes : panneaux à filets, pas de boîtes arrondies */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.cards .c{ padding:36px 34px 36px 0; border-top:1px solid rgba(255,255,255,.14); }
.cards .c + .c{ padding-left:34px; border-left:1px solid rgba(255,255,255,.1) }
.cards .k{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sun); display:block; margin-bottom:16px;
}
.cards h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.25rem,2vw,1.6rem); color:#fff; margin:0 0 12px }
.cards p{ margin:0; color:#98A0B6; font-size:.97rem }
/* deux cartes : on resserre et on centre, sinon elles restent collees a gauche */
.cards-2{ grid-template-columns:repeat(2,1fr); max-width:940px; margin-inline:auto }
.cards-2 .c{ padding-right:30px }
.cards-2 .c + .c{ padding-left:30px }
@media (max-width:900px){
  .cards, .cards-2{ grid-template-columns:1fr }
  .cards .c, .cards .c + .c,
  .cards-2 .c, .cards-2 .c + .c{ padding:28px 0; border-left:0 }
}

/* pastilles cliquables du pied de page */
a.chip{ text-decoration:none; transition:border-color .18s, color .18s }
a.chip:hover{ border-color:var(--sun); color:#fff }
.foot-france a{ color:#6E7689; text-decoration:none; transition:color .18s }
.foot-france a:hover{ color:#fff }

/* étapes numérotées */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 26px }
.steps .s{ padding-top:26px; border-top:1px solid rgba(255,255,255,.14); position:relative }
.steps .s .n{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.16em; color:var(--teal);
  display:block; margin-bottom:14px;
}
.steps h3{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:#fff; margin:0 0 10px }
.steps p{ margin:0; color:#98A0B6; font-size:.94rem }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; gap:0 } .steps .s{ padding:26px 0 } }

/* deux colonnes texte + liste */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,6vw,80px); align-items:start }
.split .txt p{ color:#98A0B6; margin:18px 0 0; max-width:48ch }
.split .aside h3{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal); margin:0 0 22px; font-weight:500;
}
.split .aside li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 0; border-top:1px solid rgba(255,255,255,.1); color:#C2C8D8; font-size:.98rem;
}
.split .aside li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sun); margin-top:9px }
@media (max-width:900px){ .split{ grid-template-columns:1fr } }

/* ---------------- formulaire ---------------- */
.formwrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,6vw,80px); align-items:start }
@media (max-width:900px){ .formwrap{ grid-template-columns:1fr } }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.fgrid .full{ grid-column:1 / -1 }
@media (max-width:640px){ .fgrid{ grid-template-columns:1fr } }
.fgrid label{
  display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:#98A0B6; margin-bottom:9px;
}
.fgrid label .req{ color:var(--sun) }
.fgrid input, .fgrid select, .fgrid textarea{
  width:100%; padding:14px 16px; background:var(--void-2); color:#EDEFF5;
  border:1px solid rgba(255,255,255,.16); border-radius:8px;
  font-family:var(--font-body); font-size:1rem;
}
.fgrid textarea{ min-height:150px; resize:vertical }
.fgrid input:focus, .fgrid select:focus, .fgrid textarea:focus{
  outline:none; border-color:var(--sun); box-shadow:0 0 0 3px rgba(209,97,135,.22);
}
.fgrid .actions{ grid-column:1 / -1; display:flex; gap:16px; align-items:center; flex-wrap:wrap }
#form-note{ font-size:.9rem; color:#98A0B6; margin:0 }
.coords li{ padding:18px 0; border-top:1px solid rgba(255,255,255,.1) }
.coords .k{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:8px }
.coords a{ color:#EDEFF5; text-decoration:none } .coords a:hover{ color:var(--sun) }

/* ---------------- pied de page : mention France discrète ---------------- */
.foot-france{ color:#6E7689; font-size:.82rem; margin:12px 0 0 }

/* ---------------- cas d'usage : onglets par fonction ---------------- */
#usecases{ padding:clamp(70px,12vh,150px) 0; }
.uc-tabs{
  display:flex; gap:10px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:18px; margin-bottom:44px;
}
.uc-tabs::-webkit-scrollbar{ display:none }
.uc-tab{
  flex:0 0 auto; cursor:pointer; white-space:nowrap;
  background:none; border:1px solid rgba(255,255,255,.18); border-radius:999px;
  padding:11px 22px; color:#98A0B6;
  font-family:var(--font-body); font-size:.92rem; font-weight:500;
  transition:border-color .18s, color .18s, background .18s;
}
.uc-tab:hover{ color:#fff; border-color:rgba(255,255,255,.4) }
.uc-tab:focus-visible{ outline:2px solid var(--sun); outline-offset:2px }
.uc-tab.on{ background:var(--sun); border-color:var(--sun); color:#fff }

.uc-panel{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,70px); align-items:start }
/* indispensable : display:grid ci-dessus l'emporte sur la regle navigateur
   [hidden]{display:none}. Sans cette ligne, les cinq panneaux s'empilent. */
.uc-panel[hidden]{ display:none }
.uc-panel.on{ animation:ucIn .4s ease both }
@keyframes ucIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.uc-kicker{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal); margin:0 0 14px;
}
.uc-panel h3{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(1.6rem,3.4vw,2.5rem); color:#fff; margin:0 0 18px;
}
.uc-lead{ color:#A7AEC2; margin:0 0 26px; max-width:44ch; font-size:1.04rem }
.uc-more{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sun); text-decoration:none; display:inline-flex; gap:8px; transition:gap .18s, color .18s;
}
.uc-more:hover{ gap:14px; color:#fff }
.uc-list li{
  padding:18px 0; border-top:1px solid rgba(255,255,255,.1);
  color:#C2C8D8; font-size:1rem; display:grid; grid-template-columns:auto 1fr; gap:14px;
}
.uc-list li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sun); margin-top:10px }
.uc-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.1) }
/* emplacement reserve : se remplira quand une reference sera citable */
.uc-quote{
  margin:0 0 26px; padding-left:18px; border-left:2px solid var(--teal);
  color:#EDEFF5; font-size:1.02rem;
}
.uc-quote cite{ display:block; margin-top:10px; font-style:normal;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:#98A0B6 }
@media (max-width:900px){
  .uc-panel{ grid-template-columns:1fr; gap:26px }
  .uc-tabs{ margin-bottom:32px }
}

/* ---------------- auto-diagnostic ---------------- */
.diag-card{
  border:1px solid rgba(255,255,255,.14); background:var(--void-2);
  border-radius:14px; padding:clamp(26px,4vw,48px); min-height:420px;
}
.diag-lead{ font-size:clamp(1.1rem,2vw,1.4rem); color:#EDEFF5; max-width:42ch; margin:0 0 18px }
.diag-privacy{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
  color:#98A0B6; border-left:2px solid var(--teal); padding-left:14px; margin:0 0 30px; max-width:50ch;
}

.diag-top{ display:flex; align-items:center; gap:20px; margin-bottom:34px }
.diag-count{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em;
  color:#98A0B6; white-space:nowrap; text-transform:uppercase;
}
.diag-bar{ flex:1; height:2px; background:rgba(255,255,255,.14); overflow:hidden }
.diag-bar i{ display:block; height:100%; width:0; background:var(--sun); transition:width .35s cubic-bezier(.2,.8,.2,1) }

.diag-axis{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal); margin:0 0 14px;
}
.diag-q{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(1.35rem,3.2vw,2.2rem); color:#fff; margin:0 0 32px; max-width:24ch;
}
.diag-options{ display:grid; gap:12px; margin-bottom:28px }
.diag-opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.03); color:#EDEFF5;
  border:1px solid rgba(255,255,255,.16); border-radius:10px;
  padding:18px 22px; font-family:var(--font-body); font-size:1.02rem; line-height:1.4;
  transition:border-color .18s, background .18s, transform .18s;
}
.diag-opt:hover{ border-color:var(--sun); background:rgba(209,97,135,.10); transform:translateX(3px) }
.diag-opt:focus-visible{ outline:2px solid var(--sun); outline-offset:2px }
.diag-opt.on{ border-color:var(--sun); background:rgba(209,97,135,.16) }
.diag-back, .diag-restart{
  background:none; border:0; cursor:pointer; padding:8px 0;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:#98A0B6; transition:color .18s;
}
.diag-back:hover, .diag-restart:hover{ color:#fff }
.diag-restart{ margin-top:34px }

/* --- resultat --- */
.diag-name{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(2rem,5vw,3.4rem); color:#fff; margin:14px 0 30px;
}
.diag-scale{ margin-bottom:34px }
.diag-track{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.diag-track .seg{
  height:56px; border:1px solid rgba(255,255,255,.12); border-radius:6px;
  display:flex; align-items:flex-end; padding:8px 10px; transition:border-color .3s, background .3s;
}
.diag-track .seg span{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:#6E7689; line-height:1.25; transition:color .3s;
}
.diag-track .seg.on{ border-color:var(--sun); background:rgba(209,97,135,.16) }
.diag-track .seg.on span{ color:#fff }
.diag-marker{
  position:absolute; top:-9px; left:0; width:2px; height:calc(100% + 18px);
  background:var(--teal); transition:left .9s cubic-bezier(.2,.8,.2,1);
}
.diag-marker::before{
  content:""; position:absolute; top:-4px; left:-4px; width:10px; height:10px;
  border-radius:50%; background:var(--teal);
}
.diag-score{ margin:16px 0 0; display:flex; align-items:baseline; gap:12px }
.diag-score b{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:#fff }
.diag-score span{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#98A0B6 }

.diag-verdict{ color:#C2C8D8; max-width:62ch; font-size:1.05rem; margin:0 0 38px }
.diag-cols{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,4vw,60px) }
.diag-cols h3{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal); margin:0 0 18px; font-weight:500;
}
.diag-cols li{
  padding:14px 0; border-top:1px solid rgba(255,255,255,.1); color:#C2C8D8; font-size:.98rem;
}
.diag-weak li{ color:#fff; font-family:var(--font-display); font-weight:600; font-size:1.05rem }
.diag-prio li{ display:grid; grid-template-columns:auto 1fr; gap:12px }
.diag-prio li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sun); margin-top:9px }
@media (max-width:820px){
  .diag-cols{ grid-template-columns:1fr }
  /* on garde 4 colonnes : le repere se positionne lineairement sur la largeur
     totale, il pointerait a cote si les segments passaient sur deux lignes.
     Les libelles disparaissent — le nom du profil est deja en gros titre. */
  .diag-track .seg{ height:26px; padding:0 }
  .diag-track .seg span{ display:none }
}

/* ---------------- logo officiel ---------------- */
/* Charte p.7 : sous 64 px on utilise la variante du signe seul.
   Le logo est inline et hérite de la couleur via currentColor. */
.brandline .mark{ width:34px; height:34px; color:#fff; flex-shrink:0 }
.foot .brandline .mark{ width:42px; height:42px }
.brandline:hover .mark{ color:var(--pink-light) }
.brandline .mark, .foot .brandline .mark{ transition:color .2s ease }