/* ==========================================================================
   Refonte « carnet de voyage » — accueil (chargée après les styles de accueil.html)
   Charte gardée : Fraunces + Hanken Grotesk, vert profond, terre cuite,
   parchemin, étoile. Un seul accent : la terre cuite. Le safran est réservé
   à l'étoile et au timbre.
   ========================================================================== */
:root{
  --ground:#F3EBDC; --paper:#FBF7EF; --ink:#22190F; --ink-soft:#5E4E3B;
  --terra:#B8462B; --terra-2:#9A3820; --green:#123E30; --green-ink:#0C271F;
  --carte:#FFFDF8; --ombre-carte:0 18px 40px -18px rgba(60,38,18,.45), 0 2px 6px rgba(60,38,18,.12);
}
body{ background:var(--ground); }

/* --- la barre : claire dès le départ, logo pour fond clair --------------- */
.nav{ background:rgba(243,235,220,.86); backdrop-filter:blur(12px) saturate(1.2); box-shadow:0 1px 0 rgba(34,25,15,.08); }
.nav .brand__logo{ transform:scale(1.18) !important; }
.nav.is-stuck .brand__logo{ transform:none !important; }
.nav .brand__logo--sombre{ opacity:0 !important; }
.nav .brand__logo--clair{ opacity:1 !important; }
.nav__links a{ color:var(--ink-soft) !important; font-weight:500; }
.nav__links a:hover{ color:var(--ink) !important; background:rgba(34,25,15,.05) !important; }
.nav__espace, .nav__lang summary{ color:var(--ink) !important; text-shadow:none !important; }
.nav .btn--ink{ background:var(--ink) !important; color:var(--paper) !important; border-color:transparent !important; }
.nav__burger{ color:var(--ink) !important; }

/* --- le héros : une page de carnet ---------------------------------------- */
.hero{ color:var(--ink); min-height:auto; background:
  radial-gradient(60% 70% at 85% 30%, rgba(184,70,43,.10), transparent 70%),
  radial-gradient(50% 60% at 10% 90%, rgba(18,62,48,.08), transparent 70%),
  var(--ground); }
.hero__glow, .hero__arch{ display:none; }
.hero__zellige{ opacity:.05 !important; mix-blend-mode:multiply; filter:sepia(1) saturate(.4); }
.hero__inner{ padding-block:128px 120px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,64px); align-items:center; }
.hero__texte{ min-width:0; }
.hero__eyebrow{ color:var(--terra) !important; }
.hero h1{ color:var(--ink); font-weight:300; font-size:clamp(2.8rem,6.2vw,5.6rem); max-width:12ch; letter-spacing:-.04em; line-height:.98; }
.hero h1 em{ color:var(--terra) !important; font-weight:400; position:relative; white-space:nowrap; }
.hero h1 em::after{ content:""; position:absolute; left:-.04em; right:-.08em; bottom:-.12em; height:.22em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4, 90 3, 120 8 S 180 16, 197 6' fill='none' stroke='%23B8462B' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; }
.hero__sub{ color:var(--ink-soft) !important; }
.search{ background:var(--carte) !important; box-shadow:var(--ombre-carte) !important; border:1px solid rgba(34,25,15,.08); }

/* Le carnet : trois cartes postales et un timbre */
/* **Le carnet garde ses proportions.** Une hauteur fixe laissait la photo
   ronde, accrochée en bas, s'éloigner des cartes postales accrochées en haut
   dès que le cadre était plus haut qu'elles. Le cadre suit maintenant sa
   largeur, et tout y est placé depuis le haut. */
.carnet{ position:relative; width:100%; max-width:640px; justify-self:end; aspect-ratio:1 / .95; }
.carnet figure{ position:absolute; margin:0; background:var(--carte); padding:10px 10px 34px; box-shadow:var(--ombre-carte); border-radius:3px; }
.carnet figure img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:1px; }
.carnet figcaption{ position:absolute; left:12px; bottom:9px; font:italic 400 .95rem var(--display); color:var(--ink-soft); }
.carnet .pc1{ width:58%; aspect-ratio:4/5; right:4%; top:0; rotate:4deg; z-index:2; }
.carnet .pc2{ width:50%; aspect-ratio:5/4; left:0; top:22%; rotate:-6deg; z-index:1; }
.carnet .pc3{ width:38%; aspect-ratio:1; left:auto; right:-2%; top:64%; rotate:-2deg; z-index:3; padding:8px; border-radius:50%; }
.carnet .pc3 img{ border-radius:50%; }
.carnet .pc3{ overflow:visible; }
/* La légende de la photo ronde se pose dessous, comme une étiquette. */
.carnet .pc3 figcaption{ display:block; left:50%; bottom:-30px; translate:-50% 0; white-space:nowrap;
  background:var(--carte); padding:2px 12px; border-radius:999px; box-shadow:0 4px 10px -6px rgba(60,38,18,.4); }
/* Le phare de Tanger est à droite de la photo : on le garde dans le cadre. */
.carnet .pc2 img{ object-position:72% center; }
.timbre{ position:absolute; z-index:4; left:30%; top:2%; width:112px; height:132px; rotate:-9deg; display:grid; place-items:center; text-align:center;
  background:var(--paper) padding-box; color:var(--terra); padding:8px;
  border:6px dotted var(--ground); /* les perforations du timbre */
  box-shadow:0 8px 18px -8px rgba(60,38,18,.4); }
.timbre__in{ border:1.5px solid currentColor; width:100%; height:100%; display:grid; place-items:center; align-content:center; gap:4px; padding:6px; }
.timbre svg{ width:42px; height:42px; }
.timbre b{ font:700 .6rem/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.carnet__route{ position:absolute; inset:-6% -4% auto auto; width:70%; z-index:0; color:var(--terra); opacity:.55; }
.carnet__credit{ position:absolute; right:0; bottom:-6px; font-size:.68rem; color:var(--ink-soft); opacity:.8; }

/* Le ruban de chiffres chevauche le bas du héros */
.trust{ position:relative; z-index:5; margin:0; }
.ruban{ position:relative; z-index:5; margin:-56px auto 0; width:min(1140px,calc(100% - 40px)); background:var(--green); color:#F3EBDC;
  border-radius:18px; padding:22px clamp(20px,4vw,44px); display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:space-between;
  box-shadow:0 24px 50px -28px rgba(12,39,31,.8); }
.ruban .trust{ margin:0; gap:14px 40px; }
.ruban .trust b{ color:#F3EBDC; }
.ruban .trust span{ color:rgba(243,235,220,.75); }
.ruban .trust i{ background:rgba(243,235,220,.22); }
.ruban__note{ font:italic 400 1.05rem var(--display); color:#F0B566; }

/* --- les rubriques : une mosaïque, pas une grille égale ------------------- */
.rubs{ grid-template-columns:repeat(12,1fr) !important; grid-auto-rows:150px; }
.rub{ grid-column:span 4 !important; grid-row:span 1; border:0 !important; background:var(--carte) !important; box-shadow:0 1px 0 rgba(34,25,15,.06), 0 10px 30px -22px rgba(60,38,18,.5); }
.rub:nth-child(1){ grid-column:span 7 !important; grid-row:span 2; background:linear-gradient(150deg,var(--green),var(--green-ink)) !important; }
.rub:nth-child(2){ grid-column:span 5 !important; grid-row:span 2; background:linear-gradient(150deg,var(--terra),var(--terra-2)) !important; }
.rub:nth-child(n+3){ grid-column:span 3 !important; }
.rub:nth-child(n+3) .rub__name{ font-size:clamp(1.1rem,1.5vw,1.45rem) !important; }
.rub__name{ font-size:clamp(1.3rem,2vw,1.9rem) !important; letter-spacing:-.02em; }
.rub:nth-child(-n+2) .rub__name{ font-size:clamp(1.8rem,3vw,2.8rem) !important; font-weight:300; }
.rub:nth-child(-n+2) .rub__count{ font-size:3.6rem; }

/* --- la sélection : des cartes postales ----------------------------------- */
.card{ border:0 !important; background:var(--carte) !important; padding:10px 10px 0 !important; color:var(--ink) !important; justify-content:flex-start !important; box-shadow:var(--ombre-carte); border-radius:6px !important; }
.card::after{ display:none; }
/* La photo prend la place qui reste : le titre, lui, ne se coupe jamais à mi-ligne. */
.card__img{ position:relative !important; inset:auto !important; height:0 !important; flex:1 1 0; min-height:70px; border-radius:3px; z-index:0 !important; }
.card__tag{ position:absolute; top:20px; left:20px; background:rgba(251,247,239,.92) !important; color:var(--ink) !important; backdrop-filter:none !important; }
.card__name{ color:var(--ink); font-size:1.15rem !important; padding:12px 4px 2px; -webkit-line-clamp:2 !important; flex:none; }
.card--big .card__name{ font-size:1.6rem !important; }
.card__meta{ color:var(--ink-soft) !important; padding:0 4px 14px; flex:none; }
.card__price{ color:var(--terra) !important; }
.bento .card:nth-child(2){ rotate:1.2deg; } .bento .card:nth-child(4){ rotate:-1deg; }

/* --- titres de section avec leur trait à la main -------------------------- */
.section__head h2{ letter-spacing:-.035em; font-weight:300; }
.section__head h2::after{ content:""; display:block; width:120px; height:12px; margin-top:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 8 C 30 2, 60 2, 80 6 S 110 10, 118 4' fill='none' stroke='%23B8462B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }

/* --- manifeste : vert profond, un seul bloc sombre assumé ---------------- */
.manifesto{ background:var(--green) !important; }

@media(max-width:900px){
  .hero__inner{ grid-template-columns:1fr; padding-block:110px 100px; }
  .carnet{ margin-top:12px; justify-self:center; max-width:520px; }
  .rubs{ grid-template-columns:repeat(2,1fr) !important; grid-auto-rows:auto; }
  .rub, .rub:nth-child(n){ grid-column:span 1 !important; grid-row:auto; min-height:150px; }
  .rub:nth-child(1), .rub:nth-child(2){ grid-column:span 2 !important; min-height:180px; }
  .bento .card:nth-child(n){ rotate:none; }
}
@media(max-width:560px){
  .carnet{ margin-bottom:28px; }
  /* Le crédit passe sous le carnet : la photo ronde le recouvrait. */
  .carnet__credit{ bottom:-24px; }
  .timbre{ width:88px; height:104px; left:auto; right:2%; top:-6%; }
  .timbre svg{ width:30px; height:30px; }
  .ruban{ margin-top:-40px; }
  .ruban__note{ display:none; }
}
@media(prefers-reduced-motion:no-preference){
  .carnet figure, .timbre{ animation:poser .7s cubic-bezier(.23,1,.32,1) both; }
  .carnet .pc2{ animation-delay:.08s; } .carnet .pc3{ animation-delay:.16s; } .timbre{ animation-delay:.28s; }
  @keyframes poser{ from{ opacity:0; translate:0 18px; } }
}

/* La recherche prend toute la largeur sous le titre et le carnet. */
.hero__inner > .search{ grid-column:1 / -1; max-width:none; margin-top:8px; }
.hero__inner > .search .search__field{ flex:1 1 200px; }

/* Des séparateurs droits entre les champs de recherche : une bordure posée
   sur une boîte arrondie se recourbait aux deux bouts. */
.search__field{ border-radius:0 !important; }

/* La photo ronde, agrandie (demande de Khalid) : le carnet lui laisse la
   place de déborder sous lui sans toucher la recherche. */
.carnet{ margin-bottom:9%; }

.carnet{ margin-bottom:12%; }