/* MANARA — feuille de style unique.
   Direction : la côte atlantique marocaine sous lumière d'hiver — pétrole profond,
   os blanchi, ambre de phare. Volontairement pas la palette sable/terracotta attendue. */

:root {
  /* Palette */
  --petrole:      #0D3B3D;
  --petrole-fonce:#082526;
  --petrole-clair:#175A5C;
  --os:           #EBEAE4;
  --os-clair:     #F5F4F0;
  --os-fonce:     #DAD8CE;
  --ambre:        #C8781F;
  --ambre-clair:  #E8A24A;
  --ocean:        #3A7CA5;
  --encre:        #121817;
  --encre-douce:  #47534F;
  --encre-pale:   #6E7B77;
  --ligne:        #C9C7BC;
  --ligne-fine:   #DEDCD3;

  --fond:         var(--os);
  --surface:      var(--os-clair);
  --surface-alt:  var(--os-fonce);
  --texte:        var(--encre);
  --texte-doux:   var(--encre-douce);
  --texte-pale:   var(--encre-pale);
  --accent:       var(--petrole);
  --signal:       var(--ambre);

  /* Typographie */
  --f-titre: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --f-texte: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-data:  ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Échelle */
  --t-mega:  clamp(3rem, 9vw, 7rem);
  --t-h1:    clamp(2.2rem, 5.5vw, 4rem);
  --t-h2:    clamp(1.7rem, 3.6vw, 2.6rem);
  --t-h3:    clamp(1.15rem, 2vw, 1.35rem);
  --t-corps: clamp(1rem, 1.4vw, 1.09rem);

  --gouttiere: clamp(1.1rem, 4vw, 3.5rem);
  --large: 1240px;
  --colonne: 66ch;

  --duree: 420ms;
  --courbe: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:        #08181A;
    --surface:     #0E2426;
    --surface-alt: #143032;
    --ligne:       #24413F;
    --ligne-fine:  #17302F;
    --texte:       #E6EAE7;
    --texte-doux:  #A6B5B0;
    --texte-pale:  #7A8B86;
    --accent:      #6FBFB0;
    --signal:      #E8A24A;
    --petrole:     #6FBFB0;
    --ocean:       #74AFD1;
  }
}

:root[data-theme="dark"] {
  --fond:        #08181A;
  --surface:     #0E2426;
  --surface-alt: #143032;
  --ligne:       #24413F;
  --ligne-fine:  #17302F;
  --texte:       #E6EAE7;
  --texte-doux:  #A6B5B0;
  --texte-pale:  #7A8B86;
  --accent:      #6FBFB0;
  --signal:      #E8A24A;
  --petrole:     #6FBFB0;
  --ocean:       #74AFD1;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Direction droite-à-gauche (arabe).
   L'écriture arabe est cursive : un letter-spacing positif BRISE la liaison des lettres
   et rend le texte fautif. On le neutralise partout où il est posé pour le latin.
   De même, la fonte à chasse fixe ne dessine pas correctement l'arabe : on repasse
   sur la fonte de texte pour les libellés de données. */
[dir="rtl"] body { font-family: "Segoe UI", "Noto Naskh Arabic", "Traditional Arabic", Tahoma, sans-serif; }
[dir="rtl"] .surtitre,
[dir="rtl"] .marque,
[dir="rtl"] .etape__rang,
[dir="rtl"] .etape__km,
[dir="rtl"] .formule__eti,
[dir="rtl"] .formule__prix,
[dir="rtl"] .service__phase,
[dir="rtl"] .rail__aide,
[dir="rtl"] .avis,
[dir="rtl"] .langues a,
[dir="rtl"] .pied h3 { letter-spacing: 0; }
[dir="rtl"] .surtitre,
[dir="rtl"] .etape__km,
[dir="rtl"] .rail__aide,
[dir="rtl"] .avis,
[dir="rtl"] .formule__prix,
[dir="rtl"] .pied h3 { font-family: inherit; }
[dir="rtl"] .surtitre, [dir="rtl"] .pied h3, [dir="rtl"] .service__phase { text-transform: none; }
[dir="rtl"] .etape__km::before { content: "←"; }
/* La marque et les codes de langue restent en latin : on leur rend leur traitement. */
[dir="rtl"] .marque { font-family: var(--f-titre); letter-spacing: .16em; direction: ltr; }
[dir="rtl"] .langues a { font-family: var(--f-data); letter-spacing: .08em; }

.contenu { max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere); }
.colonne { max-width: var(--colonne); }

h1, h2, h3 {
  font-family: var(--f-titre); font-weight: 400; letter-spacing: -.018em;
  text-wrap: balance; margin: 0;
  /* L'allemand produit des mots très longs (« Wohnmobilreisenden ») : sans césure,
     ils débordent de la fenêtre sur mobile. La césure suit l'attribut lang de la page. */
  hyphens: auto; overflow-wrap: break-word;
}
h1 { font-size: var(--t-h1); line-height: 1.05; }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 { font-size: var(--t-h3); line-height: 1.25; font-family: var(--f-texte); font-weight: 650; letter-spacing: -.005em; }
p { margin: 0 0 1.05em; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px;
}
img { max-width: 100%; height: auto; display: block; }

.surtitre {
  font-family: var(--f-data); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texte-pale); margin: 0 0 1rem;
}

/* ---------- Barre de navigation ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ligne-fine);
}
.nav__inner {
  max-width: var(--large); margin-inline: auto; padding: .85rem var(--gouttiere);
  display: flex; align-items: center; gap: 1.5rem; justify-content: space-between;
}
.marque {
  font-family: var(--f-titre); font-size: 1.35rem; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; color: var(--texte); white-space: nowrap;
}
.marque span { color: var(--signal); }
.nav__liens { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav__liens a {
  color: var(--texte-doux); text-decoration: none; font-size: .92rem;
  padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.nav__liens a:hover { color: var(--texte); border-bottom-color: var(--signal); }
@media (max-width: 900px) { .nav__liens { display: none; } .nav__inner nav { display: none; } }
/* Sous 480 px, la marque à chasse espacée plus les cinq codes de langue dépassent
   la largeur de fenêtre et provoquent un défilement horizontal de toute la page.
   On resserre les deux plutôt que de masquer le débordement. */
@media (max-width: 480px) {
  .nav__inner { gap: .6rem; padding-inline: var(--gouttiere); }
  .marque { font-size: 1.05rem; letter-spacing: .1em; }
  .langues { gap: 0; }
  .langues a { padding: .3rem .28rem; font-size: .68rem; letter-spacing: .04em; }
}

.langues { display: flex; gap: .1rem; align-items: center; }
.langues a {
  font-family: var(--f-data); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-pale); text-decoration: none; padding: .3rem .45rem; border-radius: 3px;
  transition: color var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.langues a:hover { color: var(--texte); background: var(--surface-alt); }
.langues a[aria-current="true"] { color: var(--fond); background: var(--accent); }

/* ---------- Ouverture ---------- */

.hero { padding: clamp(3.5rem, 11vw, 8rem) 0 clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; }
.hero__grille { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: end; }
@media (min-width: 900px) { .hero__grille { grid-template-columns: 1.35fr .9fr; } }

.hero h1 { font-size: var(--t-mega); line-height: .96; margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; color: var(--signal); }
.hero__chapeau { font-size: clamp(1.08rem, 1.9vw, 1.28rem); color: var(--texte-doux); max-width: 46ch; line-height: 1.55; }

.hero__chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); }
.chiffre { background: var(--surface); padding: 1.1rem 1.2rem; }
.chiffre b {
  display: block; font-family: var(--f-titre); font-size: 2rem; line-height: 1;
  color: var(--accent); margin-bottom: .3rem; font-variant-numeric: tabular-nums;
}
.chiffre span { font-size: .82rem; color: var(--texte-pale); line-height: 1.4; display: block; }

/* Phare décoratif — trait de lumière balayant, très discret */
.balise { position: absolute; inset-inline-end: -14vw; top: -6vw; width: 46vw; height: 46vw; pointer-events: none; opacity: .13; }
.balise__faisceau {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--signal) 0deg, transparent 26deg, transparent 360deg);
  animation: tourne 14s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .balise__faisceau { animation: none; } }

/* ---------- Sections ---------- */

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--ligne-fine); }
.section--sombre { background: var(--petrole-fonce); color: var(--os); border-top: none; }
.section--sombre h2, .section--sombre h3 { color: var(--os); }
.section--sombre p { color: color-mix(in srgb, var(--os) 78%, transparent); }
.section--sombre .surtitre { color: var(--ambre-clair); }

.section__tete { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 58ch; }
.section__tete p { color: var(--texte-doux); font-size: 1.06rem; margin-bottom: 0; }
.section--sombre .section__tete p { color: color-mix(in srgb, var(--os) 76%, transparent); }

/* ---------- Le rail d'itinéraire ---------- */

.rail { position: relative; margin-top: 2.5rem; }
.rail__piste {
  overflow-x: auto; overflow-y: hidden; display: flex; gap: 1px;
  background: var(--ligne); border: 1px solid var(--ligne);
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.etape {
  background: var(--surface); min-width: 260px; flex: 1 0 260px;
  padding: 1.4rem 1.35rem 1.6rem; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .55rem;
  transition: background var(--duree) var(--courbe);
}
.etape:hover { background: var(--surface-alt); }
.etape__rang {
  font-family: var(--f-data); font-size: .72rem; letter-spacing: .12em;
  color: var(--signal); font-weight: 700;
}
.etape__nom { font-family: var(--f-titre); font-size: 1.4rem; line-height: 1.1; margin: 0; }
.etape__km {
  font-family: var(--f-data); font-size: .76rem; color: var(--texte-pale);
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
}
.etape__km::before { content: "→"; margin-inline-end: .4em; color: var(--accent); }
.etape__texte { font-size: .93rem; color: var(--texte-doux); line-height: 1.55; margin: 0; }
.etape__voir { margin: .3rem 0 0; padding: 0; list-style: none; font-size: .87rem; }
.etape__voir li { padding-inline-start: .95rem; position: relative; margin-bottom: .3rem; color: var(--texte-doux); }
.etape__voir li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 5px; height: 5px; background: var(--signal); border-radius: 50%;
}
.rail__aide { font-size: .82rem; color: var(--texte-pale); margin-top: .8rem; font-family: var(--f-data); }

/* ---------- Grille de services ---------- */

.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); }
.section--sombre .services { background: var(--petrole-clair); border-color: var(--petrole-clair); }
.service { background: var(--surface); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.section--sombre .service { background: var(--petrole); }
.service__glyphe { width: 30px; height: 30px; color: var(--signal); margin-bottom: .3rem; }
.service h3 { margin: 0; }
.service p { font-size: .93rem; margin: 0; color: var(--texte-doux); }
.section--sombre .service p { color: color-mix(in srgb, var(--os) 74%, transparent); }
.service__phase {
  font-family: var(--f-data); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal); margin-top: auto; padding-top: .6rem;
}

/* ---------- Les deux formules ---------- */

.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.formule {
  border: 1px solid var(--ligne); background: var(--surface);
  padding: 1.8rem 1.7rem 2rem; display: flex; flex-direction: column; gap: .8rem;
}
.formule--mise { border-color: var(--accent); border-width: 2px; }
.formule__eti {
  font-family: var(--f-data); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-pale);
}
.formule--mise .formule__eti { color: var(--signal); }
.formule h3 { font-family: var(--f-titre); font-weight: 400; font-size: 1.65rem; }
.formule__prix { font-family: var(--f-data); font-size: 1.05rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.formule__prix small { color: var(--texte-pale); font-size: .8rem; }
.formule ul { margin: 0; padding-inline-start: 1.1rem; font-size: .93rem; color: var(--texte-doux); }
.formule li { margin-bottom: .4rem; }

/* ---------- Guide de route ---------- */

.route { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); margin-top: 2rem; }
.route__carte { background: var(--surface); padding: 1.5rem 1.45rem; }
.route__carte h3 { margin-bottom: .5rem; }
.route__carte p { font-size: .93rem; color: var(--texte-doux); margin-bottom: 0; }
.route__note {
  margin-top: 1.5rem; padding: 1.2rem 1.4rem;
  border-inline-start: 3px solid var(--signal); background: var(--surface);
  font-size: .93rem; color: var(--texte-doux);
}
.route__note strong { color: var(--texte); }

/* ---------- Appel à l'action ---------- */

.cta { text-align: center; padding: clamp(3.5rem, 8vw, 6rem) 0; }
.cta h2 { margin-bottom: 1rem; }
.cta p { color: var(--texte-doux); max-width: 48ch; margin-inline: auto; }
.bouton {
  display: inline-block; margin-top: 1.5rem; padding: .85rem 2rem;
  background: var(--accent); color: var(--fond); text-decoration: none;
  font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  border: 1px solid var(--accent);
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.bouton:hover { background: transparent; color: var(--accent); }
.bouton--fantome { background: transparent; color: var(--accent); }
.bouton--fantome:hover { background: var(--accent); color: var(--fond); }

.avis {
  margin-top: 1.6rem; font-family: var(--f-data); font-size: .78rem;
  color: var(--texte-pale); letter-spacing: .04em;
}

/* ---------- Pied ---------- */

.pied { background: var(--petrole-fonce); color: color-mix(in srgb, var(--os) 74%, transparent); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; }
.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2.5rem; }
.pied h3 { color: var(--os); font-size: .82rem; font-family: var(--f-data); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .8rem; font-weight: 600; }
.pied ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.pied li { margin-bottom: .45rem; }
.pied a { color: color-mix(in srgb, var(--os) 80%, transparent); text-decoration: none; }
.pied a:hover { color: var(--ambre-clair); }
.pied__bas { border-top: 1px solid var(--petrole-clair); padding-top: 1.5rem; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.pied__bas .marque { color: var(--os); font-size: 1.1rem; }

/* ---------- Apparition au défilement ---------- */

/* AMÉLIORATION PROGRESSIVE — règle de sûreté.
   Le contenu est VISIBLE par défaut. L'état masqué n'est appliqué que sous .js-anim,
   classe posée par un script en tête de page. Si le JavaScript échoue, est bloqué
   ou n'est pas exécuté, le site reste intégralement lisible. */
.js-anim .monte { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--courbe), transform 700ms var(--courbe); }
.js-anim .monte.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-anim .monte { opacity: 1; transform: none; } }

/* Ajouts déplacés depuis des attributs style= en ligne, pour permettre une CSP stricte. */
.pied__statut { max-width: 62ch; font-size: .86rem; }
.marque--pied span { color: var(--ambre-clair); }

/* ---------- Carte de l'itinéraire ---------- */

.carte { margin: 0 0 2.5rem; }
.carte svg {
  display: block; width: 100%; height: auto;
  max-height: min(78vh, 760px);
  border: 1px solid var(--ligne);
  /* Le viewBox ne remplit pas toujours le cadre : on peint le fond sur le SVG lui-même
     pour éviter deux bandes claires de part et d'autre. */
  background: var(--surface);
}
.carte__fond  { fill: var(--surface); }
.carte__terre { fill: var(--surface-alt); stroke: none; }
.carte__cote  { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.carte__retour {
  fill: none; stroke: var(--texte-pale); stroke-width: 1.6;
  stroke-dasharray: 7 7; stroke-linecap: round; opacity: .75;
}
.carte__ocean {
  fill: var(--texte-pale); font-family: var(--f-titre); font-size: 21px;
  font-style: italic; letter-spacing: .06em; opacity: .65;
}

.halte__halo  { fill: var(--signal); opacity: .14; }
.halte__point { fill: var(--signal); }
.halte__rang  { fill: var(--fond); font-family: var(--f-data); font-size: 9px; font-weight: 700; letter-spacing: -.02em; }
.halte__nom   { fill: var(--texte); font-family: var(--f-texte); font-size: 15px; font-weight: 600; }

.depart__fanion { stroke: var(--accent); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.depart__point  { fill: var(--accent); }
.depart__nom    { fill: var(--accent); font-family: var(--f-texte); font-size: 14px; font-weight: 650; }

/* Le halo des haltes respire doucement, comme un feu de phare. */
@media (prefers-reduced-motion: no-preference) {
  .halte__halo { animation: respire 3.6s ease-in-out infinite; }
  .halte:nth-of-type(2n) .halte__halo { animation-delay: .5s; }
  .halte:nth-of-type(3n) .halte__halo { animation-delay: 1.1s; }
}
@keyframes respire {
  0%, 100% { r: 17; opacity: .12; }
  50%      { r: 24; opacity: .26; }
}

.carte__legende {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: .9rem;
  font-size: .84rem; color: var(--texte-doux);
}
.legende__item { display: inline-flex; align-items: center; gap: .55rem; }
.legende__item::before { content: ""; width: 26px; height: 0; border-top-width: 2.4px; border-top-style: solid; }
.legende__item--cote::before   { border-color: var(--accent); }
.legende__item--retour::before { border-color: var(--texte-pale); border-top-style: dashed; border-top-width: 1.8px; }

@media (max-width: 620px) {
  .carte__ocean { font-size: 26px; }
  .halte__nom   { font-size: 19px; }
  .depart__nom  { font-size: 18px; }
  .halte__rang  { font-size: 9px; }
}

/* ---------- Pictogrammes de service ---------- */
.service__glyphe { width: 30px; height: 30px; color: var(--signal); margin-bottom: .35rem; flex: none; }