/* ============================================================================
   EHPAD de Jonquières / Courthézon
   Feuille principale (le CSS critique est en ligne dans chaque page : tools/critique.css).
   Charte reprise de l'ancien site : teal #00a99d / #1b7f82, vert #a0c224, fond gris #ddd,
   police Montserrat. Le teal des textes et boutons blancs est assombri (#00827a) pour un
   contraste lisible (≥ 4,5:1) ; le #00a99d d'origine reste en décor.
   ========================================================================== */

/* ── Menu principal : barre teal, séparateurs fins entre les rubriques ─────── */
.menu>li+li::before{content:"";width:1px;height:20px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.55),transparent);flex-shrink:0}
.menu>li>a,.dd-btn{position:relative;transition:color .2s,background-color .2s}
.menu>li>a::after,.dd-btn::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.4rem;height:2px;border-radius:2px;background:var(--lime);transform:scaleX(0);transition:transform .25s ease}
.menu>li>a:hover,.dd-btn:hover,.dd.open>.dd-btn{background:rgba(0,0,0,.14)}
.menu>li>a:hover::after,.dd-btn:hover::after,.menu>li.on>a::after,.dd.on>.dd-btn::after{transform:scaleX(1)}
.dd-btn .ico{width:15px;height:15px;transition:transform .25s}
.dd.open>.dd-btn .ico{transform:rotate(180deg)}
.menu .ico:not(.dd-btn .ico){width:16px;height:16px}

.dd-menu{left:50%;top:100%;transform:translate(-50%,8px);min-width:250px;max-width:340px;list-style:none;margin:0;padding:.5rem;background:var(--profond);border-radius:0 0 14px 14px;border-top:3px solid var(--lime);box-shadow:0 22px 50px rgba(0,40,36,.35);transition:opacity .2s,transform .2s,visibility .2s;z-index:950}
.dd:last-child .dd-menu{left:auto;right:0;transform:translate(0,8px)}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd:last-child.open .dd-menu{transform:translate(0,0)}
@media(hover:hover) and (min-width:981px){
  .dd:hover .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .dd:last-child:hover .dd-menu{transform:translate(0,0)}
}
.dd-menu a{display:block;padding:.5rem .85rem .5rem 1rem;border-radius:9px;font-size:14px;font-weight:500;color:#fff;text-decoration:none;border-left:3px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.dd-menu a:hover,.dd-menu a:focus-visible{background:var(--lime);color:#1d2b00;border-left-color:#fff}
.dd-menu a.here{font-weight:700;background:rgba(255,255,255,.16)}
.dd-head{padding:.7rem 1rem .25rem;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#dff08a}
.dd-sep{height:1px;margin:.45rem .75rem;background:linear-gradient(to right,transparent,rgba(255,255,255,.5),transparent)}
.dd-menu{min-width:280px}
/* Sous-menu en colonnes : accroché à la barre de menu, pas à son bouton, et centré sur elle.
   Plafonné à la largeur de l'écran : il ne déborde jamais de la page. */
.nav-in{position:relative}
.dd.dd-large{position:static}
.dd-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0;min-width:0;max-width:none;width:min(calc(var(--n,3) * 290px),calc(100vw - 32px));padding:.6rem .4rem}
.dd-col{list-style:none;margin:0;padding:0 .35rem}
.dd-col+.dd-col{border-left:1px solid rgba(255,255,255,.35)}
@media(max-width:980px){.dd-cols{display:none;width:auto;grid-template-columns:1fr;padding:0 0 .6rem .6rem}.dd.open .dd-cols{display:block}.dd-col+.dd-col{border-left:0;border-top:1px solid rgba(255,255,255,.35);margin-top:.3rem;padding-top:.2rem}}

/* menu mobile */
.burger{align-items:center;gap:.6rem;padding:.6rem .4rem;background:none;border:0;cursor:pointer;color:#fff;font:700 14px 'Montserrat','Montserrat-fb',sans-serif}
.burger span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .3s}
.burger span+span{margin-top:-1px}
.burger{flex-direction:row}
.burger em{font-style:normal}
.burger>span{position:relative}
.burger{display:none}
@media(max-width:980px){
  .burger{display:inline-flex;flex-wrap:wrap;width:auto}
  .burger>span{display:none}
  .burger::before{content:"";width:22px;height:14px;background:linear-gradient(currentColor,currentColor) top/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat}
  .menu{display:block;position:fixed;left:0;right:0;top:var(--nav-top,56px);bottom:0;overflow-y:auto;background:var(--teal);padding:.6rem 1rem 2rem;transform:translateX(100%);transition:transform .3s ease;box-shadow:0 20px 40px rgba(0,0,0,.2)}
  .menu.ouvert{transform:none}
  .menu>li{display:block;border-bottom:1px solid rgba(255,255,255,.25)}
  .menu>li+li::before{display:none}
  .menu>li>a,.dd-btn{width:100%;justify-content:space-between;padding:1rem .6rem;font-size:16px}
  .menu>li>a{justify-content:flex-start;gap:.5rem}
  .menu-ouvert .onglet,.menu-ouvert .haut-page{display:none}
  .menu>li>a::after,.dd-btn::after{display:none}
  .dd-menu{position:static;opacity:1;visibility:visible;transform:none!important;box-shadow:none;border:0;border-radius:0;padding:0 0 .6rem .6rem;max-width:none;display:none;background:transparent}
  .dd.open .dd-menu{display:block}
  .dd-menu a{font-size:15px;padding:.6rem .8rem}
}

/* ── Images, galeries, carrousels ─────────────────────────────────────────── */
.illus{margin:0 auto;display:block;width:100%;border-radius:12px;overflow:hidden}
.illus img{width:100%;height:auto;transition:transform .5s ease}
a.illus:hover img{transform:scale(1.04)}
.page p img{display:inline-block;border-radius:0;vertical-align:middle}
.galerie{margin:10px 0}
.vignette{background:#e7ecea;cursor:zoom-in;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.vignette img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s}
.vignette::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,80,74,.4),transparent 55%);opacity:0;transition:opacity .35s}
.vignette:hover img{transform:scale(1.07)}
.vignette:hover::after{opacity:1}

.carrousel.anime .slide.on img{animation:kb 8s ease-out both}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
.car-p,.car-n{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--teal);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.15);opacity:0;transition:opacity .3s,background .2s}
.car-p{left:14px}.car-n{right:14px}
.carrousel:hover .car-p,.carrousel:hover .car-n,.car-p:focus-visible,.car-n:focus-visible{opacity:1}
.car-dots{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center;gap:2px}
.car-dots button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.car-dots button::before{content:"";width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.65);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s,background .25s}
.car-dots button.on::before{background:#fff;transform:scale(1.35)}
@media(hover:none){.car-p,.car-n{opacity:1}}
/* mobile : flèches et balayage suffisent ; une dizaine de points de 26 px se chevaucheraient (zones tactiles) */
@media(max-width:767px){.car-dots{display:none}}
.carte{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.08);background:#e7ecea}
.carte iframe{display:block;width:100%;height:420px;border:0}
.widget{margin:4px 0}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.4rem;border:0;border-radius:999px;background:var(--teal);color:#fff!important;font:700 15px 'Montserrat','Montserrat-fb',Arial,sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 8px 20px rgba(0,80,74,.22);transition:background-color .25s,transform .2s,box-shadow .25s}
.btn:hover{background:var(--teal2);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,80,74,.3)}
.btn-2{background:#fff;color:var(--teal)!important;border:2px solid var(--teal);box-shadow:none}
.btn-2:hover{background:#e8f4f3}

/* ── Blocs de téléchargement (anciens bandeaux verts) et liens d'action ──── */
.btn-dl{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;border-radius:999px;background:var(--teal);color:#fff!important;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none!important;box-shadow:0 8px 18px rgba(0,80,74,.22);transition:background-color .25s,transform .2s,box-shadow .25s}
.btn-dl:hover{background:var(--teal2);transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,80,74,.3)}
.dl-lien{margin-top:10px}
.dl{display:flex;align-items:center;gap:22px;max-width:780px;margin:28px auto;padding:22px 28px;background:linear-gradient(135deg,#f5f9e4,#e9f4ef);border:1px solid #d3e4b6;border-left:5px solid var(--lime);border-radius:16px;box-shadow:0 10px 26px rgba(0,60,56,.08);text-align:left}
.dl-ico{flex:0 0 auto;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--teal);color:#fff;box-shadow:0 6px 14px rgba(0,80,74,.25)}
.dl-ico .ico{width:27px;height:27px}
a.dl-ico{text-decoration:none;color:#fff;transition:transform .2s,background-color .2s,box-shadow .2s}
a.dl-ico:hover,.dl:hover a.dl-ico{background:var(--teal2);transform:translateY(-2px) scale(1.05);box-shadow:0 10px 20px rgba(0,80,74,.3)}
.dl-corps a{color:inherit;text-decoration:none}
.dl-corps a:hover{color:var(--teal2);text-decoration:underline;text-underline-offset:4px}
.dl-corps{flex:1;min-width:0}
.dl-corps h1,.dl-corps h2,.dl-corps h3,.dl-corps p{text-align:left;margin:0}
.dl-corps h2,.dl-corps h3{font-size:21px;font-weight:600;line-height:1.3;color:var(--titre)}
.dl-corps p+p{margin-top:12px}
.dl-corps p img{display:none}                       /* feuilles décoratives de l'ancien bandeau : remplacées par l'icône */
.dl-corps p:first-child:not(.dl-lien){font-size:21px;font-weight:600;line-height:1.3;color:var(--titre)}
.btn-dl{text-align:left}
@media(max-width:640px){.dl{flex-direction:column;text-align:center;padding:22px 18px;gap:14px}.dl-corps h1,.dl-corps h2,.dl-corps h3,.dl-corps p{text-align:center}}
.puce{color:var(--teal);font-size:.9em}

/* ── Onglet et panneau « Nous contacter » ─────────────────────────────────── */
.onglet{position:fixed;top:40%;right:0;z-index:1000;writing-mode:vertical-rl;transform:rotate(180deg);padding:18px 12px;border:0;border-radius:0 8px 8px 0;background:var(--teal);color:#fff;font:700 18px 'Montserrat','Montserrat-fb',sans-serif;cursor:pointer;box-shadow:0 8px 22px rgba(0,60,56,.3);transition:background-color .3s,padding .3s}
.onglet:hover{background:var(--teal2);padding-left:16px}
.panneau{position:fixed;top:100px;right:0;z-index:1001;width:min(360px,92vw);max-height:calc(100vh - 120px);overflow:auto;padding:24px 22px;background:#fff;border-left:4px solid var(--teal);border-radius:16px 0 0 16px;box-shadow:0 20px 50px rgba(0,0,0,.25);text-align:center;transform:translateX(105%);visibility:hidden;transition:transform .4s ease,visibility .4s}
.panneau.open{transform:none;visibility:visible}
.panneau-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:#e8f4f3;color:var(--teal);cursor:pointer;display:grid;place-items:center}
.panneau{padding:30px 24px 26px}
.pn-logo{width:112px;height:auto;margin:0 auto 14px;border-radius:14px;box-shadow:0 6px 18px rgba(0,60,56,.15)}
.pn-nom{font-weight:700;font-size:18px;line-height:1.3;color:var(--titre)}
.pn-adr{font-size:15px;margin:6px 0 12px;color:#444}
.pn-tel{font-size:19px;font-weight:700;margin:0 0 18px}
.pn-tel a{color:var(--teal);text-decoration:none}
.pn-bloc{margin:0;padding:16px 0;border-top:1px solid #d9e8e6}
.pn-rej{font-size:15px;color:#444}
.pn-fb{display:grid;place-items:center;width:44px;height:44px;margin:10px auto 0;border-radius:50%;background:#1877f2;color:#fff;transition:transform .2s,filter .2s}
.pn-fb:hover{transform:translateY(-2px);filter:brightness(1.1)}
.pn-fb .ico{width:22px;height:22px;fill:#fff;stroke:none}
.pn-h{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.pn-txt{font-size:14px;line-height:1.5;color:#444;margin:0 0 14px}
.pn-plan{display:inline-flex;align-items:center;gap:.4rem;margin-top:4px;padding-top:14px;border-top:1px solid #d9e8e6;width:100%;justify-content:center;font-size:14px;font-weight:600;color:var(--teal);text-decoration:none}
.pn-plan:hover{text-decoration:underline}
/* petit écran : l'onglet vertical recouvrirait le bord du texte, on en fait un bouton en bas à gauche */
@media(max-width:600px){.onglet{writing-mode:horizontal-tb;transform:none;top:auto;bottom:14px;right:auto;left:12px;padding:.7rem 1.1rem;border-radius:999px;font-size:14px}.onglet:hover{padding:.7rem 1.1rem}.panneau{top:auto;bottom:70px;border-radius:16px 16px 0 0;max-height:calc(100vh - 100px)}}

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.pied{background:var(--teal);color:#fff;text-align:center;font-size:13px;line-height:1.7}
.pied-in{max-width:1170px;margin:0 auto;padding:26px 20px 28px}
.pied a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pied a:hover{text-decoration-thickness:2px}
.pied-fb{margin:12px 0}
.pied-fb a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;transition:background .25s}
.pied-fb a:hover{background:#1877f2}
.pied-fb .ico{fill:#fff;stroke:none}
.pied-credit{font-size:12px}
.haut-page{position:fixed;right:18px;bottom:18px;z-index:800;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;box-shadow:0 8px 22px rgba(0,60,56,.3);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s}
.haut-page.on{opacity:1;transform:none;pointer-events:auto}

/* ── Visionneuse ──────────────────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(8,26,24,.94);padding:40px 60px}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:84vh;width:auto;height:auto;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#eee;font-size:14px}
.lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb .ico{width:24px;height:24px}
.lb-x{top:16px;right:16px}.lb-p{left:14px;top:50%;transform:translateY(-50%)}.lb-n{right:14px;top:50%;transform:translateY(-50%)}
@media(max-width:600px){.lb{padding:20px 10px}.lb-p,.lb-n{top:auto;bottom:40px;transform:none}}

/* ── Apparition douce au défilement (sans JS : visible, voir <noscript>) ──── */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.vu{opacity:1;transform:none}
/* effets discrets : cadres des contacts qui se soulèvent, pastilles qui respirent */
.cadre-doc{transition:box-shadow .3s,transform .3s}
.cadre-doc:hover{box-shadow:0 12px 28px rgba(0,60,56,.14);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.vague g{animation:none!important}*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ── Pages annexes ────────────────────────────────────────────────────────── */
.annexe{text-align:center;padding:40px 0}
.annexe p{margin:12px 0}
.annexe .btn{margin:6px}