/* =========================================================================
   Hypnoduo - proposition de refonte
   Palette : vert profond apaisant, sable chaud, terracotta en accent.
   Mobile d'abord. Aucune dépendance : pas de Bootstrap, pas de framework.
   ========================================================================= */

:root {
  --vert-nuit:   #163F3B;
  --vert:        #2F7268;
  --vert-clair:  #6FA79C;
  --sable:       #F6F1E8;
  --creme:       #FDFBF7;
  --terracotta:  #C8785A;
  --texte:       #24322F;
  --texte-doux:  #5C6B67;
  --bord:        #E3DED3;

  --rayon:    18px;
  --rayon-sm: 12px;
  --ombre:    0 18px 40px -24px rgba(22, 63, 59, .45);
  --ombre-forte: 0 24px 60px -28px rgba(22, 63, 59, .55);

  --largeur: 1160px;
  --transition: .25s ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.15;
  color: var(--vert-nuit);
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }
a { color: var(--vert); }

.conteneur {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  background: var(--vert-nuit);
  color: #fff;
  padding: .8rem 1.2rem;
  z-index: 200;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* --- Titres de section ---------------------------------------------------- */

.chapeau {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--terracotta);
  margin-bottom: .8rem;
}
.chapeau--clair { color: #E8B9A6; }

.intro {
  max-width: 62ch;
  color: var(--texte-doux);
  font-size: 1.05rem;
  margin-bottom: 2.8rem;
}

.section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.section--sable { background: var(--sable); }

/* --- Boutons -------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

.bouton--grand { padding: 1rem 2rem; font-size: 1rem; }

.bouton--principal {
  background: var(--vert);
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(47, 114, 104, .9);
}
.bouton--principal:hover { background: var(--vert-nuit); transform: translateY(-2px); }

.bouton--fantome {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.bouton--fantome:hover { background: rgba(255, 255, 255, .14); }

.section .bouton--fantome,
.final .bouton--fantome { border-color: var(--vert); color: var(--vert); }
.section .bouton--fantome:hover,
.final .bouton--fantome:hover { background: rgba(47, 114, 104, .08); }

.bouton--clair { background: var(--creme); color: var(--vert-nuit); }
.bouton--clair:hover { transform: translateY(-2px); }

/* --- En-tête -------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 251, 247, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.entete.est-defilee {
  border-bottom-color: var(--bord);
  box-shadow: 0 10px 30px -26px rgba(22, 63, 59, .8);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
}

.marque { text-decoration: none; line-height: 1.1; }
.marque__nom {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vert-nuit);
}
.marque__sous {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.menu { display: flex; align-items: center; gap: 1.7rem; }
.menu a {
  text-decoration: none;
  color: var(--texte);
  font-size: .93rem;
  font-weight: 500;
  position: relative;
}
.menu a:not(.bouton)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--terracotta);
  transition: width var(--transition);
}
.menu a:not(.bouton):hover::after { width: 100%; }
.menu__rdv { color: #fff; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px; width: 20px;
  margin-inline: auto;
  background: var(--vert-nuit);
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Héros ---------------------------------------------------------------- */

.heros {
  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 12vw, 8rem) 0 clamp(3.5rem, 9vw, 6rem);
  text-align: center;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #3A8578 0%, #22544E 45%, #163F3B 100%);
}

/* Vagues douces en bas du héros : l'esprit bien-être sans image lourde. */
.heros::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(40px, 7vw, 90px);
  background: var(--creme);
  clip-path: ellipse(75% 100% at 50% 100%);
}

.heros__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 40% at 15% 20%, rgba(200, 120, 90, .35), transparent 70%),
    radial-gradient(45% 45% at 85% 10%, rgba(111, 167, 156, .35), transparent 70%);
}

/* Le titre est une vraie phrase, pas un slogan de trois mots : il lui faut de
   la largeur pour tomber sur trois lignes et non sur cinq. */
.heros__interieur { position: relative; max-width: 940px; margin-inline: auto; }

.heros h1 { color: #fff; margin-bottom: 1.2rem; }

.heros__surtitre {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .76rem;
  font-weight: 600;
  color: #BFDBD4;
  margin-bottom: 1.4rem;
}

.heros__texte {
  font-size: clamp(1rem, 2.2vw, 1.16rem);
  color: rgba(255, 255, 255, .9);
  max-width: 56ch;
  margin: 0 auto 2.2rem;
}

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
}

.heros__note {
  margin-top: 1.6rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, .72);
}

/* --- Preuve sociale ------------------------------------------------------- */
/* Placée haut et volontairement sobre : 55 personnes qui parlent valent mieux
   que n'importe quel superlatif qu'on écrirait soi-même. */

.preuve {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 2rem;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .92);
  font-size: .9rem;
  text-decoration: none;
  transition: background var(--transition);
}
.preuve:hover { background: rgba(255, 255, 255, .2); }
.preuve strong { color: #fff; }
.preuve__etoiles { color: #F2C57C; letter-spacing: .1em; font-size: 1rem; }

/* --- Réassurance ---------------------------------------------------------- */

.reassurance { padding: 2.5rem 0 1rem; }

.reassurance__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.5rem;
}

.reassurance__item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.reassurance__item svg {
  flex: none;
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--vert);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reassurance__item p { margin: 0; font-size: .92rem; color: var(--texte-doux); }
.reassurance__item strong { color: var(--vert-nuit); }

/* --- Mon approche --------------------------------------------------------- */

.approche { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.approche__texte { max-width: 68ch; }

/* La phrase qui doit accrocher : on lui donne le corps d'un chapô de magazine. */
.approche__phrase {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--vert-nuit);
  margin-bottom: 1.6rem;
}

.approche p:not(.approche__phrase):not(.chapeau):not(.exergue) { color: var(--texte-doux); }

/* La phrase de marque. Elle revient ailleurs sous d'autres formes, ici elle
   est posée seule pour qu'on la retienne. */
.exergue {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.3;
  color: var(--terracotta);
  margin: 2rem 0 1.5rem;
}

.signature {
  margin-top: 2.5rem;
  padding: 1.8rem 2rem;
  background: var(--sable);
  border-radius: var(--rayon);
  border-left: 4px solid var(--terracotta);
}
.signature__nom {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--vert-nuit);
  margin-bottom: .5rem;
}
.signature p:last-child { margin: 0; color: var(--texte-doux); font-size: .96rem; }

/* --- Cartes --------------------------------------------------------------- */
/* Sans photographie : les images d'illustration génériques (la pomme et son
   mètre ruban, le personnage 3D sous ses livres) tirent tout le site vers le
   bas. Une icône dessinée et de la typographie valent mieux, en attendant de
   vraies photos du cabinet. */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem;
}

.carte {
  display: flex;
  flex-direction: column;
  background: var(--creme);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.8rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre);
  border-color: var(--vert-clair);
}

.carte__icone {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--sable);
}
.section--sable .carte__icone { background: #fff; }
.carte__icone svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--vert);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carte p { color: var(--texte-doux); font-size: .95rem; flex: 1; }

.note-sous-cartes {
  margin-top: 2rem;
  font-size: .95rem;
  color: var(--texte-doux);
}

.lien-fleche {
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  color: var(--vert);
}
.lien-fleche::after { content: ' →'; transition: margin var(--transition); }
.lien-fleche:hover::after { margin-left: .25rem; }

/* --- Hypnoduo ------------------------------------------------------------- */

.duo {
  background: linear-gradient(135deg, var(--vert-nuit), #24605A);
  color: #fff;
  padding: clamp(3.5rem, 9vw, 6rem) 0;
}

.duo__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.duo h2 { color: #fff; }
.duo p { color: rgba(255, 255, 255, .88); max-width: 54ch; }

.duo__image img {
  width: 100%;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
}

/* Emplacement photo assumé. Mieux vaut un cadre qui dit ce qui doit venir
   qu'une image de banque qui raconte autre chose. À supprimer avec la vraie
   photo. */
.photo-attendue {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .9rem;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  text-align: center;
  border: 2px dashed rgba(255, 255, 255, .35);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .06);
}
.photo-attendue svg {
  width: 42px; height: 42px;
  fill: none;
  stroke: rgba(255, 255, 255, .6);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.photo-attendue p { margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .7); }
.photo-attendue strong {
  display: block;
  color: rgba(255, 255, 255, .95);
  font-size: 1rem;
  margin-bottom: .25rem;
}

/* --- Étapes --------------------------------------------------------------- */

.etapes {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.6rem;
  counter-reset: etape;
}

.etapes li {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.6rem;
}

.etapes__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--sable);
  color: var(--vert);
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: .9rem;
}
.section--sable .etapes__num { background: var(--creme); }

.etapes p { margin: 0; color: var(--texte-doux); font-size: .95rem; }

.avertissement {
  max-width: 78ch;
  font-size: .9rem;
  color: var(--texte-doux);
  border-left: 3px solid var(--terracotta);
  padding-left: 1.1rem;
  margin: 0;
}

/* --- Qui suis-je ---------------------------------------------------------- */

.apropos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

.apropos__portrait img {
  width: 100%;
  max-width: 300px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.apropos__badges {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.4rem;
  max-width: 300px;
}
.apropos__badges span {
  background: var(--sable);
  border-radius: var(--rayon-sm);
  padding: .6rem .9rem;
  font-size: .85rem;
  color: var(--vert-nuit);
  font-weight: 500;
}

blockquote {
  margin: 2rem 0 0;
  padding: 1.6rem 1.8rem;
  background: var(--sable);
  border-radius: var(--rayon);
  font-family: 'Fraunces', serif;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--vert-nuit);
}
blockquote cite {
  display: block;
  margin-top: .8rem;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-style: normal;
  color: var(--texte-doux);
}

/* --- Façade de vidéo ------------------------------------------------------ */
/* Rien n'est chargé depuis YouTube avant le clic : ni image, ni script, ni
   traceur. La façade est dessinée en CSS. */

.video {
  position: relative;
  margin-top: 1.8rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon);
  overflow: hidden;
  background: linear-gradient(135deg, var(--vert-nuit), #2F7268 70%, var(--vert-clair));
  box-shadow: var(--ombre);
}

.video iframe { width: 100%; height: 100%; border: 0; display: block; }

.video__lecture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
}

.video__triangle {
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
  transition: transform var(--transition);
}
.video__triangle::after {
  content: '';
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 20px solid var(--vert-nuit);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.video__lecture:hover .video__triangle { transform: scale(1.08); }

.video__legende {
  position: absolute;
  left: 1.2rem; bottom: 1rem;
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: .88rem;
  pointer-events: none;
}

/* --- Se former (univers secondaire) --------------------------------------- */
/* Un bandeau, pas une section : la page d'accueil doit convertir la personne
   qui cherche de l'aide, pas disperser vers un autre métier. */

.bandeau-former {
  background: var(--vert-nuit);
  color: rgba(255, 255, 255, .85);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.bandeau-former__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.bandeau-former h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); }
.bandeau-former p { margin: 0; max-width: 52ch; }
.bandeau-former .chapeau { color: #E8B9A6; }
.bandeau-former .bouton--fantome { border-color: rgba(255,255,255,.55); color: #fff; }
.bandeau-former .bouton--fantome:hover { background: rgba(255,255,255,.14); }

/* --- Formulaire ----------------------------------------------------------- */

.formulaire__bloc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.formulaire__intro p { color: var(--texte-doux); max-width: 46ch; }

.formulaire {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 2rem;
  box-shadow: var(--ombre);
}

.champ { margin-bottom: 1.2rem; }
.champ label { display: block; font-weight: 500; font-size: .92rem; margin-bottom: .4rem; }

.champ input[type="text"],
.champ input[type="email"],
.champ textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  font: inherit;
  font-size: .95rem;
  background: var(--creme);
  color: var(--texte);
}
.champ input:focus, .champ textarea:focus { border-color: var(--vert-clair); }

.champ--cases {
  border: 0;
  padding: 0;
  margin-bottom: 1.2rem;
}
.champ--cases legend { font-weight: 500; font-size: .92rem; margin-bottom: .5rem; padding: 0; }
.champ--cases label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  margin-bottom: .3rem;
}

.champ--rgpd {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .86rem;
  color: var(--texte-doux);
  margin-bottom: 1.6rem;
}
.champ--rgpd input { margin-top: .25rem; flex: none; }

/* --- Tarifs --------------------------------------------------------------- */

.tarifs {
  display: grid;
  gap: .9rem;
  max-width: 860px;
}

.tarif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.2rem 1.5rem;
}
.tarif h3 { margin: 0 0 .2rem; }
.tarif p { margin: 0; font-size: .9rem; color: var(--texte-doux); }

.tarif--vedette {
  border-color: var(--vert-clair);
  box-shadow: var(--ombre);
}

.tarif__prix {
  font-family: 'Fraunces', serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--vert);
  white-space: nowrap;
}
.tarif__prix--petit { font-size: 1rem; color: var(--texte-doux); }

.tarifs__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.tarifs__pied p { margin: 0; font-size: .88rem; color: var(--texte-doux); }

.tarifs__autres {
  max-width: 860px;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bord);
  font-size: .9rem;
  color: var(--texte-doux);
}
.tarifs__autres strong { color: var(--vert-nuit); }

/* --- Témoignages ---------------------------------------------------------- */

.temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
}

.temoignage {
  margin: 0;
  background: var(--sable);
  border-radius: var(--rayon);
  padding: 1.8rem;
}
.temoignage blockquote {
  margin: 0;
  padding: 0;
  background: none;
  font-size: 1rem;
  color: var(--texte);
}
.temoignage blockquote::before { content: '« '; color: var(--terracotta); }
.temoignage blockquote::after  { content: ' »'; color: var(--terracotta); }
.temoignage figcaption {
  margin-top: 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--vert);
}
.temoignage__etoiles {
  display: block;
  color: #D9A441;
  letter-spacing: .12em;
  margin-bottom: .7rem;
}

.temoignages__pied { margin-top: 2rem; }

/* --- Précision Hypnoduo --------------------------------------------------- */

/* Le sens premier du nom, celui qui parle à tous les visiteurs et pas
   seulement à ceux qui réserveront une séance à deux praticiens. */
.duo__phrase {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.45;
  color: #fff;
}

/* Qui est la seconde voix : le visiteur doit savoir qui il trouvera en face. */
.duo__qui {
  border-left: 3px solid #E8B9A6;
  padding-left: 1.1rem;
}
.duo__qui strong { color: #fff; }

.duo__precision {
  font-size: .92rem;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--rayon-sm);
  padding: .9rem 1.1rem;
}
.duo__precision strong { color: #fff; }

/* --- Appel final ---------------------------------------------------------- */

.final {
  background: var(--sable);
  padding: clamp(3.5rem, 9vw, 6rem) 0;
}

.final__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 2rem;
}

.coordonnees { list-style: none; margin: 0; padding: 0; }
.coordonnees li {
  padding: .6rem 0;
  border-top: 1px solid var(--bord);
  font-size: .93rem;
  color: var(--texte-doux);
}
.coordonnees strong { color: var(--vert-nuit); margin-right: .4rem; }

.final__carte iframe {
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  display: block;
}

/* Façade de carte : dessinée en CSS, Google n'est appelé qu'au clic. */
.carte-facade {
  position: relative;
  height: 340px;
  border-radius: var(--rayon);
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, #DCE8E2, #C9DDD5 60%, #E7DCCB);
  box-shadow: var(--ombre);
}

.carte-facade__bouton {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--vert-nuit);
  text-align: center;
  padding: 1.5rem;
}
.carte-facade__bouton svg {
  width: 40px; height: 40px;
  fill: none;
  stroke: var(--vert);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.carte-facade__bouton span { display: block; font-size: .92rem; color: var(--texte-doux); }
.carte-facade__bouton strong {
  display: block;
  font-size: 1.05rem;
  color: var(--vert-nuit);
  margin-bottom: .2rem;
}
.carte-facade__bouton:hover svg { stroke: var(--terracotta); }

.carte-facade__note {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: .6rem 1rem;
  background: rgba(255, 255, 255, .8);
  font-size: .78rem;
  color: var(--texte-doux);
  text-align: center;
  pointer-events: none;
}

/* --- Pied de page --------------------------------------------------------- */

.pied {
  background: var(--vert-nuit);
  color: rgba(255, 255, 255, .8);
  padding: 3rem 0 1.5rem;
  font-size: .92rem;
}

.pied__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.pied__marque {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: .4rem;
}

.pied__liens { display: flex; flex-direction: column; gap: .5rem; }
.pied__liens a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.pied__liens a:hover { color: #fff; text-decoration: underline; }

.pied__reseaux { display: flex; gap: .8rem; }
.pied__reseaux a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  transition: background var(--transition);
}
.pied__reseaux a:hover { background: rgba(255, 255, 255, .2); }
.pied__reseaux svg { width: 20px; height: 20px; fill: #fff; }

.pied__bas {
  margin: 1.5rem 0 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.pied__bas span { display: block; margin-top: .6rem; }

/* --- Barre d'action mobile ------------------------------------------------ */
/* Sur téléphone, le bouton de prise de rendez-vous reste toujours à portée de
   pouce : c'est là que se joue l'essentiel des demandes. */

.barre-mobile {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  gap: .6rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(253, 251, 247, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--bord);
}
.barre-mobile .bouton--principal { flex: 1; }

/* Appeler d'un pouce : sur un téléphone, beaucoup préfèrent la voix au
   formulaire, et une bonne partie de la patientèle n'est pas jeune. */
.barre-mobile__tel {
  flex: none;
  width: 52px;
  padding: 0;
  border: 1.5px solid var(--vert);
  background: transparent;
}
.barre-mobile__tel svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--vert);
  stroke-width: 1.7;
  stroke-linejoin: round;
}

/* --- Apparition au défilement --------------------------------------------- */

.a-reveler {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.a-reveler.est-visible { opacity: 1; transform: none; }

/* =========================================================================
   Écrans moyens et grands
   ========================================================================= */

@media (min-width: 760px) {
  .duo__grille       { grid-template-columns: 5fr 7fr; gap: 3.5rem; }
  .apropos           { grid-template-columns: 300px 1fr; gap: 3.5rem; }
  .final__grille     { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .formulaire__bloc  { grid-template-columns: 1fr 1.2fr; gap: 3.5rem; align-items: start; }
  .pied__grille      { grid-template-columns: 2fr 1fr auto; align-items: start; }
}

/* =========================================================================
   Téléphones : menu déroulant et barre d'action
   ========================================================================= */

@media (max-width: 900px) {
  .burger { display: flex; }

  .menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 1.25rem;
    background: var(--creme);
    border-bottom: 1px solid var(--bord);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
  }
  .menu.est-ouvert { max-height: 26rem; padding: .5rem 1.25rem 1.5rem; }

  .menu a {
    padding: .9rem 0;
    border-bottom: 1px solid var(--bord);
    font-size: 1rem;
  }
  .menu a:not(.bouton)::after { display: none; }
  .menu__rdv { margin-top: 1rem; border-bottom: 0; }

  .barre-mobile { display: flex; }
  body { padding-bottom: 5rem; }

  .tarif { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .heros__actions .bouton { width: 100%; }
}

/* =========================================================================
   Accessibilité : on respecte le réglage système
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .a-reveler { opacity: 1; transform: none; }
}

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}