@import url('fonts.css');

/* ==========================================================================
   PREST ANGEL SECRÉTARIAT — Système de design « papeterie 1950-60 »
   Tokens, primitives, composants. Aucune couleur hors tokens.
   ========================================================================== */

:root {
  /* --- Marque ----------------------------------------------------------- */
  --pa-mauve:        #7B3F9E;
  --pa-mauve-deep:   #5F4793;
  --pa-lavande:      #BDA6D6;
  --pa-lavande-pale: #E4DAF2;
  --pa-turquoise:    #1ABCB0;
  --pa-teal:         #2E8B94;
  --pa-menthe:       #A8E6DF;
  --pa-menthe-pale:  #D6F1EE;

  /* --- Papier & neutres -------------------------------------------------- */
  --pa-creme:        #F9EFE0;
  --pa-ivoire:       #FDF8F0;
  --pa-sable:        #FAE3C8;
  --pa-encre:        #352E25;
  --pa-encre-doux:   #6B6055;

  /* --- Accents rétro ----------------------------------------------------- */
  --pa-corail:       #DC8F6A;
  --pa-corail-vif:   #E0785C;
  --pa-sauge:        #B4CDB9;
  --pa-bleu-poudre:  #98A99C;

  /* --- Dérivés (opacités de tokens, pas de nouvelles teintes) ------------- */
  --pa-encre-12:     rgba(53, 46, 37, .12);
  --pa-encre-08:     rgba(53, 46, 37, .08);
  --pa-mauve-16:     rgba(123, 63, 158, .16);
  --pa-mauve-30:     rgba(123, 63, 158, .30);

  /* --- Rayons : une seule échelle -----------------------------------------
     Règle : blocs et images 28px · petits encarts 18px · champs 16px
             éléments interactifs pleine pilule. Aucune autre valeur. ------- */
  --r-bloc:  28px;
  --r-petit: 18px;
  --r-champ: 16px;
  --r-pill:  999px;

  /* --- Ombres : toujours un décalage + un flou doux, teintées encre ------- */
  --sh-1: 0 2px 6px rgba(53, 46, 37, .05);
  --sh-2: 0 8px 22px -8px rgba(53, 46, 37, .16), 0 2px 5px rgba(53, 46, 37, .05);
  --sh-3: 0 20px 48px -18px rgba(53, 46, 37, .26), 0 4px 10px rgba(53, 46, 37, .06);
  --sh-mauve: 0 14px 34px -14px var(--pa-mauve-30);

  /* --- Rythme vertical ---------------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 3.5rem;
  --sp-9: 5rem;    --sp-10: 7rem;
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --max: 1180px;

  /* --- Typographie fluide -------------------------------------------------- */
  --f-titre: 'Lora', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-corps: 'Poppins', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-script: 'Sacramento', 'Snell Roundhand', 'Brush Script MT', cursive;

  --t-h1:  clamp(2.75rem, 6.2vw, 4rem);
  --t-h2:  clamp(2rem, 4vw, 2.75rem);
  --t-h3:  clamp(1.35rem, 2.2vw, 1.65rem);
  --t-h4:  clamp(1.1rem, 1.6vw, 1.3rem);
  --t-body:clamp(1rem, .96rem + .18vw, 1.0625rem);
  --t-petit: .9375rem;

  --duree: 380ms;
  --ease:  cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   Reset et base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7.5rem;
}

body {
  margin: 0;
  /* le pied de page reste en bas même sur une page courte */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pa-creme);
  color: var(--pa-encre);
  font-family: var(--f-corps);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.7;
  overflow-x: clip;                 /* garde-fou contre les formes débordantes */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }
.pied { flex: none; }

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--pa-mauve-deep);
  margin: 0 0 var(--sp-4);
  line-height: 1.18;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.028em; line-height: 1.08; }
h2 { font-size: var(--t-h2); letter-spacing: -.018em; }
h3 { font-size: var(--t-h3); letter-spacing: -.008em; }
h4 { font-size: var(--t-h4); }
h5, h6 { font-size: 1rem; letter-spacing: 0; }

p { margin: 0 0 var(--sp-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--pa-mauve); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--pa-mauve-deep); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-2); }

strong, b { font-weight: 600; color: var(--pa-encre); }

/* --- Surfaces navigateur : elles font partie du design ---------------------- */
::selection { background: var(--pa-lavande-pale); color: var(--pa-mauve-deep); }
::placeholder { color: var(--pa-encre-doux); opacity: 1; }
:focus-visible {
  outline: 3px solid var(--pa-mauve);
  outline-offset: 3px;
  border-radius: 4px;
}
html { scrollbar-color: var(--pa-lavande) var(--pa-creme); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--pa-creme); }
::-webkit-scrollbar-thumb {
  background: var(--pa-lavande);
  border-radius: var(--r-pill);
  border: 3px solid var(--pa-creme);
}
::-webkit-scrollbar-thumb:hover { background: var(--pa-mauve); }

/* ==========================================================================
   Grain papier : couche fixe, jamais sur un conteneur qui défile
   ========================================================================== */

.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Mise en page
   ========================================================================== */

.enveloppe { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gouttiere); }
.enveloppe--large { max-width: 1340px; }
.enveloppe--etroit { max-width: 820px; }

.section { position: relative; padding-block: var(--section-y); isolation: isolate; overflow: clip; }
.section--creme  { background: var(--pa-creme); }
.section--ivoire { background: var(--pa-ivoire); }
.section--menthe { background: var(--pa-menthe-pale); }
.section--sable  { background: var(--pa-sable); }
.section > .enveloppe { position: relative; z-index: 2; }

.saut-contenu {
  position: absolute; left: var(--sp-4); top: -100%;
  z-index: 200; padding: var(--sp-3) var(--sp-5);
  background: var(--pa-mauve); color: var(--pa-creme);
  border-radius: var(--r-pill); font-weight: 500; text-decoration: none;
  transition: top 180ms var(--ease);
}
.saut-contenu:focus { top: var(--sp-4); color: var(--pa-creme); }

/* ==========================================================================
   Formes organiques et éclats
   ========================================================================== */

.forme {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(.3px);
}
.forme--menthe  { background: var(--pa-menthe); }
.forme--lavande { background: var(--pa-lavande-pale); }
.forme--sauge   { background: var(--pa-sauge); }
.forme--sable   { background: var(--pa-sable); }
/* demi-lune : moitié de disque, comme sur les affiches */
.forme--lune { border-radius: 50% 50% 0 0 / 100% 100% 0 0; }

.eclat { position: absolute; z-index: 1; pointer-events: none; color: var(--pa-lavande); }
.eclat--mauve     { color: var(--pa-mauve); }
.eclat--turquoise { color: var(--pa-turquoise); }
.eclat--corail    { color: var(--pa-corail); }

/* ==========================================================================
   Titres de section : filet dessiné + éclat en amorce
   ========================================================================== */

.titre-section { position: relative; margin-bottom: var(--sp-6); }
.titre-section .trait {
  display: block;
  width: clamp(96px, 12vw, 148px);
  height: auto;
  margin-top: var(--sp-3);
  color: var(--pa-mauve);
}
.titre-section--centre { text-align: center; }
.titre-section--centre .trait { margin-inline: auto; }

.intro-section { color: var(--pa-encre-doux); font-size: 1.075rem; max-width: 62ch; }
.titre-section--centre + .intro-section { margin-inline: auto; text-align: center; }

/* Mot-signature manuscrit. Usage rare et volontaire. */
.signature {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 1.55em;
  line-height: .9;
  color: var(--pa-mauve);
  padding-bottom: .12em;             /* réserve pour les jambages */
  display: inline-block;
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: .85rem 1.6rem;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--f-corps);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;               /* jamais de libellé sur deux lignes */
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duree) var(--ease),
              box-shadow var(--duree) var(--ease),
              background-color var(--duree) var(--ease);
}
.btn svg { flex: none; }

/* corail + encre = 5.2:1 */
.btn--primaire { background: var(--pa-corail); color: var(--pa-encre); box-shadow: var(--sh-2); }
.btn--primaire:hover { background: var(--pa-corail-vif); color: var(--pa-encre); transform: translateY(-3px); box-shadow: var(--sh-3); }
.btn--primaire:active { transform: translateY(-1px) scale(.985); }

/* mauve + crème = 6.0:1 */
.btn--mauve { background: var(--pa-mauve); color: var(--pa-creme); box-shadow: var(--sh-mauve); }
.btn--mauve:hover { background: var(--pa-mauve-deep); color: var(--pa-creme); transform: translateY(-3px); }
.btn--mauve:active { transform: translateY(-1px) scale(.985); }

.btn--contour {
  background: transparent;
  color: var(--pa-mauve);
  box-shadow: inset 0 0 0 1.5px var(--pa-mauve);
}
.btn--contour:hover { background: var(--pa-lavande-pale); color: var(--pa-mauve-deep); transform: translateY(-3px); }

.btn--large { padding: 1.05rem 2rem; font-size: 1.125rem; }
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--sh-1);
}

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

.entete {
  position: sticky;
  top: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--pa-creme) 88%, transparent);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  transition: box-shadow var(--duree) var(--ease), background-color var(--duree) var(--ease);
}
.entete[data-defile='true'] {
  background: color-mix(in srgb, var(--pa-creme) 96%, transparent);
  box-shadow: 0 1px 0 var(--pa-encre-12), 0 10px 26px -18px rgba(53, 46, 37, .34);
}
@supports not (backdrop-filter: blur(1px)) { .entete { background: var(--pa-creme); } }

.entete__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 92px;
}
.entete__logo { flex: none; display: block; }
.entete__logo img { width: clamp(116px, 11vw, 146px); height: auto; }

.nav { margin-left: auto; }
.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, 1.6rem);
  margin: 0; padding: 0; list-style: none;
}
.nav__liste > li { margin: 0; position: relative; }

.nav__lien {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .25rem;
  font-family: var(--f-titre);
  font-size: .9375rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: .07em;
  color: var(--pa-encre);
  text-decoration: none;
  white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.nav__lien:hover { color: var(--pa-mauve); }
.nav__lien[aria-current='page'] { color: var(--pa-mauve); }
.nav__lien[aria-current='page']::after {
  content: ''; position: absolute; left: .25rem; right: .25rem; bottom: .15rem;
  height: 2px; border-radius: var(--r-pill); background: var(--pa-mauve);
}
.nav__chevron { transition: transform 220ms var(--ease); }
.nav__lien[aria-expanded='true'] .nav__chevron { transform: rotate(180deg); }

.nav__sous {
  position: absolute; top: calc(100% + .5rem); left: -.75rem;
  min-width: 268px; margin: 0; padding: var(--sp-3);
  list-style: none;
  background: var(--pa-ivoire);
  border: 1px solid var(--pa-encre-12);
  border-radius: var(--r-petit);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
}
.nav__item--menu:hover .nav__sous,
.nav__item--menu:focus-within .nav__sous,
.nav__sous[data-ouvert='true'] { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sous a {
  display: block; padding: .55rem .7rem;
  font-family: var(--f-corps); font-size: .9375rem; font-variant-caps: normal; letter-spacing: 0;
  color: var(--pa-encre); text-decoration: none; border-radius: 10px;
}
.nav__sous a:hover { background: var(--pa-lavande-pale); color: var(--pa-mauve-deep); }

.entete__appel { flex: none; }
.entete__burger { display: none; }
.burger__ferme { display: none; }

/* ==========================================================================
   Cadres photo « carte postale »
   ========================================================================== */

.cadre {
  position: relative;
  border-radius: var(--r-bloc);
  overflow: hidden;
  background: var(--pa-ivoire);
  border: 7px solid var(--pa-ivoire);
  box-shadow: var(--sh-3);
}
.cadre img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: calc(var(--r-bloc) - 7px);
  filter: sepia(.3) saturate(.85) contrast(.94) brightness(1.02);
}
.cadre::after {                       /* liaison chromatique avec la palette */
  content: ''; position: absolute; inset: 0;
  border-radius: calc(var(--r-bloc) - 7px);
  background: var(--pa-menthe);
  mix-blend-mode: multiply;
  opacity: .12;
  pointer-events: none;
}
.cadre--lavande::after { background: var(--pa-lavande); opacity: .12; }
.cadre--sansvoile::after { display: none; }

/* Image déjà traitée à la source : elle porte son propre grain sépia et son
   liseré de papier vieilli. On n'ajoute donc ni filtre, ni voile, ni cadre,
   sous peine d'un rendu terne et doublement encadré. */
.cadre--brut {
  border-width: 0;
  background: transparent;
  box-shadow: 0 18px 40px -24px rgba(53, 46, 37, .3);
}
.cadre--brut img { filter: none; border-radius: var(--r-bloc); }
.cadre--brut::after { display: none; }

/* ==========================================================================
   Cartes
   ========================================================================== */

.carte {
  position: relative;
  padding: var(--sp-6);
  background: var(--pa-ivoire);
  border: 1px solid var(--pa-encre-08);
  border-radius: var(--r-bloc);
  box-shadow: var(--sh-2);
  transition: transform var(--duree) var(--ease), box-shadow var(--duree) var(--ease);
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.carte h2, .carte h3, .carte h4 { margin-bottom: var(--sp-2); }
.carte p { color: var(--pa-encre-doux); margin-bottom: 0; }

.carte__icone {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-pill);
  color: var(--pa-mauve-deep);
}
.carte__icone--menthe  { background: var(--pa-menthe-pale); }
.carte__icone--lavande { background: var(--pa-lavande-pale); }
.carte__icone--sable   { background: var(--pa-sable); }

/* ==========================================================================
   Liste à cocher (puces dessinées)
   ========================================================================== */

.liste-check { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.liste-check li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--sp-4);
  align-items: start;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.liste-check li > svg { margin-top: .28em; color: var(--pa-mauve); }
.liste-check p { margin: 0; max-width: none; }

/* ==========================================================================
   Prestations numérotées : chiffre en filigrane derrière la carte
   ========================================================================== */

.presta {
  position: relative;
  padding: clamp(2.75rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.75rem, 2.5vw, 2.25rem);
  background: var(--pa-creme);
  border: 1.5px solid var(--pa-lavande-pale);
  border-radius: var(--r-bloc);
  box-shadow: var(--sh-2);
  overflow: hidden;
  transition: transform var(--duree) var(--ease), box-shadow var(--duree) var(--ease);
}
.presta:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.presta__chiffre {
  position: absolute;
  top: -.3em; left: -.04em;
  z-index: -1;
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: clamp(4.75rem, 8vw, 6.75rem);
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--pa-lavande);
  opacity: .4;
  pointer-events: none;
  user-select: none;
}
/* la ligne à cocher accueille un titre d’origine, pas seulement un <li> */
.liste-check .ligne {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-4);
  align-items: start;
}
.liste-check .ligne > svg { margin-top: .22em; color: var(--pa-mauve); flex: none; }
.liste-check .ligne > :where(h1,h2,h3,h4,h5,h6,p) {
  font-family: var(--f-corps); font-size: 1.0625rem; font-weight: 400;
  line-height: 1.6; letter-spacing: 0; color: var(--pa-encre);
  margin: 0; max-width: 46ch;
}
/* mot-signature manuscrit dans le titre principal */
.hero h1 .signature {
  display: block;
  font-size: 1.22em;
  line-height: .82;
  margin-top: .04em;
  padding-bottom: .1em;
}
.presta__corps { position: relative; isolation: isolate; }

/* ==========================================================================
   Formulaires
   ========================================================================== */

.champ { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.champ label { font-size: var(--t-petit); font-weight: 500; color: var(--pa-encre); }
.champ input, .champ textarea {
  width: 100%;
  padding: .9rem 1.1rem;
  font-family: var(--f-corps);
  font-size: 1rem;
  color: var(--pa-encre);
  background: var(--pa-ivoire);
  border: 1.5px solid var(--pa-encre-12);
  border-radius: var(--r-champ);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.champ textarea { min-height: 148px; resize: vertical; }
.champ input:hover, .champ textarea:hover { border-color: var(--pa-lavande); }
.champ input:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--pa-mauve);
  box-shadow: 0 0 0 4px var(--pa-mauve-16);
}
.champ__aide { font-size: var(--t-petit); color: var(--pa-encre-doux); }
.champ__erreur { font-size: var(--t-petit); font-weight: 500; color: var(--pa-corail-vif); }
.champ input:user-invalid, .champ textarea:user-invalid { border-color: var(--pa-corail-vif); }

.form-etat { margin-top: var(--sp-4); font-size: var(--t-petit); font-weight: 500; }
.form-etat:empty { display: none; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.pied {
  position: relative;
  background: var(--pa-mauve-deep);
  color: var(--pa-creme);
  padding-block: var(--sp-9) var(--sp-6);
  overflow: hidden;
}
.pied h2, .pied h3, .pied h4 { color: var(--pa-creme); }
.pied p { color: var(--pa-menthe-pale); }
.pied a { color: var(--pa-menthe-pale); text-decoration: none; }
.pied a:hover { color: var(--pa-creme); text-decoration: underline; }

.pied__grille {
  position: relative; z-index: 2;
  display: grid;
  gap: var(--sp-8) var(--sp-7);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
}
.pied__titre {
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  margin-bottom: var(--sp-5);
}
.pied__nav {
  list-style: none; margin: 0 0 var(--sp-7); padding: 0;
  columns: 2; column-gap: var(--sp-6);
}
.pied__nav li { margin: 0 0 var(--sp-3); break-inside: avoid; }

.reseaux { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.reseaux a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--pa-creme);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px rgba(249, 239, 224, .38);
  transition: background-color 220ms var(--ease), transform 220ms var(--ease);
}
.reseaux a:hover { background: var(--pa-mauve); transform: translateY(-3px); }

.pied__bas {
  position: relative; z-index: 2;
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(249, 239, 224, .22);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  align-items: baseline; justify-content: space-between;
  font-size: var(--t-petit);
}
.pied__bas p { margin: 0; }

.pied .champ input {
  background: rgba(249, 239, 224, .10);
  border-color: rgba(249, 239, 224, .32);
  color: var(--pa-creme);
}
.pied .champ input::placeholder { color: rgba(249, 239, 224, .82); }
.pied .champ input:focus {
  border-color: var(--pa-menthe);
  box-shadow: 0 0 0 4px rgba(168, 230, 223, .22);
}
.pied .champ label { color: var(--pa-creme); }

/* ==========================================================================
   Animations : une seule entrée, discrète
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duree) var(--ease), transform var(--duree) var(--ease);
}
.js .reveal[data-vu='true'] { opacity: 1; transform: none; }
.js .reveal[style*='--d'] { transition-delay: var(--d); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Points de rupture
   ========================================================================== */

@media (max-width: 860px) {
  .pied__grille { grid-template-columns: minmax(0, 1fr); }
  .pied__nav { columns: 2; }
}
@media (max-width: 520px) {
  .pied__nav { columns: 1; }
}

@media (max-width: 900px) {
  /* backdrop-filter fait de l'en-tête un bloc conteneur : le menu en
     position:fixed serait alors borné à sa hauteur au lieu de couvrir l'écran. */
  .entete, .entete[data-defile='true'] {
    background: var(--pa-creme);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .entete__inner { min-height: 84px; }
  .entete__logo img { width: 112px; }
  .entete__burger {
    display: grid; place-items: center;
    width: 46px; height: 46px; margin-left: auto;
    background: transparent; border: 0; cursor: pointer;
    color: var(--pa-encre); border-radius: var(--r-pill);
  }
  .entete__burger:hover { background: var(--pa-lavande-pale); }
  .entete__burger .burger__ferme { display: none; }
  .entete__burger[aria-expanded='true'] .burger__ouvre { display: none; }
  .entete__burger[aria-expanded='true'] .burger__ferme { display: block; }
  .entete__appel { display: none; }

  .nav {
    position: fixed; inset: 84px 0 0;
    margin: 0; padding: var(--sp-6) var(--gouttiere) var(--sp-9);
    background: var(--pa-creme);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 320ms var(--ease), visibility 320ms;
  }
  .nav[data-ouvert='true'] { transform: none; visibility: visible; }

  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste > li { border-bottom: 1px solid var(--pa-encre-12); }

  /* le lien et son chevron tiennent sur une seule ligne, le sous-menu passe dessous */
  .nav__item--menu { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__item--menu > .nav__lien { width: auto; flex: 1 1 auto; }
  .nav__item--menu > .nav__bascule {
    flex: none; width: 52px; justify-content: center; padding-inline: 0;
  }
  .nav__item--menu > .nav__sous { flex: 1 0 100%; }
  .nav__lien {
    width: 100%; justify-content: space-between;
    padding: 1.1rem .25rem; font-size: 1.15rem;
  }
  .nav__lien[aria-current='page']::after { display: none; }
  .nav__sous {
    position: static; min-width: 0; padding: 0 0 var(--sp-4) var(--sp-4);
    background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    display: none;
  }
  .nav__sous[data-ouvert='true'] { display: block; }
  .nav__appel-mobile {
    margin-top: var(--sp-6);
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 901px) { .nav__appel-mobile { display: none; } }

@media (max-width: 640px) {
  .pied__grille { grid-template-columns: 1fr; }
  .carte { padding: var(--sp-5); }
  .btn { width: auto; }
}

/* ==========================================================================
   Utilitaires
   ========================================================================== */

.sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sr-piege { position: absolute; left: -9999px; opacity: 0; pointer-events: none; height: 0; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--f-titre); font-size: 1.05rem; font-weight: 600;
  color: var(--pa-mauve); text-decoration: none;
}
.lien-fleche svg { transition: transform var(--duree) var(--ease); }
.lien-fleche:hover svg { transform: translateX(5px); }

/* ==========================================================================
   Héros
   ========================================================================== */

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6.5rem); overflow: clip; }
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-bottom: var(--sp-5); color: var(--pa-mauve-deep); }
.hero__accroche {
  font-size: clamp(1.075rem, 1.5vw, 1.25rem);
  color: var(--pa-encre-doux);
  max-width: 42ch;
  margin-bottom: var(--sp-7);
}
.hero__media { position: relative; }
.hero__media .cadre { aspect-ratio: 4 / 3.4; }

/* ==========================================================================
   Trois piliers : décalage vertical, pas trois boîtes identiques
   ========================================================================== */

.piliers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: start;
}
.pilier__titre {
  font-family: var(--f-titre); font-weight: 600;
  font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em;
  color: var(--pa-mauve-deep); margin: 0 0 var(--sp-3);
}
.pilier:nth-child(2) { margin-top: clamp(0px, 3.2vw, 2.75rem); }
.pilier:nth-child(3) { margin-top: clamp(0px, 6.4vw, 5.5rem); }

/* ==========================================================================
   Bloc image + texte
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
}
.split--inverse .split__media { order: 2; }
.split__media .cadre { aspect-ratio: 4 / 3; }
.split__texte > :last-child { margin-bottom: 0; }
.split__texte .btn, .split__texte .lien-fleche { margin-top: var(--sp-5); }

/* ==========================================================================
   Avantages
   ========================================================================== */

.avantages { position: relative; padding-block: clamp(3.25rem, 6vw, 5rem); }
.avantages .liste-check {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.25rem) clamp(2rem, 5vw, 4.5rem);
}
.avantages .liste-check > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ==========================================================================
   Prestations numérotées
   ========================================================================== */

.enseigne {
  font-family: var(--f-titre);
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--pa-mauve-deep);
  max-width: 22ch;
  margin: 0 0 var(--sp-7);
  padding-bottom: .1em;
}
.prestas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 3.5vw, 3rem);
}
.presta__titre {
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.008em;
  color: var(--pa-mauve-deep);
  margin: 0 0 var(--sp-3);
  max-width: none;
}
.presta__corps p:not(.presta__titre) { color: var(--pa-encre-doux); max-width: 42ch; }

/* ==========================================================================
   Portrait
   ========================================================================== */

.portrait__media { position: relative; }
.portrait__media .cadre { aspect-ratio: 3 / 3.6; max-width: 420px; }
.portrait__nom { font-size: var(--t-h3); margin-bottom: var(--sp-2); }
.portrait__citation {
  font-family: var(--f-titre);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.45;
  color: var(--pa-mauve);
  margin: 0 0 var(--sp-6);
  padding: var(--sp-2) 0 .18em var(--sp-5);
  border-left: 2px solid var(--pa-lavande);
  max-width: 34ch;
}
.portrait__texte > p {
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--pa-encre-doux);
  max-width: 62ch;
  margin-bottom: var(--sp-4);
}
/* la citation est désormais un blockquote : on neutralise ses marges natives */
.portrait__texte blockquote { margin: 0 0 var(--sp-6); }
.portrait__texte blockquote p { margin: 0; max-width: none; }

/* ==========================================================================
   Localisation
   ========================================================================== */

.infos-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: var(--sp-7);
}
.info { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-5); align-items: start; }
.info__pastille {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--pa-ivoire);
  color: var(--pa-mauve-deep);
  box-shadow: var(--sh-1);
}
.info h3 {
  font-size: 1rem;
  font-variant-caps: all-small-caps;
  letter-spacing: .09em;
  color: var(--pa-encre-doux);
  margin-bottom: var(--sp-2);
}
.info p { color: var(--pa-encre); font-weight: 500; margin: 0; }

/* ==========================================================================
   Adaptations
   ========================================================================== */

@media (max-width: 900px) {
  /* les aplats sont calibrés pour le grand écran : on les borne au lieu de les laisser
     recouvrir le titre, et on retire les éclats qui tomberaient sur le texte */
  .forme { max-width: min(64vw, 340px) !important; max-height: min(64vw, 340px) !important; }
  .eclat { display: none; }

  .hero__grille, .split, .prestas, .infos-duo { grid-template-columns: minmax(0, 1fr); }
  .split--inverse .split__media { order: 0; }
  .hero__media { max-width: 560px; }
  .piliers { grid-template-columns: minmax(0, 1fr); }
  .pilier:nth-child(2), .pilier:nth-child(3) { margin-top: 0; }
  .portrait__media .cadre { max-width: 100%; }
  .avantages .liste-check { grid-template-columns: minmax(0, 1fr); }
  .avantages .liste-check > :last-child:nth-child(odd) { grid-column: auto; }
}

@media (max-width: 560px) {
  .info { grid-template-columns: 48px 1fr; gap: var(--sp-4); }
  .info__pastille { width: 48px; height: 48px; }
}

/* ==========================================================================
   En-tête de page intérieure
   ========================================================================== */

.entete-page {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 5.5rem);
  background: var(--pa-creme);
  overflow: clip;
  isolation: isolate;
}
.entete-page__grille {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.entete-page--simple .entete-page__grille { grid-template-columns: minmax(0, 1fr); }
.entete-page h1 { margin-bottom: var(--sp-4); }
.entete-page .trait { display: block; width: clamp(110px, 14vw, 170px); height: auto; color: var(--pa-mauve); }
.entete-page__sous {
  margin-top: var(--sp-5);
  font-size: 1.075rem;
  color: var(--pa-encre-doux);
  max-width: 54ch;
}
.entete-page__media .cadre { aspect-ratio: 4 / 3; }

/* ==========================================================================
   Texte long
   ========================================================================== */

.prose > * + * { margin-top: var(--sp-5); }
.prose p { max-width: 68ch; }
.prose h2, .prose h3 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  max-width: 30ch;
}
.prose > :first-child { margin-top: 0; }
.prose strong { font-weight: 600; }

/* énoncé mis en avant : reprend le rôle des gros intertitres d’origine */
.enonce {
  font-family: var(--f-titre);
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--pa-mauve-deep);
  max-width: 40ch;
  margin: 0;
}
.enonce--large { max-width: 54ch; }

/* liste à tirets d’origine, rendue en puces dessinées */
.liste-tirets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.liste-tirets li {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--sp-4);
  align-items: start; margin: 0; max-width: 62ch;
}
.liste-tirets li::before {
  content: ''; width: 14px; height: 2px; margin-top: .85em;
  border-radius: var(--r-pill); background: var(--pa-mauve); justify-self: start;
}
.liste-tirets--puce li::before {
  width: 9px; height: 9px; margin-top: .55em; background: var(--pa-turquoise);
}

.encart {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--pa-menthe-pale);
  border-radius: var(--r-bloc);
  border: 1px solid var(--pa-encre-08);
}
.encart--lavande { background: var(--pa-lavande-pale); }
.encart p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Tarifs : encart « ticket » à bord festonné
   ========================================================================== */

.tarif {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--pa-ivoire);
  border-radius: var(--r-bloc);
  box-shadow: var(--sh-2);
  transition: transform var(--duree) var(--ease), box-shadow var(--duree) var(--ease);
}
.tarif:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.tarif + .tarif { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.tarif--inverse .tarif__media { order: 2; }
.tarif__media .cadre { aspect-ratio: 4 / 3; border-width: 0; }
.tarif__media .cadre img { border-radius: var(--r-petit); }
.tarif h3 { margin-bottom: var(--sp-4); }
.tarif .liste-tirets { gap: var(--sp-3); }
.tarif .liste-tirets li { max-width: none; }

.tarif__prix {
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pa-mauve);
  margin: 0 0 var(--sp-4);
  max-width: none;
}
.tarif__mention {
  display: inline-block;
  margin: var(--sp-4) 0 0;
  padding: .4rem 1rem;
  font-family: var(--f-corps);
  font-size: .8125rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--pa-encre);
  background: var(--pa-sable);
  border-radius: var(--r-pill);
}

/* bandeau festonné, façon ticket imprimé */
.feston {
  height: 14px;
  background: var(--pa-lavande);
  --pastille: 14px;
  -webkit-mask: radial-gradient(var(--pastille) at 50% 0,
                #0000 calc(99% - 1px), #000 calc(100% + 1px)) 50% 0 / calc(var(--pastille) * 2.2) 100% repeat-x;
          mask: radial-gradient(var(--pastille) at 50% 0,
                #0000 calc(99% - 1px), #000 calc(100% + 1px)) 50% 0 / calc(var(--pastille) * 2.2) 100% repeat-x;
}
.feston--bas { transform: scaleY(-1); }

/* ==========================================================================
   Captures d’agendas
   ========================================================================== */

.captures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.captures figure { margin: 0; }
.captures .cadre { aspect-ratio: 4 / 3; border-width: 5px; }

/* ==========================================================================
   Page contact
   ========================================================================== */

.contact__grille {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.contact__direct { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
.contact__ligne {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-4); align-items: center;
}
.contact__ligne h2 {
  font-size: .8125rem; font-variant-caps: all-small-caps; letter-spacing: .1em;
  color: var(--pa-encre-doux); margin: 0 0 .1rem;
}
.contact__ligne a, .contact__ligne .valeur {
  font-family: var(--f-titre); font-size: 1.2rem; font-weight: 600;
  color: var(--pa-mauve-deep); text-decoration: none; margin: 0;
}
.contact__ligne a:hover { color: var(--pa-mauve); text-decoration: underline; }
.contact__form {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--pa-ivoire);
  border: 1px solid var(--pa-encre-08);
  border-radius: var(--r-bloc);
  box-shadow: var(--sh-2);
}

/* ==========================================================================
   Adaptations
   ========================================================================== */

@media (max-width: 900px) {
  .entete-page__grille, .tarif, .contact__grille { grid-template-columns: minmax(0, 1fr); }
  .tarif--inverse .tarif__media { order: 0; }
  .entete-page__media { max-width: 560px; }
}

/* ==========================================================================
   Pages légales
   ========================================================================== */

.mention-titre {
  font-family: var(--f-titre);
  font-size: 1.15rem;
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--pa-mauve-deep);
  margin: 0 0 var(--sp-3);
}

.conf-bloc + .conf-bloc { margin-top: var(--sp-8); }
.conf-bloc__titre {
  font-family: var(--f-titre);
  font-variant-caps: normal;
  letter-spacing: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--pa-mauve-deep);
  max-width: 44ch;
  margin: 0 0 var(--sp-4);
}
.conf-bloc p { color: var(--pa-encre-doux); }
.conf-bloc p + p { margin-top: var(--sp-4); }
.conf-bloc .liste-tirets { margin-top: var(--sp-5); }
.conf-bloc .liste-tirets li { color: var(--pa-encre-doux); }

/* ==========================================================================
   Avis Google (widget tiers)
   ========================================================================== */

/* Le widget arrive avec sa propre mise en forme : on lui réserve une place,
   on l'inscrit dans la largeur du site et on évite qu'il déborde. */
.avis .enveloppe { position: relative; z-index: 2; }
.avis [class^='elfsight-app-'] {
  min-height: 220px;
  max-width: 100%;
  overflow: hidden;
}