/* Portraits : cadrage circulaire, quelle que soit la photo téléchargée. */
.about-content>.profile-pic,.about-content>.about-promo-portrait{width:300px;max-width:100%;aspect-ratio:1;border-radius:50%;flex:0 0 auto}
.about-content>.profile-pic,.about-promo-portrait .profile-pic{height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;display:block}
.about-promo-play{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%)}
.about-promo-portrait:hover .about-promo-play,.about-promo-portrait:focus-visible .about-promo-play{transform:translate(-50%,-50%) scale(1.012)}
.partners .partner>.profile-pic{display:block;aspect-ratio:1;height:auto;object-fit:cover;border-radius:50%}
/* Bouton WhatsApp flottant. */
.whatsapp-widget {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 24px);
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid #c1e2cd;
  border-radius: 999px;
  background: #e2f4e8;
  color: #174830;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 2px 8px #12382118;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.whatsapp-widget .bi { flex: none; font-size: 18px; line-height: 1; }
.whatsapp-widget:hover,.whatsapp-widget:focus-visible {
  background: #d3efdc;
  color: #174830;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #12382124;
}
.whatsapp-widget:focus-visible { outline: 2px solid #266042; outline-offset: 3px; }
/* Articles : liste horizontale légère, sur ordinateur comme sur mobile. */
#blog .homepage-blog-grid{grid-template-columns:minmax(0,1fr);gap:26px}
#blog .homepage-blog-card{min-width:0;padding:0;border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none;transform:none}
#blog .homepage-blog-card:hover{box-shadow:none;transform:none}
#blog .homepage-blog-card-link{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;height:auto;align-items:start;border-radius:8px}
#blog .homepage-blog-card-link:focus-visible{outline-offset:5px}
#blog .homepage-blog-thumbnail{width:112px;height:112px;aspect-ratio:1;max-height:none;border-radius:50%;overflow:hidden}
#blog .homepage-blog-thumbnail img{object-fit:cover;transition:transform .4s ease}
#blog .homepage-blog-card-link:hover .homepage-blog-thumbnail img{transform:scale(1.035)}
#blog .homepage-blog-placeholder svg{width:36px;height:36px}
#blog .homepage-blog-card-content{padding:0;min-width:0}
#blog .homepage-blog-date{font-size:.75rem;margin-bottom:6px}
#blog .homepage-blog-card h3{font-size:1.1rem;line-height:1.35;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#blog p.homepage-blog-excerpt{font-size:.875rem;line-height:1.5;margin:0 0 9px;padding:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#blog .homepage-blog-read{font-size:.875rem}
@media(max-width:767px){
 .about-content>.about-promo-portrait,.about-content>.profile-pic{align-self:flex-start;margin-left:0;margin-right:0}
}
@media(max-width:639px){
 #blog .homepage-blog-grid{gap:22px}
 #blog .homepage-blog-card-link{grid-template-columns:104px minmax(0,1fr);gap:16px}
 #blog .homepage-blog-thumbnail{width:104px;height:104px}
 #blog .homepage-blog-date{font-size:.7rem;margin-bottom:5px}
 #blog .homepage-blog-card h3{font-size:1rem;-webkit-line-clamp:3}
 #blog p.homepage-blog-excerpt{font-size:.8rem;line-height:1.45;margin-bottom:8px}
 #blog .homepage-blog-read{font-size:.8rem}
}
@media(max-width:359px){#blog .homepage-blog-card-link{grid-template-columns:84px minmax(0,1fr);gap:12px}#blog .homepage-blog-thumbnail{width:84px;height:84px}}
@media(prefers-reduced-motion:reduce){
 .whatsapp-widget,#blog .homepage-blog-thumbnail img{transition:none}
 .whatsapp-widget:hover,.whatsapp-widget:focus-visible{transform:none}
 .about-promo-portrait:hover .about-promo-play,.about-promo-portrait:focus-visible .about-promo-play{transform:translate(-50%,-50%)}
 #blog .homepage-blog-card-link:hover .homepage-blog-thumbnail img{transform:none}
}

/* Zoom du portrait uniquement quand une vidéo est disponible. */
.about-content>.about-promo-portrait{overflow:hidden}
.about-promo-portrait .profile-pic{transition:transform .4s ease}
.about-promo-portrait:hover .profile-pic,.about-promo-portrait:focus-visible .profile-pic{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.about-promo-portrait .profile-pic{transition:none}.about-promo-portrait:hover .profile-pic,.about-promo-portrait:focus-visible .profile-pic{transform:none}}

/* Même révélation au défilement que les autres éléments du site. */
#blog .homepage-blog-card.fade-in{opacity:0;transform:translateY(20px);transition:opacity .8s ease-out,transform .8s ease-out}
#blog .homepage-blog-card.fade-in.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){#blog .homepage-blog-card.fade-in{opacity:1;transform:none;transition:none}}
@media print{#blog .homepage-blog-card.fade-in{opacity:1;transform:none;transition:none}}

/* Articles un peu plus lisibles sur ordinateur ; présentation mobile conservée. */
@media(min-width:992px){
 #blog .homepage-blog-grid{gap:30px}
 #blog .homepage-blog-card-link{grid-template-columns:136px minmax(0,1fr);gap:24px}
 #blog .homepage-blog-thumbnail{width:136px;height:136px}
 #blog .homepage-blog-date{font-size:.8125rem;margin-bottom:7px}
 #blog .homepage-blog-card h3{font-size:1.25rem;margin-bottom:8px}
 #blog p.homepage-blog-excerpt{font-size:1rem;margin-bottom:10px}
 #blog .homepage-blog-read{font-size:.9375rem}
}

/* Accueil : une accroche lisible sur un fond pleine largeur. */
body header.hero {
 background-color:var(--primary-color,#007bff);
 isolation:isolate;
 overflow:hidden;
 border-radius:0!important;
}
body header.hero>.hero-image,
body header.hero>.hero-video {
 z-index:0;
 border-radius:0!important;
 transform:scale(1);
 animation:hero-background-settle 2.2s cubic-bezier(.2,.65,.3,1) both;
}
body header.hero:has(>.hero-image,>.hero-video)::before {
 content:"";
 position:absolute;
 inset:0;
 z-index:1;
 pointer-events:none;
 background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.36) 55%,rgba(0,0,0,.27));
 animation:hero-shade-appear 1.6s ease-out both;
}
body header.hero>.hero-content {
 position:relative;
 z-index:2;
 width:min(960px,calc(100% - 40px));
 max-width:none;
 padding-block:2rem;
}
body header.hero .hero-content h1 {
 max-width:25ch;
 margin-inline:auto;
 line-height:1.2;
 text-wrap:balance;
 overflow-wrap:anywhere;
}
body header.hero .hero-content>p {
 max-width:68ch;
 margin:1rem auto 1.25rem;
 line-height:1.7;
 text-wrap:pretty;
 overflow-wrap:anywhere;
}
body header.hero:has(>.hero-image,>.hero-video) .hero-content :is(h1,p) {
 text-shadow:0 2px 16px rgba(0,0,0,.22);
}
@keyframes hero-background-settle {
 from{transform:scale(1.045)}
 to{transform:scale(1)}
}
@keyframes hero-shade-appear {
 from{opacity:.65}
 to{opacity:1}
}
@media(prefers-reduced-motion:reduce) {
 body header.hero>.hero-image,
 body header.hero>.hero-video {animation:none;transform:none}
 body header.hero:has(>.hero-image,>.hero-video)::before {animation:none}
}


body header.hero .hero-content h1>.hero-brand {
 display:block;
 margin-bottom:1rem;
 font-family:var(--font-body,sans-serif);
 font-size:clamp(.75rem,.8vw,.95rem);
 font-weight:600;
 line-height:1.6;
 letter-spacing:.16em;
 text-transform:uppercase;
 opacity:.9;
}
body header.hero .hero-content h1>.hero-slogan {
 display:block;
}


body header.hero:not(:has(>.hero-image,>.hero-video)) {
 color:var(--primary-foreground,#ffffff);
}
body header.hero:not(:has(>.hero-image,>.hero-video)) .hero-content>.btn {
 border:1px solid var(--primary-foreground,#ffffff);
}