/*────────────────── Variables ─────────────────*/
:root{--primary:#07689f;--primary-dark:#05496f;--radius:.5rem}

/*──────────────────── Base ────────────────────*/
html {scrollbar-gutter: stable; scroll-behavior: smooth}
* {box-sizing: border-box; margin: 0; padding: 0; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif}
body {display: flex; flex-direction: column; min-height: 100vh; color: #1a202c; background: #f7fafc; overflow-y: scroll}
main {flex: 1; width: 100%; max-width: 1440px; margin: 0 auto}
footer {background: #edf2f7; color: #4a5568; text-align: center; padding: 1rem; font-size: 0.875rem;}

@media (max-width:640px){
  footer {font-size: 0.53rem; line-height: 1; padding: 0.4rem}
}

/*──────────────────── Header ───────────────────*/
header {position:sticky; top:0; z-index:9999; background:rgba(0,0,0,.85); backdrop-filter:blur(6px); padding:1rem 2rem; color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.1); transition:box-shadow .25s}
header.scrolled {box-shadow:0 4px 8px rgba(0,0,0,.15); transition:box-shadow .25s}
nav ul {list-style: none; display: flex; gap: 2rem; justify-content: center}
nav a {color: #ffffff; text-decoration: none; font-weight: 600; font-size: 1rem; transition: opacity 0.25s}
nav a:hover {opacity: 0.7}

@media (max-width:640px){
  header{padding: .6rem 1rem}
  nav ul{flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: .5rem}
  nav a{font-size: .78rem; white-space: nowrap}
}

/*──────────────────── Hero ─────────────────────*/
.hero{position: relative; height: 98vh; display: flex; align-items: center; justify-content: center; text-align: center; background: #000; color:#fff}
.hero::before{content:""; position:absolute; inset:0; background:url("images/entete.png") center/cover no-repeat; opacity:0; animation:fadeInHero 2s ease-out 0.3s forwards; z-index:0}
.hero::after {content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1; pointer-events: none}
.hero h1 {position: relative; z-index: 2; font-size: 4.5rem; line-height: 1.2; font-weight: 750; padding: 0 1rem; max-width: 1400px; color: #ffffff; opacity:0; transform:scale(.9); animation:zoomFade 1s ease-out 0.3s forwards}

@keyframes fadeInHero {from { opacity: 0; } to { opacity: 1}}
@keyframes zoomFade{from{opacity:0; transform:scale(.9);} to {opacity:1; transform:scale(1)}}

@media(max-width:640px){
  .hero{height:45vh}
  .hero h1{font-size:2rem;}
}

/*──────────────────── Sections ─────────────────*/
.section {padding: 4rem 1rem}
.section h2 {font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 2rem; color: #000}
.section p {max-width: 900px; margin: 0 auto 2rem; line-height: 1.6; font-size: 1.125rem}
.section.fade-block > p{text-align: center}

@media (max-width: 640px){
  .section.fade-block{padding-top: 1.5rem; padding-bottom: 1.5rem}
  .section.fade-block > p{font-size: 0.9rem}
  .section.fade-block > h2{font-size: 1.5rem}
}

/*──────────────────── Grids ───────────────────*/
.img-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; padding: 0 1rem}
.link-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 0 1rem}

/*────────────────── Image cards ───────────────*/
.img-card {position: relative; overflow: hidden; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); cursor: pointer; aspect-ratio: 16/10; display: flex}
.img-card img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; flex: 1}
.img-card:hover img {transform: scale(1.05)}
.img-card-title {position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.55); color: #fff; padding: 0.35rem 0.75rem; font-size: 1rem; font-weight: 600; border-radius: 20px; pointer-events: none}
.overlay {position: absolute; inset: 0; background: rgba(0,0,0,0.8); color: #fff; display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; opacity: 0; transition: opacity 0.4s ease}
.img-card .overlay > p{font-size: 1.2rem; line-height: 1.45}
.img-card:hover .overlay {opacity: 1}

@media (max-width: 640px) {
  #salles .img-card-title {left: 50% !important; transform: translateX(-50%) !important; bottom: 1rem; display: inline-block; width: max-content; max-width: 90%; white-space: normal; padding: .35rem .7rem; font-size: .75rem; line-height: 1.3; border-radius: .5rem}
  #salles .img-card .overlay > p{font-size: .8rem}
}

/*────────────────── Link cards ───────────────*/
.link-card {position: relative; display: flex; align-items: center; justify-content: center; border-radius: 1.5rem; cursor: pointer; height: 100px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); background: #000; overflow: hidden; transition: transform 0.5s}
.link-card:hover {transform: scale(1.04)}
.link-card img {display: none}
.link-card::after {content: none}
.link-card-title {color: #fff; font-size: 2.5rem; font-weight: 700; text-align: center; pointer-events: none; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; transition: transform 0.3s ease, font-size 0.3s}
.link-card:hover .link-card-title {transform: translate(-50%, -50%) scale(1.12)}

@media (max-width: 640px) {
  .link-card-title {font-size: 1.75rem}
  .link-grid{gap: 0.5rem}
  .link-card{height: 40px}
  .link-card-title{font-size: 0.9rem}
}
  
/*──────────────────── Animations ──────────────*/
.fade-tile{opacity:0; transform: translateY(40px); --delay:0ms; transition: transform 1.5s cubic-bezier(.22,1,.36,1) var(--delay), opacity 1.5s cubic-bezier(.22,1,.36,1) var(--delay)}
.fade-tile.show{opacity:1; transform:translateY(0)}
.fade-block{opacity:0; transform:translateY(40px); --delay:0ms; transition: transform 1.3s cubic-bezier(.22,1,.36,1) var(--delay), opacity   1.3s cubic-bezier(.22,1,.36,1) var(--delay)}
.fade-block.show{opacity:1; transform:translateY(0)}

/*──────────────────── Lightbox ────────────────*/
.lightbox{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); justify-content:center; align-items:center; z-index:10000; padding:2rem}
.lightbox.show{display:flex; animation:fadeIn 0.35s}
.lightbox-img{max-width:90vw; max-height:90vh; object-fit:contain; border-radius:1rem; box-shadow:0 0 25px rgba(0,0,0,0.45)}
.lightbox-frame{position:relative}
.lightbox-close{position:absolute; top:10px; right:10px; width:42px; height:42px; border:none; padding:0; border-radius:50%; background:rgba(0,0,0,.75); color:#fff; font-size:2rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; appearance:none; -webkit-tap-highlight-color:transparent; transition:background .25s}
.lightbox-close:hover{background:#000}
.lightbox-close:focus-visible,.lightbox-close:active{outline:2px solid #fff; outline-offset:2px}
.lightbox-close::before{content:"\00d7";position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.9rem; line-height:1; color:#fff; transform:translateY(-2px); pointer-events:none}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media (max-width: 640px) {
  .lightbox-close {width: 20px; height: 20px; font-size: 1rem}
  .lightbox-close::before { font-size: 1rem}
}


/*─────────────── Contact ────────────*/
.page-title {text-align: center; font-size: 2.5rem; font-weight: 700; margin: 2rem 0 3rem; color: #000}
.contact-wrapper {width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 1rem}
.contact-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 3rem; align-items: flex-start; padding-bottom: 4rem}
.contact-info h2,.contact-form-card h2 {font-size: 1.75rem; font-weight: 700; margin-bottom: 1.25rem; color: #1a202c}
.coordonnees {font-style: normal; line-height: 1.6; margin-bottom: 1rem}
.tel a {font-weight: 600; color: var(--primary)}
.map-container {position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)}
.map-container iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0}
.contact-list{list-style:none; margin:0 0 2rem; padding:0; display:flex; flex-direction:column; gap:1.25rem}
.contact-list li{display:flex; gap:0.75rem; align-items:flex-start; line-height:1.6; font-size:1rem}
.contact-list address{font-style:normal}
.contact-list .icon{flex:none; width:1.25rem; height:1.25rem; margin-top:0.25rem; color:var(--primary); opacity:0.9}

@media (max-width: 640px) {
  .page-title {font-size: 2.2rem}
  .contact-grid {gap: 1.5rem}
  .contact-list li{font-size:0.95rem; line-height:1.45}
}

/*────────────  Formulaire ────────────*/
.contact-form-card {background: #fff; border-radius: var(--radius); padding: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)}
.form-group {display: flex; flex-direction: column; margin-bottom: 1.25rem}
.form-group label {font-weight: 600; margin-bottom: 0.5rem}
.contact-form-card input,
.contact-form-card textarea {border: 1px solid #cbd5e0; border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 1rem; font-family: inherit; transition: border-color 0.25s}
.contact-form-card input:focus,
.contact-form-card textarea:focus {outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(7, 104, 159, 0.25)}
.btn-primary {background: var(--primary); color: #fff; border: none; padding: 0.75rem 1.75rem; font-size: 1rem; font-weight: 600; border-radius: 999px; cursor: pointer; transition: background 0.25s ease}
.btn-primary:hover {background: var(--primary-dark)}
.fieldset {background: #f9fafb; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 1.5rem 1rem 1rem; margin-bottom: 1.75rem}
.fieldset input,
.fieldset select,
.fieldset textarea {background: #fff}
.fieldset legend {padding: 0 0.5rem; font-size: 1rem; font-weight: 600; color: #1a202c}
.form-row {display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 2rem; margin-bottom: 1.25rem}
.contact-form-card select {appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232c5282' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.073 2.327 4 3.204 4h9.592c.877 0 1.319 1.073.753 1.658l-4.796 5.482a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 0.75rem center/0.65rem; padding-right: 2rem}
.contact-form-card select:focus {outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(7, 104, 159, 0.25)}
.form-alert {margin-top: 1rem; font-size: 0.875rem}
.form-alert.success {color: #2f855a}
.form-alert.error {color: #c53030}
.hidden {display: none !important}


/* ─  Nos Actes  ─ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;background:#fafafa;color:#111}

:root{--primary:#0a84ff; --radius:12px}

.categories-wrapper{display:flex;gap:2rem;padding:2rem 1rem 4rem;align-items:flex-start;flex-wrap:wrap}
.column{flex:1 1 0;display:flex;flex-direction:column;gap:2rem;min-width:280px}
details{overflow-anchor:none;position:relative}
.category-summary{width:100%;min-height:160px;border-radius:var(--radius); display:flex;align-items:center;justify-content:center;flex-wrap:wrap; padding:3rem 1rem;text-align:center;font-size:1.6rem;font-weight:700; background:#000;color:#fff;cursor:pointer;user-select:none; box-shadow:0 4px 12px rgba(0,0,0,.12); transition:transform .35s,box-shadow .35s,background .35s}
.category-summary:hover{transform:scale(1.04);box-shadow:0 8px 22px rgba(0,0,0,.20)}
details[open]>.category-summary{background:var(--primary);color:#fff}

.interventions{overflow:hidden;height:0;margin-top:0; transition:height .5s cubic-bezier(.22,1,.36,1),margin-top .5s cubic-bezier(.22,1,.36,1); list-style:disc;padding-left:1.5rem;display:flex;flex-direction:column;gap:.75rem; font-size:1rem}
.interventions li{--d:0;opacity:0;transform:translateY(-8px); will-change:opacity,transform}
details[open] .interventions li{animation:fadeIn .6s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--d)*50ms)}
.closing li{animation:fadeOut .5s ease forwards; animation-delay:calc((var(--total) - var(--d) - 1)*50ms)}

@keyframes fadeIn  {from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeOut {from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-8px)}}

.interventions a{color:var(--primary);text-decoration:none;font-weight:500}
.interventions a:hover{text-decoration:underline}

@media (max-width:640px){
  .categories-wrapper{flex-direction:column;gap:0.6rem}
  .column{min-width:100%;gap:0.6rem}
  .categories-grid{grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr))}
  .category-summary{min-height:50px; font-size:0.9rem; padding:0.9rem 0.75rem}
  .interventions{gap:0.5rem; font-size:0.6rem; margin-bottom:0.8rem; }
}


/*── Hero « light » des pages acte ───*/
.hero--intervention{height:35vh}
.hero--intervention h1{font-size:2.5rem; font-weight:700}

@media(max-width:640px){
  .hero--intervention{height: 22vh; padding: 0 0.75rem}
  .hero--intervention h1{font-size: 1.3rem; line-height: 1.2}
}


/*── « Fiche pratique » : 4 badges en grille 2 × 2 ──*/
.info-cards{display:grid; grid-template-columns:repeat(2,minmax(110px,1fr)); gap:1.5rem; max-width:550px; margin:2.5rem auto}
.badge{position:relative; background:#f1f5f9; border-radius:1rem; padding:1.75rem 1rem; font-size:1.5rem; font-weight:700; color:#1a202c; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.08); user-select:none; transition:transform .25s ease, box-shadow .25s}
.badge:hover{transform:scale(1.06); box-shadow:0 4px 10px rgba(0,0,0,.12)}
.badge[data-tooltip]::after{content:attr(data-tooltip); position:absolute; left:50%; bottom:100%; transform:translateX(-50%) translateY(-8px); background:#000; color:#fff; font-size:0.75rem; padding:0.35rem 0.55rem; border-radius:0.25rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s}
.badge[data-tooltip]::before{content:""; position:absolute; left:50%; bottom:100%; transform:translateX(-50%) translateY(-3px); border:6px solid transparent; border-top-color:#000; opacity:0; transition:opacity .25s, transform .25s}
.badge:hover::after,
.badge:hover::before{opacity:1; transform:translateX(-50%) translateY(-0.25rem)}
.badge .icon-bed{font-size:1rem; margin-right:0.25rem; vertical-align:middle}

@media(max-width:640px){
  .badge[data-tooltip]::after{font-size: 0.4rem}
  .info-cards{grid-template-columns: repeat(2, 1fr); gap: 0.75rem; max-width: 100%; padding: 0 0.4rem}
  .badge{padding: 1rem 0.6rem; font-size: 1rem}
  .badge .icon-bed{font-size: 0.8rem; }
}


/*──── Grille d'encarts façon Apple TV Home ────*/
.info-grid{display:grid;grid-template-columns:repeat(2,1fr); gap:3rem 2.5rem; max-width:1400px; margin:4rem auto; padding:0 1rem}
.info-card{background:#fff; border-radius:1.5rem; padding:3rem clamp(1.5rem,4vw,4rem); box-shadow:0 8px 32px rgba(0,0,0,.08); min-height:800px; transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .6s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column}
.info-card h2{font-size:clamp(1.4rem,2.3vw,2.1rem); font-weight:700; margin-bottom:3rem; color:#000}
.info-card p{line-height:1.7; font-size:1.2rem; max-width:65ch}

@media(max-width:780px){
  .info-grid{grid-template-columns:1fr; gap:1rem; padding: 0.2 0.4rem}
  .info-card{min-height: 500px; padding: 1.5rem 0.75rem}
  .info-card h2{margin-bottom: 1.2rem; font-size: 1.25rem; text-align: center}
  .info-card p{font-size: 0.75rem; line-height: 1.55; text-align: justify; text-justify: inter-word; max-width: 95%; hyphens: auto}
}


/*─────── Carousel galerie 2 × N ───────*/
.carousel{position:relative; max-width:100%; margin-inline:auto}
.carousel-window{overflow:hidden; padding:0 3rem}
.carousel-track{display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto); grid-auto-columns:300px; gap:1rem; transition:transform .6s cubic-bezier(.22,1,.36,1)}
.thumb{width:300px; height:400px; object-fit:cover; border-radius:.75rem; box-shadow:0 2px 8px rgba(0,0,0,.12); cursor:pointer}
.arrow{position:absolute; top:50%; translate:0 -50%; background:#000000cc; color:#fff; border:none; width:42px; height:42px; border-radius:50%; font-size:1.5rem; line-height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s; z-index:10}
.arrow:hover{background:#000;}
.arrow-left {left:0.75rem;}
.arrow-right{right:0.75rem;}

@media (max-width: 768px) {
  .carousel-window{padding: 0 1rem}
  .carousel-track{grid-template-rows: repeat(2, auto); grid-auto-columns: 30vw; gap: .5rem}
  .thumb{width: 30vw; aspect-ratio: 3 / 4; height: auto}
  .arrow{width: 28px; height: 28px; font-size: 1.1rem; line-height: 28px}
}