/* ==========================================================================
   Marie Antin — habillage de la porte d'accès (piloté par acces/acces.js)
   N'appartient pas au site livré. La porte porte ses propres couleurs
   (jetons --mp-*) : elle s'affiche à l'identique sur l'accueil et sur
   chaque maquette, quelles que soient leurs propres variables.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..500,100;1,9..144,300..500,100&family=DM+Sans:wght@400;500;600&display=swap");

/* Script bloquant dans le <head> : le site est masqué dès le premier rendu,
   seule la porte reste visible. */
html.ma-attente{overflow:hidden}
html.ma-attente body{visibility:hidden}
.ma-porte{visibility:visible}

.ma-porte{
  --mp-fond:#FBF5EF;
  --mp-carte:#FFFDFA;
  --mp-encre:#2E3A30;
  --mp-doux:#6B7568;
  --mp-trait:#E8DED3;
  --mp-rose:#EDB9B3;
  --mp-rose-fonce:#C9787A;
  --mp-sauge:#D5E2CC;
  --mp-sauge-fonce:#5F7C5C;
  --mp-ease:cubic-bezier(.16,1,.3,1);
  position:fixed;inset:0;z-index:10001;
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;
  background:var(--mp-fond);color:var(--mp-encre);
  font:400 16px/1.6 "DM Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  opacity:1;transition:opacity .6s var(--mp-ease);
}
.ma-porte,.ma-porte *,.ma-porte *::before,.ma-porte *::after{box-sizing:border-box;margin:0}
/* Deux halos très doux, rose et sauge, derrière la carte. */
.ma-porte::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(40% 50% at 18% 22%,rgba(237,185,179,.42),rgba(237,185,179,0) 70%),
    radial-gradient(42% 52% at 84% 80%,rgba(213,226,204,.65),rgba(213,226,204,0) 70%);
}
.ma-porte--sortie{opacity:0;pointer-events:none}
.ma-porte--sortie .ma-porte__carte{transform:translateY(-12px) scale(.985);opacity:0;transition:transform .6s var(--mp-ease),opacity .4s}

.ma-porte__carte{
  position:relative;z-index:1;width:min(440px,100%);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:44px clamp(24px,5vw,42px) 26px;
  background:var(--mp-carte);border:1px solid var(--mp-trait);border-radius:28px;
  box-shadow:0 40px 80px -40px rgba(46,58,48,.35),0 2px 6px -2px rgba(46,58,48,.06);
  animation:mpEntree .8s var(--mp-ease) both;
}
@keyframes mpEntree{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.ma-porte__fleur{width:46px;height:46px;margin-bottom:20px;overflow:visible}
.ma-porte__fleur .pt{fill:var(--mp-rose);stroke:var(--mp-rose-fonce);stroke-width:1.2;stroke-linejoin:round}
.ma-porte__fleur .pi{fill:#F8E3DF;stroke:var(--mp-rose-fonce);stroke-width:1;stroke-linejoin:round}
.ma-porte__fleur .co{fill:var(--mp-sauge-fonce);stroke:var(--mp-carte);stroke-width:1.8}

.ma-porte__label{
  display:inline-flex;align-items:center;gap:8px;
  font:600 10.5px/1 "DM Sans",system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mp-sauge-fonce);
}
.ma-porte__label::before,.ma-porte__label::after{content:"";width:18px;height:1px;background:currentColor;opacity:.45}
.ma-porte__titre{
  margin-top:16px;
  font:350 clamp(30px,6vw,38px)/1.08 "Fraunces",Georgia,serif;font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.02em;color:var(--mp-encre);
}
.ma-porte__titre em{font-style:italic;font-weight:300;color:var(--mp-rose-fonce);white-space:nowrap}
.ma-porte__note{margin-top:12px;max-width:32ch;font-size:15px;line-height:1.55;color:var(--mp-doux)}

.ma-porte__ligne{display:flex;gap:8px;width:100%;margin-top:28px;padding:6px;border:1px solid var(--mp-trait);border-radius:999px;background:#FFFFFF;transition:border-color .3s,box-shadow .3s}
.ma-porte__ligne:focus-within{border-color:var(--mp-sauge-fonce);box-shadow:0 0 0 4px rgba(95,124,92,.14)}
.ma-porte__ligne input{
  flex:1;min-width:0;padding:0 16px;border:0;background:transparent;
  font:500 16px/1 "DM Sans",system-ui,sans-serif;color:var(--mp-encre);letter-spacing:.04em;
}
.ma-porte__ligne input::placeholder{color:#9BA497;letter-spacing:0;opacity:1}
.ma-porte__ligne input:focus{outline:none}
.ma-porte__ligne button{
  flex:none;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;
  border:0;border-radius:999px;background:var(--mp-encre);color:#FBF5EF;cursor:pointer;
  font:600 15px/1 "DM Sans",system-ui,sans-serif;transition:background .35s var(--mp-ease)
}
.ma-porte__ligne button svg{width:16px;height:16px;transition:transform .45s var(--mp-ease)}
.ma-porte__ligne button:hover,.ma-porte__ligne button:focus-visible{background:var(--mp-sauge-fonce)}
.ma-porte__ligne button:hover svg,.ma-porte__ligne button:focus-visible svg{transform:translateX(3px)}
.ma-porte__ligne button:focus-visible{outline:2px solid var(--mp-encre);outline-offset:3px}

.ma-porte__err{min-height:1.4em;margin-top:12px;font-size:14px;line-height:1.4;color:#B4545A}
.ma-porte__pied{width:100%;margin-top:10px;padding-top:16px;border-top:1px dashed var(--mp-trait);font-size:12.5px;color:#9BA497}

.ma-porte--secousse{animation:mpSecousse .38s}
@keyframes mpSecousse{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-5px)}
  40%,60%{transform:translateX(5px)}
}

/* Téléphone : le champ et le bouton s'empilent. */
@media (max-width:420px){
  .ma-porte__ligne{flex-direction:column;border-radius:22px;padding:6px}
  .ma-porte__ligne input{height:48px}
  .ma-porte__ligne button{justify-content:center;width:100%}
}

@media (prefers-reduced-motion:reduce){
  .ma-porte,.ma-porte--sortie .ma-porte__carte{transition:none}
  .ma-porte__carte,.ma-porte--secousse{animation:none}
}

/* Aperçus des cartes de l'accueil (maquette dans un cadre) : pas de sélecteur de polices. */
html.ma-cadre .fpick{display:none!important}
html.ma-cadre{scrollbar-width:none}
html.ma-cadre::-webkit-scrollbar{display:none}
html.ma-cadre .pl{display:none!important}