/* La Fée Clochette — direction « Arc-en-ciel doux » (23 septembre 2026).
   Tokens et composants prêts à intégrer. Chemins relatifs à ce fichier :
   ../svg/ pour les formes et étoiles, ../images/ pour la texture et la fée. */

:root {
  /* Fonds et textes */
  --lfc-blanc: #FFFFFF;
  --lfc-creme: #FBF8F2;
  --lfc-encre: #33382E;      /* titres */
  --lfc-texte: #5F6157;      /* texte courant, AA sur blanc et sur les teintes pâles */
  --lfc-surtitre: #5C7234;   /* surtitres en capitales, AA sur blanc */

  /* Teintes pâles : cartes, bandes, formes */
  --lfc-sauge: #E4EAD6;
  --lfc-bleu: #DCEBF6;
  --lfc-beurre: #FCF1D8;
  --lfc-peche: #F4D3E6;

  /* Tons soutenus : étoiles, onglets, filets */
  --lfc-sauge-fonce: #B7C98F;
  --lfc-bleu-fonce: #A9C9E1;
  --lfc-beurre-fonce: #F3D48C;
  --lfc-peche-fonce: #E6A6CB;

  /* Actions */
  --lfc-bouton: #EBA9CF;
  --lfc-bouton-survol: #E297C2;
  --lfc-lien-filet: #A9C9E1;

  /* Formes d'étoile en masque (copies de svg/etoile.svg et svg/etincelle.svg) */
  --lfc-masque-etoile: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 width=%2248%22 height=%2248%22%3E %3Cpolygon points=%2224.00,6.50 29.05,18.54 42.07,19.63 32.18,28.16 35.17,40.87 24.00,34.10 12.83,40.87 15.82,28.16 5.93,19.63 18.95,18.54%22 fill=%22black%22 stroke=%22black%22 stroke-width=%225%22 stroke-linejoin=%22round%22/%3E %3C/svg%3E");
  --lfc-masque-etincelle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 width=%2248%22 height=%2248%22%3E %3Cpath d=%22M24 2 C25.6 16 32 22.4 46 24 C32 25.6 25.6 32 24 46 C22.4 32 16 25.6 2 24 C16 22.4 22.4 16 24 2 Z%22 fill=%22black%22/%3E %3C/svg%3E");

  --lfc-rayon: 28px;
  --lfc-rayon-organique: 30px 30px 30px 30px / 30px 30px 30px 30px;
  --lfc-ombre: 0 18px 40px -26px rgba(92, 72, 48, .45), 0 2px 6px -2px rgba(92, 72, 48, .12);
  --lfc-titres: 'LFC Baloo', 'Baloo 2', system-ui, sans-serif;
  --lfc-corps: 'LFC Inclusive', 'Inclusive Sans', system-ui, sans-serif;
}

/* ---------- Étoiles (SVG en masque, recolorables) ---------- */
.lfc-etoile,
.lfc-etincelle {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.08em;
  background: currentColor;
  -webkit-mask: var(--lfc-masque-etoile) center / contain no-repeat;
          mask: var(--lfc-masque-etoile) center / contain no-repeat;
  color: var(--lfc-beurre-fonce);
}
.lfc-etincelle {
  -webkit-mask-image: var(--lfc-masque-etincelle);
          mask-image: var(--lfc-masque-etincelle);
}
.lfc-etoile--sauge, .lfc-etincelle--sauge { color: var(--lfc-sauge-fonce); }
.lfc-etoile--bleu, .lfc-etincelle--bleu { color: var(--lfc-bleu-fonce); }
.lfc-etoile--beurre, .lfc-etincelle--beurre { color: var(--lfc-beurre-fonce); }
.lfc-etoile--peche, .lfc-etincelle--peche { color: var(--lfc-peche-fonce); }
/* Étoile d'accent après un titre : aria-hidden="true" dans le HTML */
.lfc-titre-etoile { font-size: .5em; margin-left: .35em; vertical-align: .55em; }

@keyframes lfc-scintille {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.82); }
}
.lfc-scintille { animation: lfc-scintille 3.6s ease-in-out infinite; transform-origin: center; }
.lfc-scintille:nth-child(3n+1) { animation-delay: -1.2s; }
.lfc-scintille:nth-child(3n+2) { animation-delay: -2.4s; }

/* ---------- Cartes « bien travaillées » ---------- */
.lfc-carte {
  --carte-fond: var(--lfc-sauge);
  --carte-accent: var(--lfc-sauge-fonce);
  position: relative;
  isolation: isolate;
  padding: 30px 28px 0;
  background: var(--carte-fond);
  border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
  border-top-right-radius: 44px;
  border-bottom-left-radius: 40px;
  box-shadow: var(--lfc-ombre);
  color: var(--lfc-texte);
  overflow: visible;
}
.lfc-carte::after { /* grain papier discret */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url(../images/grain-papier.png) 0 0 / 256px 256px repeat;
  mix-blend-mode: multiply;
  opacity: .9;
  pointer-events: none;
}
.lfc-carte--sauge { --carte-fond: var(--lfc-sauge); --carte-accent: var(--lfc-sauge-fonce); }
.lfc-carte--bleu { --carte-fond: var(--lfc-bleu); --carte-accent: var(--lfc-bleu-fonce); }
.lfc-carte--beurre { --carte-fond: var(--lfc-beurre); --carte-accent: var(--lfc-beurre-fonce); }
.lfc-carte--peche { --carte-fond: var(--lfc-peche); --carte-accent: var(--lfc-peche-fonce); }
.lfc-carte--blanche { --carte-fond: var(--lfc-blanc); --carte-accent: var(--lfc-sauge-fonce); }

.lfc-carte__onglet { /* petit onglet étoilé en haut à gauche */
  position: absolute;
  top: -14px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--carte-accent);
  box-shadow: 0 6px 14px -8px rgba(92, 72, 48, .5);
  transform: rotate(-4deg);
}
.lfc-carte__onglet::before {
  content: "";
  position: absolute;
  inset: 11px;
  background: #fff;
  -webkit-mask: var(--lfc-masque-etoile) center / contain no-repeat;
          mask: var(--lfc-masque-etoile) center / contain no-repeat;
}
.lfc-carte__titre { font: 500 26px/1.15 var(--lfc-titres); color: var(--lfc-encre); margin: 12px 0 8px; letter-spacing: -.02em; }
.lfc-carte__texte { font: 400 16px/1.6 var(--lfc-corps); margin: 0; }
.lfc-carte__etagere { /* support arrondi de l'illustration en pâte à modeler */
  margin: 22px -8px 8px;
  padding: 10px 10px 0;
  border-radius: 26px 26px 34px 34px;
  background: color-mix(in srgb, var(--carte-fond) 78%, var(--carte-accent));
}
.lfc-carte__etagere img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; } /* fond blanc des illustrations fondu dans la teinte */
.lfc-carte__photo { display: block; width: 100%; border-radius: 22px; margin-bottom: 18px; }

/* ---------- Boutons et liens ---------- */
.lfc-bouton {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--lfc-bouton);
  color: var(--lfc-encre);
  font: 600 17px/1 var(--lfc-corps);
  text-decoration: none;
  box-shadow: 0 10px 22px -12px rgba(200, 110, 160, .9), inset 0 -3px 0 rgba(0, 0, 0, .06);
  transition: background .2s, transform .2s;
}
.lfc-bouton:hover { background: var(--lfc-bouton-survol); transform: translateY(-1px); }
.lfc-bouton:focus-visible, .lfc-lien:focus-visible { outline: 3px solid var(--lfc-bleu-fonce); outline-offset: 3px; }
.lfc-lien {
  color: var(--lfc-encre);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--lfc-lien-filet);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------- Décor du hero (formes gauche, arc-en-ciel droite, fée) ---------- */
.lfc-hero-decor { position: relative; isolation: isolate; }
.lfc-hero-decor::before,
.lfc-hero-decor::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
}
.lfc-hero-decor::before { left: 0; top: 0; width: min(28vw, 380px); height: 640px; background-image: url(../svg/hero-formes-gauche.svg); background-position: left bottom; background-size: contain; }
.lfc-hero-decor::after { right: 0; top: 60px; width: min(26vw, 360px); height: 560px; background-image: url(../svg/hero-arc-en-ciel-droite.svg); background-position: right bottom; background-size: contain; }
.lfc-fee { position: absolute; width: clamp(90px, 10vw, 150px); height: auto; pointer-events: none; }
.lfc-sur-teinte { mix-blend-mode: multiply; } /* illustration à fond blanc posée sur un aplat coloré */
@media (max-width: 809px) {
  .lfc-hero-decor::before { width: 150px; height: 300px; opacity: .8; }
  .lfc-hero-decor::after { width: 140px; height: 260px; top: 140px; opacity: .8; }
  .lfc-fee { width: 64px; }
}

/* ---------- Arc-en-ciel décoratif (Une place pour chacun, contact) ---------- */
.lfc-arc-en-ciel { display: block; width: 100%; height: auto; aspect-ratio: 600 / 330; background: url(../svg/arc-en-ciel.svg) center / contain no-repeat; }
.lfc-bandeau-contact { position: relative; isolation: isolate; padding: 64px 72px; }
.lfc-bandeau-contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../svg/bandeau-contact.svg) center / 100% 100% no-repeat; filter: drop-shadow(0 20px 30px rgba(92, 72, 48, .12)); }

/* ---------- Bords de section en galets ---------- */
.lfc-galets { position: relative; }
.lfc-galets::before, .lfc-galets::after { content: ""; position: absolute; top: 40px; width: 110px; height: 700px; background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: -1; }
.lfc-galets::before { left: 0; background-image: url(../svg/bord-galets-gauche.svg); background-position: left center; }
.lfc-galets::after { right: 0; background-image: url(../svg/bord-galets-droite.svg); background-position: right center; }
@media (max-width: 809px) { .lfc-galets::before, .lfc-galets::after { width: 36px; } }

/* ---------- Frise « Les petits rituels » ---------- */
.lfc-frise { position: relative; list-style: none; margin: 0; padding: 0; }
.lfc-frise::before { content: ""; position: absolute; left: 96px; top: 20px; bottom: 20px; border-left: 2px dotted #D7C9B8; }
.lfc-frise__jalon { position: relative; }
.lfc-frise__jalon::after { content: ""; position: absolute; left: 86px; top: 58px; width: 22px; height: 22px; background: var(--jalon, var(--lfc-sauge-fonce)); -webkit-mask: var(--lfc-masque-etoile) center / contain no-repeat; mask: var(--lfc-masque-etoile) center / contain no-repeat; }

/* ---------- Médaillon (photo d'enfance des fondateurs) ---------- */
.lfc-medaillon { width: 170px; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 6px solid var(--lfc-beurre); box-shadow: 0 0 0 2px var(--lfc-beurre-fonce), var(--lfc-ombre); overflow: hidden; }
.lfc-medaillon img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- FAQ avec filet de couleur ---------- */
.lfc-faq-item { border-radius: 20px; background: var(--lfc-creme); border-left: 6px solid var(--filet, var(--lfc-sauge-fonce)); }
.lfc-faq-item:nth-child(4n+2) { --filet: var(--lfc-bleu-fonce); }
.lfc-faq-item:nth-child(4n+3) { --filet: var(--lfc-beurre-fonce); }
.lfc-faq-item:nth-child(4n+4) { --filet: var(--lfc-peche-fonce); }

/* ---------- Pied de page ---------- */
.lfc-pied { background: var(--lfc-creme); position: relative; }
.lfc-pied::before { content: ""; position: absolute; left: 4%; right: 4%; top: 0; height: 6px; background: url(../svg/ligne-quatre-couleurs.svg) center / 100% 100% no-repeat; }

@media (prefers-reduced-motion: reduce) {
  .lfc-scintille { animation: none; }
  .lfc-bouton { transition: none; }
}