/* ==========================================================================
   Site du 503e Régiment du Train — feuille commune des pages publiques :
   accueil, Escadrons, Histoire, Traditions, Nous rejoindre, Extranet (lot 1.1028.03).
   Aucune ressource externe : polices système, Georgia pour les titres (comme ceux de
   la Bible du Soldat), Arial pour le texte. Pas de script.
   Les applications (Planning, Tableau de Service, Bible) gardent leurs propres feuilles
   et leur bandeau commun ; l'entête ci-dessous en reprend le dégradé et le filet vert.
   Auteur : Web Factory — Exocet Consulting
   ========================================================================== */

:root {
  /* « only » : le mode sombre automatique de certains navigateurs ne repeint pas l'insigne */
  color-scheme: only light;
  --navy: #1F3864;          /* bleu foncé du Train : le dolman du tringlot */
  --navy-fonce: #16294a;
  --band: #2F5496;
  --vert: #1F5C3A;          /* roue dentée de l'insigne ; 7,6:1 sur le papier */
  --sable: #B49B6C;         /* filets ornementaux seulement : 2,68:1 sur blanc, 4,3:1 sur le marine */
  --sable-clair: #E3D6BC;   /* texte clair sur le marine : 8,1:1 */
  --garance: #A1203A;       /* turban garance du képi : chapeau des bornes ; 7,5:1 sur blanc */
  --focus: #9C7E45;         /* contour de focus sur fond clair : 3,83:1 */
  --focus-fonce: #F2D69B;   /* contour de focus sur le marine : 8,2:1 */
  --papier: #FDFBF6;        /* blanc chaud, le papier des pages de la Bible */
  --sable-pale: #F5F0E4;    /* sections alternées */
  --encre: #1C1C1C;         /* 16:1 sur le papier */
  --gris: #5A5A5A;          /* texte secondaire : 6,6:1 sur le papier */
  --filet: #E2DACA;
  --titre: Georgia, 'Times New Roman', Times, serif;
  --texte: Arial, Helvetica, sans-serif;
  --large: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 17px/1.6 var(--texte);
}
img { max-width: 100%; height: auto; }
sup { font-size: .62em; line-height: 0; vertical-align: .62em; }
a { color: var(--band); text-underline-offset: .15em; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: normal; color: var(--navy); margin: 0; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.15; }
h3 { font-size: 1.28rem; line-height: 1.25; }
p { margin: 0 0 1em; }
.cadre { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 24px; }
.lisible { max-width: 68ch; }
.discret { color: var(--gris); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* lien d'évitement : visible au premier Tab */
.evitement { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px;
  background: #fff; color: var(--navy); font-weight: bold; border-radius: 6px; }
.evitement:focus { top: 10px; }

/* ---------- entête : dégradé et filet vert du bandeau des applications ---------- */
.entete {
  background: linear-gradient(180deg, #24427a 0%, var(--navy) 100%);
  border-bottom: 2px solid var(--vert);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  color: #fff;
  position: relative; z-index: 2;
}
.entete-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.marque { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; min-width: 0; }
.marque img { width: 42px; height: 42px; flex: none; }
.marque-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
/* même ligne d'unité que le bandeau des applications : capitales espacées en sable clair, e de 503e en exposant */
.marque-sous { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sable-clair); }
.marque-titre { font-size: 19px; white-space: nowrap; }
.marque-titre sup { text-transform: none; }
.marque:hover .marque-titre { text-decoration: underline; text-underline-offset: .18em; }
.marque:focus-visible, .menu a:focus-visible, .pied a:focus-visible, .hero a:focus-visible,
.tete a:focus-visible, .appel a:focus-visible { outline-color: var(--focus-fonce); }

.menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.menu a {
  color: #fff; text-decoration: none; font-size: 15px;
  padding: 7px 12px; border-radius: 6px; border: 1px solid transparent;
}
.menu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.menu a[aria-current="page"] { background: rgba(255, 255, 255, .14); box-shadow: inset 0 -2px 0 var(--sable-clair); }
.menu .menu-extranet { border-color: rgba(255, 255, 255, .45); margin-left: 6px; }
.menu .menu-extranet svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- boutons ---------- */
.bouton {
  display: inline-block; padding: 12px 20px; border-radius: 6px;
  background: var(--band); color: #fff; text-decoration: none; font-weight: bold; font-size: 16px;
  border: 1px solid rgba(0, 0, 0, .15);
}
.bouton:hover { background: var(--navy); color: #fff; }
.bouton-blanc { background: #fff; color: var(--navy); border-color: #fff; }
.bouton-blanc:hover { background: var(--sable-clair); color: var(--navy); }
.bouton-ligne { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.bouton-ligne:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ---------- héros de l'accueil : la prise d'armes, voile marine à gauche ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(80vh, 760px);
  display: flex; align-items: flex-end;
  background: var(--navy-fonce); color: #fff;
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(22, 41, 74, .95) 0%, rgba(22, 41, 74, .86) 34%, rgba(22, 41, 74, .35) 62%, rgba(22, 41, 74, .05) 100%),
    linear-gradient(0deg, rgba(22, 41, 74, .55) 0%, rgba(22, 41, 74, 0) 40%);
}
.hero-texte { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 64px; }
.hero-insigne { width: 104px; height: 104px; display: block; margin: 0 0 18px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.devise {
  margin: 0 0 10px; color: var(--sable-clair); font-size: 15px; letter-spacing: .12em;
  display: flex; align-items: center; gap: 12px;
}
.devise::before { content: ""; width: 36px; height: 1px; background: var(--sable); flex: none; }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 1.4rem + 4vw, 4rem); line-height: 1.05; letter-spacing: -.01em; max-width: 12ch; }
.hero-accroche { margin: 18px 0 28px; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.5; max-width: 34ch; color: #F1EEE6; }
.hero-credit { position: absolute; z-index: 1; right: 12px; bottom: 8px; margin: 0; font-size: 11px; color: rgba(255, 255, 255, .8); font-style: italic; }

/* ---------- tête des rubriques ---------- */
.tete {
  background: linear-gradient(160deg, #24427a 0%, var(--navy) 55%, var(--navy-fonce) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.tete-in { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 52px; }
.tete h1 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.2rem); line-height: 1.08; margin: 0 0 14px; }
.tete p { max-width: 60ch; margin: 0; font-size: 1.12rem; color: #F1EEE6; }
.tete .devise { margin-bottom: 14px; font-size: 15px; color: var(--sable-clair); }
/* l'insigne en filigrane, côté droit */
.tete::after {
  content: ""; position: absolute; right: -60px; top: 50%; width: 360px; height: 360px; transform: translateY(-50%);
  background: url("insigne-detoure.png") center / contain no-repeat; opacity: .09;
}

/* ---------- sections ---------- */
.bloc { padding: 72px 0; }
.bloc-pale { background: var(--sable-pale); }
.bloc-marine { background: var(--navy); color: #fff; }
.bloc-marine h2, .bloc-marine h3 { color: #fff; }
.bloc-titre { margin-bottom: 28px; }
.bloc-titre h2 + p { margin: 12px 0 0; color: var(--gris); max-width: 62ch; font-size: 1.05rem; }
.bloc-marine .bloc-titre h2 + p { color: var(--sable-clair); }
.bloc-marine p { color: #F1EEE6; }
.bloc-marine a { color: #fff; }
.bloc-marine a:focus-visible { outline-color: var(--focus-fonce); }
.suite { margin: 28px 0 0; font-weight: bold; }
.suite a { text-decoration: none; border-bottom: 2px solid var(--sable); padding-bottom: 2px; }
.suite a:hover { border-color: var(--navy); }
.bloc-marine .suite a:hover { border-color: #fff; }
.deux { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: start; }
.deux h2 { margin-bottom: 14px; }

/* photographies et légendes */
.photo { margin: 0; }
.photo img { display: block; width: 100%; border-radius: 4px; }
.photo figcaption { margin-top: 8px; font-size: 14px; color: var(--gris); }
.photo .credit { display: block; font-style: italic; font-size: 12.5px; }

/* ---------- état signalétique (accueil) ---------- */
.signal { background: #fff; border: 1px solid var(--filet); border-top: 4px solid var(--navy); border-radius: 4px; padding: 22px 24px 10px; }
.signal h3 { font-size: 1.1rem; margin-bottom: 10px; }
.signal dl { margin: 0; }
.signal dl div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 9px 0; border-top: 1px dotted #CFC6B2; }
.signal dt { color: var(--gris); font-size: 15px; }
.signal dd { margin: 0; font-size: 15.5px; }

/* ---------- missions : verbes d'action, sans cartes ---------- */
.missions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; }
.missions li { border-top: 2px solid var(--vert); padding-top: 14px; }
.missions h3 { margin-bottom: 8px; }
.missions p { margin: 0; color: #333; font-size: 16px; }

/* ---------- fanions des escadrons : flamme échancrée, active en marine, réserve en vert ---------- */
.fanions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; }
.fanions a { display: block; text-decoration: none; color: var(--encre); text-align: center; }
.fanion {
  display: flex; align-items: flex-start; justify-content: center;
  height: 112px; padding-top: 26px; margin: 0 auto 12px; max-width: 104px;
  background: var(--navy); color: #fff;
  font-family: var(--titre); font-size: 1.7rem; letter-spacing: .02em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  box-shadow: inset 0 6px 0 var(--sable);
}
.fanion.res { background: var(--vert); }
.fanions .nom { display: block; font-size: 14px; line-height: 1.35; }
.fanions .statut { display: block; margin-top: 4px; font-size: 12.5px; color: var(--gris); }
.fanions a:hover .nom { text-decoration: underline; }
.fanions a:hover .fanion { filter: brightness(1.15); }

/* ---------- la route de l'histoire : bornes à chapeau garance ---------- */
.route { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.route::before {
  content: ""; position: absolute; left: 0; right: 0; top: 70px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--sable) 0 18px, transparent 18px 30px);
}
.etape { position: relative; }
.borne {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: 58px; height: 72px; padding-bottom: 9px; margin-bottom: 14px;
  background: #fff; border: 2px solid #D8D0BF; border-radius: 29px 29px 4px 4px;
  font-weight: bold; font-size: 14px; color: var(--encre);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .06);
}
.borne::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 26px; background: var(--garance); border-radius: 29px 29px 0 0; }
.etape-lieu { display: block; font-family: var(--titre); font-size: 1.12rem; color: var(--navy); line-height: 1.25; }
.etape-txt { display: block; margin-top: 4px; font-size: 15px; color: #333; }

/* histoire : la route verticale, une borne par époque */
.epoques { list-style: none; margin: 0; padding: 0; position: relative; }
.epoques::before {
  content: ""; position: absolute; left: 28px; top: 20px; bottom: 20px; width: 3px;
  background: repeating-linear-gradient(180deg, var(--sable) 0 18px, transparent 18px 30px);
}
.epoque { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 28px; padding-bottom: 48px; }
.epoque:last-child { padding-bottom: 0; }
.epoque .borne { margin: 0; z-index: 1; }
.epoque-dates { display: block; color: var(--garance); font-weight: bold; font-size: 15px; letter-spacing: .02em; margin: 2px 0 4px; }
.epoque h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem); margin-bottom: 14px; }
.epoque p, .epoque ul { max-width: 68ch; }
.epoque ul { padding-left: 1.2em; margin: 0 0 1em; }
.epoque li { margin-bottom: .35em; }
.epoque .photo { max-width: 680px; margin: 22px 0 6px; }

.citation { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--sable); max-width: 60ch; }
.citation p { margin: 0 0 6px; font-family: var(--titre); font-size: 1.35rem; line-height: 1.4; color: var(--navy); font-style: italic; }
.citation footer { font-size: 14px; color: var(--gris); }

/* ---------- étendard : inscriptions brodées sur le marine ---------- */
.etendard {
  background: var(--navy); color: #fff; border-radius: 4px; padding: 30px 32px;
  border: 1px solid #0f1f3a; box-shadow: inset 0 0 0 6px var(--navy), inset 0 0 0 7px rgba(180, 155, 108, .7);
}
.etendard h3 { color: #fff; margin-bottom: 14px; }
.etendard p { color: #F1EEE6; margin: 0 0 14px; }
.inscriptions { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.inscriptions li { font-family: var(--titre); text-transform: uppercase; letter-spacing: .14em; color: #E9CF8E; font-size: 1.05rem; }

/* ---------- escadrons : une fiche par escadron, le fanion en marge ---------- */
.escadron { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 36px; padding: 40px 0; border-top: 1px solid var(--filet); scroll-margin-top: 16px; }
.escadron:first-of-type { border-top: 0; padding-top: 8px; }
.escadron .fanion { margin: 0; max-width: 120px; height: 128px; font-size: 1.9rem; padding-top: 30px; }
.escadron h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem); margin-bottom: 6px; }
.escadron .statut { display: inline-block; margin-bottom: 14px; font-size: 14px; padding: 2px 10px; border-radius: 999px; background: #E8EDF6; color: var(--navy); }
.escadron .statut.res { background: #E3EFE7; color: var(--vert); }
.escadron p { max-width: 68ch; }
.moyens { margin: 6px 0 0; padding: 12px 16px; background: var(--sable-pale); border-left: 3px solid var(--sable); max-width: 68ch; font-size: 15.5px; }
.moyens strong { color: var(--navy); }
.bloc-pale .moyens { background: #fff; }
.reserve-intro { max-width: 68ch; }
.deux + .escadron { margin-top: 48px; border-top: 1px solid var(--filet); padding-top: 40px; }
.aussi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.aussi li { border-top: 2px solid var(--vert); padding-top: 14px; }
.aussi h3 { margin-bottom: 8px; }
.aussi p { margin: 0; font-size: 16px; }

/* ---------- traditions ---------- */
.symbole { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.symbole + .symbole { margin-top: 64px; }
.symbole-visuel { text-align: center; }
.symbole-visuel img.insigne-grand { width: 260px; height: 260px; }
.symbole.inverse > .symbole-visuel { order: -1; }
.symbole h2 { margin-bottom: 14px; }
.photo-petite { max-width: 380px; margin-top: 22px; }
.devise-grande { font-family: var(--titre); font-style: italic; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.1; color: var(--navy); margin: 0 0 14px;
  display: flex; align-items: center; justify-content: center; gap: 18px; }
.devise-grande::before, .devise-grande::after { content: ""; height: 1px; flex: 0 1 48px; min-width: 16px; background: var(--sable); }
.devise-traduction { margin: 0; color: var(--vert); letter-spacing: .06em; }
.dates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.dates li { background: #fff; border: 1px solid var(--filet); border-radius: 4px; padding: 20px 22px; }
.dates .jour { display: block; font-family: var(--titre); font-size: 1.6rem; color: var(--garance); line-height: 1.1; margin-bottom: 8px; }
.dates p { margin: 0; font-size: 16px; }
.arme { width: 100%; border-collapse: collapse; font-size: 16px; background: #fff; }
.dates + .arme { margin-top: 36px; }
.arme th, .arme td { text-align: left; vertical-align: top; padding: 12px 14px; border-top: 1px solid var(--filet); }
.arme th { width: 26%; font-weight: normal; font-family: var(--titre); color: var(--navy); font-size: 1.05rem; }

/* ---------- nous rejoindre ---------- */
.voies { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.voie h2 { margin-bottom: 10px; }
.voie > p { color: #333; }
.etapes { list-style: none; counter-reset: etape; margin: 18px 0 0; padding: 0; }
.etapes li { counter-increment: etape; position: relative; padding: 0 0 18px 50px; }
.etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: bold; font-size: 15px;
}
.voie.res .etapes li::before { background: var(--vert); }
.etapes li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 4px; width: 2px; background: var(--filet); }
.contact { background: #fff; border: 1px solid var(--filet); border-left: 4px solid var(--navy); border-radius: 4px; padding: 20px 24px; }
.contact h3 { margin-bottom: 8px; }
.contact p { margin: 0 0 6px; }
.sous-titre { margin: 26px 0 10px; }
.liens-officiels { margin: 0 0 1em; padding-left: 1.2em; }
.liens-officiels li { margin-bottom: 6px; }

/* ---------- appel (accueil) : texte sur le marine, photo à droite ---------- */
.appel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--navy); color: #fff; }
.appel-texte { padding: 64px 48px 64px max(24px, calc((100vw - var(--large)) / 2 + 24px)); }
.appel h2 { color: #fff; margin-bottom: 14px; }
.appel p { color: #F1EEE6; max-width: 46ch; }
.appel .actions { margin-top: 24px; }
.appel-photo { margin: 0; position: relative; min-height: 320px; }
.appel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.appel-photo figcaption { position: absolute; right: 10px; bottom: 8px; font-size: 11px; font-style: italic; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

/* ---------- extranet : trois applications ---------- */
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.app { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--filet); border-top: 4px solid var(--band); border-radius: 6px; padding: 24px 24px 22px; }
.app.service { border-top-color: var(--vert); }
.app.bible { border-top-color: var(--sable); }
.app-icone { width: 44px; height: 44px; margin-bottom: 14px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app h2 { font-size: 1.5rem; margin-bottom: 4px; }
.app .sous { color: var(--gris); font-size: 15px; margin: 0 0 14px; }
.app p { font-size: 16px; }
.app .acces { margin-top: auto; padding-top: 12px; border-top: 1px dotted #CFC6B2; font-size: 14.5px; color: #333; }
.app .acces strong { color: var(--navy); }
.app .bouton { margin-top: 16px; align-self: flex-start; }
.app-courts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.app-courts a {
  display: inline-block; padding: 10px 16px; border-radius: 6px; text-decoration: none;
  background: #fff; border: 1px solid #C9C0AC; color: var(--navy); font-size: 15.5px; font-weight: bold;
}
.app-courts a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.extranet-titre { display: flex; align-items: center; gap: 12px; }
.extranet-titre svg { width: 26px; height: 26px; fill: none; stroke: var(--navy); stroke-width: 1.8; flex: none; }
.note { margin-top: 28px; max-width: 70ch; color: var(--gris); font-size: 15.5px; }

/* ---------- pied de page ---------- */
.pied { background: var(--navy-fonce); color: #DCE3EF; font-size: 15px; padding: 48px 0 22px; border-top: 3px solid var(--vert); }
.pied a { color: #fff; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); gap: 36px; }
.pied-marque { display: flex; gap: 14px; align-items: flex-start; }
.pied-marque img { width: 56px; height: 56px; flex: none; }
.pied-marque strong { display: block; font-family: var(--titre); font-weight: normal; font-size: 1.2rem; color: #fff; }
.pied-marque .devise { margin: 6px 0 0; font-size: 13px; }
.pied h2 { font-family: var(--texte); font-size: 14px; color: var(--sable-clair); margin: 0 0 10px; font-weight: bold; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 6px; }
.pied-avis { margin: 32px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 13.5px; color: #C9D2E2; max-width: 92ch; }
.pied-version { margin: 10px 0 0; font-size: 12px; color: rgba(255, 255, 255, .85); }
/* cœur de la mention d'auteur : rose à 4,6:1 sur le marine, où le rouge ne tiendrait que 2:1 */
.coeur { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; fill: #FF7A8A; }

/* ---------- écrans moyens ---------- */
@media (max-width: 980px) {
  .fanions { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .route { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .route::before { display: none; }
  .missions, .aussi, .dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apps { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .pied-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .entete-in { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .menu { justify-content: flex-start; margin-left: -8px; }
  .menu a { padding: 6px 9px; font-size: 14.5px; }
  .menu .menu-extranet { margin-left: 2px; }
  .deux, .voies, .symbole { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .appel { grid-template-columns: minmax(0, 1fr); }
  .appel-texte { padding: 48px 24px; }
  .appel-photo { min-height: 240px; }
}

/* ---------- téléphones ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .cadre { padding: 0 16px; }
  .bloc { padding: 52px 0; }
  .hero { min-height: 0; }
  .hero::after { background: linear-gradient(0deg, rgba(22, 41, 74, .97) 0%, rgba(22, 41, 74, .9) 48%, rgba(22, 41, 74, .45) 78%, rgba(22, 41, 74, .2) 100%); }
  .hero-photo { object-position: 70% 30%; }
  .hero-texte { padding-top: 150px; padding-bottom: 44px; }
  .hero-insigne { width: 80px; height: 80px; }
  .tete-in { padding-top: 40px; padding-bottom: 38px; }
  .tete::after { width: 220px; height: 220px; right: -70px; }
  .fanions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .missions, .aussi, .dates { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* la route de l'accueil devient verticale : bornes à gauche, texte à droite */
  .route { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .route::before { display: block; left: 27px; right: auto; top: 18px; bottom: 18px; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--sable) 0 18px, transparent 18px 30px); }
  .etape { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 18px; padding-bottom: 20px; align-items: start; }
  .etape .borne { grid-row: span 2; margin: 0; z-index: 1; }
  .etape-lieu { margin-top: 12px; }
  .epoques::before { left: 21px; }
  .epoque { grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; }
  .epoque .borne { width: 44px; height: 56px; font-size: 12px; border-radius: 22px 22px 4px 4px; padding-bottom: 7px; }
  .epoque .borne::before { height: 20px; border-radius: 22px 22px 0 0; }
  .escadron { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 32px 0; }
  .escadron .fanion { height: 92px; max-width: 84px; padding-top: 20px; font-size: 1.45rem; margin: 0; }
  .signal dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .arme th { width: auto; display: block; border-top: 1px solid var(--filet); padding-bottom: 0; }
  .arme td { display: block; border-top: 0; padding-top: 4px; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .symbole-visuel img.insigne-grand { width: 200px; height: 200px; }
}
@media (max-width: 360px) {
  .marque-titre { font-size: 17px; }
  .menu a { padding: 5px 7px; font-size: 14px; }
  .fanion { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .menu a, .bouton, .app-courts a { transition: background-color .15s ease, color .15s ease; }
}

/* ---------- impression : fonds non rendus, donc textes sombres et voiles retirés ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .entete, .menu, .evitement, .hero-photo, .hero::after, .tete::after, .appel-photo, .actions, .app .bouton { display: none !important; }
  .hero, .tete, .bloc-marine, .appel, .etendard, .pied { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .hero h1, .tete h1, .tete p, .hero-accroche, .appel h2, .appel p, .bloc-marine h2, .etendard h3, .etendard p, .pied, .pied a, .pied-marque strong { color: #000 !important; }
  .devise, .inscriptions li { color: #444 !important; }
  .hero-texte, .tete-in { padding-top: 0; padding-bottom: 12px; }
  .bloc { padding: 18px 0; }
  .fanion, .borne::before, .etapes li::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .coeur { fill: #C8102E; }
  a { color: #000; }
}