:root{--red:#D7000F;--ink:#20201f;--grey:#6b6b68;--grey-light:#f4f2ef;--grey-mid:#e2ded7;
  --paper:#fffdfa;--ocre:#b8752f;--rose:#a8475f;--accent:var(--red);
  --serif:'Didot','Bodoni MT','Playfair Display','Times New Roman',Georgia,serif;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;color:var(--ink);
  background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{letter-spacing:-.015em;}
.ic{width:1em;height:1em;vertical-align:-.15em;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none;}
.wrap{max-width:820px;margin:0 auto;padding:0 32px;}
#p-japan-exception>.wrap,#p-terrasses>.wrap,#p-life-is-design>.wrap,#p-archives>.wrap{padding-top:14px;}
#p-about>.wrap{padding-top:40px;}

/* ---------------- EN-TETE ---------------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--red);}
.site-header,.banner,.pagehead{max-width:820px;margin:0 auto;}
body[data-page="accueil"] .site-header{border-bottom-color:rgba(255,255,255,.10);}
.hdr{max-width:820px;margin:0 auto;height:108px;box-sizing:border-box;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:22px;}
.brand-col{display:flex;flex-direction:column;flex:none;position:relative;}
.brand{display:flex;align-items:center;gap:13px;flex:none;}
.brand img{width:40px;height:40px;border-radius:9px;box-shadow:0 4px 10px -6px rgba(0,0,0,.5);}
.brand .word{color:#fff;font-size:40px;font-weight:800;letter-spacing:-.025em;white-space:nowrap;}
.brand .word b{color:#fff;}
.hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none;}
.hdr-tagline{display:none;}
.hdr-cap{display:none;}
nav.main{display:flex;flex-direction:row;align-items:center;gap:22px;margin-top:5px;}
nav.main a{padding:6px 16px;font-size:15px;font-weight:800;letter-spacing:.01em;
  font-family:-apple-system,'Helvetica Neue',Arial,'Hiragino Sans',sans-serif;
  text-transform:none;color:#fff;white-space:nowrap;background:rgba(255,255,255,.16);
  border-radius:999px;transition:background .15s;}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.30);}
nav.main a.on{background:#fff;color:var(--red);}
.pagehead .secbtn.on{background:#fff;color:var(--red);border-color:#fff;}
.tools{display:flex;align-items:center;gap:2px;flex:none;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.10);}
.tools a,.tools .tool-btn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:800;}
.tools .tool-btn{border:0;background:none;padding:0;cursor:pointer;font:inherit;}
.tools a:hover,.tools .tool-btn:hover{background:rgba(255,255,255,.16);}
.tools .ic{width:20px;height:20px;stroke-width:1.7;}

/* Sélecteur de langue du bandeau : curseur à segments (même principe que le
   sélecteur Français/日本語 des pages intérieures), FR/JA/EN toujours visibles
   côte à côte — décision actée dans langue-strategie.md (28/8) : jamais de
   sous-menu, le choix des langues doit se voir dès l'arrivée. */
.hdr-lang{display:inline-flex;border:1.5px solid rgba(255,255,255,.75);border-radius:999px;
  overflow:hidden;background:rgba(255,255,255,.16);}
.hdr-lang button{border:0;background:transparent;padding:7px 10px;font-size:11px;font-weight:800;
  letter-spacing:.03em;color:#fff;cursor:pointer;font:inherit;line-height:1;}
.hdr-lang button.on{background:#fff;color:var(--red);}
.hdr-lang button:not(.on):hover{background:rgba(255,255,255,.22);}

.tools .sep{width:1px;height:18px;background:rgba(255,255,255,.22);margin:0 3px;}
@media(max-width:1080px){nav.main a{padding:5px 11px;font-size:10px;}}
body[data-page="accueil"] .hdr-tagline.hdr-tagline-home,
body[data-page="about"] .hdr-tagline.hdr-tagline-about,
body[data-page="archives"] .hdr-tagline.hdr-tagline-archives,
body[data-page="cal"] .hdr-tagline.hdr-tagline-cal,
body[data-page="mdj"] .hdr-tagline.hdr-tagline-mdj,
body[data-page="ongles"] .hdr-tagline.hdr-tagline-ongles{display:block;color:#fff;font-weight:700;
  font-size:12px;line-height:1.15;position:absolute;left:54px;top:62.75px;margin:0;
  white-space:nowrap;width:auto;max-width:none;}
/* Tagline des 4 pages de garde de catégorie (Japan Exception, Life is Design,
   Terrasses, Toutes les terrasses) : posée dans leur propre bandeau, juste
   au-dessus des 3 boutons de catégorie, plutôt qu'accolée au logo comme les
   autres pages — ce sont des pages de section, pas des pages de contenu. */
.banner-tagline{margin:0 0 8px;font-size:13px;line-height:1.4;font-weight:700;color:#ffd9d6;max-width:640px;}
body[data-page="archives"] .hdr-cap{display:block;color:#fff;font-weight:700;
  font-size:11.5px;line-height:1.25;max-width:150px;text-align:right;margin-right:1ch;}
@media(max-width:900px){.hdr{flex-wrap:wrap;height:auto;min-height:0;padding:12px 18px;gap:0;position:relative;}
  /* La tagline se positionne par rapport à .hdr (et non plus .brand-col) en
     mobile : .brand-col ne fait que la largeur de son contenu (logo+texte),
     donc un width en % dessus se calculait sur ~230px au lieu de la largeur
     réelle du bandeau — la tagline restait tronquée même quand la place ne
     manquait pas. */
  .brand-col{position:static;}
  /* Icônes (Instagram/LinkedIn/recherche/langue) + "À propos" détachées du flux
     et posées en haut à droite, sur la MÊME ligne que le logo, au lieu de
     former une 2e ligne pleine largeur sous la tagline — ça évite d'empiler
     une 3e ligne rouge rien que pour elles et ça libère la ligne juste sous
     le logo pour la tagline seule. Tout est réduit pour tenir à côté du logo
     sur un écran de 390px (logo+texte ≈140px + bloc icônes ≈195px ≤ 354px
     de largeur utile une fois le padding du bandeau ramené à 18px). */
  .hdr-right{position:absolute;top:12px;right:18px;flex-direction:row;flex-wrap:nowrap;
    justify-content:flex-end;align-items:center;width:auto;order:0;margin-top:0;gap:4px;}
  nav.main{order:0;width:auto;margin-top:0;margin-left:0;gap:4px;}
  nav.main a{padding:4px 6px;font-size:9px;}
  .tools{gap:1px;padding:2px;}
  .tools a,.tools .tool-btn{width:22px;height:22px;}
  .tools .ic{width:14px;height:14px;}
  .tools .sep{height:14px;margin:0 1px;}
  .hdr-lang button{padding:3px 4px;font-size:8px;}
  .brand .word{font-size:20px;line-height:1;}.brand img{width:40px;height:40px;border-radius:10px;}
  /* La tagline suit désormais le FLUX normal de .brand-col (flex-column) au
     lieu d'un position:absolute calé à la main sur la hauteur du logo — elle
     s'empile proprement sous le logo, sans jamais pouvoir le chevaucher,
     quelle que soit la taille réelle du texte du logo. Elle passe sous le
     bloc icônes (position:absolute, donc hors du flux) : plus aucun risque
     de collision entre les deux. */
  body[data-page="accueil"] .hdr-tagline.hdr-tagline-home,
  body[data-page="about"] .hdr-tagline.hdr-tagline-about,
  body[data-page="archives"] .hdr-tagline.hdr-tagline-archives,
  body[data-page="cal"] .hdr-tagline.hdr-tagline-cal,
  body[data-page="mdj"] .hdr-tagline.hdr-tagline-mdj,
  body[data-page="ongles"] .hdr-tagline.hdr-tagline-ongles{position:static;left:auto;top:auto;
    display:block;margin-top:4px;font-size:10.3px;line-height:1.15;
    max-width:calc(100vw - 36px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body[data-page="archives"] .hdr-cap{display:none;}
  .banner-tagline{font-size:10.3px;line-height:1.3;margin:0 0 6px;max-width:100%;
    white-space:normal;}
  /* Chaque bandeau garde sa propre hauteur, au plus juste de son contenu —
     une hauteur commune forcée sur toutes les pages (ancienne approche, cf.
     passe 65) créait un grand vide rouge sur les pages au bandeau court dès
     qu'une autre page (ex. Toutes les terrasses) avait un bandeau plus haut. */
  /* min-height:92px (hérité de la règle de base, pensée pour un bandeau
     desktop) est maintenant plus grand que le contenu réel du bandeau mobile
     (juste la rangée de boutons) depuis que l'en-tête a été raccourci — ça
     créait un vide rouge entre la tagline et les boutons de catégorie. Sur
     mobile le bandeau doit pouvoir descendre sous 92px, sans plancher forcé. */
  .banner{height:auto !important;min-height:0 !important;
    /* Le bandeau (boutons de catégorie) reste visible au défilement, collé
       sous l'en-tête sticky. --hdrh est mesuré en JS sur la vraie hauteur de
       l'en-tête (voir updateHdrH) : elle varie selon que la page a une
       tagline ou non, une valeur fixe aurait laissé un vide ou chevauché. */
    position:sticky !important;top:var(--hdrh,80px);z-index:59;}
  .bnr{padding-bottom:6px;}
  /* Le bandeau rouge (logo → boutons de catégorie) n'avait pas la même
     hauteur totale en page de garde et en pages intérieures : .pagehead
     ajoutait 8px de padding en haut ET en bas (16px au total) que le
     bandeau de la page de garde n'a pas. Aligné sur le même padding que
     .bnr ci-dessus pour une hauteur de bandeau strictement identique
     partout. */
  .pagehead{padding:0 !important;}
  .pagehead>.wrap{padding-bottom:6px;}
  .pagehead .secs{margin-top:0 !important;}
}

/* ---------------- PAGES ---------------- */
.page{display:none;}.page.on{display:block;}
.pagehead{background:var(--red);padding:8px 0;}
.pagehead h1{font-size:24px;line-height:1.05;margin:0 0 5px;color:#fff;letter-spacing:-.03em;}
.pagehead h1 .lg{font-family:var(--serif);font-weight:400;letter-spacing:0;}
.pagehead p{margin:0;font-size:13px;line-height:1.4;max-width:800px;color:#ffd9d6;}
.archives-sub{margin:0 0 18px;font-size:13px;line-height:1.4;color:var(--grey);}
.pagehead p .count{font-weight:800;color:#fff;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);
  color:#fff;font-weight:700;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:13px 24px;border-radius:9px;}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent);}
.center{display:flex;justify-content:center;padding:8px 0 12px;}

/* ---------------- ACCUEIL ---------------- */
.banner{position:relative;background:var(--red);overflow:visible;display:flex;align-items:flex-end;height:auto;min-height:92px;}

.banner>.wrap{width:100%;}
.banner .secs{max-width:820px;margin-left:0;margin-right:0;}
.banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 2px,transparent 2px 16px);opacity:.5;}
.bnr{position:relative;z-index:1;padding-top:0;padding-bottom:10px;}
.bnr h1{color:#fff;font-size:12px;font-weight:700;line-height:1.35;letter-spacing:0;
  max-width:420px;margin:0 0 10px;}
.secs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end;position:relative;z-index:1;}
body.at-top .secs{z-index:61;}
.pagehead .secs{margin-top:4px;}
.seccol{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;min-width:0;}
.seccol .cap{margin:0;font-size:12px;line-height:1.15;font-weight:700;color:#ffd9d6;}
.secbtn{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:12px 12px;border-radius:8px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.4);
  text-decoration:none;font-family:-apple-system,'Helvetica Neue',Arial,'Hiragino Sans',sans-serif;font-size:14px;font-weight:800;
  letter-spacing:.01em;color:#fff;transition:background .15s,border-color .15s;line-height:1.2;}
.secbtn:hover{background:rgba(255,255,255,.28);border-color:#fff;}

.sep-deco{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 0;}
.sep-deco span{height:1px;flex:1;background:var(--grey-mid);}
.sep-deco i{width:8px;height:8px;background:var(--red);transform:rotate(45deg);flex:none;}
.iglogo{width:22px;height:22px;flex:none;}
.homearch{padding:10px 0 24px;}
.mm-head{display:flex;align-items:center;flex-wrap:wrap;
  gap:14px;margin:0 0 18px;max-width:820px;}
.ig-mention{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--grey);margin-left:auto;}
.ig-mention .btn{display:inline-flex;align-items:center;gap:8px;}
.ig-mention .btn .iglogo{width:16px;height:16px;}
.ig-mention .btn{padding:8px 16px;font-size:10px;background:#fff;color:var(--red);}
.mm-head h3{margin:0;font-size:12.5px;font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);}
.mm-head .mm-sub{margin:0;font-size:12.5px;color:var(--grey);}
.latest6{padding:28px 32px 24px;}
.posts6{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:820px;margin:0;}
.postcard{min-height:132px;}
.postcard{border:1.5px solid var(--red);border-radius:10px;overflow:hidden;background:#fff;
  display:flex;flex-direction:row;align-items:stretch;transition:box-shadow .15s;}
.postcard:hover{box-shadow:0 8px 18px -12px rgba(0,0,0,.35);}
.postcard .im{flex:0 0 42%;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:#e7e2d8;}
.postcard .bd{padding:14px 18px;display:flex;flex-direction:column;justify-content:center;flex:1;
  border-left:1px solid var(--grey-mid);min-width:0;}
.postcard h3{margin:0 0 6px;font-size:14.5px;line-height:1.3;font-weight:700;color:var(--ink);}
.postcard p{margin:0;font-size:11px;color:var(--grey);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.postcard p a{color:var(--red);font-weight:600;}


/* ---------------- listes ---------------- */
.feature{display:grid;grid-template-columns:1.1fr .9fr;border:3px solid var(--grey-mid);
  border-radius:16px;overflow:hidden;margin-bottom:26px;}
.feature[data-p],.card[data-p]{cursor:pointer;}
.feature .im{background-size:cover;background-position:center;min-height:280px;background-color:#e7e2d8;}
.feature .bd{padding:32px;display:flex;flex-direction:column;justify-content:center;background:#fff;}
.feature h2{margin:0 0 10px;font-size:24px;line-height:1.2;}
.feature .date{font-size:12px;color:var(--grey);margin:0 0 14px;}
.feature p{margin:0;font-size:13.5px;color:var(--ink);line-height:1.6;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:34px;}
#p-life-is-design .grid3{padding-bottom:17px;}
.card{border:3px solid var(--grey-mid);border-radius:14px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;}
.card .im{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#e7e2d8;}
.card .bd{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;}
.card h3{margin:0 0 7px;font-size:15.5px;line-height:1.3;}
.card p{margin:0 0 10px;font-size:12.5px;color:var(--grey);line-height:1.5;}
.card .date{margin-top:auto;font-size:11.5px;color:var(--grey);}

.map{border:3px solid var(--grey-mid);border-radius:16px;overflow:hidden;margin-bottom:26px;}
.map iframe{display:block;width:100%;height:420px;border:0;}
.map .note{display:flex;align-items:center;gap:9px;padding:11px 18px;background:var(--grey-light);
  font-size:12.5px;color:var(--grey);}
.map .note a{color:var(--ocre);font-weight:600;}
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:36px;}
.q{border:3px solid var(--grey-mid);border-radius:14px;overflow:hidden;background:#fff;}
.q .im{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#e7e2d8;}
.q .bd{padding:12px 14px 14px;}
.backlink{display:inline-block;margin-top:22px;font-size:13px;font-weight:700;color:var(--red);}
.tgroups{display:flex;flex-direction:column;gap:8px;padding:20px 0 36px;}
.tgroup-name{font-size:15px;font-weight:800;color:var(--red);margin:22px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--grey-mid);}
.tgroup:first-child .tgroup-name{margin-top:0;}
/* Terrasses : cartes doublées (2 colonnes au lieu de 4, tailles ~x2). */
.tcard-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.tcard{border:1.5px solid var(--grey-mid);border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column;}
.tcard .im{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#e7e2d8;}
.tcard .bd{padding:16px 18px 20px;}
.tcard h4{margin:0;font-size:20px;font-weight:700;line-height:1.25;}
.tcard p{margin:0 0 5px;font-size:14px;color:var(--grey);line-height:1.5;}.tcard p:last-child{margin-bottom:0;}
.tcard p a{color:var(--ocre);font-weight:600;text-decoration:underline;}
/* Nom + lien(s) sur la même ligne : le lien est posé à droite du nom au lieu
   d'être rejeté en pied de carte. */
/* Nom et lien(s) sur la même ligne, lien(s) alignés à droite. Le nom garde
   la priorité sur l'espace (flex:1) et peut passer sur 2 lignes si besoin ;
   les liens ne rétrécissent jamais (flex:none + nowrap). */
.tcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 6px;}
.tcard-head h4{flex:1;min-width:0;}
.tcard-links-inline{flex:none;text-align:right;font-size:12px;font-weight:600;white-space:nowrap;}
.tcard-links-inline a{color:var(--ocre);text-decoration:underline;}
/* Texte du post original (verbatim, maiaiam.com). */
.tcard .tcard-desc{color:var(--ink);}
@media(max-width:900px){.tcard-list{grid-template-columns:1fr;}
  /* Fiches Terrasses ramenées à un format compact (~1/4 de l'espace occupé
     avant) : ni la vignette ni le texte n'avaient de réglage mobile propre,
     les cartes gardaient leur taille desktop (image 16/10, h4 20px, texte
     14px) sur téléphone — beaucoup trop grand pour une liste de 56 adresses. */
  .tgroups{gap:4px;padding:12px 0 24px;}
  .tgroup-name{font-size:12.5px;margin:14px 0 6px;padding-bottom:4px;}
  .tcard-list{gap:10px;}
  .tcard{border-radius:10px;flex-direction:row;}
  .tcard .im{aspect-ratio:auto;width:84px;flex:none;}
  .tcard .bd{padding:6px 8px 7px;min-width:0;}
  .tcard-head{margin:0 0 2px;gap:6px;}
  .tcard h4{font-size:12.5px;line-height:1.2;}
  .tcard-links-inline{font-size:9.5px;}
  .tcard p{font-size:10px;line-height:1.3;margin:0 0 2px;}
}
.terr-more{margin-top:10px;font-size:11.5px;color:var(--grey);font-style:italic;}
.q h3{margin:0 0 3px;font-size:14px;}
.q p{margin:0;font-size:11.5px;color:var(--grey);}

/* ---------------- exprime ---------------- */
.exprime{background:var(--red);color:#fff;margin-top:10px;max-width:820px;margin-left:auto;margin-right:auto;}
.exprime .wrap{padding-top:30px;padding-bottom:12px;display:grid;grid-template-columns:1.2fr .8fr;
  gap:24px;align-items:center;}
.exprime img.logo{height:42px;width:auto;border-radius:5px;margin-bottom:12px;}
.exprime h2{margin:0 0 8px;font-size:22px;color:#fff;line-height:1.15;font-family:var(--serif);font-weight:400;}
.exprime p{margin:0;font-size:13.5px;line-height:1.5;color:#ffe3e2;max-width:480px;}
.exprime .acts{display:flex;flex-direction:column;gap:10px;align-items:stretch;}
.exprime .acts a{background:#fff;color:var(--red);border:2px solid #fff;}
.exprime .acts a.out{background:transparent;color:#fff;}
.exprime.promo{margin-top:20px;max-width:820px;margin-left:auto;margin-right:auto;}
.exprime.promo .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px;
  grid-template-columns:none;}
.exprime.promo img.logo{margin-bottom:0;flex:none;height:30px;}
.exprime.promo .promo-txt{flex:1;min-width:280px;}
.exprime.promo .promo-txt .fr{margin:0;font-size:14px;line-height:1.45;color:#ffe3e2;}
.exprime.promo .promo-txt .fr2{font-size:11.5px;font-weight:400;line-height:1.4;display:inline-block;margin-top:2px;}
.exprime.promo .btn{flex:none;background:#fff;color:var(--red);border:2px solid #fff;white-space:nowrap;padding:11px 18px;font-size:11px;}

/* ---------------- archives ---------------- */
.arch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.arch.compact .ac .im{aspect-ratio:16/9;}
.arch.compact .ac h3{font-size:19px;margin-bottom:7px;}
.arch.compact .ac p{font-size:12px;line-height:1.45;margin-bottom:13px;}
.homearch .ac h3{font-size:13.5px;font-weight:700;margin-bottom:3px;}
.homearch .ac p{font-size:11px;margin-bottom:0;}
.homearch .arch.compact{max-width:820px;margin:0;gap:22px;grid-template-columns:repeat(3,1fr);}
.homearch .arch.compact .ac{display:flex;flex-direction:row-reverse;align-items:stretch;
  border:1.5px solid var(--grey-mid) !important;border-radius:10px;min-height:168px;}
.homearch .arch.compact .ac .im{flex:0 0 34%;aspect-ratio:unset;background-size:cover;
  background-repeat:no-repeat;background-color:#efe9dd;}
.homearch .arch.compact .ac.cal .im{background-size:contain;}
.homearch .arch.compact .ac.cal .im{position:relative;}
.homearch .arch.compact .ac.cal .month-tag{position:absolute;left:10px;bottom:10px;color:#fff;
  font-family:var(--serif);font-size:15px;font-weight:400;letter-spacing:.02em;
  text-shadow:0 1px 6px rgba(0,0,0,.55);}
.homearch .arch.compact .ac.ig{text-decoration:none;color:var(--ink);
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:18px 10px;
  background:#fff;}
.homearch .arch.compact .ac.ig .ig-badge{width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,#fdf497,#fd5949,#d6249f,#285AEB);display:flex;align-items:center;justify-content:center;}
.homearch .arch.compact .ac.ig .iglogo-big{width:32px;height:32px;}
.homearch .arch.compact .ac.ig h3{color:var(--ink);font-size:14px;margin:0;}
.ig-follow{margin:22px 0 0;}
.ig-follow .ac.ig{text-decoration:none;color:var(--ink);flex-direction:row;
  align-items:center;justify-content:flex-start;gap:14px;padding:14px 18px;
  border:3px solid var(--grey-mid);border-radius:12px;background:#fff;max-width:260px;}
.ig-follow .ac.ig .ig-badge{width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,#fdf497,#fd5949,#d6249f,#285AEB);display:flex;align-items:center;justify-content:center;}
.ig-follow .ac.ig .iglogo-big{width:22px;height:22px;}
.ig-follow .ac.ig h3{color:var(--ink);font-size:14px;margin:0;}

.homearch .arch.compact .ac .bd{border-right:1px solid var(--grey-mid);justify-content:center;
  padding:10px 12px;min-width:0;flex:1 1 auto;}
.ac{border:3px solid var(--grey-mid);border-radius:12px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;}
.ac.cal{border-color:var(--ink);}.ac.jour{border-color:var(--red);}.ac.ong{border-color:var(--rose);}
.ac .im{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#efe9dd;}
.arch:not(.compact) .ac.cal .im{aspect-ratio:5/8;background-size:contain;background-repeat:no-repeat;background-position:center;}
.arch:not(.compact) .ac.jour .im{aspect-ratio:5/8;background-size:cover;background-position:center;}
.arch:not(.compact) .ac.ong .im{aspect-ratio:5/8;background-size:cover;background-position:center;}
.ac .bd{padding:9px 11px 9px;display:flex;flex-direction:column;flex:1;}
.arch:not(.compact) .ac .go{margin-top:auto;padding-top:13px;}
.ac h3{margin:0 0 8px;font-size:19px;font-family:var(--serif);font-weight:400;}
.ac p{margin:0 0 9px;font-size:12px;color:var(--grey);line-height:1.4;}
.ac p a{color:var(--ink);border-bottom:1.5px solid currentColor;font-weight:600;}
.ac .go{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:12px;border-radius:8px;}
.ac.cal .go{background:var(--ink);}.ac.jour .go{background:var(--red);}.ac.ong .go{background:var(--rose);}
.igbtn{display:inline-flex;align-items:center;gap:12px;border:3px solid var(--grey-mid);
  border-radius:14px;padding:13px 20px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:#fff;flex:none;}
.nailrow{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  margin:40px 0 0;}
.nailhead{margin:0;font-size:30px;line-height:1.1;font-family:var(--serif);font-weight:400;}
.nailsub{margin:0;font-size:14.5px;color:var(--grey);}
.nailtitle{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.nails{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:26px 0 12px;}
#cal-grid{grid-template-columns:repeat(4,1fr);}
.nail .im{aspect-ratio:1/1;border-radius:12px;background-size:cover;background-position:center;
  background-color:#efe9dd;margin-bottom:9px;}
.nail-cal .im{aspect-ratio:3/10;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#efe9dd;max-width:50%;margin:0 auto 9px;}
/* Ongles : vignettes rondes, zoomées sur le motif (valeur de départ, à affiner
   à l'œil — voir l'outil de réglage ongles-zoom-reglage.html). */
.nail-ongle .im{border-radius:50%;background-size:185%;background-position:center;}
.ac .im[data-p],.homearch .ac[data-p]{cursor:pointer;}
.nail[data-p]{cursor:pointer;}
.nail h4{margin:0 0 2px;font-size:12.5px;line-height:1.3;}
.nail span{font-size:11px;color:var(--grey);}
.nail-cal h4,.nail-cal span{display:block;max-width:50%;margin-left:auto;margin-right:auto;text-align:center;}

/* ---------------- about ---------------- */
.about{display:grid;grid-template-columns:.72fr 1.28fr;gap:46px;align-items:start;padding-bottom:56px;}
.about .por{border-radius:18px;background-size:cover;background-position:center;aspect-ratio:4/5;
  box-shadow:0 24px 46px -26px rgba(0,0,0,.55);}
.about h2{margin:0 0 14px;font-size:26px;line-height:1.2;font-family:var(--serif);font-weight:400;}
.about p{font-size:14.5px;line-height:1.75;margin:0 0 15px;}
.lang{display:inline-flex;border:2px solid var(--grey-mid);border-radius:999px;overflow:hidden;
  margin-bottom:22px;font-size:11.5px;font-weight:800;letter-spacing:.06em;}
.lang button{border:0;background:transparent;padding:8px 20px;cursor:pointer;color:var(--grey);font:inherit;}
.lang button.on{background:var(--ink);color:#fff;}
.langbox .jp{display:none;}.langbox.jp-on .fr{display:none;}.langbox.jp-on .jp{display:block;}
.about .jp p{font-size:14px;line-height:2;}
#item-text-jp{line-height:2;}
#item-text-jp{white-space:pre-line;}
#item-text p{margin:0 0 10px;}
#item-wrap{text-align:left;}
#item-head{display:flex;flex-direction:row;align-items:flex-start;gap:18px;}
#item-img{order:0;flex:0 0 auto;max-width:120px;margin:0;}
#item-headcol{order:1;flex:1;min-width:0;text-align:left;}
#item-title{text-align:left;font-size:24px;margin:0 0 4px;}
#item-date{text-align:left;margin:0 0 10px;}
#item-langwrap{text-align:left;margin:0;}
#item-text{margin-top:20px;}
/* Calendrier des Heures : l'image flotte à gauche ; le nom du mois et le sélecteur
   de langue viennent l'habiller en haut à droite (Prairial juste sous Mai) ; le texte
   commence juste en dessous, dans la même colonne étroite, puis repasse en pleine
   largeur dès qu'il dépasse le bas du visuel (habillage CSS classique). */
body[data-item-type="cal"] #item-head{display:block;}
body[data-item-type="cal"] #item-img{float:left;margin:0 20px 10px 0;}
/* Le sélecteur de langue est sorti du flux (position absolue en haut à droite de la
   colonne) pour ne pas imposer sa hauteur au titre : "Prairial" reste collé sous "Mai". */
body[data-item-type="cal"] #item-headcol{position:relative;padding-right:130px;}
body[data-item-type="cal"] #item-title{margin:0;}
body[data-item-type="cal"] #item-date{margin:0;}
body[data-item-type="cal"] #item-langwrap{position:absolute;top:0;right:0;margin:0;}
body[data-item-type="cal"] #item-text{margin-top:1.6em;}
@media(max-width:640px){
  #item-head{flex-direction:column;align-items:center;text-align:center;}
  #item-headcol{text-align:center;}
  #item-title{text-align:center;}
  #item-date{text-align:center;}
  #item-langwrap{text-align:center;}
  body[data-item-type="cal"] #item-img{float:none;display:block;margin:14px auto 0 !important;order:3;}
  /* Nom du mois + choix français/japonais au-dessus de l'image (au lieu d'en
     dessous) : #item-headcol passe en display:contents, ses enfants
     deviennent des items flex directs de #item-head et peuvent donc être
     réordonnés individuellement avec order, sans toucher au HTML ni au
     bureau (desktop garde son habillage flottant existant). */
  body[data-item-type="cal"] #item-head{display:flex;flex-direction:column;align-items:center;}
  body[data-item-type="cal"] #item-headcol{display:contents;}
  body[data-item-type="cal"] #item-title{order:1;padding-right:0;text-align:center;}
  body[data-item-type="cal"] #item-langwrap{order:2;position:static;display:flex;justify-content:center;margin:6px 0 0;}
  body[data-item-type="cal"] #item-date{order:4;text-align:center;margin-top:12px;}
  body[data-item-type="cal"] #item-text{order:5;margin-top:1.2em;}
  body[data-item-type="cal"] #item-text-jp{order:6;}
}
#item-text a{color:var(--ocre);text-decoration:underline;}
/* Navigation bas de page : post précédent / post suivant. */
#item-pagenav{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--grey-mid);}
.itemnav{display:flex;flex-direction:column;max-width:47%;cursor:pointer;}
.itemnav .lbl{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--red);margin-bottom:5px;}
.itemnav .ttl{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35;}
.itemnav.next{margin-left:auto;text-align:right;align-items:flex-end;}
@media(max-width:640px){.itemnav{max-width:100%;}
  #item-pagenav{flex-direction:column;gap:16px;}
  .itemnav.next{align-items:flex-start;text-align:left;}}
.about .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 20px;margin:24px 0 22px;}
.about .facts div{border-left:3px solid var(--red);padding-left:13px;}
.about .facts b{display:block;font-size:20px;font-weight:800;line-height:1.1;}
.about .facts span{font-size:11px;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;}

footer{background:var(--ink);color:#a8a5a0;padding:13px 0;margin-top:4px;max-width:820px;margin-left:auto;margin-right:auto;}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;text-align:left;}
footer a{color:#e6e3de;}

#p-archives .arch{max-width:70%;margin:0;}
#p-archives .arch .ac.cal .im,#p-archives .arch .ac.jour .im,#p-archives .arch .ac.ong .im{aspect-ratio:25/28;}
#p-archives .arch .ac .bd{padding:5px 8px 6px;}
#p-archives .arch .ac h3{font-size:15px;margin:0 0 4px;min-height:48px;display:flex;align-items:center;width:100%;}
#p-archives .arch .ac p{font-size:10.5px;margin:0 0 9px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
#p-archives .arch .ac .go{font-size:8.5px;padding:9px 6px;min-height:40px;text-align:center;line-height:1.3;}
@media(max-width:900px){
  .bnr,.about,.exprime .wrap,.feature{grid-template-columns:1fr;}
  .grid3,.arch{grid-template-columns:1fr;}
  /* Japan Exception / Design is Life : posts réduits de moitié — 2 colonnes
     au lieu d'1, vignette et police resserrées pour tenir dans la colonne. */
  #p-japan-exception .grid3,#p-life-is-design .grid3{grid-template-columns:repeat(2,1fr);gap:10px;}
  #p-japan-exception .card,#p-life-is-design .card{border-width:1.5px;border-radius:9px;}
  #p-japan-exception .card .im,#p-life-is-design .card .im{aspect-ratio:4/3;}
  #p-japan-exception .card .bd,#p-life-is-design .card .bd{padding:8px 9px;}
  #p-japan-exception .card h3,#p-life-is-design .card h3{font-size:11.5px;margin:0 0 4px;}
  #p-japan-exception .card p,#p-life-is-design .card p{font-size:9.5px;margin:0 0 5px;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
  #p-japan-exception .card .date,#p-life-is-design .card .date{font-size:8.5px;}
  #p-japan-exception .feature,#p-life-is-design .feature{border-width:1.5px;}
  #p-japan-exception .feature .im,#p-life-is-design .feature .im{min-height:150px;}
  #p-japan-exception .feature .bd,#p-life-is-design .feature .bd{padding:16px;}
  #p-japan-exception .feature h2,#p-life-is-design .feature h2{font-size:16px;}
  #p-japan-exception .feature p,#p-life-is-design .feature p{font-size:11.5px;}
  /* Les 3 boutons de catégorie (.secs) restent côte à côte sur mobile au lieu
     de s'empiler en colonne — l'empilement à 3 lignes gonflait beaucoup trop
     la hauteur du bandeau rouge. Police et espacement réduits pour que
     "Design is Life, Life is Design" tienne sur 2 lignes dans sa colonne. */
  .secs{gap:6px;}
  .banner .wrap{padding:0 18px;}
  .secbtn{padding:8px 5px;font-size:12px;line-height:1.15;}
  .seccol{gap:3px;}
  .seccol .cap{font-size:9.5px;}
  /* Légende de la page Conviviale des Terrasses : forcée sur une seule ligne
     (elle portait un <br> manuel qui la coupait en 2 lignes). */
  .seccol .cap.cap-oneline{font-size:8.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  #p-archives .arch{grid-template-columns:repeat(2,1fr);gap:7px;max-width:100%;}
  .qgrid{grid-template-columns:repeat(2,1fr);}
  /* Cartes quartier (page de garde Terrasses) réduites de moitié : gap, marge
     interne et police divisés par ~2 par rapport au format desktop hérité. */
  .qgrid{gap:10px;padding-bottom:18px;}
  .q .bd{padding:6px 7px 7px;}
  .q h3{font-size:11px;margin:0 0 2px;}
  .q p{font-size:9.5px;}
  /* Vignettes "Mois après mois" (home-nails) réduites de 50% : 4 colonnes au
     lieu de 2, police resserrée d'autant. */
  .nails{grid-template-columns:repeat(4,1fr);gap:8px;}
  /* margin-bottom seul (pas margin:0 0 1px) : un raccourci margin aurait
     remis margin-left/right à 0 et cassé le centrage automatique du nom du
     mois posé par .nail-cal h4 (bug trouvé : le nom du calendrier se
     retrouvait plaqué à gauche, décalé par rapport à l'illustration
     centrée juste au-dessus). */
  .nail h4{font-size:9.5px;margin-bottom:1px;}
  .nail span{font-size:8.5px;}
  .tgroups{grid-template-columns:1fr;}
  #cal-grid{grid-template-columns:repeat(4,1fr);gap:8px;}
  .iggrid{grid-template-columns:repeat(3,1fr);}
  .about .facts{grid-template-columns:repeat(2,1fr);}
  /* Bandeau rouge "exprime" (bas de page) rapproché du dernier post / de la
     fin du texte, sur la page de garde et la page À propos. */
  .homearch{padding-bottom:6px;}
  .about{padding-bottom:16px;}
  .exprime.promo{margin-top:4px;}
  /* Photo de la page À propos réduite à 30% de sa largeur (soit -70%), au
     lieu de s'étaler sur toute la largeur de l'écran une fois la grille
     repassée en 1 colonne. */
  .about .por{width:30%;justify-self:center;margin:0 0 18px;}
  .bnr .kick b{font-size:32px;}.bnr .kick span{font-size:22px;}
  .bnr .blogo{width:130px;height:130px;border-radius:30px;}

  /* "Mois après mois" (Calendrier / Maïa du Jour / Ongles) : les 3 cartes
     tiennent sur la même ligne (-30% de largeur chacune par rapport à la
     version 2 colonnes), au lieu d'une carte pleine largeur par ligne —
     cartes et vignettes réduites en conséquence. */
  .homearch .arch.compact{grid-template-columns:repeat(3,1fr);gap:6px;max-width:100%;}
  .homearch .arch.compact .ac{flex-direction:column;}
  .homearch .arch.compact .ac .im{aspect-ratio:1/1;flex:none;}
  .homearch .arch.compact .ac .bd{border-right:0;padding:5px 6px 6px;}
  .homearch .arch.compact .ac h3{font-size:9.5px;margin-bottom:1px;line-height:1.2;}
  /* Texte complet, non tronqué (demande explicite : pas de résumé coupé). */
  .homearch .arch.compact .ac p{font-size:8px;line-height:1.25;}
  .homearch .arch.compact .ac.cal .month-tag{left:5px;bottom:5px;font-size:10px;}
  .exprime .acts{width:100%;}
  /* Les boutons de catégorie des pages intérieures suivent désormais la même
     mise en page qu'en page de garde (3 colonnes côte à côte) au lieu d'être
     empilés en 1 colonne. */
}
/* Les cartes .posts6 restent en 2 colonnes jusqu'à un écran vraiment étroit
   (téléphone) : en 1 colonne dès 900px, la largeur du bandeau de texte à
   côté de chaque vignette était à moitié vide sur les écrans intermédiaires
   (tablette, fenêtre desktop réduite ~780-850px). */
@media(max-width:640px){
  .posts6{grid-template-columns:1fr;max-width:100%;}
}

/* --- cartes cliquables : le titre porte un vrai lien étiré sur toute la carte --- */
.has-link{position:relative;cursor:pointer;}
a.stretch{color:inherit;text-decoration:none;}
a.stretch::after{content:"";position:absolute;inset:0;z-index:1;}
.has-link a:not(.stretch){position:relative;z-index:2;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Images de vignettes : vraies balises <img> (remplacent background-image) */
.im,.por{position:relative;overflow:hidden;}
.im>img,.por>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.nail-cal .im>img,.arch:not(.compact) .ac.cal .im>img,.homearch .arch.compact .ac.cal .im>img{object-fit:contain;}
.nail-ongle .im>img{inset:auto;left:50%;top:50%;width:185%;height:auto;max-width:none;transform:translate(-50%,-50%);}

/* --- En-tête mobile : réglages validés le 10/10/2026 (page de réglage) ---
   Icônes + langues en haut à droite, « Mois après mois » / « À propos » en une ligne dessous. */
@media(max-width:900px){
  .hdr{padding:12px 8px;}
  .hdr-right{position:absolute;top:12px;right:8px;flex-direction:column-reverse;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;width:auto;order:0;margin-top:0;gap:4px;}
  nav.main{order:0;width:auto;margin-top:0;margin-left:0;gap:4px;}
  nav.main a{padding:4px 6px;font-size:8px;}
  .tools a,.tools .tool-btn{width:18px;height:18px;}
  .tools .ic{width:14px;height:14px;}
  .hdr-lang button{padding:3px 4px;font-size:8px;}
  .brand{gap:13px;}
  .brand .word{font-size:20px;line-height:1;}
  .brand img{width:40px;height:40px;border-radius:10px;}
  body[data-page="accueil"] .hdr-tagline.hdr-tagline-home,
  body[data-page="about"] .hdr-tagline.hdr-tagline-about,
  body[data-page="archives"] .hdr-tagline.hdr-tagline-archives,
  body[data-page="cal"] .hdr-tagline.hdr-tagline-cal,
  body[data-page="mdj"] .hdr-tagline.hdr-tagline-mdj,
  body[data-page="ongles"] .hdr-tagline.hdr-tagline-ongles{font-size:10.3px;margin-top:16px;max-width:calc(100vw - 16px);}
  body[data-page="accueil"] .hdr-tagline.hdr-tagline-home{font-size:min(10.3px,calc((100vw - 16px)/34.2));}
}