/* ==========================================================================
   La FETT — Faluche et Tradition Toulousaine
   Feuille de style unique. Aucune dépendance.

   Sommaire
   1. Jetons (couleurs, fontes, mesures)
   2. Base
   3. Motif de brique
   4. En-tête et navigation
   5. Ouverture
   6. Grille des sections
   7. Composants de texte
   8. Emplacements d'images
   9. Chronologie
   10. Pied de page
   11. Mouvement et impression
   ========================================================================== */

/* --- 1. Jetons ---------------------------------------------------------- */

:root{
  /* Repris du blason : le marine du fond, le rouge et le bleu de l'écu,
     l'or de la croix occitane. */
  --papier:      #F6F3EC;
  --papier-creux:#EAE5DA;
  --papier-net:  #FCFAF5;
  --encre:       #01285F;
  --encre-2:     #45607F;
  --encre-3:     #566579;

  --rouge:       #D42026;   /* voir la note sur .chrono dt */
  --bleu:        #0058A8;
  /* Le jaune du blason. Illisible seul sur ce papier, il est toujours
     employé cerné d'un trait d'encre, comme sur le logo. */
  --or:          #FDDD00;

  --trait:       rgba(1, 40, 95, .18);
  --trait-fort:  rgba(1, 40, 95, .40);

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --page:   72rem;   /* largeur maximale du bloc de page */
  --lecture:60ch;    /* largeur d'une colonne de texte confortable */
  --marge:  clamp(1.25rem, 5vw, 4.5rem);
}

@media (prefers-color-scheme: dark){
  :root{
    --papier:      #011D44;
    --papier-creux:#01285F;
    --papier-net:  #01142F;
    --encre:       #E6EDF7;
    --encre-2:     #A8BAD4;
    --encre-3:     #8397B5;

    --rouge:       #F4756B;
    --bleu:        #7FAAE6;
    --or:          #FDDD00;

    --trait:       rgba(230, 237, 247, .17);
    --trait-fort:  rgba(230, 237, 247, .36);
  }
}

/* --- 2. Base ------------------------------------------------------------ */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--serif);
  font-size:clamp(1.0625rem, .96rem + .42vw, 1.1875rem);
  font-weight:380;
  line-height:1.68;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
}

h1, h2, h3{ font-weight:520; line-height:1.14; letter-spacing:-.012em; margin:0; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

strong{ font-weight:600; }
em{ font-style:italic; }

a{ color:inherit; text-decoration-color:var(--trait-fort); text-underline-offset:.18em; }
a:hover{ text-decoration-color:var(--rouge); }

sup{ font-size:.66em; line-height:0; vertical-align:.5em; }

hr{ border:0; border-top:1px solid var(--trait); margin:0; }

::selection{ background:var(--rouge); color:var(--papier); }

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

/* Petites capitales de service : menu, numéros, étiquettes, légendes. */
.cap{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1.4;
}

.evitement{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--encre);
  color:var(--papier);
  padding:.7rem 1.1rem;
  z-index:100;
}
.evitement:focus{ left:0; }

.enveloppe{
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--marge);
}

/* --- 3. Motif de brique -------------------------------------------------
   Appareil à joints croisés, tracé en SVG. Il n'apparaît qu'en fond de
   l'ouverture et du pied de page, très pâle : un rappel, pas une texture. */

:root{ --motif-brique:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cg fill='none' stroke='%23C3CDDD' stroke-width='1'%3E%3Cpath d='M0 .5h96M0 24.5h96M0 47.5h96'/%3E%3Cpath d='M23.5 0v24M71.5 0v24M-.5 24v24M47.5 24v24M95.5 24v24'/%3E%3C/g%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark){
  :root{ --motif-brique:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cg fill='none' stroke='%23103565' stroke-width='1'%3E%3Cpath d='M0 .5h96M0 24.5h96M0 47.5h96'/%3E%3Cpath d='M23.5 0v24M71.5 0v24M-.5 24v24M47.5 24v24M95.5 24v24'/%3E%3C/g%3E%3C/svg%3E"); }
}

.brique{
  background-image:var(--motif-brique);
  background-size:96px 48px;
}

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

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

.entete__in{
  max-width:var(--page);
  margin-inline:auto;
  padding:0 var(--marge);
  height:3.75rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.marque{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--encre);
  flex:none;
}
.marque img{ height:2.5rem; width:auto; display:block; }
.marque b{
  font-family:var(--sans);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.nav{ display:flex; gap:1.55rem; overflow-x:auto; scrollbar-width:none; }
.nav::-webkit-scrollbar{ display:none; }

.nav a{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--encre-2);
  text-decoration:none;
  white-space:nowrap;
  padding:.35rem 0;
  border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav a:hover{ color:var(--encre); }
.nav a[aria-current="true"]{ color:var(--rouge); border-bottom-color:var(--rouge); }

@media (max-width:52rem){
  .nav{
    gap:1.1rem;
    /* Le menu défile : un fondu sur le bord droit signale qu'il continue. */
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
            mask-image:linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
  }
  .marque b{ display:none; }
}

/* --- 5. Ouverture ------------------------------------------------------- */

.ouverture{
  border-bottom:1px solid var(--trait-fort);
  background:var(--papier);
  position:relative;
}
/* Le motif ne couvre que le tiers droit, en dégradé de transparence. */
.ouverture::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--motif-brique);
  background-size:96px 48px;
  opacity:.6;
  -webkit-mask-image:linear-gradient(105deg, transparent 42%, #000 100%);
          mask-image:linear-gradient(105deg, transparent 42%, #000 100%);
  pointer-events:none;
}
.ouverture > *{ position:relative; }

.ouverture__grille{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:end;
  padding-block:clamp(3.25rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
}

.surtitre{
  display:flex;
  align-items:center;
  gap:.85rem;
  color:var(--encre-2);
  margin-bottom:1.75rem;
}
.surtitre::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--trait);
}

.ouverture h1{
  font-size:clamp(3.5rem, 13vw, 8rem);
  font-weight:560;
  letter-spacing:-.035em;
  line-height:.9;
  margin:0;
}
.ouverture h1 span{ color:var(--rouge); }

.ouverture__sous{
  font-family:var(--sans);
  font-size:clamp(.9rem, 2.4vw, 1.0625rem);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre-2);
  margin:1.15rem 0 0;
  padding-top:1.15rem;
  border-top:1px solid var(--trait);
}

.ouverture__texte{
  font-size:1.075em;
  color:var(--encre-2);
  max-width:44ch;
  padding-bottom:.35rem;
}
.ouverture__texte strong{ color:var(--encre); }

/* Bandeau de trois repères chiffrés, séparés par des filets. */
.reperes{
  list-style:none;
  margin:0;
  padding:0 0 clamp(2rem, 4vw, 3rem);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--trait);
}
.reperes li{
  padding:1.4rem clamp(1rem, 2.5vw, 2rem) 0 0;
  border-right:1px solid var(--trait);
}
.reperes li:last-child{ border-right:0; }
.reperes li:not(:first-child){ padding-left:clamp(1rem, 2.5vw, 2rem); }
.reperes b{
  display:block;
  font-size:clamp(1.75rem, 4vw, 2.5rem);
  font-weight:520;
  line-height:1;
  color:var(--rouge);
  letter-spacing:-.02em;
  font-variant-numeric:lining-nums;
}
.reperes span{
  display:block;
  margin-top:.55rem;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--encre-2);
}

@media (max-width:56rem){
  .ouverture__grille{ grid-template-columns:1fr; align-items:start; gap:2rem; }
  .reperes{ grid-template-columns:1fr; }
  .reperes li{ border-right:0; border-bottom:1px solid var(--trait); padding:1.1rem 0; }
  .reperes li:last-child{ border-bottom:0; }
  .reperes li:not(:first-child){ padding-left:0; }
  .reperes b{ display:inline-block; min-width:4.5ch; }
  .reperes span{ display:inline; margin-top:0; }
}

/* --- 6. Grille des sections --------------------------------------------- */

.section{ border-bottom:1px solid var(--trait); }
.section--creux{ background:var(--papier-creux); }

.section__grille{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  padding-block:clamp(3rem, 7vw, 5.5rem);
}

/* .rail__num reste utilisé sur l'accueil, dans les cartes du sommaire
   (voir 12. Sommaire) — le numéro de chapitre en colonne de gauche des
   pages de contenu a disparu avec le passage au multi-page. */
.rail__num{
  display:block;
  font-size:2.25rem;
  font-weight:400;
  line-height:1;
  color:var(--rouge);
  font-variant-numeric:lining-nums;
  letter-spacing:-.02em;
}

/* Sans la colonne du rail, .corps a toute la largeur de la page à
   disposition : on la recentre plutôt que de la laisser plaquée à gauche.
   Comme .cadre et .blason partagent déjà cette même mesure, textes et
   images se retrouvent alignés sur une seule colonne centrée. */
.corps{
  min-width:0;
  max-width:var(--lecture);
  margin-inline:auto;
}
.corps > p,
.corps > h3,
.corps > ul,
.corps > .note{ max-width:var(--lecture); }

.corps h1,
.corps h2{
  font-size:clamp(1.85rem, 4.2vw, 2.75rem);
  margin:0 0 1.1rem;
  max-width:20ch;
}
.corps h3{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--encre-2);
  margin:2.75rem 0 1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--trait);
  max-width:none;
}

/* Le chapô est plus gros : il lui faut sa propre mesure, et une spécificité
   suffisante pour passer devant la règle générique ci-dessus. */
.corps > .chapo{
  font-size:1.2em;
  line-height:1.55;
  color:var(--encre-2);
  max-width:48ch;
  margin-bottom:1.6rem;
}


/* --- 7. Composants de texte --------------------------------------------- */

/* Liste de définitions en deux colonnes, séparées par des filets. */
.defs{ margin:1.75rem 0 0; }
.defs > div{
  display:grid;
  grid-template-columns:13rem minmax(0, 1fr);
  gap:.35rem 2rem;
  padding:1rem 0;
  border-top:1px solid var(--trait);
}
.defs > div:last-child{ border-bottom:1px solid var(--trait); }
.defs dt{
  font-family:var(--sans);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--encre);
  padding-top:.15rem;
}
.defs dd{ margin:0; color:var(--encre-2); font-size:.9875em; }

@media (max-width:44rem){
  .defs > div{ grid-template-columns:1fr; gap:.2rem; }
}

/* Encadré discret : un filet épais à gauche, pas de boîte. */
.note{
  margin:1.9rem 0;
  padding:.15rem 0 .15rem 1.35rem;
  border-left:3px solid var(--rouge);
  font-size:.95em;
  color:var(--encre-2);
}
.note strong{ color:var(--encre); }
.note--bleu{ border-left-color:var(--bleu); }

/* Adresse de courriel, traitée comme un objet à part. */
.courriel{
  display:inline-block;
  margin:1.5rem 0;
  font-size:clamp(1.25rem, 3.5vw, 1.75rem);
  color:var(--rouge);
  text-decoration:none;
  border-bottom:2px solid var(--trait);
  padding-bottom:.15rem;
  transition:border-color .18s ease;
  word-break:break-word;
}
.courriel:hover{ border-bottom-color:var(--rouge); }

/* Ornement de séparation : croix occitane centrée sur un filet. */
.ornement{
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding-block:clamp(1.75rem, 4vw, 2.75rem);
  max-width:var(--lecture);
  color:var(--or);
}
.ornement::before,
.ornement::after{ content:""; flex:1; height:1px; background:var(--trait); }
.ornement svg{ width:1.6rem; height:1.6rem; display:block; flex:none; }
.ornement svg *{ fill:var(--or); stroke:var(--encre); stroke-width:6; stroke-linejoin:round; }

/* La devise de la ville, reprise du blason de l'association. */
.devise{
  margin:1rem 0 0;
  font-size:1.0625rem;
  color:var(--encre-2);
}
.devise span{ font-style:italic; color:var(--rouge); }
.devise i{
  font-style:normal;
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre-3);
  display:block;
  margin-top:.3rem;
}

/* Le blason. Centré sur la mesure du texte, à taille lisible : c'est un dessin
   détaillé, il ne supporte pas d'être réduit à une vignette. */
.blason{
  margin:2.5rem 0;
  max-width:var(--lecture);
}
.blason[hidden]{ display:none; }
.blason img{
  width:clamp(9rem, 22vw, 13rem);
  height:auto;
  display:block;
  margin-inline:auto;
}

/* --- 8. Emplacements d'images -------------------------------------------
   Un cadre en pointillé qui dit quoi mettre et sous quel nom. Pour le
   remplir, on remplace le <div class="cadre__vide"> par un <img> : le reste
   de la mise en forme est déjà écrit pour les deux. */

.cadre{
  margin:2.5rem 0;
  /* Même largeur que le texte au-dessus. Un écart intermédiaire se lirait
     comme un défaut plutôt que comme un débordement voulu. */
  max-width:var(--lecture);
}

.cadre img{
  width:100%;
  height:auto;
  display:block;
}

.cadre figcaption{
  margin-top:.85rem;
  padding-top:.7rem;
  border-top:1px solid var(--trait);
  color:var(--encre-3);
}

.cadre__vide{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  text-align:center;
  padding:2rem 1.5rem;
  min-height:11rem;
  aspect-ratio:3 / 2;
  border:1px dashed var(--trait-fort);
  color:var(--encre-3);
}
.cadre--bande  .cadre__vide{ aspect-ratio:2 / 1; }
.cadre--large  .cadre__vide{ aspect-ratio:4 / 3; }

/* Une image en hauteur prendrait toute la mesure et écraserait la page. Le
   cadre garde donc la largeur du texte, et c'est l'image qu'on borne et qu'on
   centre à l'intérieur : la légende et son filet restent alignés sur le reste. */
.cadre--portrait img{ max-width:26rem; margin-inline:auto; }

.cadre__vide b{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--encre-2);
}
.cadre__vide span{
  font-size:.95rem;
  line-height:1.5;
  max-width:40ch;
}
.cadre__vide code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.8125rem;
  color:var(--rouge);
  word-break:break-all;
}
.cadre__vide i{
  font-style:normal;
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* Sur écran étroit, le rapport de forme céderait devant le texte : on le
   libère. Le sélecteur descendant est nécessaire pour égaler la spécificité
   des classes modificatrices, sans quoi elles l'emporteraient ici. */
@media (max-width:36rem){
  .cadre .cadre__vide{ aspect-ratio:auto; padding:1.75rem 1.1rem; }
}

/* --- 9. Chronologie ------------------------------------------------------ */

.chrono{ margin:2rem 0 0; }
.chrono > div{
  position:relative;
  display:grid;
  grid-template-columns:5rem minmax(0, 1fr);
  gap:0 2.25rem;
  padding:1.15rem 0;
  border-top:1px solid var(--trait);
}
.chrono > div:last-child{ border-bottom:1px solid var(--trait); }
/* Filet vertical continu entre la colonne des dates et le texte. */
.chrono > div::before{
  content:"";
  position:absolute;
  left:5.9rem;
  top:0;
  bottom:0;
  width:1px;
  background:var(--trait);
}
.chrono > div::after{
  content:"";
  position:absolute;
  left:5.6rem;
  top:1.55rem;
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--rouge);
}
.chrono dt{
  font-size:1.3125rem;
  font-weight:700;
  line-height:1.5;
  color:var(--rouge);
  font-variant-numeric:lining-nums;
  letter-spacing:-.01em;
}
.chrono dd{ margin:0; color:var(--encre-2); font-size:.9875em; }
.chrono dd b{ color:var(--encre); font-weight:600; }

@media (max-width:44rem){
  .chrono > div{ grid-template-columns:1fr; gap:.3rem; padding-left:1.1rem; }
  .chrono > div::before{ left:0; }
  .chrono > div::after{ left:-.2rem; top:1.5rem; }
}

/* --- 10. Pied de page ----------------------------------------------------- */

.pied{
  background-color:var(--papier-creux);
  border-top:1px solid var(--trait-fort);
  color:var(--encre-2);
  font-size:.875rem;
  line-height:1.62;
}
.pied__in{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr);
  gap:clamp(1.75rem, 5vw, 4rem);
  padding-block:clamp(2.5rem, 5vw, 3.5rem);
}
.pied strong{ color:var(--encre); }
.pied__marque{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--encre);
  display:block;
  margin-bottom:.4rem;
}
.pied a{ color:var(--encre-2); }
@media (max-width:52rem){
  .pied__in{ grid-template-columns:1fr; }
}

/* --- 11. Mouvement et impression ---------------------------------------- */

/* L'apparition n'est active que si le script tourne : sans lui, tout
   s'affiche normalement. */
.js .apparait{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s ease, transform .55s ease;
}
.js .apparait.vu{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .apparait{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media print{
  .entete, .nav, .evitement{ display:none; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .section, .ouverture{ break-inside:avoid; border-color:#999; }
  a{ text-decoration:none; }
}

/* --- 12. Sommaire (accueil) ----------------------------------------------
   Grille de cartes reliant chaque page du site depuis l'accueil. Reprend les
   jetons existants : même trait, même rouge, aucune nouvelle couleur. */

.sommaire__titre{
  font-size:clamp(1.85rem, 4.2vw, 2.75rem);
  margin:0 0 1.75rem;
  max-width:20ch;
}

.sommaire{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
  gap:1px;
  background:var(--trait);
  border:1px solid var(--trait);
}

.carte{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  background:var(--papier);
  padding:clamp(1.5rem, 3vw, 2rem);
  text-decoration:none;
  color:inherit;
  transition:background .18s ease;
}
.carte:hover{ background:var(--papier-creux); }
.carte:hover .carte__suite{ color:var(--rouge); }

.carte .rail__num{
  font-size:1.5rem;
  font-weight:400;
  color:var(--rouge);
  font-variant-numeric:lining-nums;
  letter-spacing:-.02em;
  margin:0;
}

.carte h3{
  font-family:var(--serif);
  font-size:1.375rem;
  font-weight:520;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--encre);
  border:0;
  padding:0;
  margin:0;
}

.carte p{
  color:var(--encre-2);
  font-size:.95em;
  margin:0;
  flex:1;
}

.carte__suite{
  color:var(--encre-3);
  transition:color .18s ease;
}

/* --- 13. Pagination (bas de page) ----------------------------------------- */

.suite{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  max-width:var(--page);
  margin-inline:auto;
  padding:1.75rem var(--marge) 2.5rem;
  border-top:1px solid var(--trait);
}

.suite__lien{
  color:var(--encre-2);
  text-decoration:none;
}
.suite__lien:hover{ color:var(--rouge); }
.suite__lien--avant{ margin-left:auto; }