/* Carnet Japon · le site autour du carnet : base, boutons, blocs communs à la home, au quiz et à la visionneuse.
   Les écrans eux-mêmes (home, quiz, visionneuse) arrivent avec leurs templates aux étapes 6, 7 et 9. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cj-fond);color:var(--cj-encre);font:16px/1.6 var(--cj-police-texte);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--cj-police-titre);font-weight:600;line-height:1.1;color:var(--cj-encre);margin:0}
a{color:var(--cj-vermillon)}a:hover{color:var(--cj-vermillon)}
img{max-width:100%;height:auto}

/* la voix manuscrite et les labels, partout sur le site */
.cj-main{font-family:var(--cj-police-main);color:var(--cj-vermillon);line-height:1}
.cj-mono{font-family:var(--cj-police-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cj-vermillon)}

/* boutons */
.cj-btn{display:inline-flex;align-items:center;gap:10px;background:var(--cj-vermillon);color:var(--cj-creme);font-weight:700;font-size:16px;
  padding:14px 24px;border-radius:var(--cj-rayon);border:0;text-decoration:none;cursor:pointer;line-height:1.2}
.cj-btn:hover{background:var(--cj-vermillon-fonce);color:var(--cj-creme)}
.cj-btn--grand{font-size:17px;padding:16px 26px}
.cj-btn--secondaire{background:var(--cj-creme);color:var(--cj-encre);border:1.5px solid var(--cj-filet)}
.cj-btn--secondaire:hover{background:var(--cj-blanc);color:var(--cj-encre)}
.cj-btn .cj-main{color:var(--cj-creme);font-weight:400;font-size:18px}

/* la route pointillée, signature du carnet */
.cj-route-site{height:2px;background-image:radial-gradient(circle,var(--cj-route-points) .9px,transparent 1.2px);background-size:6px 2px;background-repeat:repeat-x}

/* conteneur plein écran, pas de colonne étroite sur PC */
.cj-conteneur{width:100%;max-width:1180px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.cj-conteneur{padding:0 20px}}

/* les pages du carnet posées dans le site (hero, quiz) : on les montre à leur échelle, cadrées d'un fin trait d'encre */
.cj-page-cadre{position:relative;width:var(--cj-page-l);height:var(--cj-page-h);transform-origin:top left;border:1.5px solid rgba(38,33,28,.3);border-radius:var(--cj-rayon);overflow:hidden;background:var(--cj-fond)}

/* ======================================================================
   EN-TÊTE ET PIED DU SITE (maquette « Home · ordinateur »)
   ====================================================================== */
.cjt-entete{width:100%;background:var(--cj-fond-entete);border-bottom:1px solid var(--cj-filet)} /* même en-tête kraft que le quiz : il se détache du papier */
.cjt-entete__in{position:relative;max-width:1180px;margin:0 auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cjt-marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cj-encre)}
.cjt-marque:hover{color:var(--cj-encre)}
.cjt-marque__kei{width:40px;height:26px;color:var(--cj-encre)}
.cjt-marque__nom{font-family:var(--cj-police-titre);font-weight:600;font-size:24px;letter-spacing:.02em}
.cjt-entete .cjt-nav ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.cjt-entete .cjt-nav a{padding:0;border-radius:0;background:none;color:var(--cj-encre);font-size:14px;font-weight:500;text-decoration:none}
.cjt-entete .cjt-nav a:hover,.cjt-entete .cjt-nav .current-menu-item>a{background:none;color:var(--cj-vermillon)}
.cjt-entete .cjt-nav .cjt-nav-cta>a{background:var(--cj-vermillon);color:var(--cj-creme);font-weight:700;padding:12px 20px;border-radius:var(--cj-rayon)}
.cjt-entete .cjt-nav .cjt-nav-cta>a:hover{background:var(--cj-vermillon-fonce);color:var(--cj-creme)}
@media(max-width:860px){
  .cjt-entete__in{padding:16px 20px}
  .cjt-entete .cjt-nav{background:var(--cj-fond);border-bottom:1px solid var(--cj-filet)}
  .cjt-entete .cjt-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:6px 0 14px}
  .cjt-entete .cjt-nav a{display:block;padding:13px 20px;font-size:16px}
  .cjt-entete .cjt-nav .cjt-nav-cta>a{margin:8px 20px 0;text-align:center}
}

.cjt-pied{width:100%}
.cjt-pied__in{max-width:1180px;margin:0 auto;padding:8px 32px 40px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cjt-pied__kei{width:30px;height:20px;color:var(--cj-encre)}
.cjt-pied__route{flex:1 1 120px}
.cjt-pied__signature{font-family:var(--cj-police-main);font-size:18px;color:var(--cj-encre)}
.cjt-pied__nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.cjt-pied__nav a{font-family:var(--cj-police-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cj-encre-douce);text-decoration:none}
.cjt-pied__nav a:hover{color:var(--cj-vermillon)}
@media(max-width:640px){.cjt-pied__in{padding:8px 20px 32px}}

/* ======================================================================
   LA HOME (front-page.php)
   ====================================================================== */
.cjt-h{display:flex;flex-direction:column;align-items:center}
/* chaque partie est une bande pleine largeur ; une sur deux en crème pour qu'on sente le passage */
.cjt-h-bloc{width:100%;box-sizing:border-box;padding:72px max(32px,calc((100% - 1180px) / 2 + 32px))}
.cjt-h-bloc--creme{background:var(--cj-creme)}
.cjt-h-bloc--creme .cjt-h-carte,.cjt-h-bloc--creme .cjt-h-prix{background:var(--cj-fond)}
.cjt-h h2{font-family:var(--cj-police-titre);font-weight:600;line-height:1.05;margin:0}
.cjt-h p{margin:0;color:var(--cj-encre);line-height:1.5}
.cjt-h .cj-main{font-size:22px}

/* hero : le texte à gauche, une grande photo qui file jusqu'au bord droit, la vraie couverture posée à cheval */
.cjt-h-hero{position:relative;width:100%;min-height:620px;display:flex;align-items:center}
.cjt-h-hero__in{width:100%;max-width:1180px;margin:0 auto;padding:56px 32px;box-sizing:border-box}
.cjt-h-hero__texte{max-width:470px;display:flex;flex-direction:column;gap:22px;position:relative;z-index:2}
.cjt-h-hero__accroche.cj-main{font-size:26px;color:var(--cj-vermillon)}
.cjt-h-hero__titre{font-size:58px;line-height:1.02;margin:0}
.cjt-h-hero__intro{font-size:18px}
.cjt-h-hero__cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cjt-h-hero__cta .cj-btn{white-space:nowrap}
.cjt-h-hero__visuel{position:absolute;top:0;bottom:0;right:0;left:max(calc(50% + 70px),calc((100% - 1180px) / 2 + 650px))}
.cjt-h-hero__photo{width:100%;height:100%;object-fit:cover;object-position:35% 40%;display:block;border-left:1.5px solid var(--cj-encre)}
.cjt-h-couv{position:absolute;left:-48px;bottom:56px;width:229px;height:437px;overflow:hidden;border:1.5px solid var(--cj-encre);border-radius:var(--cj-rayon);background:var(--cj-fond);box-shadow:6px 6px 0 rgba(38,33,28,.18)}
.cjt-h-couv__echelle{width:440px;height:840px;transform:scale(.52);transform-origin:top left}
.cjt-h-couv__echelle .cj-page{width:440px;height:840px}
.cjt-h-couv .cj-page a{pointer-events:none}
.cjt-h-hero__note.cj-main{position:absolute;left:196px;bottom:24px;font-size:21px;color:var(--cj-creme);background:var(--cj-encre);padding:2px 12px;border-radius:var(--cj-rayon);transform:rotate(-2deg)}

@media(max-width:960px){
  .cjt-h-hero{flex-direction:column;align-items:stretch;min-height:0}
  .cjt-h-hero__in{padding:40px 32px 32px}
  .cjt-h-hero__texte{max-width:620px}
  .cjt-h-hero__visuel{position:relative;left:auto;right:auto;height:420px;margin-bottom:40px}
  .cjt-h-hero__photo{border-left:0;border-top:1.5px solid var(--cj-encre);border-bottom:1.5px solid var(--cj-encre)}
  .cjt-h-couv{left:32px;bottom:-40px}
  .cjt-h-hero__note.cj-main{left:276px;bottom:-26px}
}
@media(max-width:640px){
  .cjt-h-bloc{padding:52px 20px}
  .cjt-h-hero__in{padding:28px 20px 28px}
  .cjt-h-hero__titre{font-size:40px}
  .cjt-h-hero__intro{font-size:16px}
  .cjt-h-hero__visuel{height:330px;margin-bottom:36px}
  .cjt-h-couv{left:20px;bottom:-32px;width:154px;height:294px}
  .cjt-h-couv__echelle{transform:scale(.35)}
  .cjt-h-hero__note.cj-main{display:none}
}

.cjt-h-separateur{margin-bottom:40px}
.cjt-h-trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cjt-h-quatre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cjt-h-carte{background:var(--cj-creme);border-radius:var(--cj-rayon);padding:24px;display:flex;flex-direction:column;gap:8px}
.cjt-h-carte .cj-main{font-size:20px}
.cjt-h-carte h2{font-size:26px;line-height:1.1}
.cjt-h-carte p{font-size:14px}
.cjt-h-carte--petite{padding:20px;gap:6px}
.cjt-h-carte--petite .cj-mono{font-size:12px;letter-spacing:.16em}
.cjt-h-carte--petite strong{font-size:15px}
.cjt-h-carte--petite p{font-size:13px;line-height:1.45}
.cjt-h-titre{display:flex;flex-direction:column;gap:4px;margin-bottom:28px}
.cjt-h-titre h2{font-size:40px}
.cjt-h-etapes>div{display:flex;flex-direction:column;gap:12px}
.cjt-h-etapes__num{font-family:var(--cj-police-titre);font-weight:600;font-size:56px;line-height:.9;color:var(--cj-vermillon)}
.cjt-h-etapes h3{margin:0;font-family:var(--cj-police-texte);font-size:18px;font-weight:700}
.cjt-h-etapes p{font-size:14px}

.cjt-h-prix{background:var(--cj-creme);border-radius:var(--cj-rayon);padding:40px;display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.cjt-h-prix__gauche{flex:1 1 380px;display:flex;flex-direction:column;gap:10px}
.cjt-h-prix__gauche p{font-size:15px;max-width:460px}
.cjt-h-prix__montant{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cjt-h-prix__chiffre{font-family:var(--cj-police-titre);font-weight:600;font-size:72px;line-height:.9}
.cjt-h-prix__barre{font-family:var(--cj-police-titre);font-size:28px;color:var(--cj-encre-douce);text-decoration:line-through}
.cjt-h-prix__droite{flex:1 1 300px;display:flex;flex-direction:column;gap:10px}
.cjt-h-prix__droite .cj-btn{margin-top:10px;align-self:flex-start}
.cjt-h-coche{display:flex;gap:10px;align-items:center;font-size:14px}
.cjt-h-coche::before{content:"";width:14px;height:14px;flex-shrink:0;border:1.5px solid var(--cj-encre-forte);border-radius:3px;background:var(--cj-vermillon);box-shadow:inset 0 0 0 2px var(--cj-creme)}

.cjt-h-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
.cjt-h-faq>div{display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--cj-filet);padding-bottom:14px}
.cjt-h-faq strong{font-size:15px}
.cjt-h-faq p{font-size:14px}

@media(max-width:960px){.cjt-h-quatre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .cjt-h-trois,.cjt-h-quatre,.cjt-h-faq{grid-template-columns:1fr}
  .cjt-h-titre h2{font-size:32px}
  .cjt-h-prix{padding:24px}
  .cjt-h-prix__chiffre{font-size:56px}
  .cjt-h .cj-btn--grand{flex-wrap:wrap;justify-content:center;white-space:normal}
}

/* ---------- La bannière cookies (Pressidium / cookieconsent) aux couleurs du carnet : crème, encre, vermillon ; sur téléphone, une barre basse compacte ---------- */
#cc--main #cm{background:var(--cj-creme) !important;color:var(--cj-encre) !important;border-radius:var(--cj-rayon) !important;box-shadow:0 0 0 1.5px var(--cj-filet),0 8px 24px color-mix(in srgb,var(--cj-encre) 14%,transparent) !important;font-family:var(--cj-police-texte) !important;max-width:24em !important}
#cc--main #cm #c-ttl{font-family:var(--cj-police-titre) !important;font-weight:600 !important;font-size:20px !important;color:var(--cj-encre) !important}
#cc--main #cm #c-txt{font-size:13px !important;line-height:1.5 !important;color:var(--cj-encre-douce) !important}
#cc--main #cm #c-txt a,#cc--main #cm .cc-link{color:var(--cj-encre) !important;border-bottom-color:var(--cj-vermillon) !important}
#cc--main #cm .c-bn{border-radius:999px !important;font-family:var(--cj-police-texte) !important;font-weight:700 !important;font-size:14px !important;padding:11px 18px !important}
#cc--main #cm #c-p-bn{background:var(--cj-vermillon) !important;color:var(--cj-blanc) !important;border:0 !important}
#cc--main #cm #c-s-bn{background:transparent !important;color:var(--cj-encre) !important;box-shadow:inset 0 0 0 1.5px var(--cj-filet) !important;border:0 !important}
@media (max-width:640px){
  #cc--main #cm{left:12px !important;right:12px !important;bottom:12px !important;max-width:none !important;padding:14px 16px !important}
  #cc--main #cm #c-ttl{font-size:17px !important;margin-bottom:4px !important}
  #cc--main #cm #c-txt{font-size:12.5px !important}
  #cc--main #cm #c-bns{display:flex !important;flex-direction:row !important;gap:8px !important;margin-top:10px !important}
  #cc--main #cm #c-bns .c-bn{flex:1 1 0 !important;margin:0 !important;padding:10px 12px !important}
}

/* ---------- les boutons d'action en vert (l'accent rare) ; tout le reste en marron terre ---------- */
.cj-btn:not(.cj-btn--secondaire),.cjt-entete .cjt-nav .cjt-nav-cta>a,#cc--main #cm #c-p-bn{background:var(--cj-accent) !important}
.cj-btn:not(.cj-btn--secondaire):hover,.cjt-entete .cjt-nav .cjt-nav-cta>a:hover{background:var(--cj-accent-fonce) !important}

/* ---------- Accessibilité (oct. 2026) : focus clavier visible, liens du pied de page touchables, animations réduites sur demande ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--cj-accent);outline-offset:3px;border-radius:4px}
.cjt-pied__nav a{display:inline-block;padding:12px 4px;margin:-12px 0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- l'en-tête (oct. 2026) : plus bas, collé en haut, en verre dépoli (on voit la page passer dessous, flouté) ---------- */
.cjt-entete{position:sticky;top:0;z-index:50;background:rgba(239,231,216,.62);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgba(38,33,28,.10)}
.admin-bar .cjt-entete{top:32px}
@media (max-width:782px){.admin-bar .cjt-entete{top:46px}}
@media (max-width:600px){.admin-bar .cjt-entete{top:0}}
.cjt-entete__in{padding:10px 32px;max-width:1240px}
.cjt-entete .cjt-nav .cjt-nav-cta>a{padding:10px 18px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cjt-entete{background:rgba(239,231,216,.96)}}
@media (max-width:760px){.cjt-entete__in{padding:8px 20px}}

/* le menu sur téléphone : deux traits (pas trois), sans cadre, zone tactile de 44 px ; ouvert, les deux traits font une croix */
.cjt-entete .cjt-burger{width:44px;height:44px;border:0;border-radius:50%;position:relative;background:none}
.cjt-entete .cjt-burger:hover{background:rgba(38,33,28,.06)}
.cjt-burger .cjt-burger-bars{background:transparent!important}
.cjt-burger .cjt-burger-bars::before{top:-4px}
.cjt-burger .cjt-burger-bars::after{top:4px}
body.cjt-nav-open .cjt-burger .cjt-burger-bars::before{transform:translateY(4px) rotate(45deg)}
body.cjt-nav-open .cjt-burger .cjt-burger-bars::after{transform:translateY(-4px) rotate(-45deg)}
/* plus de trait sous l'en-tête : le verre dépoli suffit à le détacher */
.cjt-entete{border-bottom:0}
/* téléphone : le menu fermé ne laisse plus de bande de 20 px sous l'en-tête (le remplissage de la liste restait visible) */
@media(max-width:860px){
  body:not(.cjt-nav-open) .cjt-entete .cjt-nav{visibility:hidden;border-bottom-width:0}
  body:not(.cjt-nav-open) .cjt-entete .cjt-nav ul{padding-top:0;padding-bottom:0}
}

/* ---------- le logo du site (oct. 2026) : la kei car au-dessus, le nom en Satisfy dessous ---------- */
.cjt-marque{flex-direction:column;gap:0;line-height:1}
.cjt-marque__kei{width:46px;height:auto}
.cjt-marque__nom{font-family:var(--cj-police-signature);font-weight:400;font-size:17px;letter-spacing:0;color:var(--cj-vermillon-fonce)}
.cjt-h h2,.cjt-sec__titre,.cjt-hero__titre,.cjt-route__titre,.cjt-esprit h3{font-family:var(--cj-police-signature);font-weight:400;letter-spacing:0;line-height:1.25}
.cjt-hero__titre{font-size:clamp(40px,5vw,68px)}
.cjt-sec__titre{font-size:clamp(32px,4vw,52px)}