/* =========================================================
   REMPART - feuille de style du site public
   =========================================================
   Partagee par la page francaise et la page anglaise : deux copies
   divergeraient au premier correctif, et la divergence ne se verrait que
   sur la langue qu'on ne relit pas.

   Les valeurs viennent de DESIGN.md (monde « Le Havre ») : memes teintes,
   memes rayons, meme echelle d'espacement que l'application. Une page
   d'accueil qui ne ressemble pas a l'application qu'elle annonce fait
   douter de la suite.
   ========================================================= */

/* --- Inter, servie depuis ce serveur ----------------------------------
   Ni Google Fonts ni aucun CDN : une page qui promet la souverainete et
   qui appelle un serveur etranger pour s'afficher se contredit avant
   d'avoir ete lue. Les trois graisses sous-ensemblees pesent 60 Ko.
   `swap` : le texte s'affiche tout de suite dans la police systeme et
   bascule a l'arrivee, plutot que de laisser une page blanche. */
@font-face {
  font-family: 'Inter';
  src: url('polices/inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('polices/inter-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('polices/inter-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Palette heraldique de DESIGN.md. */
  --bleu-blason: #2563EB;
  --bleu-blason-profond: #1D4ED8;
  --marine-de-garde: #1E3048;
  --or-d-ecusson: #C9922B;
  --ardoise-d-ecusson: #2D3E50;

  --fond: #F6F8FB;
  --surface: #FFFFFF;
  --surface-enfoncee: #EDF1F7;
  --contour: #E3E9F0;
  --texte: #0F172A;
  /* « La Regle du Texte Mesure » : on mesure la couleur LA OU elle est posee.
     Le jeton de l'application (#64748B) est mesure sur du blanc, ou il tient
     4,76:1. Sur le fond de page il tombe a 4,47 et sur la surface enfoncee a
     4,20 : sous le seuil, des deux cotes. Meme teinte ardoise, clarte baissee
     de 6 %, et il passe partout (4,80 / 4,51 / 5,11). */
  --texte-secondaire: #606F85;
  --texte-succes: #166534;

  /* Sur la Marine de Garde, qui ne change pas avec le theme. */
  --sur-marine: #E8EDF5;
  --sur-marine-secondaire: #A7B6CA;
  --contour-marine: #33455F;

  --action: var(--bleu-blason);
  --action-forte: var(--bleu-blason-profond);

  /* « La Regle du Pose » : deux couches, un decalage vers le bas, un flou
     large. Une ombre seche fait autocollant. */
  --ombre-douce: 0 8px 24px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .042);
  --ombre-legere: 0 3px 10px rgba(15, 23, 42, .04);

  /* Echelle de 4, 8, 12, 16, 24. */
  --e-xs: 4px; --e-s: 8px; --e-m: 12px; --e-l: 16px; --e-xl: 24px;

  --r-champ: 14px; --r-carte: 18px; --r-feuille: 28px; --r-pilule: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0B1220;
    --surface: #141D2E;
    --surface-enfoncee: #1D2839;
    --contour: #253046;
    --texte: #E8EDF5;
    --texte-secondaire: #94A3B8;
    --texte-succes: #4ADE80;
    --ardoise-d-ecusson: #E8EDF5;
    --action: #60A5FA;
    --action-forte: #93C5FD;
    /* En sombre, c'est la lumiere autant que l'ombre qui separe les plans. */
    --ombre-douce: 0 8px 24px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .315);
    --ombre-legere: 0 3px 10px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 17px/1.6 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
}

/* --- Surfaces que le navigateur dessine a notre place -------------------
   Selection, curseur, anneau de focus, barre de defilement : livres avec
   des defauts qui n'appartiennent a aucune charte. Les habiller coute
   trois regles et se remarque partout. */
::selection { background: color-mix(in srgb, var(--action) 26%, transparent); color: var(--texte); }
:root { accent-color: var(--action); caret-color: var(--action); }
:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: var(--e-s);
}
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--contour) transparent; scrollbar-width: thin; }
}

a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--action-forte); }

/* 16 points de gouttiere au telephone : en dessous, une ligne touche le
   bord de l'ecran. */
.bande { width: 100%; max-width: 1020px; margin: 0 auto; padding-inline: var(--e-l); }
.etroit { max-width: 720px; }

/* =========================================================
   En-tete
   ========================================================= */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--contour);
}
.entete .bande { display: flex; align-items: center; gap: var(--e-l); height: 76px; }
/* La marque de la barre du haut, reprise de `LogoRempart._marque` : l'écusson
   EST le R du mot, et « empart » le prolonge. Deux calages y sont
   indispensables, et sans eux le mot flotte :

   - la LIGNE DE PIED. Un SVG en ligne pose sa baseline sur son bord inférieur,
     alors que celle du R est à y=367 sur 512, soit 71,7 % de la hauteur. La
     marge basse négative de 28,3 % remonte ce bord jusqu'à la vraie ligne de
     pied de la lettre. Un centrage vertical ferait flotter le mot.
   - la CHASSE. L'écusson porte sa propre marge intérieure, qui creuse un
     blanc devant le « e ». Le décalage négatif la rattrape pour que l'oeil
     lise un seul mot. */
.marque {
  --taille-marque: 40px;
  display: inline-block; color: inherit; text-decoration: none;
  font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1; white-space: nowrap;
  /* Remontee de 10,6 % de la taille de l'ecusson, MESUREE et non estimee.
     La marge basse negative qui aligne les lignes de pied raccourcit aussi la
     boite : l'encre deborde donc SOUS elle, et `align-items: center` centre la
     boite, pas ce qu'on voit. Releve a l'echelle 2 : 51 pixels au-dessus,
     34 en dessous, soit 8,5 points de trop bas. Ce decalage ne touche pas la
     mise en page, il ne corrige que le rendu. */
  position: relative;
  top: calc(var(--taille-marque) * -.106);
}
.marque svg {
  width: var(--taille-marque); height: var(--taille-marque);
  vertical-align: baseline;
  margin-bottom: calc(var(--taille-marque) * -.283);
  margin-right: calc(var(--taille-marque) * -.09);
}
.entete nav { margin-left: auto; display: flex; align-items: center; gap: var(--e-xl); font-size: .95rem; }
.entete nav a { color: var(--texte-secondaire); text-decoration: none; }
.entete nav a:hover { color: var(--texte); }
@media (max-width: 700px) { .entete .lien-secondaire { display: none; } }

/* =========================================================
   Heros : la Marine de Garde, dans les deux themes
   =========================================================
   « La Regle de l'Enveloppe » : tout ce qui precede l'application est en
   Marine de Garde. Cette page en fait partie, elle en est meme le seuil.
   Le motif hexagonal repete est le blason agrandi, pas un decor.

   L'opacite du trait vaut 0,11. A 0,05 le motif ne se voyait pas, il ne
   restait qu'un bruit que l'oeil prenait pour une compression d'image. Au-dela
   de 0,14 il commence a concurrencer le paragraphe pose dessus : une texture
   doit se remarquer sans se lire. */
.heros {
  position: relative; overflow: hidden;
  background: var(--marine-de-garde);
  color: var(--sur-marine);
  padding-block: clamp(56px, 11vw, 104px);
}
.heros::before {
  content: ''; position: absolute; inset: -10% -10% auto -10%; height: 130%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M30 2 L60 19 L60 53 L30 70 L0 53 L0 19 Z M90 2 L120 19 L120 53 L90 70 L60 53 L60 19 Z M60 53 L90 70 L90 104 M60 53 L30 70 L30 104' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-opacity='.11'/%3E%3C/svg%3E");
  pointer-events: none;
}
.heros > .bande { position: relative; }

/* Le bloc marque : logo, nom, signature. Il monte une fois au chargement,
   et c'est le seul mouvement de la page. */
.blason { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); margin-bottom: clamp(24px, 4vw, 36px); }
.blason svg { width: clamp(72px, 13vw, 116px); height: auto; display: block; flex: none; }
.blason h1 {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.035em;
  font-weight: 700;
}
.signature {
  margin: .35em 0 0;
  font-size: clamp(.95rem, 2.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sur-marine-secondaire);
}

.promesse {
  margin: 0 0 clamp(28px, 4vw, 36px);
  text-wrap: balance;
  max-width: 34ch;
  font-size: clamp(1.1rem, 2.9vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -.01em;
}
.promesse strong { font-weight: 600; color: #fff; }

.actions { display: flex; flex-wrap: wrap; gap: var(--e-m); }
/* Sous 460 points, deux boutons de largeurs differentes empiles donnent un
   escalier. Pleine largeur, ils redeviennent une pile franche et la cible
   s'agrandit la ou le doigt est le moins precis. */
@media (max-width: 459px) { .actions { display: grid; } .bouton { width: 100%; } }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-s);
  min-height: 52px; padding-inline: var(--e-xl);
  border: 1px solid transparent; border-radius: var(--r-champ);
  font: 600 1rem/1 Inter, system-ui, sans-serif;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s cubic-bezier(.2, .8, .2, 1), transform .16s cubic-bezier(.2, .8, .2, 1), border-color .16s;
}
.bouton:active { transform: translateY(1px); }
.bouton.plein { background: var(--bleu-blason); color: #fff; }
.bouton.plein:hover { background: #3B7AF7; color: #fff; }
.bouton.fantome { background: transparent; border-color: var(--contour-marine); color: var(--sur-marine); }
.bouton.fantome:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.mention { margin: var(--e-l) 0 0; font-size: .9rem; color: var(--sur-marine-secondaire); }

/* =========================================================
   Sections
   ========================================================= */
section { padding-block: clamp(56px, 9vw, 88px); }
section + section { border-top: 1px solid var(--contour); }
h2 {
  margin: 0 0 var(--e-m);
  font-size: clamp(1.6rem, 4.4vw, 2.2rem);
  line-height: 1.15; letter-spacing: -.025em; font-weight: 700;
  text-wrap: balance;
}
.chapeau { margin: 0 0 clamp(32px, 5vw, 44px); max-width: 62ch; color: var(--texte-secondaire); font-size: 1.05rem; text-wrap: pretty; }

/* --- Ce que le serveur voit --------------------------------------------
   Selecteur en enfant DIRECT : `.registre div` attrapait aussi le bloc
   interieur, qui heritait alors de la grille du parent. Le titre partait
   dans la colonne de 28 points et se brisait mot par mot pendant que le
   texte lui passait dessus. Un enfant direct, et le bug ne peut pas
   revenir. */
.registre { border: 1px solid var(--contour); border-radius: var(--r-carte); background: var(--surface); overflow: hidden; }
.registre > li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--e-l); align-items: start;
  padding: var(--e-xl);
}
.registre > li + li { border-top: 1px solid var(--contour); }
.registre { list-style: none; margin: 0; padding: 0; }
.registre svg { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.registre .aveugle svg { color: var(--texte-succes); }
.registre .voyant svg { color: var(--texte-secondaire); }
.registre h3 { margin: 0 0 var(--e-xs); font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.registre p { margin: 0; color: var(--texte-secondaire); font-size: .96rem; text-wrap: pretty; }

/* --- Les fondations : une liste editoriale, pas des cartes ------------- */
.fondations { list-style: none; margin: 0; padding: 0; }
.fondations li { padding-block: var(--e-xl); }
.fondations li + li { border-top: 1px solid var(--contour); }
@media (min-width: 760px) {
  .fondations li { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); align-items: baseline; }
}
.fondations h3 { margin: 0 0 var(--e-s); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
@media (min-width: 760px) { .fondations h3 { margin-bottom: 0; } }
.fondations p { margin: 0; color: var(--texte-secondaire); max-width: 62ch; text-wrap: pretty; }

/* --- Les agents -------------------------------------------------------- */
.agents { display: grid; gap: var(--e-l); margin: 0; padding: 0; list-style: none; }
/* Deux de front, et deux seulement. A trois colonnes, un quatrieme element se
   retrouve seul sur sa ligne et se lit comme un ajout apres coup ; a quatre,
   la justification tombe a 26 signes, ou une phrase se hache. */
@media (min-width: 620px) { .agents { grid-template-columns: repeat(2, 1fr); } }
.agents li { padding: var(--e-xl); border-radius: var(--r-carte); background: var(--surface-enfoncee); }
.agents h3 { margin: 0 0 var(--e-s); font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.agents p { margin: 0; color: var(--texte-secondaire); font-size: .96rem; }

/* --- Appel final ------------------------------------------------------- */
.final { text-align: center; }
.final .chapeau { margin-inline: auto; }
.final .actions { justify-content: center; }
.final .bouton.fantome { border-color: var(--contour); color: var(--texte); }
.final .bouton.fantome:hover { background: var(--surface-enfoncee); color: var(--texte); }

/* =========================================================
   Pied
   ========================================================= */
footer { border-top: 1px solid var(--contour); padding-block: clamp(36px, 6vw, 56px); color: var(--texte-secondaire); font-size: .94rem; }
footer nav { display: flex; flex-wrap: wrap; gap: var(--e-m) var(--e-xl); margin-bottom: var(--e-xl); }
footer nav a { color: var(--texte-secondaire); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
footer nav a:hover { color: var(--texte); text-decoration: underline; }
footer nav svg { width: 17px; height: 17px; }
footer p { margin: 0 0 var(--e-s); max-width: 70ch; }

/* =========================================================
   Le seul mouvement de la page
   =========================================================
   Une entree, sur le bloc de marque, en sortie exponentielle depuis un
   etat deja visible : si l'animation ne part pas, la page reste lisible.
   Elle disparait quand le systeme demande moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  .blason, .promesse, .heros .actions, .heros .mention { animation: monte .7s cubic-bezier(.16, 1, .3, 1) backwards; }
  .promesse { animation-delay: .06s; }
  .heros .actions { animation-delay: .12s; }
  .heros .mention { animation-delay: .18s; }
}
@keyframes monte {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}