/*
Theme Name: AIMES ESTHETIC
Theme URI: https://aimesthetics.naturalink.net
Author: EdenALOS
Description: Theme sur mesure reprenant le visuel du projet vanilla aimesthetics (cabinet du Dr Stephanie Malo, Morges). Palette espresso / creme / dore, titres serif, entierement responsive.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: aimesthetic
*/

/* ==========================================================================
   1. Jetons de design (charte AIMES ESTHETIC)
   ========================================================================== */
:root {
  --espresso: #3B2E25;
  --espresso-clair: #4A3A2F;
  --creme: #FAE8D1;
  --creme-clair: #FDF4E8;
  --teal: #004D51;
  --bordeaux: #5E2139;
  --sauge: #6F896C;
  --foret: #233326;
  --dore: #ECCEA1;
  --dore-fonce: #A98A5B;

  /* Bradent est la police de titres de la charte. Elle n'est pas libre de
     diffusion : si le fichier n'est pas depose dans assets/fonts/, la pile
     retombe sur des serif proches, ce qui preserve l'allure. */
  --font-titre: "Bradent", "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-corps: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --largeur: 1240px;
  --gouttiere: 24px;
  --rayon: 14px;
  --rayon-pilule: 999px;
  --transition: 200ms ease;
}

/* ==========================================================================
   2. Reinitialisation et base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-corps);
  font-size: 17px;
  line-height: 1.65;
  color: var(--espresso);
  background: var(--creme-clair);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p  { margin: 0 0 1.1em; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Lien d'evitement : accessibilite clavier */
.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--espresso); color: var(--creme);
  padding: 12px 20px; z-index: 999;
}
.saut-contenu:focus { left: 12px; top: 12px; }

/* Surtitre dore en petites capitales espacees (reprend la maquette) */
.surtitre {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dore);
  margin-bottom: 1.1em;
  display: block;
}
.section--claire .surtitre { color: #A98A5B; }

/* ==========================================================================
   3. Boutons
   ========================================================================== */
.bouton {
  display: inline-block;
  padding: 15px 32px;
  border-radius: var(--rayon-pilule);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.bouton:hover { transform: translateY(-1px); }
.bouton--principal { background: var(--dore); color: var(--espresso); }
.bouton--principal:hover { background: #F3DDBB; }
.bouton--fantome {
  background: transparent;
  color: var(--espresso);
  border-color: rgba(59, 46, 37, .35);
}
.section--sombre .bouton--fantome { color: var(--creme); border-color: rgba(250, 232, 209, .4); }
.bouton--fantome:hover { border-color: currentColor; }

/* ==========================================================================
   4. En-tete
   ========================================================================== */
.entete {
  background: var(--espresso);
  color: var(--creme);
  position: sticky; top: 0; z-index: 100;
}
.entete__inner {
  display: flex; align-items: center; gap: 28px;
  min-height: 86px;
}
.entete__logo img { height: 46px; width: auto; }
.entete__logo .texte { font-family: var(--font-titre); font-size: 1.5rem; color: var(--creme); }

.nav { margin-left: 18px; }
.nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav a { font-size: .95rem; opacity: .9; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav .current-menu-item > a { opacity: 1; border-bottom-color: var(--dore); }

.entete__droite { margin-left: auto; display: flex; align-items: center; gap: 22px; }

.langues { display: flex; align-items: center; gap: 8px; font-size: .9rem; letter-spacing: .06em; }
.langues .actif { color: var(--creme); border-bottom: 1px solid var(--dore); }
.langues .inactif { color: rgba(250, 232, 209, .45); transition: color var(--transition); }
a.langues__lien:hover, .langues a.inactif:hover { color: var(--creme); }

/* Bouton hamburger : masque au-dessus de 900px */
.burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 10px; margin-left: 4px;
}
/* Cible uniquement les barres, pas le libelle lecteur d'ecran. */
.burger span[aria-hidden] {
  display: block; width: 24px; height: 2px;
  background: var(--creme); margin: 5px 0;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span[aria-hidden]:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span[aria-hidden]:nth-of-type(2) { opacity: 0; }
.burger[aria-expanded="true"] span[aria-hidden]:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   5. Sections
   ========================================================================== */
.section { padding: clamp(56px, 9vw, 112px) 0; }
.section--sombre { background: var(--espresso); color: var(--creme); }
.section--claire { background: var(--creme); color: var(--espresso); }
.section--tres-claire { background: var(--creme-clair); }

.section__intro { max-width: 780px; }
.section--sombre .section__intro p { color: rgba(250, 232, 209, .82); }

/* Heros : degrade creme, texte centre (identique a la maquette mobile) */
.hero {
  background: linear-gradient(170deg, var(--creme) 0%, var(--creme-clair) 62%);
  text-align: center;
  padding: clamp(64px, 11vw, 132px) 0 clamp(56px, 9vw, 104px);
}
.hero__contenu { max-width: 860px; margin-inline: auto; }
.hero h1 { color: var(--espresso); }
.hero__accroche {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--teal);
  max-width: 620px;
  margin-inline: auto;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin-top: 34px;
}

/* ==========================================================================
   6. Cartes numerotees (bloc « Amont, pendant, aval »)
   ========================================================================== */
.grille { display: grid; gap: 22px; }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }

.carte {
  border: 1px solid rgba(250, 232, 209, .18);
  border-radius: var(--rayon);
  padding: 34px 30px 38px;
  background: rgba(250, 232, 209, .03);
}
.section--claire .carte {
  border-color: rgba(59, 46, 37, .16);
  background: rgba(255, 255, 255, .4);
}
.carte__numero {
  font-family: var(--font-titre);
  font-size: 1.7rem;
  color: var(--dore);
  display: block;
  margin-bottom: 18px;
}
.section--claire .carte__numero { color: #A98A5B; }
.carte h3 { margin-bottom: .6em; }
.carte p:last-child { margin-bottom: 0; }

/* ==========================================================================
   7. Pied de page
   ========================================================================== */
.pied {
  background: var(--foret);
  color: rgba(250, 232, 209, .8);
  padding: 64px 0 34px;
  font-size: .93rem;
}
.pied a:hover { color: var(--dore); }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pied h4 {
  font-family: var(--font-corps);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dore); margin-bottom: 1.1em;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .5em; }
.pied__bas {
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid rgba(250, 232, 209, .14);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .85rem; color: rgba(250, 232, 209, .55);
}

/* ==========================================================================
   7bis. Contenu construit avec l'editeur de blocs
   --------------------------------------------------------------------------
   Le contenu des pages est edite dans WordPress, pas code dans le theme.
   Ces regles donnent aux blocs natifs l'allure de la charte, pour que
   l'ajout d'une section depuis l'editeur soit deja au bon format.
   ========================================================================== */

/* Largeur de lecture par defaut ; « pleine largeur » deborde volontairement. */
.entree-contenu > * {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.entree-contenu > .alignfull {
  max-width: none;
  padding-inline: 0;
}
.entree-contenu > .alignwide { max-width: 1400px; }

/* Un groupe pleine largeur = une section : il reprend les fonds de la charte. */
.wp-block-group.alignfull > .wp-block-group__inner-container,
.wp-block-group.alignfull > :where(:not(.alignfull)) {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.wp-block-group.alignfull {
  padding-block: clamp(56px, 9vw, 112px);
}

/* Fonds : utilisables depuis l'editeur via les couleurs de la palette. */
.wp-block-group.has-espresso-background-color { color: var(--creme); }
.wp-block-group.has-espresso-background-color .surtitre { color: var(--dore); }
.wp-block-group.has-espresso-background-color a { color: var(--dore); }
.wp-block-group.has-creme-background-color,
.wp-block-group.has-creme-clair-background-color { color: var(--espresso); }

/* Le bandeau d'accueil. */
.wp-block-group.hero {
  background: linear-gradient(170deg, var(--creme) 0%, var(--creme-clair) 62%);
  text-align: center;
}
/* Specificite renforcee : sinon la largeur de section (1240px) l'emporte. */
.entree-contenu .wp-block-group.hero > * { max-width: 860px; margin-inline: auto; }
.wp-block-group.hero .wp-block-buttons { justify-content: center; }

/* Colonnes utilisees en cartes : on ajoute la classe « carte » a la colonne. */
.wp-block-column.carte {
  border: 1px solid rgba(59, 46, 37, .16);
  border-radius: var(--rayon);
  padding: 34px 30px 38px;
  background: rgba(255, 255, 255, .4);
}
.has-espresso-background-color .wp-block-column.carte {
  border-color: rgba(250, 232, 209, .18);
  background: rgba(250, 232, 209, .03);
}
.wp-block-column.carte > *:last-child { margin-bottom: 0; }

/* Boutons de l'editeur alignes sur ceux du theme. */
.wp-block-button__link {
  border-radius: var(--rayon-pilule);
  padding: 15px 32px;
  font-size: .95rem;
  font-weight: 500;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  border-width: 1px;
}

/* Espacement vertical du contenu edite. */
.entree-contenu > * + * { margin-top: 0; }
.wp-block-group.alignfull > .wp-block-group__inner-container > * { margin-bottom: 1.1em; }

/* Sur mobile les colonnes de l'editeur s'empilent : on garde l'ecart. */
@media (max-width: 781px) {
  .wp-block-columns { gap: 22px; }
}

/* ==========================================================================
   8. Contenu editorial (articles et pages WordPress)
   ========================================================================== */
.contenu { max-width: 780px; margin-inline: auto; }
.contenu img { border-radius: var(--rayon); margin-block: 1.5em; }
.contenu blockquote {
  border-left: 3px solid var(--dore);
  margin: 1.6em 0; padding-left: 22px;
  font-family: var(--font-titre); font-size: 1.25rem;
}
.contenu ul, .contenu ol { padding-left: 1.3em; }
.contenu a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 40px; }
.pagination .page-numbers {
  padding: 9px 15px; border-radius: var(--rayon-pilule);
  border: 1px solid rgba(59, 46, 37, .2);
}
.pagination .current { background: var(--espresso); color: var(--creme); border-color: var(--espresso); }

/* ==========================================================================
   9. Responsive
   ========================================================================== */

/* Tablette */
@media (max-width: 1000px) {
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

/* Mobile : la nav passe en panneau deroulant, comme sur la maquette */
@media (max-width: 900px) {
  .entete__inner { min-height: 72px; }
  .entete__logo img { height: 38px; }
  .burger { display: block; order: 3; }
  .entete__droite { gap: 14px; }

  /* Le CTA du header se comprimerait en pastille multiligne : on le retire,
     il reste presente dans le hero et dans le menu deroulant. Conforme a la
     maquette mobile, qui ne garde que le logo et le selecteur de langue. */
  .entete__droite .bouton--principal { display: none; }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--espresso);
    margin: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 260ms ease;
    border-top: 1px solid rgba(250, 232, 209, .12);
  }
  .nav.ouvert { max-height: 70vh; overflow-y: auto; }
  .nav ul { flex-direction: column; gap: 0; padding: 6px 0 14px; }
  .nav li { border-bottom: 1px solid rgba(250, 232, 209, .07); }
  .nav a { display: block; padding: 15px var(--gouttiere); border-bottom: 0; }
}

/* Telephone */
@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --gouttiere: 20px; }
  .grille--3, .grille--2 { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr; gap: 30px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .bouton { width: 100%; text-align: center; }
  .carte { padding: 28px 24px 30px; }
  .pied__bas { flex-direction: column; }
}

/* Respect de la preference de mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bouton:hover { transform: none; }
}

/* Classes WordPress requises pour la validation du theme */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .85rem; opacity: .75; }
.sticky, .gallery-caption, .bypostauthor { }