/* Terre Fragile — composants web (CSS seul).
   Charger après tokens.css (variables --papier, --font-titre…).
   Textures et polices servies depuis /assets. */

/* ---------- Polices ----------
   Déclarées ici (en plus de tokens.css) pour que le texte s'affiche dans la bonne police
   même si seul ce fichier est chargé. Blushes : licence réservée au site de l'association. */
/* Fichiers « -2 » : J et j décalés vers la droite (dans la police d'origine ils débordaient de 0,27 em à gauche
   et mangeaient l'espace d'avant : « LeJeu »). */
@font-face { font-family: "Blushes"; src: url("../fonts/Blushes-Regular-2.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Blushes"; src: url("../fonts/Blushes-Black-2.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
/* Blushes dessine l'espace insécable avec une largeur nulle : la famille « Blushes Espace »
   ne contient que cette espace (reprise de Nunito) et passe avant Blushes dans les piles de titre. */
@font-face { font-family: "Blushes Espace"; src: url("../fonts/Blushes-Espace.woff2") format("woff2"); unicode-range: U+00A0; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/NunitoSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/NunitoSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Base ---------- */
.tf-page {
  background: var(--papier) url("../img/textures/papier-grain.webp") repeat;
  background-size: 400px 400px;
  color: var(--texte);
  font-family: var(--font-texte, Nunito, ui-rounded, sans-serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.tf-page img { max-width: 100%; }
.tf-conteneur {
  max-width: var(--largeur-page);
  margin-inline: auto;
  padding-inline: var(--espace-7);
}
.tf-section { padding-block: var(--espace-9); position: relative; }
.tf-prose { max-width: var(--largeur-texte); }
.tf-prose p { margin: 0 0 var(--espace-4); }

.tf-titre {
  font-family: "Blushes Espace", Blushes, var(--font-titre, Nunito, ui-rounded, sans-serif);
  font-weight: 900;
  margin: 0;
  text-wrap: balance;
  color: var(--encre);
}
.tf-surtitre,
.tf-surtitre[class*="tf-c-"] {
  font-family: var(--font-texte, Nunito, ui-rounded, sans-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--encre);
  margin: 0 0 var(--espace-1);
}
.tf-sous-titre {
  font-family: var(--font-soustitre, "Nunito Sans", system-ui, sans-serif);
  font-weight: 600;
  color: var(--encre);
  margin: 0;
}
.tf-manuscrit {
  font-family: "Blushes Espace", Blushes, var(--font-titre, Nunito, ui-rounded, sans-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  color: var(--encre);
}

/* Couleurs de titre. Les tons vifs safran, feuille, lagon et orange
   n'existent pas ici : ils ne sont pas lisibles en texte. */
.tf-c-encre { color: var(--encre); }
.tf-c-corail { color: var(--corail); }
.tf-c-ciel { color: var(--ciel); }
.tf-c-petrole { color: var(--petrole); }
.tf-c-emeraude { color: var(--emeraude); } /* titres ≥ 32px sur papier-blanc uniquement */
.tf-c-corail-fonce { color: var(--corail-fonce); }
.tf-c-safran-fonce { color: var(--safran-fonce); }
.tf-c-feuille-fonce { color: var(--feuille-fonce); }
.tf-c-emeraude-fonce { color: var(--emeraude-fonce); }
.tf-c-lagon-fonce { color: var(--lagon-fonce); }

.tf-lien {
  color: var(--petrole);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--feuille);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.tf-lien:hover { color: var(--corail-fonce); text-decoration-color: var(--corail); }

.tf-page :focus-visible,
.tf-focus:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Liste à puces « feuille » */
.tf-liste-feuilles { list-style: none; padding: 0; margin: 0; }
.tf-liste-feuilles li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--espace-2);
}
.tf-liste-feuilles li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%237ea625' d='M3 17C3 9 8 3 18 2c0 9-6 15-15 15z'/%3E%3Cpath fill='none' stroke='%234f7016' stroke-width='1.3' stroke-linecap='round' d='M4 16C8 11 11 8 15 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Illustrations ---------- */
.tf-detoure { filter: drop-shadow(var(--ombre-detoure)); }
.tf-colibri {
  position: absolute;
  width: clamp(72px, 9vw, 130px);
  pointer-events: none;
  animation: tf-vol 7s ease-in-out infinite;
}
.tf-colibri--miroir { transform: scaleX(-1); animation-name: tf-vol-miroir; }
@keyframes tf-vol { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -8px; rotate: 2deg; } }
@keyframes tf-vol-miroir { 0%, 100% { translate: 0 0; rotate: 2deg; } 50% { translate: 0 -8px; rotate: -2deg; } }
@media (prefers-reduced-motion: reduce) { .tf-colibri { animation: none; } }

/* ---------- Bouton ---------- */
.tf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-texte, Nunito, ui-rounded, sans-serif);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  padding: 14px 26px 15px;
  color: var(--papier-blanc);
  background: var(--emeraude-fonce);
  border: 2px solid transparent;
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  box-shadow: var(--ombre-bouton, 0 2px 3px rgba(40, 38, 34, 0.24), 0 6px 14px rgba(40, 38, 34, 0.24));
  rotate: -0.6deg;
  text-decoration: none;
  cursor: pointer;
  transition: rotate 0.15s ease, translate 0.15s ease, box-shadow 0.15s ease;
}
.tf-btn:hover { rotate: 0.5deg; translate: 0 -1px; box-shadow: 0 3px 5px rgba(40, 38, 34, 0.24), 0 10px 20px rgba(40, 38, 34, 0.26); }
.tf-btn:active { translate: 0 2px; box-shadow: 0 1px 2px rgba(40, 38, 34, 0.26), 0 3px 6px rgba(40, 38, 34, 0.18); }
.tf-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tf-btn--chaud { background: var(--corail-fonce); }
.tf-btn--contour {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
  box-shadow: none;
}
.tf-btn--contour:hover { background: var(--papier-blanc); box-shadow: none; }
.tf-btn[disabled], .tf-btn[aria-disabled="true"] {
  background: var(--papier-ombre);
  color: var(--texte-doux);
  box-shadow: none;
  rotate: 0deg;
  cursor: not-allowed;
}
.tf-actions { display: flex; flex-wrap: wrap; gap: var(--espace-4); align-items: center; }

/* ---------- Photo déchirée ---------- */
.tf-photo-dechiree {
  position: relative;
  margin: 0;
  --h: var(--hauteur-dechirure);
}
.tf-photo-dechiree > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-photo-dechiree--bas::after,
.tf-photo-dechiree--haut::before {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  height: var(--h);
  pointer-events: none;
}
/* Le papier déchiré = grain du fond + fibres blanches + ombre, découpés par un masque. */
.tf-photo-dechiree--bas::after {
  bottom: calc(var(--h) * -0.3);
  background:
    url("../img/textures/dech-ov-bas.webp") 0 0 / 100% 100% no-repeat,
    url("../img/textures/papier-grain.webp") 0 0 / 400px 400px repeat,
    var(--papier);
  -webkit-mask: url("../img/textures/dech-mk-bas.webp") 0 0 / 100% 100% no-repeat;
  mask: url("../img/textures/dech-mk-bas.webp") 0 0 / 100% 100% no-repeat;
}
.tf-photo-dechiree--haut::before {
  top: calc(var(--h) * -0.3);
  z-index: 1;
  background:
    url("../img/textures/dech-ov-haut.webp") 0 0 / 100% 100% no-repeat,
    url("../img/textures/papier-grain.webp") 0 0 / 400px 400px repeat,
    var(--papier);
  -webkit-mask: url("../img/textures/dech-mk-haut.webp") 0 0 / 100% 100% no-repeat;
  mask: url("../img/textures/dech-mk-haut.webp") 0 0 / 100% 100% no-repeat;
}
.tf-photo-dechiree--miroir::after,
.tf-photo-dechiree--miroir::before { transform: scaleX(-1); }

/* ---------- Feuille déchirée ---------- */
.tf-feuille {
  position: relative;
  isolation: isolate;
  padding: var(--espace-6);
}
.tf-feuille::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: -1;
  background: url("../img/textures/feuille-blanche.svg") center / 100% 100% no-repeat;
}
.tf-feuille--grise::before { background-image: url("../img/textures/feuille-grise.svg"); }
.tf-feuille--penchee { rotate: -1deg; }
.tf-feuille--penchee-droite { rotate: 0.8deg; }

.tf-feuille__titre { font-size: 22px; line-height: 1.15; margin-bottom: var(--espace-3); }

/* ---------- Titre de section avec branches ---------- */
.tf-titre-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-3);
  text-align: center;
  margin-bottom: var(--espace-7);
}
.tf-titre-section__branche { width: 56px; height: auto; flex: none; }
.tf-titre-section__branche--droite { transform: scaleX(-1); }

/* ---------- En-tête ---------- */
.tf-entete { position: relative; z-index: 5; padding-block: var(--espace-4); }
.tf-entete__inner { display: flex; align-items: center; gap: var(--espace-6); }
.tf-entete__logo { display: block; flex: none; }
.tf-entete__logo img { display: block; width: 96px; height: 96px; }
.tf-nav { margin-left: auto; }
.tf-nav ul { display: flex; gap: var(--espace-5); list-style: none; margin: 0; padding: 0; }
.tf-nav a {
  display: inline-block;
  padding: 6px 2px 10px;
  font-family: var(--font-texte, Nunito, ui-rounded, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--encre);
  text-decoration: none;
}
.tf-nav a:hover { color: var(--corail-fonce); }
.tf-nav a[aria-current="page"] {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 18 2, 30 9, 46 5 S 76 2, 92 6 S 112 4, 118 5' fill='none' stroke='%237ea625' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 9px no-repeat;
}
.tf-nav__bouton { display: none; }

/* ---------- Hero ---------- */
.tf-hero { position: relative; padding-bottom: var(--espace-8); }
.tf-hero__photo { height: clamp(260px, 42vw, 520px); }
.tf-hero__contenu { position: relative; z-index: 2; margin-top: var(--espace-5); }
.tf-hero__texte { max-width: 820px; }
.tf-hero__texte .titre-hero { font-size: 72px; }
.tf-hero__chapeau { margin-block: var(--espace-4) var(--espace-6); font-family: var(--font-texte, Nunito, ui-rounded, sans-serif); font-weight: 400; color: var(--texte); max-width: none; }
.tf-hero__fleur {
  position: absolute;
  right: max(var(--espace-7), calc((100% - var(--largeur-page)) / 2 + var(--espace-7)));
  bottom: var(--espace-6);
  width: clamp(180px, 26vw, 360px);
  z-index: 2;
}

/* ---------- Ton d'un bloc ----------
   Une seule couleur par événement ou par membre : le trait dessiné prend le ton vif (--ton-trait),
   le texte (jour, initiales, titre) le ton lisible (--ton-encre). Défaut : corail. */
.tf-evenement, .tf-membre { --ton-trait: var(--corail); --ton-encre: var(--corail-fonce); }
.tf-ton--corail { --ton-trait: var(--corail); --ton-encre: var(--corail-fonce); }
.tf-ton--lagon { --ton-trait: var(--lagon); --ton-encre: var(--lagon-fonce); }
.tf-ton--emeraude { --ton-trait: var(--emeraude); --ton-encre: var(--emeraude-fonce); }
.tf-ton--ciel { --ton-trait: var(--ciel); --ton-encre: var(--ciel); }
.tf-ton--safran { --ton-trait: var(--safran); --ton-encre: var(--safran-fonce); }
.tf-ton--feuille { --ton-trait: var(--feuille); --ton-encre: var(--feuille-fonce); }
.tf-ton--petrole { --ton-trait: var(--petrole); --ton-encre: var(--petrole); }

/* ---------- Carte formule ---------- */
.tf-formule { display: flex; flex-direction: column; gap: var(--espace-3); height: 100%; box-sizing: border-box; }
.tf-formule__illu { width: 96px; height: auto; position: absolute; top: -34px; right: 18px; }
.tf-formule__pied { margin-top: auto; padding-top: var(--espace-3); }

/* ---------- Membre ---------- */
.tf-membre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--espace-2); }
.tf-membre__portrait {
  position: relative;
  width: 168px;
  height: 168px;
  margin-bottom: var(--espace-3);
}
.tf-membre__portrait img,
.tf-membre__initiales {
  width: 100%;
  height: 100%;
  border-radius: var(--rayon-cercle);
  object-fit: cover;
  display: grid;
  place-items: center;
}
.tf-membre__portrait::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2.5px solid var(--ton-trait);
  border-radius: 52% 48% 55% 45% / 47% 55% 45% 53%;
  rotate: -8deg;
}
.tf-membre__initiales {
  background: var(--papier-blanc);
  font-family: "Blushes Espace", Blushes, var(--font-titre, Nunito, ui-rounded, sans-serif);
  font-weight: 900;
  font-size: 54px;
  color: var(--ton-encre);
}
.tf-membre .tf-titre,
.tf-membre .tf-titre[class*="tf-c-"] { color: var(--ton-encre); }
.tf-membre__role { font-family: var(--font-soustitre, "Nunito Sans", system-ui, sans-serif); font-weight: 600; font-size: 16px; color: var(--texte-doux); margin: 0; }

/* ---------- Timbre ---------- */
.tf-timbre { margin: 0; display: inline-flex; flex-direction: column; gap: var(--espace-3); }
.tf-timbre__dents {
  filter: drop-shadow(0 2px 2px rgba(40, 38, 34, 0.14)) drop-shadow(0 7px 12px rgba(40, 38, 34, 0.12));
  rotate: var(--penche, -1.5deg);
}
.tf-timbre__papier {
  background: var(--papier-blanc);
  padding: 14px;
  -webkit-mask:
    linear-gradient(#000 0 0) center / calc(100% - 14px) calc(100% - 14px) no-repeat,
    radial-gradient(circle at 7px 7px, #0000 4.6px, #000 5px) -7px -7px / 14px 14px round;
  mask:
    linear-gradient(#000 0 0) center / calc(100% - 14px) calc(100% - 14px) no-repeat,
    radial-gradient(circle at 7px 7px, #0000 4.6px, #000 5px) -7px -7px / 14px 14px round;
}
.tf-timbre__papier img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tf-timbre figcaption { font-size: 13px; line-height: 1.45; font-style: italic; color: var(--texte-doux); max-width: 26ch; }

/* ---------- Événement ---------- */
.tf-evenement { display: grid; grid-template-columns: 92px 1fr; gap: var(--espace-5); align-items: start; }
.tf-evenement .tf-titre,
.tf-evenement .tf-titre[class*="tf-c-"] { color: var(--ton-encre); }
.tf-evenement:nth-child(even) .tf-evenement__date { rotate: 3deg; }
.tf-evenement__date {
  display: grid;
  place-items: center;
  align-content: center;
  width: 92px;
  height: 92px;
  background: var(--papier-blanc);
  border: 2.5px solid var(--ton-trait);
  border-radius: 58% 42% 51% 49% / 45% 56% 44% 55%;
  rotate: -4deg;
  text-align: center;
}
.tf-evenement__jour { font-family: "Blushes Espace", Blushes, var(--font-titre, Nunito, ui-rounded, sans-serif); font-weight: 900; font-size: 38px; line-height: 0.95; color: var(--ton-encre); }
.tf-evenement__mois { font-family: var(--font-soustitre, "Nunito Sans", system-ui, sans-serif); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre); }
.tf-evenement__lieu { color: var(--texte-doux); margin: var(--espace-1) 0 0; font-size: 15px; }

/* ---------- Appel (phrase manuscrite) ---------- */
.tf-appel { text-align: center; padding: var(--espace-7) var(--espace-6); }
.tf-appel .tf-manuscrit { margin: 0 auto var(--espace-5); max-width: 28ch; }

/* ---------- Champ ---------- */
.tf-champ { display: flex; flex-direction: column; gap: 6px; }
.tf-champ label { font-family: var(--font-soustitre, "Nunito Sans", system-ui, sans-serif); font-weight: 600; font-size: 16px; color: var(--encre); }
.tf-champ input,
.tf-champ textarea,
.tf-champ select {
  font: 400 17px/1.4 var(--font-texte, Nunito, ui-rounded, sans-serif);
  color: var(--texte);
  background: var(--papier-blanc);
  border: 2px solid var(--texte-doux);
  border-radius: 10px 14px 9px 15px / 14px 9px 15px 10px;
  padding: 12px 14px;
}
.tf-champ textarea { min-height: 120px; resize: vertical; }
.tf-champ input::placeholder, .tf-champ textarea::placeholder { color: var(--texte-doux); }
.tf-champ input:focus-visible, .tf-champ textarea:focus-visible, .tf-champ select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--petrole);
}
.tf-champ__aide { font-size: 14px; color: var(--texte-doux); margin: 0; }
.tf-champ--erreur input, .tf-champ--erreur textarea { border-color: var(--corail-fonce); }
.tf-champ--erreur .tf-champ__aide { color: var(--corail-fonce); font-weight: 700; }

/* ---------- Pied de page ---------- */
.tf-pied {
  position: relative;
  background: var(--petrole);
  color: var(--papier-blanc);
  margin-top: var(--hauteur-dechirure);
  padding-block: var(--espace-7) var(--espace-6);
  font-size: 15px;
  line-height: 1.55;
}
.tf-pied::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 2px);
  height: var(--hauteur-dechirure);
  background: var(--petrole);
  -webkit-mask: url("../img/textures/masque-bord.webp") center bottom / 100% 100% no-repeat;
  mask: url("../img/textures/masque-bord.webp") center bottom / 100% 100% no-repeat;
}
.tf-pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--espace-7); }
.tf-pied__logo { width: 112px; height: 112px; display: block; margin-bottom: var(--espace-4); }
.tf-pied h2 { font-family: "Blushes Espace", Blushes, var(--font-titre, Nunito, ui-rounded, sans-serif); font-weight: 900; font-size: 24px; margin: 0 0 var(--espace-3); color: var(--papier-blanc); }
.tf-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
/* Soulignage safran seulement au survol (et au focus clavier) */
.tf-pied a { color: var(--papier-blanc); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color 0.15s ease; }
.tf-pied a:hover,
.tf-pied a:focus-visible { text-decoration-color: var(--safran); }
.tf-pied a:focus-visible { outline: 3px solid var(--papier-blanc); outline-offset: 3px; }
.tf-pied__bas { margin-top: var(--espace-7); padding-top: var(--espace-4); border-top: 1px solid rgba(255, 255, 255, 0.28); color: var(--papier-ombre); font-size: 14px; display: flex; flex-wrap: wrap; gap: var(--espace-4); justify-content: space-between; }

/* ---------- Thématiques (dessins d'enfants en pictogrammes) ---------- */
.tf-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--espace-7) var(--espace-6); list-style: none; margin: 0; padding: 0; text-align: center; }
.tf-theme { display: flex; flex-direction: column; align-items: center; }
.tf-theme__dessin { display: block; height: 120px; width: auto; max-width: 150px; object-fit: contain; margin-bottom: var(--espace-4); rotate: -2deg; }
.tf-theme:nth-child(even) .tf-theme__dessin { rotate: 3deg; }
.tf-theme__titre { font-family: "Blushes Espace", Blushes, var(--font-titre, Nunito, ui-rounded, sans-serif); font-weight: 900; font-size: 26px; line-height: 1.15; margin: 0 0 var(--espace-2); }
.tf-theme p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 26ch; }

/* ---------- Œuvre détourée ---------- */
.tf-oeuvre { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.tf-oeuvre__image { display: block; width: 100%; height: auto; filter: drop-shadow(var(--ombre-detoure)); }
.tf-oeuvre__etiquette { margin-top: calc(var(--espace-5) * -1); padding: var(--espace-3) var(--espace-5) var(--espace-4); text-align: center; max-width: 85%; }
.tf-oeuvre__titre { font-family: "Blushes Espace", Blushes, var(--font-titre, Nunito, ui-rounded, sans-serif); font-weight: 900; font-size: 24px; line-height: 1.15; margin: 0; }
.tf-oeuvre__credit { font-size: 13px; line-height: 1.45; font-style: italic; color: var(--texte-doux); margin: 2px 0 0; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .tf-nav ul { display: none; }
  .tf-nav[data-ouvert] ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: var(--espace-4);
    right: var(--espace-4);
    top: 100%;
    gap: 0;
    padding: var(--espace-4) var(--espace-5);
    background: var(--papier-blanc);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-feuille);
  }
  .tf-nav__bouton { display: inline-flex; }
  .tf-pied__grille { grid-template-columns: 1fr; gap: var(--espace-6); }
}
@media (max-width: 640px) {
  .tf-conteneur { padding-inline: var(--espace-4); }
  .tf-section { padding-block: var(--espace-8); }
  .tf-photo-dechiree { --h: 56px; }
  .titre-hero, .tf-hero__texte .titre-hero { font-size: 44px; }
  .titre-1 { font-size: 38px; }
  .titre-2 { font-size: 32px; }
  .titre-3 { font-size: 26px; }
  .tf-manuscrit { font-size: 22px; }
  .tf-hero__fleur { position: relative; right: auto; bottom: auto; display: block; margin: var(--espace-5) auto 0; width: 200px; }
  .tf-entete__logo img { width: 72px; height: 72px; }
  .tf-titre-section__branche { width: 36px; }
  .tf-evenement { grid-template-columns: 72px 1fr; gap: var(--espace-4); }
  .tf-evenement__date { width: 72px; height: 72px; }
  .tf-evenement__jour { font-size: 30px; }
}