/* ==========================================================================
   Omra Facile — feuille de style unique du site vitrine.

   Contraintes tenues ici, volontairement :
   — aucune dépendance, aucun build, aucune ressource distante. Pas de Google
     Fonts : une police téléchargée depuis un tiers révèle l'adresse IP du
     visiteur, ce qui serait contradictoire avec notre politique de
     confidentialité. On n'utilise donc que des polices déjà installées sur
     l'appareil, et des ornements dessinés en CSS ou en SVG écrit à la main.
   — registre éditorial, sobre et respectueux : le sujet est un pèlerinage.
     Titres en romaine (serif système), filets fins, or utilisé en trait et
     jamais en aplat, aucune ombre spectaculaire, aucun dégradé coloré.
   — rien qui puisse faire penser à une agence de voyages : pas de vignettes
     « destinations », pas de prix barrés, pas de gros bouton « Réserver ».
     C'est une contrainte juridique autant qu'esthétique — l'éditeur n'est pas
     immatriculé comme opérateur de voyages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Réglages : couleurs, typographie, rythme
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Familles. `ui-serif` donne New York sur Apple, Palatino/Georgia ailleurs :
     une romaine de lecture dans les deux cas, jamais du Times par défaut. */
  --serif:
    ui-serif, 'New York', 'Iowan Old Style', Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia,
    'Times New Roman', serif;
  --sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Fonds : sable clair, sable un peu plus dense pour poser les bandes,
     papier pour les surfaces qui doivent se détacher. */
  --sable: #f8f6f1;
  --sable-profond: #f1ede4;
  --papier: #fffefb;

  /* Encres : quatre niveaux seulement, pour une hiérarchie lisible.
     encre = titres et mots forts, texte = corps, douce = secondaire,
     tenue = étiquettes et méta. */
  --encre: #16140f;
  --texte: #302c25;
  --encre-douce: #5a544a;
  --encre-tenue: #7b7466;

  /* Vert : couleur des liens et de l'action. Profond, pas pimpant. */
  --vert: #1b6244;
  --vert-fort: #124631;
  --action: #1b6244;
  --action-fort: #124631;
  --action-texte: #fbfaf7;

  /* Or : réservé aux traits, aux chiffres et à un mot du titre. */
  --or: #96742f;
  --trace: rgba(150, 116, 47, 0.13);

  /* Les trois faces de la Kaʿba de la marque, du dessus éclairé à l'ombre.
     En variables et non en dur dans le SVG : sur fond sombre, un cube noir se
     confond avec le fond et il ne reste qu'un arc doré autour d'un trou. */
  --marque-haut: #2e3138;
  --marque-gauche: #1d2026;
  --marque-ombre: #0b0d10;

  /* Filets. Toute séparation du site est un trait de 1 px de l'une des deux. */
  --filet: #e5dfd3;
  --filet-fort: #d2cab8;

  /* Statuts des rites — teintes sourdes, pas de rouge d'alerte. */
  --rouge: #9d3b28;
  --orange: #a8681c;

  --rayon: 4px;
  --rayon-l: 8px;
  --haut-entete: 3.75rem;
  /* Deux ombres seulement dans tout le site, et volontairement discrètes :
     un contact de 1 px, et une diffusion large très atténuée. */
  --ombre-carte: 0 1px 2px rgba(22, 20, 15, 0.04), 0 14px 30px -22px rgba(22, 20, 15, 0.3);
  --ombre-flottante: 0 1px 2px rgba(22, 20, 15, 0.06), 0 20px 44px -26px rgba(22, 20, 15, 0.38);
}

/* Mode sombre : mêmes rôles, mêmes rapports de contraste, encres inversées.
   Le vert et l'or sont éclaircis, sinon ils disparaissent sur fond foncé. */
@media (prefers-color-scheme: dark) {
  :root {
    --sable: #14120e;
    --sable-profond: #1a1712;
    --papier: #1e1b16;

    --encre: #f4f1e9;
    --texte: #d8d3c7;
    --encre-douce: #aba495;
    --encre-tenue: #8f8878;

    --vert: #7cc79f;
    --vert-fort: #9ad9b7;
    --action: #7cc79f;
    --action-fort: #9ad9b7;
    --action-texte: #10231a;

    --or: #d3ae6a;
    --trace: rgba(211, 174, 106, 0.13);

    --marque-haut: #797d85;
    --marque-gauche: #5b5f67;
    --marque-ombre: #3d4148;

    --filet: #302b23;
    --filet-fort: #453e33;

    --rouge: #e0917d;
    --orange: #d6a557;

    --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 30px -20px rgba(0, 0, 0, 0.6);
    --ombre-flottante: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 44px -22px rgba(0, 0, 0, 0.7);
  }
}

/* --------------------------------------------------------------------------
   2. Réinitialisation minimale
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Les ancres ne doivent pas atterrir sous l'en-tête collant. */
  scroll-padding-top: calc(var(--haut-entete) + 1.5rem);
}

body {
  margin: 0;
  background: var(--sable);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  /* Filet de sécurité : un mot très long (URL, e-mail) ne doit jamais
     provoquer de défilement horizontal de la page. */
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
}

::selection {
  background: rgba(150, 116, 47, 0.22);
}

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--encre);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1.45rem + 2.9vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
}

h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 1.24rem + 0.7vw, 1.8rem);
  line-height: 1.25;
}

h3 {
  margin: 0 0 0.4rem;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

strong {
  color: var(--encre);
  font-weight: 600;
}

a {
  color: var(--vert);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

a:hover {
  color: var(--vert-fort);
}

:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Surtitre : petite étiquette capitale précédée d'un filet d'or. C'est le
   marqueur éditorial du site, réutilisé partout. */
.surtitre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.surtitre::before {
  content: '';
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1px;
  background: var(--or);
}

/* Ornement de fin de page : un filet qui s'éteint aux extrémités, interrompu au
   centre par un petit losange d'or. Le trait reste visible même si le
   pseudo-élément ne s'affiche pas — pas de décor « tout ou rien ». */
.filet-orne {
  position: relative;
  height: 1px;
  margin: clamp(2.5rem, 6vw, 4rem) auto;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--filet-fort) 22%,
    var(--filet-fort) 78%,
    transparent
  );
}

/* ::before ouvre le filet, ::after y pose le losange. */
.filet-orne::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5rem;
  height: 0.7rem;
  transform: translate(-50%, -50%);
  background: var(--sable);
}

.filet-orne::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--or);
}

/* --------------------------------------------------------------------------
   4. Mise en page
   -------------------------------------------------------------------------- */

.enveloppe {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

/* Largeur de lecture confortable : environ 68 caractères. */
.mesure {
  max-width: 40rem;
}

/* Piège de grille, vérifié au navigateur : un enfant de grille a par défaut
   `min-width: auto`, donc il ne peut pas devenir plus étroit que son contenu.
   Le tableau de la politique de confidentialité (min-width: 32rem, prévu pour
   défiler dans son conteneur) élargissait ainsi toute la page en dessous de
   512 px de large — défilement horizontal du body, exactement ce qu'on
   interdit. Remettre min-width à 0 sur les enfants de nos grilles laisse le
   défilement là où il doit être : dans .defilement. */
.ouverture-grille > *,
.chapitre-grille > *,
.page-corps > *,
.pied-grille > * {
  min-width: 0;
}

/* Décor : résille losangée très pâle, dessinée en dégradés répétés — aucune
   image, aucun fichier. Estompée par un masque pour rester un souffle. */
.decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 1.5rem, var(--trace) 1.5rem calc(1.5rem + 1px)),
    repeating-linear-gradient(-45deg, transparent 0 1.5rem, var(--trace) 1.5rem calc(1.5rem + 1px));
  -webkit-mask-image: radial-gradient(115% 95% at 86% 4%, #000 0%, transparent 62%);
  mask-image: radial-gradient(115% 95% at 86% 4%, #000 0%, transparent 62%);
}

/* --------------------------------------------------------------------------
   5. En-tête
   -------------------------------------------------------------------------- */

.lien-evitement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lien-evitement:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 0.7rem 1.1rem;
  background: var(--papier);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-flottante);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
}

.site-entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sable);
  border-bottom: 1px solid var(--filet);
}

.site-entete .enveloppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  min-height: var(--haut-entete);
  flex-wrap: wrap;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--encre);
  text-decoration: none;
}

.marque-texte {
  color: var(--encre);
}

/* Seul « Facile » passe au vert : la marque reste lisible en noir et blanc. */
.marque-texte span {
  color: var(--vert);
}

/* La marque : l'arc, le croissant, la Kaʿba, le chemin. Dessinée dans la page,
   aucune image à télécharger — et le même dessin sert à l'icône de l'app.

   Le rapport du dessin est de 276 sur 464 : la largeur est donnée, la hauteur
   suit. Fixer les deux écraserait l'arc. */
.sceau {
  display: block;
  flex: 0 0 auto;
  /* Contrainte par la HAUTEUR : la marque est un portrait (276 sur 464), et
     imposer sa largeur donnait un dessin de 24 px de haut, illisible. */
  height: 2.1rem;
  width: auto;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sceau-haut {
  fill: var(--marque-haut);
}

.sceau-gauche {
  fill: var(--marque-gauche);
}

.sceau-ombre {
  fill: var(--marque-ombre);
}

/* Le tracé de l'arc vient du balisage, pas d'ici.

   La couleur du trait a figuré dans cette règle et désignait `#sceau-or`, un
   dégradé renommé `#marque-or` depuis. Le CSS l'emportant sur l'attribut du SVG,
   l'arc était tracé avec une référence morte : invisible à l'écran, et aucun
   avertissement nulle part. Il ne reste donc ici que le filet de sécurité —
   sans `fill: none`, un arc ouvert se remplit en noir et la marque devient un
   triangle plein, ce qu'on voit en ouvrant la page sans sa feuille de style. */
.sceau-arc {
  fill: none;
}

.marque:hover .sceau {
  transform: translateY(-2px);
}

.nav-site {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  font-size: 0.94rem;
}

.nav-site a {
  position: relative;
  padding: 0.3rem 0;
  color: var(--encre-douce);
  text-decoration: none;
}

.nav-site a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

.nav-site a:hover {
  color: var(--encre);
}

.nav-site a:hover::after,
.nav-site a:focus-visible::after {
  transform: scaleX(1);
}

/* Page courante : signalée par un filet d'or permanent, pas par du gras. */
.nav-site a[aria-current='page'] {
  color: var(--encre);
}

.nav-site a[aria-current='page']::after {
  background: var(--or);
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   6. Ouverture (haut de la page d'accueil)
   -------------------------------------------------------------------------- */

.ouverture {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--filet);
}

.ouverture-grille {
  position: relative;
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
}

@media (min-width: 64rem) {
  .ouverture-grille {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

.ouverture h1 {
  max-width: 30ch;
}

/* Le mot mis en italique d'or est le seul accent de couleur du titre. */
.ouverture h1 em {
  font-style: italic;
  color: var(--or);
}

.accroche {
  max-width: 34rem;
  margin: 1.35rem 0 0;
  font-size: clamp(1.1rem, 1.03rem + 0.35vw, 1.28rem);
  line-height: 1.55;
  color: var(--encre-douce);
}

.ouverture-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease;
}

.bouton:active {
  transform: translateY(1px);
}

.bouton-primaire {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-texte);
}

.bouton-primaire:hover {
  background: var(--action-fort);
  border-color: var(--action-fort);
  color: var(--action-texte);
}

.bouton-ligne {
  background: transparent;
  border-color: var(--filet-fort);
  color: var(--encre);
}

.bouton-ligne:hover {
  border-color: var(--encre);
  color: var(--encre);
}

/* Cadres pointillés : l'application n'est pas publiée, on ne fait pas semblant
   d'avoir un bouton de téléchargement. La place est réservée, l'état est dit. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.stores li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  border: 1px dashed var(--filet-fort);
  border-radius: var(--rayon);
  font-size: 0.88rem;
  color: var(--encre-douce);
}

.stores small {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.avertissement-agence {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  padding: 0.55rem 1.05rem 0.55rem 0.85rem;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  background: var(--papier);
  font-size: 0.85rem;
  color: var(--encre-douce);
}

.avertissement-agence::before {
  content: '';
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--or);
}

/* Panneau « En bref » : quatre faits vérifiables, rien de plus. */
.resume {
  padding: clamp(1.35rem, 3vw, 1.9rem);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-l);
}

.resume-titre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.resume-titre::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--filet);
}

.resume ul {
  display: grid;
  gap: 0.95rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume li {
  display: grid;
  gap: 0.15rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--filet);
}

.resume li:first-child {
  padding-top: 0;
  border-top: 0;
}

.resume strong {
  font-size: 0.95rem;
}

.resume span {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   7. Chapitres de la page d'accueil
   -------------------------------------------------------------------------- */

/* Deux colonnes sur grand écran : à gauche le numéro et le titre, qui restent
   en vue pendant la lecture ; à droite le contenu. Mise en page de revue,
   volontairement éloignée de l'empilement de blocs promotionnels. */
.chapitre {
  padding: clamp(2.75rem, 7vw, 5.5rem) 0;
  border-bottom: 1px solid var(--filet);
}

.chapitre--pose {
  background: var(--sable-profond);
}

.chapitre-grille {
  display: grid;
  gap: clamp(1.5rem, 4vw, 5rem);
}

@media (min-width: 62rem) {
  .chapitre-grille {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }

  .chapitre-rail {
    position: sticky;
    top: calc(var(--haut-entete) + 2.25rem);
    align-self: start;
  }
}

.chapitre-numero {
  display: block;
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--or);
}

.chapitre-rail h2 {
  margin: 0;
}

.chapitre-corps {
  max-width: 46rem;
}

.chapitre-corps > :last-child {
  margin-bottom: 0;
}

/* Chapô : le paragraphe d'attaque, un cran au-dessus du corps. */
.chapo {
  font-size: 1.09rem;
  line-height: 1.6;
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   8. Composants de contenu
   -------------------------------------------------------------------------- */

/* Les sept démarches : liste numérotée en filets, pas en cartes. Les chiffres
   sont dans la marge, en romaine d'or — c'est ce qui donne le rythme. */
.etapes {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.etapes li {
  position: relative;
  counter-increment: etape;
  padding: 1.2rem 0 1.2rem 3.1rem;
  border-top: 1px solid var(--filet);
}

.etapes li:first-child {
  border-top: 0;
  padding-top: 0;
}

.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.42rem;
  font-family: var(--serif);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--or);
}

.etapes li:first-child::before {
  top: 0.22rem;
}

.etapes strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1.02rem;
}

.etapes span {
  display: block;
  max-width: 38rem;
  font-size: 0.96rem;
  color: var(--encre-douce);
}

/* Statuts des rites : puce colorée + libellé. Pas de pastille criarde ;
   l'information est la conséquence, pas la couleur. */
.badges {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  margin: clamp(1.35rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  list-style: none;
}

.badges li {
  --puce: var(--encre-tenue);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.65rem;
  padding: 0.7rem 0.95rem;
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}

.badges li::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--puce);
}

.badges strong {
  font-size: 0.92rem;
  color: var(--puce);
}

.badges span {
  grid-column: 2;
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--encre-douce);
}

.badges .pilier {
  --puce: var(--rouge);
}

.badges .obligatoire {
  --puce: var(--orange);
}

.badges .surerogatoire {
  --puce: var(--vert);
}

/* Cartes de fonctionnalités : filet, pas d'ombre au repos, léger relèvement
   au survol. Le petit trait d'or tient lieu d'icône. */
.cartes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: clamp(1.35rem, 3vw, 2rem);
}

.carte {
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.carte::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 1px;
  margin-bottom: 1.05rem;
  background: var(--or);
  transition: width 0.3s ease;
}

.carte:hover {
  border-color: var(--filet-fort);
  transform: translateY(-2px);
  box-shadow: var(--ombre-carte);
}

.carte:hover::before {
  width: 2.75rem;
}

.carte p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--encre-douce);
}

/* Fiche technique : deux colonnes étiquette / valeur en filets fins. */
.fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: clamp(1.35rem, 3vw, 2rem) 0 0;
}

.fiche dt {
  padding: 0.85rem 0 0.15rem;
  border-top: 1px solid var(--filet);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.fiche dd {
  margin: 0;
  padding: 0 0 0.85rem;
  font-size: 0.98rem;
  color: var(--texte);
}

@media (min-width: 40rem) {
  .fiche {
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  }

  .fiche dt {
    padding: 0.9rem 1.5rem 0.9rem 0;
  }

  .fiche dd {
    padding: 0.9rem 0;
    border-top: 1px solid var(--filet);
  }
}

/* Encart : ce qu'il faut lire même en diagonale. Filet d'or à gauche. */
.encart {
  padding: clamp(1.2rem, 3vw, 1.85rem);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-left: 2px solid var(--or);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}

.encart > :last-child {
  margin-bottom: 0;
}

.encart p {
  color: var(--encre-douce);
}

/* Bloc de clôture : contact et disponibilité, sans emphase commerciale. */
.clore {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
}

@media (min-width: 52rem) {
  .clore {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* --------------------------------------------------------------------------
   9. Pages de contenu (confidentialité, aide, mentions légales)
   -------------------------------------------------------------------------- */

.page-entete {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(1.75rem, 4vw, 2.5rem);
  background: var(--sable-profond);
  border-bottom: 1px solid var(--filet);
}

.page-entete .enveloppe {
  position: relative;
}

.page-entete h1 {
  max-width: 34rem;
  font-size: clamp(1.85rem, 1.4rem + 2vw, 2.9rem);
}

.page-entete .accroche {
  margin-top: 1rem;
}

.maj {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--encre-tenue);
}

/* Attention : ce bloc porte aussi la classe .enveloppe. On règle donc le
   rythme vertical avec padding-top / padding-bottom et JAMAIS avec le
   raccourci `padding`, qui remettrait à zéro les marges latérales de
   .enveloppe — le texte collerait au bord de l'écran sur téléphone. */
.page-corps {
  display: grid;
  gap: clamp(2rem, 5vw, 3.25rem);
  padding-top: clamp(2.25rem, 6vw, 3.5rem);
  padding-bottom: clamp(3rem, 8vw, 5.5rem);
}

@media (min-width: 64rem) {
  .page-corps {
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }

  .page-corps .prose {
    grid-column: 1;
    grid-row: 1;
  }

  .page-corps .sommaire {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--haut-entete) + 2.25rem);
  }
}

.sommaire {
  /* Empilé au-dessus du texte (écrans moyens), un sommaire pleine largeur
     donne une bande vide disgracieuse : on le borne. En deux colonnes, c'est
     la piste de 16rem qui commande. */
  max-width: 32rem;
  padding: 1.2rem 1.35rem;
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}

.sommaire-titre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.sommaire-titre::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--filet);
}

.sommaire ol {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: som;
}

.sommaire li {
  counter-increment: som;
}

.sommaire a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.25rem;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--encre-douce);
  text-decoration: none;
}

.sommaire a::before {
  content: counter(som, decimal-leading-zero);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--or);
}

.sommaire a:hover {
  color: var(--encre);
}

.prose {
  max-width: 42rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0.9rem;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--filet);
  scroll-margin-top: calc(var(--haut-entete) + 1.5rem);
}

/* Le tout premier titre n'a pas de filet au-dessus : il ne sépare rien. */
.prose > h2:first-child,
.prose > .chapo + h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose > .chapo {
  font-size: 1.09rem;
  line-height: 1.6;
  color: var(--encre-douce);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.prose h3 {
  margin: 1.75rem 0 0.4rem;
  font-size: 1.05rem;
}

.prose ul {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  list-style: none;
}

.prose ul li {
  position: relative;
  margin-bottom: 0.45rem;
}

/* Puce dessinée : un petit trait, plus discret qu'un rond noir. */
.prose ul li::before {
  content: '';
  position: absolute;
  left: -1.15rem;
  top: 0.75em;
  width: 0.45rem;
  height: 1px;
  background: var(--or);
}

.prose .encart {
  margin: 0 0 1.5rem;
}

/* Tableaux : sans remplissage, uniquement des filets. Le conteneur
   `.defilement` défile horizontalement si nécessaire — jamais le body. */
.defilement {
  overflow-x: auto;
  margin: clamp(1.25rem, 3vw, 1.75rem) 0;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.94rem;
}

thead th {
  padding: 0 1.25rem 0.6rem 0;
  border-bottom: 1px solid var(--filet-fort);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  text-align: left;
  vertical-align: bottom;
}

tbody th,
tbody td {
  padding: 0.85rem 1.25rem 0.85rem 0;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
}

tbody th {
  font-weight: 600;
  color: var(--encre);
}

tbody td {
  color: var(--encre-douce);
}

thead th:last-child,
tbody th:last-child,
tbody td:last-child {
  padding-right: 0;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

/* Numéros à ne jamais couper en fin de ligne (EIN, téléphone) : coupés, ils
   deviennent illisibles et, sur une page légale, douteux. */
.insecable {
  white-space: nowrap;
}

/* Précision secondaire dans une cellule (ex. absence de SIREN). */
td .note,
dd .note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--encre-tenue);
}

/* --------------------------------------------------------------------------
   10. Bandeau de consentement
   -------------------------------------------------------------------------- */
/* Barre basse, non modale : elle n'empêche pas de lire la page. Les deux
   boutons sont volontairement identiques — la CNIL interdit de rendre le refus
   moins accessible que l'acceptation, y compris par la couleur. Ne pas
   « améliorer » l'un des deux visuellement.
   Les noms de classes sont ceux produits par assets/consent.js : bandeau-
   consentement, bandeau-texte, bandeau-actions, bouton-consentement. */

.bandeau-consentement {
  position: fixed;
  inset: auto 0.75rem 0.75rem;
  z-index: 60;
  display: grid;
  gap: 1.15rem;
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background: var(--papier);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-flottante);
  animation: bandeau-monte 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes bandeau-monte {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@media (min-width: 46rem) {
  .bandeau-consentement {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
  }
}

.bandeau-texte {
  font-size: 0.9rem;
  line-height: 1.55;
}

.bandeau-texte p {
  margin: 0 0 0.5rem;
}

.bandeau-texte p:first-child {
  font-size: 0.95rem;
}

.bandeau-texte p:last-child {
  margin-bottom: 0;
  color: var(--encre-douce);
}

.bandeau-actions {
  display: flex;
  gap: 0.6rem;
}

.bouton-consentement {
  flex: 1 1 auto;
  padding: 0.72rem 1.5rem;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--encre);
  background: transparent;
  border: 1px solid var(--encre-douce);
  border-radius: var(--rayon);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.bouton-consentement:hover {
  background: var(--sable-profond);
  border-color: var(--encre);
}

@media (max-width: 30rem) {
  .bandeau-consentement {
    inset: auto 0.5rem 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------------------- */

.site-pied {
  padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
  background: var(--sable-profond);
  border-top: 1px solid var(--filet);
  font-size: 0.92rem;
  color: var(--encre-douce);
}

.pied-grille {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 48rem) {
  .pied-grille {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr);
  }
}

.pied-marque .marque {
  margin-bottom: 0.65rem;
}

.pied-baseline {
  max-width: 26rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--encre-douce);
}

.pied-titre {
  margin: 0 0 0.8rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.pied-nav ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pied-nav a,
.pied-bas a {
  color: var(--encre-douce);
  text-decoration: none;
}

.pied-nav a:hover,
.pied-bas a:hover {
  color: var(--encre);
  text-decoration: underline;
}

.pied-note {
  max-width: 30rem;
  margin: 0;
  padding-left: clamp(0.9rem, 2vw, 1.25rem);
  border-left: 1px solid var(--filet-fort);
  font-size: 0.88rem;
  color: var(--encre-tenue);
}

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
  font-size: 0.82rem;
  color: var(--encre-tenue);
}

.pied-bas p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. Préférences système et impression
   -------------------------------------------------------------------------- */

/* Mouvement réduit : on supprime les animations, on garde les changements de
   couleur (ils portent de l'information, pas du mouvement). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .carte:hover,
  .bouton:active {
    transform: none;
  }
}

/* Contraste renforcé : on épaissit les filets plutôt que d'ajouter des fonds. */
@media (prefers-contrast: more) {
  :root {
    --filet: #b9b1a1;
    --filet-fort: #8d8676;
    --encre-tenue: #5f594d;
  }
}

/* Les pages légales et la politique de confidentialité sont imprimées ou
   enregistrées en PDF par les services de conformité des stores. */
@media print {
  :root {
    --sable: #fff;
    --sable-profond: #fff;
    --papier: #fff;
    --encre: #000;
    --texte: #1a1a1a;
    --encre-douce: #333;
    --encre-tenue: #555;
    --filet: #bbb;
    --filet-fort: #888;
  }

  .site-entete,
  .nav-site,
  .sommaire,
  .decor,
  .bandeau-consentement,
  .stores,
  .ouverture-actions {
    display: none !important;
  }

  body {
    font-size: 11pt;
  }

  .page-corps,
  .chapitre {
    display: block;
    padding: 0;
  }

  .prose,
  .chapitre-corps {
    max-width: none;
  }

  a {
    color: #000;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  .encart,
  .carte,
  .etapes li,
  table {
    break-inside: avoid;
  }
}