/* ==========================================================================
   STAMPICHRIS – FEUILLE DE STYLE
   --------------------------------------------------------------------------
   Sommaire :
     1.  Variables (couleurs, polices, espacements, arrondis)  ← à modifier ici
     2.  Polices auto-hébergées
     3.  Base (réinitialisation légère, textes, liens, focus)
     4.  Mise en page (conteneurs, sections, grilles)
     5.  Titres manuscrits, coup de pinceau, cadres « couture »
     6.  Boutons
     7.  En-tête et menu
     8.  Accueil
     9.  Cartes : créations, actualités, tuiles, tuto, Bulle Créative
     10. Fiche création et galerie
     10 bis. Liste du matériel d'une création
     11. Inspirations (module de filtres)
     12. Agenda (liste, calendrier, ajout à l'agenda)
     13. Offres, catalogues, équipe, témoignages, FAQ
     14. Formulaires (newsletter, contact)
     15. Vidéos YouTube (chargement au clic)
     16. Recherche (Pagefind)
     17. Pied de page et bandeau cookies
     18. Utilitaires et accessibilité
     19. Mouvement réduit et impression
     20. Espace équipe (pages réservées aux membres)
     21. Fiches techniques (liste, filtres, page d'une fiche)
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES – changez l'apparence du site en un seul endroit
   ========================================================================== */
:root {
  /* --- Couleurs de la marque (d'après les logos) --- */
  --rose-poudre: #F6D6DB;       /* fonds doux, coups de pinceau */
  --rose-pale: #FBEDEF;         /* fonds de sections très légers */
  --rose-bordure: #EBB5C0;      /* pointillés « couture » */
  --framboise: #B84A62;         /* boutons, cœurs, accents */
  --framboise-fonce: #9A3850;   /* texte framboise sur fond rose (contraste AA) */
  --ardoise: #3E4A55;           /* texte principal et titres */
  --ardoise-douce: #5D6873;     /* texte secondaire (contraste AA sur blanc cassé) */
  --blanc-casse: #FDF8F6;       /* fond général */
  --blanc: #FFFFFF;
  --eucalyptus: #8FA89A;        /* feuillages (décoratif uniquement) */
  --eucalyptus-fonce: #4F6A5B;  /* texte vert lisible (contraste AA) */

  /* --- Rôles des couleurs (utilisés partout ci-dessous) --- */
  --couleur-fond: var(--blanc-casse);
  --couleur-texte: var(--ardoise);
  --couleur-texte-doux: var(--ardoise-douce);
  --couleur-accent: var(--framboise);
  --couleur-lien: var(--framboise-fonce);
  --couleur-focus: var(--framboise);

  /* --- Polices --- */
  --police-titres: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
  --police-texte: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Tailles de texte (échelle harmonieuse) --- */
  --texte-petit: 0.875rem;
  --texte-normal: 1.0625rem;
  --texte-chapeau: 1.2rem;
  --titre-3: 1.25rem;
  --titre-2: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --titre-1: clamp(2.5rem, 1.7rem + 3.5vw, 4.25rem);

  /* --- Espacements --- */
  --espace-xs: 0.25rem;
  --espace-s: 0.5rem;
  --espace-m: 1rem;
  --espace-l: 1.5rem;
  --espace-xl: 2.5rem;
  --espace-xxl: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* --- Largeurs --- */
  --largeur-texte: 42rem;
  --largeur-contenu: 72rem;
  --largeur-large: 84rem;

  /* --- Arrondis et ombres --- */
  --arrondi-s: 0.5rem;
  --arrondi-m: 1rem;
  --arrondi-l: 1.75rem;
  --arrondi-bouton: 999px;
  --ombre-douce: 0 0.6rem 1.6rem -0.8rem rgba(62, 74, 85, 0.28);

  /* --- Détails décoratifs --- */
  --pointilles: 2px dashed var(--rose-bordure);
  --image-pinceau: url("../images/deco/pinceau.svg");
  --image-trait: url("../images/deco/trait.svg");
}


/* ==========================================================================
   2. POLICES AUTO-HÉBERGÉES (aucun appel à Google : conforme RGPD)
   Fichiers dans /src/assets/polices/ – licence SIL Open Font License.
   ========================================================================== */
@font-face {
  font-family: "Dancing Script";
  src: url("../polices/dancing-script-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../polices/nunito-variable.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../polices/nunito-variable-italic.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* les ancres ne passent pas sous l'en-tête */
}

body {
  margin: 0;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police-texte);
  font-size: var(--texte-normal);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--espace-m);
  line-height: 1.2;
  color: var(--ardoise);
  text-wrap: balance;
}
h3 { font-size: var(--titre-3); font-weight: 800; }

p, ul, ol, dl, figure, blockquote { margin: 0 0 var(--espace-m); }

a {
  color: var(--couleur-lien);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--framboise); text-decoration-thickness: 2px; }

strong { font-weight: 800; }

/* Focus clavier bien visible sur tout le site */
:focus-visible {
  outline: 3px solid var(--couleur-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
main:focus { outline: none; }

.icone {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.2em;
}


/* ==========================================================================
   4. MISE EN PAGE
   ========================================================================== */
.conteneur {
  width: min(100% - 2.5rem, var(--largeur-contenu));
  margin-inline: auto;
}
.conteneur-large {
  width: min(100% - 2rem, var(--largeur-large));
  margin-inline: auto;
}
.conteneur--etroit { max-width: var(--largeur-texte); }

.section { padding-block: var(--espace-xxl) 0; }
.section:last-child { padding-bottom: var(--espace-xxl); }

/* Section sur fond rose pâle, avec bords en pointillés « couture » */
.section--rose {
  margin-top: var(--espace-xxl);
  padding-block: var(--espace-xxl);
  background: var(--rose-pale);
  border-block: var(--pointilles);
}
.section--rose + .section { padding-top: var(--espace-xxl); }

.entete-page { padding-top: var(--espace-xl); }

.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-s) var(--espace-l);
}

.chapeau {
  font-size: var(--texte-chapeau);
  color: var(--couleur-texte-doux);
  max-width: var(--largeur-texte);
}

/* Grilles automatiques : les colonnes s'adaptent à la largeur d'écran */
.grille-projets,
.grille-actus,
.grille-blocs,
.grille-promos,
.grille-videos,
.grille-temoignages {
  display: grid;
  gap: var(--espace-xl) var(--espace-l);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.grille-projets--compacte { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.grille-videos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* Deux blocs côte à côte (empilés sur téléphone) */
.duo {
  display: grid;
  gap: var(--espace-xl);
  padding-top: var(--espace-xxl);
}
@media (min-width: 52rem) {
  .duo { grid-template-columns: 1fr 1fr; align-items: start; }
}

.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s) var(--espace-l);
  font-weight: 700;
}


/* ==========================================================================
   5. TITRES MANUSCRITS, COUP DE PINCEAU, CADRES « COUTURE »
   L'élément signature du site : l'écriture script posée sur un coup de
   pinceau rose, comme sur les logos.
   ========================================================================== */
.titre-script {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: var(--titre-2);
  line-height: 1.15;
  letter-spacing: 0.005em;
}
.titre-geant { font-size: var(--titre-1); }
.titre-centre { text-align: center; margin-inline: auto; }

/* Coup de pinceau aquarelle derrière le titre */
.titre-pinceau,
.titre-geant {
  display: inline-block;
  position: relative;
  padding: 0.1em 0.45em 0.2em;
  margin-left: -0.45em;
  isolation: isolate;
}
.titre-pinceau::before,
.titre-geant::before {
  content: "";
  position: absolute;
  inset: 12% -2% 4% 0;
  z-index: -1;
  background: var(--image-pinceau) center / 100% 100% no-repeat;
}
.titre-centre.titre-geant { margin-left: auto; }

/* Petit trait avec cœur sous les titres de section centrés */
.section--rose .titre-script.titre-centre::after,
.bloc-newsletter .titre-script::after {
  content: "";
  display: block;
  width: 9rem;
  height: 1.1rem;
  margin: 0.4rem auto 0;
  background: var(--image-trait) center / contain no-repeat;
}
.bloc-newsletter .titre-script::after { margin-left: 0; }

.sous-titre {
  font-size: var(--titre-3);
  font-weight: 800;
  margin-top: var(--espace-l);
}

/* Cadre rond en pointillés, comme les badges */
.cadre-couture {
  position: relative;
  border-radius: 50%;
  padding: 0.7rem;
  background: var(--blanc);
  border: 6px solid var(--rose-poudre);
  box-shadow: inset 0 0 0 4px var(--blanc), inset 0 0 0 6px var(--rose-bordure);
}
.cadre-couture::after {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border-radius: 50%;
  border: var(--pointilles);
  pointer-events: none;
}
.cadre-couture img { border-radius: 50%; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Variante rectangulaire (formulaires, encarts) */
.cadre-couture-carre {
  background: var(--blanc);
  border-radius: var(--arrondi-l);
  padding: var(--espace-xl) var(--espace-l);
  outline: var(--pointilles);
  outline-offset: -0.6rem;
}

/* Liste à puces en forme de petits cœurs */
.liste-coeurs { list-style: none; padding: 0; }
.liste-coeurs li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--espace-s);
}
.liste-coeurs li::before {
  content: "♥";
  position: absolute;
  left: 0.2rem;
  top: 0;
  color: var(--framboise);
  font-size: 0.9em;
}

/* Pastilles (niveau, complet…) */
.pastille {
  display: inline-block;
  padding: 0.05rem 0.6rem;
  border-radius: var(--arrondi-bouton);
  font-size: var(--texte-petit);
  font-weight: 700;
  background: var(--rose-pale);
  color: var(--framboise-fonce);
  vertical-align: 0.1em;
}
.pastille--debutant { background: #E7EFEA; color: var(--eucalyptus-fonce); }
.pastille--intermediaire { background: var(--rose-pale); color: var(--framboise-fonce); }
.pastille--avance { background: #E8EAEE; color: var(--ardoise); }
.pastille--complet { background: var(--ardoise); color: var(--blanc); }


/* ==========================================================================
   6. BOUTONS
   ========================================================================== */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.9rem;
  padding: 0.6rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--arrondi-bouton);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.bouton:hover { text-decoration: none; }
.bouton--petit { min-height: 2.4rem; padding: 0.35rem 1rem; font-size: 0.95rem; }

/* Bouton principal : ardoise */
.bouton--principal { background: var(--ardoise); color: var(--blanc); }
.bouton--principal:hover { background: #2C353D; color: var(--blanc); }

/* Bouton COMMANDER : framboise, toujours très visible */
.bouton--commander {
  background: var(--framboise);
  color: var(--blanc);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bouton--commander:hover { background: var(--framboise-fonce); color: var(--blanc); }

/* Bouton discret à contour */
.bouton--contour { background: var(--blanc); color: var(--ardoise); border-color: var(--rose-bordure); }
.bouton--contour:hover { border-color: var(--framboise); color: var(--framboise-fonce); }

.lien-souligne {
  font-weight: 800;
  color: var(--framboise-fonce);
  text-decoration: underline;
  text-decoration-color: var(--rose-bordure);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}
.lien-souligne:hover { text-decoration-color: var(--framboise); }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-m) var(--espace-l);
  margin-block: var(--espace-l);
}
.groupe-boutons--centre { justify-content: center; }


/* ==========================================================================
   7. EN-TÊTE ET MENU
   ========================================================================== */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 248, 246, 0.96);
  border-bottom: var(--pointilles);
}
@supports (backdrop-filter: blur(6px)) {
  .entete { background: rgba(253, 248, 246, 0.86); backdrop-filter: blur(6px); }
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
  padding-block: var(--espace-s);
}
.entete__logo img { width: clamp(7.5rem, 5rem + 8vw, 11rem); height: auto; }

.entete__actions { display: flex; align-items: center; gap: var(--espace-s); }

/* Recherche rapide : visible sur grand écran */
.recherche-rapide {
  display: none;
  align-items: center;
  border: 2px solid var(--rose-poudre);
  border-radius: var(--arrondi-bouton);
  background: var(--blanc);
  padding-left: 0.9rem;
}
.recherche-rapide input {
  width: 10rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.35rem 0;
}
.recherche-rapide input:focus { outline: none; }
.recherche-rapide:focus-within { border-color: var(--framboise); }
.recherche-rapide__bouton {
  border: 0;
  background: none;
  color: var(--ardoise);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  border-radius: var(--arrondi-bouton);
}

/* Sur téléphone, « Newsletter » devient une icône pour laisser la place à COMMANDER */
.texte-large { display: none; }

.entete__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--rose-poudre);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--ardoise);
  cursor: pointer;
}
.entete__burger-fermer { display: none; }
.entete__burger[aria-expanded="true"] .entete__burger-ouvrir { display: none; }
.entete__burger[aria-expanded="true"] .entete__burger-fermer { display: inline; }

/* Menu : tiroir déroulant sur téléphone */
.menu { display: none; border-top: var(--pointilles); }
.menu.est-ouvert { display: block; }
.menu__liste {
  list-style: none;
  margin-block: 0;
  padding: var(--espace-s) 0 var(--espace-l);
}
.menu__lien {
  display: block;
  padding: 0.7rem 0.25rem;
  color: var(--ardoise);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--rose-pale);
}
.menu__lien[aria-current="page"] { color: var(--framboise-fonce); }
.menu__lien[aria-current="page"]::before { content: "♥ "; color: var(--framboise); }

.recherche-menu {
  display: flex;
  gap: var(--espace-s);
  margin-top: var(--espace-m);
}
.recherche-menu input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 0.5rem 1rem;
  border: 2px solid var(--rose-poudre);
  border-radius: var(--arrondi-bouton);
  background: var(--blanc);
}

@media (min-width: 30rem) {
  .texte-large { display: inline; }
  .texte-mobile { display: none; }
}

/* Grand écran : menu horizontal toujours visible */
@media (min-width: 64rem) {
  .recherche-rapide { display: flex; }
  .entete__burger { display: none; }
  .menu { display: block; }
  .menu__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--espace-l);
    padding: 0.2rem 0 0.4rem;
  }
  .menu__lien { border: 0; padding: 0.35rem 0.1rem; font-size: 0.98rem; }
  .menu__lien:hover { color: var(--framboise-fonce); }
  .menu__mobile-seul { display: none; }
}


/* ==========================================================================
   8. ACCUEIL (et pages avec grand portrait : À propos, Équipe)
   ========================================================================== */
.accueil-bienvenue {
  padding-block: var(--espace-xl) 0;
  overflow: hidden;
}
.accueil-bienvenue__interieur {
  display: grid;
  gap: var(--espace-xl);
  align-items: center;
}
.accueil-bienvenue__photo {
  width: min(80vw, 26rem);
  margin-inline: auto;
}
.accueil-bienvenue__photo img { width: 100%; }
/* Titre « Bienvenue chez StampiChris » sur une seule ligne, sur le rose */
.titre-une-ligne {
  white-space: nowrap;
  font-size: clamp(1.6rem, 0.6rem + 4.2vw, 3.6rem);
}
@media (min-width: 52rem) {
  .titre-une-ligne { font-size: clamp(2rem, 0.4rem + 2.6vw, 3.6rem); }
}
.accueil-bienvenue__texte .chapeau + .chapeau { margin-top: var(--espace-m); }
.devise {
  font-family: var(--police-titres);
  font-size: 1.6rem;
  color: var(--framboise-fonce);
  margin-top: var(--espace-l);
}
@media (min-width: 52rem) {
  .accueil-bienvenue__interieur { grid-template-columns: 5fr 7fr; }
  .accueil-bienvenue__photo { width: 100%; max-width: 28rem; }
}


/* ==========================================================================
   9. CARTES
   ========================================================================== */

/* --- Carte d'une création --- */
.carte-projet__lien {
  display: block;
  color: inherit;
  text-decoration: none;
}
.carte-projet__image {
  overflow: hidden;
  border-radius: var(--arrondi-m);
  background: var(--rose-pale);
  aspect-ratio: 4 / 3;
}
.carte-projet__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.carte-projet__lien:hover img { transform: scale(1.03); }
.carte-projet__texte { padding-top: var(--espace-m); }
.carte-projet__type {
  margin: 0 0 0.2rem;
  font-size: var(--texte-petit);
  font-weight: 700;
  color: var(--couleur-texte-doux);
}
.carte-projet__titre { font-size: 1.15rem; margin-bottom: 0.2rem; }
.carte-projet__lien:hover .carte-projet__titre { color: var(--framboise-fonce); }
.carte-projet__tuto {
  margin: 0;
  font-size: var(--texte-petit);
  font-weight: 700;
  color: var(--eucalyptus-fonce);
}
.carte-projet.est-masque { display: none; }

/* --- Carte « En ce moment » --- */
.carte-actu {
  background: var(--blanc);
  border-radius: var(--arrondi-m);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  display: flex;
  flex-direction: column;
}
.carte-actu img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-actu__texte { padding: var(--espace-l); }
.carte-actu h3 { font-size: 1.15rem; }

/* --- Tuiles rondes « Qu'avez-vous envie de créer ? » --- */
.tuiles {
  list-style: none;
  padding: 0;
  margin: var(--espace-xl) 0 0;
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 40rem) { .tuiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .tuiles { grid-template-columns: repeat(6, 1fr); } }
.tuile a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-s);
  text-decoration: none;
  color: var(--ardoise);
}
.tuile img {
  width: 100%;
  border-radius: 50%;
  transition: transform 0.25s ease;
}
.tuile a:hover img { transform: rotate(-4deg) scale(1.03); }
.tuile__titre { font-weight: 800; }
.tuile a:hover .tuile__titre { color: var(--framboise-fonce); }

/* --- Dernier tuto --- */
.carte-tuto__lien {
  display: block;
  position: relative;
  border-radius: var(--arrondi-m);
  overflow: hidden;
  margin-bottom: var(--espace-m);
}
.carte-tuto__lien img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carte-tuto__titre {
  position: absolute;
  left: var(--espace-m);
  bottom: var(--espace-m);
  right: var(--espace-m);
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--arrondi-s);
  color: var(--ardoise);
  font-weight: 800;
}
.carte-tuto__format { font-weight: 700; color: var(--eucalyptus-fonce); }

/* --- La Bulle Créative --- */
.bulle {
  background: var(--rose-pale);
  border-radius: var(--arrondi-l);
  padding: var(--espace-xl) var(--espace-l);
  text-align: center;
}
.bulle__badge { width: min(12rem, 60%); margin: 0 auto var(--espace-m); border-radius: 50%; }
.bulle__horaire {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  color: var(--framboise-fonce);
}
.bulle .groupe-boutons { justify-content: center; }
.bulle--large { background: none; padding: 0; text-align: left; display: grid; gap: var(--espace-xl); align-items: center; }
.bulle--large .bulle__badge { width: min(18rem, 70%); margin: 0 auto; }
@media (min-width: 52rem) { .bulle--large { grid-template-columns: 2fr 3fr; } }

/* --- Blocs de texte simples --- */
.bloc-note {
  background: var(--blanc);
  border-radius: var(--arrondi-m);
  padding: var(--espace-l);
  border: 1px solid var(--rose-poudre);
}
.bloc-note--large { padding: var(--espace-xl); }
.bloc-note__coeur { color: var(--framboise); width: 1.6rem; height: 1.6rem; margin-bottom: var(--espace-s); }

.message-vide {
  padding: var(--espace-l);
  border-radius: var(--arrondi-m);
  background: var(--rose-pale);
  text-align: center;
}
.compteur { font-weight: 700; color: var(--couleur-texte-doux); }


/* ==========================================================================
   10. FICHE CRÉATION ET GALERIE
   ========================================================================== */
.fil-ariane { padding-top: var(--espace-l); font-size: var(--texte-petit); }
.fil-ariane ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fil-ariane li:not(:last-child)::after { content: "/"; margin-left: 0.3rem; color: var(--rose-bordure); }
.fil-ariane [aria-current] { color: var(--couleur-texte-doux); }

.fiche {
  display: grid;
  gap: var(--espace-xl);
  padding-top: var(--espace-l);
}
@media (min-width: 56rem) {
  .fiche { grid-template-columns: 1fr 1fr; align-items: start; }
  .fiche__galerie { position: sticky; top: 7rem; }
}
.fiche__type { font-weight: 700; color: var(--couleur-texte-doux); margin-bottom: var(--espace-s); }
.fiche__infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--espace-m);
  padding: var(--espace-l);
  background: var(--rose-pale);
  border-radius: var(--arrondi-m);
}
.fiche__infos dt { font-size: var(--texte-petit); font-weight: 700; color: var(--couleur-texte-doux); }
.fiche__infos dd { margin: 0; font-weight: 700; }
.fiche__actions { display: flex; flex-wrap: wrap; gap: var(--espace-m); margin-top: var(--espace-l); }

/* Catalogues liés à une création : une ligne entière, un badge par catalogue */
.fiche__infos-large { grid-column: 1 / -1; }
.badges-catalogues {
  list-style: none;
  padding: 0;
  margin: var(--espace-xs) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s);
}
.badge-catalogue {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.4rem;
  padding: 0.3rem 0.85rem;
  border: 2px solid var(--rose-bordure);
  border-radius: var(--arrondi-bouton);
  background: var(--blanc);
  color: var(--framboise-fonce);
  font-size: var(--texte-petit);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
a.badge-catalogue:hover { background: var(--rose-poudre); border-color: var(--framboise); }
.badge-catalogue .icone { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.badge-catalogue__periode { font-weight: 400; color: var(--couleur-texte-doux); }
.badge-catalogue__periode::before { content: "· "; }
/* Catalogue terminé (plus « Actif ») : badge grisé, sans lien */
.badge-catalogue--termine { border-style: dashed; border-color: #CDD2D7; color: var(--couleur-texte-doux); }

.galerie__principale { margin: 0; border-radius: var(--arrondi-l); overflow: hidden; background: var(--rose-pale); }
.galerie__principale img { width: 100%; }
.galerie__miniatures { list-style: none; padding: 0; margin: var(--espace-m) 0 0; display: flex; flex-wrap: wrap; gap: var(--espace-s); }
.galerie__miniature {
  padding: 0;
  border: 3px solid transparent;
  border-radius: var(--arrondi-s);
  background: none;
  cursor: pointer;
  overflow: hidden;
  width: 5.5rem;
}
.galerie__miniature[aria-pressed="true"] { border-color: var(--framboise); }
.galerie__miniature img { aspect-ratio: 1; object-fit: cover; width: 100%; }

.texte-riche > :last-child { margin-bottom: 0; }
.texte-riche p { max-width: var(--largeur-texte); }

.recit__partie { margin-bottom: var(--espace-xl); }


/* ==========================================================================
   10 bis. LISTE DU MATÉRIEL d'une création (« la liste des courses »)
   Une grille de petites cartes : image, nom, [numéro], quantité, prix.
   ========================================================================== */
.materiel__intro { max-width: var(--largeur-texte); color: var(--couleur-texte-doux); }

.materiel__grille {
  list-style: none;
  padding: 0;
  margin: var(--espace-l) 0 0;
  display: grid;
  /* 2 cartes par ligne sur téléphone, jusqu'à 6 sur grand écran */
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 45%), 1fr));
  gap: var(--espace-m);
}

.materiel__produit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: var(--espace-m);
  text-align: center;
  background: var(--blanc);
  border: var(--pointilles);
  border-radius: var(--arrondi-m);
}

/* Image carrée, le produit entier reste visible */
.materiel__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: var(--espace-s);
  border-radius: var(--arrondi-s);
  background: var(--blanc);
  overflow: hidden;
}
.materiel__image img { width: 100%; height: 100%; object-fit: contain; }
.materiel__sans-image { color: var(--rose-bordure); }
.materiel__sans-image svg { width: 2.5rem; height: 2.5rem; }

.materiel__nom { font-weight: 700; line-height: 1.3; color: var(--couleur-lien); }
.materiel__numero { font-size: var(--texte-petit); color: var(--couleur-texte-doux); }
.materiel__quantite {
  margin-top: 0.2rem;
  padding: 0.05rem 0.6rem;
  border-radius: var(--arrondi-bouton);
  background: var(--rose-pale);
  color: var(--framboise-fonce);
  font-size: var(--texte-petit);
  font-weight: 700;
}
.materiel__prix { margin-top: auto; padding-top: 0.3rem; font-weight: 800; }

.materiel__actions { display: flex; flex-wrap: wrap; gap: var(--espace-m); margin-top: var(--espace-l); }
.materiel__message { min-height: 1.5em; margin-top: var(--espace-s); font-weight: 700; color: var(--eucalyptus-fonce); }


/* ==========================================================================
   11. INSPIRATIONS – module « Trouve ton inspiration »
   ========================================================================== */
.module-inspiration { margin-top: var(--espace-xl); }
.module-inspiration__champs {
  display: grid;
  gap: var(--espace-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}


/* ==========================================================================
   12. AGENDA
   ========================================================================== */
.liste-evenements { display: grid; gap: var(--espace-l); margin-block: var(--espace-l); }

.evenement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espace-l);
  padding: var(--espace-l);
  background: var(--blanc);
  border-radius: var(--arrondi-m);
  border: 1px solid var(--rose-poudre);
}
.evenement.est-masque,
.evenement.est-filtre { display: none; } /* est-masque = passé, est-filtre = masqué par un filtre */

/* Pastille de date ronde, en pointillés comme les badges */
.evenement__date {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: var(--rose-pale);
  outline: var(--pointilles);
  outline-offset: -0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.evenement__jour { font-family: var(--police-titres); font-weight: 700; font-size: 1.9rem; color: var(--framboise-fonce); }
.evenement__mois { font-size: var(--texte-petit); font-weight: 800; }
.evenement__type { margin: 0 0 0.1rem; font-size: var(--texte-petit); font-weight: 700; color: var(--eucalyptus-fonce); }
.evenement__titre { font-size: 1.2rem; margin-bottom: var(--espace-s); }
.evenement__infos { list-style: none; padding: 0; margin: 0 0 var(--espace-s); font-size: 0.97rem; }
.evenement__infos li { display: flex; gap: 0.5rem; align-items: baseline; }
.evenement__infos .icone { color: var(--framboise); vertical-align: -0.15em; }
.evenement__actions { display: flex; flex-wrap: wrap; gap: var(--espace-s); align-items: flex-start; margin-top: var(--espace-m); }
.evenement--complet .evenement__date { background: #ECEEF0; }
@media (max-width: 30rem) {
  .evenement { grid-template-columns: 1fr; }
}

/* Menu « Ajouter à mon agenda » */
.ajout-agenda { position: relative; }
.ajout-agenda summary { list-style: none; }
.ajout-agenda summary::-webkit-details-marker { display: none; }
.ajout-agenda__liste {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.3rem);
  left: 0;
  min-width: 15rem;
  list-style: none;
  margin: 0;
  padding: var(--espace-s);
  background: var(--blanc);
  border: 1px solid var(--rose-bordure);
  border-radius: var(--arrondi-m);
  box-shadow: var(--ombre-douce);
}
.ajout-agenda__liste a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--arrondi-s); text-decoration: none; font-weight: 700; }
.ajout-agenda__liste a:hover { background: var(--rose-pale); }

.abonnement {
  display: grid;
  gap: var(--espace-m);
  margin-top: var(--espace-xl);
}
@media (min-width: 52rem) { .abonnement { grid-template-columns: 1fr auto; align-items: center; } }
.abonnement .sous-titre { margin-top: 0; }
.abonnement .groupe-boutons { margin: 0; }

/* Filtres et choix de la vue */
.outils-agenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-m);
}
.filtres-types, .choix-vue { display: flex; flex-wrap: wrap; gap: var(--espace-s); }
.filtre {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.95rem;
  border: 2px solid var(--rose-poudre);
  border-radius: var(--arrondi-bouton);
  background: var(--blanc);
  color: var(--ardoise);
  font: inherit;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
}
.filtre[aria-pressed="true"] { background: var(--ardoise); border-color: var(--ardoise); color: var(--blanc); }

/* Vue calendrier mensuel */
.calendrier { margin-block: var(--espace-l); }
.calendrier__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-m); margin-bottom: var(--espace-m); }
.calendrier__mois { font-family: var(--police-titres); font-size: 2rem; margin: 0; text-transform: capitalize; }
.calendrier__grille { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.calendrier__grille th { font-size: var(--texte-petit); font-weight: 800; padding: 0.3rem; }
.calendrier__grille td {
  vertical-align: top;
  height: 5.5rem;
  padding: 0.3rem;
  background: var(--blanc);
  border-radius: var(--arrondi-s);
  font-size: var(--texte-petit);
}
.calendrier__grille td.hors-mois { background: transparent; color: var(--couleur-texte-doux); }
.calendrier__grille td.aujourdhui { outline: 2px solid var(--framboise); }
.calendrier__numero { font-weight: 800; display: block; }
.calendrier__evt {
  display: block;
  margin-top: 0.2rem;
  padding: 0.1rem 0.3rem;
  border-radius: 0.3rem;
  background: var(--rose-poudre);
  color: var(--ardoise);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendrier__evt:hover { background: var(--framboise); color: var(--blanc); }
@media (max-width: 40rem) {
  .calendrier__grille td { height: 3.6rem; }
  .calendrier__evt { font-size: 0; height: 0.55rem; padding: 0; } /* sur téléphone : un simple repère coloré */
}

.evenements-passes { margin-top: var(--espace-xl); }
.evenements-passes summary { cursor: pointer; font-weight: 800; }
.evenements-passes .evenement { opacity: 0.75; }
.evenements-passes .ajout-agenda,
.evenements-passes .evenement__actions { display: none; }


/* ==========================================================================
   13. OFFRES, CATALOGUES, ÉQUIPE, TÉMOIGNAGES, FAQ
   ========================================================================== */
.promo {
  display: grid;
  gap: var(--espace-m);
  background: var(--blanc);
  border-radius: var(--arrondi-m);
  padding: var(--espace-l);
  border: 1px solid var(--rose-poudre);
}
.promo img { border-radius: var(--arrondi-s); width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.promo__dates { font-size: var(--texte-petit); font-weight: 700; color: var(--couleur-texte-doux); }

.offre { display: grid; gap: var(--espace-xl); align-items: center; }
@media (min-width: 52rem) { .offre { grid-template-columns: auto 1fr auto; } }
.offre__seuil {
  width: 9rem;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-inline: auto;
}
.offre__seuil span { font-family: var(--police-titres); font-size: 1.5rem; }
.offre__seuil strong { font-size: 2.2rem; color: var(--framboise-fonce); }
.offre__apercus { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-s); max-width: 26rem; }
.offre__apercus img, .offre__photo { border-radius: var(--arrondi-m); }
.offre__photo { max-width: 22rem; }

.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: var(--espace-xl) 0;
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.etape { counter-increment: etape; position: relative; padding-top: 3.4rem; }
.etape::before {
  content: counter(etape);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--police-titres);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blanc);
  background: var(--framboise);
}

.catalogue {
  display: grid;
  gap: var(--espace-xl);
}
@media (min-width: 52rem) {
  .catalogue { grid-template-columns: 18rem 1fr; }
  .catalogue__creations { grid-column: 1 / -1; }
}
.catalogue__couverture img { border-radius: var(--arrondi-s); box-shadow: var(--ombre-douce); }
/* Période du catalogue (ex. « Septembre 2026 – Janvier 2027 ») */
.catalogue__periode { margin-top: calc(-1 * var(--espace-s)); font-weight: 700; color: var(--couleur-texte-doux); }

.galerie-equipe { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-s); }
.galerie-equipe img { border-radius: var(--arrondi-m); aspect-ratio: 1; object-fit: cover; width: 100%; }

.temoignage {
  margin: 0;
  background: var(--blanc);
  border-radius: var(--arrondi-l);
  padding: var(--espace-xl) var(--espace-l) var(--espace-l);
  position: relative;
}
.temoignage::before {
  content: "“";
  position: absolute;
  top: -0.3rem;
  left: 1rem;
  font-family: var(--police-titres);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--framboise);
}
.temoignage blockquote { margin: 0 0 var(--espace-m); font-size: 1.08rem; }
.temoignage img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; margin-bottom: var(--espace-s); }

.faq { border-top: var(--pointilles); }
.faq__item { border-bottom: var(--pointilles); }
.faq__question {
  cursor: pointer;
  padding: var(--espace-m) 2rem var(--espace-m) 0;
  font-weight: 800;
  position: relative;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--framboise);
}
.faq__item[open] .faq__question::after { content: "–"; }
.faq__reponse { padding-bottom: var(--espace-m); }

.reseaux { list-style: none; padding: 0; margin: var(--espace-m) 0 0; display: flex; gap: var(--espace-s); }
.reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--arrondi-bouton);
  background: var(--blanc);
  border: 2px solid var(--rose-poudre);
  color: var(--ardoise);
  text-decoration: none;
  font-weight: 700;
}
.reseaux--grands a { padding: 0 1.1rem; }
.reseaux a:hover { border-color: var(--framboise); color: var(--framboise-fonce); }


/* ==========================================================================
   14. FORMULAIRES
   ========================================================================== */
.formulaire { display: grid; gap: var(--espace-m); }
.formulaire__ligne { display: grid; gap: var(--espace-m); }
@media (min-width: 36rem) { .formulaire__ligne { grid-template-columns: 1fr 1fr; } }

.champ { display: grid; gap: 0.3rem; }
.champ label { font-weight: 700; font-size: 0.95rem; }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  font: inherit;
  color: var(--ardoise);
  padding: 0.65rem 0.9rem;
  border: 2px solid var(--rose-bordure);
  border-radius: var(--arrondi-s);
  background: var(--blanc);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus { outline: none; border-color: var(--framboise); box-shadow: 0 0 0 3px var(--rose-poudre); }

.champ--case { grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; }
.champ--case input { width: 1.3rem; height: 1.3rem; margin-top: 0.2rem; accent-color: var(--framboise); }
.champ--case label { font-weight: 400; font-size: var(--texte-petit); }

/* Piège à robots : caché aux humains, présent pour les robots */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulaire__message:empty { display: none; }
.formulaire__message {
  margin: 0;
  padding: var(--espace-m);
  border-radius: var(--arrondi-s);
  background: #E7EFEA;
  color: var(--eucalyptus-fonce);
  font-weight: 700;
}
.formulaire__message.est-erreur { background: var(--rose-pale); color: var(--framboise-fonce); }

.carte-formulaire { margin-block: var(--espace-xl); }

/* Bloc newsletter en bas de page */
.bloc-newsletter {
  margin-top: var(--espace-xxl);
  padding-block: var(--espace-xxl);
  background: var(--rose-poudre);
}
.bloc-newsletter__interieur { display: grid; gap: var(--espace-xl); }
@media (min-width: 56rem) { .bloc-newsletter__interieur { grid-template-columns: 2fr 3fr; align-items: center; } }
.bloc-newsletter a { color: var(--ardoise); }
.bloc-newsletter .champ input { border-color: var(--blanc); }


/* ==========================================================================
   15. VIDÉOS YOUTUBE (rien n'est chargé avant le clic)
   ========================================================================== */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--arrondi-m);
  overflow: hidden;
  background: var(--ardoise);
  margin-bottom: var(--espace-m);
}
.video__vignette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.video__bouton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  background: rgba(62, 74, 85, 0.35);
  color: var(--blanc);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.video__icone { width: 4rem; height: 4rem; }
.video__bouton:hover .video__icone { color: var(--rose-poudre); }
.video__note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  background: rgba(62, 74, 85, 0.85);
  color: var(--blanc);
}
.video__note a { color: var(--blanc); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.replay h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }


/* ==========================================================================
   16. RECHERCHE (Pagefind) – on habille l'outil aux couleurs du site
   ========================================================================== */
.zone-recherche {
  --pagefind-ui-primary: var(--framboise);
  --pagefind-ui-text: var(--ardoise);
  --pagefind-ui-background: var(--blanc);
  --pagefind-ui-border: var(--rose-bordure);
  --pagefind-ui-tag: var(--rose-pale);
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 12px;
  --pagefind-ui-font: var(--police-texte);
  margin-block: var(--espace-xl);
}
/* Champ et bouton « Effacer » aux polices du site */
.zone-recherche input,
.zone-recherche button { font-family: var(--police-texte); }
.zone-recherche .pagefind-ui__search-clear {
  color: var(--framboise);
  font-weight: 700;
  background: transparent;
  border: 0;
}


/* ==========================================================================
   17. PIED DE PAGE ET BANDEAU COOKIES
   ========================================================================== */
.pied {
  background: var(--ardoise);
  color: #EEF0F2;
  padding-top: var(--espace-xxl);
  font-size: 0.97rem;
}
.bloc-newsletter + .pied { margin-top: 0; }
.pied a { color: #FFFFFF; }
.pied__grille { display: grid; gap: var(--espace-xl); padding-bottom: var(--espace-xl); }
@media (min-width: 52rem) { .pied__grille { grid-template-columns: 2fr 1fr 1fr; } }
.pied__marque img { width: 12rem; border-radius: var(--arrondi-m); margin-bottom: var(--espace-m); }
.pied__slogan { font-family: var(--police-titres); font-size: 1.5rem; }
.pied__titre { font-size: 1.05rem; font-weight: 800; color: var(--blanc); }
.pied__colonne ul { list-style: none; padding: 0; }
.pied__colonne li { margin-bottom: 0.35rem; }
.pied .reseaux a { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, 0.4); }
.pied__legal { border-top: 1px dashed rgba(255, 255, 255, 0.3); padding-block: var(--espace-l); font-size: var(--texte-petit); }
.pied__mention { max-width: 52rem; color: #D5D9DD; }
.pied__liens-legaux { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espace-s) var(--espace-l); margin: 0; }

.bandeau-cookies {
  position: fixed;
  z-index: 100;
  left: var(--espace-m);
  right: var(--espace-m);
  bottom: var(--espace-m);
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--espace-l);
  background: var(--blanc);
  border-radius: var(--arrondi-m);
  box-shadow: 0 1rem 3rem -1rem rgba(62, 74, 85, 0.45);
  outline: var(--pointilles);
  outline-offset: -0.45rem;
  font-size: 0.95rem;
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies__boutons { display: flex; flex-wrap: wrap; gap: var(--espace-s); justify-content: flex-end; }
.choix-cookies { margin-top: var(--espace-l); }


/* ==========================================================================
   18. UTILITAIRES ET ACCESSIBILITÉ
   ========================================================================== */
/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lien « Aller au contenu » : visible seulement au clavier */
.lien-evitement {
  position: absolute;
  top: -10rem;
  left: var(--espace-m);
  z-index: 200;
  padding: var(--espace-s) var(--espace-m);
  background: var(--ardoise);
  color: var(--blanc);
  border-radius: var(--arrondi-s);
}
.lien-evitement:focus { top: var(--espace-m); }

[hidden] { display: none !important; }


/* ==========================================================================
   19. MOUVEMENT RÉDUIT ET IMPRESSION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .entete, .pied, .bloc-newsletter, .bandeau-cookies, .evenement__actions, .video { display: none !important; }
  body { background: #FFFFFF; }
}


/* ==========================================================================
   20. ESPACE ÉQUIPE (pages réservées aux membres)
   --------------------------------------------------------------------------
   Tout reprend les variables du site (section 1) : mêmes couleurs, mêmes
   polices, mêmes arrondis. Rien n'est dupliqué ici.
   ========================================================================== */

/* --- Bandeau sous l'en-tête : « Espace P'tits Past'elles » + déconnexion --- */
.espace-bandeau {
  background: var(--rose-pale);
  border-bottom: var(--pointilles);
}
.espace-bandeau__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-s) var(--espace-m);
  padding-block: var(--espace-s);
}
.espace-bandeau__marque {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-s);
  text-decoration: none;
  color: var(--framboise-fonce);
}
.espace-bandeau__badge {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--blanc);
  box-shadow: 0 0 0 2px var(--rose-bordure);
}
.espace-bandeau__nom {
  font-family: var(--police-titres);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}
.espace-bandeau__prive { background: var(--blanc); }
.espace-bandeau__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-s) var(--espace-m);
  font-size: var(--texte-petit);
  color: var(--couleur-texte-doux);
}
.espace-bandeau__actions form { margin: 0; }
.espace-bandeau__bonjour strong { color: var(--ardoise); }
@media (max-width: 40rem) {
  .espace-bandeau__prive,
  .espace-bandeau__bonjour { display: none; }
  .espace-bandeau__nom { font-size: 1.4rem; }
}

/* --- Bulles « teckels » (petits mots des mascottes) --- */
.espace-bulle {
  display: inline-block;
  background: var(--blanc);
  border-radius: var(--arrondi-m);
  padding: 0.35rem 0.9rem 0.5rem;
  outline: var(--pointilles);
  outline-offset: -0.3rem;
  font-family: var(--police-titres);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--framboise-fonce);
}
.espace-bulle-teckels {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  margin: 0;
}
.espace-bulle-teckels img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--blanc);
  box-shadow: 0 0 0 2px var(--rose-bordure);
}

/* --- Page de connexion --- */
.espace-connexion__interieur {
  display: grid;
  gap: var(--espace-xl);
  align-items: center;
  padding-top: var(--espace-l);
}
@media (min-width: 56rem) {
  .espace-connexion__interieur { grid-template-columns: 5fr 7fr; }
}
.espace-connexion__image {
  position: relative;
  width: min(100%, 26rem);
  margin-inline: auto;
}
.espace-connexion__image img { border-radius: 50%; }
.espace-bulle--badge {
  position: absolute;
  top: 0.5rem;
  right: -0.5rem;
  transform: rotate(3deg);
  box-shadow: var(--ombre-douce);
}
.espace-connexion__carte .pastille { margin-bottom: var(--espace-s); }
.espace-connexion__carte h1 { margin-bottom: var(--espace-s); }
.espace-connexion__bouton { width: 100%; }
.espace-connexion__oubli {
  margin: var(--espace-m) 0 0;
  font-size: var(--texte-petit);
  color: var(--couleur-texte-doux);
}
.espace-connexion__separateur {
  width: 9rem;
  height: 1.1rem;
  margin: var(--espace-l) auto var(--espace-m);
  background: var(--image-trait) center / contain no-repeat;
}
.espace-connexion__pied { text-align: center; margin-bottom: var(--espace-s); }
.espace-connexion__pied--discret {
  font-size: var(--texte-petit);
  color: var(--couleur-texte-doux);
}
.espace-connexion__apercu { margin-top: var(--espace-xxl); }
.espace-connexion__apercu h2 { margin-bottom: var(--espace-l); }
.espace-connexion__atout {
  display: flex;
  gap: var(--espace-m);
  align-items: flex-start;
}
.espace-connexion__atout h3 { margin-bottom: 0.1rem; font-size: 1.05rem; }
.espace-connexion__atout p { margin: 0; font-size: var(--texte-petit); color: var(--couleur-texte-doux); }
.champ__aide {
  margin: 0;
  font-size: var(--texte-petit);
  color: var(--couleur-texte-doux);
}

/* --- Vignettes des rubriques --- */
.vignettes {
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  margin-bottom: var(--espace-xl);
}
.vignette {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
  padding: var(--espace-l);
  background: var(--blanc);
  border: 1px solid var(--rose-poudre);
  border-radius: var(--arrondi-m);
  color: var(--ardoise);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.vignette:hover {
  border-color: var(--framboise);
  color: var(--ardoise);
  transform: translateY(-2px);
}
.vignette__haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.vignette__icone {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rose-pale);
  outline: var(--pointilles);
  outline-offset: -0.3rem;
  color: var(--framboise);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vignette__icone .icone { width: 1.6rem; height: 1.6rem; }
.vignette__image {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--blanc);
  box-shadow: 0 0 0 2px var(--rose-bordure);
}
.vignette__fleche {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 2px solid var(--rose-poudre);
  color: var(--framboise-fonce);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vignette__fleche .icone { width: 1rem; height: 1rem; }
.vignette__titre { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.vignette__phrase { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--couleur-texte-doux); }
.vignette__etiquettes { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Vignette en ligne (icône à gauche, texte à droite) */
.vignette--ligne { flex-direction: row; align-items: center; gap: var(--espace-m); }
.vignette--ligne .vignette__texte { display: flex; flex-direction: column; flex-grow: 1; }
.vignette--ligne .vignette__texte strong { font-size: 1.05rem; line-height: 1.3; }
.vignette--ligne .vignette__texte span { font-size: 0.95rem; color: var(--couleur-texte-doux); }
.vignette__chevron { color: var(--framboise-fonce); display: flex; }
.vignettes--compactes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* --- Intertitres des familles --- */
.espace-famille {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-s) var(--espace-m);
  margin: var(--espace-xl) 0 var(--espace-m);
}
.espace-famille__titre { margin: 0; font-size: 1.9rem; }
.espace-famille__phrase { margin: 0; font-size: var(--texte-petit); color: var(--couleur-texte-doux); }
.espace-famille__trait { flex-grow: 1; border-bottom: var(--pointilles); min-width: 2rem; }

.familles-compactes {
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.famille-compacte { display: flex; flex-direction: column; }
.famille-compacte__titre {
  margin: 0 0 var(--espace-m);
  padding-bottom: var(--espace-s);
  border-bottom: var(--pointilles);
  font-size: 1.8rem;
}
.famille-compacte .vignette { flex-grow: 1; }

/* --- Résumé de la déclaration du cœur (accueil) --- */
.declaration-resume { text-align: center; }
.declaration-resume__kicker { margin-bottom: var(--espace-s); }
.declaration-resume .chapeau { margin-inline: auto; }
.declaration-resume__valeurs {
  display: grid;
  gap: var(--espace-l) var(--espace-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: var(--espace-l);
  text-align: left;
}
.declaration-resume__valeur { display: flex; gap: var(--espace-m); align-items: flex-start; }
.declaration-resume__valeur h3 { margin-bottom: 0.1rem; font-size: 1.05rem; }
.declaration-resume__valeur p { margin: 0; font-size: 0.95rem; color: var(--couleur-texte-doux); }
.declaration-resume__coeur {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rose-pale);
  color: var(--framboise);
  display: flex;
  align-items: center;
  justify-content: center;
}
.declaration-resume__bas {
  margin-top: var(--espace-l);
  padding-top: var(--espace-l);
  border-top: var(--pointilles);
}
.declaration-resume__bas .devise { margin-top: 0; }
.declaration-resume__signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-s);
  font-size: var(--texte-petit);
  color: var(--couleur-texte-doux);
}
.declaration-resume__signature img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--blanc);
  box-shadow: 0 0 0 2px var(--rose-bordure);
}

/* --- Page « Notre déclaration du cœur » : une carte encadrée --- */
.declaration-page {
  background: var(--rose-pale);
  border-block: var(--pointilles);
  padding-block: var(--espace-xxl);
}
.declaration-carte {
  position: relative;
  max-width: 54rem;
  margin-inline: auto;
  background: var(--blanc);
  padding: 0.9rem;
  border-radius: 0.4rem;
  box-shadow: 0 1.6rem 3rem -1.6rem rgba(62, 74, 85, 0.4);
}
.declaration-carte__interieur {
  border: 2px solid var(--rose-poudre);
  border-radius: 0.25rem;
  outline: var(--pointilles);
  outline-offset: -0.75rem;
  padding: var(--espace-xl) clamp(1.25rem, 5vw, 4rem) var(--espace-xxl);
  text-align: center;
}
.declaration-carte__marque {
  margin: 0;
  font-family: var(--police-titres);
  font-size: 1.4rem;
  color: var(--framboise-fonce);
}
.declaration-carte__titre { margin: 0.2rem 0 0; font-size: var(--titre-1); }
.declaration-carte__trait {
  width: 10rem;
  height: 1.25rem;
  margin: 0.6rem auto var(--espace-m);
  background: var(--image-trait) center / contain no-repeat;
}
.declaration-carte__intro {
  max-width: 38rem;
  margin-inline: auto;
  font-style: italic;
  color: var(--couleur-texte-doux);
}
.declaration-carte__engagements {
  list-style: none;
  max-width: 38rem;
  margin: var(--espace-xl) auto 0;
  padding: 0;
  display: grid;
  gap: var(--espace-l);
  text-align: left;
}
.declaration-carte__engagements li { display: flex; gap: var(--espace-m); align-items: flex-start; }
.declaration-carte__engagements h2 { margin: 0 0 0.2rem; font-size: 1.15rem; font-weight: 800; }
.declaration-carte__engagements p { margin: 0; }
.declaration-carte__numero {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--framboise);
  color: var(--blanc);
  display: grid;
  place-items: center;
  font-family: var(--police-titres);
  font-size: 1.6rem;
  font-weight: 700;
}
.declaration-carte__devise { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 0; }
.declaration-carte__signature { margin-top: var(--espace-l); }
.declaration-carte__signature img {
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--blanc);
  box-shadow: 0 0 0 2px var(--rose-bordure);
  margin-inline: auto;
}
.declaration-carte__merci {
  margin: var(--espace-s) 0 0;
  font-family: var(--police-titres);
  font-size: 1.6rem;
}
.declaration-carte__nom { margin: 0; font-weight: 800; font-size: var(--texte-petit); }
.declaration-carte__sceau {
  position: absolute;
  left: 50%;
  bottom: -2.1rem;
  width: 4.25rem;
  height: 4.25rem;
  margin-left: -2.125rem;
  border-radius: 50%;
  background: var(--framboise);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px var(--rose-pale), 0 0.5rem 1.1rem -0.4rem rgba(62, 74, 85, 0.45);
}
.declaration-carte__sceau .icone { width: 1.9rem; height: 1.9rem; }
.declaration-page__actions { margin-top: var(--espace-xxl); }

/* --- « À ne pas manquer en ce moment » --- */
.anpm {
  display: grid;
  gap: var(--espace-l);
  background: var(--blanc);
  border: 2px solid var(--rose-poudre);
  border-radius: var(--arrondi-l);
  padding: var(--espace-l);
  margin-top: var(--espace-l);
}
@media (min-width: 56rem) {
  .anpm { grid-template-columns: 5fr 7fr; }
}
.anpm__vedette {
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
  background: var(--rose-pale);
  border-radius: var(--arrondi-m);
  padding: var(--espace-l);
}
.anpm__vedette > .pastille { align-self: flex-start; }
.anpm__vedette p { margin: 0; }
.anpm__vedette-titre { display: flex; gap: var(--espace-m); align-items: center; }
.anpm__vedette-titre h3 { margin: 0; font-size: 1.25rem; }
.anpm__vedette .evenement__date { background: var(--blanc); }
.anpm__vedette .groupe-boutons { margin: auto 0 0; }
.anpm__liste { display: flex; flex-direction: column; }
.anpm__element {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--espace-m);
  align-items: center;
  padding: var(--espace-m) 0.2rem;
  color: var(--ardoise);
  text-decoration: none;
  border-bottom: var(--pointilles);
}
.anpm__element:last-child { border-bottom: 0; }
.anpm__element:hover { color: var(--framboise-fonce); }
.anpm__icone {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--rose-pale);
  color: var(--framboise);
  display: flex;
  align-items: center;
  justify-content: center;
}
.anpm__icone .icone { width: 1.5rem; height: 1.5rem; }
.anpm__texte { display: flex; flex-direction: column; line-height: 1.4; }
.anpm__categorie { font-size: var(--texte-petit); font-weight: 700; color: var(--eucalyptus-fonce); }
.anpm__titre { font-weight: 800; }
.anpm__meta { font-size: var(--texte-petit); color: var(--couleur-texte-doux); }
.anpm__fin { display: flex; align-items: center; gap: var(--espace-s); }
.pastille--nouveau { background: var(--framboise); color: var(--blanc); }

/* --- Bloc « un petit mot de Christine » (et variantes) --- */
.espace-aide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-l);
  background: var(--rose-pale);
  border-radius: var(--arrondi-l);
  padding: var(--espace-l) var(--espace-xl);
  outline: var(--pointilles);
  outline-offset: -0.6rem;
}
.espace-aide__photo {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--blanc);
  box-shadow: 0 0 0 2px var(--rose-bordure);
}
.espace-aide__texte { flex: 1 1 16rem; }
.espace-aide__texte h2 { margin-bottom: 0.2rem; }
.espace-aide__texte p { margin: 0; }
.espace-aide__boutons { display: flex; flex-direction: column; gap: var(--espace-s); }
.espace-aide--compact { margin-top: var(--espace-xl); }
.espace-aide .vignette__icone { background: var(--blanc); }

/* --- Paper Scrap du lundi --- */
.paper-scrap-entete {
  background: #E7EFEA;
  border-block: 2px dashed #B9CBBF;
  padding-block: var(--espace-xl);
}
.paper-scrap-entete__interieur {
  display: grid;
  gap: var(--espace-l);
  align-items: center;
}
@media (min-width: 52rem) {
  .paper-scrap-entete__interieur { grid-template-columns: 1fr auto; }
}
.paper-scrap-entete__titre { margin-bottom: 0; }
.paper-scrap-entete__sous-titre {
  font-family: var(--police-titres);
  font-size: 1.8rem;
  color: var(--framboise-fonce);
  margin: 0 0 var(--espace-s);
}
.paper-scrap-entete .pastille { background: var(--blanc); color: var(--eucalyptus-fonce); }
.paper-scrap-entete__infos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s) var(--espace-l);
  font-weight: 700;
  color: var(--eucalyptus-fonce);
}
.paper-scrap-entete__infos li { display: flex; align-items: center; gap: 0.4rem; }
.paper-scrap-tampon {
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--blanc);
  border: 3px solid var(--eucalyptus);
  outline: 2px dashed var(--eucalyptus);
  outline-offset: -0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-10deg);
  color: var(--eucalyptus-fonce);
  line-height: 1.05;
  text-align: center;
}
.paper-scrap-tampon span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.paper-scrap-tampon strong { font-family: var(--police-titres); font-size: 1.9rem; }

.seance-vedette {
  display: grid;
  gap: var(--espace-l);
  background: var(--blanc);
  border: 1px solid #CFDCD4;
  border-radius: var(--arrondi-l);
  padding: var(--espace-l);
  margin-top: var(--espace-l);
}
@media (min-width: 52rem) {
  .seance-vedette { grid-template-columns: 2fr 3fr; align-items: start; }
}
.seance-vedette__photo { width: 100%; border-radius: var(--arrondi-m); }
.seance-vedette__texte h3 { font-size: 1.5rem; margin-bottom: var(--espace-s); }
.seance-vedette__quand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-s);
  font-weight: 800;
  color: var(--eucalyptus-fonce);
}
.seance-vedette__materiel { margin-top: var(--espace-s); }

.seances__mois {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-s) var(--espace-m);
  margin: var(--espace-xl) 0 var(--espace-m);
}
.seances__mois h3 { margin: 0; font-size: 1.9rem; text-transform: capitalize; }
.seances__trait { flex-grow: 1; border-bottom: var(--pointilles); min-width: 2rem; }
.seances__compte { font-size: var(--texte-petit); color: var(--couleur-texte-doux); }
.seances {
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.seance {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--rose-poudre);
  border-radius: var(--arrondi-m);
  overflow: hidden;
}
.seance__image { position: relative; background: var(--rose-pale); }
.seance__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.seance__date {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--blanc);
  outline: var(--pointilles);
  outline-offset: -0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.seance__texte { display: flex; flex-direction: column; gap: var(--espace-s); padding: var(--espace-l); flex-grow: 1; }
.seance__texte h4 { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.3; }
.seance__materiel { margin: 0; font-size: var(--texte-petit); color: var(--couleur-texte-doux); }
.seance__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-s); }
.seance__replay { background: #E7EFEA; color: var(--eucalyptus-fonce); }
.seance__replay:hover { background: var(--eucalyptus); color: var(--blanc); }
.seance__sans-replay { font-size: var(--texte-petit); font-style: italic; color: var(--couleur-texte-doux); }

/* --- Le dico --- */
.dico__entete {
  display: grid;
  gap: var(--espace-l);
  align-items: center;
}
@media (min-width: 56rem) {
  .dico__entete { grid-template-columns: 1fr auto; }
}
.dico__teckels { flex-direction: column; text-align: center; }
.dico__teckels img { width: 9rem; height: 9rem; border-width: 5px; }
.dico__outils {
  background: var(--blanc);
  border: 2px solid var(--rose-poudre);
  border-radius: var(--arrondi-l);
  padding: var(--espace-l);
  margin-top: var(--espace-l);
}
.dico__lettres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: var(--espace-m);
}
.dico__lettres .filtre { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: 0.35rem; }
.dico__lettres .filtre[disabled] {
  border-style: dashed;
  border-color: #EDE3E5;
  background: transparent;
  color: #8A9299;
  cursor: default;
}
.dico__outils .compteur { margin: var(--espace-m) 0 0; }
.dico__liste { margin-top: var(--espace-xl); }
.dico__groupe { padding-top: var(--espace-m); border-top: var(--pointilles); }
.dico__groupe[hidden] { display: none; }
.dico__lettre-titre {
  margin: 0 0 var(--espace-s);
  font-family: var(--police-titres);
  font-size: 2.75rem;
  color: var(--framboise);
  line-height: 1;
}
@media (min-width: 52rem) {
  .dico__groupe { display: grid; grid-template-columns: 6rem 1fr; gap: var(--espace-l); }
  .dico__lettre-titre { font-size: 3.5rem; }
}
.dico__mot {
  padding: var(--espace-s) 0 var(--espace-m);
  border-bottom: 1px solid var(--rose-pale);
}
.dico__mot[hidden] { display: none; }
@media (min-width: 52rem) {
  .dico__mot { display: grid; grid-template-columns: 15rem 1fr; gap: var(--espace-l); }
}
.dico__terme { margin: 0; font-size: 1.15rem; font-weight: 800; }
.dico__sigle { margin: 0; font-size: var(--texte-petit); color: var(--couleur-texte-doux); }
.dico__definition p { margin: 0; }
.dico__voir { margin-top: 0.2rem !important; font-size: var(--texte-petit); color: var(--couleur-texte-doux); }
.dico__voir strong { color: var(--framboise-fonce); }
.dico__vide { display: flex; flex-direction: column; align-items: center; gap: var(--espace-s); }
.dico__vide img { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; }
.dico__vide .titre-script { font-size: 1.9rem; margin: 0; }

/* --- Mes objectifs --- */
.objectifs__entete { display: grid; gap: var(--espace-xl); align-items: center; }
@media (min-width: 56rem) {
  .objectifs__entete { grid-template-columns: 1fr auto; }
}
.objectifs__etapes { margin-bottom: 0; }
.objectifs__apercu-grand img {
  width: min(14rem, 60vw);
  background: var(--blanc);
  border: 1px solid var(--rose-poudre);
  box-shadow: var(--ombre-douce);
  transform: rotate(-3deg);
}
.challenge .vignette__icone { width: 4.5rem; height: 4.5rem; }
.challenge__etoile .icone { width: 2rem; height: 2rem; }

.fiches {
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  margin-top: var(--espace-l);
}
.fiche {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--rose-poudre);
  border-radius: var(--arrondi-m);
  overflow: hidden;
}
.fiche__apercu {
  position: relative;
  background: var(--rose-pale);
  padding: var(--espace-l);
  display: flex;
  justify-content: center;
}
.fiche__apercu img {
  width: 11rem;
  max-width: 100%;
  background: var(--blanc);
  box-shadow: var(--ombre-douce);
}
.fiche__sans-image { color: var(--framboise); }
.fiche__badge { position: absolute; top: 0.75rem; right: 0.75rem; }
.fiche__texte { display: flex; flex-direction: column; gap: var(--espace-s); padding: var(--espace-l); flex-grow: 1; }
.fiche__texte h3 { margin: 0; font-size: 1.1rem; }
.fiche__texte p { margin: 0; font-size: 0.95rem; color: var(--couleur-texte-doux); }
.fiche__texte .pastille { align-self: flex-start; }
.fiche__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--espace-s); }

/* --- Page de rubrique (modèle générique) --- */
.rubrique__entete { display: grid; gap: var(--espace-xl); align-items: start; }
@media (min-width: 56rem) {
  .rubrique__entete { grid-template-columns: 1fr 22rem; }
}
.rubrique__famille { display: flex; align-items: center; gap: var(--espace-m); margin-bottom: var(--espace-s); }
.rubrique__aide { display: flex; flex-direction: column; gap: var(--espace-s); }
.rubrique__aide-haut { display: flex; align-items: center; gap: var(--espace-s); }
.rubrique__aide-haut h2 { margin: 0; font-size: 1.6rem; }
.rubrique__aide-haut img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--blanc);
  box-shadow: 0 0 0 2px var(--rose-bordure);
}
.rubrique__aide p { margin: 0; font-size: 0.95rem; color: var(--couleur-texte-doux); }

.documents { display: flex; flex-direction: column; }
.document {
  display: grid;
  gap: var(--espace-l);
  align-items: center;
  padding: var(--espace-l) 0;
  border-bottom: var(--pointilles);
}
@media (min-width: 52rem) {
  .document { grid-template-columns: 8rem 1fr auto; }
}
.document__apercu {
  width: 8rem;
  height: 9.5rem;
  border-radius: var(--arrondi-m);
  background: var(--rose-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.document__apercu img { width: 100%; height: 100%; object-fit: cover; }
.document__icone { color: var(--framboise); }
.document__icone .icone { width: 2.2rem; height: 2.2rem; }
.document__type { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.3rem; }
.document__texte h3 { margin: 0 0 0.2rem; font-size: 1.2rem; }
.document__description { margin: 0; color: var(--couleur-texte-doux); }
.document__meta { margin: 0.2rem 0 0; font-size: var(--texte-petit); color: var(--couleur-texte-doux); }
.document__actions { display: flex; flex-direction: column; gap: var(--espace-s); }

/* --- Gestion des membres et journal (pages fabriquées par le serveur) --- */
.gestion__bloc {
  background: var(--blanc);
  border: 1px solid var(--rose-poudre);
  border-radius: var(--arrondi-m);
  padding: var(--espace-l);
  margin-bottom: var(--espace-l);
}
.gestion__bloc h2 { font-size: 1.6rem; }
.gestion__tableau { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.gestion__tableau th,
.gestion__tableau td {
  text-align: left;
  padding: var(--espace-s);
  border-bottom: 1px solid var(--rose-pale);
  vertical-align: top;
}
.gestion__tableau th { font-size: var(--texte-petit); text-transform: uppercase; letter-spacing: 0.04em; color: var(--couleur-texte-doux); }
.gestion__tableau tr:last-child td { border-bottom: 0; }
.gestion__membre-nom { font-weight: 800; }
.gestion__membre-identifiant { font-size: var(--texte-petit); color: var(--couleur-texte-doux); }
.gestion__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gestion__actions form { margin: 0; }
.gestion__retour { margin-top: var(--espace-xl); }
.gestion__provisoire {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  background: var(--blanc);
  border: 2px dashed var(--rose-bordure);
  border-radius: var(--arrondi-s);
  padding: 0.2rem 0.6rem;
}
.journal__echec { color: var(--framboise-fonce); font-weight: 700; }
@media (max-width: 52rem) {
  .gestion__tableau, .gestion__tableau tbody, .gestion__tableau tr, .gestion__tableau td { display: block; width: 100%; }
  .gestion__tableau thead { display: none; }
  .gestion__tableau tr { border-bottom: var(--pointilles); padding-block: var(--espace-s); }
  .gestion__tableau td { border: 0; padding: 0.2rem 0; }
  .gestion__tableau td::before { content: attr(data-libelle) " : "; font-weight: 700; color: var(--couleur-texte-doux); }
  .gestion__tableau td:first-child::before { content: ""; }
}

/* --- Impression : la déclaration et les fiches s'impriment proprement --- */
@media print {
  .espace-bandeau, .fil-ariane, .declaration-page__actions, .espace-aide { display: none !important; }
  .declaration-page { background: #FFFFFF; border: 0; padding: 0; }
  .declaration-carte { box-shadow: none; padding: 0; }
  .declaration-carte__sceau { display: none; }
}


/* ==========================================================================
   21. FICHES TECHNIQUES (onglet « Fiches techniques »)
   --------------------------------------------------------------------------
   Les vignettes reprennent l'apparence des créations (classes
   carte-projet__…) ; seuls les petits compléments sont ici.
   ========================================================================== */

/* --- Page de la liste : recherche + boutons de catégorie --- */
.outils-fiches {
  display: grid;
  gap: var(--espace-m);
  margin-bottom: var(--espace-l);
}
@media (min-width: 52rem) {
  .outils-fiches { grid-template-columns: minmax(16rem, 22rem) 1fr; align-items: end; }
}
.outils-fiches .filtres-types { align-self: end; }

/* --- Vignette d'une fiche --- */
.carte-fiche__sans-image {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--rose-bordure);
}
.carte-fiche__sans-image .icone { width: 3rem; height: 3rem; }
.carte-fiche__resume { margin: 0 0 0.3rem; font-size: 0.95rem; color: var(--couleur-texte-doux); }
.carte-fiche__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0;
  font-size: var(--texte-petit);
  font-weight: 700;
  color: var(--eucalyptus-fonce);
}
.carte-fiche__reperes span { display: inline-flex; align-items: center; gap: 0.25rem; }

/* --- Page d'une fiche --- */
.fiche-technique { padding-top: var(--espace-l); }
.fiche-technique__entete { display: grid; gap: var(--espace-xl); }
@media (min-width: 56rem) {
  .fiche-technique__entete { grid-template-columns: 1fr 1fr; align-items: start; }
}
.fiche-technique__photo { margin: 0; border-radius: var(--arrondi-l); overflow: hidden; background: var(--rose-pale); }
.fiche-technique__photo img { width: 100%; }
.fiche-technique__categorie {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--espace-s);
  font-weight: 700;
  color: var(--couleur-texte-doux);
}
.fiche-technique__infos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-m) var(--espace-xl);
  padding: var(--espace-l);
  background: var(--rose-pale);
  border-radius: var(--arrondi-m);
}
.fiche-technique__infos dt { font-size: var(--texte-petit); font-weight: 700; color: var(--couleur-texte-doux); }
.fiche-technique__infos dd { margin: 0; font-weight: 700; }
.fiche-technique__actions { display: flex; flex-wrap: wrap; gap: var(--espace-m); margin-top: var(--espace-l); }
.fiche-technique__explications { max-width: var(--largeur-texte); margin-top: var(--espace-xl); }
.fiche-technique__bloc { margin-top: var(--espace-xxl); }

/* Étapes numérotées : pastille framboise, photo à gauche sur grand écran */
.etapes-fiche {
  list-style: none;
  counter-reset: etape-fiche;
  padding: 0;
  margin: var(--espace-l) 0 0;
  display: grid;
  gap: var(--espace-l);
}
.etapes-fiche__etape {
  counter-increment: etape-fiche;
  position: relative;
  display: grid;
  gap: var(--espace-m);
  padding: var(--espace-l) var(--espace-l) var(--espace-l) 4.5rem;
  background: var(--blanc);
  border: 1px solid var(--rose-poudre);
  border-radius: var(--arrondi-m);
}
.etapes-fiche__etape::before {
  content: counter(etape-fiche);
  position: absolute;
  top: var(--espace-l);
  left: var(--espace-l);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--police-titres);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--blanc);
  background: var(--framboise);
}
@media (min-width: 48rem) {
  .etapes-fiche__etape:has(.etapes-fiche__photo) { grid-template-columns: 16rem 1fr; align-items: start; }
}
.etapes-fiche__photo { width: 100%; border-radius: var(--arrondi-s); }
.etapes-fiche__texte h3 { margin: 0 0 var(--espace-xs); font-size: var(--titre-3); }
.etapes-fiche__texte p:last-child { margin-bottom: 0; }

/* Impression d'une fiche : on garde l'essentiel, sans boutons ni suggestions */
@media print {
  .page-fiche-technique .fil-ariane,
  .page-fiche-technique .fiche-technique__actions,
  .page-fiche-technique .materiel__actions,
  .page-fiche-technique [data-pagefind-ignore] { display: none !important; }
  .etapes-fiche__etape { break-inside: avoid; }
}