/* Page d’un niveau au-dessus des régions (« Le Sahara », geo/macro.js) — livraison design du 30/09/2026,
   maquette ou-quoi-quand/Sahara.dc.html. Complète fiche.css. « Maquette partout » (décision de Mehdi du 1er/10) :
   les valeurs de la maquette sont fixées ici sous .fiche-macro, y compris pour les classes communes que la page
   emploie (fiche.css peut évoluer pour d’autres gabarits sans changer cette page). Bascule mobile : 720 px. */

/* ---------------------------------------------------------------- héros */
/* Maquette : surtitre, titre et chapô en colonne, 14 px entre eux ; titre de 76 à 190 px. */
.fiche-macro .fiche-hero{min-height:clamp(560px,78vh,860px)}
.fiche-macro .fiche-hero-copy{display:flex;flex-direction:column;gap:14px;flex:1 1 520px;min-width:0;max-width:none}
.fiche-macro .fiche-hero-copy .fiche-crumbs{margin-bottom:calc(clamp(16px,2cqi,28px) - 14px)}
.fiche-macro .fiche-hero .fiche-kicker{margin:0;font:600 11.5px/1.4 Poppins,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--saffron)}
.fiche-macro .fiche-hero .fiche-h1{font:700 clamp(76px,13cqi,190px)/.86 var(--serif);letter-spacing:-.05em;text-shadow:0 2px 40px rgba(0,0,0,.25);text-wrap:wrap}
.fiche-macro .fiche-hero .fiche-chapo{margin:0;font:italic 700 clamp(22px,2.2cqi,32px)/1.15 var(--serif);max-width:680px;color:rgba(255,255,255,.96);text-wrap:pretty}
/* Voile de la maquette ; le haut reste plus dense (navigation transparente lisible sur toute photo, fiche.css). */
.fiche-macro .fiche-hero-veil{background:linear-gradient(180deg,rgba(11,12,13,.62) 0,rgba(11,12,13,.3) 130px,rgba(11,12,13,0) 260px,rgba(11,12,13,.14) 55%,rgba(11,12,13,.74) 100%)}
@media (max-width:720px){.fiche-macro .fiche-hero{min-height:640px}}

/* Bandeau « L’essentiel » et barre d’ancres : fiche.css (communs à toutes les fiches). */

/* ---------------------------------------------------------------- repères */
/* Le bouton d’ajout du mobile (dernier enfant, masqué en bureau) ne donne pas de filet au dernier repère. */
.fiche-macro .fiche-facts{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.fiche-macro .fiche-facts>div:has(+ .fiche-facts-add){border-right:0;margin-right:0}

/* ---------------------------------------------------------------- titres de section */
.fiche-macro .fiche-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin-bottom:clamp(24px,3cqi,40px)}
.fiche-macro .fiche-head>div:first-child{display:flex;flex-direction:column;gap:8px}
.fiche-macro h2.fiche-h2{margin:0;font:700 clamp(34px,3.8cqi,56px)/.98 var(--serif);letter-spacing:-.03em;text-wrap:wrap}
.fiche-macro .fiche-intro{font-size:13.5px;line-height:1.7;color:var(--text2);max-width:440px}
.fiche-macro #dans .fiche-intro,.fiche-macro #savoir .fiche-intro{max-width:460px}
.fiche-macro .fiche-link{display:inline-flex;gap:6px;font-size:12.5px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:1px;white-space:nowrap}
.macro-head-side{display:flex;flex-direction:column;gap:10px;align-items:flex-start;max-width:440px}

/* ---------------------------------------------------------------- récit */
.fiche-macro #recit{padding:clamp(56px,7cqi,112px) var(--gut) clamp(48px,6cqi,96px)}
/* Le libellé « Récit » est un h2 à la forme d’un surtitre (la règle des titres du récit le grossirait). */
.fiche-macro .fiche-recit-copy h2.fiche-overline{font:600 11px/1.4 Poppins,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;text-wrap:wrap}
.fiche-macro .fiche-recit-copy h2#recit-title{font:700 clamp(38px,4.4cqi,64px)/.96 var(--serif);letter-spacing:-.035em;text-wrap:balance}
.fiche-macro .fiche-points{gap:20px 28px;margin-top:8px}
.fiche-macro .fiche-points>div{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:2px solid var(--ink)}
/* Petits titres en Poppins, comme la maquette (la règle h1-h4 d’explorer/styles.css les passerait en Cormorant). */
.fiche-macro .fiche-points h3,.fiche-macro .fiche-yaller-rows h3{margin:0;font:600 13px/1.4 Poppins,system-ui,sans-serif;letter-spacing:0;text-wrap:wrap}
.fiche-macro .fiche-points p{font-size:13.5px;line-height:1.75;color:var(--text3)}
/* La figure garde le 3/2 de la maquette (sans height:auto, l’attribut height de l’image l’emporte) ; sa légende reste
   visible en mobile, sous l’image, comme dans la maquette. */
.fiche-macro .fiche-recit-figure{display:flex;flex-direction:column;gap:10px}
.fiche-macro .fiche-recit-figure img{width:100%;height:auto;aspect-ratio:3/2;max-height:560px;object-fit:cover}
.fiche-macro .fiche-recit-figure figcaption{display:block;margin:0;font-size:12px;line-height:1.5;color:var(--muted)}

/* ---------------------------------------------------------------- dans le Sahara */
.fiche-macro #dans{padding:clamp(48px,6cqi,96px) var(--gut);background:var(--paper);border-top:1px solid var(--line)}
/* Cartes de secteur (maquette) : « depuis … » en safran, nom et flèche, description, sur image ou sur aplat nuit. */
.fiche-macro .fiche-geo{position:relative;display:block;min-height:320px;overflow:hidden;background:#1d2a31;color:#FFF}
.fiche-macro .fiche-geo.is-big{min-height:440px}
.fiche-macro .fiche-geo-text{position:absolute;left:20px;right:20px;bottom:20px;z-index:1;display:flex;flex-direction:column;gap:6px}
.fiche-macro .fiche-geo-dist{font:600 10.5px/1.4 Poppins,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron)}
.fiche-macro .fiche-geo-title{font:700 clamp(28px,2.4cqi,34px)/.98 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.fiche-macro .fiche-geo.is-big .fiche-geo-title{font-size:clamp(40px,4.4cqi,64px)}
.fiche-macro .fiche-geo-title small{margin:0;font:600 13px/1 Poppins,system-ui,sans-serif;color:var(--saffron)}
.fiche-macro .fiche-geo-x{font-size:13px;line-height:1.6;color:rgba(255,255,255,.9);max-width:60ch}
.fiche-macro #dans .fiche-row{margin-top:14px}
.fiche-macro #dans .fiche-row>*{flex:0 0 clamp(260px,31%,360px)}
/* Les portes d’entrée */
.macro-gates{margin-top:clamp(28px,3.4cqi,48px);display:flex;flex-direction:column;gap:14px}
.macro-gates-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.macro-gates-head>p:not(.fiche-overline){font-size:12.5px;color:var(--text2)}
.fiche-macro .macro-gates ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:0 clamp(16px,2cqi,28px)}
.macro-gates li{padding:16px 0 18px;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:8px;min-width:0}
.macro-gate-k{font:600 10.5px/1.4 Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fiche-macro .macro-gates h3{font:700 clamp(26px,2.4cqi,34px)/1 var(--serif);letter-spacing:-.025em;text-wrap:wrap}
.fiche-macro .macro-gates h3 a{display:flex;align-items:baseline;gap:8px}
.macro-gates h3 small{font:600 13px/1 Poppins,sans-serif;color:var(--saffron-dark)}
.fiche-macro .macro-gate-plain{color:var(--text3)}
.fiche-macro .macro-gates li>p{font-size:12.5px;line-height:1.6;color:var(--text2)}

/* ---------------------------------------------------------------- à vivre */
.fiche-macro #vivre{padding:clamp(56px,7cqi,112px) var(--gut) clamp(24px,3cqi,48px)}
.macro-vivre{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
/* Expérience au premier plan : image et texte sur fond nuit, sur toute la largeur. */
.macro-feature{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));background:#0b1016;color:#FFF;min-height:300px}
.fiche-macro .macro-feature-figure{position:relative;display:block;min-height:260px;overflow:hidden;background:#1d2a31}
.macro-feature-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.macro-feature-copy{padding:clamp(24px,3cqi,40px);display:flex;flex-direction:column;gap:14px;min-width:0}
/* Cartes texte des autres expériences ; fond safran pâle une fois gardées dans le voyage (maquette). */
.macro-exp{background:var(--paper);border:1px solid var(--line2);padding:clamp(22px,2.6cqi,32px);min-height:300px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:background .2s,border-color .2s}
.macro-exp:has(.macro-save[aria-pressed="true"]){background:#FFF6E6;border-color:#F1DDB6}
.macro-exp-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fiche-macro .macro-exp-k{font:600 11px/1.4 Poppins,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-dark)}
.fiche-macro .macro-feature .macro-exp-k{letter-spacing:.18em;color:var(--saffron)}
.fiche-macro h3.macro-exp-title{font:700 clamp(30px,2.8cqi,40px)/.98 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.fiche-macro h3.macro-feature-title{font:700 clamp(34px,3.4cqi,50px)/.96 var(--serif);letter-spacing:-.03em;text-wrap:wrap}
.fiche-macro .macro-feature-title a{color:#FFF}
.fiche-macro .macro-feature-title a:hover{color:var(--saffron)}
.fiche-macro .macro-exp-title span,.fiche-macro .macro-feature-title span{font:600 13px/1 Poppins,system-ui,sans-serif;letter-spacing:0;color:var(--saffron-dark)}
.fiche-macro .macro-feature-title span{font-size:14px;color:var(--saffron)}
.fiche-macro .macro-exp-x{font-size:14px;line-height:1.75;color:var(--text3);max-width:52ch}
.fiche-macro .macro-feature .macro-exp-x{font-size:14.5px;color:rgba(255,255,255,.9);max-width:56ch}
.macro-exp-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.macro-feature .macro-exp-foot{gap:12px}
.fiche-macro .macro-where{font-size:12.5px;font-weight:500;line-height:1.5;color:var(--deep)}
.fiche-macro .macro-feature .macro-where{color:rgba(255,255,255,.85)}
.macro-chips{display:flex;flex-wrap:wrap;gap:8px}
/* Puces : sur une ligne quand elles tiennent ; une puce plus longue que la carte passe à la ligne au lieu de déborder. */
.fiche-macro .macro-chip{padding:6px 11px;border:1px solid var(--line);font-size:12px;font-weight:600;line-height:1.4}
.fiche-macro .macro-feature .macro-chip{border-color:rgba(255,255,255,.35)}

/* ---------------------------------------------------------------- signets « Garder » (44 px, maquette §2.14) */
.fiche-macro .macro-save{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;padding:0;background:#FFF;border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
.fiche-macro .macro-save svg{width:16px;height:16px}
.fiche-macro .macro-save:hover{border-color:var(--ink)}
.fiche-macro .macro-save[aria-pressed="true"] svg path{fill:var(--saffron)}
.fiche-macro .macro-spot .macro-save[aria-pressed="true"]{background:#FFF6E6}
.fiche-macro .macro-feature .macro-save{background:transparent;border-color:rgba(255,255,255,.35);color:#FFF}
.fiche-macro .macro-feature .macro-save:hover{border-color:#FFF}
/* « Voir mes envies » (liste d’envies) en bout de barre d’ancres, masqué tant que la liste est vide : un bouton, qui
   reprend la forme des liens de la barre. */
.fiche-macro .fiche-anchor-nav .macro-count{margin-left:auto;display:flex;align-items:center;flex:0 0 auto;gap:8px;height:44px;padding:0;border:0;border-bottom:2px solid transparent;background:none;color:var(--ink);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer}
.fiche-macro .fiche-anchor-nav .macro-count[hidden]{display:none}
.fiche-macro .macro-count svg{width:14px;height:14px}
.fiche-macro .macro-count svg path{fill:var(--saffron);stroke:var(--ink)}

/* ---------------------------------------------------------------- à voir */
.fiche-macro #faire{padding:clamp(48px,6cqi,96px) var(--gut)}
.macro-spots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(18px,2.4cqi,32px)}
.macro-spot{display:flex;flex-direction:column;gap:14px;min-width:0}
.fiche-macro .macro-spot-photo{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:#1d2a31;color:#FFF}
.macro-spot-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.macro-spot-photo:hover img{transform:scale(1.04)}
.macro-spot-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,13,0) 45%,rgba(11,12,13,.7) 100%)}
.macro-spot-photo.is-flat{background:linear-gradient(160deg,#193342,#0F1C24)}
.macro-spot-photo.is-flat::after{display:none}
.macro-spot-cap{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;display:flex;flex-direction:column;gap:6px;color:#FFF}
.macro-spot-cap small{font:600 10.5px/1.4 Poppins,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron)}
.macro-spot-cap strong{font:700 clamp(28px,2.4cqi,36px)/1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.macro-spot-copy{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.macro-spot-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.fiche-macro .macro-spot-where{font-size:12.5px;line-height:1.5;color:var(--text2)}
.macro-spot-chips{display:flex;flex-wrap:wrap;gap:6px}
.macro-spot-chips span{padding:4px 9px;background:var(--mist);font-size:12px;font-weight:600;line-height:1.4}
.fiche-macro .macro-spot-q{font-size:13.5px;line-height:1.7;color:var(--text3)}
.fiche-macro .macro-spot-open{display:inline-flex;gap:6px;width:max-content;margin-top:2px;padding-bottom:1px;font-size:12.5px;font-weight:600;border-bottom:1px solid currentColor}

/* ---------------------------------------------------------------- quand partir */
.fiche-macro #quand{padding:clamp(56px,7cqi,104px) var(--gut)}
.fiche-macro .fiche-quand{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(32px,5cqi,96px);align-items:start}
.fiche-macro .fiche-quand>div:first-child{display:flex;flex-direction:column;gap:22px;min-width:0}
.fiche-macro .fiche-quand-title{margin:0;font:italic 700 clamp(48px,6cqi,92px)/.92 var(--serif);letter-spacing:-.03em;color:var(--saffron);text-wrap:wrap}
.fiche-macro .fiche-band{margin:0;padding-top:6px}
.fiche-macro .fiche-band.has-heart>div{grid-template-rows:6px 48px auto 8px;gap:8px}
.macro-heart{display:block;height:6px;position:relative}
.macro-heart.is-heart::after{content:"";position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#FFF}
.macro-sectors{display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.fiche-macro .macro-sectors-k{font:600 10.5px/1.4 Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.macro-sector{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px;align-items:center}
.fiche-macro .macro-sector>a{font-size:12px;font-weight:600;color:#FFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fiche-macro .fiche-dark .macro-sector>a:hover{color:var(--saffron)}
.macro-cells{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
.macro-cells i{display:block;height:10px;border:1.5px solid;box-sizing:border-box}
.macro-cells i[data-s="f"]{background:var(--saffron);border-color:var(--saffron)}
.macro-cells i[data-s="p"]{background:transparent;border-color:var(--saffron)}
.macro-cells i[data-s="e"]{background:var(--avoid);border-color:var(--avoid)}
.macro-sector.is-follow .macro-cells{opacity:.45}
.fiche-macro .fiche-legend{margin:0;gap:8px 18px;font-size:11.5px;color:rgba(255,255,255,.85)}
.fiche-macro .fiche-legend span{gap:6px;white-space:nowrap}
.fiche-macro .fiche-legend i.is-follow{opacity:.45}
.fiche-macro .fiche-legend i.is-heart{width:5px;height:5px;border:0;border-radius:50%;background:#FFF}
.fiche-macro .fiche-quand-copy{display:flex;flex-direction:column;gap:18px;padding-top:clamp(0px,4cqi,58px)}
.fiche-macro .fiche-quand-copy>p:not(.fiche-source){font-size:15px;line-height:1.85;color:rgba(255,255,255,.95);max-width:60ch}
/* Encadré d’un événement : le mot en italique safran, puis le titre et le texte (maquette). */
.macro-event{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border:1px solid rgba(255,255,255,.3)}
.macro-event>b{flex:none;font:italic 700 34px/1 var(--serif);color:var(--saffron)}
.macro-event>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.fiche-macro .macro-event strong{font-size:13.5px;font-weight:600;color:#FFF}
.fiche-macro .macro-event p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.85)}
.fiche-macro .fiche-source{font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.7)}

/* ---------------------------------------------------------------- à savoir */
.fiche-macro #savoir{padding:clamp(56px,7cqi,104px) var(--gut);background:var(--paper);border-top:1px solid var(--line2)}
.fiche-macro #savoir .fiche-row{margin:0 calc(-1 * var(--gut))}
.fiche-macro #savoir .fiche-row>*{flex:0 0 clamp(280px,31%,360px)}
.fiche-macro .fiche-savoir{height:100%;display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.4cqi,28px);min-height:250px;min-width:0}
.fiche-macro .fiche-scope{padding-top:4px;white-space:nowrap}
/* Provenance d’une carte reprise d’un secteur : gris, safran foncé au survol ; celle d’une carte propre, en safran. */
.fiche-macro a.fiche-scope{color:var(--muted)}
.fiche-macro a.fiche-scope:hover{color:var(--saffron-dark)}
.fiche-macro .fiche-savoir.is-own .fiche-scope{color:var(--saffron)}
.fiche-macro .fiche-savoir h3{font:700 clamp(24px,2.2cqi,28px)/1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.fiche-macro .fiche-savoir h3+p{margin-top:-8px}
.fiche-macro .fiche-savoir p{font-size:13.5px;line-height:1.75}
.fiche-macro .fiche-savoir footer{margin-top:auto;padding-top:12px;font-size:11.5px;line-height:1.5}

/* ---------------------------------------------------------------- y aller */
.fiche-macro #yaller{padding:clamp(56px,7cqi,104px) var(--gut)}
.fiche-macro .fiche-yaller{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(32px,5cqi,88px);align-items:center}
.fiche-macro .fiche-yaller>div:first-child{display:flex;flex-direction:column;gap:22px;min-width:0}
.fiche-macro .fiche-yaller-rows{display:flex;flex-direction:column;margin:0}
.fiche-macro .fiche-yaller-rows>div{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-top:1px solid var(--line)}
.fiche-macro .fiche-yaller-rows>div:first-child{border-top-color:var(--ink)}
.fiche-macro .fiche-yaller-rows h3{font-size:14px}
.fiche-macro .fiche-yaller-rows p{font-size:14px;line-height:1.75;color:var(--text3)}
/* Le Tracé : cadre, en-tête et légende espacés de 10 px (maquette). */
.fiche-macro .fiche-trace{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);padding:14px;background:#FFF;width:100%;max-width:560px;margin:0 0 0 auto}
.fiche-macro .fiche-trace header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0;font-size:11px;color:var(--muted)}
.fiche-macro .fiche-trace header b{font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-dark)}
.fiche-macro .fiche-trace figcaption{display:flex;justify-content:space-between;gap:8px;margin:0;font-size:11px;color:var(--muted)}
/* Noms sur le Tracé, en unités de la carte (675 de large). La carte mesure de 250 à 560 px selon l’écran : les tailles
   suivent sa largeur (requêtes de conteneur), pour rester entre 11 et 15 px environ à l’écran, comme les libellés de
   la maquette (10 px au plus petit, sur un écran de 320 px). Chevauchements contrôlés de 320 à 1440 px. */
.fiche-macro .fiche-trace{container-type:inline-size}
.fiche-macro .fiche-trace text{font-size:15px}
.fiche-macro .fiche-trace text.is-context{font-size:14px}
.fiche-macro .fiche-trace text.is-region{font:italic 700 18px Cormorant,'Cormorant Garamond',Georgia,serif;fill:var(--deep);text-anchor:middle}
.fiche-macro .fiche-trace text.is-region.is-end{text-anchor:end}
@container (max-width:500px){
  .fiche-macro .fiche-trace text{font-size:19px}
  .fiche-macro .fiche-trace text.is-context{font-size:18px}
  .fiche-macro .fiche-trace text.is-region{font-size:21px}
}
@container (max-width:400px){
  .fiche-macro .fiche-trace text{font-size:25px}
  .fiche-macro .fiche-trace text.is-context{font-size:23px}
  .fiche-macro .fiche-trace text.is-region{font-size:24px}
}
@container (max-width:300px){
  .fiche-macro .fiche-trace text{font-size:29px}
  .fiche-macro .fiche-trace text.is-context,.fiche-macro .fiche-trace text.is-region{font-size:27px}
}

/* ---------------------------------------------------------------- vu dans la série (seulement si l’épisode est documenté) */
.fiche-macro #serie{padding:0 var(--gut) clamp(56px,7cqi,104px)}
.macro-serie{display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:760px;border:1px solid var(--line);padding:clamp(24px,3.4cqi,48px)}
.fiche-macro .macro-serie .fiche-h2{font-size:clamp(30px,3cqi,44px);line-height:1;text-wrap:balance}
.fiche-macro .macro-sequences{display:grid;width:100%;border-top:1px solid var(--line)}
.fiche-macro .macro-sequences>div{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.fiche-macro .macro-sequences dt{font-weight:600}
.fiche-macro .macro-sequences dd{margin:0;color:var(--text3)}

/* ---------------------------------------------------------------- voyages */
.fiche-macro #voyages{padding:clamp(56px,7cqi,104px) var(--gut)}
/* Maquette : « Vu dans la série » et « Voyages » n’ont pas de marge haute, la section précédente l’a déjà en bas. */
.fiche-macro #yaller+#serie,.fiche-macro #yaller+#voyages,.fiche-macro #serie+#voyages{padding-top:0}
.macro-trips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(16px,2cqi,24px)}
.macro-trip{display:flex;flex-direction:column;background:#FFF;border:1px solid var(--line);min-width:0}
.macro-trip-figure{position:relative;aspect-ratio:4/3;overflow:hidden;background:#1d2a31}
.macro-trip-figure>a{position:absolute;inset:0;display:block}
.macro-trip-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.macro-trip-figure:hover img{transform:scale(1.03)}
.fiche-macro .macro-trip-figure .fiche-badge{position:absolute;left:16px;top:16px;z-index:1;padding:6px 11px;background:var(--saffron);color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap}
.macro-trip-copy{padding:clamp(20px,2.6cqi,32px);display:flex;flex-direction:column;gap:12px;flex:1}
.fiche-macro .macro-trip-k{font:600 11px/1.4 Poppins,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-dark)}
.fiche-macro .macro-trip-copy h3{font:700 clamp(32px,3cqi,44px)/.96 var(--serif);letter-spacing:-.03em;text-wrap:wrap}
.fiche-macro .macro-trip-copy h3 span{font:600 14px/1 Poppins,system-ui,sans-serif;letter-spacing:0;color:var(--saffron-dark)}
.fiche-macro .macro-trip-copy>p:not(.macro-trip-k){font-size:14px;line-height:1.75;color:var(--text3)}
.macro-trip-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.macro-trip-foot small{font-size:12.5px;color:var(--muted)}
.macro-trip-foot>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.macro-trip-foot strong{font-size:14px;font-weight:600}
.fiche-macro .macro-trip-foot .fiche-button{flex:none;white-space:nowrap}

/* ---------------------------------------------------------------- mobile (bascule de la maquette : 720 px) */
@media (max-width:720px){
  /* Repères empilés, sans filet ; ils gardent leur marge droite de 20 px (maquette). */
  .fiche-macro .fiche-facts>div:not(.fiche-facts-add){padding-right:20px}
  .fiche-macro .fiche-geo.is-big{min-height:360px}
  .fiche-macro #dans .fiche-row>*{flex-basis:280px}
  .fiche-macro #savoir .fiche-row>*{flex-basis:300px}
  .fiche-macro .fiche-recit-figure{position:static}
  .fiche-macro .fiche-trace{margin:0}
  .fiche-macro .macro-sequences>div{grid-template-columns:minmax(0,1fr)}
}
