/* =========================================================
   SITE ANAÏS TALLET — VERSION ORDINATEUR
   ---------------------------------------------------------
   Styles généraux + ordinateur.
   Les adaptations mobile sont dans mobile.css.
   ========================================================= */

/* 1) VARIABLES DE COULEURS */
:root{
  --creme:#fbf5ed;
  --creme-carte:#f7eee3;
  --bleu:#0d447d;
  --bleu-clair:#d7e1ed;
  --bleu-moyen:#9fb3cc;
  --texte:#202936;
}

/* 2) RÉGLAGES GÉNÉRAUX */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--creme);
  color:var(--texte);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.55;
}
img{display:block;max-width:100%}
a{color:inherit}

/* Largeur max des grandes sections. 1180px = largeur, pas hauteur. */
.conteneur{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}

/* 3) NAVIGATION — masquée pour l'instant */
.navigation{
  display:flex;
  justify-content:center;
  gap:42px;
  padding:22px 18px;
  color:var(--bleu);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.9rem;
}
.navigation a{text-decoration:none}
.navigation-masquee{display:none}

/* 4) HERO / ÉCRAN D'OUVERTURE */
.hero{
  position:relative;
  height:100vh;
  min-height:700px;
  display:grid;
  place-items:center;
  overflow:visible;
  padding:0 20px;
}

/* Déplace tout le bloc central.
   Négatif = remonte ; positif = descend. */
.hero-contenu{
  position:relative;
  z-index:4;
  text-align:center;
  transform:translateY(-15px);
}

/* Nom Anaïs Tallet */
.hero h1{
  margin:0;
  color:var(--bleu);
  font:400 clamp(6.4rem,10vw,9.6rem)/.9 "Cormorant Garamond",serif;
}

/* Sous-titre Psychologue clinicienne */
.profession{
  margin:20px 0 0;
  color:var(--bleu);
  font-size:clamp(1.55rem,2.3vw,2.15rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  font-family:"Montserrat",sans-serif;
  font-weight:500;
}

.accroche{
  margin:10px 0 0;
  font-size:clamp(1.05rem,1.8vw,1.35rem);
}

/* 5) SÉPARATEUR PRINCIPAL */
.separateur{
  display:flex;
  align-items:center;
  gap:14px;
  width:520px;
  max-width:70vw;
  margin:14px auto 0;
}
.separateur::before,
.separateur::after{
  content:"";
  height:2px;
  flex:1;
  background:#8fa9c8;
}
.separateur span{
  width:12px;
  height:12px;
  flex:0 0 12px;
  border-radius:50%;
  background:#8fa9c8;
}

/* 6) CITATION
   margin-top de .citation-yalom = espace séparateur/citation
   margin-top de .citation-auteur = espace citation/auteur
   line-height = interligne de la citation */
.citation-yalom{
  margin:14px auto 0;
  max-width:760px;
  padding:0 18px;
  text-align:center;
  color:var(--texte);
  font-family:Georgia,"Times New Roman",serif;
}
.citation-yalom p{
  margin:0;
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  line-height:1.55;
  font-style:italic;
}
.citation-yalom .citation-auteur{
  margin-top:6px;
  font-size:clamp(.95rem,1.35vw,1.05rem);
  line-height:1.4;
}
.citation-yalom cite{font-style:italic}

/* 7) LOGOS ET DÉCORS */
.logo-tete{
  position:absolute;
  z-index:5;
  top:65px;
  left:max(70px,calc((100vw - 1180px)/2 + 55px));
  width:158px;
}
.botanique-droite{
  position:absolute;
  z-index:4;
  right:18px;
  top:255px;
  width:180px;
  opacity:.78;
}
.decor{position:absolute;z-index:1;pointer-events:none}
.decor-top{top:0;right:0;width:520px;height:470px}
.decor-left{left:0;bottom:-260px;width:420px;height:900px;opacity:0.95;
/* Fondu uniquement sur la partie basse de la vague */
    -webkit-mask-image: linear-gradient(to bottom,black 0%,black 52%,transparent 72%);
    mask-image: linear-gradient(to bottom,black 0%,black 52%,transparent 72%);
}

/* 8) ESPACE ENTRE HERO ET ACCOMPAGNEMENTS */
.desktop-spacer{
  display:block;
  height:0px;
}

/* 9) ACCOMPAGNEMENTS / 3 SPÉCIALITÉS */
.specialites{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:-150px;
  padding:56px 0 66px;
}
.specialite{text-align:center;padding:0 52px}
.specialite+.specialite{border-left:1px solid rgba(40,50,60,.2)}
.specialite>img{
  width:132px;
  height:132px;
  object-fit:cover;
  border-radius:50%;
  margin:0 auto 18px;
}
.specialite h2{
  margin:0;
  color:var(--bleu);
  font-size:1.2rem;
  line-height:1.45;
/*Même hauteur pour les trois titres afin d'aligner les séparateurs*/
  min-height:5.2rem;
}
.specialite ul{
  width:max-content;
  margin:18px auto 0;
  padding-left:20px;
  text-align:left;
  font-size:1.05rem;
}
.specialite p{margin-top:18px;font-size:1.05rem}
.mini-separateur{
  position:relative;
  width:76px;
  height:1px;
  background:#8fa9c8;
  margin:22px auto;
}
.mini-separateur::after{
  content:"";
  position:absolute;
  left:calc(50% - 3px);
  top:-3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6f90b6;
}

/* 10) PRÉSENTATION / UN ESPACE POUR VOUS */
/* TEMPORAIRE : présentation centrée sans photo du cabinet.
   Quand la photo officielle sera disponible :
   1) supprimer `display:none;` dans .photo-cabinet
   2) remettre .presentation en grille avec :
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:65px;
      align-items:center;
   La justification du texte peut rester active. */
.presentation{
  display:block;
  max-width:850px;
  margin:0 auto;
  padding:20px 0 55px;
}
.photo-cabinet{
  display:none;
  width:100%;
  aspect-ratio:1.45;
  object-fit:cover;
  border-radius:22px;
}
.presentation-texte{
  text-align:center;
}
.presentation-texte>p{
  margin-top:24px;
  font-size:1.08rem;
  text-align:justify;
  text-justify:inter-word;
}
.presentation h2,
.ouverture h2{
  margin:0;
  color:var(--bleu);
  font:400 clamp(2rem,3vw,3rem) Georgia,"Times New Roman",serif;
}
.separateur-gauche{
  display:flex;
  align-items:center;
  gap:10px;
  width:110px;
  margin:22px auto 0;
}
.separateur-gauche::before,
.separateur-gauche::after{
  content:"";
  height:1px;
  flex:1;
  background:#8fa9c8;
}
.separateur-gauche span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8fa9c8;
}
/*TEMPORAIRE: masquer la feuille et le texte*/
.valeurs{
  display:none;
  align-items:center;
  gap:14px;
  margin-top:28px;
  color:var(--bleu);
  font-weight:600;
}
.valeurs img{width:45px;height:45px;object-fit:contain}
.valeurs p{margin:0}

/* 11) OUVERTURE DU CABINET */
.ouverture{
  display:grid;
  grid-template-columns:82px 1fr 340px;
  gap:28px;
  align-items:center;
  margin-bottom:28px;
  padding:24px 28px;
  border:1px solid #8fa9c8;
  border-radius:18px;
  background:rgba(255,255,255,.26);
}
.ouverture h2{font-size:clamp(1.6rem,2.3vw,2.2rem)}
.ouverture p{margin:8px 0 0}
.ouverture >div:nth-child(2){padding-left:20px;}
.icone-cercle{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:50%;
  background:#e3ebf4;
  overflow:hidden;
}
.icone-cercle.grande{width:76px;height:76px}
.icone-cercle img{width:100%;height:100%;object-fit:contain}
.bouton-indisponible{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 22px;
  color:white;
  background:linear-gradient(135deg,#174f88,#315f94);
  border-radius:14px;
  text-decoration:none;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.bouton-indisponible strong{font-size:1.18rem}
.bouton-indisponible span{font-size:.92rem}

/* 12) INFORMATIONS PRATIQUES */
.informations{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:28px;
  border-radius:16px;
  background:rgba(244,234,222,.72);
}
.information{
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 28px;
}
.information+.information{border-left:1px solid rgba(30,50,70,.18)}
.information p{margin:0}

/* 13) PIED DE PAGE */
footer{
  display:flex;
  justify-content:center;
  gap:32px;
  padding:25px 20px;
  color:white;
  background:linear-gradient(90deg,#194d82,#315f94);
}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

/* 14) PAGES SIMPLES */
.page-simple{
  min-height:calc(100vh - 74px);
  display:grid;
  place-items:center;
  padding:50px 20px;
}
.carte-simple{
  width:min(760px,100%);
  padding:46px;
  border:1px solid rgba(13,68,125,.28);
  border-radius:22px;
  background:rgba(255,255,255,.38);
  text-align:center;
}
.carte-simple h1{
  color:var(--bleu);
  font:400 clamp(2.2rem,6vw,4rem) Georgia,"Times New Roman",serif;
}

/* Nom Anaïs Tallet sur la page /rdv/ — même identité typographique que l'accueil */
.nom-cabinet{
  margin:0 0 1.2rem;
  color:var(--bleu);
  font:400 clamp(3rem,7vw,5rem)/.9 "Cormorant Garamond",serif;
  letter-spacing:normal;
  text-transform:none;
}