/* ==========================================================================
   CHANANEE — page « Réalisations »
   Reprise de la maquette validée. Retiré : les règles déjà identiques à
   global.css, et la copie ancienne de l'ossature du site (navigation,
   boutons, pied de page) que global.css fournit désormais.
   ========================================================================== */
:root{ --epb-m:#D6336C; --epb-n:#232B54; --epb-line:#F0DCE5; }

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
/* nav */
/* boutons */
/* reveals */
/* hero */
.rhero{position:relative;padding:110px 0 80px;text-align:center;overflow:hidden;}
.rhero::before{content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:900px;height:520px;
    background:radial-gradient(closest-side,rgba(154,11,49,.2),transparent 70%);filter:blur(40px);pointer-events:none;}
.rhero .kick{font-family:var(--disp);font-size:11px;letter-spacing:.28em;color:#E45C8B;font-weight:700;}
.rhero h1{margin-top:18px;font-family:var(--disp);font-weight:700;letter-spacing:-.035em;line-height:1.02;
    font-size:clamp(42px,7vw,84px);color:#fff;position:relative;}
.rhero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:#E08BA4;}
.rhero p{margin:22px auto 0;max-width:640px;color:var(--ink-d2);font-size:17px;line-height:1.65;position:relative;}
.rhero .chips{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;position:relative;}
.rhero .chips span{font-family:var(--disp);font-size:11.5px;font-weight:600;color:var(--ink-d2);
    border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.03);}
.rhero .chips b{color:#fff;}
/* chapitre générique */
.chap{padding:100px 0;position:relative;overflow:hidden;}
.chap .kick{font-family:var(--disp);font-size:11px;letter-spacing:.24em;font-weight:700;}
.chap h2{margin-top:14px;font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.05;
    font-size:clamp(30px,4.2vw,50px);}
.chap h2 em{font-family:var(--serif);font-style:italic;font-weight:400;}
.chap .lead{margin-top:16px;font-size:15.5px;line-height:1.7;max-width:600px;}
.tags{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;}
.tags span{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.05em;
    border-radius:999px;padding:6px 13px;}
.byline{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-family:var(--disp);
    font-size:11px;font-weight:700;letter-spacing:.14em;}
.byline i{font-style:normal;font-size:15px;}
/* cadres navigateur */
.frame{border-radius:14px;overflow:hidden;position:relative;
    transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s;}
.frame:hover{transform:translateY(-6px);}
.frame .bbar{display:flex;align-items:center;gap:6px;padding:9px 13px;}
.frame .bbar i{width:9px;height:9px;border-radius:50%;flex:none;}
.frame .bbar i:nth-child(1){background:#F26D6D;}
.frame .bbar i:nth-child(2){background:#F2C94C;}
.frame .bbar i:nth-child(3){background:#6FCF97;}
.frame .burl{margin-left:8px;flex:1;text-align:center;font-family:var(--disp);font-size:10px;
    letter-spacing:.05em;border-radius:999px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.frame img{width:100%;display:block;}
.frame-l{background:#fff;border:1px solid rgba(35,43,84,.12);box-shadow:0 26px 60px rgba(35,43,84,.16);}
.frame-l:hover{box-shadow:0 40px 90px rgba(35,43,84,.24);}
.frame-l .bbar{background:linear-gradient(180deg,#F5F2F5,#EDEAEE);border-bottom:1px solid rgba(35,43,84,.08);}
.frame-l .burl{background:#fff;color:#8A8FA8;border:1px solid rgba(35,43,84,.08);}
.epb .frame-l{box-shadow:0 26px 60px rgba(166,27,79,.14);}
.epb .frame-l:hover{box-shadow:0 40px 90px rgba(166,27,79,.22);}
.frame-d{background:#101016;border:1px solid #26262e;
    box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 44px rgba(154,11,49,.1);}
.frame-d:hover{box-shadow:0 44px 100px rgba(0,0,0,.65),0 0 56px rgba(154,11,49,.18);}
.frame-d .bbar{background:#15151b;border-bottom:1px solid #22222a;}
.frame-d .burl{background:#0C0C10;color:#6f6f76;border:1px solid #22222a;}
/* capture vedette en perspective */
.feat3d{transform:perspective(1400px) rotateX(5deg);transform-origin:center top;}
.feat3d:hover{transform:perspective(1400px) rotateX(0deg) translateY(-4px);}
@media (prefers-reduced-motion:reduce){
.feat3d,.feat3d:hover{transform:none;}
.frame:hover{transform:none;}
}
/* capture pleine page qui défile */
.scrollcap{height:620px;overflow:hidden;position:relative;}
.scrollcap img{width:100%;animation:capscroll 30s ease-in-out infinite;will-change:transform;}
.scrollcap:hover img{animation-play-state:paused;}
.scrollcap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.9));pointer-events:none;}
@keyframes capscroll{0%,6%{transform:translateY(0);}
    47%,53%{transform:translateY(calc(-100% + 620px));}
    94%,100%{transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
.scrollcap img{animation:none;}
}
.glab{margin-top:9px;font-family:var(--disp);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;}
/* EPB — peau client claire */
.epb{background:#FBF7F9;color:var(--epb-n);}
.epb .kick{color:var(--epb-m);}
.epb h2{color:var(--epb-n);}
.epb h2 em{color:var(--epb-m);}
.epb .lead{color:#5A5F7E;}
.epb .tags span{background:#fff;border:1px solid var(--epb-line);color:var(--epb-n);}
.epb .tags span.hot{background:linear-gradient(135deg,#D6336C,#A61B4F);color:#fff;border:none;}
.epb .byline{color:var(--epb-m);}
.epb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;}
.epb-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.epb-gallery .g1{grid-column:1/-1;}
.epb .glab{color:#9aa;color:#8A8FA8;}
.epb-facts{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:460px;}
.epb-fact{background:#fff;border:1px solid var(--epb-line);border-radius:14px;padding:14px 12px;text-align:center;}
.epb-fact em{display:block;font-style:normal;font-family:var(--disp);font-weight:700;font-size:20px;color:var(--epb-n);}
.epb-fact span{font-size:9.5px;color:#8A8FA8;text-transform:uppercase;letter-spacing:.06em;font-family:var(--disp);}
.epb .link2{display:inline-block;margin-top:22px;font-family:var(--disp);font-size:13.5px;font-weight:700;color:var(--epb-m);text-decoration:none;}
.epb .link2:hover{text-decoration:underline;}
@media(max-width:920px){
.epb-grid{grid-template-columns:1fr;}
}
/* Come2Me — sombre, mobile */
.c2m{background:var(--noir);color:#fff;}
.c2m .kick{color:#E45C8B;}
.c2m h2 em{color:#E08BA4;}
.c2m .lead{color:var(--ink-d2);}
.c2m .tags span{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--ink-d1);}
.c2m .tags span.hot{background:linear-gradient(135deg,#B31038,#7C0827);color:#fff;border:none;}
.c2m .byline{color:#E45C8B;}
.phones{margin-top:44px;display:flex;gap:16px;overflow-x:auto;padding:10px 4px 22px;
    scrollbar-width:thin;scrollbar-color:#3a3a41 transparent;}
.phones::-webkit-scrollbar{height:6px;}
.phones::-webkit-scrollbar-thumb{background:#2a2a32;border-radius:3px;}
.phones .ph{flex:0 0 172px;border-radius:22px;overflow:hidden;border:1px solid #26262e;
    box-shadow:0 20px 50px rgba(0,0,0,.5);transition:transform .4s;}
.phones .ph:nth-child(odd){transform:rotate(-1.1deg);}
.phones .ph:nth-child(even){transform:rotate(1.1deg);}
.phones .ph:hover{transform:translateY(-8px) rotate(0deg);}
@media (prefers-reduced-motion:reduce){
.phones .ph{transform:none;}
}
.phones-hint{margin-top:2px;font-family:var(--disp);font-size:10.5px;letter-spacing:.14em;color:var(--ink-d3);text-align:center;}
.c2m-web{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.c2m .glab{color:var(--ink-d3);}
@media(max-width:760px){
.c2m-web{grid-template-columns:1fr;}
}
/* CoDir / Ecos — data sombre profond */
.data{background:linear-gradient(180deg,#0D0D12,#0B0B0D);color:#fff;border-top:1px solid #16161a;border-bottom:1px solid #16161a;}
.data .kick{color:#E45C8B;}
.data h2 em{color:#E08BA4;}
.data .lead{color:var(--ink-d2);}
.data .tags span{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--ink-d1);}
.data .byline{color:#E45C8B;}
.data-grid{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.data-grid .g1{grid-column:1/-1;}
.data .glab{color:var(--ink-d3);}
@media(max-width:760px){
.data-grid{grid-template-columns:1fr;}
}
/* Maison Boréale — vert boréal & crème */
.mb{background:#F2EEE5;color:#22392B;}
.mb .kick{color:#8A6D3B;}
.mb h2{color:#1E3A2A;}
.mb h2 em{color:#8A6D3B;}
.mb .lead{color:#5A6B5E;}
.mb .tags span{background:#fff;border:1px solid #DDD5C4;color:#22392B;}
.mb .byline{color:#8A6D3B;}
.mb .frame-l{border-color:rgba(30,58,42,.15);box-shadow:0 26px 60px rgba(30,58,42,.16);}
.mb .frame-l:hover{box-shadow:0 40px 90px rgba(30,58,42,.24);}
.mb .glab{color:#8B937F;}
.mb-row{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:760px){
.mb-row{grid-template-columns:1fr;}
}
/* Lithofamily — beige & or */
.bp{background:#F8F4ED;color:#3A342C;}
.bp .kick{color:#A8894F;}
.bp h2{color:#3A342C;}
.bp h2 em{color:#A8894F;}
.bp .lead{color:#6E675C;}
.bp .tags span{background:#fff;border:1px solid #E6DCC9;color:#3A342C;}
.bp .byline{color:#A8894F;}
.bp .frame-l{border-color:rgba(168,137,79,.25);box-shadow:0 26px 60px rgba(120,95,50,.16);}
.bp .frame-l:hover{box-shadow:0 40px 90px rgba(120,95,50,.24);}
.bp .glab{color:#A39A88;}
.bp-row{margin-top:34px;display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start;}
@media(max-width:760px){
.bp-row{grid-template-columns:1fr;}
}
/* Findexia + Bi3oo — clair */
.lite{background:var(--casse);color:var(--ink);}
.lite .kick{color:var(--bdx);}
.lite h2{color:var(--ink);}
.lite h2 em{color:var(--bdx);}
.lite .lead{color:var(--ink-2);}
.lite .tags span{background:#fff;border:1px solid var(--line-l);color:var(--ink);}
.lite .byline{color:var(--bdx);}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;}
.split.rev{grid-template-columns:1.1fr .9fr;}
.lite .glab{color:var(--ink-3);}
@media(max-width:880px){
.split,.split.rev{grid-template-columns:1fr;gap:30px;}
}
.duo{border-top:1px solid var(--line-l);margin-top:80px;padding-top:80px;}
/* strip également construits */
.also{background:var(--noir);padding:90px 0;}
.also h2{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;font-size:clamp(24px,3vw,34px);color:#fff;text-align:center;}
.also h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:#E08BA4;}
.also-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.also-c{background:#101014;border:1px solid #1f1f25;border-radius:18px;padding:24px;}
.also-c b{display:block;font-family:var(--disp);font-size:16px;color:#fff;font-weight:700;}
.also-c .st{display:inline-block;margin-top:8px;font-family:var(--disp);font-size:10px;font-weight:700;
    letter-spacing:.1em;color:#E45C8B;border:1px solid rgba(228,92,127,.3);border-radius:999px;padding:3px 9px;}
.also-c p{margin-top:12px;font-size:13px;color:var(--ink-d2);line-height:1.6;}
@media(max-width:760px){
.also-grid{grid-template-columns:1fr;}
}
/* CTA final */
.rcta{background:var(--noir);padding:40px 0 110px;text-align:center;position:relative;overflow:hidden;}
.rcta::before{content:"";position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);width:760px;height:420px;
    background:radial-gradient(closest-side,rgba(154,11,49,.2),transparent 70%);filter:blur(30px);pointer-events:none;}
.rcta h2{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;font-size:clamp(30px,4.4vw,52px);color:#fff;position:relative;}
.rcta h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:#E45C8B;}
.rcta p{margin:16px auto 0;color:var(--ink-d2);font-size:15.5px;max-width:520px;position:relative;}
.rcta .btn{margin-top:28px;position:relative;}
.rcta .reassure{margin-top:12px;font-family:var(--disp);font-size:11.5px;letter-spacing:.08em;color:var(--ink-d3);position:relative;}
/* footer condensé */
/* Byline : le glyphe décoratif ♛ de la maquette est retiré (consigne :
   ne pas réintroduire la reine Unicode). Le libellé reste inchangé. */

/* ==========================================================================
   Corrections responsive appliquées à l'intégration
   La maquette laissait ses éléments de grille imposer leur largeur minimale
   au lieu de suivre la colonne : sous 760 px, le texte et les cartes étaient
   coupés par l'overflow:hidden de .chap. Aucune valeur de design n'est
   modifiée — seul le comportement de calcul des colonnes est corrigé.
   ========================================================================== */
.epb-grid>*,.epb-gallery>*,.data-grid>*,.mb-row>*,.bp-row>*,
.c2m-web>*,.split>*,.also-grid>*,.r-duo>*,.r-duo-12>*{min-width:0;}

/* Les quatre chiffres d'Euro Pare-Brise+ passent sur deux colonnes en mobile :
   « RECOMMANDATIONS » ne tient pas dans un tiers de 342 px. */
@media(max-width:560px){
  .epb-facts{grid-template-columns:1fr 1fr;max-width:none;}
}

/* Les grilles écrites en style="" dans la maquette : mêmes valeurs, mais
   déplacées ici pour qu'elles puissent se replier en mobile. Un style en
   ligne l'emporte sur toute media query — c'est ce qui coupait le contenu. */
.epb-facts-4{grid-template-columns:repeat(4,1fr);max-width:560px;}
.epb-gallery-1{grid-template-columns:1fr;}
.r-duo{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.r-duo-12{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start;}
.bp-row-even{grid-template-columns:1fr 1fr;}
@media(max-width:760px){
  .r-duo,.r-duo-12,.bp-row-even{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .epb-facts-4{grid-template-columns:1fr 1fr;max-width:none;}
}

/* --------------------------------------------------------------------------
   Ratio des captures d'écran
   Les attributs width/height du HTML servent à réserver la place (ils évitent
   le saut de mise en page) et portent les dimensions réelles du fichier. Sans
   height:auto en CSS, l'attribut height s'appliquait comme hauteur imposée :
   combiné au width:100% des cadres, il écrasait ou étirait chaque capture.
   Aucune image n'est recadrée, aucune n'est déformée.
   -------------------------------------------------------------------------- */
.frame img,.scrollcap img,.phones .ph img,.epb-gallery img{
  width:100%;height:auto;object-fit:fill;}

/* Les deux maquettes Euro Pare-Brise+ : sans min-width:0, la capture verticale
   imposait sa largeur minimale et inversait le rapport 1 / 1.2 voulu par la
   maquette. Les colonnes retrouvent leurs proportions ; aucune image n'est
   redimensionnee autrement que proportionnellement. */