/*
Theme Name:   Bertin Child
Theme URI:    https://www.drs-lacroix-bertin.fr
Description:  Thème enfant de Kadence pour le cabinet du Dr Laura Bertin, orthodontiste à Écully. Porte le design system (direction B — grotesque, neutres chauds, hairlines) et le menu « MENU » déroulant.
Author:       Maxime
Template:     kadence
Version:      1.0.0
Text Domain:  bertin-child
*/

/* ==========================================================================
   1. Tokens — repris du design system (design-system-bertin.md)
   Ni noir pur ni blanc pur. Zéro accent. Hairlines, radius 0, aucune ombre.
   ========================================================================== */
:root {
  --ink:        #262521;   /* titres, texte fort, bordures */
  --ink-deep:   #1A1917;   /* hover boutons pleins */
  --body:       #5C574E;   /* corps de texte */
  --mute:       #8C8579;   /* micro-labels — DÉCORATIF uniquement */
  --line:       #D8D2C7;   /* filets, séparateurs */
  --greige:     #E5E0D7;   /* blocs alternés */
  --bone:       #F4F1EB;   /* fond principal */
  --ivory:      #FAF8F4;   /* panneaux clairs */

  /* Polices — hébergées localement via Kadence (RGPD).
     JetBrains Mono : à ajouter dans Kadence si absente, sinon fallback mono. */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --border: 1px solid var(--line);
  --pad:    clamp(20px, 5vw, 64px);
}

/* ==========================================================================
   2. Menu « MENU » déroulant  (le signature du header)
   Menu autonome : classes propres, indépendant de la plomberie Kadence.
   S'ouvre EN DESSOUS du header, ne pousse pas le contenu (position absolue).
   ========================================================================== */

.bertin-nav {
  position: relative;      /* ancre le panneau */
  display: flex;
  justify-content: flex-end;
}

/* --- Le déclencheur : le mot « MENU » --- */
.bertin-nav__toggle {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  /* Hérite police/taille/graisse du bloc Entête (Adv) ancêtre plutôt que
     de les fixer en dur — un bouton, par défaut, n'hérite PAS du parent
     (règle navigateur), d'où le besoin du shorthand `font` explicite. */
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink);
  line-height: 1;
}
.bertin-nav__toggle:hover { color: var(--body); }

/* Bascule du libellé MENU / FERMER piloté par aria-expanded */
.bertin-nav__toggle-close { display: none; }
.bertin-nav__toggle[aria-expanded="true"] .bertin-nav__toggle-open  { display: none; }
.bertin-nav__toggle[aria-expanded="true"] .bertin-nav__toggle-close { display: inline; }

/* --- Le panneau qui déroule --- */
.bertin-nav__panel {
  position: absolute;
  top: calc(100% + 1px);   /* juste sous le filet du header */
  right: 0;
  width: min(480px, 92vw);
  background: var(--bone);
  border: var(--border);
  /* état fermé */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 200;
}
.bertin-nav__panel[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Fallback si JS absent : [hidden] masque proprement */
.bertin-nav__panel[hidden] { display: none; }

/* --- Les liens empilés, hairlines, micro-labels --- */
.bertin-nav__link {
  display: block;
  padding: clamp(18px, 3vw, 28px) clamp(20px, 3vw, 32px);
  border-bottom: var(--border);
  /* Un <a> hérite déjà de son parent par défaut (contrairement à un
     bouton), mais on le rend explicite pour que ce soit lisible et
     pour ne rien laisser au hasard du DOM environnant. */
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--body);
  text-decoration: none;
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.bertin-nav__link:last-child { border-bottom: none; }
.bertin-nav__link:hover {
  background: var(--ivory);
  color: var(--ink);
  padding-left: clamp(26px, 3.6vw, 40px);
}
.bertin-nav__link[aria-current="page"] { color: var(--ink); }

/* --- Accessibilité : focus visible, jamais masqué --- */
.bertin-nav__toggle:focus-visible,
.bertin-nav__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .bertin-nav__panel,
  .bertin-nav__link { transition: none; }
}

/* ==========================================================================
   3. Garde-fous design system (rappels appliqués au front)
   ========================================================================== */
/* Aucun arrondi, aucune ombre nulle part dans le périmètre du menu */
.bertin-nav,
.bertin-nav * { border-radius: 0 !important; box-shadow: none !important; }

/* ==========================================================================
   4. Grille traitements — page pivot « Traitements »
   Reproduit la grille de la maquette (cellules, hairlines, listes → flèche).
   Scopé sous .bertin-treatments pour ne toucher QUE cette page.
   ========================================================================== */
.bertin-treatments {
  border-top: var(--border);
  margin-top: clamp(32px, 5vw, 56px);
}

/* la grille 2 colonnes enfant / adulte */
.bertin-treatments__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--border);
}
.bertin-treatments__cell {
  padding: clamp(28px, 4vw, 56px);
  border-bottom: var(--border);
}
.bertin-treatments__cell:nth-child(odd) { border-right: var(--border); }

.bertin-treatments__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--mute);
  margin: 0 0 8px;
}
.bertin-treatments__cell h3 {
  font-size: clamp(19px, 2.4vw, 28px);
  letter-spacing: -.02em;
  margin: 0 0 18px;
}

/* listes de liens en hairlines, flèche à droite */
.bertin-treatments__list { list-style: none; margin: 0; padding: 0; border-top: var(--border); }
.bertin-treatments__list li { border-bottom: var(--border); margin: 0; }
.bertin-treatments__list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: padding-left .18s ease;
}
.bertin-treatments__list a::after { content: "→"; color: var(--mute); font-family: var(--font-mono); font-size: 12px; }
.bertin-treatments__list a:hover { padding-left: 8px; }
.bertin-treatments__list a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* section Questions fréquentes — pleine largeur sous la grille */
.bertin-treatments__questions { border-top: var(--border); padding: clamp(28px, 4vw, 56px) 0 0; margin-top: 0; }

/* mobile : une colonne */
@media (max-width: 820px) {
  .bertin-treatments__grid { grid-template-columns: 1fr; }
  .bertin-treatments__cell:nth-child(odd) { border-right: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bertin-treatments__list a { transition: none; }
}

/* garde-fous : ni arrondi ni ombre */
.bertin-treatments, .bertin-treatments * { border-radius: 0 !important; box-shadow: none !important; }

/* ==========================================================================
   5. Liste de liens — cellules enfant/adulte de l'accueil (réutilisable)
   Bloc « Liste » standard + className "bertin-linklist" → reste éditable.
   ========================================================================== */
.bertin-linklist { list-style: none; margin: 24px 0 0; padding: 0; border-top: var(--border); }
.bertin-linklist li { margin: 0; border-bottom: var(--border); }
.bertin-linklist a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 0; font-size: 14px; color: var(--ink); text-decoration: none;
  transition: padding-left .18s ease;
}
.bertin-linklist a::after { content: "→"; color: var(--mute); font-family: var(--font-mono); font-size: 12px; }
.bertin-linklist a:hover { padding-left: 8px; }
.bertin-linklist a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bertin-linklist a { transition: none; } }