/* ==========================================================================
   Activation CarPlay — configurateur, formulaires et fiches
   --------------------------------------------------------------------------
   Chargée AVANT design.css (dépendance déclarée dans acp_theme_assets).
   Tout passe par les jetons de design.css : cette feuille ne connaît aucune
   couleur, aucune police et aucun rayon en propre.

   Pourquoi (audit V9.3) : elle contenait 120 littéraux figés sur le thème
   sombre, que style.css devait recompenser un par un pour le thème clair —
   soit deux endroits à modifier pour un seul changement. Elle demandait aussi
   « Manrope » et « IBM Plex Mono », qui ne sont plus chargées depuis la V9 :
   le configurateur s'affichait en polices système génériques pendant que le
   reste du site était composé en Instrument Sans et JetBrains Mono. Ses neuf
   rayons (13, 14, 15, 17, 19, 21, 22, 28, 999px) ignoraient l'échelle v9.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Configurateur
   -------------------------------------------------------------------------- */
.acp-checker{
  position:relative;overflow:hidden;
  padding:clamp(24px,4vw,46px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);
  box-shadow:var(--shadow-1);
}
/* Veilleuse ambre dans l'angle : le seul flou conservé, il signale l'appareil
   sous tension. Tout le reste de la hiérarchie passe par les filets. */
.acp-checker:before{
  content:"";position:absolute;width:45%;height:160%;right:-20%;top:-30%;
  background:color-mix(in srgb,var(--electric) 8%,transparent);
  filter:blur(60px);pointer-events:none;
}

.acp-service-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}
.acp-service-switch input{position:absolute;opacity:0;pointer-events:none}
.acp-service-switch label{
  display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:76px;padding:14px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ink);cursor:pointer;
  transition:border-color .3s,background .3s,box-shadow .3s,transform .3s cubic-bezier(.16,1,.3,1);
}
.acp-service-switch label:hover{border-color:var(--line-hi)}
.acp-service-switch label:has(input:checked){
  border-color:var(--electric);
  background:color-mix(in srgb,var(--electric) 10%,var(--ink));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--electric) 40%,transparent);
  transform:translateY(-2px);
}
.acp-service-switch label:has(input:focus-visible){outline:2px solid var(--electric);outline-offset:2px}
/* Apple et Android se distinguent par leur libellé, pas par une couleur
   inventée : le vert est réservé à « configuration confirmée ». */
.acp-service-switch .is-apple:has(input:checked),
.acp-service-switch .is-android:has(input:checked){border-color:var(--electric)}
.acp-service-switch b{display:block;color:var(--white);font:600 1rem var(--font-display);letter-spacing:-.02em}
.acp-service-switch small{display:block;color:var(--muted);font-size:.72rem}

.acp-solution-row{margin-bottom:22px}
.acp-solution{display:grid;gap:9px}

.acp-progress{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:36px}
.acp-progress span{
  position:relative;padding:0 12px 13px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font:600 .58rem var(--font-mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
.acp-progress span:after{
  content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;
  background:var(--electric);
  transition:right .6s cubic-bezier(.16,1,.3,1);
}
.acp-progress .is-active{color:var(--white)}
/* Une étape franchie garde sa barre remplie. */
.acp-progress .is-done{color:var(--soft)}
.acp-progress .is-done:after,.acp-progress .is-active:after{right:0}

.acp-checker__grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

/* Les champs eux-mêmes sont définis une seule fois, dans design.css, pour tous
   les formulaires du site. Ne restent ici que les états propres à l'outil. */
.acp-checker select:hover,
.acp-support-form input:hover,.acp-support-form select:hover,.acp-support-form textarea:hover{
  border-color:var(--line-hi);
}
/* Une liste renseignée se referme visuellement : repère de progression. */
.acp-checker select:valid{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line-hi))}
.acp-support-form textarea{padding-block:14px}

.acp-checker__submit{position:relative;width:100%;margin-top:23px;justify-content:center}
.acp-status{min-height:22px;color:var(--muted);font-size:.78rem}

/* États de chargement : les listes en cascade ne doivent pas paraître figées. */
.acp-checker.is-loading .acp-checker__grid{opacity:.6;pointer-events:none;transition:opacity .2s}
.acp-checker.is-checking .acp-checker__submit{opacity:.75;pointer-events:none}
.acp-checker select[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.acp-checker__submit[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* --------------------------------------------------------------------------
   2. Résultat court
   -------------------------------------------------------------------------- */
.acp-result{
  display:flex;gap:17px;align-items:flex-start;margin-top:17px;padding:21px;
  border-radius:var(--r-lg);
  animation:acpResult .5s cubic-bezier(.16,1,.3,1);
}
/* Vert = configuration confirmée. Ambre = à vérifier. Aucune autre teinte. */
.acp-result.is-compatible{
  border:1px solid color-mix(in srgb,var(--success) 34%,transparent);
  background:color-mix(in srgb,var(--success) 9%,transparent);
}
.acp-result.is-review{
  border:1px solid color-mix(in srgb,var(--electric) 34%,transparent);
  background:color-mix(in srgb,var(--electric) 9%,transparent);
}
.acp-result__icon{
  display:grid;place-items:center;flex:0 0 39px;height:39px;border-radius:50%;
  background:var(--success);color:var(--on-success);font-weight:900;
}
.acp-result p{margin:4px 0 14px;color:var(--soft)}

@keyframes acpResult{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   3. Fiche de compatibilité
   Le configurateur rend la fiche complète que la table de règles contenait
   déjà : méthode, difficulté, durée, prérequis, avertissement.
   -------------------------------------------------------------------------- */
.acp-result--sheet{
  display:block;margin-top:26px;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);
}
.acp-result--sheet:focus{outline:2px solid var(--electric);outline-offset:3px}
.acp-result--sheet.is-compatible{border-color:color-mix(in srgb,var(--success) 38%,transparent)}
.acp-result--sheet.is-review{border-color:color-mix(in srgb,var(--electric) 38%,transparent)}

.acp-sheet__head{
  padding:clamp(22px,3vw,30px);border-bottom:1px solid var(--line);
  background:linear-gradient(150deg,color-mix(in srgb,var(--success) 9%,transparent),transparent 70%);
}
.acp-result--sheet.is-review .acp-sheet__head{
  background:linear-gradient(150deg,color-mix(in srgb,var(--electric) 10%,transparent),transparent 70%);
}
.acp-sheet__badge{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 12px;
  border:1px solid color-mix(in srgb,var(--success) 38%,transparent);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--success) 14%,transparent);
  color:var(--success);
  font:600 .64rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
}
.acp-sheet__badge--review{
  border-color:color-mix(in srgb,var(--electric) 38%,transparent);
  background:color-mix(in srgb,var(--electric) 14%,transparent);
  color:var(--electric-ink);
}
.acp-sheet__head h3{margin:0 0 7px;color:var(--white);font-family:var(--font-display);font-size:clamp(1.3rem,2.3vw,1.85rem);letter-spacing:-.03em;line-height:1.15}
.acp-sheet__sub{margin:0;color:var(--muted);font-size:.85rem}

.acp-sheet__body{padding:clamp(22px,3vw,30px);display:grid;gap:clamp(20px,2.4vw,28px)}
.acp-sheet__specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;margin:0;padding:0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.acp-spec{margin:0;padding:15px 17px;background:var(--ink)}
.acp-spec dt{margin:0 0 6px;color:var(--muted);font:600 .58rem var(--font-mono);letter-spacing:.09em;text-transform:uppercase}
.acp-spec dd{margin:0;color:var(--white);font-size:.92rem;font-weight:600;line-height:1.35}

.acp-sheet__block h4{margin:0 0 11px;color:var(--white);font-size:.8rem;font-weight:700;letter-spacing:.02em}
.acp-sheet__block p{margin:0;color:var(--soft);font-size:.89rem;line-height:1.62}
.acp-sheet__features{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.acp-sheet__features li{position:relative;padding-left:26px;color:var(--soft);font-size:.89rem;line-height:1.5}
.acp-sheet__features li:before{
  content:"";position:absolute;left:6px;top:.52em;width:7px;height:7px;border-radius:50%;
  background:var(--success);
}
.acp-result--sheet.is-review .acp-sheet__features li:before{background:var(--electric)}

.acp-sheet__warning{
  display:flex;gap:12px;align-items:flex-start;margin:0;padding:15px 17px;
  border:1px solid color-mix(in srgb,var(--electric) 32%,transparent);border-radius:var(--r-md);
  background:color-mix(in srgb,var(--electric) 8%,transparent);
  color:var(--soft);font-size:.86rem;line-height:1.55;
}
.acp-sheet__warning>span:first-child{
  flex:0 0 21px;height:21px;display:grid;place-items:center;border-radius:50%;
  background:var(--electric);color:var(--on-electric);font-weight:800;font-size:.74rem;
}

.acp-sheet__foot{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  padding:clamp(20px,2.6vw,26px) clamp(22px,3vw,30px);
  border-top:1px solid var(--line);background:var(--paper-2);
}
.acp-sheet__offer{display:grid;gap:4px;min-width:0}
.acp-sheet__offer small{color:var(--muted);font-size:.74rem;line-height:1.35}
.acp-sheet__price{color:var(--white);font:700 1.45rem var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.acp-sheet__cta{flex:0 0 auto}
.acp-sheet__nooffer{flex:1 1 260px;margin:0;color:var(--soft);font-size:.85rem;line-height:1.55}
.acp-sheet__priceline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.acp-sheet__was{color:var(--muted);font:500 .95rem var(--font-mono);text-decoration:line-through}

.acp-sheet__links{display:flex;flex-wrap:wrap;gap:20px;margin:0;padding:0 clamp(22px,3vw,30px) clamp(20px,2.6vw,26px)}
.acp-sheet__links a{color:var(--electric-ink);font-size:.79rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.acp-sheet__links a:hover{color:var(--white)}

/* --------------------------------------------------------------------------
   4. Commande, compte et livraison de fichiers
   -------------------------------------------------------------------------- */
.acp-checkout-data{padding:24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--shadow-1)}
.acp-download-list{display:grid;gap:12px}
.acp-download-list article{
  display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);
}
.acp-download-list small{display:block;color:var(--muted)}
.acp-account-card{
  padding:23px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel);box-shadow:var(--shadow-1);margin-bottom:24px;
}

.acp-support-form{
  display:grid;gap:19px;max-width:760px;padding:28px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
}

/* --------------------------------------------------------------------------
   5. Cartes guides
   -------------------------------------------------------------------------- */
.acp-guides{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.acp-guides article{
  position:relative;overflow:hidden;padding:27px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s;
}
.acp-guides article:hover{transform:translateY(-4px);border-color:var(--line-hi)}
.acp-guides span{color:var(--electric-ink);font:600 .6rem var(--font-mono)}
.acp-guides h3{color:var(--white)}
.acp-guides p{color:var(--soft);font-size:.85rem}

/* --------------------------------------------------------------------------
   6. Véhicules couverts, listés sur la fiche produit
   -------------------------------------------------------------------------- */
.acp-product-vehicles{margin-top:clamp(34px,4vw,52px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.acp-product-vehicles h2{font-size:clamp(1.2rem,2vw,1.6rem);margin-bottom:10px}
.acp-product-vehicles>p{color:var(--muted);font-size:.9rem;margin:0 0 22px}
.acp-product-vehicles ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:0 0 20px;padding:0;list-style:none}
.acp-product-vehicles li a{
  display:grid;gap:4px;height:100%;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);
  transition:border-color .3s,transform .3s cubic-bezier(.16,1,.3,1);
}
.acp-product-vehicles li a:hover{border-color:var(--electric);transform:translateY(-2px)}
.acp-product-vehicles strong{color:var(--white);font-size:.95rem}
.acp-product-vehicles span{color:var(--muted);font-size:.79rem}
.acp-product-vehicles__note{color:var(--muted);font-size:.86rem;margin:0}
.acp-product-vehicles__note a{color:var(--electric-ink);text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   7. Mobile
   -------------------------------------------------------------------------- */
@media(max-width:760px){
  .acp-service-switch{grid-template-columns:1fr}
  .acp-checker__grid,.acp-guides{grid-template-columns:1fr}
  .acp-sheet__specs{grid-template-columns:1fr 1fr}
  .acp-sheet__foot{flex-direction:column;align-items:stretch}
  .acp-sheet__cta{width:100%;justify-content:center}
  .acp-download-list article{align-items:flex-start;flex-direction:column}
  .acp-download-list .button{width:100%;text-align:center}
}
@media(max-width:420px){.acp-sheet__specs{grid-template-columns:1fr}}