/* =========================================================================
   Raphaëlle Lombard — feuille de style unique
   Mobile-first. Pensée pour un téléphone tenu à bout de bras, en plein jour,
   dans une allée de salon. Corps de texte 18 px minimum, contrastes AA,
   zones cliquables 56 px. Polices système : aucun fichier de police chargé.
   ========================================================================= */

/* ---------- Remise à zéro minimale ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Repères ----------
   Tous les couples de couleurs ci-dessous sont mesurés par
   outils/verifier-contrastes.py : aucun ne descend sous AA. */
:root {
  --encre:        #1A2B33;   /* texte courant      — 13,8:1 sur le fond doux */
  --encre-doux:   #40535C;   /* texte secondaire   —  7,5:1 sur le fond doux */
  --bleu:         #0D5266;   /* titres, bouton principal — 8,2:1 sur le fond  */
  --bleu-nuit:    #134E5E;   /* fin du dégradé d'en-tête                      */
  --accent:       #C2571F;   /* bouton d'inscription                          */
  --accent-sombre:#A54614;   /* survol du bouton d'inscription                */
  --fond:         #F5F9FA;
  --carte:        #FFFFFF;
  --trait:        #D3E0E5;
  --trait-fort:   #A8BFC7;

  /* Une couleur par nature de rendez-vous. Elles ne portent JAMAIS
     l'information à elles seules : la pastille affiche aussi le mot. */
  --type-cafe-patch:   #0D5266;
  --type-salon:        #8A5A00;
  --type-presentation: #5B4B8A;

  --rayon:  14px;
  --rayon-s: 10px;
  --cible:  56px;            /* hauteur minimale d'une zone cliquable */
  --ombre:  0 1px 2px rgba(26, 43, 51, .06), 0 4px 12px rgba(26, 43, 51, .07);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;       /* 18 px : plancher, jamais moins */
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.125rem 1.125rem 3rem;
}

a { color: var(--bleu); }

/* Contour de focus visible partout : indispensable au clavier et au lecteur d'écran */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================================
   IDENTITÉ — bandeau en dégradé, texte blanc
   ========================================================================= */
.profil {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 2.25rem;
  margin-bottom: 1.75rem;
  border-radius: var(--rayon);
  background: linear-gradient(160deg, var(--bleu) 0%, var(--bleu-nuit) 100%);
  color: #FFFFFF;
  box-shadow: var(--ombre);
}

.profil-photo {
  width: 9.5rem;
  height: 9.5rem;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.125rem;
  border: 4px solid rgba(255, 255, 255, .9);
  background: #2A6478;       /* couleur d'attente si la photo tarde ou manque */
}

/* Enseigne — signature au-dessus du nom.
   Elle doit se lire comme une marque, pas comme une ligne de texte : capitales
   très espacées, teinte adoucie, trait fin en dessous. Ce traitement n'est
   donné à RIEN d'autre sur la page, et surtout pas à la ligne LifeWave, qui
   reste en casse normale. NaturaFlux est l'enseigne de Raphaëlle, LifeWave la
   marque qu'elle représente : les confondre serait une faute.
   18 px comme partout — c'est l'espacement et la casse qui font la différence
   d'échelle, pas une taille sous le plancher. */
.profil-enseigne {
  font-size: 1.125rem;       /* 18 px : le plancher tient ici aussi */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .28em;
  text-indent: .28em;        /* rattrape l'espace ajouté après la dernière lettre */
  line-height: 1.3;
  color: #B8D4DE;            /* 5,6:1 sur le début du dégradé */
  margin-bottom: .875rem;
  padding-bottom: .75rem;
  position: relative;
}

.profil-enseigne::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3rem;
  height: 1px;
  margin-left: -1.5rem;
  background: rgba(255, 255, 255, .45);
}

.profil h1 {
  font-size: 1.875rem;       /* 30 px */
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #FFFFFF;
}

/* La marque représentée : casse normale, aucun espacement de caractères,
   nettement détachée du nom. Ne jamais lui donner le traitement de l'enseigne. */
.profil-role {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: .625rem;
  color: #FFFFFF;
}

.profil-phrase {
  font-size: 1.125rem;
  margin-top: .875rem;
  color: #EAF3F6;            /* 11,7:1 sur le dégradé */
  text-wrap: pretty;
}

/* =========================================================================
   BOUTONS
   Empilés, pleine largeur, jamais côte à côte : un doigt, une cible.
   ========================================================================= */
.boutons {
  display: flex;
  flex-direction: column;
  gap: .75rem;               /* 12 px entre deux cibles voisines */
  margin-bottom: 2.5rem;
}

.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--cible);
  padding: .875rem 1.125rem;
  border: 2px solid var(--bleu);
  border-radius: var(--rayon-s);
  background: var(--carte);
  color: var(--bleu);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(26, 43, 51, .05);
}

.btn-principal {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #FFFFFF;
}

/* Bouton d'inscription : accent chaud.
   Le libellé est en 19 px gras — ce n'est pas décoratif. À cette taille et
   cette graisse, le texte relève du « grand texte » au sens WCAG, dont le
   seuil AA est 3:1 ; le couple blanc sur #C2571F mesure 4,49:1 et le passe
   donc largement. En 18 px maigre il serait resté 0,01 sous le seuil des
   petits textes. Ne pas réduire la taille ni la graisse sans revoir la couleur. */
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  font-size: 1.1875rem;      /* 19 px */
  font-weight: 700;
}

/* Second niveau d'information (numéro, ville, date) : plus discret sans
   jamais descendre sous 18 px, donc joué sur la graisse et la couleur. */
.btn-precision {
  display: block;
  font-weight: 400;
  color: var(--encre-doux);
  margin-top: .125rem;
}
.btn-principal .btn-precision,
.btn-accent .btn-precision { color: #F2E6DE; }
.btn-principal .btn-precision { color: #E3EEF2; }

.btn:active { transform: translateY(1px); }

/* Le survol n'est qu'un bonus : rien d'essentiel n'y est caché */
@media (hover: hover) {
  .btn:hover { background: #EDF4F6; }
  .btn-principal:hover { background: var(--bleu-nuit); }
  .btn-accent:hover { background: var(--accent-sombre); border-color: var(--accent-sombre); }
}

/* =========================================================================
   ÉVÉNEMENTS
   ========================================================================= */
.evenements { margin-bottom: 2.5rem; }
.evenements[hidden] { display: none; }

.evenements h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--bleu);
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--trait);
}

/* Précise en une ligne pourquoi ces rendez-vous sont à part */
.section-note {
  font-size: 1.125rem;
  color: var(--encre-doux);
  margin-bottom: 1rem;
}

/* ---------- La carte ----------
   Une couleur par nature de rendez-vous, portée par --couleur-type :
   elle teinte le liseré de gauche et la pastille. La pastille affiche
   TOUJOURS le mot (« Café-patch », « Salon », « Présentation ») : imprimée
   en noir et blanc, ou vue par quelqu'un qui distingue mal les couleurs,
   la carte reste lisible sans la teinte. */
.evenement {
  --couleur-type: var(--type-cafe-patch);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-left: 6px solid var(--couleur-type);
  border-radius: var(--rayon);
  padding: 1.125rem 1.125rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--ombre);
}

.evenement[data-type="salon"]        { --couleur-type: var(--type-salon); }
.evenement[data-type="presentation"] { --couleur-type: var(--type-presentation); }

.type-pastille {
  display: inline-block;
  padding: .1875rem .75rem;
  margin-bottom: .625rem;
  border-radius: 999px;
  background: var(--couleur-type);
  color: #FFFFFF;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.evenement-date {
  font-size: 1.5rem;         /* la date en gros : c'est ce qu'on cherche */
  font-weight: 700;
  line-height: 1.2;
  color: var(--encre);
}

.evenement-titre {
  font-size: 1.375rem;
  line-height: 1.25;
  margin-top: .25rem;
  color: var(--bleu);
}

.evenement-lieu {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: .5rem;
}

/* L'adresse ne doit JAMAIS être tronquée : un numéro de rue perdu, c'est
   quelqu'un qui ne trouve pas la porte. Elle passe à la ligne autant de fois
   qu'il le faut, et aucune règle de coupure ou d'ellipse ne s'y applique.
   overflow-wrap coupe au besoin un mot plus large que l'écran. */
.evenement-adresse {
  font-size: 1.125rem;
  color: var(--encre-doux);
  margin-top: .125rem;
  overflow-wrap: break-word;
  white-space: normal;
  text-overflow: clip;
}

.evenement-infos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .875rem;
}

/* Les étiquettes non plus ne se tronquent pas : un tarif ou un horaire
   long doit rester lisible en entier sur un écran étroit. */
.etiquette {
  display: inline-block;
  max-width: 100%;
  padding: .3125rem .75rem;
  border-radius: var(--rayon-s);
  background: #EAF2F4;
  border: 1px solid var(--trait);
  color: var(--encre-doux);
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: break-word;
}

/* Bouton d'inscription à l'intérieur d'une carte */
.btn-inscription { margin-top: 1rem; }

/* ---------- Affiche ----------
   Deux gestes distincts, deux cibles séparées : la vignette agrandit,
   le bouton télécharge. On ne mélange pas les deux sur une même zone,
   sinon un appui hésitant déclenche un téléchargement non voulu. */
.affiche { margin-top: 1.125rem; }

.affiche-voir {
  display: block;
  text-decoration: none;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-s);
  overflow: hidden;
}

.affiche-voir img {
  width: 100%;
  height: auto;
  background: #E4EDF0;       /* place réservée : la page ne saute pas */
}

.affiche-legende {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible);
  padding: .75rem 1rem;
  background: #EAF2F4;
  color: var(--bleu);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}

.affiche-telecharger {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible);
  margin-top: .75rem;         /* 12 px : sépare les deux cibles */
  padding: .75rem 1rem;
  border: 2px solid var(--bleu);
  border-radius: var(--rayon-s);
  background: var(--bleu);
  color: #FFFFFF;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

@media (hover: hover) {
  .affiche-voir:hover .affiche-legende { background: #DDE9EC; }
  .affiche-telecharger:hover { background: var(--bleu-nuit); }
}

/* ---------- Aucun rendez-vous ---------- */
.evenements-repli {
  background: var(--carte);
  border: 1px dashed var(--trait-fort);
  border-radius: var(--rayon);
  padding: 1.25rem;
  font-size: 1.125rem;
  color: var(--encre-doux);
}
.evenements-repli[hidden] { display: none; }
.evenements-repli a { font-weight: 700; white-space: nowrap; }

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.pied {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
  text-align: center;
}

/* La cible reste à 56 px, y compris pour un simple lien de bas de page.
   overflow-wrap laisse l'adresse de courriel se couper plutôt que déborder
   sur un écran de 320 px. */
.pied a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible);
  max-width: 100%;
  padding: .5rem 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pied-mention {
  font-size: 1.125rem;       /* les mentions aussi : jamais sous 18 px */
  color: var(--encre-doux);
  margin-top: .25rem;
}

/* Logo de la marque : discret, en pied de page uniquement, jamais en en-tête.
   Le site est personnel et non officiel ; la mention qui l'accompagne le dit. */
.pied-marque {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
}

/* Le fichier source comporte de larges marges blanches : à 120 px le sigle
   devenait minuscule. 170 px lui rendent une taille lisible sans pour autant
   le mettre en avant — il reste un pied de page, pas une caution. */
.pied-logo {
  width: 170px;
  height: auto;
  margin: 0 auto .75rem;
  opacity: .9;
}

/* =========================================================================
   PAGE MENTIONS LÉGALES
   ========================================================================= */
.texte h1 { font-size: 1.75rem; line-height: 1.25; margin-bottom: 1.25rem; color: var(--bleu); }
.texte h2 {
  font-size: 1.3125rem;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: .5rem;
  color: var(--bleu);
}
.texte p  { margin-bottom: .75rem; }
.texte ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
.texte li { margin-bottom: .375rem; }

.retour {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  margin-bottom: .5rem;
  font-weight: 600;
}

/* =========================================================================
   ÉCRANS PLUS LARGES — le téléphone reste la référence, on élargit ensuite
   ========================================================================= */
@media (min-width: 40rem) {
  .page { padding: 2rem 1.5rem 4rem; }
  .profil { padding: 2.5rem 2rem 2.75rem; }
  .profil h1 { font-size: 2.25rem; }
  .profil-photo { width: 11rem; height: 11rem; }
}

/* ---------- Respect des réglages système ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:active { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --encre-doux: #2B3A41; --trait: #7E959D; --trait-fort: #5C7079; }
}

/* ---------- Impression : la couleur ne doit rien porter seule ---------- */
@media print {
  body { background: #FFFFFF; }
  .profil { background: none; color: #000000; border: 1px solid #000000; }
  .profil h1, .profil-role, .profil-phrase { color: #000000; }
  .type-pastille { background: none; color: #000000; border: 2px solid #000000; }
  .evenement { box-shadow: none; border-left: 6px solid #000000; }
  .boutons { display: none; }
}