/* =============================================================================
   REFONTE APP — Carnet de route (carnet-route.php) · LOCAL / additif / réversible
   Scopé html.apprefonte + body.page-carnet-route + .ar-carnet, actif ≤768px.
   THÈME CLAIR (crème / vert). N'affecte jamais le bureau ni la prod.
   ============================================================================= */

/* Écran clair : fond crème, pas de photo de fond globale, pas de barre de marque.
   ⚠️ NE s'applique PAS quand la FRISE d'origine (.cf-wrap) est rendue (réglage
   site.carnet.frise ON) → dans ce cas la refonte s'efface et la page frise s'affiche. */
html.apprefonte body.page-carnet-route:not(:has(.cf-wrap)){ background:#F4F0E6 !important; }
html.apprefonte body.page-carnet-route:not(:has(.cf-wrap))::before{ display:none !important; }
html.apprefonte body.page-carnet-route:not(:has(.cf-wrap)) .pub-topbar{ display:none !important; }
html.apprefonte body.page-carnet-route:not(:has(.cf-wrap)) main.pub-content{ padding:0 !important; max-width:none !important; }

/* Masquer l'ancien carnet, garder le bloc refonte (nav + footer sont hors .pub-content).
   Désactivé si la FRISE est présente (on ne masque JAMAIS la frise chronologique). */
/* AUDIT MASQUE 15/08 : les modales #crModal (Nouvelle entrée), #crViewModal (voir/ajouter
   photos) et #crvLightbox sont enfants directs de .pub-content → le masque les forçait à
   display:none !important, écrasant le style.display='flex' que leur JS pose à l'ouverture
   (le bouton « Nouvelle entrée » du bloc app délègue à #btnNouvelleEntree). Résultat : ajout
   d'entrée/photo MORT en mode app. On les EXEMPTE (elles restent cachées via leur propre
   display:none par défaut, ouvertes normalement par leur JS). Affichage seul, réversible. */
html.apprefonte:has(.ar-carnet):not(:has(.cf-wrap)) .pub-content > *:not(.ar-carnet):not(#crModal):not(#crViewModal):not(#crvLightbox):not(.ann-banner-wrap):not(.flash){ display:none !important; }

/* (15/08) RESTAURATION FRISE : si la frise chronologique d'origine est rendue, on cache
   le bloc refonte pour éviter le doublon et laisser la frise native s'afficher (mobile). */
html.apprefonte:has(.cf-wrap) .ar-carnet{ display:none !important; }

/* ---------------------------------------------------------------------------- */
.ar-carnet{
  --cream:#F4F0E6; --card:#FFFFFF; --ink:#26302A; --soft:#6E7A72;
  --green:#2E6B4F; --green-ic:#E7F1EA; --line:rgba(38,60,48,.10);
  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-carnet a{ text-decoration:none; color:inherit; }
.ar-carnet svg{ display:block; }

/* ===== En-tête ===== */
.ar-cr-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:28px 16px 14px; }
.ar-cr-title{ margin:0; font:800 30px/1.04 'Inter',sans-serif; letter-spacing:-.2px; color:var(--ink); }
.ar-cr-sub{ margin:6px 0 0; font:400 15px/1.4 'Inter',sans-serif; color:var(--soft); }
.ar-cr-map{ width:46px; height:46px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:#fff; display:grid; place-items:center; color:var(--ink); }
.ar-cr-map svg{ width:22px; height:22px; }

/* ===== Bouton « Nouvelle entrée » ===== */
.ar-cr-new{ display:inline-flex; align-items:center; gap:9px; margin:0 16px 18px; padding:14px 20px; border:0; border-radius:14px; background:var(--green); color:#fff; font:700 15.5px/1 'Inter',sans-serif; cursor:pointer; box-shadow:0 5px 15px rgba(46,107,79,.28); }
.ar-cr-new svg{ width:17px; height:17px; }

/* ===== Carte voyage héro (photo sombre) ===== */
.ar-cr-hero{ position:relative; display:block; margin:0 16px 18px; min-height:200px; border-radius:20px; overflow:hidden; color:#fff;
  background:linear-gradient(180deg, rgba(6,14,22,.34) 0%, rgba(6,14,22,.62) 38%, rgba(6,14,22,.95) 88%), var(--cover, none) center/cover no-repeat, #26333e; }
.ar-cr-hero-ic{ position:absolute; top:16px; left:16px; width:52px; height:52px; border-radius:50%; background:rgba(231,241,234,.92); color:var(--green); display:grid; place-items:center; }
.ar-cr-hero-ic svg{ width:28px; height:28px; }
.ar-cr-hero-body{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; }
.ar-cr-hero-title{ font:700 22px/1.2 'Inter',sans-serif; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.65); }
.ar-cr-hero-title span{ font-weight:500; opacity:.92; font-size:16px; }
.ar-cr-hero-foot,.ar-cr-timeline{ text-shadow:0 1px 6px rgba(0,0,0,.5); }
.ar-cr-timeline{ display:flex; align-items:center; margin:12px 0 12px; }
.ar-cr-dot{ width:21px; height:21px; flex:0 0 auto; border-radius:50%; border:2px solid rgba(255,255,255,.6); background:transparent; display:grid; place-items:center; }
.ar-cr-dot.is-done{ background:#7FC79B; border-color:#7FC79B; }
.ar-cr-dot.is-cur{ background:#fff; border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.22); }
.ar-cr-dot svg{ width:11px; height:11px; color:#12351f; }
.ar-cr-seg{ height:2px; flex:1 1 auto; background:rgba(255,255,255,.42); }
.ar-cr-seg.is-done{ background:#7FC79B; }
.ar-cr-hero-foot{ display:flex; align-items:center; gap:8px; font:600 14.5px/1 'Inter',sans-serif; }
.ar-cr-hero-foot svg{ width:16px; height:16px; }

/* ===== Onglets ===== */
.ar-cr-tabs{ display:flex; margin:0 16px 16px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.ar-cr-tab{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:14px 6px; background:none; border:0; border-bottom:2.5px solid transparent; cursor:pointer; font:700 14.5px/1 'Inter',sans-serif; color:var(--soft); }
.ar-cr-tab svg{ width:18px; height:18px; }
.ar-cr-tab.is-on{ color:var(--green); border-bottom-color:var(--green); }

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

/* ===== Carte « jour » (Journal) ===== */
.ar-cr-daycard{ margin:0 16px 16px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:4px 6px 8px; box-shadow:0 2px 10px rgba(30,50,40,.05); }
.ar-cr-dayhead{ display:flex; align-items:center; gap:12px; padding:14px 12px 10px; }
.ar-cr-daycal{ width:38px; height:38px; flex:0 0 auto; border-radius:11px; background:var(--green-ic); display:grid; place-items:center; color:var(--green); }
.ar-cr-daycal svg{ width:20px; height:20px; }
.ar-cr-dayttl{ flex:1; min-width:0; font:800 16px/1.25 'Inter',sans-serif; color:var(--ink); }
.ar-cr-daymenu{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; background:#F1F3F0; color:var(--soft); display:grid; place-items:center; font:700 18px/1 'Inter',sans-serif; }
.ar-cr-moments{ list-style:none; margin:0; padding:0; }
.ar-cr-moment{ position:relative; display:flex; align-items:center; gap:13px; padding:11px 12px; border-top:1px solid var(--line); }
.ar-cr-moment:first-child{ border-top:0; }
.ar-cr-mico{ width:38px; height:38px; flex:0 0 auto; border-radius:50%; background:var(--green-ic); display:grid; place-items:center; font-size:18px; color:var(--green); font-weight:700; }
.ar-cr-moment + .ar-cr-moment .ar-cr-mico::before{ content:""; position:absolute; left:30px; top:-9px; width:2px; height:11px; background:repeating-linear-gradient(var(--green) 0 2px, transparent 2px 5px); opacity:.45; }
.ar-cr-mlbl{ flex:1; min-width:0; font:600 15.5px/1.3 'Inter',sans-serif; color:var(--ink); }
.ar-cr-mtime{ flex:0 0 auto; font:600 14px/1 'Inter',sans-serif; color:var(--soft); }
.ar-cr-mico.is-done{ background:var(--green); color:#fff; }

.ar-cr-empty{ margin:0 16px; padding:34px 18px; text-align:center; color:var(--soft); font:500 14.5px/1.5 'Inter',sans-serif; background:#fff; border:1px solid var(--line); border-radius:18px; }

/* ===== Médias (bande horizontale) ===== */
.ar-cr-media{ display:flex; gap:11px; margin:0 16px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.ar-cr-addmedia,.ar-cr-thumb{ width:134px; height:134px; flex:0 0 auto; border-radius:16px; }
.ar-cr-addmedia{ border:2px dashed rgba(46,107,79,.42); background:#EDF4EE; color:var(--green); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; font:700 13.5px/1.2 'Inter',sans-serif; }
.ar-cr-addmedia svg{ width:26px; height:26px; }
.ar-cr-thumb{ object-fit:cover; }