/* Modernisation thème Cariem */
:root {
  --brand: #305497;
  --brand-50: #eaedf4;
  --brand-100: #d5dcea;
  --brand-200: #acbad5;
  --brand-300: #8298c0;
  --brand-400: #5976ab;
  --brand-500: #305497;
  --brand-600: #284780;
  --brand-700: #213a69;
  --brand-800: #1a2e53;
  --brand-900: #13213c;
  accent-color: var(--brand);
}

body.modernized {
  font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
  background:#fff; /* fond uni pour éviter les bandes grisées sur desktop */
  color: var(--brand-900);
  scroll-padding-top: 120px; /* évite masquage si header devient sticky - augmenté pour compenser navbar */
  position:relative;
}

/* Ancres pour réalisations : assure un décalage suffisant même si scroll-padding-top n'est pas supporté */
.realisation {
  scroll-margin-top: 120px; /* Alternative/complément à scroll-padding-top */
}
/* (Halo top supprimé pour que la navbar touche directement le haut) */

.hero {
  position: relative;
  display: grid;
  min-height: 55vh;
  place-items: center;
  padding: clamp(4.5rem,8vh,6.5rem) 1rem clamp(2.5rem,5vh,4rem);
  overflow: hidden;
  box-sizing: border-box;
}
.hero__bg { position:absolute; inset:0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero__overlay { position:absolute; inset:0; background:linear-gradient(120deg,rgba(48,84,151,.78),rgba(48,84,151,.35)); backdrop-filter:blur(2px); }
.hero__content { position:relative; max-width:900px; text-align:center; color:#fff; }
.hero__title { font-size:clamp(2rem,5vw,3.25rem); line-height:1.1; margin:0 0 1rem; font-weight:700; }
.hero__lead { font-size:clamp(1.05rem,1.6vw,1.35rem); margin:0 auto 1.75rem; line-height:1.5; }
/* Compact hero (utilisé pour page Contact) */
.hero--compact { min-height:260px; padding:clamp(3.5rem,7vh,5rem) 1rem clamp(1.5rem,4vh,2.4rem); }
.hero--compact .hero__title { font-size:clamp(1.9rem,5.2vw,2.6rem); }
.hero--compact .hero__lead { font-size:clamp(.95rem,1.5vw,1.15rem); margin:0.75rem auto 0; max-width:60ch; }
.hero--compact .hero__bg { background:linear-gradient(140deg,#1a2e53,#305497); }
.btn { --btn-bg: var(--brand); --btn-color:#fff; --btn-bg-hover:#1a2e53; font:600 1rem/1 'Montserrat',sans-serif; display:inline-block; padding:.875rem 1.75rem; border-radius:50px; letter-spacing:.5px; text-decoration:none; background:var(--btn-bg); color:var(--btn-color); box-shadow:0 6px 18px -6px rgba(48,84,151,.45); transition:.35s cubic-bezier(.55,.085,.68,.53); }
.btn:hover, .btn:focus-visible { background:var(--btn-bg-hover); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(48,84,151,.55); }
.btn--ghost { --btn-bg: rgba(255,255,255,.14); --btn-bg-hover: rgba(255,255,255,.28); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.4); }
.btn--ghost-light { --btn-bg: rgba(48,84,151,.08); --btn-color: var(--brand-700); --btn-bg-hover: rgba(48,84,151,.15); backdrop-filter:blur(4px); border:1px solid rgba(48,84,151,.25); box-shadow:0 4px 12px -4px rgba(48,84,151,.2); }

.section { padding: clamp(2.5rem,6vw,5rem) 1.25rem; }
.section + .section { margin-top: 0; }
main > .section:first-of-type { margin-top: 0; }
main { display:block; width:100%; position:relative; z-index:1; }

/* Containment pour éviter chevauchements lors de transitions ou resize */
.section, .hero { contain: layout paint style; }
.section { overflow: visible; }

/* Sécurité mobile: augmenter padding top si wrap du hero */
@media (max-width: 640px){
  .hero { min-height: 420px; padding-top: clamp(5.5rem,12vh,7rem); }
  .hero__title { font-size: clamp(1.9rem,7vw,2.4rem); }
  .hero__lead { font-size: clamp(1rem,4.2vw,1.15rem); }
}

/* Très étroit */
@media (max-width: 400px){
  .hero { min-height: 380px; padding-top: 6.5rem; }
}
.section { position:relative; z-index:1; }
.hero { isolation:isolate; }
.hero__bg, .hero__overlay { z-index:0; }
.hero__content { z-index:1; }
.section__title { position:relative; z-index:2; }
.section--alt { background:linear-gradient(180deg,#f6f8fb 0%, #ffffff 100%); border:none; box-shadow:0 1px 0 rgba(0,0,0,.04),0 -1px 0 rgba(0,0,0,.03); position:relative; }
/* ========================
   ABOUT SECTION (Qui nous sommes)
========================= */
.section--about { background:#fff; border:1px solid var(--brand-100); border-radius:26px; box-shadow:0 8px 26px -12px rgba(26,46,83,.10); position:relative; padding:1.15rem 1.25rem 1.4rem; margin:clamp(1.75rem,4vw,3.25rem) 20px; }
@media (min-width:900px){ .section--about { padding-left:clamp(2rem,4vw,3rem); padding-right:clamp(2rem,4vw,3rem); } }
.about-layout { display:grid; gap:clamp(1.75rem,3vw,2.5rem); }
.about-title { text-align:left; margin-bottom:1rem; }
.about-image img { display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 8px 26px -12px rgba(26,46,83,.18); background:var(--brand-50); }
@media (max-width:899px){
  .about-image img { max-height:35vh; width:auto; max-width:100%; height:auto; object-fit:contain; margin-left:auto; margin-right:auto; }
}
@media (min-width:900px){
  .about-layout { grid-template-columns: minmax(180px,300px) 1fr; grid-template-areas: 'image title' 'image text'; align-items:start; }
  .about-title { grid-area:title; margin:0 0 1.1rem; text-align:left; }
  .about-image { grid-area:image; position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
  .about-text { grid-area:text; }
}
@media (max-width:899.98px){
  .about-layout { grid-template-columns:1fr; }
  .about-title { text-align:center; }
  .about-image { order:2; }
  .about-text { order:3; }
  .about-text p { text-align:left; }
}

/* ========================
  ERROR PAGES (404, 5xx)
  (externalisé depuis 404.php)
========================= */
body.error-page { background: linear-gradient(135deg,#f5f8fb,#e9f0f7); color:#1a2e53; }
.main404 { max-width:1100px; margin:0 auto; padding:clamp(2rem,4vw,3rem) clamp(1.25rem,4vw,2.25rem) clamp(3rem,6vw,4rem); box-sizing:border-box; }
.card404 { position:relative; background:#fff; border:1px solid var(--brand-100,#d7e3ef); border-radius:30px; padding:clamp(7rem,14vw,10rem) clamp(2.5rem,6vw,4rem) clamp(4rem,8vw,5.5rem); box-shadow:0 8px 40px -18px rgba(26,46,83,.18),0 4px 16px -8px rgba(26,46,83,.08); overflow:hidden; }
@media (max-width:640px){
  .card404 { padding:clamp(4.5rem,18vh,6rem) clamp(1.4rem,5vw,2rem) clamp(3rem,10vh,4rem); }
}
.card404:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(29,77,143,.18),transparent 60%); pointer-events:none; }
.badge-404 { font-size:clamp(3rem, 15vw, 8.5rem); font-weight:700; line-height:0.85; letter-spacing:-2px; background:linear-gradient(90deg,var(--brand-500,#1d4d8f),var(--brand-400,#2a6dc7)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 10px rgba(29,77,143,.25)); margin:0 0 1rem; }
.lead404 { font-size:clamp(1.15rem,2.1vw,1.65rem); font-weight:600; margin:0 0 1.2rem; color:#133152; }
.msg404 { font-size:clamp(.95rem,1.15vw,1.05rem); line-height:1.55; max-width:680px; margin:0 0 1.75rem; }
.suggestions { display:flex; flex-wrap:wrap; gap:.75rem; margin:0 0 2.1rem; }
.suggestions a { text-decoration:none; background:var(--brand-50,#f0f6fb); color:var(--brand-700,#103257); padding:.75rem 1rem; border-radius:14px; font-weight:600; font-size:.95rem; border:1px solid var(--brand-100,#d7e3ef); transition:.3s background, .3s color, .3s box-shadow; box-shadow:0 2px 4px -2px rgba(26,46,83,.18); }
.suggestions a:hover { background:var(--brand-500,#1d4d8f); color:#fff; box-shadow:0 4px 14px -4px rgba(29,77,143,.45); }
.search-hint { font-size:.8rem; opacity:.7; margin-top:-1rem; margin-bottom:1.6rem; }
.action-row { display:flex; flex-wrap:wrap; gap:.85rem; }
.btn-primary404 { --btn-bg: var(--brand-500,#1d4d8f); --btn-bg-h: var(--brand-600,#164274); text-decoration:none; background:var(--btn-bg); color:#fff; padding:.85rem 1.25rem; border-radius:14px; font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:.55rem; box-shadow:0 6px 18px -8px rgba(29,77,143,.5),0 3px 8px -4px rgba(29,77,143,.25); transition:.3s background,.3s transform,.3s box-shadow; }
.btn-primary404:hover { background:var(--btn-bg-h); transform:translateY(-2px); box-shadow:0 10px 28px -10px rgba(29,77,143,.55),0 6px 16px -6px rgba(29,77,143,.35); }
.btn-secondary404 { text-decoration:none; background:#fff; color:var(--brand-600,#164274); padding:.85rem 1.2rem; border-radius:14px; font-weight:600; font-size:.95rem; border:1px solid var(--brand-200,#c4d6e7); display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 4px 14px -6px rgba(26,46,83,.12); transition:.3s background,.3s color,.3s box-shadow,.3s transform; }
.btn-secondary404:hover { background:var(--brand-50,#f0f6fb); color:var(--brand-800,#0c223d); transform:translateY(-2px); box-shadow:0 8px 22px -10px rgba(26,46,83,.25); }
.figure404 { position:relative; max-width:420px; margin:1.2rem auto 0; }
.figure404 img { width:100%; height:auto; display:block; filter:drop-shadow(0 8px 30px -10px rgba(26,46,83,.5)); border-radius:22px; }
/* Remplacé par un filigrane global discret */
.card404::after { content:"404"; position:absolute; top:6%; left:1rem; font:800 clamp(4rem,20vw,13rem)/0.8 'Montserrat',sans-serif; color:rgba(48,84,151,.11); letter-spacing:-6px; pointer-events:none; user-select:none; mix-blend-mode:multiply; -webkit-text-stroke:4px rgba(255,255,255,.18); }
body.error-403 .card404::after { content:"403"; }
body.error-500 .card404::after { content:"500"; }
/* Fallback masquage du texte '404' (badge) si CSS chargé: on conserve dans le DOM pour quand CSS absent */
.badge-404 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap; }
@media (min-width:860px){ .layout404 { display:grid; grid-template-columns: 1.05fr .9fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; } .figure404 { margin:0; } }
@media (max-width:620px){ .card404 { border-radius:24px; } .badge-404 { font-size:clamp(3.5rem, 24vw, 6.5rem); } }
/* 404 mobile fine-tuning: empêcher tout débordement horizontal sur écrans très étroits */
body.error-page { overflow-x:hidden; }
@media (max-width:480px){
  .main404 { padding-left:clamp(1rem,5vw,1.25rem); padding-right:clamp(1rem,5vw,1.25rem); overflow:hidden; }
  .card404 { margin:0; max-width:100%; width:100%; box-sizing:border-box; box-shadow:0 6px 24px -14px rgba(26,46,83,.22); }
  .layout404 { display:block; }
  .figure404 { max-width:100%; }
  .figure404 img { width:100%; height:auto; }
}
@media (max-width:360px){
  .card404 { padding-left:clamp(1rem,5vw,1.25rem); padding-right:clamp(1rem,5vw,1.25rem); }
  .suggestions { gap:.55rem; }
  .suggestions a { padding:.6rem .75rem; }
  .card404::after { font-size:clamp(4rem,70vw,8rem); left:50%; transform:translateX(-50%); letter-spacing:-2px; }
}
@media (max-width:320px){
  .card404 { padding:3.5rem 1rem 3rem; }
  .card404::after { font-size:62vw; }
  .layout404, .content404, .figure404 { max-width:100%; }
}

/* Fondu doux entre sections (desktop) */
@media (min-width:900px){
  .section + .section { position:relative; }
  .section + .section::before { content:""; position:absolute; top:-40px; left:0; right:0; height:40px; background:linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0)); pointer-events:none; }
}
.section__title { font-size:clamp(1.6rem,3.2vw,2.3rem); margin:0 0 1.25rem; font-weight:700; text-align:center; color:var(--brand-800); }

.grid { --cols:3; display:grid; gap:clamp(1rem,2vw,2rem); grid-template-columns:repeat(var(--cols),1fr); }
@media (max-width: 900px){ .grid { --cols:2; } }
@media (max-width: 640px){ .grid { --cols:1; } }

/* Sécurité overflow sur grid enfants */
.grid > * { min-width:0; }

.card { position:relative; background:#fff; border:1px solid var(--brand-100); border-radius:16px; padding:0; display:flex; flex-direction:column; box-shadow:0 8px 28px -12px rgba(26,46,83,.16); overflow:hidden; transition:.4s; max-width:100%; box-sizing:border-box; }
.card { cursor:pointer; }
/* Lien englobant */
.card__inner { display:flex; flex-direction:column; gap:.75rem; padding:1.15rem 1.15rem 1.3rem; text-decoration:none; color:inherit; height:100%; width:100%; position:relative; z-index:1; box-sizing:border-box; }
.card__inner:focus-visible { outline:2px solid var(--brand-500); outline-offset:4px; border-radius:14px; }
.card__inner:hover .card__title, .card__inner:focus .card__title { text-decoration:underline; }
.card::before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(48,84,151,.08),transparent 60%); opacity:0; transition:.5s; pointer-events:none; }
.card:hover::before { opacity:1; }
.card:hover { transform:translateY(-4px); box-shadow:0 14px 36px -14px rgba(26,46,83,.28); }
.card__img-wrapper { position:relative; aspect-ratio: 4 / 3; overflow:hidden; border-radius:12px; background:var(--brand-50); }
.card__img-wrapper img { width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:480px){
  .card__inner { padding:1rem 1rem 1.15rem; }
  .grid { gap:1rem; }
}
.card__img-wrapper img { width:100%; height:100%; object-fit:cover; display:block; transition: .7s ease; }
.card:hover .card__img-wrapper img { transform:scale(1.05); }
.card__caption { font:600 .85rem 'Montserrat Alternates',sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--brand-500); }
.card__title { margin:0; font-size:1.05rem; font-weight:600; color:var(--brand-800); }
.card__meta { font-size:.8rem; opacity:.7; }

.before-after { --h:320px; position:relative; max-width:900px; margin:0 auto; aspect-ratio: 16 / 9; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px -12px rgba(26,46,83,.35); }
.before-after img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.before-after__after { clip-path:inset(0 0 0 50%); transition:clip-path .4s ease; }
.before-after__slider { position:absolute; inset:0; width:100%; height:100%; -webkit-appearance:none; appearance:none; background:transparent; margin:0; cursor:ew-resize; }
.before-after__slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:4px; height:100%; background:#fff; box-shadow:0 0 0 1px var(--brand-600),0 0 0 6px rgba(255,255,255,.35); border-radius:2px; }
.before-after__label { position:absolute; top:12px; left:16px; background:rgba(0,0,0,.5); color:#fff; font:600 .75rem 'Montserrat',sans-serif; padding:.35rem .6rem; border-radius:6px; letter-spacing:.5px; }
.before-after__label--after { left:auto; right:16px; }

.features { --cols:4; }
@media (max-width:1100px){ .features { --cols:3; } }
@media (max-width:820px){ .features { --cols:2; } }
@media (max-width:560px){ .features { --cols:1; } }

.feature { display:flex; gap:1rem; align-items:flex-start; }
.feature__icon { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:var(--brand-100); color:var(--brand-600); font-size:1.25rem; font-weight:700; }
.feature__body h3 { margin:.15rem 0 .4rem; font-size:1.05rem; font-weight:600; }
.feature__body p { margin:0; font-size:.9rem; line-height:1.4; }

.section--tight { padding-top: clamp(1.5rem,4vw,3rem); padding-bottom: clamp(1.5rem,4vw,3rem); }

.skip-link:focus { left:0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}
/* ========================
  LIGHTBOX (refonte)
========================= */
.lb-overlay { position:static; background:none; padding:0; margin:0; opacity:1; pointer-events:none; }
.lb-overlay[aria-hidden="true"] { display:none; }
.lb-overlay[aria-hidden="false"]::before { content:""; position:fixed; inset:0; z-index:1190; pointer-events:none; background:
  /* Nouvelle montée d’opacité (+~5) */
  linear-gradient(180deg, rgba(48,84,151,.20) 0%, rgba(48,84,151,.135) 38%, rgba(48,84,151,.09) 60%, rgba(48,84,151,.055) 78%, rgba(48,84,151,0) 100%),
  radial-gradient(circle at 50% 40%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%);
  mix-blend-mode:normal;
  transition:opacity .4s ease; }
.lb-box, .lb-close button, .lb-prev, .lb-next { pointer-events:auto; }
/* Box fixed centrée uniquement */
.lb-box { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); max-width:min(1200px,80vw); max-height:80vh; display:flex; flex-direction:column; gap:.65rem; z-index:1200; }
.lb-media { position:relative; flex:1 1 auto; display:grid; place-items:center; }
.lb-media img { max-width:100%; max-height:70vh; width:auto; height:auto; object-fit:contain; border-radius:14px; background:rgba(255,255,255,.85); box-shadow:0 6px 26px -10px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.08); border:1px solid rgba(255,255,255,.9); animation:lb-pop .45s cubic-bezier(.4,.13,.25,1); transition:opacity .25s ease; }
/* Etat chargement: masquer image jusqu'au load pour éviter flash gris */
.lb-overlay.lb-loading .lb-media img { opacity:0; }
.lb-media::after { content:""; position:absolute; inset:0; display:none; place-items:center; background:rgba(255,255,255,.4); backdrop-filter:blur(2px); border-radius:18px; }
.lb-overlay.lb-loading .lb-media::after { display:grid; }
.lb-overlay.lb-loading .lb-media::after { content:""; animation:lb-spin 1s linear infinite; width:48px; height:48px; border:4px solid rgba(0,0,0,.15); border-top-color:#ff4355; border-radius:50%; background:transparent; justify-self:center; align-self:center; }
@keyframes lb-spin { to { transform:rotate(360deg); } }
.lb-caption { 
  font:600 .95rem/1.5 'Montserrat',sans-serif; 
  color:#ffffff; 
  text-align:center; 
  margin:0; 
  max-width:clamp(320px,80vw,900px); 
  align-self:center; 
  background:linear-gradient(145deg,rgba(10,20,35,.78),rgba(24,42,72,.78)); 
  -webkit-backdrop-filter:blur(6px); 
  backdrop-filter:blur(6px); 
  padding:.7rem 1rem .85rem; 
  border-radius:18px; 
  box-shadow:0 6px 22px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); 
  letter-spacing:.2px; 
}
/* Réduction légère sur écrans étroits pour conserver lisibilité sans recouvrement excessif */
@media (max-width:640px){
  .lb-caption { font-size:.9rem; padding:.55rem .75rem .7rem; border-radius:14px; line-height:1.45; }
}
@media (max-width:420px){
  .lb-caption { font-size:.85rem; padding:.5rem .65rem .6rem; }
}
.lb-close, .lb-nav { position:absolute; top:0; display:flex; gap:.5rem; }
.lb-close { right:0; }
.lb-btn { background:linear-gradient(145deg,#ffffff,#f2f2f6); border:1px solid rgba(0,0,0,.15); border-radius:14px; width:46px; height:46px; cursor:pointer; display:grid; place-items:center; font:700 1.2rem/1 'Montserrat',sans-serif; color:#1a2230; box-shadow:0 8px 28px -10px rgba(0,0,0,.55); transition:.25s; }
.lb-btn:hover { background:#ff4355; color:#fff; border-color:#ff4355; box-shadow:0 10px 34px -12px rgba(0,0,0,.6); }
.lb-close { top:-60px; right:0; }
.lb-prev, .lb-next { backdrop-filter:blur(4px); }
@keyframes lb-pop { 0% { opacity:0; transform:scale(.92); } 60% { opacity:1; transform:scale(1.01); } 100% { transform:scale(1); } }
.lb-nav { left:0; }
.lb-prev, .lb-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.9); color:#1a2230; width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center; font:700 1.45rem/1 'Montserrat',sans-serif; box-shadow:0 10px 28px -10px rgba(0,0,0,.55); transition:.3s; }
.lb-prev { left:clamp(.5rem,2vw,1.5rem); }
.lb-next { right:clamp(.5rem,2vw,1.5rem); }
.lb-prev:hover, .lb-next:hover { background:#ff4355; color:#fff; }
@media (max-width:680px){ .lb-prev, .lb-next { width:46px; height:46px; font-size:1.1rem; } .lb-btn { width:40px; height:40px; font-size:1rem; } }
@media (prefers-reduced-motion:reduce){ .lb-overlay { transition:none; } }

/* Forcer la compatibilité: tout élément avec l'attribut [hidden] est totalement masqué (évite overrides hérités) */
[hidden] { display:none !important; }

/* ========================
   PAGE REALISATIONS LISTE VERTICALE
========================= */
.realisations-list { display:flex; flex-direction:column; gap:clamp(2.5rem,5vw,4rem); max-width:1200px; margin:0 auto; }
.realisation { background:#fff; border:1px solid var(--brand-100); border-radius:20px; padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,2.2vw,2rem) clamp(2rem,3.5vw,2.75rem); box-shadow:0 8px 26px -12px rgba(26,46,83,.15); position:relative; }
.realisation__title { margin:0 0 .35rem; font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:700; color:var(--brand-700); }
.realisation__title a { color:inherit; text-decoration:none; position:relative; }
.realisation__title a::after { content:"#"; opacity:0; margin-left:.4ch; font-weight:400; font-size:.7em; vertical-align:middle; transition:.25s; color:var(--brand-500); }
.realisation__title a:hover::after, .realisation__title a:focus::after { opacity:1; }
.realisation__title a:focus-visible { outline:2px solid var(--brand-500); outline-offset:4px; border-radius:4px; }

/* Colonnes image gauche / texte droite */
.realisation__cols { display:grid; grid-template-columns: minmax(300px,520px) minmax(0,1fr); gap:clamp(1.5rem,3vw,2.75rem); align-items:start; }
.realisation__body { display:flex; flex-direction:column; justify-content:flex-start; }
.realisation__media { position:relative; }
@media (max-width:1100px){ .realisation__cols { grid-template-columns:minmax(260px,480px) 1fr; } }
@media (max-width:860px){ .realisation__cols { grid-template-columns:1fr; } .realisation__media { order:1; } .realisation__body { order:2; } .realisation__main { max-width:100%; } }
.realisation__subtitle { margin:0 0 .85rem; font:600 .85rem 'Montserrat Alternates',sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--brand-500); }
.realisation__desc { margin:0 0 1.25rem; font-size:.92rem; line-height:1.5; color:var(--brand-800); max-width:70ch; }
.realisation__gallery { display:grid; gap:clamp(.85rem,1.5vw,1.25rem); grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); }
.realisation__figure { margin:0; position:relative; border-radius:14px; overflow:hidden; background:var(--brand-50); aspect-ratio: 4 / 3; }
.realisation__figure img { width:100%; height:100%; object-fit:cover; display:block; transition:.6s ease; }
.realisation__figure:hover img { transform:scale(1.05); }

/* ========================
   PAGE CONTACT (modernisée visuellement)
========================= */
.contact-layout { display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns: minmax(0,1fr) minmax(260px,360px); align-items:start; max-width:1200px; margin:0 auto; }
@media (max-width:880px){ .contact-layout { grid-template-columns:1fr; } .contact-info { order:2; } }
.contact-layout { overflow:visible; }
/* Full-bleed vers la droite : étend le bloc coordonnées jusqu'au bord de la fenêtre */
.contact-info { margin-right: calc((100vw - 100%) * -1); padding-right:clamp(1.6rem,3vw,2.6rem); }
@media (max-width:880px){ .contact-info { margin-right: calc((100vw - 100%) * -1); padding-right:clamp(1.4rem,4vw,2.2rem); } }
/* Lorsque le menu hamburger est ouvert, annuler l'extension full-bleed pour éviter un décalage visuel du header/
  wrapper (le slide utilise left:XXpx). Cette neutralisation empêche un léger « saut » spécifique à la page
  Contact dû au calcul dynamique de (100vw - 100%). */
body.menu-open .contact-info { margin-right:0 !important; border-top-right-radius:20px; border-bottom-right-radius:20px; }
/* Mobile: header toujours visible (approche unifiée) */
@media (max-width:1024px){
  #header-wrap.fixed-mobile-header { position:fixed !important; top:0; left:0; right:0; z-index:130; background:#fff; }
  body.has-mobile-fixed-header main { padding-top: var(--mobile-header-h, 88px); }
}
/* Marge interne horizontale symétrique sur mobile pour le bloc contact (évite bord droit collé) */
@media (max-width:880px){
  .contact-layout { padding-left:1.1rem; padding-right:1.1rem; box-sizing:border-box; }
}
/* Harmoniser marges horizontales (y compris tablettes) */
@media (max-width:1200px){
  .contact-layout { padding-left:clamp(1rem,3vw,1.5rem); padding-right:clamp(1rem,3vw,1.5rem); box-sizing:border-box; }
}
@media (max-width:520px){
  .contact-layout { padding-left:.95rem; padding-right:.95rem; }
}
.contact-panel { background:#fff; border:1px solid var(--brand-100); border-radius:20px; padding:clamp(1.4rem,2.2vw,2rem) clamp(1.25rem,2vw,1.8rem) clamp(1.8rem,2.6vw,2.2rem); box-shadow:0 8px 24px -12px rgba(26,46,83,.15); position:relative; }
.contact-info { background:linear-gradient(165deg,var(--brand-800),var(--brand-600)); color:#fff; border-radius:20px; padding:clamp(1.4rem,2.2vw,2rem); box-shadow:0 10px 28px -14px rgba(26,46,83,.4); position:relative; overflow:hidden; }
.contact-info { border-top-right-radius:0; border-bottom-right-radius:0; }
.contact-info--bleed { margin-right: calc((100vw - 100%) * -1); }
@media (max-width:880px){
  /* Conserver le débordement à droite aussi sur mobile */
  .contact-info--bleed { margin-right: calc((100vw - 100%) * -1); border-top-right-radius:0; border-bottom-right-radius:0; }
}
/* Quand le menu est ouvert, rétablir le bleed spécifique pour cette variante */
body.menu-open .contact-info--bleed { margin-right: calc((100vw - 100%) * -1) !important; border-top-right-radius:0; border-bottom-right-radius:0; }
.contact-info::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 20%, rgba(255,255,255,.24), transparent 60%); mix-blend-mode:overlay; pointer-events:none; }
.contact-info__title { margin:0 0 1rem; font-size:1.25rem; font-weight:700; letter-spacing:.5px; }
.contact-info__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; font:500 .9rem/1.5 'Montserrat',sans-serif; }
.contact-info__list li { display:grid; grid-template-columns:90px 1fr; gap:.5rem; align-items:start; }
.contact-info__list strong { font:600 .75rem 'Montserrat Alternates',sans-serif; text-transform:uppercase; letter-spacing:1px; color:#fff; padding-top:.3rem; }
.contact-info__list a { color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:2px; transition:.3s; }
.contact-info__list a:hover, .contact-info__list a:focus { color:#ffe6ea; border-color:#ffe6ea; }

/* Actions formulaire */
.contact-form-actions { display:flex; gap:1.25rem; flex-wrap:wrap; align-items:center; margin-top:1.25rem; }
.contact-form-actions .btn { margin-top:.25rem; }
.contact-copy { font:500 .8rem/1.4 'Montserrat',sans-serif; display:flex; align-items:center; gap:.5rem; }
.contact-copy input { accent-color:var(--brand-500); }

/* Lissage legacy champs (conteneur) – sans modifier classes internes structurelles */
.contact-form-legacy .cariem-form-input, .contact-form-legacy textarea { font-family:'Montserrat',sans-serif; font-size:.9rem; border:1px solid var(--brand-200); border-radius:10px; padding:.65rem .75rem; box-shadow:0 2px 4px -2px rgba(26,46,83,.08); transition:.25s; width:100%; box-sizing:border-box; }
.contact-form-legacy .cariem-form-input:focus, .contact-form-legacy textarea:focus { outline:2px solid var(--brand-400); border-color:var(--brand-400); }
.contact-form-legacy label.cariem-form-label { font:600 .8rem 'Montserrat Alternates',sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--brand-700); margin-bottom:.35rem; display:inline-block; }
.contact-form-legacy .form-required { color:#ff4355; }
.contact-form-legacy .cariem-name-field { margin-bottom:.85rem !important; }
.contact-form-legacy .cariem-form-field { margin-bottom:1rem !important; }
.contact-form-legacy textarea { resize:vertical; min-height:140px !important; }

/* Adaptation colonnes nom (legacy float) */
@media (max-width:640px){
  .contact-form-legacy .cariem-form-input-first-name, .contact-form-legacy .cariem-form-input-last-name { float:none; width:100%; }
}

/* ============== NOUVEAU FORMULAIRE (refonte sécurisée) ============== */
.contact-form { margin-top:.25rem; }
.contact-form .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem 1.25rem; }
@media (max-width:680px){ .contact-form .form-grid { grid-template-columns:1fr; } }
.contact-form .form-field { display:flex; flex-direction:column; gap:.4rem; }
.contact-form .form-field--full { grid-column:1 / -1; }
.contact-form label { font:600 .78rem 'Montserrat Alternates',sans-serif; letter-spacing:.65px; text-transform:uppercase; color:var(--brand-700); }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea { font:500 .9rem/1.35 'Montserrat',sans-serif; background:#fff; border:1px solid var(--brand-200); border-radius:12px; padding:.7rem .85rem; box-shadow:0 2px 4px -2px rgba(26,46,83,.08); transition:.25s; width:100%; box-sizing:border-box; }
.contact-form textarea { resize:vertical; min-height:160px; }
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid var(--brand-400); border-color:var(--brand-400); }
.contact-form .small { font-size:.75rem; opacity:.8; }
.contact-form .form-hint { font:500 .7rem/1.3 'Montserrat',sans-serif; color:var(--brand-500); margin:0; }
.contact-form .form-actions { display:flex; justify-content:flex-start; margin-top:.2rem; }
.contact-form .btn { min-width:160px; }
.contact-form .hp-field { display:none !important; }
.form-disclaimer { font:500 .65rem/1.4 'Montserrat',sans-serif; letter-spacing:.4px; margin:1rem 0 0; color:var(--brand-500); max-width:60ch; }
/* Erreurs (ajoutable via JS si besoin) */
.contact-form .is-invalid { border-color:#ff4355 !important; outline:2px solid #ff4355 !important; }
.contact-form .error-msg { font:600 .65rem/1.3 'Montserrat',sans-serif; color:#ff4355; margin-top:.15rem; }



/* ========================
  FOOTER MODERNE
========================= */
.site-footer { margin-top:clamp(3rem,6vw,5rem); background:linear-gradient(135deg,var(--brand-800),#1a2230); color:#ecf2f8; position:relative; overflow:hidden; }
.site-footer::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, rgba(255,255,255,.08), transparent 60%), linear-gradient(120deg, rgba(255,255,255,.06), transparent 40%); mix-blend-mode:overlay; pointer-events:none; }
.footer__top { display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); max-width:1250px; margin:0 auto; padding:clamp(2.5rem,5vw,4rem) clamp(1.25rem,3vw,2.25rem) clamp(2rem,4vw,3rem); position:relative; z-index:1; }
.footer__brand { max-width:340px; }
.footer__logo img { max-width:150px; height:auto; display:block; filter:drop-shadow(0 3px 8px rgba(0,0,0,.35)); }
.footer__tagline { font:500 .9rem/1.5 'Montserrat',sans-serif; margin:.9rem 0 0; letter-spacing:.3px; color:#d8e4ef; }
.footer__heading { font:700 .95rem 'Montserrat Alternates',sans-serif; text-transform:uppercase; letter-spacing:1px; margin:0 0 .85rem; color:#fff; position:relative; }
.footer__heading::after { content:""; position:absolute; left:0; bottom:-4px; width:32px; height:2px; background:linear-gradient(90deg,#ff4355,var(--brand-400)); border-radius:2px; }
.footer__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.footer__list a { color:#d7e5f2; text-decoration:none; font:500 .85rem/1.4 'Montserrat',sans-serif; transition:.25s; }
.footer__list a:hover, .footer__list a:focus { color:#fff; text-decoration:underline; }
.footer__contact-list li { font:500 .85rem/1.5 'Montserrat',sans-serif; color:#d7e5f2; display:flex; gap:.55rem; align-items:flex-start; }
.footer__icon { width:20px; display:inline-block; text-align:center; }
.footer__social-list { list-style:none; margin:0; padding:0; display:flex; gap:.65rem; }
.social-link { --sz:40px; width:var(--sz); height:var(--sz); display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(4px); border-radius:12px; font:700 .95rem 'Montserrat',sans-serif; color:#fff; text-decoration:none; position:relative; overflow:hidden; transition:.35s; }
.social-link::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,255,255,.25),transparent 60%); mix-blend-mode:overlay; opacity:0; transition:.45s; }
.social-link:hover, .social-link:focus { background:#ff4355; border-color:#ff4355; transform:translateY(-4px) scale(1.05); box-shadow:0 10px 26px -10px rgba(0,0,0,.6); }
.social-link:hover::before, .social-link:focus::before { opacity:1; }
.social-link--disabled { cursor:default; opacity:.7; }
.social-link--disabled:hover, .social-link--disabled:focus { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); transform:none; box-shadow:none; }
.social-link--disabled[title] { position:relative; }
.social-link--disabled[title]:hover::after { content:attr(title); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#1a2332; color:#fff; padding:.45rem .75rem; border-radius:6px; font:500 .7rem/1.3 'Montserrat',sans-serif; white-space:nowrap; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.footer__bottom { background:#101722; border-top:1px solid rgba(255,255,255,.08); padding:.9rem clamp(1.2rem,3vw,2.25rem); text-align:center; position:relative; z-index:1; }
.footer__legal { margin:0; font:500 .7rem/1.4 'Montserrat',sans-serif; letter-spacing:.5px; color:#b7c6d4; }
.footer__legal a { color:#fff; text-decoration:none; }
.footer__legal a:hover, .footer__legal a:focus { text-decoration:underline; }
.footer__legal .sep { opacity:.4; margin:0 .65rem; }
@media (max-width:600px){ .footer__top { grid-template-columns:1fr 1fr; } .footer__brand { grid-column:1 / -1; } }
@media (max-width:480px){ .footer__top { grid-template-columns:1fr; } .social-link { --sz:46px; } }

/* Nouveau layout principal + miniatures */
.realisation__media { display:grid; gap:clamp(.9rem,1.5vw,1.2rem); }
/* Image principale réduite et centrée */
.realisation__main { margin:0 auto; position:relative; border-radius:18px; overflow:hidden; aspect-ratio: 16 / 9; background:var(--brand-50); box-shadow:0 10px 28px -14px rgba(26,46,83,.24); width:100%; max-width: clamp(420px,60%,760px); }
.realisation__main img { width:100%; height:100%; object-fit:cover; display:block; }
.realisation__thumbs { display:flex; gap:.75rem; flex-wrap:wrap; }
.realisation__thumb { margin:0; width:160px; flex:0 0 auto; aspect-ratio:4/3; border-radius:12px; overflow:hidden; position:relative; background:var(--brand-50); opacity:.82; transform:translateY(4px) scale(.95); transition:.35s ease; box-shadow:0 4px 16px -6px rgba(26,46,83,.18); }
.realisation__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.realisation__thumb:hover,.realisation__thumb:focus-within { opacity:1; transform:translateY(0) scale(1); box-shadow:0 8px 26px -10px rgba(26,46,83,.32); }
/* Indiquer cliquabilité */
.realisation__main, .realisation__thumb { cursor: pointer; }
.realisation__main a, .realisation__thumb a { display:block; width:100%; height:100%; text-decoration:none; color:inherit; }
@media (max-width:900px){ .realisation__thumb { width:140px; } }
@media (max-width:900px){ .realisation__main { max-width: clamp(420px,72%,700px); } }
@media (max-width:640px){ .realisation__main { aspect-ratio: 4 / 3; max-width:100%; } .realisation__thumb { width:110px; } }
@media (max-width:480px){ .realisation__thumb { width:30%; min-width:90px; } }
@media (max-width:640px){
  .realisation { padding:1.25rem 1rem 2rem; border-radius:16px; }
  .realisation__gallery { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}
@media (max-width:420px){
  .realisation__gallery { grid-template-columns:1fr; }
  .realisation__title { font-size:1.35rem; }
}

/* ========================
  NOS ATOUTS PANEL (responsive)
========================= */
/* Full-bleed section; overflow hidden pour éviter scroll horizontal dû aux paddings internes */
.section--atouts { position:relative; background:var(--brand-50); padding-top:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2.5rem,5vw,4rem); padding-left:0; padding-right:0; overflow-x:hidden; }
/* Panneau pleine largeur avec marge interne généreuse (anti-collision) */
.atouts-panel { width:100%; max-width:none; margin:0; background:#fff; border-radius:0; --pad-x:clamp(1.75rem,5vw,3.25rem); --pad-top:clamp(1.75rem,3.5vw,3rem); --pad-bottom:clamp(2.25rem,4vw,3.5rem); padding:var(--pad-top) var(--pad-x) var(--pad-bottom); box-shadow:0 4px 16px -4px rgba(0,0,0,.08),0 10px 34px -6px rgba(0,0,0,.05); position:relative; overflow:hidden; box-sizing:border-box; }
@media (min-width:1600px){
  /* Limiter la longueur de ligne des textes pour lisibilité tout en gardant panneau full-bleed */
  .atouts-panel { padding-left:clamp(2rem,4vw,4.5rem); padding-right:clamp(2rem,4vw,4.5rem); }
}
.atouts-title { text-align:center; margin-bottom:clamp(1.25rem,2.5vw,2.25rem); }
.atouts-grid { align-items:stretch; }
.atout-item { background:linear-gradient(180deg,#ffffff 0%,#f9f9f9 100%); border:1px solid var(--brand-100); border-radius:14px; padding:1.25rem 1.15rem 1.3rem; transition:box-shadow .25s, transform .25s; }
.atout-item:hover { box-shadow:0 6px 18px -4px rgba(0,0,0,.15); transform:translateY(-4px); }
@media (max-width:900px){ .atouts-panel { border-radius:.9rem; } .atout-item { padding:1rem; } }
@media (max-width:640px){ .atouts-grid { grid-template-columns:1fr 1fr; gap:1.1rem; } .atout-item { font-size:.92rem; padding:1.2rem 1.05rem 1.25rem; } }
@media (max-width:460px){ .atouts-grid { grid-template-columns:1fr; } .atout-item { padding:1rem .9rem; } }

/* ========================
  FAQ STYLES
========================= */
.faq { max-width:900px; margin:0 auto; }
.faq-item { border-bottom:1px solid #d6dde4; padding:.6rem 0; }
.faq-question { font-size:1rem; margin:0; }
.faq-toggle { background:none; border:0; font:inherit; text-align:left; width:100%; padding:.4rem 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-toggle:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; }
.faq-toggle[aria-expanded="true"] { font-weight:600; }
.faq-answer { animation:faqSlide .25s ease; }
@keyframes faqSlide { from { opacity:0; transform:translateY(-3px);} to { opacity:1; transform:translateY(0);} }
.footer-link-faq { text-decoration:none; }
.footer-link-faq:hover { text-decoration:underline; }

/* ========================
  FIX: Débordement horizontal formulaire contact sur écrans très étroits
   - Empêche les grilles / paddings combinés de provoquer un scroll latéral
   - Force wrapping et supprime tout min-width résiduel
========================= */
@media (max-width:520px){
  .contact-layout { width:100%; overflow-x:hidden; }
  .contact-panel, .contact-info { max-width:100%; overflow-x:hidden; }
  .contact-form .form-grid { grid-template-columns:1fr !important; }
  .contact-form input[type=text],
  .contact-form input[type=email],
  .contact-form textarea { word-break:break-word; }
}
@media (max-width:400px){
  /* Réduire légèrement les paddings internes pour gagner de l'espace */
  .contact-panel { padding:1.1rem .9rem 1.5rem; }
  .contact-info { padding:1.1rem .9rem 1.5rem; }
  .contact-info__list li { grid-template-columns:70px 1fr; }
}

/* Sticky nav desktop (restauration comportement attendu: logo défile, barre fixe après seuil) */
@media (min-width:1025px){
  #nav.stuck { position:fixed; top:0; left:0; right:0; z-index:130; background:#fff; box-shadow:0 4px 14px -6px rgba(0,0,0,.15); }
  .sticky-wrapper { position:relative; width:100%; }
}

/* Mobile: header fixe (aligné commit historique) */
@media (max-width:1024px){
  #header-wrap.fixed-mobile-header { position:fixed !important; top:0; left:0; right:0; z-index:130; background:#fff; }
  /* Retirer l'espace vide: on n'ajoute plus de padding-top global; si besoin d'un décalage on peut cibler main */
  /* Plus de padding-top injecté pour éliminer l'espace vide au-dessus du hero */
}

/* reCAPTCHA v3 badge positioning - position within footer__top at bottom right */
.grecaptcha-badge {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  z-index: 10 !important;
  transform: scale(0.9) !important;
  transition: opacity 0.3s ease !important;
}



/* On smaller screens, adjust reCAPTCHA badge position within footer__top */
@media (max-width: 768px) {
  .grecaptcha-badge {
    bottom: 10px !important;
    right: 10px !important;
    transform: scale(0.8) !important;
  }
}

/* ========================
  OUTILS PAGE STYLES
========================= */
.hero--outils .hero__content {
  max-width: 900px;
}

.section--outils {
  padding: clamp(2.5rem, 5vw, 4rem) 1rem;
}

.section--outils .container {
  max-width: 1200px;
  margin: 0 auto;
}

.outils-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.outil-card {
  background: #fff;
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  transition: box-shadow 0.25s, transform 0.25s;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.outil-card:hover {
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.15);
  transform: translateY(-4px);
}

.outil-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.outil-card__icon img {
  max-width: 140px;
  height: auto;
}

.outil-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.outil-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-700);
  margin: 0;
  line-height: 1.3;
}

.outil-card__desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
  margin: 0;
}

.outil-card__list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.outil-card__list li {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555;
  padding-left: 1.5rem;
  position: relative;
}

.outil-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brand-500);
  font-weight: 700;
}

.outils-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.outils-legal {
  opacity: 0.7;
}

@media (max-width: 900px) {
  .outils-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .outil-card {
    padding: 1.5rem 1.25rem;
  }
}

@media (max-width: 640px) {
  .section--outils {
    padding: 2rem 1rem;
  }
  
  .outil-card {
    padding: 1.25rem 1rem;
  }
  
  .outil-card__title {
    font-size: 1.15rem;
  }
  
  .outils-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
  }
  
  .outils-cta .btn {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ========================
   CLICKABLE TOOL CARDS
========================= */
.outil-card--clickable {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.outil-card--clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -14px rgba(26, 46, 83, 0.25);
}

.outil-card--clickable:active {
  transform: translateY(-2px);
}

/* ========================
   EXTERNAL LINK MODAL
========================= */
.external-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.25s ease;
}

.external-modal[aria-hidden="false"] {
  display: flex;
}

.external-modal__box {
  background: #ffffff;
  border: 1px solid var(--brand-100);
  border-radius: 18px;
  padding: 2rem 1.75rem;
  max-width: 480px;
  width: calc(100% - 2rem);
  box-shadow: 0 10px 34px -4px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
  position: relative;
  animation: slideUp 0.35s cubic-bezier(0.4, 0.13, 0.25, 1);
  z-index: 1;
  transform: translateZ(0);
}

.external-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}

.external-modal__close:hover {
  color: #ff4355;
}

.external-modal__icon {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 1rem;
}

.external-modal__title {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-700);
  text-align: center;
}

.external-modal__message {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--brand-800);
  text-align: center;
}

.external-modal__message strong {
  color: var(--brand-600);
}

.external-modal__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.external-modal__actions .btn {
  flex: 1;
  min-width: 120px;
  text-align: center;
}

.btn--primary {
  --btn-bg: var(--brand);
  --btn-color: #fff;
  --btn-bg-hover: #1a2e53;
}

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

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .external-modal__box {
    padding: 1.75rem 1.5rem;
    max-width: calc(100% - 1.5rem);
  }
  
  .external-modal__title {
    font-size: 1.25rem;
  }
  
  .external-modal__message {
    font-size: 0.95rem;
  }
  
  .external-modal__actions {
    flex-direction: column;
  }
  
  .external-modal__actions .btn {
    width: 100%;
  }
}