/* arthurdelassus.com — simple, elegant, responsive */

:root{
  --bg: #F7F1E7;          /* off-white / light beige */
  --surface: #FFF9F1;
  --text: #2A2A2A;        /* anthracite */
  --muted: #5E5E5E;
  --border: rgba(42,42,42,.12);

  --accent: #C36A3D;      /* ochre / terracotta */
  --accent-2: #9F4F2B;
  --accent-soft: rgba(195,106,61,.12);

  --shadow: 0 16px 40px rgba(28, 20, 14, 0.12);
  --radius: 18px;
  --radius-sm: 12px;

  --container: 1120px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--text);
  background: #F2EFD9;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration-color: rgba(195,106,61,.45); text-underline-offset: .18em; }
a:hover{ text-decoration-color: var(--accent); }

.skip-link{
  position:absolute;
  left:-9999px;
  top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.skip-link:focus{ left: 10px; z-index: 9999; }

.container{
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

body{
  padding-top: 76px;
}
body.page-home,
body.page-overlay-header{
  padding-top: 0;
}

header.site-header{
  position: fixed;
  inset-inline: 0;
  top:0;
  z-index: 50;
  background: rgba(242, 239, 217, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(42,42,42,.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 16px;
  position: relative;
}

.brand{
  display:flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  flex-shrink: 0;
}
.brand[aria-current="page"]{
  text-decoration: none;
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--border);
  background: rgba(255,249,241,.72);
  /* 44 px de haut au moins : la cible tactile recommandee sur telephone. */
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 999px;
  cursor:pointer;
}
.nav-toggle:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 3px solid rgba(195,106,61,.28);
  outline-offset: 2px;
}
.nav-toggle svg{ width: 18px; height: 18px; }
.nav-toggle span{ font-weight: 600; font-size: 14px; }

nav.site-nav{
  position: absolute;
  left:0;
  right:0;
  top: 100%;
  border-bottom: 0;
  background: rgba(242, 239, 217, .96);
  backdrop-filter: blur(12px);
  display:none;
}
nav.site-nav[data-open="true"]{ display:block; }
.nav-links{
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 16px;
}
.nav-links a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.nav-links a:hover{
  background: rgba(195,106,61,.08);
  border-color: rgba(195,106,61,.16);
}
.nav-links a[aria-current="page"]{
  background: var(--accent-soft);
  border-color: rgba(195,106,61,.25);
}
.nav-links small{
  color: var(--muted);
  font-weight: 600;
}

@media (min-width: 860px){
  .nav-toggle{ display:none; }
  nav.site-nav{
    position: static;
    display:flex;
    justify-content: center;
    flex: 1;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }
  .nav-links{
    flex-direction: row;
    align-items:center;
    justify-content: center;
    padding: 0;
    gap: 4px;
  }
  .nav-links a{
    padding: 10px 12px;
    border-radius: 999px;
  }
  .nav-links small{ display:none; }
}

main{ padding: 34px 0 46px; }
main{
  background:
    linear-gradient(
      to bottom,
      rgba(195,106,61,.04),
      rgba(195,106,61,.02)
    );
}
.page-home main,
.page-overlay-header main{
  padding-top: 0;
}

.hero{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 22px;
  border-radius: 0;
  background: #F2EFD9;
  border: 0;
  box-shadow: none;
}

.hero-home{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #F2EFD9;
}
.hero-spotlight{
  position: absolute;
  inset: -20% 15% 0 -25%;
  background:
    radial-gradient(ellipse 55% 50% at 28% 42%, rgba(255,252,244,.95), transparent 72%),
    radial-gradient(ellipse 40% 40% at 22% 70%, rgba(195,106,61,.14), transparent 70%);
  pointer-events: none;
}
.hero-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 100vh;
  padding-top: 96px;
  padding-bottom: 48px;
  align-items: center;
}
.hero-copy{
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.hero-name{
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(2.5rem, 6.4vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.03em;
}
.hero-home .hero-title{
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.hero-portrait{
  position: relative;
  border-radius: 0;
  overflow: hidden;
  max-height: none;
  justify-self: center;
}
.hero-portrait::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, transparent 78%, #F2EFD9 100%),
    linear-gradient(to bottom, transparent 78%, #F2EFD9 100%),
    linear-gradient(90deg, #F2EFD9 0%, transparent 6%),
    linear-gradient(90deg, transparent 94%, #F2EFD9 100%);
  pointer-events: none;
}
.hero-portrait img{
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: cover;
  display: block;
}
@media (min-width: 900px){
  .hero-grid{
    grid-template-columns: 1.05fr .95fr;
    gap: 12px;
    align-items: center;
  }
  .hero-portrait{
    justify-self: end;
    width: min(100%, 560px);
  }
  .hero-portrait img{
    max-width: none;
    width: 100%;
    height: min(86vh, 760px);
    object-position: 50% 18%;
  }
}

h1,h2,h3{
  font-family: inherit;
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: .2px;
}
h1{ font-size: clamp(34px, 4vw, 54px); }
h2{ font-size: clamp(26px, 3vw, 38px); margin-top: 26px; }
h3{ font-size: 22px; margin-top: 18px; }

.lede{
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}
.lede-strong{
  color: #3B3B3B;
}

.hero-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.btn-glow{
  background: rgba(255,249,241,.55);
  color: var(--text);
  border-color: rgba(195,106,61,.55);
  box-shadow:
    0 0 0 1px rgba(195,106,61,.12),
    0 0 22px rgba(195,106,61,.42),
    0 8px 28px rgba(195,106,61,.18);
}
.btn-glow:hover{
  filter: brightness(1.03);
  box-shadow:
    0 0 0 1px rgba(195,106,61,.18),
    0 0 28px rgba(195,106,61,.55),
    0 10px 32px rgba(195,106,61,.22);
}
.btn-outline{
  background: transparent;
  color: var(--text);
  border-color: rgba(42,42,42,.28);
  box-shadow: none;
}
.btn-outline:hover{
  background: rgba(195,106,61,.08);
  border-color: rgba(195,106,61,.35);
}

.btn-blue{
  background: #234A63;
  color: #fff;
  border-color: rgba(4,25,45,.4);
  box-shadow: 0 18px 40px rgba(13,52,85,.3);
}
.btn-blue:hover{
  filter: brightness(1.03);
}
.btn-ochre{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: rgba(195,106,61,.5);
  box-shadow: 0 18px 40px rgba(195,106,61,.3);
}
.btn-ochre:hover{
  filter: brightness(1.02);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  border-radius: 999px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  cursor:pointer;
  text-decoration:none;
  font-weight: 700;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: rgba(195,106,61,.5);
  box-shadow: 0 18px 40px rgba(195,106,61,.18);
}
.btn-primary:hover{ filter: brightness(1.02); }
.btn-ghost:hover{
  background: rgba(195,106,61,.08);
  border-color: rgba(195,106,61,.18);
}

.chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,249,241,.72);
  font-weight: 700;
  text-decoration:none;
}
.chip .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 860px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}
.card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,249,241,.78);
  box-shadow: 0 14px 30px rgba(28, 20, 14, 0.08);
  padding: 18px;
}
.card p{ margin: 0; color: var(--muted); }
.card .card-title{ margin: 0 0 6px; }

.section{
  margin-top: 26px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,249,241,.72);
}

.two-col{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 860px){
  .two-col{ grid-template-columns: 1fr 1fr; }
}

.section-head-body{
  margin-top: 32px;
  padding: 24px 18px 40px;
  border-radius: calc(var(--radius) + 4px);
}
@media (min-width: 900px){
  .section-head-body{
    margin-top: 36px;
    padding: 32px 26px 56px;
    min-height: 90vh;
  }
}
.section-head-body h2{
  margin-top: 0;
}
.head-body-columns{
  display:grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 16px;
  align-items: flex-start;
}
@media (min-width: 900px){
  .head-body-columns{
    grid-template-columns: 1fr 1fr;
  }
}
.head-body-columns h3{
  margin-top: 0;
}
.head-body-columns ul{
  margin: 10px 0 22px;
  padding-left: 18px;
  color: var(--muted);
}
.head-body-photo{
  margin-bottom: 26px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(28,20,14,.16);
  aspect-ratio: 1048 / 642;
}
.head-body-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.head-body-photo-lci img{
  object-fit: contain;
}

.section-manifesto{
  margin-top: 72px;
  padding: 40px 20px 44px;
  border-radius: calc(var(--radius) + 4px);
  background: #E9DFC7;
  text-align: center;
}
.section-manifesto h2{
  margin-top: 0;
  margin-bottom: 10px;
}
.section-manifesto p{
  margin: 16px auto 24px;
  max-width: 900px;
  color: #3B3B3B;
  font-size: 19px;
}
.section-manifesto .btn-anthracite{
  background: #333333;
  color: #fff;
  border-color: rgba(0,0,0,.45);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.section-manifesto .btn-anthracite:hover{
  filter: brightness(1.03);
}
.amp-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.4);
  font-weight: 700;
  font-size: 17px;
}

.manifeste-hero{
  padding: 40px 0 40px;
  text-align: center;
}
.manifeste-hero h1{
  margin: 0 0 10px;
}
.manifeste-hero .chapeau{
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted);
}
.manifeste-section{
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 0 30px;
  border-top: 1px solid rgba(42,42,42,.12);
}
.section-header{
  display:flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.section-numero{
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  padding-top: 2px;
}
.section-header h2 span{
  display:block;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  margin-top: 4px;
}
.manifeste-section p{
  margin: 0 0 14px;
  color: var(--text);
}
.manifeste-section blockquote{
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(255,249,241,.9);
  border-radius: 0 6px 6px 0;
  font-style: italic;
}
.methode-liste{
  list-style: none;
  margin: 18px 0 4px;
  display:flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}
.methode-liste li{
  display:grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 10px;
  align-items: flex-start;
}
.methode-num{
  width: 2.2rem;
  height: 2.2rem;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}
.methode-contenu strong{
  display:block;
  margin-bottom: 4px;
}
.methode-contenu p{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.malentendu-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 18px 0;
}
@media (min-width: 720px){
  .malentendu-grid{
    grid-template-columns: 1fr 1fr;
  }
}
.malentendu-carte{
  background: rgba(255,249,241,.9);
  border-radius: 8px;
  padding: 14px 16px;
  border-top: 2px solid rgba(224,197,166,.9);
}
.malentendu-carte.gauche{
  border-top-color: #d4943a;
}
.malentendu-carte.droite{
  border-top-color: var(--accent);
}
.malentendu-carte .etiquette{
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.malentendu-carte p{
  margin: 0;
  font-style: italic;
}
.cloture{
  max-width: 720px;
  margin: 0 auto 64px;
  padding: 28px 0 32px;
  border-top: 1px solid rgba(42,42,42,.12);
  text-align: center;
}
.cloture .grande-citation{
  font-style: italic;
  margin: 0 0 18px;
}
.cloture .signature{
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}
.cloture .signature strong{
  color: var(--text);
}
.cloture-actions{
  display:flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===================================================
   Page Productions
   =================================================== */

.prod-hero{
  padding-top: 24px;
}
/* Sommaire de la page : un bouton par section (ancres #livres, #ateliers,
   #notes, #articles, #posts-linkedin). */
.prod-sommaire{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  margin-top: 1.4rem;
}
/* La barre de navigation est fixe : sans marge de defilement, une ancre
   place le titre de section sous l'en-tete. */
#livres,
#ateliers,
#notes,
#articles,
#posts-linkedin{
  scroll-margin-top: 96px;
}
.prod-two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
  align-items:flex-start;
}
@media (max-width: 860px){
  .prod-two-col{
    grid-template-columns:1fr;
  }
}
.prod-badge{
  display:inline-block;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--accent);
  border:1px solid rgba(195,106,61,.4);
  border-radius:999px;
  padding:4px 10px;
  margin-bottom:10px;
}
.prod-badge-outline{
  border-style:dashed;
}
.prod-book-cover{
  border-radius:6px;
  padding:5px 18px;
  background: #ffffff;
  color:#fff;
  margin-bottom:12px;
}
.prod-book-cover img{
  display:block;
  max-width:60%;
  margin:0 auto;
}

.prod-book-cover2{
  border-radius:6px;
  padding:5px 18px;
  background: #ffffff;
  color:#fff;
  margin-bottom:12px;
}
.prod-book-cover2 img{
  display:block;
  max-width:60%;
  margin:0 auto;
}






.prod-book-title{
  font-weight:700;
}
.prod-book-heading{
  margin:4px 0 6px;
}
.prod-status{
  font-size:14px;
  color:var(--muted);
}
.prod-card,
.prod-report{
  background: rgba(255,249,241,.9);
  border-radius:16px;
  padding:18px 18px 20px;
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(28,20,14,.06);
}
.prod-report-row{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  justify-content:space-between;
  align-items:center;
}
.prod-report-main{
  flex:1 1 0;
  min-width:220px;
}
.prod-report-logo{
  flex:0 0 auto;
}
.prod-report-logo img{
  max-height:96px;
  width:auto;
  object-fit:contain;
}
.prod-card-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  align-items:center;
}
.prod-card-main{
  flex:1 1 0;
  min-width:200px;
}
.prod-card-logo{
  flex:0 0 auto;
}
.prod-card-logo img{
  max-height:104px;
  width:auto;
  object-fit:contain;
}
.prod-card h3,
.prod-report h3{
  margin-top:4px;
  margin-bottom:8px;
}
.prod-card p,
.prod-report p{
  margin:0 0 8px;
  color:var(--muted);
}
.prod-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin-top:2rem;
}
@media (max-width: 860px){
  .prod-cards{
    grid-template-columns:1fr;
  }
}
.prod-articles-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1.5rem;
}
@media (max-width: 1024px){
  .prod-articles-grid{
    grid-template-columns: repeat(2,1fr);
  }
}
@media (max-width: 700px){
  .prod-articles-grid{
    grid-template-columns:1fr;
  }
}
.prod-article-card{
  background: rgba(255,249,241,.9);
  border-radius:16px;
  padding:18px 18px 20px;
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(28,20,14,.06);
  display:flex;
  flex-direction:column;
}
.prod-article-card a.btn{
  margin-top:auto;
  align-self:flex-start;
}
.prod-article-card h3{
  margin-top:4px;
  margin-bottom:8px;
}
.prod-article-card p{
  margin:0 0 10px;
  color:var(--muted);
}
.prod-article-badge{
  display:inline-block;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.prod-linkedin-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1.2rem;
  margin-top:1.8rem;
}
@media (max-width: 900px){
  .prod-linkedin-grid{
    grid-template-columns:1fr;
  }
}
.prod-linkedin-card{
  background: rgba(255,249,241,.9);
  border-radius:14px;
  padding:14px 16px;
  border:1px solid var(--border);
}
.prod-linkedin-card h3{
  margin:0 0 6px;
}
.prod-linkedin-card p{
  margin:0;
  color:var(--muted);
}

/* ===================================================
   Page Services
   =================================================== */

.services-hero{
  padding-top:24px;
}
.services-intro{
  padding-top:0;
}
.services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.8rem;
}
@media (max-width: 860px){
  .services-grid{
    grid-template-columns:1fr;
  }
}
.service-card{
  display:flex;
  flex-direction:column;
  background: rgba(255,249,241,.9);
  border-radius:16px;
  padding:18px 18px 20px;
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(28,20,14,.06);
}
.service-card > a.btn{
  margin-top:auto;
  align-self:flex-start;
}
.service-card h2{
  margin:4px 0 8px;
  font-size:1.35rem;
}
.service-card p{
  margin:0 0 10px;
  color:var(--muted);
}
.service-icon{
  font-size:1.6rem;
  margin-bottom:4px;
}
.services-stats{
  background:#f1e5d0;
}
.services-stats-inner{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:1.2rem;
  align-items:center;
}
@media (max-width: 900px){
  .services-stats-inner{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 600px){
  .services-stats-inner{
    grid-template-columns:1fr;
  }
}
.services-stat{
  text-align:center;
}
.services-stat strong{
  display:block;
}

/* Page Services : sections d'offres (LOT 24, ajustements LOT 25) */
.offer-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.8rem;
  align-items: stretch;
}
@media (max-width: 900px){
  .offer-layout{
    grid-template-columns: 1fr;
  }
}
.offer-main > p{
  margin: 0 0 .9rem;
}
.offer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 1.2rem;
  margin: 0 0 1.1rem;
}
.offer-head-text{
  min-width: 0;
}
.offer-head-text .prod-badge{
  margin-bottom: 6px;
}
.offer-head .offer-title,
.offer-head .offer-logo{
  margin: 0;
}
.offer-logo img{
  max-height: 70px;
  width: auto;
  object-fit: contain;
}
.offer-schema{
  margin: 1.4rem 0 .2rem;
  text-align:center;
}
.offer-schema img{
  max-width: 430px;
  width: 100%;
  height:auto;
  border-radius: var(--radius-sm);
}
/* Schéma placé dans la colonne de texte (fresque) : demi-format, centré par
   le text-align:center de .offer-schema. */
.offer-schema--inline img{
  max-width: 215px;
}
.offer-main ul.clean li strong{
  color:#2C2C2C;
}
.offer-title{
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 .8rem;
  color: #2C2C2C;
}
.offer-subtitle{
  margin: 1.5rem 0 .5rem;
}
.offer-logos-cap{
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.4rem 0 .6rem;
}
.offer-logos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1rem 1.4rem;
  align-items: center;
  justify-items: center;
  margin: 0 0 1.2rem;
  padding: .9rem 1.1rem;
  background: rgba(255,249,241,.9);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.offer-logos img{
  max-height: 58px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
/* Sur mobile, deux logos par ligne restent lisibles et plus compacts. */
@media (max-width: 640px){
  .offer-logos{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .8rem 1rem;
  }
  .offer-logos img{
    max-height: 48px;
  }
}
/* LOT 26 : colonne de droite des offres = photo + panneau « En pratique ».
   La colonne est alignée sur le bas de la section, et le panneau ne fait que
   la hauteur de son contenu : il touche le bas sans s'étirer vers le haut. */
.offer-side{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 1.2rem;
  min-width: 0;
}
.offer-side .offer-facts{
  flex: 0 0 auto;
}
.offer-photo{
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}
.offer-photo img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.offer-facts{
  display:flex;
  flex-direction:column;
}
@media (max-width: 900px){
  .offer-side{
    display:block;
  }
  .offer-side .offer-facts{
    margin-top: 1.5rem;
  }
}
.offer-facts h3{
  margin: 0 0 .8rem;
}
.offer-facts ul.clean{
  margin: 0 0 1.1rem;
}
.offer-facts ul.clean li{
  margin: .45rem 0;
}

/* ===================================================
   Page Agriculture / Ferme
   =================================================== */

/* Sections ferme : boîtes textuelles + emplacement photo */
.schema-split{
  display:flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 28px;
}
.schema-boxes{
  display:flex;
  flex-direction: column;
  gap: 14px;
}
.schema-connect{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.3rem;
  line-height:1;
  padding: 2px 0;
  color: var(--accent);
}
/* Boîtes de contenu */
.energie-source, .energie-stockage, .energie-usages,
.eau-card, .fossile-card, .froid-intro, .froid-avantage{
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,249,241,.8);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(28,20,14,.08);
}
.energie-icon, .eau-icon, .fossile-icon{
  display:inline;
  line-height: 1.2;
}
.energie-icon + h4,
.eau-icon + h4,
.fossile-icon + h4{
  display:inline;
  margin: 0 0 0 4px;
  font-size: 1.15rem;
}
.energie-source p, .energie-stockage p, .energie-usages p,
.eau-card p, .fossile-card p{
  margin: 8px 0 0;
  color: var(--muted);
}
.energie-usages ul{
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.energie-usages li{
  margin: 4px 0;
}
/* Chambre froide : intro + avantages */
.froid-intro h4{
  margin: 0 0 6px;
}
.froid-intro p{
  margin: 0;
  color: var(--muted);
}
.froid-avantage{
  display:flex;
  gap: 12px;
  align-items: flex-start;
}
.froid-avantage > span{
  font-size: 1.4rem;
  line-height: 1.2;
  flex-shrink: 0;
}
.froid-avantage p{
  margin: 0;
  color: var(--muted);
}
.froid-avantage strong{
  display:block;
  color: var(--text);
  margin-bottom: 2px;
}
/* Emplacement photo réservé */
.schema-photo{
  border: 2px dashed rgba(42,42,42,.25);
  border-radius: 18px;
  background: rgba(255,249,241,.4);
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  color: var(--muted);
  text-align:center;
  padding: 16px;
}
.schema-photo:empty::before{
  content: "Emplacement réservé : future photo";
  opacity:.6;
}
@media (min-width: 900px){
  .schema-split{
    flex-direction: row;
    align-items: stretch;
    gap: 28px;
  }
  .schema-split--photo-left{
    flex-direction: row-reverse;
  }
  .schema-boxes{
    flex: 1.05;
    min-width: 0;
  }
  .schema-photo{
    flex: .95;
    min-height: 100%;
  }
}

.ferme-hero{
  position: relative;
  min-height: 70vh;
  display:flex;
  align-items: flex-end;
  color:#fff;
  background: url("../../Images/photo_serre.jpg") center/cover no-repeat;
}
.ferme-hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(30,28,24,0.85) 0%,
    rgba(30,28,24,0.3) 60%,
    transparent 100%
  );
}
.ferme-hero-content{
  position:relative;
  z-index:1;
  padding-bottom: 3rem;
}
.ferme-hero-badge{
  display:inline-block;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.ferme-hero h1{
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight:700;
  line-height:1.15;
  margin:0 0 .75rem;
}
.ferme-hero-tagline{
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-style: italic;
  opacity: .9;
  max-width: 540px;
}

.section-beige{
  background-color:#f5f0e8;
}
.section-title{
  font-size: 1.8rem;
  font-weight:700;
  text-align:center;
  margin-bottom: 2.2rem;
  color:#2c2c2c;
}
.ferme-philosophie{
  background-color:#f5f0e8;
}
.philosophie-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-top:2.2rem;
}
.philosophie-card{
  background:#fff;
  border-radius:12px;
  padding:2rem;
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
}
.philosophie-icon{
  font-size:2rem;
  display:block;
  margin-bottom:.75rem;
}
.philosophie-card h3{
  font-size:1.1rem;
  font-weight:700;
  color:#2c2c2c;
  margin-bottom:.5rem;
}
.philosophie-card p{
  font-size:.95rem;
  color:#555;
  line-height:1.65;
}
.container-narrow{
  max-width: 760px;
  margin: 0 auto;
}
.text-center{ text-align:center; }
.text-lead{
  font-size: 1.1rem;
  line-height:1.7;
  color:#3a3a3a;
}

.chiffres-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:1.5rem;
  margin-top: 2rem;
}
.chiffre-card{
  background:#fff;
  border-radius:12px;
  padding: 2rem 1.5rem;
  text-align:center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.chiffre-number{
  display:block;
  font-size: 2.2rem;
  font-weight:700;
  color:#b5651d;
}
.chiffre-unit{
  display:block;
  font-size:.9rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#b5651d;
  margin-bottom: .75rem;
}
.chiffre-card p{
  margin:0;
  font-size:.88rem;
  color:#666;
}
.chiffre-nombre{
  display:block;
  font-size: 2.2rem;
  font-weight:700;
  color:#b5651d;
}
.chiffre-unite{
  display:block;
  font-size:.95rem;
  font-weight:600;
  color:#2c2c2c;
  margin:.4rem 0;
}
.chiffre-detail{
  display:block;
  font-size:.8rem;
  color:#888;
}

.cultures-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:3rem;
  align-items:center;
}
.cultures-text h2{
  font-size:1.8rem;
  margin-bottom:1rem;
  color:#2c2c2c;
}
.cultures-text p{
  line-height:1.75;
  color:#444;
  margin-bottom:1rem;
}
.cultures-images{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.cultures-img{
  width:100%;
  border-radius:10px;
  object-fit:cover;
  max-height:260px;
}

.galerie-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows:auto auto;
  gap:1rem;
}
.galerie-item{
  margin:0;
  overflow:hidden;
  border-radius:10px;
}
.galerie-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition: transform .4s ease;
}
.galerie-item:hover img{
  transform: scale(1.04);
}
.galerie-item figcaption{
  padding:.5rem .25rem;
  font-size:.85rem;
  color:#777;
  text-align:center;
}
.galerie-item-large{
  grid-column:1 / 3;
}
.galerie-item-large img{
  height:280px;
}

.ferme-vente h2,
.ferme-transition h2{
  font-size:1.8rem;
  text-align:center;
  margin-bottom:1rem;
  color:#2c2c2c;
}
.ferme-vente > .container > p{
  text-align:center;
  max-width:620px;
  margin:0 auto 2.5rem;
  line-height:1.75;
  color:#444;
}
.vente-points{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:2rem;
}
.vente-point{
  text-align:center;
}
.vente-icon{
  font-size:2.2rem;
  display:block;
  margin-bottom:.5rem;
}
.vente-point h3{
  font-size:1.1rem;
  margin-bottom:.4rem;
  color:#2c2c2c;
}
.vente-point p{
  font-size:.92rem;
  color:#666;
  line-height:1.55;
}

.ateliers-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:3rem;
  align-items:center;
}
.ateliers-image img{
  width:100%;
  border-radius:12px;
  object-fit:cover;
  max-height:420px;
}
.ateliers-text h2{
  font-size:1.8rem;
  margin-bottom:1rem;
  color:#2c2c2c;
}
.ateliers-text p{
  line-height:1.75;
  color:#444;
  margin-bottom:1rem;
}
.ateliers-list{
  list-style:none;
  padding:0;
  margin:1.5rem 0;
}
.ateliers-list li{
  position:relative;
  padding-left:1.5rem;
  margin-bottom:1rem;
  line-height:1.65;
  color:#444;
}
.ateliers-list li::before{
  content:"→";
  position:absolute;
  left:0;
  color:#b5651d;
  font-weight:700;
}

.ferme-transition p{
  font-size:1.05rem;
  line-height:1.75;
  color:#444;
  max-width:640px;
  margin:0 auto 2rem;
}
.ferme-transition-links{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

@media (max-width: 860px){
  .chiffres-grid{
    grid-template-columns: repeat(2,1fr);
  }
  .philosophie-grid{
    grid-template-columns:1fr;
  }
  .cultures-grid,
  .ateliers-grid{
    grid-template-columns:1fr;
  }
  .ateliers-image{
    order:-1;
  }
  .galerie-grid{
    grid-template-columns: 1fr 1fr;
  }
  .galerie-item-large{
    grid-column:1 / -1;
  }
  .vente-points{
    grid-template-columns:1fr;
    max-width:360px;
    margin:0 auto;
  }
  .ferme-hero{
    min-height:55vh;
  }
}

ul.clean{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
ul.clean li{ margin: 6px 0; }

.kpi{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 860px){
  .kpi{ grid-template-columns: repeat(3, 1fr); }
}
.kpi .metric{
  padding: 14px;
  border-radius: 16px;
  background: rgba(195,106,61,.08);
  border: 1px solid rgba(195,106,61,.15);
}
.metric strong{ display:block; font-size: 18px; }
.metric span{ color: var(--muted); }

.blog-list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
.post{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  background: rgba(255,249,241,.86);
}
.post header{
  display:flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.post time{ color: var(--muted); font-weight: 700; font-size: 13px; }
.post p{ margin: 0; color: var(--muted); }
.post a{ font-weight: 800; }
.post .tags{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.post .tag{
  font-size: 12px;
  font-weight: 800;
  color: rgba(42,42,42,.8);
  border: 1px solid rgba(42,42,42,.12);
  background: rgba(255,249,241,.65);
  padding: 4px 8px;
  border-radius: 999px;
}

.form{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
label{ font-weight: 800; }
input, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,249,241,.9);
  font: inherit;
}
textarea{ min-height: 140px; resize: vertical; }
.help{
  color: var(--muted);
  font-size: 14px;
  margin: 6px 0 0;
}

footer.site-footer{
  border-top: 0;
  background: #F2EFD9;
  padding: 14px 0 18px;
}
.footer-inner{
  display:flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
@media (min-width: 860px){
  .footer-inner{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* ===================================================
   LOT 3 - Accueil : bandeau de confiance, livre, offres
   (ajouts uniquement : aucune regle existante modifiee)
   =================================================== */

.home-trust{
  padding: 44px 0 40px;
  background: rgba(255,249,241,.9);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.home-trust-title{
  margin: 0 0 22px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  font-weight: 700;
}
.home-trust-logos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 38px;
  margin-bottom: 34px;
}
.home-trust-logos img{
  max-height: 40px;
  max-width: 128px;
  width: auto;
  object-fit: contain;
  opacity: .82;
  transition: opacity .2s ease, transform .2s ease;
}
.home-trust-logos img:hover{
  opacity: 1;
  transform: translateY(-2px);
}
.home-stats{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 46px;
  padding-top: 26px;
  border-top: 1px solid rgba(42,42,42,.08);
}
.home-stat{ min-width: 140px; }
.home-stat strong{
  display: block;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 6px;
}
.home-stat span{
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 640px){
  .home-trust-logos{ gap: 16px 22px; }
  .home-trust-logos img{ max-height: 30px; max-width: 96px; }
  .home-stats{ gap: 20px 28px; }
}

.home-book{
  margin-top: 40px;
  padding: 46px 34px;
  border-radius: calc(var(--radius) + 4px);
  background: #E9DFC7;
}
.home-book-inner{
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 34px;
  align-items: center;
}
@media (max-width: 760px){
  .home-book-inner{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .home-book .hero-actions{ justify-content: center; }
}
.home-book-cover img{
  width: 100%;
  max-width: 190px;
  display: block;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(28,20,14,.28);
}
.home-book-badge{
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.home-book-text h2{ margin: 0 0 8px; }
.home-book-authors{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .98rem;
}
.home-book-text p{ margin: 0 0 12px; }
.home-book .hero-actions{ margin-top: 16px; }

.home-offers{
  margin-top: 26px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,249,241,.72);
}
.home-offers .text-lead{ margin-bottom: 0; }
.home-offers-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}
@media (max-width: 860px){
  .home-offers-grid{ grid-template-columns: 1fr; }
}
.home-offer{
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-offer:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(28,20,14,.1);
}
.home-offer-icon{
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.home-offer h3{ margin: 0 0 8px; font-size: 1.2rem; }
.home-offer p{
  flex: 1;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .95rem;
}
.home-offer .btn{ align-self: flex-start; }

/* Bouton contour clair (classe utilisee mais non definie auparavant) */
.btn-ghost{
  background: transparent;
  color: var(--text);
  border-color: rgba(42,42,42,.28);
}
.btn-ghost:hover{
  background: rgba(195,106,61,.08);
  border-color: rgba(195,106,61,.35);
}

/* ===================================================
   LOT 4 - Formulaire de contact et temoignages
   (ajouts uniquement : aucune regle existante modifiee)
   =================================================== */

select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,249,241,.9);
  font: inherit;
  color: var(--text);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
select:focus-visible{
  outline: 3px solid rgba(195,106,61,.28);
  outline-offset: 2px;
}
#formStatus:not(:empty){
  color: var(--accent);
  font-weight: 600;
}

/* Temoignages (prets a activer, section desactivee dans services.html) */
.services-temoignages{ background: rgba(255,249,241,.9); }
.temoignages-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 26px;
}
@media (max-width: 860px){
  .temoignages-grid{ grid-template-columns: 1fr; }
}
.temoignage{
  margin: 0;
  padding: 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(28,20,14,.06);
}
.temoignage blockquote{
  margin: 0 0 14px;
  font-style: italic;
  color: var(--text);
}
.temoignage blockquote::before{ content: "\201C"; }
.temoignage blockquote::after{ content: "\201D"; }
.temoignage figcaption{
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
}

/* ===================================================
   LOT 5 - Pages d'articles de blog
   (ajouts uniquement : aucune regle existante modifiee)
   =================================================== */

.article-meta{
  margin: 0 0 18px;
  font-size: .9rem;
}
.article-meta a{
  text-decoration: none;
  font-weight: 700;
}
.article-meta a:hover{ text-decoration: underline; }

.article .section-title{ margin-bottom: 14px; }
.article h2{ margin-top: 30px; }
.article p{ margin: 0 0 14px; }
.article ul.clean,
.article ol.clean{ margin: 12px 0 18px; }
.article ul.clean li,
.article ol.clean li{
  margin: 8px 0;
  line-height: 1.65;
}
.article blockquote{
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(255,249,241,.9);
  border-radius: 0 6px 6px 0;
  font-style: italic;
}
.article-foot{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.post-link{ margin: 12px 0 0; }
.post-link .btn{
  padding: 9px 12px;
  font-size: .92rem;
}

/* ===================================================
   LOT 6 — Réassurance dans le hero de l'accueil
   (ajouts uniquement : aucune regle existante modifiee)
   =================================================== */

.hero-trust{
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(42,42,42,.12);
}
.hero-trust-title{
  margin: 0 0 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  font-weight: 700;
}
.hero-trust-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.hero-trust-stat{
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hero-trust-stat strong{
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1;
  color: var(--accent);
}
.hero-trust-stat span{
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.35;
}
.hero-trust-logos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 16px;
  opacity: .78;
}
.hero-trust-logos img{
  max-height: 26px;
  max-width: 86px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 640px){
  .hero-trust-logos{ gap: 10px 14px; }
  .hero-trust-logos img{ max-height: 20px; max-width: 64px; }
  .hero-trust-stats{ gap: 10px 20px; }
}

/* ===================================================
   LOT 6 — Emplacements photo de la page Agriculture
   Variante "vraie photo" des blocs .schema-photo
   (la classe .schema-photo est conservee : elle porte
    le ratio de colonne flex .95 en >=900px)
   =================================================== */

.schema-photo--img{
  border: 0;
  background: none;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  display: block;
}
.schema-photo--img img{
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}
/* Variante 2 photos empilees (ex. chambre froide + CoolBot) :
   hauteur pilotee par un ratio fixe, colonne NON etiree
   (align-self) pour ne jamais depasser la colonne de texte. */
.schema-photo--stack{
  display: grid;
  gap: 12px;
  min-height: 0;
}
.schema-photo--stack img{
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
@media (min-width: 900px){
  .schema-photo--stack{ align-self: flex-start; }
}

/* ===================================================
   LOT 6 — Offre "Séminaire au vert & visite apprenante"
   (page Agriculture)
   =================================================== */

.ferme-seminaire{ background: rgba(255,249,241,.92); }
.seminaire-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 30px;
}
@media (min-width: 820px){
  .seminaire-grid{ grid-template-columns: repeat(3, 1fr); }
}
.seminaire-card{
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(28,20,14,.08);
}
.seminaire-icon{
  display: block;
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 12px;
}
.seminaire-card h3{
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--text);
}
.seminaire-duree{
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(195,106,61,.12);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.seminaire-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.seminaire-note{
  margin: 26px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}
.seminaire-extra{
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid rgba(42,42,42,.1);
  text-align: center;
}
.seminaire-extra h3{
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--text);
}
.seminaire-extra > p{
  margin: 0 0 20px;
  color: var(--muted);
}
.seminaire-options{
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 780px;
  display: grid;
  gap: 14px;
  text-align: left;
}
@media (min-width: 700px){
  .seminaire-options{ grid-template-columns: 1fr 1fr; }
}
.seminaire-options li{
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 14px;
  background: rgba(242,239,217,.55);
  border: 1px solid var(--border);
}
.seminaire-options img{
  width: 92px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}
.seminaire-options strong{
  display: block;
  color: var(--text);
  margin-bottom: 3px;
}
.seminaire-options span{
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.45;
}
.ferme-seminaire .ferme-transition-links{ margin-top: 32px; }

/* ===================================================
   LOT 7 — Refonte du hero de la page Agriculture
   + emplacement photo reserve dans les colonnes photo
   (ajouts uniquement : aucune regle existante supprimee.
    Les regles .ferme-hero* ci-dessous surchargent
    volontairement les regles d'origine, plus bas dans le
    fichier, pour la seule page Agriculture.)
   =================================================== */

.ferme-hero{
  min-height: 84vh;
  align-items: center;
  padding: 132px 0 64px;
  background-position: 50% 60%;
}
.ferme-hero-overlay{
  background:
    linear-gradient(100deg, rgba(24,22,19,.9) 0%, rgba(24,22,19,.66) 40%, rgba(24,22,19,.3) 72%, rgba(24,22,19,.5) 100%),
    linear-gradient(to top, rgba(24,22,19,.72) 0%, rgba(24,22,19,0) 58%);
}
.ferme-hero-copy{ max-width: 780px; }
.ferme-hero-badge{ margin-bottom: 18px; }
.ferme-hero-tagline{
  max-width: 620px;
  font-style: normal;
  font-size: clamp(1.02rem, 2.1vw, 1.32rem);
  line-height: 1.5;
  opacity: .94;
}
.ferme-hero-facts{
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.ferme-hero-facts li{
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ferme-hero-facts strong{
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
}
.ferme-hero-facts span{
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.72);
}
.ferme-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.ferme-hero .btn-outline{
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.ferme-hero .btn-outline:hover{
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.85);
}
@media (max-width: 720px){
  .ferme-hero{
    min-height: 0;
    padding: 112px 0 48px;
  }
  .ferme-hero-facts{ gap: 14px 26px; }
  .ferme-hero-facts span{ letter-spacing: .08em; }
}

/* Emplacement photo reserve a l'interieur d'une colonne
   .schema-photo--stack (ex. future photo du puits,
   future photo du microculteur).
   Le libelle est porté par l'attribut data-slot. */
.schema-photo-slot{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  aspect-ratio: 5 / 4;
  border: 2px dashed rgba(42,42,42,.25);
  border-radius: 14px;
  background: rgba(255,249,241,.4);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.schema-photo-slot::before{
  content: attr(data-slot);
  opacity: .6;
}


/* ===================================================
   LOT 7 - Logos partenaires
   1) taille doublee (hero et bandeau de confiance)
   2) logos regroupes par offre dans "Ce que je propose"
   3) emplacement reserve pour le logo EM Normandie
   Toutes les nouvelles tailles restent INFERIEURES a la
   taille native des fichiers (verifie avec img_dims.py) :
   aucune image agrandie, donc aucun logo flou.
   =================================================== */
.hero-trust-logos{ gap: 16px 26px; }
.hero-trust-logos img{ max-height: 52px; max-width: 172px; }
.home-trust-logos{ gap: 26px 44px; }
.home-trust-logos img{ max-height: 80px; max-width: 250px; }
@media (max-width: 640px){
  .hero-trust-logos img{ max-height: 38px; max-width: 124px; }
  .home-trust-logos img{ max-height: 58px; max-width: 170px; }
}

/* Bande de logos d'une carte "Ce que je propose".
   Meme hauteur d'occupation que l'emoji qu'elle remplace,
   pour que les 3 titres de cartes restent alignes. */
.home-offer-logos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-height: 46px;
  margin: 0 0 10px;
}
.home-offer-logos img{
  max-height: 40px;
  max-width: 132px;
  width: auto;
  object-fit: contain;
}
/* L'emoji conserve sa place dans la bande de logos, mais
   sans marge : la bande garde la meme hauteur dans les 3 cartes. */
.home-offer-logos .home-offer-icon{
  font-size: 1.45rem;
  margin: 0;
  line-height: 1;
}

/* Emplacement reserve pour un logo pas encore fourni
   (meme principe que .schema-photo-slot : le libelle est
   porte par l'attribut data-slot). */
.partner-slot{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  min-height: 40px;
  border: 2px dashed rgba(42,42,42,.25);
  border-radius: 10px;
  background: rgba(255,249,241,.4);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.partner-slot::before{
  content: attr(data-slot);
  opacity: .6;
}

/* Rangee discrete sous les 3 offres : les references qui
   ne dependent pas d'une offre en particulier. */
.home-offers-extra{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 40px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(42,42,42,.08);
}
.home-offers-extra img{
  max-height: 56px;
  max-width: 190px;
  width: auto;
  object-fit: contain;
  opacity: .85;
}


/* ===================================================
   LOT 8 - Hero allegé, logos accoles aux chiffres,
   livre « L'ecologie sans les mythes », offres
   1) hero : 4 logos au lieu de 8, grossis pour occuper
      la meme surface qu'avant ; titre « Ils m'ont fait
      confiance » deplace SOUS la liste des chiffres
   2) bandeau : les logos des 2 ateliers crees viennent
      a cote de la statistique correspondante
   3) livre : nouveau titre + sous-titre
   4) offres : titre et logos cote a cote, logos
      references sous le bouton, dans la meme carte
   (ajouts uniquement : aucune regle existante modifiee)
   =================================================== */

/* --- 1. Hero : chiffres, puis titre, puis logos --- */
/* Espacements resserres pour que le bloc de confiance
   tienne entierement sous la ligne de flottaison d'un
   portable 1366x768 (le hero fait 100vh). */
.hero-trust{ margin-top: 14px; padding-top: 14px; }
.hero-trust-stats{ margin-bottom: 10px; }
.hero-trust-title{ margin-bottom: 10px; }
.hero-trust-logos{ gap: 12px 26px; margin-top: 10px; }
/* 4 logos au lieu de 8 : on double presque la hauteur
   (52 -> 72 px) pour conserver la meme surface occupee.
   72 px reste sous la hauteur native de chaque fichier
   (131, 141, 128, 201 px) : aucun agrandissement. */
.hero-trust-logos img{ max-height: 72px; max-width: 240px; }
@media (max-width: 640px){
  .hero-trust-logos img{ max-height: 52px; max-width: 168px; }
}

/* --- 2. Bandeau : logos des ateliers crees --- */
.home-stat-ateliers{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home-stat-logos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 10px;
}
.home-stat-logos img{
  max-height: 40px;
  max-width: 132px;
  width: auto;
  object-fit: contain;
  opacity: .85;
  transition: opacity .2s ease;
}
.home-stat-logos img:hover{ opacity: 1; }

/* --- 3. Livre a paraitre : sous-titre --- */
.home-book-subtitle{
  margin: 0 0 10px;
  color: var(--accent);
  font-weight: 600;
  font-size: .98rem;
}
.prod-book-subtitle{
  margin: -4px 0 12px;
  color: var(--accent);
  font-weight: 600;
  font-size: .98rem;
}

/* --- 4. Offres --- */
/* Le titre occupe la meme hauteur de ligne dans les 3
   cartes (avec ou sans logos a sa droite), pour que les
   paragraphes, les boutons et les logos du bas restent
   alignes d'une carte a l'autre. */
.home-offer h3{ line-height: 38px; }
.home-offer-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 8px;
}
.home-offer-head h3{ margin: 0; }
/* Logos places a droite du titre (carte « Ateliers ») */
.home-offer-logos-inline{
  justify-content: flex-end;
  min-height: 0;
  margin: 0;
}
.home-offer-logos-inline img{ max-height: 38px; max-width: 124px; }
/* Logos de references places juste sous le bouton,
   dans la meme boite au bord arrondi (.home-offer) */
.home-offer-logos-foot{
  min-height: 0;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(42,42,42,.08);
}

/* ===================================================
   LOT 10/11 - SECTION "MES POSTS LINKEDIN" (ressources.html)
   Remplace l'ancienne section "Blog integre".
   Grille de 3 colonnes. Les 6 posts les plus aimes sont visibles au
   chargement, puis 2 lignes de plus par clic sur « Voir plus de posts »
   (« Voir moins de posts » revient a 6). La ligne suivante est montree
   en transparence (.lp-apercu) dans la bande de lignes ou se trouve la
   barre de boutons : elle donne envie de cliquer sans etre utilisable.
   Chaque carte n'affiche d'abord que --lp-lignes lignes de texte (2) ;
   « Voir plus » deplie tout le post (.lp-ouvert), « Voir moins » revient
   a 2 lignes. Les cartes sont filtrables par categorie via les puces
   .lp-chip (attribut data-lp-cats).
   =================================================== */
.lp-intro{
  max-width: 780px;
  margin: 0 auto 24px;
  text-align: center;
}
.lp-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  margin: 0 0 16px;
}
.lp-chip{
  font-family: inherit;
  font-size: .82rem;
  line-height: 1.1;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.lp-chip:hover{ border-color: rgba(195,106,61,.55); }
.lp-chip[aria-pressed="true"]{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.lp-chip-count{ opacity: .72; font-size: .8em; margin-left: .3em; }
.lp-status{
  margin: 0 0 22px;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
}
.lp-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
  align-items: start;
}
.lp-card{
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(28,20,14,.07);
  overflow: hidden;
}
.lp-card[hidden]{ display: none !important; }
/* Carte masquee par la limite de posts affiches (« Voir plus de posts »). */
.lp-card.lp-planque{ display: none !important; }
/* LOT 11 - Ligne d'apercu : la ligne de posts suivante, montree en
   transparence derriere la barre de boutons. Elle est inutilisable
   (pointer-events:none cote CSS, attribut inert cote HTML) et reste donc
   purement incitative. */
.lp-card.lp-apercu{
  opacity: .34;
  filter: saturate(.55) blur(1px);
  pointer-events: none;
  user-select: none;
}
.lp-card.lp-apercu .lp-card-actions{ visibility: hidden; }
.lp-card-media{
  display: block;
  margin: -16px -18px 14px;
  background: #EDE7DB;
}
.lp-card-media img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.lp-card-top{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.lp-badge{
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8A3B16;
  background: rgba(195,106,61,.15);
  border-radius: 999px;
  padding: 4px 10px;
}
.lp-card-hook{
  margin: 0 0 8px;
  font-size: 1.06rem;
  line-height: 1.35;
}
.lp-card-meta{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: .82rem;
}
.lp-card-text{
  position: relative;
  margin: 0;
  line-height: 1.6;
  overflow: hidden;
  max-height: calc(var(--lp-lignes, 2) * 1.6em);
}
.lp-card-text::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.7em;
  background: linear-gradient(rgba(255,249,241,0), var(--surface));
  pointer-events: none;
}
.lp-card-text.lp-complet::after{ display: none; }
/* LOT 11 - « Voir plus » sur une carte deplie tout le post : plus de limite
   de hauteur, donc plus de fondu. « Voir moins » revient a 2 lignes. */
.lp-card-text.lp-ouvert{ max-height: none; }
.lp-card-text.lp-ouvert::after{ display: none; }
.lp-card-text p{ margin: 0 0 .7em; }
.lp-card-text p:last-child{ margin-bottom: 0; }
.lp-card-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(42,42,42,.08);
}
.lp-more,
.lp-moins{
  font-family: inherit;
  font-size: .85rem;
  line-height: 1;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-2);
  cursor: pointer;
}
.lp-more:hover,
.lp-moins:hover{ border-color: var(--accent); }
.lp-more[hidden],
.lp-moins[hidden]{ display: none !important; }
.lp-link{
  margin-left: auto;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-2);
  text-decoration: none;
  white-space: nowrap;
}
.lp-link:hover{ text-decoration: underline; }
/* « Voir plus / Voir moins de posts » : la grille ne montre que 6 posts (les
   plus aimes) au chargement, le reste apparait 2 lignes a la fois. */
.lp-plus-zone{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}
.lp-plus-zone[hidden]{ display: none !important; }
.lp-plus-zone .btn{ font-family: inherit; font-size: .9rem; padding: 12px 22px; }
.lp-plus-zone .btn[hidden]{ display: none !important; }
/* LOT 11 - main.js place la barre dans la grille (colonne 1 / -1) sur la meme
   bande de lignes que la ligne d'apercu : les boutons flottent donc au-dessus
   des cartes translucides, qui apparaissent « derriere la ligne du bouton ». */
.lp-grid > .lp-plus-zone{
  grid-column: 1 / -1;
  align-self: center;
  position: relative;
  z-index: 2;
  margin-top: 0;
}
.lp-grid > .lp-plus-zone .btn-outline{
  background: rgba(242,239,217,.9);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* ===================================================
   LOT 12 - PAGE « CLIMATISATION » (climatisation.html)
   Recit au defilement : un panneau collant (carte de Paris, schema de
   clim reversible, arbre, planete) et une colonne d'etapes. Les couches
   de la carte sont pilotees par l'attribut data-fr-etat pose par
   assets/js/climatisation.js ; le visuel par data-fr-vue. Sans JavaScript,
   tout le texte reste lisible et la carte reste a l'etat de depart.
   =================================================== */
/* Classe de <body> : point d'ancrage des surcharges propres a la page. */
/* Ouverture « deepdive » : le premier ecran porte le titre, en tres grand, et
   l'indication de defilement. La carte n'apparait qu'apres la question
   d'ouverture, plus bas dans la page. */
body.page-climatisation .fr-hero{
  display: flex;
  align-items: center;
  min-height: 88vh;
  padding: 40px 0 26px;
}
body.page-climatisation .fr-hero .container-narrow{
  width: 100%;
  max-width: min(1080px, 100% - 32px);
}
.fr-titre-ouverture{
  margin: 0 auto 16px;
  max-width: 24ch;
  font-size: clamp(2.05rem, 5vw, 4.1rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.01em;
}
.fr-sous-titre{
  margin: 0 auto 20px;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-style: italic;
  color: var(--accent-2);
}
/* Indication de defilement : une phrase courte, une fleche qui respire et une
   icone de souris — le repere classique des recits qui se deroulent. */
.fr-defilement{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 26px 0 0;
  color: var(--accent-2);
  font-size: .88rem;
  font-weight: 600;
}
.fr-defilement-fleche{ width: 21px; height: 21px; animation: fr-defile 1.9s ease-in-out infinite; }
.fr-defilement-souris{ width: 15px; height: 23px; }
.fr-defilement .fr-molette{ animation: fr-molette 1.9s ease-in-out infinite; }
@keyframes fr-defile{
  0%, 100%{ transform: translateY(-2px); }
  50%{ transform: translateY(3px); }
}
@keyframes fr-molette{
  0%, 100%{ opacity: .25; }
  50%{ opacity: 1; }
}
.fr-recit{
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 44px;
  align-items: start;
  width: min(100% - 32px, 1240px);
  margin: 34px auto 10px;
}
.fr-panneau{ position: sticky; top: 96px; }
.fr-panneau-boite{
  position: relative;
  padding: 14px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.fr-vue{ display: none; }
[data-fr-panneau][data-fr-vue="carte"] .fr-vue-carte,
[data-fr-panneau][data-fr-vue="pac"] .fr-vue-pac,
[data-fr-panneau][data-fr-vue="arbre"] .fr-vue-arbre,
[data-fr-panneau][data-fr-vue="globe"] .fr-vue-globe,
[data-fr-panneau][data-fr-vue="protections"] .fr-vue-protections{ display: block; }
.fr-carte{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: #F3EEE3;
}
/* Cadre de la carte : les annotations HTML (titre, legende, compteur) se
   posent au-dessus du SVG sans le decaler. */
.fr-carte-boite{ position: relative; }
/* Nom du lieu, en clair au-dessus du plan. */
.fr-carte-titre{
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 20px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255,249,241,.85);
  border-radius: 999px;
}
/* Lit de la Seine : un seul trace continu. */
.fr-seine-fond{ stroke-linejoin: round; }
/* Lit a sec : le generateur teinte chaque segment du cours, du bleu (amont)
   au marron (aval de Paris). Il n'apparait que quand l'eau irrigue la ville ;
   l'eau bleue s'efface alors, pour ne pas teinter le lit par-dessous. */
.fr-seine-sec{ opacity: 0; transition: opacity .5s ease; }
.fr-carte .fr-seine-eau{ transition: opacity .5s ease; }
[data-fr-panneau][data-fr-etat="irrigation"] .fr-seine-sec,
[data-fr-panneau][data-fr-etat="ensemble"] .fr-seine-sec{ opacity: 1; }
[data-fr-panneau][data-fr-etat="irrigation"] .fr-carte .fr-seine-eau,
[data-fr-panneau][data-fr-etat="ensemble"] .fr-carte .fr-seine-eau{ opacity: 0; }
.fr-schema{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.fr-planete{
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 6px auto 0;
}
/* Clim reversible : un grand dessin par saison, celui de la saison en cours
   remplace l'autre (jamais les deux a la fois). */
.fr-schema-hiver{ display: none; }
[data-fr-panneau][data-fr-etat="pac-hiver"] .fr-schema-ete{ display: none; }
[data-fr-panneau][data-fr-etat="pac-hiver"] .fr-schema-hiver{ display: block; }
/* La planete tourne au fil du defilement : le script la fait defiler (et non
   tourner sur elle-meme), d'ou la transition lineaire ci-dessous. */
.fr-globe-terres{ transition: transform .12s linear; }
/* Couches de la carte : visibles selon l'etat du recit. */
[data-fr-panneau] [data-fr-couche]{ opacity: 0; transition: opacity .5s ease; }
[data-fr-panneau] [data-fr-couche="contour"],
[data-fr-panneau] [data-fr-couche="districts"],
[data-fr-panneau] [data-fr-couche="jardins"],
[data-fr-panneau] [data-fr-couche="bois"]{ opacity: 1; }
/* Contours des communes alentour : un simple contexte, toujours visible, mais
   volontairement efface — Paris, elle, garde son contour net. */
[data-fr-panneau] [data-fr-couche="communes"]{ opacity: .45; }
[data-fr-panneau][data-fr-etat="base"] [data-fr-couche="batiments"],
[data-fr-panneau][data-fr-etat="base"] [data-fr-couche="seine"],
[data-fr-panneau][data-fr-etat="parcs"] [data-fr-couche="batiments"],
[data-fr-panneau][data-fr-etat="parcs"] [data-fr-couche="parcs"],
[data-fr-panneau][data-fr-etat="parcs"] [data-fr-couche="seine"],
[data-fr-panneau][data-fr-etat="isolation"] [data-fr-couche="batiments"],
[data-fr-panneau][data-fr-etat="isolation"] [data-fr-couche="isolation"],
[data-fr-panneau][data-fr-etat="isolation"] [data-fr-couche="seine"],
[data-fr-panneau][data-fr-etat="irrigation"] [data-fr-couche="batiments"],
[data-fr-panneau][data-fr-etat="irrigation"] [data-fr-couche="parcs"],
[data-fr-panneau][data-fr-etat="irrigation"] [data-fr-couche="seine"],
[data-fr-panneau][data-fr-etat="irrigation"] [data-fr-couche="irrigation"],
[data-fr-panneau][data-fr-etat="ensemble"] [data-fr-couche="batiments"],
[data-fr-panneau][data-fr-etat="ensemble"] [data-fr-couche="parcs"],
[data-fr-panneau][data-fr-etat="ensemble"] [data-fr-couche="isolation"],
[data-fr-panneau][data-fr-etat="ensemble"] [data-fr-couche="seine"],
[data-fr-panneau][data-fr-etat="ensemble"] [data-fr-couche="irrigation"],
[data-fr-panneau][data-fr-etat="clim"] [data-fr-couche="batiments"],
[data-fr-panneau][data-fr-etat="clim"] [data-fr-couche="clim"],
[data-fr-panneau][data-fr-etat="clim"] [data-fr-couche="seine"],
[data-fr-panneau][data-fr-etat="clim"] [data-fr-couche="flocons"],
[data-fr-panneau][data-fr-etat="exterieur"] [data-fr-couche="batiments"],
[data-fr-panneau][data-fr-etat="exterieur"] [data-fr-couche="clim"],
[data-fr-panneau][data-fr-etat="exterieur"] [data-fr-couche="seine"],
[data-fr-panneau][data-fr-etat="exterieur"] [data-fr-couche="flocons"],
[data-fr-panneau][data-fr-etat="exterieur"] [data-fr-couche="exterieur"],
/* Etat « fontaines » : Paris tel quel, plus les points d'eau. */
[data-fr-panneau][data-fr-etat="fontaines"] [data-fr-couche="batiments"],
[data-fr-panneau][data-fr-etat="fontaines"] [data-fr-couche="seine"],
[data-fr-panneau][data-fr-etat="fontaines"] [data-fr-couche="fontaines"]{ opacity: 1; }
/* L'eau de la Seine, sous le lit a sec eventuel. */
.fr-carte .fr-seine-eau{ opacity: .95; }
/* Legende et compteur, sous le visuel. */
.fr-legende{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 12px 2px 0;
  font-size: .84rem;
  color: var(--muted);
}
.fr-legende-titre{
  color: var(--text);
  font-weight: 700;
}
/* Tableau de bord : une colonne pour l'intérieur, une pour l'extérieur. */
.fr-tableau{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 12px 2px 0;
  padding-top: 12px;
  border-top: 1px solid rgba(42,42,42,.08);
}
.fr-tableau-colonne{ padding-right: 14px; }
.fr-tableau-colonne + .fr-tableau-colonne{
  padding-left: 14px;
  border-left: 1px solid rgba(42,42,42,.08);
}
.fr-tableau-libelle{
  margin: 0 0 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* La duree du jour, precedee de sa reference barree (« 15 h ») et d'une petite
   fleche des que l'etape en fournit une : le panneau defile avec la page, la
   comparaison reste donc sous les yeux du lecteur. */
.fr-tableau-ligne{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
}
.fr-tableau-avant{
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-color: rgba(94,94,94,.5);
}
.fr-tableau-fleche{ color: var(--muted); font-size: 1rem; }
.fr-tableau-valeur{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-2);
  white-space: nowrap;
}
/* L'extérieur se rechauffe : il garde la couleur du soleil. */
.fr-tableau-colonne + .fr-tableau-colonne .fr-tableau-valeur{ color: #BE5433; }
.fr-tableau-sujet{
  margin: 4px 0 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--muted);
}
/* Colonne des etapes. */
/* Etapes 10 a 14 : le recit y parle de vegetation, de points d'eau, de cout et
   d'habitabilite, plus de durees. Le tableau de bord s'efface donc
   (climatisation.js recopie data-fr-tableau de l'etape sur le panneau). Sans
   JavaScript, il reste visible : aucune information n'est perdue. */
[data-fr-panneau][data-fr-tableau="masque"] .fr-tableau{ display: none; }
.fr-etapes{ display: grid; gap: 26px; padding-bottom: 60px; }
/* Questions de transition : elles ouvrent la carte suivante. Elles ne portent
   pas d'attribut data-fr-etape : la carte, elle, ne change pas. */
.fr-question{
  margin: 36px 0 -4px 2px;
  padding-left: 18px;
  border-left: 3px solid rgba(138,59,22,.28);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: #8A3B16;
}
/* La premiere carte s'aligne sur le panneau colle : elle arrive ainsi au
   centre du visuel, et la deuxieme carte reste sous la ligne de flottaison. */
@media (min-width: 861px){
  .fr-etapes{ padding-top: clamp(90px, 15vh, 180px); }
  /* Derniere carte : le defilement qui fait tourner la planete est porte par un
     espace reserve place apres elle (voir `.fr-course`). La carte, elle, garde
     la hauteur de son texte. */
  .fr-course{ height: 120vh; }
}
.fr-etape{
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(28,20,14,.06);
  scroll-margin-top: 100px;
  transition: opacity .35s ease, box-shadow .35s ease;
}
/* Atténuation des etapes non actives : uniquement quand le script tourne
   (classe posee par climatisation.js), pour que la page reste lisible sans JS. */
.fr-recit.fr-recit-anime .fr-etape{ opacity: .55; }
.fr-recit.fr-recit-anime .fr-etape-active{ opacity: 1; box-shadow: var(--shadow); }
.fr-etape-num{
  margin: 0 0 6px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A3B16;
}
.fr-etape-titre{
  margin: 0 0 12px;
  font-size: 1.32rem;
  line-height: 1.3;
}
.fr-mesure{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 0 0 10px;
}
.fr-mesure-avant{
  color: var(--muted);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  text-decoration: line-through;
  text-decoration-color: rgba(94,94,94,.5);
}
.fr-mesure-fleche{ color: var(--muted); }
.fr-mesure-apres{
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--accent-2);
}
.fr-mesure-sujet{ color: var(--muted); font-size: .9rem; }
.fr-mesure-note{
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: .9rem;
}
.fr-etape p:last-child{ margin-bottom: 0; }
.fr-liste{ margin: 0; padding-left: 20px; }
.fr-liste li{ margin-bottom: 10px; }
.fr-liste li:last-child{ margin-bottom: 0; }
.fr-etape-finale .fr-etape-texte{
  font-size: 1.06rem;
  line-height: 1.65;
}
.fr-sources .fr-liste-sources{ margin-top: 10px; }
.fr-note{
  margin: 22px 0 0;
  color: var(--muted);
  font-size: .86rem;
}
.fr-bottom{ background: rgba(255,249,241,.6); }
@media (max-width: 980px){
  .fr-recit{ gap: 30px; }
}
@media (max-width: 860px){
  /* Une seule colonne : en grille, le panneau et les etapes tombent dans deux
     rangees differentes, et un element collant ne peut pas sortir de sa rangee
     (la carte disparaissait donc apres le premier ecran). En bloc, il colle
     jusqu'a la fin du recit : on voit d'abord la carte, puis la question et sa
     reponse qui defilent dessous. */
  .fr-recit{ display: block; margin-top: 22px; }
  .fr-panneau{ position: sticky; top: 60px; z-index: 5; margin-bottom: 18px; }
  .fr-panneau-boite{ padding: 10px 10px 12px; }
  /* Carte de Paris rognee de 10 % en haut et en bas (viewBox 0 82 1000 656) :
     la fenetre et la hauteur du dessin suivent, pour gagner 20 % de hauteur
     dans le panneau sans rien perdre de la ville ni des bois. */
  .fr-vue-carte .fr-carte,
  .fr-vue-pac .fr-schema,
  .fr-vue-arbre .fr-schema,
  .fr-vue-protections .fr-schema{ height: min(17.4svh, 180px); width: auto; margin: 0 auto; }
  /* Nom du lieu : meme corps que le texte des cartes (1rem) et non plus un
     corps de titre de 24 px, qui ecrasait la carte. Boite ajustee au corps. */
  .fr-carte-titre{ font-size: 1rem; padding: 2px 10px; }
  .fr-legende{ margin-top: 6px; font-size: .78rem; }
  .fr-tableau{ margin-top: 6px; padding-top: 6px; }
  .fr-titre-ouverture{ max-width: 100%; }
  .fr-question{ margin-top: 26px; }
  /* `svh` : la barre d'adresse des navigateurs mobiles change la hauteur du
     viewport, `vh` fait alors sauter le premier ecran quand elle se replie.
     Les navigateurs qui ignorent l'unite gardent le min-height du dessus. */
  body.page-climatisation .fr-hero{ min-height: 88svh; }
  /* Plus de grand blanc apres la derniere carte : la planete finit de tourner
     pendant la carte elle-meme (repli deja prevu par climatisation.js), et
     « Envie d'en parler » enchaine immediatement. */
  .fr-course{ height: 0; }
  .fr-planete{ width: min(100%, 260px); }
  .fr-etapes{ padding-bottom: 24px; }
  /* Les phrases du tableau de bord sont reprises dans chaque carte : sur
     telephone, seuls les deux chiffres restent, pour laisser la place au texte. */
  .fr-tableau-sujet{ display: none; }
  /* 11,8 px pour « etape 1 » sur telephone, c'est trop petit : on remonte d'un
     cran (12,5 px) sans toucher au rendu de bureau. */
  .fr-etape-num{ font-size: .78rem; }
  .fr-etape{ padding: 20px 18px; }
  .fr-mesure-avant,
  .fr-mesure-apres{ font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce){
  .fr-defilement-fleche,
  .fr-defilement .fr-molette{ animation: none; }
  [data-fr-panneau] [data-fr-couche],
  .fr-carte .fr-seine-eau,
  .fr-seine-sec,
  .fr-etape,
  .fr-globe-terres{ transition: none; }
}

/* La grille des posts LinkedIn repasse a 2 colonnes sous 980 px. */
@media (max-width: 980px){
  .lp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ===================================================
   LOT 12 - ACCUEIL : bloc « climatisation dans les medias »
   Renvoi vers la page Climatisation (climatisation.html). Les vignettes sont des
   captures des passages medias (hauteur commune, largeurs proportionnelles).
   =================================================== */
.home-clim{ padding: 56px 0; }
.home-clim-inner{
  padding: 34px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.home-clim-badge{
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A3B16;
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 6px 12px;
}
.home-clim-citation{
  max-width: 780px;
  margin: 16px auto 18px;
  font-size: 1.24rem;
  line-height: 1.5;
}
.home-clim-medias{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 22px;
  justify-content: center;
  margin: 0 0 20px;
}
/* Vignettes des medias : hauteur commune, largeurs proportionnelles pour ne
   pas deformer des images aux ratios tres differents (3,07 / 1,83 / 0,91).
   Ordre voulu : France Inter a gauche, la tribune du Monde au centre (image en
   portrait, la piece maitresse du plaidoyer), BFM a droite. Pas de legende
   sous les captures : les trois images forment une bande. */
.home-clim-media-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.home-clim-media-card img{
  display: block;
  height: 132px;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(28,20,14,.07);
}
/* Les trois captures tiennent sur une ligne : il faut un peu plus que les
   760 px du conteneur courant (3,07 + 1,83 + 0,91 fois 132 px, plus les
   ecarts). Le texte, lui, garde ses propres max-width. */
@media (min-width: 1080px){
  .home-clim .container-narrow{ max-width: 1060px; }
}
.home-clim-texte{
  max-width: 700px;
  margin: 0 auto 22px;
  color: var(--muted);
}
@media (max-width: 640px){
  .home-clim-inner{ padding: 26px 20px; }
  .home-clim-citation{ font-size: 1.08rem; }
  /* Les trois vignettes restent sur une seule ligne, dans l'ordre France
     Inter / tribune du Monde / BFM. Les colonnes suivent les proportions des
     images (1,83 / 0,91 / 3,07) : chacune remplit la sienne, donc les hauteurs
     restent egales et rien n'est deforme ni rogne. */
  .home-clim-medias{
    display: grid;
    grid-template-columns: 1.83fr .91fr 3.07fr;
    align-items: center;
    gap: 10px;
  }
  .home-clim-media-card img{ height: auto; width: 100%; }
}
@media (max-width: 640px){
  .lp-grid{ grid-template-columns: 1fr; gap: 18px; }
  .lp-card-hook{ font-size: 1rem; }
  .lp-plus-zone{ flex-direction: column; align-items: stretch; }
}


/* --- Formulaire de contact : envoi direct (LOT 31) -------------------------
   Le formulaire poste vers l'API du sous-domaine api.arthurdelassus.com : plus
   de mailto:, le visiteur reste sur la page. Ces regles servent au champ piege,
   aux messages de retour et aux champs en erreur. */
.form-piege{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"]{
  border-color: #B3261E;
  box-shadow: 0 0 0 3px rgba(179,38,30,.12);
}
.help.aide-ok{ color: #1C7C4A; font-weight: 600; }
.help.aide-souci{ color: #B3261E; font-weight: 600; }
.form button[type="submit"][disabled]{ opacity: .6; cursor: progress; }
/* Le bouton de secours (ouvrir le logiciel de messagerie) reste cache tant que
   l'envoi automatique fonctionne ; .btn impose son propre display, d'ou la
   regle explicite, comme pour les autres boutons masques du site. */
.form .btn[hidden]{ display: none !important; }


/* --- Lien de contact et fenetre de contact (LOT 33) ------------------------
   Le contact ne figure plus dans le menu du haut : il vit dans le pied de page
   de chaque page (a droite) et dans une fenetre qui s'ouvre par-dessus la page
   en cours, sans changer d'adresse ni interrompre la lecture. */
.footer-contact a{
  color: var(--accent, #b5651d);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(181,101,29,.35);
  padding-bottom: 1px;
}
.footer-contact a:hover{ border-bottom-color: var(--accent, #b5651d); }
/* Deux liens cohabitent desormais dans le pied de page (« Confidentialité »
   puis « Me contacter », LOT 32) : un peu d'air entre les deux, et un retour a
   la ligne propre sur les ecrans etroits. */
.footer-contact{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: flex-end;
}
/* Sur telephone, la mention de copyright reste a gauche et le contact passe a
   droite ; a partir de 860 px, les deux se font face sur la meme ligne. */
.footer-inner{ align-items: flex-start; }
.footer-contact{ align-self: flex-end; }
@media (min-width: 860px){
  .footer-inner{ align-items: center; }
  .footer-contact{ align-self: auto; }
}

.modale[hidden]{ display: none; }
.modale{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.modale-fond{
  position: fixed;
  inset: 0;
  background: rgba(30,26,20,.55);
  backdrop-filter: blur(2px);
}
.modale-boite{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  margin: auto;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(30,26,20,.28);
  padding: 24px 22px 22px;
}
.modale-boite h2{ margin: 0 0 6px; font-size: 1.5rem; }
.modale-boite .lede{ margin: 0 0 14px; }
.modale-fermer{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,249,241,.9);
  cursor: pointer;
}
.modale-fermer:hover{ background: #F2EFD9; }
.modale-fermer svg{ width: 18px; height: 18px; }
body.modale-ouverte{ overflow: hidden; }
@media (max-width: 640px){
  .modale{ padding: 0; }
  .modale-boite{ border-radius: 0; min-height: 100%; padding: 20px 16px 24px; }
  .modale-boite .hero-actions{ flex-direction: column; align-items: stretch; }
}

/* --- Fenetre de rendez-vous (LOT 32) ------------------------------------
   La disposition des outils de reservation, dans les couleurs du site :
   presentation a gauche, calendrier mensuel au centre, creneaux libres a
   droite, puis les coordonnees a droite du recapitulatif. */
.modale-large{ overflow-y: auto; }
.modale-large .modale-boite{ max-width: 1060px; }
.rdv{
  display: grid;
  grid-template-columns: 232px minmax(272px, 1fr) minmax(228px, 288px);
  gap: 24px;
  align-items: start;
  text-align: left;
}
.rdv-portrait{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: 0 8px 20px rgba(28,20,14,.14);
}
.rdv-nom{ margin: 10px 0 2px; font-size: 1.15rem; }
.rdv-profil{ min-width: 0; }
.rdv-profil{ min-width: 0; }
.rdv [hidden]{ display: none !important; }
.rdv-role{ margin: 0 0 18px; color: var(--muted); font-size: .95rem; }
.rdv-sujet{ margin: 0 0 8px; font-size: 1.05rem; }
.rdv-texte{ margin: 0; color: #3B3B3B; font-size: .95rem; line-height: 1.55; }
.rdv-reperes{
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
  font-size: .9rem;
  color: #3B3B3B;
}
.rdv-reperes li{ display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.rdv-reperes svg{ width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.rdv-agenda{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: #FFFFFF;
}
.rdv-mois{ display: flex; align-items: center; justify-content: space-between; }
.rdv-mois h3{ margin: 0; font-size: 1rem; }
.rdv-mois-nav{ display: flex; gap: 4px; }
.rdv-mois-nav button{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--accent-2);
}
.rdv-mois-nav button:hover:not([disabled]){ border-color: rgba(195,106,61,.45); }
.rdv-mois-nav button[disabled]{ opacity: .35; cursor: default; }
/* L'attente pendant la lecture des creneaux : le bloc occupe la grille du
   calendrier, pour que le visiteur voie que quelque chose se passe. */
.rdv-attente{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 126px;
  padding: 18px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: .86rem;
  text-align: center;
}
.rdv-attente-molette{
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  animation: fr-molette 1.9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .rdv-attente-molette{ animation: none; }
}
.rdv-liste-vide{
  margin: 0;
  padding: 10px 4px;
  color: var(--muted);
  font-size: .84rem;
}
.rdv-semaine, .rdv-grille{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.rdv-semaine{
  margin: 12px 0 6px;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.rdv-case, .rdv-case-vide{
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: .9rem;
}
.rdv-case{
  font: inherit;
  cursor: pointer;
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-weight: 600;
}
.rdv-case:hover{ background: rgba(195,106,61,.22); }
.rdv-case[aria-pressed="true"]{ background: var(--accent); color: #FFFFFF; }
.rdv-case-vide{ color: #C4BDB3; }
.rdv-fuseau{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--muted);
}
.rdv-fuseau strong{
  display: block;
  margin-top: 2px;
  color: #3B3B3B;
  font-weight: 600;
}
.rdv-panneau-titre{ margin: 0 0 10px; font-size: 1rem; }
.rdv-liste{
  display: grid;
  gap: 8px;
  max-height: 344px;
  overflow-y: auto;
  padding-right: 2px;
}
.rdv-creneau{
  font: inherit;
  cursor: pointer;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: #3B3B3B;
  text-align: center;
}
.rdv-creneau:hover{ border-color: rgba(195,106,61,.45); }
.rdv-creneau[aria-pressed="true"]{
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent-2);
  font-weight: 600;
}
.rdv-continuer{ width: 100%; }
.rdv[data-etape="formulaire"] [data-rdv-cote-creneaux],
.rdv[data-etape="confirme"] [data-rdv-cote-creneaux],
.rdv[data-etape="formulaire"] .rdv-agenda,
.rdv[data-etape="confirme"] .rdv-agenda{ display: none; }
.rdv[data-etape="formulaire"] .rdv-creneaux,
.rdv[data-etape="confirme"] .rdv-creneaux{ grid-column: 2 / 4; }
.rdv-formulaire{ display: grid; gap: 14px; }
.rdv-form-titre{ margin: 0; text-align: center; font-size: 1.2rem; }
.rdv-champs{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rdv-champs > div, .rdv-note{ display: grid; gap: 6px; }
.rdv-champs label, .rdv-note label{ font-size: .9rem; color: var(--muted); }
.rdv-champs input, .rdv-note textarea{
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #FFFFFF;
  color: #3B3B3B;
}
.rdv-champs input[aria-invalid="true"], .rdv-note textarea[aria-invalid="true"]{
  border-color: #B3261E;
}
.rdv-large{ grid-column: 1 / -1; }
.rdv-ajout{
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--accent-2);
  cursor: pointer;
}
.rdv-ajout:hover{ text-decoration: underline; }
/* LOT 37 : les reglages du rendez-vous. Des boutons radio habilles en
   pastilles : un seul clic, toutes les reponses visibles, et le clavier comme
   les lecteurs d'ecran s'y retrouvent, puisque ce sont de vrais boutons radio.
   Les blocs propres au type de rendez-vous se cachent avec l'attribut hidden,
   qu'il faut donc reprendre ici, sinon l'affichage en grille l'emporterait. */
.rdv-reglages{
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.rdv-reglages-titre{ padding: 0 6px; font-size: 1rem; font-weight: 600; }
.rdv-reglages-aide{ margin: 0; font-size: .88rem; color: var(--muted); }
.rdv-reglages-type{ display: grid; gap: 14px; }
.rdv-reglages-type[hidden]{ display: none; }
.rdv-puces{ display: flex; flex-wrap: wrap; gap: 8px; }
.rdv-puces-titre{ flex: 0 0 100%; margin: 0 0 2px; font-size: .9rem; color: var(--muted); }
.rdv-puce{ position: relative; }
.rdv-puce input{ position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.rdv-puce span{
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: .92rem;
  color: var(--text);
  cursor: pointer;
}
.rdv-puce:hover span{ border-color: var(--accent); }
.rdv-puce input:checked + span{
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #FFFFFF;
  font-weight: 600;
}
.rdv-puce input:focus-visible + span{ outline: 2px solid var(--accent-2); outline-offset: 2px; }
.rdv-note textarea{ min-height: 96px; }
.rdv-compteur{ justify-self: end; font-size: .8rem; color: var(--muted); }
.rdv-accord{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: .9rem;
  color: #3B3B3B;
}
.rdv-accord input{
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}
.rdv-accord input[aria-invalid="true"]{ outline: 2px solid #B3261E; outline-offset: 2px; }
.rdv-formulaire .form-piege{ position: absolute; left: -9999px; }
.rdv-actions{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rdv-mention{ margin: 18px 0 0; }
.rdv-confirme{
  padding: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(28,124,74,.35);
  background: rgba(28,124,74,.06);
}
.rdv-confirme h3{ margin: 0 0 8px; font-size: 1.15rem; }
.rdv-confirme p{ margin: 0 0 10px; }
.rdv-confirme-quand{ font-size: 1.05rem; font-weight: 600; color: #1F1F1F; }
.rdv-confirme a{ color: var(--accent); font-weight: 600; }
@media (max-width: 900px){
  .rdv{ grid-template-columns: 1fr; gap: 18px; }
  .rdv[data-etape="formulaire"] .rdv-creneaux,
  .rdv[data-etape="confirme"] .rdv-creneaux{ grid-column: auto; }
  .rdv-champs{ grid-template-columns: 1fr; }
  .rdv-liste{ max-height: none; }
  .rdv-reperes{ margin-top: 14px; }
}

/* ===================================================
   LOT 34 — Refinements du front du site
   (ajouts uniquement : aucune regle existante modifiee)
   =================================================== */

/* --- 1. Defilement des ancres, generalise ---
   La barre de navigation est fixe : sans marge de defilement, une ancre
   place le titre de la section sous l'en-tete. La regle ne visait que les
   ancres de la page Ressources. Elle s'applique desormais a toute cible
   d'ancre : #cours, #conferences, #horizons-decarbones, #frontieres-planetaires. */
[id]{ scroll-margin-top: 96px; }

/* --- 2. « Deux ateliers crees » : logos centres sous le chiffre --- */
.home-stat-logos{ justify-content: center; }

/* --- 3. Bande de logos a deux rangees defilantes (services.html) ---
   Sans JavaScript, chaque rangee est une simple liste de logos qui passe a
   la ligne : rien ne bouge et rien n'est coupe. Des que main.js a ajoute la
   copie de la liste, la rangee defile en continu ; la translation de -50 %
   vaut exactement la largeur d'une liste, la boucle est donc invisible. */
.defilement-logos{
  position: relative;
  overflow: hidden;
  margin: 0 0 1.2rem;
  padding: .9rem 0;
  background: rgba(255,249,241,.9);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* Les bords s'estompent : les logos entrent et sortent sans coupure nette. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.defilement-rangee{ display: flex; }
.defilement-groupe{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* La marge interieure de chaque cote vaut exactement l'espace entre deux
     logos : la jonction entre la liste et sa copie reste reguliere. */
  gap: 1.4rem 2.6rem;
  padding: 0 1.3rem;
}
.defilement-groupe img{
  max-height: 52px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
/* Rangee prete : la copie est en place, le defilement peut commencer. */
.defilement-rangee-prete{
  width: max-content;
  /* LOT 39 : 70 s -> 35 s, soit deux fois plus vite. */
  animation: defilement-logos 35s linear infinite;
}
.defilement-rangee-prete .defilement-groupe{
  flex-wrap: nowrap;
  justify-content: flex-start;
}
/* La seconde rangee part dans l'autre sens, plus lentement : les deux
   mouvements ne se synchronisent pas et l'oeil ne percoit pas la boucle. */
.defilement-rangee-inverse.defilement-rangee-prete{
  animation-direction: reverse;
  /* LOT 39 : 88 s -> 44 s, soit deux fois plus vite. */
  animation-duration: 44s;
}
@keyframes defilement-logos{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (max-width: 640px){
  .defilement-groupe{ gap: 1rem 1.8rem; padding: 0 .9rem; }
  .defilement-groupe img{ max-height: 34px; max-width: 150px; }
}
/* Mouvement reduit a la demande du systeme : les listes reviennent a la
   ligne, sans copie, donc sans doublon a l'ecran. */
@media (prefers-reduced-motion: reduce){
  .defilement-rangee-prete{ animation: none; width: auto; }
  .defilement-rangee-prete .defilement-groupe{
    flex-wrap: wrap;
    justify-content: center;
  }
  .defilement-copie{ display: none; }
}

/* --- 4. Fenetre d'inscription (livre a paraitre, note IFRI) ---
   Meme habillage que la fenetre de contact (.modale) ; seuls le bloc de
   succes et le bouton de telechargement qui l'accompagne sont nouveaux. */
.inscription-suite{
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(28,124,74,.35);
  border-radius: var(--radius-sm);
  background: rgba(28,124,74,.07);
}
.inscription-suite[hidden]{ display: none; }
.inscription-suite p{ margin: 0 0 10px; }
.inscription-suite .btn{ width: 100%; }
/* Un bouton masque doit le rester : .btn impose un display qui l'emporterait
   sur le display:none du navigateur pour l'attribut hidden. */
.inscription-suite .btn[hidden]{ display: none !important; }

/* --- 5. Accueil : les logos defilants remplacent la liste fixe (LOT 35) ---
   « Ils m'ont fait confiance » disparait, et les deux rangees defilantes
   prennent sa place avec tous les logos du site. Le bandeau (.home-trust) a
   deja son fond clair et ses bordures : la bande y perd sa boite interieure,
   qui dessinerait un cadre dans un cadre. Sans JavaScript, les deux listes
   restent lisibles, l'une sous l'autre.

   A noter : .home-trust-title et .home-trust-logos, plus haut dans ce
   fichier, ne servent plus a rien — aucun HTML ne porte ces classes. Ils sont
   laisses tels quels, comme le reste du fichier (ajouts uniquement), et
   peuvent etre retires sans risque le jour ou la feuille sera nettoyee. */
.home-logos-defilants{
  display: grid;
  gap: .5rem;
  margin-bottom: 34px;
}
.home-logos-defilants .defilement-logos{
  background: none;
  border: 0;
  border-radius: 0;
  padding: .3rem 0;
  margin: 0;
}

/* ===================================================
   LOT 38 / LOT 39 — Troisieme bandeau de logos (les medias)
   et section « Mes passages media » (ressources.html)
   LOT 39 : les trois bandeaux du site vont deux fois plus vite
   (70 -> 35 s, 88 -> 44 s, 82 -> 41 s), l'intitule de la troisieme
   rangee disparait, et les passages media passent sur deux files.
   =================================================== */

/* --- 1. Accueil : la troisieme rangee, celle des medias ---
   Meme mecanique que les deux precedentes (main.js duplique la liste pour que
   le defilement boucle sans trou). Elle glisse vers la gauche, comme la
   premiere, mais plus lentement : les trois mouvements restent distincts. */
/* LOT 39 : 82 s -> 41 s. La troisieme rangee glisse encore moins vite que la
   premiere (35 s) et que la seconde (44 s) : les trois mouvements restent
   distincts, mais tous vont deux fois plus vite qu'au LOT 38. */
.defilement-rangee-lente.defilement-rangee-prete{ animation-duration: 41s; }

/* LOT 39 : l'intitule « Ils m'ont invité à parler » est retire de l'accueil, a
   la demande du proprietaire. La regle .home-medias-titre qui l'habillait part
   avec lui, pour ne pas laisser de classe orpheline dans la feuille. */

/* --- 2. Ressources : la frise des medias, puis une carte par passage --- */
.media-frise{ margin: 0 0 1.8rem; }
.media-frise .defilement-logos{ margin-bottom: 0; }

/* Le logo de la chaine, a droite de la carte. Les proportions varient
   beaucoup (BFM TV est carre, L'Express est un bandeau) : la boite les
   contient, et object-fit les y inscrit sans les deformer. */
.media-logo img{
  max-height: 92px;
  max-width: 168px;
}

/* La citation courte qui resume le passage : un filet creme la separe du
   titre, et l'italique rappelle qu'il s'agit de propos tenus. */
.media-quote{
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  font-style: italic;
}

/* --- 3. LOT 39 : les passages media sur deux files verticales ---
   Deux colonnes de cartes empilees, et non une grille. Dans une grille, la
   carte courte d'une rangee laisse un blanc sous elle jusqu'a la hauteur de sa
   voisine ; ici chaque file est une pile, l'ecart vertical est exactement le
   gap, et une carte haute n'impose rien a la carte d'a cote. La repartition
   (une carte sur deux) est faite par main.js, qui bascule sur une seule file
   sous 861 px - le seuil de .prod-two-col. Sans JavaScript, tout reste dans une
   file, dans l'ordre du document, et les douze cartes restent lisibles. */
.media-colonnes{
  display: grid;
  gap: 22px;
  align-items: start;
}
.media-colonnes.media-deux-colonnes{
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.media-colonne{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Carte masquee par la limite de passages affiches (« Voir plus de passages
   media ») : meme regle que .lp-card.lp-planque cote posts LinkedIn. */
.media-carte.media-planque{ display: none !important; }

/* La barre de boutons, sous les deux files : le bouton principal ouvre les
   passages suivants, le bouton de retour les referme. Elle est masquee dans le
   HTML et revelee par main.js, donc invisible sans JavaScript. */
.media-plus-zone{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 30px 0 0;
}
.media-plus-zone[hidden]{ display: none !important; }
.media-plus-zone .btn{ font-family: inherit; font-size: .9rem; padding: 12px 22px; }
.media-plus-zone .btn[hidden]{ display: none !important; }


/* --- 6. Prendre rendez-vous : le bouton en tete de page (LOT 36) ---
   Le bouton garde l'habillage .btn ; seule sa place change. Il ouvre l'agenda
   avant l'explication, et la marge du bas le separe de la phrase qui suit. */
.article-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 22px;
}


/* --- 7. Page du livre (LOT 41) ---
   livre.html : couverture, auteurs et inscription a la sortie. Tout est prefixe
   « livre- » pour ne jamais toucher aux regles des autres pages. */
.livre-hero{ padding-top: 24px; }
#sujets{ scroll-margin-top: 96px; }
.livre-retour{
  margin: 0 0 20px;
  font-size: .95rem;
}
.livre-retour a{
  color: var(--muted);
  text-decoration: none;
}
.livre-retour a:hover{ color: var(--accent); text-decoration: underline; }
.livre-hero-inner{
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 48px;
  align-items: center;
}
.livre-cover img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 22px 50px rgba(28,20,14,.30);
}
.livre-hero-text h1{
  margin: 0 0 10px;
  font-size: clamp(32px, 4.4vw, 50px);
}
.livre-subtitle{
  margin: 0 0 10px;
  color: var(--accent);
  font-weight: 600;
  font-size: 1.05rem;
}
.livre-authors{
  margin: 0 0 16px;
  color: var(--muted);
}
.livre-note{
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .9rem;
}
.livre-chapitres-intro{
  margin: 1.4rem 0 .6rem;
  font-weight: 600;
}
.livre-chapitres{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.livre-chapitres li{
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(195,106,61,.4);
  background: var(--accent-soft);
  font-size: .98rem;
}
.livre-auteurs-grille,
.livre-liens{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}
.livre-liens{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.livre-auteurs .card,
.livre-liens .card{ padding: 22px; }
.livre-auteurs .card p + p{ margin-top: 10px; }
.livre-lien{
  display: block;
  color: inherit;
  text-decoration: none;
}
.livre-lien:hover{ border-color: var(--accent); }
.livre-lien .card-title{ color: var(--accent); }
.livre-precedent-carte{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: center;
}
.livre-precedent-carte img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(28,20,14,.22);
}
.livre-precedent-carte h3{ margin-top: 0; }
.livre-precedent-carte p{ margin: 0 0 8px; }
.livre-final .text-lead{ margin-bottom: 0; }
.livre-final-actions{ justify-content: center; }
@media (max-width: 860px){
  .livre-hero-inner{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 28px;
  }
  .livre-cover{ width: min(240px, 70%); }
  .livre-hero-text{ width: 100%; }
  .livre-liens{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .livre-auteurs-grille{ grid-template-columns: 1fr; }
  .livre-precedent-carte{ grid-template-columns: 90px 1fr; gap: 18px; }
}