/* carlococcaro.com : design system V2 « En ondes » (charte Grand Possible)
   Concept : la voix. Héros cinématographique sur encre profonde, onde sonore
   signature, sections claires disciplinées. */
:root{
  --turq:#008796; --turq2:#00A0AF; --turq-clair:#7FD8E2;
  --tang:#F07823; --vert:#49BB69; --indigo:#2B479C; --rouge:#EE404A;
  --encre-fonce:#0B2226; --encre-hero:#0E2A30;
  --fond:#FAF8F3; --encre:#1C2B2E; --sourdine:#5C6B70;
  --ligne:#E6E2D8; --carte:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:"Crimson Pro",Georgia,serif; font-size:19px; line-height:1.65;
}
.mont{font-family:"Montserrat",sans-serif}
img{max-width:100%; display:block}
a{color:var(--turq)}

/* ---------- Révélations au défilement ---------- */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
[data-reveal].in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1; transform:none; transition:none}
}

/* ---------- Barre du haut : transparente sur le héros, solide au défilement ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50; background:transparent;
  transition:background .3s ease, box-shadow .3s ease;
}
.topbar.solide{
  background:linear-gradient(95deg,#008796,#00A0AF);
  box-shadow:0 2px 14px rgba(28,43,46,.22);
}
.topbar-inner{
  max-width:1160px; margin:0 auto; padding:20px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:padding .3s ease;
}
.topbar.solide .topbar-inner{padding:10px 28px}
.topbar .logo img{height:40px; width:auto}
.nav{display:flex; gap:4px; align-items:center; white-space:nowrap}
.nav a{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14.5px;
  color:#fff; text-decoration:none; padding:9px 14px; border-radius:9px;
  transition:background .15s ease;
}
.nav a:hover{background:rgba(255,255,255,.14)}
.nav a.actif{background:rgba(255,255,255,.18)}
.nav a.cta{background:#fff; color:var(--turq)}
.nav a.cta:hover{background:#EAF7F8}

/* ---------- Héros cinématographique ---------- */
.hero-cine{
  position:relative; background:var(--encre-hero); color:#fff; overflow:hidden;
  min-height:92vh; display:flex; align-items:center;
}
.hero-photo-fond{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:72% center;
  -webkit-mask-image:linear-gradient(100deg, transparent 26%, rgba(0,0,0,.55) 48%, #000 68%);
          mask-image:linear-gradient(100deg, transparent 26%, rgba(0,0,0,.55) 48%, #000 68%);
  filter:saturate(.92);
  transform-origin:72% 40%;
}
@media (prefers-reduced-motion: no-preference) and (min-width:901px){
  .hero-photo-fond{animation:kenburns 26s ease-in-out infinite alternate}
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.055)}}
.hero-photo-fond::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,42,48,.42), rgba(14,42,48,.08) 45%, rgba(11,34,38,.55));
}
.hero-contenu{
  position:relative; z-index:1; max-width:1160px; margin:0 auto; width:100%;
  padding:140px 28px 110px;
}
.hero-contenu .colonne{max-width:700px}
.surtitre{
  display:inline-block; font-family:"Montserrat",sans-serif; font-weight:800;
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--turq-clair);
  border:1.5px solid rgba(127,216,226,.55); border-radius:999px; padding:8px 18px; margin-bottom:30px;
}
h1{
  font-family:"Montserrat",sans-serif; font-weight:900; margin:0 0 24px;
  font-size:clamp(34px,4.4vw,56px); line-height:1.08; letter-spacing:-.02em; color:#fff;
}
h1 .ligne{display:block}
h1 em{font-style:normal; color:var(--turq-clair); position:relative; white-space:nowrap}
h1 em svg{
  position:absolute; left:0; right:0; bottom:-10px; width:100%; height:14px; overflow:visible;
}
h1 em svg path{
  stroke:var(--tang); stroke-width:4; fill:none; stroke-linecap:round;
  stroke-dasharray:600; stroke-dashoffset:600; animation:tracer 1s ease .7s forwards;
}
@keyframes tracer{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  h1 em svg path{animation:none; stroke-dashoffset:0}
}
.hero-cine .lede{
  font-size:clamp(19px,2vw,22.5px); color:rgba(255,255,255,.86); max-width:56ch; margin:0 0 36px;
}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.btn{
  display:inline-block; font-family:"Montserrat",sans-serif; font-weight:700; font-size:16px;
  text-decoration:none; padding:16px 30px; border-radius:12px;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:focus-visible{outline:3px solid var(--tang); outline-offset:3px}
.btn-plein{background:var(--tang); color:#fff}
.btn-plein:hover{background:#D9660F; transform:translateY(-1px)}
.btn-fantome{border:2px solid rgba(255,255,255,.55); color:#fff}
.btn-fantome:hover{background:rgba(255,255,255,.1)}
.btn-ligne{border:2px solid var(--turq); color:var(--turq)}
.btn-ligne:hover{background:rgba(0,135,150,.07)}
.btn-turq{background:var(--turq); color:#fff}
.btn-turq:hover{background:#00707D; transform:translateY(-1px)}

/* Entrée orchestrée du héros */
.hero-contenu .colonne > *{opacity:0; transform:translateY(18px); animation:lever .7s ease forwards}
.hero-contenu .surtitre{animation-delay:.05s}
.hero-contenu h1{animation-delay:.15s}
.hero-contenu .lede{animation-delay:.3s}
.hero-contenu .hero-cta{animation-delay:.45s}
@keyframes lever{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .hero-contenu .colonne > *{opacity:1; transform:none; animation:none}
}

/* ---------- Onde sonore signature ---------- */
.onde{display:block; width:100%; height:64px; overflow:visible}
.onde path{fill:none; stroke-linecap:round}
.onde .trace{stroke:var(--turq); stroke-width:2.5}
.onde.sur-fonce .trace{stroke:var(--turq2)}
.onde-hero{position:absolute; bottom:-2px; left:0; right:0; z-index:2}
@media (prefers-reduced-motion: no-preference){
  .onde-hero .trace{
    stroke-dasharray:2400; stroke-dashoffset:2400;
    animation:dessiner 1.4s ease .8s forwards;
  }
}
@keyframes dessiner{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: no-preference){
  .onde .pouls{
    stroke:var(--tang); stroke-width:2.5; stroke-dasharray:26 1600;
    animation:pouls 7s linear infinite;
  }
}
@keyframes pouls{from{stroke-dashoffset:0}to{stroke-dashoffset:-1626}}

/* ---------- Sections ---------- */
.scene{max-width:1160px; margin:0 auto; padding:76px 28px}
.scene-tete{max-width:64ch; margin:0 auto 44px; text-align:center}
.eyebrow{
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tang); margin:0 0 12px;
}
.eyebrow::before{
  content:""; display:inline-block; width:30px; height:12px; margin-right:10px;
  vertical-align:-1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M0 6 C 3 6 4 1 6 1 S 9 11 11 11 S 14 2 16 2 S 19 10 21 10 S 24 4 26 4 C 28 4 28 6 30 6' fill='none' stroke='%23008796' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
h2{font-family:"Montserrat",sans-serif; font-weight:800; font-size:clamp(27px,3.6vw,40px); line-height:1.12; margin:0 0 14px; letter-spacing:-.01em; text-wrap:balance}
h3{font-family:"Montserrat",sans-serif; font-weight:800; font-size:19px; line-height:1.3; margin:0 0 8px}
.scene-tete p{margin:0; color:var(--sourdine); font-size:18.5px}

/* ---------- Pellicule photo (galerie) ---------- */
.pellicule{
  display:flex; gap:16px; overflow-x:auto; padding:8px 44px 22px;
  scroll-snap-type:x mandatory; scrollbar-width:thin; cursor:grab;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
.pellicule.saisie{cursor:grabbing; scroll-snap-type:none}
.pellicule img{user-select:none; -webkit-user-drag:none}
.pellicule img{
  height:340px; width:auto; border-radius:14px; scroll-snap-align:center;
  box-shadow:0 14px 34px rgba(28,43,46,.14); flex:0 0 auto;
}

/* ---------- Balado (vitrine sombre) ---------- */
.vitrine{
  background:var(--encre-fonce); color:#fff; border-radius:24px;
  max-width:1160px; margin:0 auto; padding:64px 56px;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center;
  position:relative; overflow:hidden;
}
.vitrine::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 420px at 12% 110%, rgba(0,160,175,.22), transparent 65%);
}
.vitrine > *{position:relative}
.vitrine .cover img{
  border-radius:16px; box-shadow:0 26px 60px rgba(0,0,0,.45);
  transform:rotate(-2deg); transition:transform .35s ease;
}
.vitrine .cover:hover img{transform:rotate(0deg) scale(1.015)}
.vitrine h2{color:#fff}
.vitrine .eyebrow{color:var(--turq-clair)}
.vitrine p{color:rgba(255,255,255,.85)}
.plateformes{display:flex; gap:14px; margin-top:24px; align-items:center; flex-wrap:wrap}
.plateformes a img{height:48px; width:auto; transition:transform .15s ease}
.plateformes a:hover img{transform:translateY(-3px)}
.vitrine-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px}
.btn-blanc{background:#fff; color:var(--turq)}
.btn-blanc:hover{background:#EAF7F8; transform:translateY(-1px)}
.lien-clair{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14.5px;
  color:#fff; text-decoration:none; padding-bottom:2px;
  border-bottom:1.5px solid rgba(255,255,255,.45);
}
.lien-clair:hover{border-bottom-color:#fff}
.lecteur{margin-top:36px; grid-column:1 / -1}
.lecteur iframe{width:100%; border:0; border-radius:14px; display:block}

/* ---------- Cartes médias ---------- */
.cartes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.carte{
  background:var(--carte); border:1px solid var(--ligne); border-radius:16px;
  overflow:hidden; text-decoration:none; color:var(--encre); display:flex; flex-direction:column;
  box-shadow:0 4px 16px rgba(28,43,46,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.carte:hover{transform:translateY(-5px); box-shadow:0 20px 44px rgba(28,43,46,.14)}
.carte .visuel{overflow:hidden; aspect-ratio:16/9}
.carte .visuel img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.carte:hover .visuel img{transform:scale(1.045)}
.carte{position:relative}
.carte::after{
  content:"\2192"; position:absolute; top:14px; right:14px; width:38px; height:38px;
  border-radius:50%; background:rgba(255,255,255,.94); color:var(--turq);
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 6px 16px rgba(28,43,46,.18);
}
.carte:hover::after, .carte:focus-visible::after{opacity:1; transform:none}
.carte:focus-visible{outline:3px solid var(--tang); outline-offset:3px}
.carte .corps{padding:20px 22px 22px}
.carte .date{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tang); margin-bottom:6px;
}
.carte .source{font-size:15.5px; color:var(--sourdine); font-style:italic}
.centre{text-align:center; margin-top:36px}

/* ---------- Initiatives ---------- */
.initiatives{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.initiative{
  background:var(--carte); border:1px solid var(--ligne); border-radius:16px;
  padding:30px 24px; text-align:center; border-top:5px solid var(--turq);
  display:flex; flex-direction:column; align-items:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.initiative:hover{transform:translateY(-4px); box-shadow:0 16px 38px rgba(28,43,46,.1)}
.initiative:nth-child(2){border-top-color:var(--indigo)}
.initiative:nth-child(3){border-top-color:var(--tang)}
.initiative:nth-child(4){border-top-color:var(--vert)}
.initiative img{height:74px; width:auto; margin-bottom:18px}
.initiative p{margin:0 0 16px; font-size:16.5px; color:var(--sourdine); flex:1}
.initiative .lien{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14.5px;
  color:var(--turq); text-decoration:none;
}
.initiative .lien:hover{text-decoration:underline}

/* ---------- Bandeaux de pages intérieures ---------- */
.bandeau{
  position:relative; min-height:420px; display:flex; align-items:flex-end;
  background-size:cover; background-position:center 30%; background-color:var(--encre-hero);
}
.bandeau::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,42,48,.5), rgba(11,34,38,.28) 45%, rgba(11,34,38,.78));
}
.bandeau .titre{
  position:relative; z-index:1; max-width:1160px; margin:0 auto; width:100%;
  padding:150px 28px 64px; color:#fff;
}
.bandeau h1{margin:0; font-size:clamp(34px,5vw,58px)}
.bandeau .onde-hero{z-index:2}

/* ---------- Bio ---------- */
.prose{max-width:70ch; margin:0 auto}
.prose p{margin:0 0 26px; font-size:19.5px}
.prose p:first-of-type{font-size:23px}
.prose p:first-of-type::first-letter{
  font-family:"Montserrat",sans-serif; font-weight:900; color:var(--turq);
  font-size:64px; line-height:.9; float:left; padding:6px 12px 0 0;
}
.jalon{
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tang); margin:0 0 8px;
}
.logos-bande{display:flex; gap:34px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:30px}
.logos-bande img{height:84px; width:auto}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.duo img{border-radius:16px; box-shadow:0 18px 44px rgba(28,43,46,.15)}
.implications{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.implication{
  background:var(--carte); border:1px solid var(--ligne); border-radius:16px;
  padding:28px 22px; text-align:center;
}
.implication img{height:70px; width:auto; margin:0 auto 16px}
.implication .quand{
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:15px; color:var(--turq);
}
.implication .role{font-size:16.5px; color:var(--sourdine)}

/* ---------- Vidéo ---------- */
.video-cadre{position:relative; padding-top:56.25%; border-radius:16px; overflow:hidden; box-shadow:0 18px 44px rgba(28,43,46,.15)}
.video-cadre iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- Pied de page ---------- */
.footer{
  background:var(--encre-fonce); color:#fff; margin-top:64px; position:relative; overflow:hidden;
}
.footer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(720px 480px at 85% -10%, rgba(0,160,175,.16), transparent 65%);
}
.footer .onde{margin-top:-2px}
.footer-inner{position:relative; max-width:1160px; margin:0 auto; padding:56px 28px 36px; text-align:center}
.footer img.logo{height:60px; width:auto; margin:0 auto 28px}
.footer h2{color:#fff; font-size:clamp(28px,4vw,44px)}
.footer h2 em{font-style:normal; color:var(--turq-clair)}
.footer .coordonnees{font-size:21px; margin:16px 0 6px}
.footer .coordonnees a{color:#fff; text-decoration:none; border-bottom:1.5px solid rgba(255,255,255,.4)}
.footer .coordonnees a:hover{border-bottom-color:#fff}
.sociaux{display:flex; gap:12px; justify-content:center; margin:28px 0 44px; flex-wrap:wrap}
.sociaux a{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14px; color:#fff;
  text-decoration:none; border:1.5px solid rgba(255,255,255,.45); border-radius:999px;
  padding:9px 18px; transition:background .15s ease, border-color .15s ease;
}
.sociaux a:hover{background:rgba(255,255,255,.12); border-color:#fff}
.footer .droits{font-size:15px; color:rgba(255,255,255,.65);
  border-top:1px solid rgba(255,255,255,.16); padding-top:22px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-cine{min-height:0}
  .hero-photo-fond{
    -webkit-mask-image:linear-gradient(180deg, #000 30%, rgba(0,0,0,.4) 55%, transparent 80%);
            mask-image:linear-gradient(180deg, #000 30%, rgba(0,0,0,.4) 55%, transparent 80%);
    background-position:center top; opacity:.5;
  }
  .hero-contenu{padding:130px 22px 84px}
  .vitrine{grid-template-columns:1fr; padding:44px 28px; gap:34px}
  .vitrine .cover{max-width:340px; margin:0 auto}
  .duo{grid-template-columns:1fr}
  .cartes,.implications{grid-template-columns:1fr}
  .initiatives{grid-template-columns:repeat(2,1fr)}
  .pellicule img{height:250px}
  .topbar-inner{flex-direction:column; gap:8px; padding:14px 16px}
  .topbar .logo img{height:34px}
  .nav{justify-content:center}
  .nav a{font-size:13.5px; padding:8px 12px}
  .bandeau{min-height:340px}
  .bandeau .titre{padding-top:170px}
}
@media (max-width:540px){
  .initiatives{grid-template-columns:1fr}
  .nav{flex-wrap:wrap; white-space:normal; justify-content:center}
  .vitrine{border-radius:0}
  .pellicule img{height:200px}
  h1{font-size:clamp(26px,8.2vw,34px)}
}