/* ===== Gabarit « Vos besoins » — les quatre landings sectorielles =====
   Motifs repris du vocabulaire courant du site (accueil.css), déscopés de
   #pourquoi et de la home. Doublon assumé le 09/09 : la promotion vers
   theme.css est le geste juste, mais elle ferait porter un risque de
   régression à la home, fraîchement validée par le client. À reprendre
   quand la home sera figée — cf. la spec du 09/09.

   ⚠️ --terra et --blanc n'existent QUE dans accueil.css (:root, l.9-10).
   Ici on écrit var(--camel) et #fff. Une règle recopiée telle quelle avec
   var(--terra) rendrait un fond transparent, pas camel. */

/* ---- rythme vertical et mesure, communs à toute la page ----
   Une seule mesure du haut en bas : .w porte la marge de page, .sec le
   rythme vertical. C'est ce que fait déjà l'accueil (.w/.sec) — le gabarit
   s'y range au lieu de porter six max-width différentes. */
.w{padding:0 var(--pad)}
.sec{padding-block:clamp(96px,12vw,190px)}
.sec.tight{padding-block:clamp(72px,8vw,124px)}

/* ---- en-tête de section ----
   Le motif .hd de l'accueil, sous un nom propre au gabarit pour ne pas
   entrer en concurrence avec .hd si accueil.css venait à être chargé sur
   la même page. .sec-hd.rev bascule le bloc à droite (alternance). */
.sec-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,5vw,80px);align-items:end;padding-bottom:clamp(42px,5vw,76px)}
.sec-hd h2{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5.4vw,76px);
  line-height:1.02;letter-spacing:-.02em;margin-top:14px}
.sec-hd .say{font-size:clamp(16px,1.3vw,19.5px);color:#3F444B;max-width:48ch;margin:0}
/* Sort de la grille, comme .hd.rev sur l'accueil (accueil.css l.274) : en
   restant en grille, le bloc était poussé dans la colonne GAUCHE et le
   text-align:right le faisait flotter au milieu de la page. */
.sec-hd.rev{display:block;max-width:min(980px,100%);margin-left:auto;margin-right:0;text-align:right}
/* h2 et .say n'ont plus besoin de leur propre text-align:right : .sec-hd.rev
   le porte déjà et il est hérité (constat 4, résidu du passage en
   display:block, commit 8ca4bd2). */
.sec-hd.rev .say{margin:clamp(22px,2.6vw,34px) 0 0 auto;max-width:68ch}
/* Variante alignée à gauche (« Nos réalisations ») : « La preuve » reste à droite (alternance). */
.sec-hd.rev.gauche{margin-left:0;margin-right:auto;text-align:left}
.sec-hd.rev.gauche .say{margin:clamp(22px,2.6vw,34px) auto 0 0}
@media(max-width:900px){
  .sec-hd{grid-template-columns:1fr}
  .sec-hd.rev{max-width:none}
  .sec-hd.rev .sec-hd-lead,.sec-hd.rev h2,.sec-hd.rev .say{
    text-align:left}
}

/* ---- le constat : photo pleine largeur, citation posée dessus ----
   .slab de l'accueil, SANS .to-camel : le fondu vers le camel suppose que
   la section suivante soit camel (c'est le cas sur la home). Ici la suite
   est la frise .pq, cartes camel sur fond blanc — le dégradé finirait en
   aplat camel contre une section blanche, soit l'arête franche qu'il
   devait effacer. L'accent camel arrive juste après, par les cartes. */
.slab{position:relative;margin:0;overflow:hidden}
.slab::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.72) 10%,rgba(255,255,255,.28) 22%,transparent 36%,transparent 64%,rgba(255,255,255,.28) 78%,rgba(255,255,255,.72) 90%,#fff 100%)}
.slab img{width:100%;height:clamp(480px,82vh,900px);object-fit:cover;object-position:center 30%}
.slab figcaption{position:absolute;right:var(--pad);bottom:clamp(48px,7vw,96px);
  z-index:1;
  color:#fff;text-shadow:0 1px 20px rgba(0,0,0,.35);max-width:min(60ch,72%);
  display:block;text-align:right;
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 42%,rgba(38,38,42,.025));
  backdrop-filter:blur(26px) saturate(175%);-webkit-backdrop-filter:blur(26px) saturate(175%);
  border:1px solid rgba(255,255,255,.24);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -28px 56px rgba(38,38,42,.08),0 30px 80px rgba(38,38,42,.24);
  padding:clamp(20px,2.6vw,32px) clamp(22px,3vw,36px)}
.slab .dit{font-family:var(--serif);font-size:clamp(19px,2.1vw,32px);font-weight:600;
  line-height:1.24;letter-spacing:-.015em;margin:0;display:block}
/* Le zoom se relâche à la révélation, comme sur l'accueil. */
.slab img{transform:scale(1.06);transition:transform 1100ms var(--out)}
.slab.in img{transform:none}
@media(prefers-reduced-motion:reduce){.slab img{transform:none;transition:none}}

/* ---- ce qui est en jeu : frise de cartes camel ----
   .pq-track/.pq-card de l'accueil, déscopées de #pourquoi. Snap-scroll
   natif, sans auto-défilement : un contenu à lire ne doit pas courir.
   Trois cartes ici (l'accueil en a quatre) : la base est donc /3 et non /4.
   L'opacity:0 n'est appliquée que sous .anim, classe posée par reveal.js —
   sans JavaScript, les cartes s'affichent telles quelles. */
.pq-track{--gap:clamp(20px,2.4vw,28px);--pq-ease:cubic-bezier(.16,1,.3,1);
  display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:8px 0 4px}
.pq-track::-webkit-scrollbar{display:none}
/* Barre de progression : même mécanisme que .obj-progress (accueil.css). */
.pq-progress{height:3px;background:color-mix(in srgb,var(--camel) 25%,transparent);
  border-radius:2px;margin-top:18px;overflow:hidden}
.pq-progress span{display:block;height:100%;width:25%;background:var(--camel);
  border-radius:2px;transition:width .25s ease}
.pq-card{--i:0;position:relative;flex:0 0 calc((100% - 2*var(--gap))/3);
  scroll-snap-align:start;background:var(--camel);border-radius:16px;
  padding:clamp(28px,3.2vw,46px);min-height:280px}
.pq-card:nth-child(2){--i:1}
.pq-card:nth-child(3){--i:2}
.pq-ic{position:absolute;top:clamp(24px,2.8vw,38px);right:clamp(24px,2.8vw,38px);
  width:clamp(44px,4.4vw,58px);height:clamp(44px,4.4vw,58px);
  fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pq-card .n{display:block;overflow:hidden;font-family:var(--serif);font-weight:700;
  font-size:clamp(36px,3.8vw,52px);line-height:1.15;color:#fff;margin-bottom:24px;
  font-variant-numeric:tabular-nums}
.pq-card .n>span{display:block}
.pq-card h3{font-family:var(--serif);font-size:clamp(23px,2.2vw,30px);margin:0 0 16px;
  color:#fff;line-height:1.15}
.pq-card p{margin:0;color:#fff;font-size:16px;line-height:1.65;max-width:none}
.pq-track.anim .pq-card{opacity:0;transform:translateY(56px) scale(.92)}
.pq-track.anim.in .pq-card{opacity:1;transform:none;will-change:transform,opacity;
  animation:pq-card-in 1600ms var(--pq-ease) calc(var(--i) * 130ms) both}
.pq-track.anim.in .pq-card .pq-ic{will-change:transform,opacity;
  animation:pq-icon-in 1200ms var(--pq-ease) calc(var(--i) * 130ms) both}
.pq-track.anim.in .pq-card .n>span{will-change:transform,opacity;
  animation:pq-number-in 1100ms var(--pq-ease) calc(120ms + var(--i) * 130ms) both}
@keyframes pq-card-in{from{opacity:0;transform:translateY(56px) scale(.92)}
  to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pq-icon-in{from{opacity:0;transform:translateY(18px) scale(.5)}
  to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pq-number-in{from{opacity:0;transform:translateY(100%)}
  to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .pq-track.anim .pq-card,
  .pq-track.anim.in .pq-card .pq-ic,
  .pq-track.anim.in .pq-card .n>span{animation:none;opacity:1;transform:none}}
@media(max-width:1100px){.pq-card{flex-basis:calc((100% - var(--gap))/2)}}
@media(max-width:640px){
  /* Empilement vertical plutôt que scroll-snap horizontal (retour client :
     même comportement que .trio/.pil). */
  .pq-track{flex-direction:column;overflow-x:visible;scroll-snap-type:none}
  .pq-card{flex-basis:auto;width:100%;min-height:0}
}

/* ---- la preuve : jauges et seuils, côte à côte sur une carte crème ----
   Les deux blocs étaient deux sections séparées, bornées à 640 et 760 px
   dans un champ de 1368 : deux sections à moitié vides. Réunies ici, elles
   remplissent la carte et se lisent ensemble — la mesure et le seuil
   qu'elle vise. Nom propre au gabarit : theme.css porte déjà un .preuve. */
.preuve-carte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.6vw,72px);background:var(--creme);border:1px solid var(--ligne);
  border-radius:16px;padding:clamp(28px,3.6vw,56px)}
.preuve-carte .gauge,.preuve-carte .specs-in{max-width:none}
/* Titre camel sur crème : la seule teinte autorisée est --camel-fonce (AA). */
.preuve-carte h3{font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--camel-fonce);
  margin:0 0 clamp(18px,2vw,26px)}
.preuve-carte.seule{grid-template-columns:1fr}
@media(max-width:820px){.preuve-carte{grid-template-columns:1fr}}

/* ---- ce que nous implantons : le carrousel produits de l'accueil ----
   .obj-track/.obj-card déscopées. Trois cartes ici (l'accueil en a cinq) :
   base /3. Pas d'auto-défilement — accueil.js ne tourne pas sur cette page,
   et le snap natif suffit. */
.obj-track{--gap:clamp(18px,2.4vw,28px);display:flex;gap:var(--gap);overflow-x:auto;
  scroll-snap-type:x mandatory;padding:8px 0 22px;margin-bottom:-16px;scrollbar-width:none}
.obj-track::-webkit-scrollbar{display:none}
.obj-card{--obj-motion:900ms cubic-bezier(.37,0,.63,1);
  flex:0 0 calc((100% - 2*var(--gap))/3);scroll-snap-align:start;
  background:#fff;border:1px solid var(--ligne);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;color:var(--noir);
  transition:transform var(--obj-motion),box-shadow var(--obj-motion)}
.obj-media{aspect-ratio:4/3;
  background:radial-gradient(62% 62% at 50% 45%, var(--halo) 0%, #fff 82%);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(6px,.8vw,12px);overflow:hidden}
@keyframes obj-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.obj-media img{width:99%;height:99%;object-fit:contain;scale:1.45;
  animation:obj-flotte 8s ease-in-out infinite;transition:scale var(--obj-motion)}
.obj-card:nth-child(2n) .obj-media img{animation-delay:-2.8s}
@media(hover:hover) and (pointer:fine){
  .obj-card:hover{transform:translateY(-8px);box-shadow:0 26px 48px -24px rgba(38,38,42,.4)}
  .obj-card:hover .obj-media img{scale:1.53}}
@media(prefers-reduced-motion:reduce){
  .obj-media img{animation:none;transition:none}
  .obj-card,.obj-card:hover{transform:none;transition:none}
  .obj-card:hover .obj-media img{scale:1.45}}
.obj-body{padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,22px) clamp(20px,2.2vw,26px)}
.obj-tag{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--camel);margin:0}
.obj-body h3{font-family:var(--serif);font-size:clamp(17px,1.3vw,19px);margin:9px 0 7px}
.obj-body h3 a{color:inherit;text-decoration:none}
.obj-desc{font-size:12.5px;color:var(--gris);margin:0 0 14px;max-width:30ch}
.obj-link{font-size:12.5px;font-weight:600;color:var(--bleu)}
@media(max-width:1100px){.obj-card{flex-basis:calc((100% - var(--gap))/2)}}
@media(max-width:640px){.obj-card{flex-basis:84vw}}

/* ---- des lieux comparables ----
   Grille .posts/.post de theme.css (motif d'/actualites et /besoins),
   ici en cartes cliquables (.post:hover de theme.css) : vignette + légende. Rien à styler de plus
   que la légende, qui n'existe pas sur une carte d'article. */
.lieux-posts .post figcaption{font-family:var(--sans);font-size:clamp(15px,1.2vw,17px);
  line-height:1.3;margin:16px 20px 20px;color:var(--noir)}
.lieux-posts .post-vignette img{width:100%;height:100%;object-fit:cover}
.lieux-posts .post-vignette{position:relative}
.lieux-posts .post-vignette::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.28) 22%,transparent 48%)}
/* La grille n'affiche plus que 2 réalisations (la première est dans le
   .slab plus haut, constat 1) : 2 colonnes pour ne pas laisser de trou
   dans une grille .posts pensée pour 3 (theme.css l.402). Scopé à
   min-width:901px : theme.css replie déjà .posts en 2 colonnes sous
   900px puis 1 sous 620px (l.416-417), ces replis restent bons. */
@media(min-width:901px){.lieux-posts{grid-template-columns:repeat(2,1fr)}}

.post-lien{display:block;color:inherit;text-decoration:none}