/* ===========================
   KAREGEST – CSS clean (v1)
   =========================== */

/* --- Thème & base --- */
:root{
  --bg:#fff;
  --text:#111827;
  --muted:#4b5563;
  --brand:#205a9a;     /* bleu */
  --brand2:#269cce;    /* bleu clair */
  --accent:#f36621;    /* orange */
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.10);
  --maxw:1140px;
  --brandH:92px;       /* hauteur logo+slogan en mobile (recalculée par JS) */
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.section{padding:32px 0}

/* ===========================
   Header + Navigation
   =========================== */
.site-header{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  position:relative; z-index:50;
}

/* Bloc logo + (option) slogan intégré dans l’image */
.brand{
  display:flex; flex-direction:column; align-items:center;
  padding:8px 0 6px; background:#fff; z-index:70;
}
.brand__logo{
  height:72px; width:auto; display:block; object-fit:contain;
}

/* Barre bleue sous le logo (full-bleed) */
.menu-bar{
  position:sticky; top:0; z-index:120; overflow:visible;
}
.menu-bar::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--brand);
  box-shadow:0 2px 12px rgba(0,0,0,.12),0 0 0 100vmax var(--brand);
  clip-path:inset(0 -100vmax);
  pointer-events:none;         /* ne bloque jamais les clics */
}
.menu-bar .wrap{
  display:flex; align-items:center; gap:12px; padding:8px 16px;
}

/* Menu (desktop) */
.menu{ position:relative; z-index:61; overflow:visible; }
.nav{
  display:flex; align-items:center; gap:12px;
  margin:0; padding:0; list-style:none; flex-wrap:wrap;
}
.nav>li{ position:relative; }
.nav a,.nav .sub-toggle{
  color:#fff; background:none; border:0;
  padding:10px 12px; border-radius:8px; cursor:pointer; font:inherit;
}
.nav a:hover,.nav .sub-toggle:hover{ background:rgba(255,255,255,.12) }
.nav .push{ margin-left:auto }
.nav .cta{
  background:#fff; color:var(--brand);
  font-weight:700; border-radius:999px; padding:8px 14px;
  box-shadow:var(--shadow);
}
.nav .cta:hover{ background:#f3f4f6 }

/* Sous-menus (desktop) */
.has-sub .sub{
  position:absolute; left:0; top:calc(100% - 1px); min-width:240px;
  background:var(--brand2);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.18);
  list-style:none; margin:0; padding:8px; display:none; z-index:1000;
}
.has-sub.open .sub{ display:block; }

.sub li a{
  display:block; padding:10px 14px; border-radius:8px; color:#fff;
}
.sub li a:hover{ background:rgba(0,0,0,.12) }

/* Soulignement animé qui ne capte pas les clics */
.menu .nav > li > a::after,
.menu .nav > li > .sub-toggle::after,
.menu .nav .sub li a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform .25s ease; opacity:.9; pointer-events:none;
}
.menu .nav > li > a:hover::after,
.menu .nav > li > .sub-toggle:hover::after,
.menu .nav .sub li a:hover::after{ transform:scaleX(1) }

/* Burger */
.menu-toggle{
  display:none; flex-direction:column; gap:5px;
  width:38px; height:38px; background:none; border:0; cursor:pointer; color:#fff;
}
.menu-toggle .bar{ height:3px; width:100%; background:#fff; border-radius:3px; transition:.3s }
.menu-toggle.active .bar:nth-child(1){ transform:rotate(45deg) translate(6px,6px) }
.menu-toggle.active .bar:nth-child(2){ opacity:0 }
.menu-toggle.active .bar:nth-child(3){ transform:rotate(-45deg) translate(6px,-6px) }

/* --- Mobile --- */
@media (max-width:900px){
  .brand__logo{ height:64px; }            /* lisible, non rogné */
  .menu-toggle{ display:flex; z-index:130; }

  /* Menu fermé = totalement hors-écran (pas de fine barre bleue) */
  .menu{
    position:fixed; left:0; right:0; top:var(--brandH);
    background:var(--brand);
    transform:translateY(calc(-100% - 12px));
    will-change:transform;
    transition:transform .3s ease;
    z-index:999; overflow:auto;
    max-height:calc(100vh - var(--brandH));
    pointer-events:none; padding:0;
  }
  .menu.open{
    transform:translateY(0);
    pointer-events:auto;
    padding:10px 0;
  }

  /* On n’affiche la liste que menu ouvert (meilleure perf & accessibilité) */
  .menu .nav{ display:none; flex-direction:column; align-items:stretch; gap:0; }
  .menu.open .nav{ display:flex; }
  .menu.open .nav a,.menu.open .nav .sub-toggle{
    width:100%; padding:12px 18px; color:#fff; border-radius:0;
  }

  /* Sous-menus en flux, jamais rognés */
  .has-sub .sub{
    position:static; display:none; margin:0; padding:0;
    background:var(--brand2); box-shadow:none; border:0; border-radius:0;
  }
  .has-sub.open .sub{ display:block; }
}

/* ===========================
   Hero
   =========================== */
.hero{ position:relative; isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.65)); }
.hero__img{ width:100%; height:60vh; object-fit:cover; object-position:center; }
.hero__content{ padding:16px 0 20px; }
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#e5e7eb; font-size:24px;
}
.hero h1{ color:#fff; font-size:clamp(28px,5vw,44px); line-height:1.15; margin:12px 0 6px; }
.hero .lead,.hero .slogan{ color:#e5e7eb; font-size:22px; }
@media (min-width: 901px){
  .hero--tall .hero__content{ transform: translateY(-6vh); }
}
@media (min-width: 1200px){
  .hero--tall .hero__content{ transform: translateY(-8vh); }
}
@media (max-width: 900px){
  .hero--tall .hero__content{ transform: none; }
}

/* Variante sans image */
.hero--plain .hero__media,.hero--plain .hero__media::after{ display:none !important; }
.hero--plain{ background:#fff }
.hero--plain h1{ color:#205a9a }
.hero--plain .lead{ color:var(--muted) }
.hero--plain .hero__content{ padding:24px 0 16px }

/* ===========================
   Cartes / Grilles / Boutons
   =========================== */
.grid{ display:grid; gap:16px }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr } }

.card{
  background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px;
}
.btn{ display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none }
.btn--accent{ background:var(--accent); color:#fff; font-weight:700; border:0 }
.btn--accent:hover{ filter:brightness(.95) }
.btn--brand{ background:var(--brand); color:#fff }
.btn--ghost{ border:1px solid #e5e7eb; background:var(--accent); color:var(--text) }

/* Pills */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:8px 12px; background:var(--accent); color:#fff; font-weight:700;
}
.pill:hover{ text-decoration:none; filter:brightness(.95) }

/* ===========================
   Footer
   =========================== */
.site-footer{ background:#fff; border-top:1px solid #e5e7eb; color:#6b7280; padding:20px 0 }
.site-footer--blue{ background:var(--brand); color:#f5f7fb; border-top:0; box-shadow:0 -2px 12px rgba(0,0,0,.1) }
.foot{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between }
.foot-links{ display:flex; gap:14px; flex-wrap:wrap }
.foot-links a{ color:#fff; opacity:.95 }
.foot-links a:hover{ opacity:1 }
.foot-meta{ display:flex; justify-content:flex-end }
.credit .author{ color:#fff; font-weight:600 }
@media (max-width:700px){
  .foot{ flex-direction:column; text-align:center }
  .foot-meta{ justify-content:center; margin-top:8px }
}

/* ===========================
   Bio / images inline
   =========================== */
.bio-card{ margin-bottom:24px }
.bio-media.left{
  float:left; width:260px; max-width:40%; margin:0 18px 10px 0;
  border-radius:16px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.bio-media.left img{ display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:3/4 }
.inline-figure.right{ float:right; width:240px; margin:0 0 10px 18px }
.inline-figure img{ display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08) }
.bio-content::after{ content:""; display:block; clear:both }
@media (max-width:900px){
  .bio-media.left,.inline-figure.right{ float:none; width:min(360px,92%); margin:12px auto }
}

/* ===========================
   Utilitaires
   =========================== */
.muted{ color:var(--muted) }
.accent{ color:var(--accent) }
.skip-link{ position:absolute; left:-9999px }
.skip-link:focus{ position:fixed; left:16px; top:16px; background:#fff; border:2px solid var(--brand); padding:8px 12px; z-index:1000 }
html,body{ overflow-x:hidden }           /* sécurité anti-scroll horizontal */
/* ===== Anti "trait qui barre le texte" (top-nav) ===== */
.menu .nav > li > a,
.menu .nav > li > .sub-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 10px 14px 18px;   /* + bas = place pour l'underline */
  line-height: 1;            /* évite que le trait coupe le texte */
}

.menu .nav > li > a::after,
.menu .nav > li > .sub-toggle::after{
  content:"";
  position:absolute;
  left:10px; right:10px;
  bottom:6px;                /* sous le texte, pas au milieu */
  height:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
  pointer-events: none;      /* ne bloque jamais les clics */
}

.menu .nav > li:hover > a::after,
.menu .nav > li > a:focus-visible::after,
.menu .nav > li > .sub-toggle:hover::after,
.menu .nav > li > .sub-toggle:focus-visible::after{
  transform: scaleX(1);
}

/* Sous-menus : même principe, un peu plus bas */
.menu .nav .sub li a{
  position: relative;
  display: block;
  padding: 10px 14px 16px;   /* place pour l’underline */
  line-height: 1.1;
}
.menu .nav .sub li a::after{
  content:"";
  position:absolute;
  left:14px; right:14px;
  bottom:8px;
  height:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
  pointer-events: none;
}
.menu .nav .sub li a:hover::after,
.menu .nav .sub li a:focus-visible::after{
  transform: scaleX(1);
}
/* Masquer le slogan texte sous le logo (visible pour lecteurs d’écran) */
.brand__strap{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.brand{ padding-bottom: 8px; } /* ajuste au besoin */
/* === Logo à gauche dans le header === */
.brand {
  flex-direction: row;              /* au lieu de column */
  justify-content: flex-start;      /* aligne à gauche */
  align-items: center;              /* centre verticalement */
  gap: 10px;
}

.brand__logo {
  height: 72px;
  width: auto;
  object-fit: contain;
  display: block;
}

.brand__strap {
  font-style: italic;
  color: var(--accent);             /* orange #F68C40 */
  font-size: 16px;
  margin-left: 8px;
}
/* Citation encart orange */
.callout--accent{
  background: rgba(243,102,33,.06);
  border: 1px solid rgba(243,102,33,.25);
  border-left: 6px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  margin: 10px 0 18px;
}
.callout--accent p{ margin:0; color: var(--muted); }
.callout--accent strong{ color: var(--text); }

/* Titres dans les cartes en bleu principal */
.card h1,
.card h2,
.card h3{
  color: var(--brand);
}
/* Encart orange (devise) */
.callout--accent{
  background:rgba(243,102,33,.06);
  border:1px solid rgba(243,102,33,.25);
  border-left:6px solid var(--accent);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  margin:10px 0 6px;
}
.hero--plain .callout--accent{ margin-top:10px; }

/* Titres de cartes en bleu principal */
.card h2{ color:var(--brand); margin-top:0; }

/* Bouton accent (orange) */
.btn{ display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; }
.btn--accent{ background:var(--accent); color:#fff; font-weight:700; border:0; }
.btn--accent:hover{ filter:brightness(.95); }
.rule--accent{border:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent) 60%,transparent)}
.callout--accent{
  background:rgba(243,102,33,.06);
  border:1px solid rgba(243,102,33,.25);
  border-left:6px solid var(--accent);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  margin:10px 0 0;
}
.callout--accent p{margin:0;color:var(--muted)}
.callout--accent p strong{color:var(--text)}
/* ===== Formulaire de contact (confort) ===== */
.contact-form{
  max-width: 1140px;          /* largeur utile du form */
  margin: 0 auto;            /* centré dans la carte */
}

.contact-form .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.contact-form label{
  font-weight: 600;
  color: var(--brand);
}

.contact-form input,
.contact-form textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font: inherit;
  line-height: 1.4;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
}

.contact-form textarea{
  min-height: 180px;         /* plus de hauteur */
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--brand2);
  box-shadow: 0 0 0 3px rgba(38,156,206,.18);
}

.contact-form .actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.contact-form .btn{
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 16px;
}

/* Optionnel : rendre la carte un peu plus “souple” */
.contact-form.card{
  padding: 22px;
}
/* ===== Validation front (contact) ===== */
.field.error input,
.field.error textarea{
  border-color:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.15);
}

.field .error-msg{
  margin-top:6px;
  color:#b91c1c;          /* rouge lisible */
  font-size:.92rem;
  line-height:1.3;
}

.field .hint{
  margin-top:6px;
  color:var(--muted);
  font-size:.9rem;
}
/* === Etat erreur: colorer le bouton Envoyer === */
.contact-form.has-errors .actions .btn--accent{
  background:#ef4444;           /* rouge lisible */
  box-shadow:0 0 0 3px rgba(239,68,68,.15);
}
.contact-form.has-errors .actions .btn--accent:hover{
  filter:none;
}

/* (option) petite vibration visuelle discrète au submit en erreur */
@keyframes nudge {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-3px); }
  40% { transform:translateX(3px); }
  60% { transform:translateX(-2px); }
  80% { transform:translateX(2px); }
}
.contact-form.has-errors .actions .btn--accent{
  animation:nudge .24s ease;
}
/* Résumé d'erreurs (alerte) */
.alert {border-radius:12px; padding:12px 14px; margin:12px 0;}
.alert--error{
  background:rgba(243,102,33,.06);           /* orange doux */
  border:1px solid rgba(243,102,33,.35);
  border-left:6px solid var(--accent);       /* filet accent */
  color:#7c2d12;
}
.alert--error h3{margin:0 0 6px; font-size:16px; color:#111827}
.alert--error ul{margin:0; padding-left:18px}
.alert--error li{margin:4px 0}

/* Champs en erreur */
.field.error input,
.field.error textarea{
  border:1px solid #ef4444;
  outline:0; box-shadow:0 0 0 3px rgba(239,68,68,.12);
}
.field .error-msg{
  margin-top:6px; font-size:13px; color:#b91c1c;
}

/* Bouton rouge quand erreurs (déjà ajouté précédemment) */
.contact-form.has-errors .actions .btn--accent{
  background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15);
}
/* Form contact */
.contact-form { max-width: 900px; margin: 0 auto; }
.grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
@media (max-width: 900px){ .grid-2 { grid-template-columns: 1fr; } }

.field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field label { font-weight:600; color:#111827; }
.field input, .field textarea {
  display:block; width:100%;
  border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; font:inherit; color:inherit;
  background:#fff;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--brand2); box-shadow: 0 0 0 3px rgba(38,156,206,.18);
}

/* Inline error */
.field.error input, .field.error textarea { border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.error-msg { color:#b91c1c; font-size:.9rem; display:none; }
.field.error .error-msg { display:block; }

/* Résumé d’erreurs */
.alert { border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.alert--error{
  background: rgba(220,38,38,.06);
  border: 1px solid rgba(220,38,38,.25);
  border-left: 6px solid #dc2626;
}
.alert h3{ margin:0 0 6px 0; font-size:1rem; }
.alert-list{ margin:0; padding-left:18px; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Titres */
h2, .h2 { color: var(--brand); }

/* Alertes (erreurs formulaire) */
.alert{border-radius:12px;padding:12px 14px;margin:0 0 14px}
.alert--error{background:#FEF2F2;border:1px solid #FCA5A5;color:#7F1D1D}
.alert--error h3{margin:0 0 6px;font-size:16px}
.alert-list{margin:0;padding-left:18px}

/* Grille form + coordonnées */
.contact-grid{
  display:grid; gap:16px;
  grid-template-columns: 2fr 1fr;
}
@media (max-width:900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Champs & erreurs inline */
.contact-form .field{margin-bottom:12px}
.contact-form input, .contact-form textarea{
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; font:inherit;
}
.contact-form .field.error input,
.contact-form .field.error textarea{ border-color:#EF4444; background:#FEF2F2; }
.contact-form .error-msg{color:#B91C1C;font-size:13px;margin-top:6px}

/* Aside coordonnées */
.contact-aside .h3{margin:0 0 6px;color:var(--brand)}
.contact-aside .sep{border:0;border-top:1px solid #e5e7eb;margin:12px 0}
.contact-aside .list{margin:6px 0 0 18px}

/* Section plan d’accès (fond très clair) */
.section--muted{ background:#f9fafb; border-top:1px solid #eef2f7; }
.section--muted h2{ color: var(--brand); }

/* Cartes map pleine largeur */
.map-grid{ display:grid; gap:16px; }
.map-card{ padding:0; overflow:hidden; }
.map-card .h3{ padding:16px 16px 0; margin:0; }
.map-embed{ width:100%; aspect-ratio:16/9; }
.map-cta{ padding:12px 16px 16px; }

/* Mobile: textarea plus confort */
@media (max-width:600px){
  .contact-form textarea{ min-height: 140px; }
}
/* Cartes map en grille 2 colonnes (côte à côte) */
.map-grid{
  display: grid;
  gap: 16px;                     /* espace entre les 2 cartes */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Sur mobile : empiler */
@media (max-width: 900px){
  .map-grid{
    grid-template-columns: 1fr;
  }
}
/* Accueil : hero très haut + cadrage mixte (fleuve + Tour du Crayon) */
.hero--tall .hero__img{
  height: min(88vh, 900px);   /* grand mais raisonnable */
  min-height: 560px;          /* évite un hero trop court sur écrans moyens */
  object-position: center 60%;/* ~58% montre le bas + skyline (ajuste 55–62%) */
}

@media (max-width: 1200px){
  .hero--tall .hero__img{
    height: min(84vh, 780px);
    min-height: 520px;
    object-position: center 60%;
  }
}

@media (max-width: 900px){
  .hero--tall .hero__img{
    height: 92vh;
    min-height: 420px;
    object-position: center 60%;
  }
}

@media (max-width: 600px){
  .hero--tall .hero__img{
    height: 64vh;
    min-height: 420px;
    object-position: center 64%;
  }
}
/* Masquer le slogan texte sous le logo (accessibilité OK) */
.brand__strap{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}
/* Ghost = fond blanc, bord gris, texte normal */
.btn--ghost{
  border:1px solid #e5e7eb;
  background:#fff;
  color:var(--text);
}
/* Encart citation (callout) – version unique */
.callout--accent{
  background:rgba(243,102,33,.06);
  border:1px solid rgba(243,102,33,.25);
  border-left:6px solid var(--accent);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  margin:10px 0 12px;
}
.callout--accent p{margin:0;color:var(--muted)}
.callout--accent p strong{color:var(--text)}
/* Titres dans cartes en bleu (unique) */
.card h1,
.card h2,
.card h3{
  color: var(--brand);
  margin-top: 0;
}
/* Résumé d’erreurs */
.alert{
  border-radius:12px;
  padding:12px 14px;
  margin:0 0 14px;
}
.alert--error{
  background:#FEF2F2;
  border:1px solid #FCA5A5;
  color:#7F1D1D;
}
.alert--error h3{margin:0 0 6px;font-size:16px}
.alert-list{margin:0;padding-left:18px}

/* Erreurs inline */
.field.error input,
.field.error textarea{
  border-color:#EF4444;
  background:#FEF2F2;
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
}
.field .error-msg{
  margin-top:6px;
  font-size:13px;
  color:#B91C1C;
}

/* Bouton accent rouge si erreurs */
.contact-form.has-errors .actions .btn--accent{
  background:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.15);
}
/* Form contact + aside */
.contact-grid{
  display:grid; gap:16px;
  grid-template-columns:2fr 1fr;
}
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}

.contact-form{ max-width:900px; margin:0 auto; }
.contact-form .field{
  display:flex; flex-direction:column; gap:6px; margin-bottom:12px;
}
.contact-form label{ font-weight:600; color:var(--brand); }
.contact-form input,
.contact-form textarea{
  width:100%; padding:12px 14px;
  border:1px solid #e5e7eb; border-radius:10px; font:inherit;
  background:#fff; line-height:1.4;
}
.contact-form textarea{ min-height:180px; resize:vertical; }
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none; border-color:var(--brand2);
  box-shadow:0 0 0 3px rgba(38,156,206,.18);
}
/* Actions */
.contact-form .actions{ display:flex; gap:10px; flex-wrap:wrap; }
/* Cartes map en grille 2 colonnes (côte à côte) */
.map-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width:900px){
  .map-grid{ grid-template-columns:1fr; }
}
.map-card{ padding:0; overflow:hidden; }
.map-card .h3{ padding:16px 16px 0; margin:0; }
.map-embed{ width:100%; aspect-ratio:16/9; }
.map-cta{ padding:12px 16px 16px; }
/* Anti “trait qui barre le texte” + underline only on hover */
.menu .nav > li > a,
.menu .nav > li > .sub-toggle{
  position:relative;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:10px 14px 18px;  /* place pour le trait */
  line-height:1;
}
.menu .nav > li > a::after,
.menu .nav > li > .sub-toggle::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform .25s ease; pointer-events:none;
}
.menu .nav > li:hover > a::after,
.menu .nav > li > a:focus-visible::after,
.menu .nav > li > .sub-toggle:hover::after,
.menu .nav > li > .sub-toggle:focus-visible::after{
  transform:scaleX(1);
}

/* Sous-menus */
.menu .nav .sub li a{
  position:relative; display:block; padding:10px 14px 16px; line-height:1.1;
}
.menu .nav .sub li a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:8px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform .25s ease; pointer-events:none;
}
.menu .nav .sub li a:hover::after,
.menu .nav .sub li a:focus-visible::after{
  transform:scaleX(1);
}
/* Accueil : hero très haut + cadrage */
.hero--tall .hero__img{
  height: min(88vh, 900px);
  min-height: 560px;
  object-position: center 58%;
}
@media (max-width:1200px){
  .hero--tall .hero__img{
    height: min(84vh, 780px);
    min-height: 520px;
    object-position:center 60%;
  }
}
@media (max-width:900px){
  .hero--tall .hero__img{
    height: 92vh;
    min-height: 420px;
    object-position:center 60%;
  }
}
@media (max-width:600px){
  .hero--tall .hero__img{
    height: 64vh;
    min-height: 420px;
    object-position:center 64%;
  }
}
/* 1) Donne une vraie hauteur à la section hero */
.hero--tall{
  min-height: min(88vh, 900px);      /* grand sur desktop */
  display: flex;
  align-items: flex-end;              /* contenu vers le bas, optionnel */
}

/* variantes par taille d’écran */
@media (max-width:1200px){
  .hero--tall{ min-height: min(84vh, 780px); }
}
@media (max-width:900px){
  .hero--tall{ min-height: 92vh; }
}
@media (max-width:600px){
  .hero--tall{ min-height: 64vh; }
}

/* 2) Dans un hero tall, l’image remplit 100% de la section (pas 60vh) */
.hero--tall .hero__img{
  height: 100% !important;           /* écrase le 60vh générique */
  min-height: 0;
  object-position: center 42%;       /* montre fleuve + Tour du Crayon - ajuste 55–62% */
}
/* Un peu plus d’air pour le contenu dans un hero haut */
.hero--tall .hero__content{
  padding: 56px 0 40px;              /* augmente légèrement les marges internes */
}
/* --- Vignettes d’articles --- */
.post-card{ display:flex; flex-direction:column; padding:0; overflow:hidden }
.post-media{ display:block; aspect-ratio:16/9; background:#f1f5f9; }
.post-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-body{ padding:14px 16px 16px }
.post-title{ margin:0 0 4px; font-size:1.15rem; line-height:1.25 }
.post-title a{ color:var(--brand); text-decoration:none }
.post-title a:hover{ text-decoration:underline }
.post-meta{ margin:0 0 6px; color:var(--muted); font-size:.92rem }
.post-excerpt{ margin:0; color:var(--text) }

/* Option: densité sur mobile */
@media (max-width:900px){
  .post-title{ font-size:1.1rem }
}
/* --- Articles (vignettes) --- */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
@media (max-width:900px){ .posts-grid{ grid-template-columns:1fr; } }

.post-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:var(--shadow);
}

.post-media{ display:block; aspect-ratio:16/9; overflow:hidden; }
.post-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.post-media:hover img{ transform:scale(1.04); }

.post-body{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.post-title{ margin:0; font-size:1.05rem; color:var(--brand); }
.post-title a{ color:inherit; text-decoration:none; }
.post-title a:hover{ text-decoration:underline; }
.post-intro{ margin:0; color:var(--text); }
.post-meta{
  margin-top:4px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  color:var(--muted); font-size:.92rem;
}
/* === Mini-dashboard KPI (jauges) === */
.kpi-dash{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width:900px){ .kpi-dash{ grid-template-columns:1fr; } }

.kpi{ display:flex; flex-direction:column; gap:6px; }
.kpi__head{ display:flex; justify-content:space-between; align-items:baseline; }
.kpi__value{ font-weight:700; color:var(--text); }

.gauge{
  height:10px; border-radius:999px; background:#eef2f7; overflow:hidden;
  border:1px solid #e5e7eb;
}
.gauge > span{
  display:block; height:100%; background:linear-gradient(90deg, var(--brand2), #6cc8e6);
}
.gauge--warn > span{ background:linear-gradient(90deg, #f59e0b, #fbbf24); }
.gauge--danger > span{ background:linear-gradient(90deg, #ef4444, #f87171); }
.gauge--ok > span{ background:linear-gradient(90deg, #10b981, #34d399); }

.kpi__hint{ color:var(--muted); }
/* Liste du plan du site */
/* Liste plan du site */
.sitemap{ list-style: none; padding-left: 0; }
.sitemap > li{ margin: 6px 0; }
.sitemap a{ text-decoration: none; }
.sitemap a:hover{ text-decoration: underline; }
.sitemap ul{ margin: 6px 0 6px 18px; padding-left: 0; }
/* ===== Plan du site en colonnes ===== */
.sitemap{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Colonnes responsives (3 → 2 → 1) */
@media (min-width: 1100px){
  .sitemap{ column-count: 2; column-gap: 24px; }
}
@media (min-width: 700px) and (max-width: 1099px){
  .sitemap{ column-count: 2; column-gap: 24px; }
}
/* mobile: 1 colonne par défaut */

/* Chaque groupe reste dans la même colonne */
.sitemap > li{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  padding-bottom: 8px;
}

/* Sous-niveaux lisibles */
.sitemap ul{
  margin: 6px 0 6px 16px;     /* légère indent */
  padding-left: 0;
}
.sitemap a{
  text-decoration: none;
}
.sitemap a:hover{
  text-decoration: underline;
}