:root{
  --ink:#2d1b0d;
  --ink-soft:#50351d;
  --paper:#e8c58e;
  --paper-light:#f3ddb5;
  --paper-deep:#b98045;
  --leather:#3a1f0e;
  --leather-2:#5a3219;
  --gold:#c99247;
  --gold-light:#e3b66f;
  --shadow:rgba(34,17,5,.42);
  --jv-paper:#efe0bd;
  --jv-iron:#3b2719;
  --jv-copper:#8d4f28;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  /* Même ton parchemin sous le header : évite toute bande de couleur visible
     dans les zones transparentes du bandeau déchiré. */
  background:#d7a66b;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%}

/* ===== Menu + hero : même fond dégradé pour que les deux zones se fondent l'une dans l'autre ===== */
.adventure-stage{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 73% 31%,rgba(255,204,123,.90),rgba(225,161,88,.36) 27%,transparent 55%),
    linear-gradient(180deg,#d7a66b 0%,#c18d57 48%,#735334 100%);
}
.site-header{
  position:relative;
  z-index:200;
  min-height:clamp(106px,10.35vw,212px);
  display:grid;
  grid-template-columns:minmax(170px,1fr) auto minmax(140px,1fr);
  align-items:center;
  column-gap:clamp(12px,1.6vw,24px);
  /* Le bandeau est maintenant collé aux bords gauche/droit de l'écran. */
  width:100%;
  max-width:none;
  /* Le menu reste au-dessus du hero et le hero remonte légèrement sous lui. */
  margin:0 0 calc(-1 * clamp(28px,3vw,44px));
  padding:0 clamp(26px,4vw,72px);
  background:transparent;
  isolation:isolate;
}
/* Fond de menu fourni : il occupe toujours 100 % de la largeur de l'écran. */
.site-header::before{
  content:'';
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:100%;
  height:100%;
  transform:none;
  background:url('assets/design/menu-vierge.png') center/100% 100% no-repeat;
  pointer-events:none;
}
.brand-logo{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  justify-self:start;
  padding-left:clamp(36px,4.8vw,68px);
  text-decoration:none;
  line-height:.86;
  font-weight:900;
  font-size:clamp(26px,2.15vw,34px);
  letter-spacing:-1px;
  text-transform:uppercase;
  text-shadow:0 1px rgba(255,255,255,.3);
}
.brand-logo .compass{font-size:clamp(26px,2.2vw,34px);line-height:1;transform:rotate(-7deg)}
.brand-logo small{display:block;font-size:.70em;letter-spacing:.2px}
.main-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  justify-self:end;
  gap:clamp(16px,2.1vw,30px);
  padding:0;
}
.main-nav a,.menu-write{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  white-space:nowrap;
  font-weight:800;
  text-shadow:0 1px rgba(255,255,255,.35);
}
.menu-write{
  justify-self:center;
  padding:clamp(11px,1vw,14px) clamp(16px,1.6vw,24px);
  font-size:clamp(14px,1.08vw,17px);
  color:#e8bc78;
  border:2px solid #8a5a2d;
  outline:1px solid #231207;
  outline-offset:-6px;
  background:linear-gradient(145deg,#4a2915,#2b160b 58%,#4d2c17);
  box-shadow:inset 0 0 0 2px #6a3c1e,0 4px 9px rgba(39,18,4,.28);
  text-transform:uppercase;
  letter-spacing:.35px;
}
.main-nav .menu-paths{
  padding:10px 4px;
  font-size:clamp(17px,1.45vw,22px);
  color:#2d1c0f;
}
.main-nav .menu-paths:hover{text-decoration:underline;text-underline-offset:5px}

/* Lien d’administration volontairement discret, placé à droite de « Nos parcours ». */
.main-nav .menu-admin{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:9px 0 9px 2px;
  font-size:clamp(10px,.82vw,12px);
  line-height:1;
  font-weight:600;
  letter-spacing:.08px;
  color:rgba(45,28,15,.62);
  text-shadow:none;
  opacity:.82;
  transition:opacity .18s ease,color .18s ease;
}
.main-nav .menu-admin-lock{
  width:11px;
  height:11px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.main-nav .menu-admin:hover,
.main-nav .menu-admin:focus-visible{
  color:#2d1c0f;
  opacity:1;
  text-decoration:underline;
  text-underline-offset:4px;
}
.login-btn,.hero-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;text-transform:uppercase;font-weight:800;letter-spacing:.4px;
  color:#e8bc78;border:2px solid #8a5a2d;outline:1px solid #231207;outline-offset:-6px;
  background:linear-gradient(145deg,#4a2915,#2b160b 58%,#4d2c17);
  box-shadow:inset 0 0 0 2px #6a3c1e,0 4px 9px rgba(39,18,4,.35);
}
.login-btn{justify-self:end;min-width:170px;padding:16px 15px;border-radius:3px}
.login-btn:hover,.hero-cta:hover{filter:brightness(1.12);transform:translateY(-1px)}

/* ===== Hero ===== */
/*
  Le hero n'utilise plus de hauteur fixe ni de positionnement absolu pour
  synchroniser les deux grandes zones. Sur ordinateur, il s'agit maintenant
  d'une vraie grille responsive : le parchemin de gauche et l'illustration
  occupent la même ligne et se terminent donc toujours sur la même ligne de base.

  L'image conserve son ratio 1536 x 1024 et sa largeur évolue avec l'écran.
  Le panneau de gauche s'étire automatiquement à la hauteur de la ligne.
*/
.hero-final{
  position:relative;
  /* Pas de contexte d'empilement ici : cela permet à TeamPapaye.png de passer
     devant le menu, tandis que le bloc Bravo reste sous le menu. */
  z-index:auto;
  display:grid;
  grid-template-columns:minmax(360px,38%) minmax(0,62%);
  align-items:stretch;
  margin:0;
  min-height:0;
  overflow:hidden;
  /* CALQUE 1 : paysage tout au fond du hero */
  background:url('assets/design/montagnes-ciel.png') center center/cover no-repeat;
}
.hero-final::before{display:none}
.hero-final::after{
  content:'';
  position:absolute;
  z-index:1;
  left:0;right:0;bottom:0;
  height:clamp(70px,9vw,140px);
  background:linear-gradient(transparent,rgba(45,26,13,.18));
  pointer-events:none;
}

.hero-left{
  position:relative;
  /* CALQUE 2 : bloc \"Bravo !\" au-dessus du paysage */
  z-index:3;
  min-width:0;
  /* Le parchemin Bravo est légèrement décalé vers la gauche.
     Sa partie gauche peut être rognée par le bord de l'écran, tandis que son
     bord droit reste à la même place dans la grille. */
  width:calc(100% + clamp(18px,2.3vw,40px));
  margin-left:calc(-1 * clamp(18px,2.3vw,40px));
  padding:
    clamp(30px,5.2vw,82px)
    clamp(24px,3.3vw,52px)
    clamp(28px,4.4vw,70px)
    clamp(28px,3.7vw,58px);
  display:flex;
  align-items:center;
  background:url('assets/design/telegram-parchment-asset1.png') center/cover no-repeat;
  filter:drop-shadow(12px 0 18px rgba(58,34,13,.22));
}
.hero-left::after{display:none}
.hero-copy{
  position:relative;
  z-index:2;
  width:100%;
  max-width:430px;
}
.hero-kicker{
  font-size:clamp(20px,2.05vw,30px);
  line-height:1.05;
  font-weight:700;
  margin-bottom:0;
}
.hero-title{
  margin:0 0 clamp(10px,1.1vw,16px);
  font-size:clamp(50px,5.75vw,83px);
  line-height:.92;
  font-weight:900;
  letter-spacing:clamp(-3px,-.18vw,-1.5px);
  text-transform:uppercase;
  color:#2e1d0e;
  text-shadow:0 2px rgba(255,255,255,.35);
}
.hero-lead{
  margin:clamp(15px,1.65vw,24px) 0 clamp(18px,2.05vw,30px);
  font-size:clamp(16px,1.67vw,24px);
  line-height:1.28;
  max-width:390px;
}
.hero-lead .paw{font-size:1.15em;margin-left:8px}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(88px,1fr));
  gap:clamp(7px,.65vw,10px);
  margin:clamp(16px,1.6vw,24px) 0 clamp(18px,1.8vw,27px);
  width:min(100%,500px);
  max-width:100%;
}
.hero-stat{
  min-height:clamp(98px,7.4vw,118px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:9px 5px 10px;
  border:1px solid rgba(77,49,22,.55);
  background:rgba(241,217,174,.46);
  text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
/* Icône volontairement très présente ; la valeur numérique reste proche de l'origine. */
.hero-stat .ico{
  display:block;
  margin:0 0 3px;
  font-size:clamp(36px,2.65vw,46px);
  line-height:.9;
  font-weight:700;
  text-align:center;
}
.hero-stat > span:not(.ico){display:block;margin:0;text-align:center}
.hero-stat strong{display:block;font-size:clamp(20px,1.75vw,25px);line-height:.95}
.hero-stat > span:not(.ico) > span{
  display:block;
  margin-top:7px;
  font-size:clamp(12px,.86vw,14px);
  line-height:1.08;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:0;
  text-align:center;
  max-width:100%;
  overflow-wrap:break-word;
}
.hero-cta{
  position:relative;
  z-index:2;
  padding:clamp(13px,1.2vw,17px) clamp(20px,1.9vw,27px);
  font-size:clamp(14px,1.25vw,18px);
  border-radius:2px;
}

/*
  La photo participe elle aussi à la grille. Elle n'est plus positionnée en
  absolu. Cela évite les différences de hauteur qui apparaissaient lorsque la
  fenêtre changeait de largeur.
*/
.hero-team{
  position:relative;
  /* CALQUE 3 : TeamPapaye passe au-dessus de TOUT, y compris du menu. */
  z-index:300;
  min-width:0;
  align-self:stretch;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  /* Le paysage est maintenant porté par .hero-final (calque de fond). */
  background:transparent;
  /* léger chevauchement sur le bord du parchemin, comme sur la maquette */
  width:calc(100% + clamp(44px,6vw,105px));
  margin-left:calc(-1 * clamp(44px,6vw,105px));
  pointer-events:none;
}
.hero-team img{
  position:relative;
  z-index:301;
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  align-self:flex-end;
  transform:none;
  transform-origin:bottom right;
  filter:drop-shadow(-12px 18px 15px rgba(45,26,10,.24));
}

/* ===== Carnet (section commentaires) — reste toujours sous le télégramme ===== */
.carnet{
  position:relative;
  z-index:600;
  padding:0 6vw 88px;
  background:linear-gradient(rgba(47,28,14,.80),rgba(47,28,14,.86)),url('assets/design/parchment-panel.png') center/cover fixed;
  border-top:8px solid #6c4324;
  overflow:visible;
}
.section-head{
  text-align:center;
  max-width:720px;
  margin:0 auto 4px;
  color:#f0d5a6;
}
.section-head h2{
  font-size:42px;
  color:#f4d59e;
  margin:0;
  text-transform:uppercase;
}
.section-head p{
  font-size:18px;
  margin:6px 0 8px;
}
.wax-seal{
  width:76px;
  height:76px;
  margin:0 auto 4px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 32% 28%,#bd6b3a,#6b2c17 68%,#391208);
  box-shadow:0 9px 20px rgba(0,0,0,.35);
  border:3px solid #b67841;
}
.wax-seal svg{
  width:35px;
  height:35px;
}
.comment-counter{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  border:1px solid #c08c4e;
  padding:9px 18px;
  background:rgba(61,31,12,.58);
  color:#efd09a;
}
.comment-counter svg{
  width:18px;
  height:18px;
}
.comment-form{
  width:100vw;
  max-width:none;
  min-height:clamp(900px,70vw,1120px);
  margin:calc(-1 * clamp(30px,3.8vw,58px)) calc(50% - 50vw) 44px;
  padding:clamp(130px,10vw,175px) clamp(32px,10vw,150px) clamp(115px,9vw,150px);
  position:relative;
  z-index:700;
  color:#34200f;
  border:0;
  box-shadow:none;
  background-color:transparent;
  background-image:url('assets/design/telegram-livre-responsive.png');
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  isolation:isolate;
}
.comment-form::before{
  content:'TÉLÉGRAMME';
  position:relative;
  z-index:2;
  pointer-events:none;
  display:block;
  width:min(100%,920px);
  margin:0 auto 24px;
  padding:0 0 12px;
  text-align:center;
  font-family:'Cinzel',serif;
  font-weight:900;
  font-size:clamp(18px,1.55vw,23px);
  line-height:1.15;
  letter-spacing:.5px;
  color:#3a240f;
  border-bottom:2px solid rgba(78,48,22,.52);
  text-shadow:0 1px rgba(255,255,255,.35);
}
.telegram-intro{
  width:min(100%,920px);
  margin:0 auto 18px;
  text-align:center;
  color:#4b321b;
}
.telegram-intro p{
  margin:0 0 12px;
  font-size:clamp(15px,1.35vw,18px);
  line-height:1.4;
}
.telegram-intro .comment-counter{margin:0 auto}
.comment-form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.comment-form>.row,.comment-form>.field,.comment-form>.recaptcha-row,.comment-form>.submit-row,.comment-form>.form-status{
  width:min(100%,920px);
  margin-left:auto;
  margin-right:auto;
}
.field{margin-bottom:20px}
.field label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
  color:#3b2612;
}
.field input,.field textarea,.field select{
  width:100%;
  padding:10px 7px;
  background:rgba(255,255,255,.12);
  border:0;
  border-bottom:2px dashed #76502b;
  font:16px Georgia,serif;
  color:#2e1c0d;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(66,43,21,.58)}
.field select option{
  color:#2b1b0e;
  background:#efe0bd;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;
  background:rgba(255,255,255,.24);
  border-bottom-style:solid;
}
.poiz-hint{
  min-height:1em;
  color:#70431f;
}
.lieu-autocomplete{position:relative}
.lieu-suggestions{
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  top:100%;
  list-style:none;
  margin:4px 0 0;
  padding:0;
  background:#efddb9;
  border:1px solid #5c3a1e;
  max-height:220px;
  overflow:auto;
  box-shadow:5px 7px 12px rgba(0,0,0,.28);
}
.lieu-suggestions[hidden]{display:none}
.lieu-suggestions li{
  padding:9px 12px;
  border-bottom:1px dashed rgba(70,42,20,.25);
  cursor:pointer;
}
.lieu-suggestions li:hover,.lieu-suggestions li.active{background:#d8b37c}
.hp-field{
  position:absolute;
  left:-9999px;
}
.recaptcha-row{
  display:flex;
  justify-content:center;
  margin:16px 0;
  background:transparent;
}
.g-recaptcha,.g-recaptcha>div{background:transparent!important}
.submit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.form-note,.visibility-note{font-size:13px}
.comment-form .form-note{color:#684622}
.form-status{
  min-height:20px;
  margin-top:10px;
  text-align:right;
  font-weight:700;
}
.form-status.ok{color:#315d2d}
.form-status.err{color:#8b261d}
.btn.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 28px;
  border:2px solid #2c1609;
  outline:2px solid #e0b36a;
  outline-offset:-6px;
  background:linear-gradient(180deg,#c88435 0%,#8b4a22 58%,#5d2d14 100%);
  color:#fff3d4;
  text-transform:uppercase;
  font-weight:900;
  font-size:15px;
  letter-spacing:.55px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(30,13,3,.35),inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 1px rgba(45,20,5,.75);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.btn.btn-primary:hover{
  filter:brightness(1.12);
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(30,13,3,.42),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn:disabled{opacity:.55}
.visibility-note{
  max-width:720px;
  margin:0 auto 28px;
  text-align:center;
  color:#d9bc89;
}
#comments-list{
  display:grid;
  gap:28px;
  max-width:760px;
  margin:0 auto;
}


/* ===== Télégramme : position du titre et de la note d'information finale ===== */
.comment-form::before{
  top:14px;
  margin-bottom:38px;
}
.comment-form .visibility-note{
  width:min(100%,760px);
  max-width:760px;
  margin:24px auto 0;
  padding:0 12px;
  position:relative;
  z-index:2;
  color:#684622;
  text-align:center;
  line-height:1.4;
}

/* Sur PC, la note finale remonte dans le cadre du parchemin. */
@media(min-width:801px){
  .comment-form .visibility-note{
    top:-34px;
  }
}


/* ===== Carrousel de commentaires : parchemin pleine largeur + slider ===== */
#comments-list{
  display:block;
  width:100vw;
  max-width:none;
  margin:22px calc(50% - 50vw) 0;
  overflow:hidden;
}
.comments-carousel{
  position:relative;
  width:100vw;
  height:clamp(620px,56.3vw,940px);
  overflow:hidden;
  isolation:isolate;
}
.comments-carousel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url('assets/design/comment-book-slider.png');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  pointer-events:none;
}
.comments-carousel__viewport{
  position:absolute;
  z-index:2;
  top:15%;
  right:8.5%;
  bottom:14%;
  left:8.5%;
  overflow:hidden;
}
.comments-carousel__track{
  display:flex;
  width:100%;
  height:100%;
  transform:translate3d(0,0,0);
  transition:transform .72s cubic-bezier(.22,.68,.28,1);
  will-change:transform;
}
.comment-slide{
  flex:0 0 100%;
  min-width:100%;
  height:100%;
  position:relative;
  padding:clamp(18px,2vw,32px) clamp(82px,7vw,128px) clamp(14px,1.8vw,28px) clamp(18px,2.2vw,38px);
  color:#21150c;
  overflow:hidden;
}
.comment-slide__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 14px;
  padding-right:70px;
  font-family:'Special Elite',monospace;
  margin-bottom:12px;
}
.comment-slide__author{
  font-size:clamp(1rem,1.25vw,1.22rem);
  font-weight:700;
  color:var(--jv-iron);
}
.comment-slide__spot{
  font-size:clamp(.76rem,.95vw,.92rem);
  line-height:1.3;
  color:var(--jv-copper);
}
.comment-slide__message{
  height:calc(100% - 58px);
  overflow:auto;
  padding:4px 12px 10px 0;
  font-family:'Caveat',cursive;
  font-size:clamp(1.55rem,2vw,2.05rem);
  line-height:1.34;
  color:#1A1512;
  white-space:pre-line;
  scrollbar-width:thin;
  scrollbar-color:rgba(88,52,28,.35) transparent;
}
.comment-slide__message::-webkit-scrollbar{width:8px}
.comment-slide__message::-webkit-scrollbar-thumb{background:rgba(88,52,28,.35);border-radius:999px}
.comment-slide__timbre{
  position:absolute;
  z-index:3;
  top:18px;
  right:18px;
  width:68px;
  height:82px;
  padding:5px;
  background:#8f3b2b;
  box-shadow:2px 3px 7px rgba(38,20,10,.22);
}
.comment-slide__timbre-inner{
  width:100%;
  height:100%;
  border:1px solid #f2dfbc;
  background:center/cover no-repeat #e7cfa8;
}
.comment-slide__timbre-name{
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  max-width:112px;
  padding:2px 5px;
  background:#ead8b6;
  border:1px solid rgba(91,55,28,.28);
  font:10px/1.1 'Special Elite',monospace;
  color:#3e2723;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.comment-slide__postmark{
  position:absolute;
  z-index:4;
  top:4px;
  right:66px;
  width:86px;
  height:86px;
  border:2px solid rgba(48,29,14,.5);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:rotate(-16deg);
  color:rgba(48,29,14,.76);
  font-family:'Special Elite',monospace;
  font-size:9px;
  line-height:1.05;
  text-align:center;
  pointer-events:none;
}
.comment-slide__postmark-date{
  width:88%;
  margin:3px 0;
  padding:2px 0;
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
  font-size:10px;
}
.comment-slide__empty{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6f5033;
  font-family:'Special Elite',monospace;
  text-align:center;
}
.comments-carousel__arrow{
  position:absolute;
  z-index:6;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  border:2px solid #d6a75e;
  background:rgba(49,26,12,.84);
  color:#f5d9a7;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 12px rgba(0,0,0,.28);
}
.comments-carousel__arrow:hover{filter:brightness(1.14)}
.comments-carousel__arrow--prev{left:2.2vw}
.comments-carousel__arrow--next{right:2.2vw}
.comments-carousel__arrow:disabled{opacity:.28;cursor:default}
.pagination.slider-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:14px auto 4px;
}
.slider-dot{
  width:10px!important;
  height:10px!important;
  min-width:10px;
  padding:0!important;
  border-radius:50%!important;
  border:1px solid #c99955!important;
  background:rgba(235,203,150,.22)!important;
}
.slider-dot.active{background:#d9a45b!important;transform:scale(1.2)}
.slider-index{
  margin-left:8px;
  color:#e8c58d;
  font:13px 'Special Elite',monospace;
}

@media(max-width:1024px){
  .comments-carousel{height:clamp(640px,84vw,800px)}
  .comments-carousel::before{background-size:cover;background-position:center top}
  .comments-carousel__viewport{top:15.5%;right:7%;bottom:13.5%;left:7%}
  .comment-slide{padding:22px 80px 16px 18px}
  .comment-slide__meta{padding-right:62px}
  .comment-slide__message{font-size:clamp(1.42rem,3.5vw,1.8rem);line-height:1.3}
  .comment-slide__timbre{width:58px;height:70px;top:14px;right:12px}
  .comment-slide__postmark{width:72px;height:72px;right:54px;top:2px;font-size:8px}
  .comment-slide__postmark-date{font-size:8px}
  .comments-carousel__arrow{width:42px;height:42px;font-size:24px}
  .comments-carousel__arrow--prev{left:10px}
  .comments-carousel__arrow--next{right:10px}
}

@media(max-width:560px){
  #comments-list{margin-top:12px}
  .comments-carousel{height:660px}
  .comments-carousel::before{
    /* Sur smartphone, on agrandit l'image sans la déformer : les côtés sont
       volontairement recadrés afin qu'aucun fond ne soit visible à gauche/droite. */
    background-size:auto 100%;
    background-position:center top;
  }
  .comments-carousel__viewport{top:15%;right:5.5%;bottom:13%;left:5.5%}
  .comment-slide{padding:18px 62px 12px 10px}
  .comment-slide__meta{gap:7px;padding-right:50px;margin-bottom:8px}
  .comment-slide__author{font-size:.9rem}
  .comment-slide__spot{font-size:.7rem}
  .comment-slide__message{height:calc(100% - 54px);font-size:1.32rem;line-height:1.26;padding-right:5px}
  .comment-slide__timbre{width:48px;height:59px;padding:3px;top:12px;right:6px}
  .comment-slide__timbre-name{font-size:8px;bottom:-14px;max-width:82px}
  .comment-slide__postmark{width:58px;height:58px;right:39px;top:4px;font-size:6px}
  .comment-slide__postmark-date{font-size:6px;margin:2px 0}
  .comments-carousel__arrow{top:auto;bottom:18px;transform:none;width:38px;height:38px;font-size:21px}
  .comments-carousel__arrow--prev{left:18px}
  .comments-carousel__arrow--next{right:18px}
}



/* ===== Messages empilés verticalement dans le parchemin =====
   PC large : 3 messages l'un sous l'autre ; tablette / petit PC : 2 ; smartphone : 1. */
.comment-group{
  flex:0 0 100%;
  min-width:100%;
  height:100%;
  display:grid;
  align-items:stretch;
  gap:0;
  padding:clamp(10px,1vw,16px) clamp(8px,1.1vw,18px);
}
.comment-group.comments-per-3{grid-template-rows:repeat(3,minmax(0,1fr))}
.comment-group.comments-per-2{grid-template-rows:repeat(2,minmax(0,1fr))}
.comment-group.comments-per-1{grid-template-rows:minmax(0,1fr)}

/* Chaque message occupe une bande horizontale complète du parchemin. */
.comment-group .comment-slide{
  flex:initial;
  min-width:0;
  width:100%;
  height:100%;
  padding:clamp(9px,.9vw,14px) clamp(72px,6vw,104px) clamp(9px,.9vw,14px) clamp(10px,1.15vw,20px);
  border-right:0;
  border-bottom:1px solid rgba(86,53,29,.20);
}
.comment-group .comment-slide:last-child{border-bottom:0}
.comment-group .comment-slide__meta{
  gap:6px 11px;
  padding-right:68px;
  margin-bottom:5px;
}
.comment-group .comment-slide__author{
  font-size:clamp(.86rem,.92vw,1.03rem);
}
.comment-group .comment-slide__spot{
  font-size:clamp(.68rem,.72vw,.82rem);
  line-height:1.2;
}
.comment-group .comment-slide__message{
  height:calc(100% - 42px);
  font-size:clamp(1.12rem,1.32vw,1.48rem);
  line-height:1.22;
  padding:0 6px 2px 0;
}
.comment-group .comment-slide__timbre{
  top:8px;
  right:8px;
  width:clamp(40px,3.25vw,50px);
  height:clamp(49px,4vw,61px);
  padding:3px;
}
.comment-group .comment-slide__timbre-name{
  max-width:82px;
  bottom:-13px;
  font-size:7.5px;
}
.comment-group .comment-slide__postmark{
  top:0;
  right:42px;
  width:clamp(48px,4vw,60px);
  height:clamp(48px,4vw,60px);
  font-size:6.5px;
}
.comment-group .comment-slide__postmark-date{font-size:6.5px}

@media(max-width:1279px) and (min-width:700px){
  .comments-carousel{height:clamp(660px,76vw,860px)}
  .comments-carousel__viewport{top:15.4%;right:7.2%;bottom:13.7%;left:7.2%}
  .comment-group{gap:0;padding:12px 10px}
  .comment-group .comment-slide{
    padding:14px 76px 12px 12px;
  }
  .comment-group .comment-slide__author{font-size:clamp(.92rem,1.4vw,1.06rem)}
  .comment-group .comment-slide__spot{font-size:clamp(.72rem,1.05vw,.84rem)}
  .comment-group .comment-slide__message{
    height:calc(100% - 48px);
    font-size:clamp(1.25rem,2vw,1.52rem);
    line-height:1.24;
  }
  .comment-group .comment-slide__timbre{width:50px;height:62px;right:7px;top:9px}
  .comment-group .comment-slide__postmark{width:60px;height:60px;right:40px;font-size:7px}
}

@media(max-width:699px){
  /* Sur smartphone, un seul message conserve toute la page et le swipe. */
  .comment-group{display:block;padding:0}
  .comment-group .comment-slide{
    width:100%;
    height:100%;
    padding:18px 62px 12px 10px;
    border-bottom:0;
  }
  .comment-group .comment-slide__meta{gap:7px;padding-right:50px;margin-bottom:8px}
  .comment-group .comment-slide__author{font-size:.9rem}
  .comment-group .comment-slide__spot{font-size:.7rem}
  .comment-group .comment-slide__message{height:calc(100% - 54px);font-size:1.32rem;line-height:1.26;padding-right:5px}
  .comment-group .comment-slide__timbre{width:48px;height:59px;padding:3px;top:12px;right:6px}
  .comment-group .comment-slide__timbre-name{font-size:8px;bottom:-14px;max-width:82px}
  .comment-group .comment-slide__postmark{width:58px;height:58px;right:39px;top:4px;font-size:6px}
  .comment-group .comment-slide__postmark-date{font-size:6px;margin:2px 0}
}



/* ===== Réglages de lisibilité des messages (taille de texte / timbre, largeur) =====
   - PC : 3 messages empilés, texte / timbre agrandis.
   - Tablette : 2 messages empilés, texte / timbre agrandis.
   - Smartphone : 2 messages empilés également.
   Les messages sont volontairement moins larges que la zone utile du parchemin
   afin de ne pas empiéter sur les décorations latérales de l'image. */
.comment-group{
  padding-inline:clamp(24px,3.6vw,72px);
}
.comment-group .comment-slide{
  width:92%;
  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(18px,2vw,34px);
  padding-right:clamp(112px,8vw,150px);
}
.comment-group .comment-slide__meta{
  padding-right:94px;
  margin-bottom:8px;
}
.comment-group .comment-slide__author{
  font-size:clamp(1.05rem,1.18vw,1.28rem);
}
.comment-group .comment-slide__spot{
  font-size:clamp(.82rem,.9vw,.98rem);
}
.comment-group .comment-slide__message{
  height:calc(100% - 50px);
  font-size:clamp(1.48rem,1.72vw,1.86rem);
  line-height:1.26;
  padding-right:10px;
}
.comment-group .comment-slide__timbre{
  top:10px;
  right:16px;
  width:clamp(60px,4vw,70px);
  height:clamp(74px,5vw,86px);
  padding:4px;
}
.comment-group .comment-slide__timbre-name{
  max-width:110px;
  bottom:-17px;
  font-size:9px;
}
.comment-group .comment-slide__postmark{
  top:1px;
  right:68px;
  width:clamp(70px,4.8vw,82px);
  height:clamp(70px,4.8vw,82px);
  font-size:8px;
}
.comment-group .comment-slide__postmark-date{font-size:8.5px}

@media(max-width:1279px) and (min-width:700px){
  .comments-carousel{height:clamp(720px,82vw,900px)}
  .comments-carousel__viewport{top:15.2%;right:7.4%;bottom:13.4%;left:7.4%}
  .comment-group{padding:12px clamp(26px,4vw,52px)}
  .comment-group .comment-slide{
    width:94%;
    padding:18px 112px 14px 20px;
  }
  .comment-group .comment-slide__meta{padding-right:86px;margin-bottom:8px}
  .comment-group .comment-slide__author{font-size:clamp(1.08rem,2vw,1.28rem)}
  .comment-group .comment-slide__spot{font-size:clamp(.84rem,1.45vw,1rem)}
  .comment-group .comment-slide__message{
    height:calc(100% - 52px);
    font-size:clamp(1.55rem,2.9vw,1.9rem);
    line-height:1.27;
  }
  .comment-group .comment-slide__timbre{width:66px;height:80px;right:12px;top:12px}
  .comment-group .comment-slide__timbre-name{font-size:9px;bottom:-16px;max-width:105px}
  .comment-group .comment-slide__postmark{width:76px;height:76px;right:62px;top:2px;font-size:8px}
  .comment-group .comment-slide__postmark-date{font-size:8px}
}

@media(max-width:699px){
  /* Deux messages empilés sur smartphone. On augmente légèrement la hauteur
     du parchemin pour préserver une taille de texte confortable. */
  .comments-carousel{height:clamp(720px,178vw,860px)}
  .comments-carousel__viewport{top:15%;right:5.8%;bottom:12.8%;left:5.8%}
  .comment-group{
    display:grid;
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:0;
    padding:8px 14px;
  }
  .comment-group .comment-slide{
    width:96%;
    height:100%;
    margin-inline:auto;
    padding:14px 82px 10px 12px;
    border-bottom:1px solid rgba(86,53,29,.20);
  }
  .comment-group .comment-slide:last-child{border-bottom:0}
  .comment-group .comment-slide__meta{gap:7px 9px;padding-right:62px;margin-bottom:6px}
  .comment-group .comment-slide__author{font-size:1rem}
  .comment-group .comment-slide__spot{font-size:.78rem;line-height:1.18}
  .comment-group .comment-slide__message{
    height:calc(100% - 48px);
    font-size:1.48rem;
    line-height:1.23;
    padding-right:5px;
  }
  .comment-group .comment-slide__timbre{width:58px;height:71px;padding:4px;top:9px;right:6px}
  .comment-group .comment-slide__timbre-name{font-size:8.5px;bottom:-15px;max-width:92px}
  .comment-group .comment-slide__postmark{width:66px;height:66px;right:49px;top:1px;font-size:7px}
  .comment-group .comment-slide__postmark-date{font-size:7px;margin:2px 0}
}

@media(max-width:420px){
  .comments-carousel{height:790px}
  .comment-group{padding-inline:10px}
  .comment-group .comment-slide{width:97%;padding-right:76px;padding-left:9px}
  .comment-group .comment-slide__author{font-size:.96rem}
  .comment-group .comment-slide__spot{font-size:.74rem}
  .comment-group .comment-slide__message{font-size:1.4rem;line-height:1.21}
  .comment-group .comment-slide__timbre{width:54px;height:66px}
  .comment-group .comment-slide__postmark{width:62px;height:62px;right:45px}
}

/* ===== Chevauchement Télégramme / Commentaires =====
   Le fond du télégramme possède une zone transparente en bas et l'image des
   commentaires une zone transparente en haut : on remonte le carrousel pour
   que le chevauchement soit visuellement perceptible. Le télégramme garde le
   z-index 700 et passe donc bien DEVANT le bloc commentaires (z-index 650). */
.comment-form{
  margin-bottom:0;
}
#comments-list{
  position:relative;
  z-index:650;
  margin-top:-170px; /* valeur PC par défaut, réajustée ci-dessous ≥1025px */
}
@media(max-width:1024px){
  #comments-list{margin-top:-190px}
}
@media(max-width:560px){
  #comments-list{margin-top:-175px} /* réajusté plus bas pour le smartphone */
}


/* ===== Ajustements fins de la remontée PC / smartphone =====
   Smartphone : la zone utile des messages s'étend aussi davantage vers la
   droite, sans modifier l'image de fond. */
@media(min-width:1025px){
  #comments-list{margin-top:-145px}
}
@media(max-width:560px){
  #comments-list{margin-top:-190px}
  .comments-carousel__viewport{
    left:5.8%;
    right:4.2%;
  }
  .comment-group{padding-left:12px;padding-right:8px}
  .comment-group .comment-slide{
    width:98%;
    padding-right:68px;
    padding-left:12px;
  }
  .comment-group .comment-slide__meta{padding-right:58px}
  .comment-group .comment-slide__timbre{right:2px}
  .comment-group .comment-slide__postmark{right:44px}
}
@media(max-width:420px){
  .comment-group{padding-left:9px;padding-right:5px}
  .comment-group .comment-slide{
    width:99%;
    padding-right:64px;
    padding-left:9px;
  }
  .comment-group .comment-slide__meta{padding-right:54px}
  .comment-group .comment-slide__timbre{right:1px}
  .comment-group .comment-slide__postmark{right:41px}
}

.pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:30px;
}
.pagination button{
  padding:10px 14px;
  border:1px solid #b9864c;
  background:#4a2815;
  color:#efd3a2;
  cursor:pointer;
}
.pagination button.active{
  background:#bf8242;
  color:#29170b;
}
.pagination button:disabled{opacity:.4}
.empty-state,.loading-state{
  text-align:center;
  color:#efd3a2;
  padding:20px;
}
footer{
  padding:28px 20px;
  text-align:center;
  background:#241307;
  color:#caa678;
  border-top:2px solid #8b5a2e;
}
footer a{color:#d7b78c}

@media(max-width:1180px){
  .site-header{width:100%;max-width:none;grid-template-columns:minmax(150px,1fr) auto minmax(120px,1fr);padding-inline:24px}
  .main-nav{gap:14px}

  .hero-final{grid-template-columns:minmax(345px,42%) minmax(0,58%)}
  .hero-left{padding-left:clamp(26px,3.2vw,38px);padding-right:clamp(22px,2.8vw,34px)}
  .hero-copy{max-width:390px}
  .hero-team{width:calc(100% + clamp(35px,5vw,70px));margin-left:calc(-1 * clamp(35px,5vw,70px))}
}

/* Tablette / smartphone : le rouleau reste à son ratio naturel mais devient
   volontairement plus large que l'écran et est recadré latéralement, jamais étiré. */
@media(max-width:800px){
  .site-header{
    min-height:124px;
    width:100%;
    grid-template-columns:minmax(108px,145px) minmax(180px,1fr) minmax(108px,145px);
    column-gap:10px;
    padding:0 14px;
    overflow:hidden;
    margin-bottom:-22px;
  }
  .site-header::before{
    left:0;
    right:0;
    width:100%;
    height:100%;
    max-width:none;
    transform:none;
    background-size:100% 100%;
  }
  .brand-logo{padding-left:4px;font-size:22px;gap:5px;line-height:.88}
  .brand-logo small{font-size:.72em}
  .brand-logo .compass{display:none}
  .menu-write{font-size:14px;line-height:1.1;padding:11px 13px}
  .main-nav{gap:8px}
  .main-nav .menu-paths{font-size:16px;padding:9px 2px}
  .main-nav .menu-admin{font-size:10px;gap:3px;padding-left:0}
  .main-nav .menu-admin-lock{width:10px;height:10px}

  .hero-final{
    display:flex;
    flex-direction:column;
    min-height:0;
    /* Le paysage reste sur un calque de fond même quand le hero passe en colonne. */
    background:transparent;
  }
  /* Sur tablette/smartphone, TeamPapaye passe au-dessus du bloc Bravo.
     Le paysage ne doit donc pas être porté par .hero-team (qui est au premier plan),
     sinon il pourrait masquer le menu ou le parchemin lors du chevauchement.
     On réactive un calque de fond dédié derrière la hauteur de TeamPapaye. */
  .hero-final::before{
    content:'';
    display:block;
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    right:0;
    height:74.6667vw; /* 112vw × ratio 2/3 de TeamPapaye.png */
    background:url('assets/design/montagnes-ciel.png') center center/cover no-repeat;
    pointer-events:none;
  }
  .hero-team{
    order:1;
    position:relative;
    width:112%;
    margin:0 0 0 -6%;
    align-self:auto;
    display:block;
    z-index:300;
  }
  .hero-team img{display:block;width:100%;height:auto;max-width:none;transform:none}
  /* Dès que le hero passe en colonne, le panneau Bravo prend toute la
     largeur du viewport. En tablette/smartphone uniquement, il passe
     DEVANT TeamPapaye.png lorsqu'ils se chevauchent. */
  .hero-left{
    order:2;
    position:relative;
    z-index:400;
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* Le panneau remonte légèrement sur TeamPapaye.png pour créer
       un chevauchement naturel. Son z-index 400 le place devant l'image
       TeamPapaye (z-index 300) uniquement dans cette mise en page mobile. */
    margin-top:calc(-1 * clamp(28px,5vw,48px));
    min-width:0;
    padding:36px 30px 34px;
    display:block;
    overflow:hidden;
    background-image:url('assets/design/telegram-parchment-asset1.png');
    background-position:center center;
    background-size:118% 100%;
    background-repeat:no-repeat;
  }
  .hero-copy{width:auto;max-width:520px;margin:0 auto;text-align:center}
  .hero-kicker{font-size:23px}
  .hero-title{font-size:58px}
  .hero-lead{font-size:20px;margin-inline:auto}
  .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;width:min(100%,520px);max-width:100%;margin-inline:auto;justify-content:center}
  .hero-stat{min-height:120px;padding:10px 5px 11px}
  .hero-stat .ico{font-size:48px;line-height:.88;margin-bottom:4px}
  .hero-stat strong{font-size:24px}
  .hero-stat > span:not(.ico) > span{font-size:14px;line-height:1.08;margin-top:8px;font-weight:900}
  .hero-left::after{display:none}

  .comment-form .row{grid-template-columns:1fr}
  /* Même comportement pleine largeur pour le télégramme sur tablette :
     il sort du padding de .carnet et le fond est recadré sur les côtés. */
  .comment-form{
    width:100vw;
    max-width:none;
    min-height:940px;
    /* V19 conservée : le télégramme remonte sur le bloc précédent. */
    margin-top:calc(-1 * clamp(82px,12vw,120px));
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* Un peu plus de réserve en bas pour garder le message final dans le parchemin. */
    padding:120px 48px 155px;
    overflow:visible;
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .comment-form::before{top:30px;width:min(100%,700px);margin-bottom:52px;padding-bottom:10px;font-size:18px}
  .comment-form .visibility-note{margin-top:0;padding-inline:18px;top:-18px}
}

@media(max-width:520px){
  .site-header{min-height:118px;grid-template-columns:minmax(72px,84px) minmax(106px,1fr) minmax(106px,118px);column-gap:4px;padding:0 7px;margin-bottom:-18px}
  .site-header::before{left:0;right:0;width:100%;height:100%;transform:none}
  .brand-logo{padding-left:1px;font-size:20px;line-height:.88;gap:2px}
  .brand-logo small{font-size:.72em}
  .brand-logo .compass{display:none}
  .menu-write{width:100%;max-width:150px;min-height:44px;font-size:12px;line-height:1.08;padding:8px 6px;white-space:normal;text-align:center;letter-spacing:.15px}
  .main-nav{gap:5px}
  .main-nav .menu-paths{font-size:14px;line-height:1.08;padding:8px 0;text-align:center;white-space:normal}
  .main-nav .menu-admin{font-size:9.5px;gap:2px;padding:8px 0}
  .main-nav .menu-admin-lock{width:9px;height:9px}

  .hero-team{width:118%;margin-left:-9%}
  .hero-final::before{height:78.6667vw} /* 118vw × ratio 2/3 */
  /* Smartphone : le panneau Bravo occupe tout le viewport.
     Le fond est volontairement agrandi et recadré sur les côtés afin
     de masquer les marges transparentes intégrées à l'image. */
  .hero-left{
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:28px 18px 26px;
    overflow:hidden;
    background-position:center center;
    background-size:124% 100%;
    background-repeat:no-repeat;
  }
  .hero-title{font-size:45px;letter-spacing:-2px}
  .hero-kicker{font-size:19px}
  .hero-lead{font-size:18px}
  .hero-stats{grid-template-columns:repeat(2,minmax(132px,154px));gap:12px 14px;width:100%;justify-content:center}
  .hero-stat{min-height:136px;gap:3px;padding:11px 7px 12px}
  .hero-stat .ico{font-size:52px;line-height:.88;margin-bottom:5px}
  .hero-stat strong{font-size:27px}
  .hero-stat > span:not(.ico) > span{font-size:15px;line-height:1.08;margin-top:8px;font-weight:900}
  .hero-cta{font-size:14px;padding:14px 18px}

  .carnet{padding:0 15px 55px}
  /* Smartphone : le télégramme sort du padding de .carnet et prend
     réellement toute la largeur de l'écran. Son image de fond est
     agrandie horizontalement pour couper les zones transparentes latérales. */
  .comment-form{
    width:100vw;
    max-width:none;
    min-height:860px;
    /* Smartphone : on conserve exactement le chevauchement de la V19. */
    margin-top:-92px;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* Réserve basse accrue afin que le texte d'information reste dans le cadre. */
    padding:105px 24px 145px;
    overflow:visible;
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .comment-form::before{top:26px;width:100%;margin-bottom:47px;padding-bottom:9px;font-size:16px}
  .comment-form .visibility-note{margin-top:0;padding-inline:14px;font-size:12px;top:-22px}
  .btn.btn-primary{width:100%;padding:15px 18px;font-size:14px}
}

@media(max-width:360px){
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,300px);gap:9px}
  .hero-stat{min-height:126px;padding-inline:4px}
  .hero-stat .ico{font-size:47px}
  .hero-stat > span:not(.ico) > span{font-size:14px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}


/* ===== Réglage fin du carrousel sur petit smartphone =====
   Le bloc commentaires remonte encore légèrement et la zone utile gagne
   un peu d'espace sur la droite. Tablette et PC inchangés. */
@media(max-width:560px){
  #comments-list{margin-top:-210px}
  .comments-carousel__viewport{
    left:5.6%;
    right:2.7%;
  }
  .comment-group{
    padding-left:11px;
    padding-right:4px;
  }
  .comment-group .comment-slide{
    width:100%;
    padding-left:11px;
    padding-right:62px;
  }
  .comment-group .comment-slide__meta{padding-right:54px}
  .comment-group .comment-slide__timbre{right:0}
  .comment-group .comment-slide__postmark{right:40px}
}
@media(max-width:420px){
  .comments-carousel__viewport{right:2.2%}
  .comment-group{padding-left:8px;padding-right:2px}
  .comment-group .comment-slide{
    width:100%;
    padding-left:8px;
    padding-right:58px;
  }
  .comment-group .comment-slide__meta{padding-right:50px}
  .comment-group .comment-slide__timbre{right:0}
  .comment-group .comment-slide__postmark{right:38px}
}



/* ===== Bords droits du parchemin commentaires sur PC =====
   L'image conserve ses proportions mais est légèrement agrandie puis recadrée
   horizontalement par le conteneur. Les bords irréguliers/transparents de
   gauche et de droite sortent donc de l'écran : aucun fond ne reste visible. */
@media(min-width:1025px){
  #comments-list,
  .comments-carousel{
    width:100vw;
    overflow:hidden;
  }
  .comments-carousel::before{
    background-size:auto 114%;
    background-position:center center;
  }
  /* On recentre légèrement la zone utile après le recadrage du décor. */
  .comments-carousel__viewport{
    left:9.2%;
    right:9.2%;
  }
}


/* ===== Télégramme : espacement du bouton Publier et de la note finale ===== */
.submit-row{
  justify-content:flex-end;
  position:relative;
  top:-12px;
}
.comment-form .form-status{
  position:relative;
  top:-12px;
  margin-top:0;
}
@media(min-width:801px){
  .comment-form .visibility-note{top:-46px}
}
@media(max-width:800px){
  .comment-form .visibility-note{top:-32px}
}
@media(max-width:520px){
  .comment-form .visibility-note{top:-36px}
}


/* Très petits smartphones : on conserve les tailles lisibles et on gagne de la place
   uniquement sur les espacements. Le bouton central peut rester sur deux lignes. */
@media(max-width:360px){
  .site-header{grid-template-columns:minmax(68px,78px) minmax(102px,1fr) minmax(104px,112px);column-gap:2px;padding-inline:5px}
  .brand-logo{font-size:20px}
  .menu-write{font-size:12px;padding-inline:4px}
  .main-nav .menu-paths{font-size:14px}
  .main-nav .menu-admin{font-size:9px;gap:2px}
  .main-nav .menu-admin-lock{width:8px;height:8px}
}


/* ===== Cachet TERRA AVENTURA : lisibilité renforcée =====
   Le cachet reste légèrement superposé au timbre, mais devient nettement plus
   grand et son texte/date restent lisibles sur PC, tablette et smartphone. */
.comment-group .comment-slide__postmark{
  top:0;
  right:78px;
  width:clamp(104px,7vw,118px);
  height:clamp(104px,7vw,118px);
  border-width:3px;
  font-size:clamp(10.5px,.78vw,12px);
  line-height:1.08;
  letter-spacing:.35px;
  font-weight:700;
}
.comment-group .comment-slide__postmark-date{
  width:84%;
  margin:5px 0 2px;
  padding:4px 0;
  border-top-width:2px;
  border-bottom-width:2px;
  font-size:clamp(11px,.82vw,12.5px);
  line-height:1.05;
  font-weight:700;
}
.comment-group .comment-slide__meta{padding-right:138px}

@media(max-width:1279px) and (min-width:700px){
  .comment-group .comment-slide__postmark{
    top:0;
    right:72px;
    width:104px;
    height:104px;
    font-size:10.5px;
  }
  .comment-group .comment-slide__postmark-date{font-size:11px}
  .comment-group .comment-slide__meta{padding-right:130px}
}

@media(max-width:699px){
  .comment-group .comment-slide__postmark{
    top:-2px;
    right:54px;
    width:96px;
    height:96px;
    border-width:2.5px;
    font-size:10px;
    letter-spacing:.2px;
  }
  .comment-group .comment-slide__postmark-date{
    width:84%;
    margin:4px 0 2px;
    padding:3px 0;
    font-size:10.5px;
  }
  .comment-group .comment-slide__meta{padding-right:126px}
}

@media(max-width:420px){
  .comment-group .comment-slide__postmark{
    right:50px;
    width:90px;
    height:90px;
    font-size:9.5px;
  }
  .comment-group .comment-slide__postmark-date{font-size:10px}
  .comment-group .comment-slide__meta{padding-right:116px}
}

/* ========================================================================== */
/* ===== ACTUALITÉ TEAM PAPAYE : maquette panoramique ======================= */
/* Grande dernière aventure à gauche + deux cartes compactes empilées à droite. */
.team-news{
  position:relative;
  z-index:550;
  padding:clamp(28px,3vw,46px) clamp(18px,2.1vw,42px) clamp(32px,3.4vw,52px);
  color:#2d1b0d;
  background:
    linear-gradient(rgba(73,43,19,.08),rgba(52,29,13,.14)),
    url('assets/design/parchment-panel.png') center/cover fixed;
  border-top:0;
  border-bottom:1px solid rgba(72,40,17,.50);
  box-shadow:inset 0 14px 26px rgba(53,28,10,.06),inset 0 -12px 24px rgba(47,25,9,.09);
}
.team-news__inner{width:min(1900px,100%);margin:0 auto;}
.team-news__heading{text-align:center;max-width:1320px;margin:0 auto clamp(28px,2.6vw,44px);}
.team-news__eyebrow,
.latest-adventure__kicker{
  display:block;
  font-family:'Special Elite',monospace;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:clamp(10px,.82vw,14px);
  font-weight:700;
  color:#8d4f28;
}
.team-news__heading h2{
  margin:6px 0 0;
  font-family:'Cinzel',Georgia,serif;
  font-size:clamp(27px,2.55vw,49px);
  line-height:1.03;
  color:#301b0d;
  text-transform:uppercase;
  letter-spacing:.2px;
}

/* Desktop : proportions proches de la maquette fournie. */
.team-news__layout{
  display:grid;
  grid-template-columns:minmax(0,1.31fr) minmax(430px,1fr);
  gap:12px;
  min-height:clamp(470px,27vw,540px);
  align-items:stretch;
}
.latest-adventure{
  position:relative;
  overflow:hidden;
  min-height:100%;
  padding:92px clamp(38px,3vw,58px) 40px;
  border:1px solid rgba(79,47,21,.62);
  background:
    linear-gradient(90deg,
      rgba(250,236,207,.98) 0%,
      rgba(248,230,194,.94) 31%,
      rgba(243,218,174,.67) 53%,
      rgba(225,194,145,.40) 74%,
      rgba(207,168,111,.30) 100%),
    url('assets/design/montagnes-ciel.png') center right/cover no-repeat;
  box-shadow:6px 8px 17px rgba(42,21,7,.20),inset 0 0 0 2px rgba(255,255,255,.18);
}
.latest-adventure::before{
  content:'';
  position:absolute;
  inset:18px;
  border:1px dashed rgba(87,50,22,.34);
  pointer-events:none;
}
.latest-adventure__number{
  position:absolute;
  z-index:3;
  left:0;
  top:0;
  width:128px;
  padding:12px 12px 8px;
  text-align:center;
  font:900 clamp(34px,3vw,53px)/1 'Cinzel',Georgia,serif;
  color:rgba(116,68,31,.23);
  background:rgba(250,232,197,.78);
}
.latest-adventure__copy{
  position:relative;
  z-index:3;
  width:min(61%,720px);
  min-width:0;
}
.latest-adventure h3{
  margin:11px 0 22px;
  font-family:'Cinzel',Georgia,serif;
  font-size:clamp(27px,2.65vw,48px);
  line-height:1.03;
  color:#2f1b0e;
  overflow-wrap:anywhere;
}
.latest-adventure__place{
  margin:0 0 18px;
  font-size:clamp(17px,1.35vw,25px);
  font-weight:700;
  line-height:1.15;
  color:#71401f;
}
.latest-adventure__date{
  display:block;
  margin-top:14px;
}
.latest-adventure__poiz{
  margin-top:0;
}
.latest-adventure__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0;}
.latest-adventure__meta span{
  padding:10px 14px;
  border:1px solid rgba(106,64,28,.30);
  background:rgba(255,247,225,.56);
  font-size:clamp(13px,1.05vw,19px);
  line-height:1;
  font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);
}
.latest-adventure__stamp{
  position:absolute;
  z-index:4;
  right:clamp(20px,2vw,34px);
  top:clamp(20px,1.8vw,30px);
  width:clamp(96px,7vw,122px);
  height:clamp(96px,7vw,122px);
  border:2px double rgba(102,45,25,.50);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  transform:rotate(9deg);
  font:700 clamp(9px,.78vw,13px)/1.12 'Special Elite',monospace;
  letter-spacing:.2px;
  color:rgba(102,45,25,.67);
  background:rgba(246,226,188,.14);
}

/* Poi'Z : nom en bas à gauche, grande vignette au centre de la carte. */
.latest-adventure__badge{
  position:absolute;
  z-index:3;
  left:clamp(42px,3vw,58px);
  bottom:116px;
  width:min(55%,590px);
  height:205px;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}
.latest-adventure__badge-image{
  position:absolute;
  left:clamp(245px,24vw,310px);
  top:0;
  width:clamp(150px,12.5vw,210px);
  height:clamp(150px,12.5vw,210px);
  border-radius:50%;
  padding:9px;
  display:grid;
  place-items:center;
  background:rgba(247,229,194,.63);
  border:2px solid rgba(107,65,29,.34);
  box-shadow:0 0 0 16px rgba(255,244,218,.22);
}
.latest-adventure__badge-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 5px rgba(55,28,9,.20));
}
/* Le PNG du Poi'Z de l'aventure 01 contient davantage de marge transparente
   au-dessus qu'en dessous : on remonte uniquement le dessin dans son cercle. */
.latest-adventure__badge-image .latest-adventure__badge-poiz{
  transform:translateY(-8%);
  transform-origin:center center;
}
.team-news__button{
  position:absolute;
  z-index:4;
  left:clamp(48px,3.4vw,68px);
  bottom:43px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 24px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.3px;
  font-weight:900;
  font-size:clamp(12px,1vw,18px);
  color:#f2d29b;
  border:2px solid #8a5a2d;
  outline:2px solid #231207;
  outline-offset:-6px;
  background:linear-gradient(145deg,#4a2915,#2b160b 58%,#4d2c17);
  box-shadow:inset 0 0 0 2px #6a3c1e,0 5px 9px rgba(39,18,4,.28);
  white-space:nowrap;
}
.team-news__button:hover{filter:brightness(1.12);transform:translateY(-1px);}

.recent-adventures{min-width:0;margin:0;}
.recent-adventures__grid{
  height:100%;
  display:grid;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:26px;
}
.recent-adventure-card{
  position:relative;
  min-height:0;
  display:grid;
  grid-template-columns:118px minmax(0,1fr) 150px;
  gap:18px;
  align-items:center;
  padding:28px 32px 26px 24px;
  background:
    linear-gradient(120deg,rgba(247,233,205,.96),rgba(243,226,194,.91)),
    url('assets/design/parchment-panel.png') center/cover;
  border:1px solid rgba(92,52,23,.40);
  box-shadow:4px 6px 12px rgba(45,23,8,.15),inset 0 0 0 1px rgba(255,255,255,.24);
  transition:transform .18s ease,box-shadow .18s ease;
}
.recent-adventure-card:hover{transform:translateY(-2px);box-shadow:6px 8px 14px rgba(45,23,8,.18);}
.recent-adventure-card__number{
  align-self:start;
  justify-self:center;
  font:900 clamp(33px,2.7vw,48px)/1 'Cinzel',Georgia,serif;
  color:rgba(116,68,31,.25);
  padding-top:4px;
}
.recent-adventure-card__body{min-width:0;align-self:center;}
.recent-adventure-card__date{
  font:700 clamp(10px,.8vw,14px)/1.2 'Special Elite',monospace;
  color:#8d4f28;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.recent-adventure-card h4{
  margin:10px 0 7px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(19px,1.55vw,29px);
  line-height:1.08;
  color:#321d0e;
  overflow-wrap:anywhere;
}
.recent-adventure-card p{
  margin:0 0 11px;
  font-size:clamp(15px,1.12vw,22px);
  line-height:1.15;
  color:#69401f;
}
.recent-adventure-card__poiz{
  display:inline-block;
  padding:5px 9px;
  background:rgba(255,246,220,.62);
  border:1px solid rgba(108,64,28,.26);
  font-size:clamp(12px,.92vw,17px);
  line-height:1;
  font-weight:800;
  color:#70401e;
}
.recent-adventure-card__poiz-image{
  width:clamp(94px,7.4vw,128px);
  height:clamp(94px,7.4vw,128px);
  justify-self:end;
  border-radius:50%;
  padding:8px;
  background:rgba(247,230,196,.57);
  border:2px solid rgba(107,65,29,.28);
  box-shadow:0 0 0 9px rgba(255,246,221,.18);
}
.recent-adventure-card__poiz-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 4px rgba(55,28,9,.17));
}
.team-news__empty{padding:24px;text-align:center;background:rgba(239,224,189,.85);border:1px dashed rgba(91,53,24,.5);}
.team-news__empty strong,.team-news__empty span{display:block;}
.team-news__empty strong{font-family:'Cinzel',Georgia,serif;font-size:18px;margin-bottom:5px;}
.team-news__empty span{color:#684622;}

/* Tablette : grande carte en haut, 02/03 côte à côte sous celle-ci. */
@media(max-width:1180px){
  .team-news{padding-left:22px;padding-right:22px;background-attachment:scroll;}
  .team-news__inner{width:min(1040px,100%);}
  .team-news__layout{grid-template-columns:1fr;min-height:0;gap:16px;}
  .latest-adventure{min-height:440px;}
  .latest-adventure__copy{width:60%;}
  .latest-adventure__badge{bottom:105px;width:58%;}
  .latest-adventure__badge-image{left:min(31vw,300px);}
  .recent-adventures__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:16px;}
  .recent-adventure-card{min-height:190px;grid-template-columns:70px minmax(0,1fr) 92px;gap:12px;padding:22px 18px;}
  .recent-adventure-card__poiz-image{width:80px;height:80px;padding:6px;}
}

/* Smartphone : tout repasse sur une seule colonne et reste lisible. */
@media(max-width:720px){
  .team-news{padding:25px 14px 32px;}
  .team-news__heading{margin-bottom:19px;}
  .team-news__heading h2{font-size:clamp(23px,8vw,34px);}
  .latest-adventure{
    min-height:0;
    padding:68px 17px 20px;
    background:
      linear-gradient(rgba(245,226,190,.91),rgba(239,218,177,.92)),
      url('assets/design/montagnes-ciel.png') center/cover no-repeat;
  }
  .latest-adventure::before{inset:8px;}
  .latest-adventure__number{width:62px;font-size:27px;padding-top:8px;}
  /* Mobile : cachet plus présent et Poi'Z placé à droite du contenu,
     comme sur la maquette smartphone fournie. */
  .latest-adventure__stamp{
    right:12px;
    top:10px;
    width:clamp(86px,23vw,96px);
    height:clamp(86px,23vw,96px);
    font-size:clamp(9px,2.5vw,11px);
    border-width:3px;
  }
  .latest-adventure__copy{
    width:58%;
    min-height:205px;
  }
  .latest-adventure__date{margin-top:10px;}
  .latest-adventure h3{font-size:clamp(24px,7.6vw,34px);margin:7px 0 13px;}
  .latest-adventure__place{font-size:18px;margin-bottom:13px;}
  .latest-adventure__meta span{font-size:13px;padding:8px 10px;}
  .latest-adventure__badge{
    position:absolute;
    z-index:3;
    right:17px;
    left:auto;
    top:150px;
    bottom:auto;
    width:clamp(118px,34vw,138px);
    height:clamp(118px,34vw,138px);
    margin:0;
    padding:0;
    background:none;
  }
  .latest-adventure__badge-image{
    position:static;
    width:100%;
    height:100%;
    padding:8px;
    box-shadow:0 0 0 8px rgba(255,244,218,.16);
  }
  .team-news__button{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    margin-top:15px;
    padding:12px 13px;
    white-space:normal;
    text-align:center;
  }
  .recent-adventures__grid{grid-template-columns:1fr;gap:10px;}
  .recent-adventure-card{
    min-height:0;
    grid-template-columns:50px minmax(0,1fr) 72px;
    gap:9px;
    padding:15px 13px;
  }
  .recent-adventure-card__number{font-size:26px;}
  .recent-adventure-card h4{font-size:17px;margin:6px 0 4px;}
  .recent-adventure-card p{font-size:14px;margin-bottom:7px;}
  .recent-adventure-card__poiz{font-size:11px;padding:4px 6px;}
  .recent-adventure-card__poiz-image{width:64px;height:64px;padding:5px;box-shadow:none;}
}

@media(max-width:430px){
  .latest-adventure__stamp{width:88px;height:88px;font-size:9px;}
  .latest-adventure__copy{width:59%;}
  .latest-adventure__badge{right:14px;top:150px;width:122px;height:122px;}
  .recent-adventure-card{grid-template-columns:42px minmax(0,1fr) 58px;}
  .recent-adventure-card__poiz-image{width:54px;height:54px;}
  .recent-adventure-card__number{font-size:23px;}
  .recent-adventure-card h4{font-size:15px;}
}