/* app.immo — feuille unique.
   Repères visuels (modèle « agence créative ») : fond crème, texte anthracite, grands titres
   en capitales violettes centrés sur deux lignes, deux bandes sombres, cartes aux coins très
   arrondis, grille désalignée pour les sites du réseau. Titres et texte en Manrope. */

:root{
  --bg:#f2efea;
  --bg-2:#e9e4dc;
  --ink:#1b1b1b;
  --ink-soft:#3a3a3a;
  --muted:#5f5a66;
  --violet:#6a2fb5;
  --violet-dark:#52238f;
  --violet-soft:#ece3f8;
  --dark:#141414;
  --dark-2:#1f1f1f;
  --line:#dcd6cc;
  --line-dark:rgba(255,255,255,.16);
  --white:#fff;
  --radius:22px;
  --radius-lg:32px;
  --shadow-sm:0 1px 2px rgba(20,20,20,.05), 0 10px 30px rgba(20,20,20,.06);
  --shadow-md:0 2px 6px rgba(20,20,20,.06), 0 28px 70px rgba(20,20,20,.14);
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-decoration:none}
a:hover{color:var(--violet-dark)}
h1,h2,h3{margin:0 0 .5em;line-height:1.1;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.band :focus-visible,.footer :focus-visible{outline-color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--dark);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px;color:#fff}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2fae6b;margin-right:6px;vertical-align:1px}
.dot--live{background:#22c06e;box-shadow:0 0 0 4px rgba(34,192,110,.18)}

/* ── typographie de titres ───────────────────────────── */
/* Le grand titre de section : capitales, violet, centré, deux lignes (le <br> est dans le HTML).
   Manrope 800 (la Syne du gabarit, trop large, fatiguait l'œil — retirée le 15/09/2026) : interlettrage
   légèrement positif pour des capitales lisibles, corps un peu plus contenu. */
.h-sec{
  font-family:var(--display);font-weight:800;text-transform:uppercase;text-align:center;
  color:var(--violet);font-size:clamp(22px,3.3vw,44px);line-height:1.08;letter-spacing:.02em;
  margin:0 auto 22px;overflow-wrap:anywhere;
}
.h-sec--light{color:#fff}
.h-big{
  font-family:var(--display);font-weight:800;text-transform:none;text-align:center;
  color:var(--violet);font-size:clamp(30px,4.4vw,58px);line-height:1.06;letter-spacing:-.02em;
  margin:0 auto 24px;overflow-wrap:anywhere;
}
.h-med{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,36px);line-height:1.08;letter-spacing:-.01em}
.h-med--light{color:#fff}
.h-sub{
  text-align:center;color:var(--muted);font-size:18px;max-width:60ch;margin:0 auto 56px;
}
.h-sub--light{color:#c9c4bd}
.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violet);margin:0 0 12px;
}
.eyebrow--light{color:#c9b6ea}

/* ── boutons ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:15px 28px;border-radius:999px;border:1.5px solid transparent;
  font-weight:700;font-size:16px;line-height:1;cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{background:var(--violet);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--dark);border-color:#fff}
.btn--light:hover{background:var(--violet);color:#fff;border-color:var(--violet)}
.btn--sm{padding:11px 20px;font-size:15px}

/* ── en-tête minimal ─────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(242,239,234,.86);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.is-stuck{border-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:28px;padding-top:18px;padding-bottom:18px}
.logo{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:.06em;color:var(--ink);margin:0;white-space:nowrap}
.logo__dot{color:var(--violet);margin-right:2px}
.nav__links{display:flex;gap:34px;margin:0 auto;font-size:15px;font-weight:600}
.nav__links a{color:var(--ink-soft)}
.nav__links a:hover{color:var(--violet)}
.nav__cta{display:flex;align-items:center;gap:10px}
.nav__side{font-size:15px;font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--ink);padding-bottom:1px}
.nav__side:hover{color:var(--violet);border-color:var(--violet)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── héro ────────────────────────────────────────────── */
.hero{padding:72px 0 40px;text-align:center}
.hero__sub{color:var(--muted);font-size:19px;max-width:60ch;margin:0 auto 28px}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:0 0 52px}

/* Panorama : panneau violet aux coins arrondis, trois captures 4:3 côte à côte — légèrement
   inclinées et décalées pour garder le mouvement du modèle, mais sans jamais se recouvrir :
   chaque vignette montre le titre et le premier écran utile de son site (recadrage 15/09/2026). */
.pano{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  padding:clamp(28px,4.5vw,60px) clamp(20px,4vw,52px) clamp(64px,7vw,84px);
  background:radial-gradient(120% 90% at 20% 10%,#8d4fd6 0%,var(--violet) 40%,#2c1550 100%);
  box-shadow:var(--shadow-md);
}
.pano__grid{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:clamp(14px,2.4vw,30px);align-items:center}
.pano__shot{border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);background:#fff;aspect-ratio:4/3}
.pano__shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.pano__shot--a{transform:rotate(-2deg) translateY(14px)}
.pano__shot--b{z-index:2;transform:translateY(-6px)}
.pano__shot--c{transform:rotate(2deg) translateY(14px)}
.pano__tag{
  position:absolute;left:22px;bottom:20px;z-index:3;margin:0;background:rgba(20,20,20,.72);color:#fff;
  font-size:13.5px;font-weight:700;letter-spacing:.04em;padding:9px 14px;border-radius:999px;backdrop-filter:blur(8px);
}
.pano__tag .dot{margin-right:8px}

/* ── sections ────────────────────────────────────────── */
.section{padding:104px 0}
.section--line{border-top:1px solid var(--line)}

/* ── lignes numérotées 01 → 05 ───────────────────────── */
.lines{border-top:1px solid var(--line)}
.line{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;padding:38px 0;border-bottom:1px solid var(--line);align-items:start}
.line__head{display:flex;align-items:baseline;gap:22px}
.line__n{font-family:var(--display);font-weight:700;font-size:15px;color:var(--violet);letter-spacing:.06em;flex:none}
.line h3{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.01em;margin:0}
.line p{margin:0;color:var(--muted);font-size:16.5px;max-width:52ch}
.line p a{font-weight:700;white-space:nowrap}

/* ── grille des sites ────────────────────────────────── */
/* Deux colonnes en flux (columns). Toutes les captures sont au même format 4:3, recadrées à la
   source sur le titre et le premier écran utile ; ce sont les textes, de longueurs différentes,
   qui désalignent légèrement les rangées. */
.masonry{columns:2;column-gap:32px}
.site{break-inside:avoid;-webkit-column-break-inside:avoid;display:inline-block;width:100%;margin:0 0 44px}
.site__shot{display:block;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);margin-bottom:18px;aspect-ratio:4/3}
.site__shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease}
.site:hover .site__shot img{transform:scale(1.03)}
/* Les quatre sites départementaux tiennent dans une seule carte : mosaïque 2×2 de captures 4:3
   (donc elle-même 4:3), puis les quatre liens sous la description. */
.site__mosaic{display:grid;grid-template-columns:1fr 1fr;gap:5px;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--line);margin-bottom:18px}
.site__mosaic a{display:block;overflow:hidden;background:var(--bg-2);min-height:0}
.site__mosaic img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease}
.site__mosaic a:hover img{transform:scale(1.04)}
.site__links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;font-weight:700;font-size:15.5px}
.site h3{font-family:var(--display);font-weight:800;font-size:26px;margin:0 0 4px;letter-spacing:-.01em}
.site h3 a{color:var(--ink)}
.site h3 a:hover{color:var(--violet)}
.site__meta{font-size:14px;color:var(--muted);margin:0 0 10px;font-weight:600}
.site__meta--wip{color:#9a5a05}
.site__desc{color:var(--ink-soft);font-size:15.5px;margin:0 0 12px;max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.tags li{border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600;color:var(--ink-soft);background:#fff}

/* ── bandes sombres ──────────────────────────────────── */
.band{background:var(--dark);color:#e8e4dd;padding:104px 0}
.band--data{border-radius:var(--radius-lg) var(--radius-lg) 0 0}

/* Cercles à bordure fine, en quinconce : une ligne sur deux est décalée. */
.circles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;justify-items:center;margin-top:16px}
.circles li:nth-child(n+5){transform:translateX(50%)}
.circles li:nth-child(8){transform:translateX(50%)}
.circle{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  width:clamp(120px,15vw,176px);height:clamp(120px,15vw,176px);border-radius:50%;border:1px solid var(--line-dark);
  padding:14px;transition:border-color .2s,background .2s;
}
.circle:hover{border-color:#fff;background:rgba(255,255,255,.04)}
.circle b{font-family:var(--display);font-weight:800;font-size:clamp(15px,1.6vw,20px);color:#fff;letter-spacing:.02em}
.circle i{font-style:normal;font-size:12px;color:#b5afa6;margin-top:4px;line-height:1.3}

/* ── services ────────────────────────────────────────── */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:transform .2s,box-shadow .2s}
.service:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.service__n{font-family:var(--display);font-weight:700;font-size:14px;color:var(--violet);letter-spacing:.08em;display:block;margin-bottom:16px}
.service h3{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:8px;letter-spacing:-.01em}
.service p{margin:0;color:var(--muted);font-size:15.5px}

.forwho{margin-top:40px;border:1px solid var(--line);border-radius:var(--radius);padding:22px 28px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.forwho__t{margin:0;font-weight:700}
.forwho ul{display:flex;gap:10px;flex-wrap:wrap}
.forwho li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:14.5px;color:var(--ink-soft);font-weight:600}

/* ── méthode ─────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{border-top:2px solid var(--ink);padding:24px 4px 0}
.step__n{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:var(--violet);display:block;margin-bottom:14px}
.step h3{font-family:var(--display);font-weight:800;font-size:19px;margin-bottom:8px}
.step p{margin:0;color:var(--muted);font-size:15.5px}

.pledge{margin-top:48px;background:var(--dark);color:#d8d3cb;border-radius:var(--radius-lg);padding:42px 46px}
.pledge h3{color:#fff;font-family:var(--display);font-weight:800;font-size:24px;margin-bottom:20px}
.pledge ul{display:grid;grid-template-columns:1fr 1fr;gap:16px 34px}
.pledge li{padding-left:26px;position:relative;font-size:15.5px}
.pledge li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px rgba(106,47,181,.3)}
.pledge strong{color:#fff}

/* ── apimo ───────────────────────────────────────────── */
.apimo{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:46px 48px}
.apimo p{color:var(--muted);font-size:16.5px}
.apimo strong{color:var(--ink)}
.apimo__cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0}
.apimo__vs{display:grid;gap:12px;justify-items:stretch;text-align:center}
.vs{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.vs--us{background:var(--violet);border-color:var(--violet);color:#fff}
.vs__t{font-family:var(--display);font-weight:800;font-size:19px;margin:0 0 6px;color:var(--ink)}
.vs--us .vs__t{color:#fff}
.vs__d{font-size:14px;color:var(--muted);margin:0}
.vs--us .vs__d{color:#e6d9f7}
.vs__sep{margin:0;font-weight:800;font-size:22px;color:var(--muted)}

/* ── équipe ──────────────────────────────────────────── */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:64px}
.member{text-align:center}
.member__pic{
  display:flex;align-items:center;justify-content:center;width:min(100%,220px);aspect-ratio:1/1;
  margin:0 auto 18px;border-radius:50%;font-family:var(--display);font-weight:800;font-size:56px;
}
.member__pic svg{width:44%;height:44%}
.member__pic--person{background:var(--violet);color:#fff;letter-spacing:-.02em}
.member__pic--ia{background:#f7e7c9;color:#8a5a00}
.member__pic--moteur{background:var(--dark);color:#fff}
.member__pic--data{background:#d9e6f5;color:#1f4f88}
.member h3{font-family:var(--display);font-weight:800;font-size:19px;margin-bottom:4px}
.member p{color:var(--muted);font-size:15px;margin:0 auto 8px;max-width:26ch}
.member__link{font-weight:700;font-size:14.5px}

.about{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;border-top:1px solid var(--line);padding-top:56px}
.about p{color:var(--muted);font-size:16.5px}
.about strong{color:var(--ink)}
/* ── BADGES DE COMPÉTENCE : dessinés avec les jetons du site plutôt qu'appelés en image
   chez l'émetteur. Seul le LIEN est distant — c'est la page de vérification qui fait foi. */
.badge-certs{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.badge-cert{display:inline-flex;align-items:center;gap:14px;
  padding:12px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--white);text-decoration:none;
  color:var(--ink);transition:border-color .15s,box-shadow .15s}
.badge-cert:hover{border-color:var(--violet);box-shadow:var(--shadow-sm);color:var(--ink)}
.badge-cert__mark{display:grid;place-items:center;flex:none;width:44px;height:44px}
.badge-cert__medal{display:block}
.badge-cert:hover .badge-cert__medal{transform:scale(1.04);transition:transform .15s}
.badge-cert__txt{display:flex;flex-direction:column;line-height:1.35}
.badge-cert__txt strong{font-size:14.5px;font-weight:700}
.badge-cert__txt span{font-size:12.5px;color:var(--muted)}
.badge-cert__go{margin-left:4px;color:var(--muted);font-size:13px}
.about__facts{display:grid;gap:14px}
.about__facts li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px}
.about__facts strong{display:block;font-size:16.5px;margin-bottom:3px}
.about__facts span{color:var(--muted);font-size:15px}

/* ── quelques informations : image carrée au centre, chiffres de part et d'autre ── */
.facts{display:grid;grid-template-columns:1fr minmax(260px,420px) 1fr;gap:48px;align-items:center;margin-top:48px}
.facts__col{display:grid;gap:40px}
.facts__col:first-child{text-align:right}
.fact{margin:0}
.fact strong{display:block;font-family:var(--display);font-weight:800;font-size:clamp(44px,5.4vw,72px);line-height:1;color:var(--violet);letter-spacing:-.02em}
.fact span{display:block;color:var(--muted);font-size:15.5px;margin-top:8px;max-width:26ch}
.facts__col:first-child .fact span{margin-left:auto}
.facts__pic{aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.facts__pic img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.facts__note{text-align:center;color:var(--muted);font-size:13.5px;max-width:70ch;margin:40px auto 0}

/* ── actualités ──────────────────────────────────────── */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px}
.post__pic{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);background:var(--bg-2);margin-bottom:16px}
.post__pic img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.post:hover .post__pic img{transform:scale(1.03)}
.post__date{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);margin:0 0 8px}
.post h3{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.2;margin-bottom:8px}
.post h3 a{color:var(--ink)}
.post h3 a:hover{color:var(--violet)}
.post p{margin:0;color:var(--muted);font-size:15px}

/* ── bande finale : appel + contact ──────────────────── */
.band--cta{border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding-bottom:110px}
.cta{position:relative;text-align:center;padding:60px 0 90px}
.cta__pill{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--display);font-weight:800;text-transform:uppercase;color:#fff;
  font-size:clamp(20px,3.6vw,48px);line-height:1;letter-spacing:-.01em;
  border:2px solid rgba(255,255,255,.7);border-radius:999px;padding:.42em 1em;
  transition:background .2s,color .2s,border-color .2s;
}
.cta__pill:hover{background:#fff;color:var(--dark);border-color:#fff}
.cta__sub{position:relative;z-index:2;color:#b5afa6;font-size:15px;max-width:60ch;margin:26px auto 0}
/* Petites images rondes qui flottent autour de la pilule. */
.cta__orb{position:absolute;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.25);width:clamp(56px,8vw,110px);aspect-ratio:1/1;animation:float 7s ease-in-out infinite}
.cta__orb img{width:100%;height:100%;object-fit:cover;object-position:top}
.cta__orb--1{left:6%;top:0}
.cta__orb--2{right:8%;top:8%;animation-delay:-2s}
.cta__orb--3{left:14%;bottom:0;animation-delay:-4s}
.cta__orb--4{right:16%;bottom:6%;animation-delay:-1s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.contact{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;
  background:var(--dark-2);border:1px solid var(--line-dark);
  color:#fff;border-radius:var(--radius-lg);padding:56px;
}
.contact__intro p{color:#c9c4bd;font-size:16.5px}
.contact__list{display:grid;gap:9px;margin:22px 0 0}
.contact__list li{padding-left:28px;position:relative;font-size:15.5px;color:#e8e4dd}
.contact__list li::before{
  content:"";position:absolute;left:0;top:6px;width:16px;height:9px;
  border-left:2.5px solid #b48ee8;border-bottom:2.5px solid #b48ee8;transform:rotate(-45deg);
}
.contact__social{margin:26px 0 0}
.contact__social a{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);padding:10px 18px;border-radius:999px}
.contact__social a:hover{background:rgba(255,255,255,.16);color:#fff}
.contact__social svg{width:18px;height:18px}

.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;grid-column:1 / -1}
.field--half{grid-column:auto}
.field label{font-size:14px;font-weight:700;color:#e8e4dd}
.field .opt{font-weight:500;color:#b5afa6}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1.5px solid rgba(255,255,255,.3);border-radius:12px;padding:13px 15px;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid #b48ee8;outline-offset:1px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#ffb3b3;box-shadow:0 0 0 3px rgba(255,120,120,.35)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__legal{grid-column:1 / -1;font-size:13px;color:#b5afa6;margin:2px 0 0}
.form__legal a{color:#fff;text-decoration:underline}
.form button[type="submit"]{grid-column:1 / -1;justify-self:start}
.form button[disabled]{opacity:.65;cursor:progress}
.form__status{grid-column:1 / -1;margin:0;font-size:15px;font-weight:600;min-height:1.4em}
.form__status a{color:#fff;text-decoration:underline}
.form__status.is-ok{color:#9be3bb}
.form__status.is-err{color:#ffc4c4}

/* ── pied de page ────────────────────────────────────── */
.footer{background:var(--dark);color:#b5afa6;font-size:15px;padding:64px 0 30px;border-top:1px solid var(--line-dark)}
.footer__in{display:grid;grid-template-columns:1.5fr .8fr .8fr 1.4fr;gap:40px}
.footer a{color:#e8e4dd}
.footer a:hover{color:#fff}
.logo--f{color:#fff;margin-bottom:10px}
.footer__brand p{margin:0 0 12px;max-width:34ch}
.footer__sub a{font-weight:700;border-bottom:1px solid rgba(255,255,255,.4)}
.footer__social{display:flex;gap:16px;font-weight:600}
.footer__col{display:flex;flex-direction:column;gap:8px}
.footer__t{color:#fff;font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:13px;margin:0 0 6px}
.footer__legal p{font-size:13.5px;line-height:1.55;color:#a29c93;margin:0 0 10px}
.footer__legal strong{color:#e8e4dd}
.footer__bottom{border-top:1px solid var(--line-dark);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer__bottom p{margin:0;font-size:13.5px;color:#a29c93;max-width:74ch}
.footer__bottom strong{color:#e8e4dd}

/* ── apparition au défilement ────────────────────────── */
/* Le masquage n'est appliqué que si le JavaScript a bien démarré (classe .js posée
   dans le <head>) : sans lui, ou s'il échoue, la page reste entièrement lisible. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* ── responsive ──────────────────────────────────────── */
@media (max-width:1020px){
  .section{padding:80px 0}
  .band{padding:80px 0}
  .services{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:28px}
  .team{grid-template-columns:1fr 1fr}
  .apimo{grid-template-columns:1fr;padding:36px}
  .about{grid-template-columns:1fr;gap:34px}
  .facts{grid-template-columns:1fr 1fr;gap:32px}
  .facts__pic{grid-column:1 / -1;grid-row:1;max-width:420px;margin:0 auto;width:100%}
  .facts__col:first-child{text-align:left}
  .facts__col:first-child .fact span{margin-left:0}
  .news{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr;gap:34px;padding:40px}
  .footer__in{grid-template-columns:1fr 1fr}
  .circles{grid-template-columns:repeat(3,1fr)}
  .circles li:nth-child(n){transform:none}
  .circles li:nth-child(n+4):nth-child(-n+6){transform:translateX(50%)}
}
@media (max-width:820px){
  .nav__links{
    position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 24px 18px;display:none;box-shadow:var(--shadow-md);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
  .nav__links a:last-child{border-bottom:0}
  .nav__in{position:relative}
  .nav__side{display:none}
  .nav__cta{margin-left:auto}
  .burger{display:flex}
  .line{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .masonry{columns:1}
  .site{margin-bottom:40px}
  .pledge ul{grid-template-columns:1fr}
  .pledge{padding:30px 26px}
  .pano__grid{grid-template-columns:1fr 1fr;gap:14px}
  .pano__shot--b{grid-column:1 / -1;order:-1;transform:none}
  .pano__shot--a,.pano__shot--c{transform:none}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .section{padding:64px 0}
  .band{padding:64px 0}
  .hero{padding-top:44px}
  .hero__btns .btn{width:100%}
  .services,.steps,.team,.news{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .facts__col{gap:28px}
  .form{grid-template-columns:1fr}
  .field--half{grid-column:1 / -1}
  .contact{padding:30px 22px}
  .footer__in{grid-template-columns:1fr}
  .circles{grid-template-columns:repeat(2,1fr);gap:18px}
  .circles li:nth-child(n){transform:none}
  .cta{padding:36px 0 60px}
  .cta__pill{padding:.5em .9em}
  .cta__orb--1{left:0;top:-10px}
  .cta__orb--2{right:0;top:-6px}
  .cta__orb--3{left:2%;bottom:-6px}
  .cta__orb--4{right:2%;bottom:-2px}
  .h-sub{margin-bottom:36px}
  .badge-cert{width:100%}
}

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