@import url('https://fonts.googleapis.com/css2?family=Allura&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================================
   INSTALL COMMUNICATION 33 — PAGE À PROPOS
   V4 — reconstruction visuelle avec photo hero recadrée large
   ============================================================================ */

html body:has(.ic33-apropos-page){
    overflow-x:hidden !important;
}

/* --- sortie totale des wrappers Storefront --- */
html body:has(.ic33-apropos-page) #content,
html body:has(.ic33-apropos-page) .site-content,
html body:has(.ic33-apropos-page) .content-area,
html body:has(.ic33-apropos-page) .site-main,
html body:has(.ic33-apropos-page) .col-full{
    width:100vw !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
}

html body:has(.ic33-apropos-page) .ic33-apropos-page{
    --navy:#061d35;
    --navy-2:#031a30;
    --orange:#ff7418;
    --blue:#063c68;
    --text:#082d50;
    --muted:#49657d;
    --line:#d9e4eb;
    --pale:#edf7fc;
    width:100vw !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff;
    color:var(--text);
    font-family:'Inter',Arial,sans-serif;
    overflow:hidden;
}

html body:has(.ic33-apropos-page) .ic33-apropos-page > section{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box;
}

html body:has(.ic33-apropos-page) .ic33-apropos-page img{
    max-width:none;
}

.section-wide{
    width:100%;
    padding:0 4.7vw;
    margin:0;
    box-sizing:border-box;
}

.section-kicker{
    display:block;
    margin:0 0 9px;
    color:var(--orange);
    font-size:clamp(10px,.72vw,13px);
    line-height:1;
    letter-spacing:.20em;
    font-weight:900;
    text-transform:uppercase;
}

/* ============================================================================
   HERO — la nouvelle photo est déjà recadrée en 1536 × 740.
   Le bloc photo conserve son ratio pour afficher l'intégralité du sujet.
   ============================================================================ */
.ic33-apropos-hero{
    position:relative;
    height:clamp(500px,32.3vw,620px);
    min-height:500px;
    overflow:hidden;
    background:var(--navy);
}

.ic33-apropos-hero__media{
    position:absolute;
    z-index:0;
    top:0;
    right:0;
    bottom:0;
    width:67%;
    overflow:hidden;
}

.ic33-apropos-hero__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    filter:saturate(1.03) contrast(1.03) brightness(.98);
}

/* fondu bleu vers la photo, plus long et beaucoup plus doux */
.ic33-apropos-hero__shade{
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
        var(--navy) 0%,
        var(--navy) 30%,
        rgba(6,29,53,.99) 36%,
        rgba(6,29,53,.92) 42%,
        rgba(6,29,53,.70) 49%,
        rgba(6,29,53,.38) 57%,
        rgba(6,29,53,.10) 63%,
        rgba(6,29,53,0) 68%);
}

.ic33-apropos-hero__inner{
    position:relative;
    z-index:3;
    width:100%;
    height:100%;
    padding:0 4.7vw;
    display:grid;
    grid-template-columns:45% 55%;
    box-sizing:border-box;
}

.ic33-apropos-hero__content{
    align-self:center;
    width:100%;
    max-width:650px;
    padding-bottom:4px;
    color:#fff;
}

.ic33-apropos-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:19px;
    color:#fff;
    font-size:clamp(9px,.68vw,12px);
    letter-spacing:.19em;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
}

.ic33-apropos-kicker i{
    display:block;
    width:39px;
    height:2px;
    background:var(--orange);
}

.ic33-apropos-hero h1{
    margin:0;
    color:#fff;
    font-family:'Inter',Arial,sans-serif;
    font-size:clamp(40px,3.62vw,70px);
    line-height:.91;
    letter-spacing:-.055em;
    font-weight:900;
    text-transform:uppercase;
}

.ic33-apropos-hero h1 strong{color:var(--orange)}

.ic33-apropos-hero__content > p{
    max-width:610px;
    margin:20px 0 0;
    color:#fff;
    font-size:clamp(13px,.92vw,17px);
    line-height:1.24;
    font-weight:600;
}

/* vraie écriture fine de signature */
.ic33-script,
.ic33-hero-quote,
.story-quote{
    font-family:'Allura','Caveat',cursive;
    font-weight:400;
    font-style:normal;
}

.ic33-script--hero{
    display:inline-block;
    position:relative;
    margin-top:16px;
    color:#fff;
    font-size:clamp(27px,2.05vw,39px);
    line-height:.95;
    letter-spacing:.01em;
    transform:rotate(-2deg);
}

.ic33-script--hero b{
    display:block;
    width:145px;
    height:2px;
    margin:7px 0 0 7px;
    background:var(--orange);
    transform:rotate(-4deg);
}

.ic33-apropos-hero__side{
    position:relative;
    height:100%;
    display:block;
}

.ic33-hero-quote{
    position:absolute;
    top:18%;
    right:4%;
    color:#fff;
    font-size:clamp(25px,2.2vw,42px);
    line-height:.98;
    letter-spacing:0;
    transform:rotate(-3deg);
    text-shadow:0 1px 1px rgba(0,0,0,.12);
}

.ic33-hero-quote strong{
    display:inline-block;
    margin-top:5px;
    color:var(--orange);
    font-weight:400;
}

.ic33-hero-quote b{
    display:block;
    width:145px;
    height:2px;
    margin:6px 0 0 4px;
    background:var(--orange);
    transform:rotate(-5deg);
}

.ic33-hero-words{
    position:absolute;
    right:5%;
    bottom:19%;
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#fff;
    font-size:clamp(8px,.53vw,11px);
    line-height:1;
    letter-spacing:.24em;
    font-weight:900;
}

/* vague identique dans l'esprit de la maquette : grande courbe, pas une pointe */
/* ============================================================================
   HISTOIRE
   ============================================================================ */
.ic33-apropos-story{
    position:relative;
    background:#f6fafc;
    overflow:hidden;
}

.ic33-apropos-story__grid{
    width:100%;
    min-height:clamp(430px,39vw,650px);
    display:grid;
    grid-template-columns:50% 50%;
}

.ic33-apropos-story__content{
    position:relative;
    z-index:3;
    padding:34px 4.7vw 30px;
    box-sizing:border-box;
}

.ic33-apropos-story h2,
.ic33-apropos-values h2,
.ic33-apropos-area h2,
.ic33-apropos-expertise h2{
    margin:0;
    color:var(--text);
    font-family:'Inter',Arial,sans-serif;
    font-size:clamp(30px,2.52vw,49px);
    line-height:.96;
    letter-spacing:-.048em;
    font-weight:900;
    text-transform:uppercase;
}

.ic33-apropos-story h2 strong,
.ic33-apropos-values h2 strong{color:var(--orange)}

.title-line{
    display:block;
    width:44px;
    height:2px;
    margin:9px 0 13px;
    background:var(--orange);
}

.ic33-apropos-story p{
    max-width:690px;
    margin:0 0 11px;
    color:#163b5b;
    font-size:clamp(13px,.90vw,17px);
    line-height:1.27;
    font-weight:500;
}

.ic33-apropos-story p strong{
    color:var(--text);
    font-weight:850;
}

.ic33-apropos-story p.closing{
    margin-top:4px;
    color:var(--orange);
    font-weight:800;
}

.ic33-apropos-story__visual{
    position:relative;
    min-height:inherit;
    overflow:hidden;
}

.ic33-apropos-story__visual::before{
    content:"";
    position:absolute;
    z-index:2;
    inset:0;
    background:linear-gradient(90deg,
        #f6fafc 0%,
        rgba(246,250,252,.97) 6%,
        rgba(246,250,252,.72) 16%,
        rgba(246,250,252,.28) 30%,
        rgba(246,250,252,0) 47%);
}

.ic33-apropos-story__visual > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    filter:grayscale(1) contrast(.97) brightness(1.08);
}

.story-quote{
    position:absolute;
    z-index:4;
    top:12%;
    left:10%;
    display:flex;
    align-items:flex-start;
    gap:5px;
    color:#173f62;
    font-size:clamp(25px,2vw,39px);
    line-height:.96;
    transform:rotate(-3deg);
}

.story-quote .quote-mark{
    color:#c9ddea;
    font-family:Georgia,serif;
    font-size:92px;
    line-height:.50;
}

.story-quote b{
    position:absolute;
    left:78px;
    bottom:-18px;
    width:140px;
    height:2px;
    background:var(--orange);
    transform:rotate(-5deg);
}

.story-words{
    position:absolute;
    z-index:4;
    right:8%;
    bottom:8%;
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#fff;
    font-size:clamp(8px,.54vw,11px);
    line-height:1;
    letter-spacing:.26em;
    font-weight:900;
    text-shadow:0 1px 2px rgba(0,0,0,.55);
}

/* ============================================================================
   STATISTIQUES
   ============================================================================ */
.ic33-apropos-stats{
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.stats-grid{
    width:100%;
    min-height:145px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.stats-grid article{
    min-height:145px;
    padding:18px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-right:1px solid var(--line);
    box-sizing:border-box;
}
.stats-grid article:last-child{border-right:0}

.stats-grid svg{
    width:58px;
    height:58px;
    margin-bottom:7px;
    overflow:visible;
    color:var(--orange);
}

.stats-grid svg *{
    stroke:currentColor;
    stroke-width:3.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}

.stats-grid strong{
    color:var(--text);
    font-size:clamp(20px,1.52vw,30px);
    line-height:1.02;
    font-weight:900;
}

.stats-grid span{
    margin-top:5px;
    color:#506981;
    font-size:clamp(11px,.75vw,14px);
    line-height:1.2;
}

/* ============================================================================
   VALEURS
   ============================================================================ */
.ic33-apropos-values{
    padding:28px 0 21px;
    background:#fff;
}

.ic33-apropos-values h2{font-size:clamp(30px,2.3vw,44px)}

.values-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 24%;
    gap:0;
    margin-top:15px;
    margin-right:-4.7vw;
}

.values-items{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.values-items article{
    min-height:165px;
    padding:3px 20px 0;
    text-align:center;
    border-right:1px solid var(--line);
    box-sizing:border-box;
}
.values-items article:first-child{padding-left:0}
.values-items article:last-child{border-right:0}

.values-items svg{
    width:58px;
    height:58px;
    color:#073d6b;
}
.values-items svg *{
    stroke:currentColor;
    stroke-width:3.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}

.values-items article:nth-child(2) svg{
    width:64px;
    height:52px;
}
.values-items article:nth-child(2) svg path{
    fill:currentColor;
    stroke:none;
}

.values-items h3{
    margin:6px 0 6px;
    color:var(--text);
    font-size:18px;
    line-height:1;
    font-weight:900;
}

.values-items p{
    margin:0;
    color:#526a81;
    font-size:13px;
    line-height:1.34;
}

/* collée à gauche du bloc image, aucun arrondi */
.values-image{
    height:170px;
    overflow:hidden;
    border-radius:0;
}
.values-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

/* ============================================================================
   ZONE D'INTERVENTION
   ============================================================================ */
.ic33-apropos-area{
    background:#eaf6fc;
    overflow:hidden;
}

.area-grid{
    width:100%;
    min-height:190px;
    display:grid;
    grid-template-columns:22% 38% 40%;
    align-items:center;
}

.area-map{
    position:relative;
    height:190px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.area-map svg{
    width:138px;
    height:174px;
    overflow:visible;
}
.area-map svg .gironde-shape{
    fill:#c6e1f2;
    stroke:#a9cee5;
    stroke-width:2;
}
.area-map svg .merignac-pin{
    fill:var(--orange);
    stroke:#fff;
    stroke-width:5;
}
.area-map svg .merignac-dot{
    fill:#fff;
}
.area-map > b{
    position:absolute;
    top:50%;
    left:55%;
    transform:translate(25px,-2px);
    color:var(--text);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.area-content{padding:18px 20px}
.area-content h2{font-size:clamp(27px,2.2vw,43px)}
.area-content p{
    max-width:650px;
    margin:9px 0 14px;
    color:#3d5870;
    font-size:13px;
    line-height:1.3;
}
.area-content > a{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    min-width:160px;
    padding:12px 18px;
    background:#073e6b;
    color:#fff !important;
    text-decoration:none !important;
    border-radius:2px;
    font-size:12px;
    font-weight:900;
}

.area-image{
    height:190px;
    overflow:hidden;
    position:relative;
}
.area-image::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(90deg,#eaf6fc 0%,rgba(234,246,252,.68) 10%,rgba(234,246,252,.14) 25%,transparent 44%);
}
.area-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

/* ============================================================================
   EXPERTISE
   ============================================================================ */
.ic33-apropos-expertise{
    padding:24px 0 18px;
    background:#fff;
}
.ic33-apropos-expertise h2{font-size:clamp(28px,2.12vw,41px)}

.expertise-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 285px;
    gap:0;
    margin-top:12px;
    margin-left:-4.7vw;
    margin-right:-4.7vw;
}

.expertise-items{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.expertise-items article{
    min-height:170px;
    padding:15px 10px;
    text-align:center;
    border-right:1px solid var(--line);
    box-sizing:border-box;
}
.expertise-items article:last-child{border-right:0}

.expertise-items svg{
    width:58px;
    height:58px;
    color:#073d6b;
}
.expertise-items svg *{
    stroke:currentColor;
    stroke-width:3.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}

.expertise-items h3{
    margin:7px 0 5px;
    color:var(--text);
    font-size:13px;
    line-height:1.08;
    font-weight:900;
}
.expertise-items p{
    margin:0;
    color:#526a81;
    font-size:12px;
    line-height:1.27;
}

.expertise-contact{
    min-height:184px;
    padding:21px 20px;
    background:#062744;
    color:#fff;
    box-sizing:border-box;
}
.expertise-contact > span{
    color:var(--orange);
    font-size:9px;
    letter-spacing:.20em;
    font-weight:900;
}
.expertise-contact h3{
    margin:9px 0 13px;
    color:#fff;
    font-size:29px;
    line-height:1.02;
    font-weight:900;
}
.expertise-contact a{
    display:block;
    padding:12px 11px;
    background:var(--orange);
    color:#fff !important;
    text-decoration:none !important;
    border-radius:2px;
    font-size:16px;
    line-height:1;
    font-weight:900;
}
.expertise-contact p{
    margin:9px 0 0;
    color:#fff;
    font-size:13px;
    line-height:1.3;
}

/* ============================================================================
   CTA
   ============================================================================ */
.ic33-apropos-cta{
    position:relative;
    min-height:125px;
    overflow:hidden;
    background:#061a31;
}
.cta-image,.cta-overlay{position:absolute;inset:0}
.cta-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:.70;
    filter:saturate(1.18) contrast(1.08);
}
.cta-overlay{
    background:linear-gradient(90deg,rgba(3,21,39,.94) 0%,rgba(3,21,39,.70) 48%,rgba(3,21,39,.22) 74%,rgba(3,21,39,.58) 100%);
}
.cta-inner{
    position:relative;
    z-index:2;
    width:100%;
    min-height:125px;
    padding:0 4.7vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    box-sizing:border-box;
}
.cta-inner > div > span{
    color:var(--orange);
    font-size:10px;
    letter-spacing:.20em;
    font-weight:900;
}
.cta-inner h2{
    margin:6px 0 4px;
    color:#fff;
    font-size:clamp(25px,2.05vw,39px);
    line-height:1;
    font-weight:900;
}
.cta-inner p{
    margin:0;
    color:#fff;
    font-size:12px;
}
.cta-inner > a{
    display:inline-flex;
    align-items:center;
    gap:30px;
    padding:14px 21px;
    background:var(--orange);
    color:#fff !important;
    text-decoration:none !important;
    border-radius:2px;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}

/* footer réellement plein écran */
html body:has(.ic33-apropos-page) .ic33-footer,
html body:has(.ic33-apropos-page) .site-footer{
    width:100vw !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:0 !important;
}
html body:has(.ic33-apropos-page) .ic33-footer > .ic33-container,
html body:has(.ic33-apropos-page) .ic33-footer > .ic33-container-wide{
    width:90.6vw !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1000px){
    .ic33-apropos-hero{height:500px}
    .ic33-apropos-hero__inner{grid-template-columns:46% 54%}
    .ic33-apropos-hero__media{width:68%;}
    .ic33-apropos-hero h1{font-size:47px}
    .ic33-apropos-story__grid{min-height:520px}
    .expertise-layout{grid-template-columns:minmax(0,1fr) 235px}
}

@media (max-width:760px){
    .section-wide{padding-left:20px;padding-right:20px}
    .ic33-apropos-hero{height:650px}
    .ic33-apropos-hero__media{width:100%;height:55%;top:auto;bottom:0}
    .ic33-apropos-hero__shade{background:linear-gradient(180deg,var(--navy) 0%,rgba(6,29,53,.92) 36%,rgba(6,29,53,.25) 75%,rgba(6,29,53,0) 100%)}
    .ic33-apropos-hero__inner{display:block;padding:45px 20px 0}
    .ic33-apropos-hero__content{max-width:none}
    .ic33-apropos-hero h1{font-size:42px}
    .ic33-apropos-hero__side{display:none}
    .ic33-apropos-story__grid{grid-template-columns:1fr}
    .ic33-apropos-story__content{padding:30px 20px}
    .ic33-apropos-story__visual{min-height:390px}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .stats-grid article:nth-child(2){border-right:0}
    .values-layout{grid-template-columns:1fr}
    .values-items{grid-template-columns:repeat(2,1fr)}
    .values-image{height:230px}
    .area-grid{grid-template-columns:1fr}
    .area-map,.area-image{height:220px}
    .area-content{padding:24px 20px}
    .expertise-layout{grid-template-columns:1fr}
    .expertise-items{grid-template-columns:repeat(2,1fr)}
    .expertise-items article:nth-child(2n){border-right:0}
    .cta-inner{padding:25px 20px;flex-direction:column;align-items:flex-start}
}

@media (max-width:520px){
    .ic33-apropos-hero h1{font-size:37px}
    .stats-grid,.values-items,.expertise-items{grid-template-columns:1fr}
    .stats-grid article{border-right:0;border-bottom:1px solid var(--line)}
    .stats-grid article:last-child{border-bottom:0}
    .values-items article{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}
}


/* ============================================================================
   V4 — FINITIONS MAQUETTE
   ============================================================================ */

/* HERO : la photo recadrée 1536 × 740 remplit le panneau droit.
   Le ratio du panneau est volontairement identique à celui de la photo. */
.ic33-apropos-hero{
    height:clamp(500px,32.3vw,620px);
    min-height:500px;
}
.ic33-apropos-hero__media{
    width:67%;
    height:100%;
    right:0;
    top:0;
    bottom:0;
    overflow:hidden;
    background:var(--navy);
}
.ic33-apropos-hero__media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
}
.ic33-apropos-hero__inner{
    grid-template-columns:45% 55%;
}
.ic33-apropos-hero::after{
    display:none !important;
}

/* Le fondu se fait uniquement à gauche : il ne doit pas créer une zone vide. */
.ic33-apropos-hero__shade{
    background:linear-gradient(90deg,
        var(--navy) 0%,
        var(--navy) 30%,
        rgba(6,29,53,.98) 36%,
        rgba(6,29,53,.88) 42%,
        rgba(6,29,53,.62) 49%,
        rgba(6,29,53,.32) 57%,
        rgba(6,29,53,.08) 64%,
        rgba(6,29,53,0) 68%);
}

/* VALEURS : seule la photo touche le bord droit. */
.values-layout{
    margin-right:-4.7vw;
    gap:0;
}
.values-image{
    border-radius:0 !important;
    height:170px;
    overflow:hidden;
}
.values-image img{
    border-radius:0 !important;
}
.values-items p{
    font-size:clamp(13px,.86vw,16px) !important;
    line-height:1.34 !important;
}
.values-items h3{
    font-size:clamp(16px,1vw,19px) !important;
}

/* Poignée : vraie silhouette de poignée de main, en aplat propre. */
.values-items article:nth-child(2) svg{
    width:64px;
    height:52px;
    overflow:visible;
}
.values-items article:nth-child(2) svg path{
    fill:currentColor !important;
    stroke:none !important;
}

/* Les autres pictogrammes restent en tracé. */
.values-items article:not(:nth-child(2)) svg *{
    fill:none;
    stroke:currentColor;
    stroke-width:3.3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* STATISTIQUES : engrenage complet, centré et jamais coupé. */
.stats-grid svg{
    width:58px;
    height:58px;
    overflow:visible;
    display:block;
    margin:0 auto 7px;
    shape-rendering:geometricPrecision;
}
.stats-grid svg *{
    stroke:currentColor;
    stroke-width:3.4;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}
.stats-grid article:nth-child(3) svg{
    overflow:visible;
}

/* CARTE : uniquement la silhouette + le repère, aucun trait interne. */
.area-map svg .gironde-detail{
    display:none !important;
}
.area-map svg .gironde-shape{
    fill:#c6e1f2;
    stroke:#a9cee5;
    stroke-width:2;
}

/* EXPERTISE : toute la rangée touche les deux bords. */
.ic33-apropos-expertise .section-wide{
    padding-left:4.7vw;
    padding-right:0;
}
.expertise-layout{
    width:calc(100% + 4.7vw);
    margin-left:-4.7vw;
    margin-right:0;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:0;
}
.expertise-items article{
    min-height:184px;
}
.expertise-items p{
    font-size:12px !important;
    line-height:1.32;
}
.expertise-contact{
    min-height:184px;
    height:100%;
    padding:21px 20px;
}
.expertise-contact h3{
    font-size:clamp(27px,1.75vw,34px) !important;
    line-height:1.02 !important;
}
.expertise-contact a{
    font-size:18px !important;
    padding:13px 12px !important;
}
.expertise-contact p{
    font-size:14px !important;
    line-height:1.3 !important;
}

/* Desktop : la rangée des solutions va réellement jusqu'au bord droit. */
@media (min-width:1200px){
    .values-layout{margin-right:-4.7vw}
    .values-items p{font-size:15px !important}
    .values-items h3{font-size:18px !important}
    .expertise-layout{width:calc(100% + 4.7vw)}
}

/* Mobile : la photo conserve son ratio et n'est jamais découpée. */
@media (max-width:760px){
    .ic33-apropos-hero{
        height:650px;
        min-height:650px;
    }
    .ic33-apropos-hero__media{
        width:100%;
        height:auto;
        aspect-ratio:1536 / 740;
        top:auto;
        bottom:0;
    }
    .ic33-apropos-hero__media img{
        object-fit:contain;
        object-position:center bottom;
    }
    .ic33-apropos-hero__inner{
        grid-template-columns:1fr;
    }
    .values-layout,
    .expertise-layout{
        margin-left:0;
        margin-right:0;
        width:100%;
    }
}

/* ============================================================================
   V5 — HERO : AFFICHAGE INTÉGRAL DE LA PHOTO 1536 × 740
   La hauteur du hero est calculée à partir de la largeur réelle du panneau
   photo afin que l'image puisse être affichée à 100 %, sans recadrage.
   ============================================================================ */
.ic33-apropos-hero{
    /* 67vw × 740 / 1536 = 32.2786vw */
    height:clamp(400px,32.2786vw,660px) !important;
    min-height:0 !important;
    overflow:hidden;
}

.ic33-apropos-hero__media{
    width:67% !important;
    height:100% !important;
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    overflow:hidden !important;
    aspect-ratio:auto !important;
}

.ic33-apropos-hero__media img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
}

/* Le fondu reste au-dessus de la photo mais ne masque pas sa partie basse. */
.ic33-apropos-hero__shade{
    z-index:1 !important;
    background:linear-gradient(90deg,
        var(--navy) 0%,
        var(--navy) 30%,
        rgba(6,29,53,.98) 36%,
        rgba(6,29,53,.88) 42%,
        rgba(6,29,53,.60) 49%,
        rgba(6,29,53,.28) 57%,
        rgba(6,29,53,.06) 64%,
        rgba(6,29,53,0) 68%) !important;
}

@media (min-width:761px){
    .ic33-apropos-hero__inner{
        grid-template-columns:45% 55% !important;
    }
}

@media (max-width:760px){
    .ic33-apropos-hero{
        height:650px !important;
        min-height:650px !important;
    }
    .ic33-apropos-hero__media{
        width:100% !important;
        height:auto !important;
        aspect-ratio:1536 / 740 !important;
        top:auto !important;
        bottom:0 !important;
    }
    .ic33-apropos-hero__media img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
    }
}


/* ============================================================================
   CORRECTION CIBLEE — HERO + PICTOGRAMME PROXIMITE
   Cette couche finale remplace les anciennes règles contradictoires du hero.
   ============================================================================ */

/* HERO : la hauteur suit exactement le ratio de la photo 1536 x 740.
   La photo occupe 67% de la largeur et arrive exactement au bord droit. */
.ic33-apropos-hero{
    height:clamp(850px,32.27865vw,660px) !important;
    min-height:0 !important;
    position:relative !important;
    overflow:hidden !important;
    background:var(--navy) !important;
}

.ic33-apropos-hero__media{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    width:67% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:0 !important;
    background:transparent !important;
}

.ic33-apropos-hero__media img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
}

/* Fondu uniquement sur la jonction gauche.
   A droite, le dégradé est totalement transparent : la photo reste intacte. */
.ic33-apropos-hero__shade{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
        linear-gradient(90deg,
            rgba(6,29,53,1) 0%,
            rgba(6,29,53,1) 29%,
            rgba(6,29,53,.98) 35%,
            rgba(6,29,53,.86) 42%,
            rgba(6,29,53,.62) 49%,
            rgba(6,29,53,.34) 56%,
            rgba(6,29,53,.12) 63%,
            rgba(6,29,53,0) 70%
        ) !important;
}

/* Le contenu reste au-dessus du fondu. */
.ic33-apropos-hero__inner{
    position:relative !important;
    z-index:3 !important;
    height:100% !important;
}

/* Le pictogramme Proximité est distinct du +8 ans :
   trois personnes côte à côte, comme sur la maquette. */
.values-items article:nth-child(2) svg{
    width:72px !important;
    height:52px !important;
    viewBox:auto;
    overflow:visible !important;
}

.values-items article:nth-child(2) svg circle,
.values-items article:nth-child(2) svg path{
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:3.2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

/* Les icônes de la ligne statistiques restent orange,
   notamment la poignée de main du +8 ans. */
.stats-grid svg{
    color:var(--orange) !important;
}

/* Aucune ancienne règle d'aplat de l'ancienne poignée ne doit s'appliquer
   au pictogramme Proximité. */
.values-items article:nth-child(2) svg path{
    fill:none !important;
    stroke:currentColor !important;
}

/* Desktop uniquement : conserver le hero proportionnel à la photo. */
@media (min-width:761px){
    .ic33-apropos-hero__media{
        width:67% !important;
        height:100% !important;
    }
}

/* Mobile : on garde le comportement mobile existant. */
@media (max-width:760px){
    .ic33-apropos-hero{
        height:650px !important;
        min-height:650px !important;
    }
    .ic33-apropos-hero__media{
        width:100% !important;
        height:auto !important;
        aspect-ratio:1536 / 740 !important;
        top:auto !important;
        bottom:0 !important;
        right:0 !important;
    }
    .ic33-apropos-hero__media img{
        object-fit:contain !important;
    }
}


/* +8 ans : pictogramme de poignée fourni par l'utilisateur — seul élément modifié */
.stats-grid article:nth-child(2) .stats-handshake-icon{
    display:block;
    width:58px;
    height:58px;
    margin:0 auto 7px;
    object-fit:contain;
    flex:0 0 auto;
}