/* =============================================================================
   REFONTE APP — Rien oublier / Checklist (rien-oublier.php) · LOCAL / additif
   Scopé html.apprefonte + body.page-rien-oublier + .ar-checklist, actif ≤768px.
   Thème SOMBRE navy + ORANGE. N'affecte jamais le bureau ni la prod.
   ============================================================================= */

html.apprefonte body.page-rien-oublier{ background:#0C1626 !important; }
html.apprefonte body.page-rien-oublier::before{ display:none !important; }
html.apprefonte body.page-rien-oublier .pub-topbar{ display:none !important; }
html.apprefonte body.page-rien-oublier main.pub-content{ padding:0 !important; max-width:none !important; }
html.apprefonte:has(.ar-checklist) .pub-content > *:not(.ar-checklist):not(.ann-banner-wrap):not(.flash){ display:none !important; }

/* ---------------------------------------------------------------------------- */
.ar-checklist{
  --surf:#15263C; --surf2:#1B2E48; --line:rgba(120,160,210,.14);
  --ink:var(--ar-ink,#F6F0DF); --soft:#9BB1BF; --orange:#F2792B; --orange2:#F59E42;
  display:block; color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  padding-bottom:calc(var(--ar-navh,64px) + var(--ar-safe-b,0px) + 84px);
}
.ar-checklist svg{ display:block; }
.ar-checklist a{ text-decoration:none; color:inherit; }

/* En-tête */
.ar-ck-head{ display:flex; align-items:center; gap:14px; padding:24px 16px 14px; }
.ar-ck-badge{ width:56px; height:56px; flex:0 0 auto; border-radius:16px; background:rgba(242,121,43,.12); border:1px solid rgba(242,121,43,.3); color:var(--orange); display:grid; place-items:center; }
.ar-ck-badge svg{ width:30px; height:30px; }
.ar-ck-htext{ flex:1; min-width:0; }
/* (audit 24/08 · FDCN-039) LE TITRE DOIT TENIR SANS SE COUPER EN PLEIN MOT.
   Sur un écran de 390 px, cet en-tête accumule DEUX réservations d'espace qui
   s'ignorent l'une l'autre :
     · 124 px à GAUCHE, posés par le bouton Retour pour ne pas recouvrir le titre
       (includes/bouton-retour.php) ;
     · 64 px à DROITE, réservés pour le ☰ flottant (zzzzz-menu-fab-fix.css).
   Avec le badge (56 px), l'engrenage (44 px) et les deux gouttières (28 px), il ne
   restait que 74 px pour le titre — mesuré dans le vrai navigateur le 24/08. Un
   « Rien oublier » en 30 px se cassait alors À L'INTÉRIEUR des mots : « Rien /
   oubl / ier ».
   On ne retire aucune des deux protections : on rend le titre élastique et on
   autorise l'en-tête à passer le texte à la ligne quand c'est trop serré. Sur
   grand écran, rien ne change (le clamp plafonne à 30 px). */
.ar-ck-title{ margin:0; font:800 clamp(20px, 5.4vw, 30px)/1.06 'Inter',sans-serif; letter-spacing:-.4px; color:#fff; }
@media (max-width: 460px){
  .ar-ck-head{ flex-wrap:wrap; row-gap:6px; }
  .ar-ck-htext{ flex:1 1 100%; order:3; }
}
.ar-ck-sub{ margin:4px 0 0; font:400 14.5px/1.35 'Inter',sans-serif; color:var(--soft); }
.ar-ck-gear{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--soft); }
.ar-ck-gear svg{ width:21px; height:21px; }

/* Carte progression */
.ar-ck-prog{ display:flex; align-items:center; gap:8px; margin:0 16px 20px; padding:18px; border-radius:22px; background:var(--surf); border:1px solid var(--line); }
.ar-ck-ring{ position:relative; width:132px; height:132px; flex:0 0 auto; }
.ar-ck-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ar-ck-ring .trk{ fill:none; stroke:rgba(255,255,255,.10); stroke-width:11; }
.ar-ck-ring .prg{ fill:none; stroke:url(#ckgrad); stroke-width:11; stroke-linecap:round; transition:stroke-dasharray .35s ease; }
.ar-ck-ring-txt{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ar-ck-num{ font:800 38px/1 'Inter',sans-serif; color:#fff; }
.ar-ck-tot{ margin-top:2px; font:600 13px/1 'Inter',sans-serif; color:var(--soft); }
.ar-ck-ver{ margin-top:3px; font:700 13px/1 'Inter',sans-serif; color:var(--orange); }
.ar-ck-illus{ flex:1; min-width:0; display:grid; place-items:center; color:rgba(155,177,191,.5); }
.ar-ck-illus svg{ width:100%; max-width:180px; height:auto; }

/* (24/08 — demande Julien) ASSET VÉHICULE en FOND PLEIN BLOC : quand un asset
   perso (<img>) est présent, l'image couvre TOUTE la carte de progression ;
   l'anneau « x sur N vérifiés » passe par-dessus, avec un dégradé à gauche pour
   rester lisible. Ne s'applique QUE s'il y a un <img> → le dessin SVG de repli
   garde son affichage à droite. Réversible : retirer ce bloc. */
.ar-ck-prog:has(.ar-ck-illus img){ position:relative; overflow:hidden; }
.ar-ck-prog:has(.ar-ck-illus img) .ar-ck-illus{ position:absolute; inset:0; z-index:0; display:block; place-items:initial; }
.ar-ck-prog:has(.ar-ck-illus img) .ar-ck-illus img{
  width:100% !important; max-width:none !important; height:100% !important;
  aspect-ratio:auto !important; object-fit:cover !important; margin:0 !important;
}
.ar-ck-prog:has(.ar-ck-illus img) .ar-ck-ring{ z-index:2; }
.ar-ck-prog:has(.ar-ck-illus img)::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,22,38,.86) 0%, rgba(12,22,38,.58) 36%, rgba(12,22,38,.14) 66%, rgba(12,22,38,0) 100%);
}

/* Onglets familles */
.ar-ck-tabs{ display:flex; gap:10px; padding:0 16px 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ar-ck-tab{ display:inline-flex; align-items:center; gap:8px; padding:11px 16px; flex:0 0 auto; border-radius:14px; background:var(--surf); border:1px solid var(--line); cursor:pointer; white-space:nowrap; font:700 14.5px/1 'Inter',sans-serif; color:var(--soft); }
.ar-ck-tab .em{ font-size:16px; line-height:1; }
.ar-ck-tab.is-on{ color:var(--orange); border-color:var(--orange); background:rgba(242,121,43,.10); }

.ar-ck-pane[hidden]{ display:none; }

/* Liste d'items */
.ar-ck-list{ list-style:none; margin:0 16px; padding:0; background:var(--surf); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.ar-ck-item{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-top:1px solid rgba(255,255,255,.05); }
.ar-ck-item:first-child{ border-top:0; }
.ar-ck-ico{ width:46px; height:46px; flex:0 0 auto; border-radius:13px; background:var(--surf2); display:grid; place-items:center; font-size:22px; line-height:1; }
.ar-ck-label{ flex:1; min-width:0; font:600 16px/1.3 'Inter',sans-serif; color:#fff; overflow-wrap:anywhere; }
.ar-ck-sw{ width:56px; height:32px; flex:0 0 auto; border:0; border-radius:999px; background:#33465E; position:relative; cursor:pointer; padding:0; transition:background .2s; }
.ar-ck-knob{ position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; display:grid; place-items:center; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.ar-ck-knob svg{ width:15px; height:15px; color:var(--orange); opacity:0; transition:opacity .2s; }
.ar-ck-sw.is-on{ background:var(--orange); }
.ar-ck-sw.is-on .ar-ck-knob{ left:27px; }
.ar-ck-sw.is-on .ar-ck-knob svg{ opacity:1; }

/* Ajouter */
.ar-ck-add{ display:flex; align-items:center; justify-content:center; gap:10px; width:calc(100% - 32px); margin:16px 16px 0; padding:16px; border-radius:15px; background:transparent; border:1.5px dashed rgba(242,121,43,.5); color:var(--orange); font:700 15px/1 'Inter',sans-serif; cursor:pointer; }
.ar-ck-add svg{ width:18px; height:18px; }

/* Actions bas */
.ar-ck-actions{ display:flex; gap:12px; margin:16px 16px 0; }
.ar-ck-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:16px; border-radius:15px; font:700 15px/1 'Inter',sans-serif; cursor:pointer; }
.ar-ck-btn svg{ width:17px; height:17px; }
.ar-ck-btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--soft); }
.ar-ck-btn-go{ background:var(--orange); border:1px solid transparent; color:#3a1c05; }