/* ============================================================================
   ESTELLE — feuille de marque (candidate de travail, 2026-11-08)
   Le vocabulaire de composants est REPRIS d'un site existant du parc (sa
   provenance exacte est tracée dans le DEPLOY.md de cette opération, pas ici :
   aucun nom d'un autre client ne doit figurer dans un fichier livré).
   Goût de référence : clair, aéré, serif élégant, alternance image
   gauche/droite, cartes blanches à ombre douce.
   Règle 1 de SITE_STANDARDS : tout passe par les tokens, zéro hex en dur.
   ========================================================================== */

:root {
  /* ---- Palette du brand book (contrastes WCAG mesurés en commentaire) ---- */
  --cream: #f6f3ee;        /* papier — fond dominant, ~70% */
  --paper: #ffffff;        /* surface — cartes et encadrés, ~20% */
  --sable: #d9cfc0;        /* sable — UNE seule bande d'appui par page, ~7% */
  --ink: #2b2b28;          /* encre — 12,83:1 sur papier · 14,20:1 sur surface */
  --muted: #575149;        /* encre adoucie — 7,08:1 papier · 5,09:1 sable */
  --brand: #4f6a63;        /* accent — 5,31:1 papier · blanc dessus 5,88:1 */
  --brand-deep: #3a4f49;   /* variante profonde (survol) — blanc dessus 8,77:1 */
  /* --accent a été supprimé : doublon exact de --brand, utilisé 0 fois.
     Un token mort finit par être recolorisé sans effet. L'accent du site,
     c'est --brand, et il ne sert qu'à ce qui est cliquable. */
  --line: rgba(43, 43, 40, 0.14);
  --line-forte: rgba(43, 43, 40, 0.26);
  --shadow-soft: 0 10px 30px rgba(43, 43, 40, 0.07), 0 2px 6px rgba(43, 43, 40, 0.04);

  /* ---- Typographie ---- */
  --font-display: "Cormorant", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --corps: 1.125rem;            /* 18 px mini sur ordinateur */
  --corps-interligne: 1.65;
  --mesure: 38rem;              /* ~66 signes à 18 px — jamais toute la largeur */
  --mesure-large: 76rem;

  /* ---- Rythme ---- */
  --pas: clamp(3.5rem, 7vw, 7rem);
  --gouttiere: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 14px;
  --radius-img: 18px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--corps);
  line-height: var(--corps-interligne);
  overflow-x: hidden;
}

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

/* ---------- Titres : Cormorant bas de casse, graisses 500/600 seules ------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: lowercase;   /* bas de casse : vient de son âme de marque */
  color: var(--ink);
  margin: 0 0 0.6em;
  letter-spacing: -0.005em;
}
h1 {
  font-weight: 600;
  font-size: clamp(2.125rem, 5.2vw, 3.375rem); /* max 54 px = 3,0 × le corps */
  line-height: 1.1;
}
h2 { font-size: clamp(1.75rem, 3.6vw, 2.25rem); line-height: 1.16; } /* 2 × corps */
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.22; }
p { margin: 0 0 1.1em; max-width: var(--mesure); }
p:last-child { margin-bottom: 0; }

/* Surtitre et étiquettes : Manrope 500, lettres espacées, jamais >4 mots */
.eyebrow, .card-kicker {
  display: block;
  margin: 0 0 1em;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-kicker { margin-bottom: 0.7em; }

/* ---------- LE composant bouton (règle 2 : un seul, partout) -------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.6em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--brand); color: var(--paper); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--brand-deep); color: var(--paper); }
.btn-ghost {
  min-height: 44px;
  border-color: var(--line-forte);
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- Liens de texte ------------------------------------------------ */
a { color: var(--brand); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid var(--brand);
  padding-bottom: 2px;
  min-height: 44px;
}
.text-link:hover { color: var(--brand-deep); border-color: var(--brand-deep); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.8em 1.2em;
  background: var(--paper);
  color: var(--ink);
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- En-tête ------------------------------------------------------- */
.site-frame { display: flow-root; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gouttiere);
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0.9rem clamp(1.25rem, 4vw, 3rem);
}

/* Monogramme typographique : bas de casse Cormorant 500 + filet horizontal de
   la largeur EXACTE du monogramme. Aucun pictogramme, aucun dégradé. */
.brand { display: inline-block; text-decoration: none; color: var(--ink); }
.brand-mark {
  display: table;          /* le filet se cale sur la largeur réelle du mot */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.brand-mark::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.3em;
  background: var(--ink);
}
.brand small {
  display: block;
  margin-top: 0.5em;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}

.navigation { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;       /* cible tactile : 43 px mesurés avant correction */
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.6em 0;
}
.navigation a:hover { color: var(--brand-deep); }
.navigation a[aria-current="page"] { color: var(--brand); }
.navigation .nav-appointment {
  min-height: 44px;
  padding: 0 1.3em;
  border-radius: 999px;
  background: var(--brand);
  color: var(--paper);
  font-size: 0.9375rem;
}
.navigation .nav-appointment:hover { background: var(--brand-deep); color: var(--paper); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 0.9em;
  border: 1px solid var(--line-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

/* ---------- Coquille de contenu ------------------------------------------- */
.site-main { display: block; }
.content-shell { display: block; }
.cream-island { display: block; }
.row { position: relative; }

.hero {
  display: grid;
  gap: var(--gouttiere);
  align-items: center;
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) var(--pas);
  grid-template-columns: 1.02fr 0.98fr;
}
/* Pages de cadre : pas de visuel, donc pas de seconde colonne vide. */
.hero:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.hero-copy { min-width: 0; }
/* D15 : ne vise QUE le paragraphe d'accroche. Écrite `.hero-copy p`, la règle
   battait en spécificité `.eyebrow` et `.hero-caption` et les rendait toutes
   deux à 19 px : le surtitre prenait 3 lignes à 390 px et concurrençait le h1. */
.hero-copy > p:not(.eyebrow):not(.hero-caption) { font-size: 1.1875rem; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.hero-caption {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

/* Photos traitées : coins arrondis, fondues dans le papier, jamais une photo
   brute posée sur un aplat (règle 4 + univers visuel du brand book). */
.visuel {
  position: relative;
  margin: 0;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--sable);
}
.visuel img {
  width: 100%;
  border-radius: var(--radius-img);
  /* Le duotone (désaturation + encre chaude) est BAKÉ dans le .webp, pas
     simulé en CSS : un filtre sur une image déjà très claire la effaçait. */
}
.visuel::after {               /* bord fondu vers le fond papier */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-img);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 26px 2px color-mix(in srgb, var(--cream) 55%, transparent);
  pointer-events: none;
}
.visuel figcaption {
  padding: 0.7em 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.visuel--vide {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 2rem;
  border: 1px dashed var(--line-forte);
  background: var(--cream);
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- Bloc alterné texte / image ------------------------------------
   ALTERNANCE : on inverse l'ordre des enfants DANS LE HTML et on échange les
   valeurs de grid-template-columns. Jamais direction:rtl, jamais `order`. */
.split {
  display: grid;
  gap: var(--gouttiere);
  align-items: center;
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
  grid-template-columns: 1.05fr 0.95fr;   /* texte à gauche, image à droite */
}
.split--reverse { grid-template-columns: 0.95fr 1.05fr; } /* image à gauche */
.split-text { min-width: 0; }
.split-text p { color: var(--muted); }
.split-text .text-link { margin-top: 0.6rem; }

/* ---------- Cartes blanches à ombre douce --------------------------------- */
.services {
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
}
.services-head { max-width: var(--mesure); margin-bottom: clamp(2rem, 4vw, 3rem); }
.services-head p { color: var(--muted); }
.service-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.4rem, 2vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.service-card h3 { margin-bottom: 0.5em; }
/* D17 : ces paragraphes portent du VRAI texte de vente (13 à 25 mots), pas
   des étiquettes : ils tiennent le plancher de corps mobile (17 px). */
.service-card p { font-size: 1.0625rem; color: var(--muted); max-width: none; }
.service-card .text-link { margin-top: auto; align-self: flex-start; }

/* ---------- Repères courts (valeurs) ------------------------------------- */
.values {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem) var(--gouttiere);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
}
.values article { padding-top: 1.1rem; border-top: 1px solid var(--line-forte); }
.values h3 { font-size: 1.1875rem; margin-bottom: 0.35em; }
.values p { font-size: 1rem; color: var(--muted); max-width: none; margin: 0; }

/* ---------- Bloc parcours ------------------------------------------------- */
.biography {
  display: grid;
  gap: var(--gouttiere);
  align-items: start;
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
  grid-template-columns: 0.95fr 1.05fr;
}
.bio-notes { display: grid; gap: 0.9rem; }
.bio-notes article {
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.bio-notes h3 { font-size: 1.0625rem; margin-bottom: 0.3em; }
.bio-notes p { font-size: 1rem; color: var(--muted); max-width: none; margin: 0; }

/* ---------- Prose longue ------------------------------------------------- */
.prose {
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
}
.prose-inner { max-width: var(--mesure); }
.prose-inner p { color: var(--muted); }
.prose-inner h2 { margin-top: 1.6em; }
.prose-inner h2:first-child { margin-top: 0; }
.prose-inner ul { margin: 0 0 1.2em; padding-left: 1.1em; max-width: var(--mesure); color: var(--muted); }
.prose-inner li { margin-bottom: 0.45em; }

.citation {
  max-width: var(--mesure);
  margin: 0 0 1.4em;
  padding: 1.4rem 1.6rem;
  border-left: 2px solid var(--line-forte);   /* accent réservé au cliquable */
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.citation p {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.citation cite {
  display: block;
  margin-top: 0.8em;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- La SEULE bande sable de la page ------------------------------- */
.contact-band { background: var(--sable); }
.contact-band > div {
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: var(--pas) clamp(1.25rem, 4vw, 3rem);
}
.contact-band h2 { max-width: 30ch; }
.contact-band p { color: var(--muted); }
.contact-band .btn-primary { margin-top: 1.4rem; }

/* ---------- Agenda natif -------------------------------------------------- */
.booking-embed {
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--pas);
}
.booking-embed iframe {
  width: 100%;
  height: 790px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.booking-fallback { margin-top: 1rem; font-size: 0.9375rem; }
/* Sous 560 px l'iframe est masquée : l'unique action du site ne peut pas se
   réduire à un lien de texte, elle reprend LE composant bouton (règle 2). */
.booking-fallback--mobile { display: none; }

/* ---------- Pied de page : papier + filet, jamais un mur sombre ---------- */
.footer { border-top: 1px solid var(--line-forte); background: var(--cream); }
.footer-grid {
  display: grid;
  gap: var(--gouttiere);
  grid-template-columns: 1.2fr 1fr 1fr;
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) 2rem;
}
.footer-grid h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1em;
}
/* :not(.brand) est OBLIGATOIRE : la marque du pied est elle aussi un <a> de
   .footer-grid. Passée en flex, elle mettait son <small> sur la MÊME ligne que
   le monogramme, en travers du filet. Défaut introduit puis mesuré en capture. */
.footer-grid a:not(.brand) {
  display: flex;
  align-items: center;
  min-height: 44px;       /* D16 : 37 px mesurés avant correction */
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
}
.footer-grid a.brand { display: block; text-decoration: none; }
.footer-grid a:hover { color: var(--brand-deep); text-decoration: underline; }
.footer-grid p { font-size: 0.9375rem; color: var(--muted); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--gouttiere);
  justify-content: space-between;
  max-width: var(--mesure-large);
  margin: 0 auto;
  padding: 1.4rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ========================================================================== 
   BREAKPOINTS CONSTRUITS (règle 7) : 1440 ci-dessus · ~860 · 390
   ========================================================================== */
/* .values sort des 4 colonnes PLUS TÔT que le reste : à 1024 px, 4 colonnes
   de ~205 px cassaient les titres sur deux lignes. */
@media (max-width: 1100px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3 cartes en 2 colonnes = 3e orpheline : elle passe en bandeau */
  .service-grid > :nth-child(3):last-child { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --corps: 1.0625rem; --mesure: 34rem; } /* 17 px sur téléphone */
  .menu-toggle { display: inline-flex; }
  .navigation {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1.4rem;
    /* D21 : peint en --cream, le panneau se confondait avec la page et se
       superposait au hero sans frontière lisible. Seul panneau flottant du
       site, il prend la surface et l'ombre. */
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-soft);
  }
  .navigation.is-open { display: flex; }
  .navigation a { padding: 0.85em 0; border-bottom: 1px solid var(--line); }
  .navigation .nav-appointment {
    margin-top: 1rem;
    border-bottom: none;
    text-align: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }
  .nav-inner { position: relative; }
  .hero,
  .split,
  .split--reverse,
  .biography { grid-template-columns: minmax(0, 1fr); }
  /* En une colonne, le visuel passe TOUJOURS après le texte, quel que soit
     l'ordre du HTML : on ne laisse pas une image ouvrir un bloc sur mobile. */
  .split--reverse > .visuel,
  .split--reverse > .visuel--vide { grid-row: 2; }
  .split--reverse > .split-text { grid-row: 1; }
  .hero { padding-bottom: calc(var(--pas) * 0.7); }
  .booking-embed iframe { height: 850px; }
}

@media (max-width: 560px) {
  .values,
  .service-grid,
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .service-grid > :nth-child(3):last-child { grid-column: auto; }
  .contact-band h2 { max-width: none; }
  /* L'iframe d'agenda est inutilisable sous 560 px : on sert le lien direct. */
  .booking-embed iframe { display: none; }
  .booking-embed-frame { display: none; }
  .booking-fallback { display: none; }
  .booking-fallback--mobile { display: block; margin-top: 1.4rem; }
}

/* ---------- Plaque typographique --------------------------------------------
   Emplacement assumé là où un portrait irait : aucune photo d'Estelle n'existe
   et aucun visage ne sera fabriqué (VISUELS-CLIENT-V1 : un visage créé sans
   référence réelle n'est pas son portrait). On y pose le monogramme prescrit
   par son brand book — bas de casse Cormorant 500, filet de la largeur exacte
   du monogramme, aucun pictogramme — plutôt qu'un cadre vide ou une photo de
   banque d'images. Compte comme bande sable ? NON : elle n'est pas pleine
   largeur, elle reste un bloc d'image. */
.plaque {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.4rem;
  margin: 0;
  min-height: 320px;
  aspect-ratio: 4 / 5;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-img);
  background: var(--sable);
  text-align: center;
}
.plaque-mark {
  display: table;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.plaque-mark::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.3em;
  background: var(--ink);
}
/* .plaque ne porte plus de paragraphe (D6). Règle conservée au cas où un
   texte y reviendrait un jour, au plancher de corps. */
.plaque p {
  max-width: 26rem;
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}
@media (max-width: 860px) { .plaque { aspect-ratio: auto; min-height: 260px; } }

/* D19 : les deux pages de cadre n'avaient AUCUN bouton de réservation visible
   à 860 et 390 px. Bouton sobre, sans introduire une seconde bande sable. */
.cta-sobre { margin: 2.2rem 0 0; max-width: none; }

/* D5 : champs d'identité de l'éditeur encore vides. Ils sont montrés comme des
   EMPLACEMENTS, jamais remplis par une valeur plausible, et ces deux pages ne
   sont pas publiables tant qu'ils le restent (voir DEPLOY.md). */
.champs-vides { list-style: none; margin: 0 0 1.4em; padding: 0; max-width: var(--mesure); }
.champs-vides li {
  padding: 0.55em 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  color: var(--muted);
}
.champs-vides span {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* Les titres sont en bas de casse (âme de marque), MAIS un sigle reste un
   sigle : « coach PNL » ne doit jamais s'afficher « coach pnl ». */
h1 .sigle, h2 .sigle, h3 .sigle { text-transform: uppercase; }
