/* =====================================================================
   IDENTITÉ VISUELLE — « La rosace des saisons »
   ---------------------------------------------------------------------
   · Symbole : quatre pétales dans un cercle (quadrilobe gothique, clin
     d'œil aux rosaces de la cathédrale). Un pétale par saison ; seul le
     pétale de la saison en cours est rempli par l'accent de saison.
   · Logotype : le nom (config.json) en Fraunces, axes SOFT et WONK.
   · Signes graphiques : l'ornement-rosace (surtitres, séparateurs) et
     l'arche (cadres photo mis en avant).
   Fichiers remplaçables : /images/identite/ ; réglages : config.identite.
   ===================================================================== */

/* Quel pétale est rempli : une variable par saison, redéfinie sur chaque
   élément [data-season] (permet d'afficher plusieurs saisons côte à côte). */
[data-season="printemps"] { --lp-printemps: 1; --lp-ete: 0; --lp-automne: 0; --lp-hiver: 0; }
[data-season="ete"]       { --lp-printemps: 0; --lp-ete: 1; --lp-automne: 0; --lp-hiver: 0; }
[data-season="automne"]   { --lp-printemps: 0; --lp-ete: 0; --lp-automne: 1; --lp-hiver: 0; }
[data-season="hiver"]     { --lp-printemps: 0; --lp-ete: 0; --lp-automne: 0; --lp-hiver: 1; }

/* ---------- Symbole ---------- */
.symbole { display: inline-block; flex: none; width: 36px; height: 36px; color: var(--encre); --logo-rempli: var(--accent); }
.symbole svg { width: 100%; height: 100%; overflow: visible; }
.symbole .logo-cadre,
.symbole .logo-petale { fill: none; stroke: currentColor; stroke-width: 2.4; }
.symbole .logo-petale { fill: var(--logo-rempli); fill-opacity: 0; transition: fill-opacity var(--duree) var(--courbe); }
.symbole .logo-petale--printemps { fill-opacity: var(--lp-printemps); }
.symbole .logo-petale--ete { fill-opacity: var(--lp-ete); }
.symbole .logo-petale--automne { fill-opacity: var(--lp-automne); }
.symbole .logo-petale--hiver { fill-opacity: var(--lp-hiver); }
.symbole .logo-points, .symbole .logo-coeur { fill: currentColor; }
/* Sur fond sombre : trait clair, pétale à l'accent « sombre » */
.symbole--inverse { color: var(--fond); --logo-rempli: var(--accent-sombre); }

/* ---------- Logotype ---------- */
.logotype {
  font-family: var(--police-titre);
  font-weight: 450;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  letter-spacing: -.01em;
  line-height: 1;
}
.signature {
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* En-tête : symbole + nom */
.marque { gap: .6rem; }
.marque .symbole { width: 34px; height: 34px; }
.marque .logotype { font-size: 1.45rem; }
.marque:hover .symbole { color: var(--accent); }

/* Pied de page : bloc vertical */
.bloc-marque { display: grid; justify-items: start; gap: .7rem; margin-bottom: var(--espace-2); }
.bloc-marque .symbole { width: 64px; height: 64px; }
.bloc-marque .logotype { font-size: 2.2rem; color: var(--fond); margin: 0; }
.bloc-marque .signature { color: var(--accent-2-sombre); margin: 0; letter-spacing: .08em; text-wrap: balance; }

/* ---------- Ornement-rosace ---------- */
.surtitre { display: flex; align-items: center; gap: .5rem; }
.surtitre::before {
  content: ""; flex: none; width: .95em; height: .95em;
  background: var(--accent);
  -webkit-mask: var(--ornement) center / contain no-repeat;
  mask: var(--ornement) center / contain no-repeat;
}
.bloc--sombre .surtitre::before, .pied .surtitre::before { background: var(--accent-sombre); }

.ornement { display: flex; align-items: center; gap: 1rem; margin: var(--espace-5) auto; max-width: 28rem; color: var(--structure); }
.ornement::before, .ornement::after { content: ""; flex: 1; border-top: 1px solid currentColor; }
.ornement span {
  width: 22px; height: 22px; flex: none; background: var(--accent);
  -webkit-mask: var(--ornement) center / contain no-repeat;
  mask: var(--ornement) center / contain no-repeat;
}

/* ---------- Arche : cadre des photos mises en avant ---------- */
.photo--arche { border-radius: 50% 50% var(--rayon-l) var(--rayon-l) / 36% 36% var(--rayon-l) var(--rayon-l); }
.photo--arche .photo__illu { inset: 22% 15% 28%; }

/* Page « La maison » : le bloc-marque en grand */
.maison-marque { display: flex; align-items: center; gap: 1.1rem; margin-bottom: var(--espace-2); }
.maison-marque .symbole { width: clamp(64px, 10vw, 96px); height: clamp(64px, 10vw, 96px); }
.maison-marque h1 { font-size: var(--t-h1); margin: 0 0 .35rem; }
.maison-marque .signature { margin: 0; }

/* ---------- Page charte ---------- */
.charte-concept { display: grid; gap: var(--espace-4); align-items: center; }
@media (min-width: 850px) { .charte-concept { grid-template-columns: minmax(0, .8fr) 1.2fr; } }
.charte-concept__symbole { display: grid; place-items: center; padding: var(--espace-5) var(--espace-3); background: var(--accent-surface); }
.charte-geant { width: min(260px, 60vw); height: min(260px, 60vw); }
.charte-moyen { width: 88px; height: 88px; }
.charte-grille { list-style: none; padding: 0; margin: 0 0 var(--espace-3); display: grid; gap: var(--espace-2); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.charte-carte { margin: 0; padding: var(--espace-3); border: 1px solid var(--structure); border-radius: var(--rayon-l); background: var(--fond); }
.charte-carte figcaption { margin-top: var(--espace-2); color: var(--encre-douce); }
.charte-carte--sombre { background: var(--feuillage); color: var(--fond); border-color: var(--feuillage); }
.charte-carte--sombre figcaption { color: var(--fond); }
.charte-carte--sombre .signature { color: var(--accent-2-sombre); }
.charte-saisons .charte-carte { display: flex; align-items: center; gap: 1rem; }
.charte-saisons p { margin: 0; }
.charte-lockup { display: flex; align-items: center; gap: .7rem; min-height: 120px; justify-content: center; }
.charte-lockup .logotype { font-size: 1.9rem; }
.charte-lockup--vertical { flex-direction: column; gap: .6rem; text-align: center; }
.charte-lockup--vertical .signature { margin: 0; }
.charte-nuancier { list-style: none; padding: 0; margin: 0 0 var(--espace-3); display: grid; gap: var(--espace-2); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.charte-pastille { display: block; width: 100%; height: 4.5rem; border-radius: var(--rayon-m); border: 1px solid var(--structure); margin-bottom: .5rem; }
.charte-duo { display: flex; gap: .5rem; }
.charte-duo .charte-pastille { height: 3.5rem; }
.charte-specimen { font-size: 2.2rem; margin: 0; }
.charte-specimen--titre { font-family: var(--police-titre); font-variation-settings: "SOFT" 100; font-size: 1.8rem; line-height: 1.2; }
.charte-ornement { margin: var(--espace-2) 0; }
.charte-arche { max-width: 9rem; margin-bottom: var(--espace-2); }
.charte-glyphes { display: flex; gap: .25rem; margin-bottom: var(--espace-2); }
.charte-motifs { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.charte-motifs li { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: 1rem; }
.charte-motifs svg { width: 100%; height: 60px; }
.charte-eviter li { margin-bottom: .5rem; }
code { font-size: .95em; background: var(--fond-2); padding: .05em .35em; border-radius: .3em; }