/* Accueil — hero deux colonnes : texte a gauche, diaporama a droite.
   Le titre generique de la page est retire du DOM cote PHP : l'accroche est le vrai H1.
   Ces regles suppriment la place que la section reservait a ce titre. */
body.home #tm-main.uk-section{padding-top:0}
body.home #tm-main .uk-article > .uk-margin-medium{margin-top:1.4rem}
body.home #tm-main .uk-article > .uk-margin-medium > :first-child{margin-top:0}
body.home #tm-main .uk-article > meta{display:none}

/* ------------------------------------------------------------------ HERO
   texte ~41 %, media ~59 %, ecart 48 px, largeur totale plafonnee.
   L'ordre du DOM (texte puis media) EST l'ordre mobile : rien a reordonner. */
.clb-hero{display:grid;grid-template-columns:42fr 58fr;gap:48px;align-items:center;
  width:100%;max-width:1240px;margin:0 auto}
.clb-hero-texte{min-width:0}
.clb-hero-media{min-width:0}

.clb-hero-accroche{font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#8a827a;margin:0 0 .85rem}
.clb-hero-titre{font-size:clamp(1.75rem,2.75vw,2.55rem);line-height:1.08;margin:0 0 1rem;
  letter-spacing:-.015em;text-wrap:balance}
.clb-hero-p{font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.55;color:#4a443e;
  margin:0 0 .8rem;text-wrap:pretty}
.clb-hero-p:last-of-type{margin-bottom:1.5rem;font-weight:600;color:#1d1b19}

.clb-home-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.65rem}
.clb-home-btn{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;min-height:52px;
  padding:.75rem 1.15rem;border-radius:10px;font-weight:700;font-size:1rem;white-space:nowrap;
  text-decoration:none;border:1px solid transparent}
.clb-home-btn-primaire{background:var(--ddr-accent,#e31f24);color:#fff}
.clb-home-btn-primaire:hover{filter:brightness(.93);color:#fff;text-decoration:none}
.clb-home-btn-second{background:#fff;color:#1d1b19;border-color:rgba(29,27,25,.16)}
.clb-home-btn-second:hover{border-color:#1d1b19;text-decoration:none}
.clb-home-btn:focus-visible{outline:2px solid var(--ddr-accent,#e31f24);outline-offset:2px}

/* --------------------------------------------------------------- DIAPORAMA
   Sur grand ecran le cadre est en 3:2, ratio natif des photos : aucun rognage.
   Sur mobile il passe en 4:3, ou la coupe se fait en largeur et laisse la
   hauteur des visages intacte. Le point focal est porte par chaque image. */
.clb-dia{position:relative;width:100%;aspect-ratio:3/2;
  overflow:hidden;border-radius:12px;background:#f5f2eb;
  box-shadow:0 1px 2px rgba(20,18,16,.05),0 8px 24px -12px rgba(20,18,16,.18)}
.clb-dia-piste{position:absolute;inset:0}
.clb-dia-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.clb-dia-slide.is-on{opacity:1;pointer-events:auto}
.clb-dia-slide img{width:100%;height:100%;display:block}
.clb-dia-cover{object-fit:cover;object-position:center 45%}   /* valeur de repli */
.clb-dia-contain{object-fit:contain;padding:5% 6%;box-sizing:border-box}  /* logo jamais rogne */

.clb-dia-fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(20,18,16,.42);color:#fff;font-size:24px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .18s}
.clb-dia-fleche:hover{background:rgba(20,18,16,.68)}
.clb-dia-fleche:focus-visible{outline:2px solid #fff;outline-offset:2px}
.clb-dia-prec{left:10px} .clb-dia-suiv{right:10px}

.clb-dia-points{position:absolute;left:0;right:0;bottom:11px;z-index:3;
  display:flex;justify-content:center;gap:7px}
.clb-dia-point{width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(20,18,16,.25);
  transition:background .18s,transform .18s}
.clb-dia-point.is-on{background:#fff;transform:scale(1.3)}
.clb-dia-point:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------------------------------------------------------------- PALIERS */
@media (max-width:1199px){
  .clb-hero{gap:36px;grid-template-columns:43fr 57fr}
}
@media (max-width:1023px){          /* on empile : titre, texte, boutons, diaporama */
  .clb-hero{grid-template-columns:1fr;gap:28px;max-width:none}
  .clb-hero-titre{font-size:clamp(1.75rem,4.4vw,2.4rem)}
}
@media (max-width:639px){
  .clb-dia{aspect-ratio:4/3;border-radius:10px}
  .clb-dia-fleche{width:38px;height:38px;font-size:22px}
  .clb-dia-prec{left:6px} .clb-dia-suiv{right:6px}
  .clb-hero{gap:22px}
  .clb-hero-accroche{font-size:.74rem}
  .clb-home-actions{gap:.6rem}
  .clb-home-btn{flex:1 1 100%;white-space:normal}   /* pleine largeur sur petit ecran */
}
@media (prefers-reduced-motion:reduce){
  .clb-dia-slide{transition:none}
}