/* =============================================================================
   Page d'accueil — « Présentation » (animation + box) et « Notre engagement »
   (mosaïque de photos). Chargé uniquement par index.html.
   ========================================================================== */
.pp-kicker {
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.2em;
    text-transform:uppercase; color:#2f5f9e; margin:0;
}
.pp-body { font-size:clamp(1.03rem,1.2vw,1.16rem); line-height:1.78; color:#1f3650; margin:0; }
.pp-body strong { color:#003366; font-weight:700; }

/* ============================================================================
   Section 1 — animation à gauche, vitre sur fond « ciel + eau » à droite
   ========================================================================== */
/* fond « ciel » : mêmes couleurs, aux mêmes hauteurs, que le ciel de l'animation
   (js/pp-histoire.js règle --pps-sky-mid et --pps-sky-hz selon le cadrage) */
.c-split { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); min-height:clamp(500px,44vw,720px); background:linear-gradient(180deg, #2c86dc 0%, #7cc0f0 var(--pps-sky-mid, 37%), #d7effc var(--pps-sky-hz, 67.4%), #eef8fe 100%); }
.c-film { min-height:100%; }
.c-side {
    position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
    padding:clamp(2.6rem,5vw,5rem) clamp(1.4rem,4vw,4rem);
    background:linear-gradient(180deg, #2c86dc 0%, #7cc0f0 var(--pps-sky-mid, 37%), #d7effc var(--pps-sky-hz, 67.4%), #eef8fe 100%);
}
/* petite box blanche légère */
.c-glass {
    position:relative; width:100%; max-width:610px;
    padding:clamp(1.8rem,3.2vw,2.8rem) clamp(1.6rem,3.2vw,2.8rem);
    background:rgba(255,255,255,.94); border-radius:22px;
    box-shadow:0 18px 40px rgba(0,40,90,.16);
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, background-color .5s ease;
}
.c-glass:hover { transform:translateY(-5px); background:#fff; box-shadow:0 28px 56px rgba(0,40,90,.22); }
.c-glass .pp-kicker { font-size:.86rem; color:#2f5f9e; margin-bottom:1.1rem; display:flex; align-items:center; gap:.8rem; }
.c-glass .pp-kicker::before { content:""; width:28px; height:2px; border-radius:2px; background:#668ECB; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.c-glass:hover .pp-kicker::before { width:48px; }
.c-glass .pp-body { color:#1f3650; font-size:clamp(1.12rem,1.35vw,1.28rem); line-height:1.75; }
.c-glass .pp-body strong { color:#003366; }
.c-cta {
    display:inline-flex; align-items:center; gap:.7rem; margin-top:1.9rem;
    background:#003366; color:#fff; text-decoration:none; font-weight:700; font-size:.98rem;
    padding:.85rem 1.45rem; border-radius:999px; box-shadow:0 10px 24px rgba(0,0,0,.25);
    transition:background-color .3s, box-shadow .3s, transform .3s;
}
.c-cta i { transition:transform .3s; }
.c-cta:hover { background:#0a4585; transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.32); }
.c-cta:hover i { transform:translateX(4px); }

/* ============================================================================
   Section 2 — mosaïque de photos autour d'une vitre « Notre engagement »
   ========================================================================== */
.c-eng { background:#fff; padding:10px; }
.c-mosaic {
    display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(190px,19.5vw,310px); gap:clamp(14px,1.6vw,24px);
}
.c-photos { display:contents; }
.m-ph {
    --r:0deg; --x:0px; --y:0px;
    position:relative; margin:0; overflow:hidden; border-radius:16px; background:#dfe7ef; cursor:zoom-in;
    border:6px solid #fff; box-shadow:0 10px 26px rgba(0,40,80,.16);
    opacity:0; transform:translate(var(--x), calc(var(--y) + 40px)) rotate(var(--r)) scale(.94);
    transition:opacity .8s ease calc(var(--d,0) * 80ms), transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--d,0) * 80ms), box-shadow .5s ease;
}
.c-eng.is-in .m-ph { opacity:1; transform:translate(var(--x), var(--y)) rotate(var(--r)); }
/* disposition « en vrac » : chaque photo légèrement tournée et décalée */
.c-photos .m-ph:nth-child(1) { --r:-3deg;   --x:-6px;  --y:10px; }
.c-photos .m-ph:nth-child(2) { --r:2.5deg;  --x:8px;   --y:-10px; }
.c-photos .m-ph:nth-child(3) { --r:2deg;    --x:4px;   --y:-4px; }
.c-photos .m-ph:nth-child(4) { --r:-2.5deg; --x:-8px;  --y:12px; }
.c-photos .m-ph:nth-child(5) { --r:1.6deg;  --x:10px;  --y:-6px; }
.c-photos .m-ph:nth-child(6) { --r:-2deg;   --x:-4px;  --y:14px; }
.c-photos .m-ph:nth-child(7) { --r:3deg;    --x:6px;   --y:-8px; }
.c-photos .m-ph:nth-child(8) { --r:-1.6deg; --x:-10px; --y:6px; }
.c-eng.is-in .m-ph:hover { transform:translate(var(--x), var(--y)) rotate(0deg) scale(1.05); z-index:4; transition-delay:0s; }
.c-eng.is-in .m-ph.is-lit { transform:translate(var(--x), var(--y)) rotate(calc(var(--r) * .4)) scale(1.03); z-index:3; transition-delay:0s; }
/* noir et blanc par défaut, la couleur revient au survol */
.m-ph img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(1) contrast(1.06) brightness(1.02);
    transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1.2s ease, filter .8s ease;
}
.m-ph img.is-leaving { opacity:0; }
/* liseré lumineux qui fait le tour de la photo allumée */
.m-ph::after {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow:inset 0 0 0 0 rgba(63,182,232,0); transition:box-shadow .6s ease;
}
.m-ph:hover img, .m-ph.is-lit img, .m-ph.is-active img { filter:none; }
.m-ph:hover img { transform:scale(1.04); }
.m-ph:hover, .m-ph.is-lit { box-shadow:0 22px 48px rgba(0,40,80,.28); }
/* anneau qui pulse au centre de la photo allumée : invite à survoler */
.m-ph::before {
    content:""; position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; z-index:2;
    border-radius:50%; border:2px solid rgba(255,255,255,.95); background:rgba(255,255,255,.18);
    opacity:0; transform:scale(.4); pointer-events:none;
}
.m-ph.is-lit::before { animation:m-ping 1.4s ease-out; }
@keyframes m-ping { 0% { opacity:0; transform:scale(.4); } 25% { opacity:1; } 100% { opacity:0; transform:scale(1.6); } }



/* bloc texte central : version légère (maquette C d'origine) */
.c-tile {
    grid-column:2 / span 2; grid-row:1 / span 2; border-radius:22px; background:#fff;
    border:1px solid #e1e9f3; box-shadow:0 14px 38px rgba(0,40,80,.09); position:relative; overflow:hidden;
    padding:clamp(1.4rem,2.4vw,2.6rem) clamp(1.4rem,2.8vw,3rem); display:flex; flex-direction:column; justify-content:center;
    opacity:0; transform:translateY(24px); transition:opacity .9s ease .15s, transform .9s cubic-bezier(.2,.8,.2,1) .15s;
}
.c-eng.is-in .c-tile { opacity:1; transform:none; }
.c-tile::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#668ECB,#3fb6e8); }
.c-tile-in { display:flex; flex-direction:column; gap:clamp(1.1rem,2vw,2rem); }
.c-sep { height:1px; background:linear-gradient(90deg, rgba(0,51,102,0), rgba(0,51,102,.14), rgba(0,51,102,0)); }
.c-ico { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#2f5f9e; background:#e8f0fa; box-shadow:inset 0 0 0 1px #d6e3f3; }
.c-block h3 { display:flex; align-items:center; gap:.8rem; font-size:clamp(1.25rem,1.95vw,1.95rem); line-height:1.2; color:#003366; margin:0 0 .7rem; }
.c-block .pp-body { font-size:clamp(.98rem,1.2vw,1.25rem); line-height:1.7; color:#34495e; }
.c-block .pp-body strong { color:#003366; font-weight:700; }

.c-dots { display:none; }

/* visionneuse */
.pp-lightbox {
    position:fixed; inset:0; z-index:9999999999999; display:flex; align-items:center; justify-content:center;
    background:rgba(0,20,40,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
.pp-lightbox.is-open { opacity:1; visibility:visible; }
.pp-lightbox img { max-width:min(92vw,1400px); max-height:84vh; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.45); transform:scale(.96); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.pp-lightbox.is-open img { transform:none; }
.pp-lb-btn {
    position:absolute; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
    background:rgba(255,255,255,.14); color:#fff; font-size:1.1rem; cursor:pointer; display:grid; place-items:center;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background-color .25s;
}
.pp-lb-btn:hover { background:rgba(255,255,255,.28); }
.pp-lb-close { top:20px; right:20px; }
.pp-lb-prev { left:20px; top:50%; transform:translateY(-50%); }
.pp-lb-next { right:20px; top:50%; transform:translateY(-50%); }

/* ---------------------------------------------------------------- responsive */
@media (max-width:1150px) {
    .c-split { grid-template-columns:1fr; min-height:0; }
    .c-film { aspect-ratio:16/9; min-height:0; }
    .c-side { padding:3rem 1.5rem 6rem; }
    .c-mosaic { grid-auto-rows:auto; }
    .m-ph { aspect-ratio:4/3; }
    .c-tile { grid-column:1 / -1; grid-row:auto; }
}
@media (max-width:900px) {
    .c-film { aspect-ratio:4/3; }
    .c-side { padding:2.2rem 1rem 5rem; }

    /* mosaïque → vitre puis carrousel à glisser */
    .c-eng { padding:14px 0 26px; }
    .c-mosaic { display:flex; flex-direction:column; gap:16px; }
    .c-tile { order:-1; margin:0 14px; padding:1.6rem 1.3rem; }
    .c-photos {
        display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
        padding:4px 14px 6px; scroll-padding:0 14px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    }
    .c-photos::-webkit-scrollbar { display:none; }
    .m-ph { flex:0 0 82%; aspect-ratio:4/3; scroll-snap-align:start; border-radius:16px; --r:0deg !important; --x:0px !important; --y:0px !important; }
    .c-photos .m-ph { --r:0deg; --x:0px; --y:0px; }
    .c-dots { display:flex; justify-content:center; gap:7px; }
    .c-dots span { width:7px; height:7px; border-radius:999px; background:#c3d1e0; transition:width .3s, background-color .3s; }
    .c-dots span.is-on { width:22px; background:#003366; }
}
@media (max-width:480px) {
    .m-ph { flex-basis:86%; }
    .pp-lb-prev, .pp-lb-next { top:auto; bottom:24px; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
    .m-ph, .c-tile { opacity:1; transform:none; transition:none; }
    .c-glass { transition:none; }
}

/* -----------------------------------------------------------------------------
   Transition douce entre l'animation et le ciel de la colonne de droite :
   le même dégradé ciel, estompé vers la gauche (le raccord devient invisible)
   -------------------------------------------------------------------------- */
.c-side { overflow:visible; z-index:2; }
.c-side::before {
    content:""; position:absolute; pointer-events:none; z-index:-1;
    top:0; bottom:0; left:-60px; width:61px;
    background:linear-gradient(180deg, #2c86dc 0%, #7cc0f0 var(--pps-sky-mid, 37%), #d7effc var(--pps-sky-hz, 67.4%), #eef8fe 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.7) 60%, #000 100%);
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.7) 60%, #000 100%);
}
@media (max-width:1150px) {
    /* animation au-dessus, texte en dessous : on part du bas du ciel, très clair, jusqu'à la vague blanche */
    .c-split, .c-side { background:linear-gradient(180deg, #d7effc 0%, #eef8fe 100%); }
    .c-side::before { left:0; right:0; width:auto; top:-50px; bottom:auto; height:51px;
        -webkit-mask-image:none; mask-image:none;
        background:linear-gradient(180deg, rgba(215,239,252,0) 0%, rgba(215,239,252,.7) 60%, #d7effc 100%); }
}
@media (max-width:900px) { .c-side::before { top:-32px; height:33px; } }

/* -----------------------------------------------------------------------------
   Vague animée au-dessus de la section (index.html, .svg-separator) : le fond
   sous la vague prend le bleu du haut du ciel, pour couler dans l'animation
   et la colonne de droite (avant : #668ECB dans css/styles.css)
   -------------------------------------------------------------------------- */
.svg-separator { background-color:#2c86dc; }

/* -----------------------------------------------------------------------------
   Héros : la petite vidéo a été déplacée dans « Notre engagement »,
   la carte d'avis reprend donc sa place contre le bord droit.
   -------------------------------------------------------------------------- */
.hero-social-proof { right:clamp(20px,4vw,48px); }
@media screen and (max-width:1280px) { .hero-social-proof { right:clamp(16px,3vw,32px); } }

/* -----------------------------------------------------------------------------
   Avis Google : 4 cartes, quasi toute la largeur
   -------------------------------------------------------------------------- */
.avis-large { padding:clamp(2rem,3.5vw,3rem) clamp(1rem,2vw,1.6rem) clamp(1.8rem,3vw,2.6rem); }
.avis-large .avis-wrap { max-width:1680px; }
.avis-large .avis-track { gap:1.25rem; }
.avis-large .avis-card { padding:1.35rem 1.4rem; }
.avis-large .avis-text { font-size:.95rem; }

/* « Cliquez pour voir notre secteur d'activité » sur fond blanc */
.secteur-menu { background-color:#ffffff; }

/* bouton pause de l'animation à gauche, hors du dégradé */
.c-film .pps-toggle { right:auto; left:clamp(10px,2vw,22px); }

/* -----------------------------------------------------------------------------
   « Notre façon de faire » : presque toute la largeur, 3 vidéos en relais
   (la vidéo du chantier à la baignade rejoint les deux autres)
   -------------------------------------------------------------------------- */
.why-band .why-band-inner { max-width:1680px; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(2rem,4vw,4.5rem); }
.why-band .why-band-media { grid-template-columns:repeat(3,1fr); }
.why-band .why-band-media { padding-bottom:34px; }
@media screen and (max-width:1280px) {
    .why-band .why-band-inner { grid-template-columns:minmax(0,1fr) 640px; }
}
@media screen and (max-width:1080px) {
    .why-band .why-band-inner { grid-template-columns:1fr; }
    .why-band .why-band-media { max-width:660px; }
}
@media screen and (max-width:768px) {
    /* sur téléphone : les deux vidéos d'origine (celle du chantier est déjà en tête des prestations) */
    .why-band .why-band-media { grid-template-columns:1fr 1fr; max-width:380px; }
    .why-vcard-transfo { display:none; }
}

/* -----------------------------------------------------------------------------
   Barre de progression de lecture (suit le défilement)
   -------------------------------------------------------------------------- */
.pp-progress {
    position:fixed; top:0; left:0; right:0; height:3px; z-index:2147483000; pointer-events:none;
    background:linear-gradient(90deg, #668ECB, #3fb6e8);
    transform-origin:0 50%; transform:scaleX(0);
}

/* Avis Google sur un bleu très pâle, pour rythmer la page */
.avis-large { background-color:#f2f7fc; }

/* -----------------------------------------------------------------------------
   Séparations « vague douce » entre les sections : chaque vague déborde sur le
   bas de la section précédente et prend la couleur de la suivante (--fill).
   Elle apparaît en même temps que la section qu'elle annonce.
   -------------------------------------------------------------------------- */
.pp-sep { position:relative; z-index:5; height:64px; margin-top:-64px; margin-bottom:-4px; overflow:hidden; line-height:0; pointer-events:none;
    transition:opacity .7s ease-out, transform .7s ease-out; }
.pp-sep svg { position:absolute; left:0; bottom:-4px; width:100%; height:calc(100% + 4px); fill:var(--fill); display:block; }
@media (max-width:768px) { .pp-sep { height:40px; margin-top:-40px; } }
@media (prefers-reduced-motion: reduce) { .pp-sep { transition:none; } }

/* place pour les vagues en bas des sections qu'elles recouvrent */
@media (min-width:901px) { .c-eng { padding:34px clamp(14px,2vw,30px) 40px; } }
.secteur-menu { padding-bottom:calc(2rem + 56px); }
.avis-large { padding-bottom:calc(clamp(1.8rem,3vw,2.6rem) + 56px); }
.why-band { padding-bottom:calc(clamp(3.2rem,5.5vw,4.8rem) + 56px);
    /* haut du dégradé uni pour se raccorder à la vague */
    background:
        radial-gradient(110% 80% at 85% 45%, rgba(102,142,203,.22), transparent 62%),
        linear-gradient(180deg, #00457c 0%, #002f5c 45%, #001b33 100%); }

/* petits portables : le bloc texte se resserre pour tenir dans sa case */
@media (min-width:1151px) and (max-width:1250px) {
    .c-tile { padding:1.1rem 1.5rem; }
    .c-tile-in { gap:.9rem; }
    .c-block h3 { font-size:1.2rem; margin-bottom:.5rem; }
    .c-block .pp-body { font-size:.94rem; line-height:1.62; }
    .c-ico { width:38px; height:38px; }
}

/* Photos droites, sans cadre ni arrondi, comme la première version de la mosaïque */
.c-mosaic { gap:6px; }
.m-ph { border:0; border-radius:0; box-shadow:none; }
.c-photos .m-ph:nth-child(n) { --r:0deg; --x:0px; --y:0px; }
.c-eng.is-in .m-ph:hover, .c-eng.is-in .m-ph.is-lit { transform:none; box-shadow:none; }
.m-ph:hover img { transform:scale(1.06); }
@media (min-width:901px) { .c-eng { padding:6px; } }
@media (max-width:900px) { .m-ph { border-radius:0; } }

/* Bloc texte : retour à la première version (fond gris clair, sans cadre),
   avec les petits logos devant les titres */
.c-tile { background:#f6f6f6; border:0; border-radius:0; box-shadow:none; padding:clamp(1.6rem,3vw,3rem); }
.c-tile::before { display:none; }
.c-tile-in { gap:1.6rem; }
.c-sep { display:none; }
.c-block h3 { font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.2; margin:0 0 .6rem; gap:.7rem; }
.c-block .pp-body { font-size:clamp(.98rem,1.1vw,1.1rem); line-height:1.75; color:#34495e; }
.c-ico { width:40px; height:40px; background:#fff; }
@media (min-width:1151px) and (max-width:1250px) {
    .c-tile { padding:1.3rem 1.6rem; }
    .c-tile-in { gap:1rem; }
}

/* Téléphone : la vidéo des attaches de volet prend toute la largeur de la section */
@media screen and (max-width:768px) {
    .recommendations-post-it { max-width:none; width:100%; justify-self:stretch; transform:none; padding:10px 10px 16px; }
    .recommendations-post-it:hover { transform:none; }
}

/* Un seul effet d'apparition sur l'accueil : le fondu flottant au défilement
   (js/presentation.js). Les anciennes apparitions sont neutralisées, sauf dans le héros. */
.fade-in:not(.hero-image) { opacity:1; transform:none; transition:none; }
.m-ph, .c-tile { opacity:1; transform:none; }
.c-photos .m-ph { transition:box-shadow .5s ease; }
.c-tile { transition:none; }

/* -----------------------------------------------------------------------------
   Barre du haut : transparente sur le héros, puis verre bleu marine dépoli
   dès qu'on fait défiler la page (classe posée par js/presentation.js)
   -------------------------------------------------------------------------- */
header {
    transition: background-color .45s ease, box-shadow .45s ease, padding .45s ease, border-color .45s ease;
    border-bottom: 1px solid transparent;
}
header.is-scrolled, header.is-scrolled:hover {
    background: rgba(0, 34, 68, .62);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 8px 28px rgba(0, 20, 40, .22);
    border-bottom-color: rgba(255, 255, 255, .12);
    padding-top: .6rem;
    padding-bottom: .6rem;
}
header.is-scrolled .main-nav ul li a, header.is-scrolled .main-nav h3, header.is-scrolled .main-nav strong { text-shadow: none; }

/* =============================================================================
   Présentation : « post-it » signé de l'équipe, titre dont le mot change
   (construire, rénover, dépanner, équiper) souligné d'une vague
   ========================================================================== */
.c-note {
    position:relative; width:100%; max-width:620px;
    padding:clamp(2.4rem,3.6vw,3.2rem) clamp(1.7rem,3.2vw,2.9rem) clamp(1.8rem,2.8vw,2.4rem);
    background:#fffdf8; border-radius:6px; transform:rotate(-1.4deg);
    box-shadow:0 2px 0 #efe9dc, 0 30px 60px rgba(0,35,80,.28);
    transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
}
.c-note:hover { transform:rotate(0deg) translateY(-4px); box-shadow:0 2px 0 #efe9dc, 0 38px 70px rgba(0,35,80,.32); }
/* bout de ruban adhésif */
.c-note::before {
    content:""; position:absolute; top:-14px; left:50%; width:120px; height:30px; margin-left:-60px; transform:rotate(2deg);
    background:rgba(127,211,245,.55); box-shadow:0 2px 6px rgba(0,40,80,.1);
}
.c-note-quote { position:absolute; top:.5rem; right:1.5rem; font-family:Georgia,serif; font-size:6.5rem; line-height:1; color:#668ECB; opacity:.18; pointer-events:none; }
.c-note-kicker {
    display:flex; align-items:center; gap:.8rem; margin:0 0 .9rem;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:#2f5f9e;
}
.c-note-kicker::before { content:""; width:28px; height:2px; border-radius:2px; background:#668ECB; }
.c-note-title { font-size:clamp(1.7rem,2.6vw,2.5rem); line-height:1.15; font-weight:700; color:#003366; margin:0 0 1.2rem; letter-spacing:-.01em; }
.c-rot { display:inline-grid; vertical-align:bottom; }
.c-rot > span {
    grid-area:1 / 1; justify-self:start; position:relative; white-space:nowrap; color:#0a4585;
    opacity:0; transform:translateY(.45em); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.c-rot > span.is-on { opacity:1; transform:none; }
.c-rot > span.is-out { opacity:0; transform:translateY(-.45em); }
.c-rot > span::after {
    content:""; position:absolute; left:0; right:0; bottom:-.12em; height:.28em;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%233fb6e8' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / auto 100%;
    animation:c-rot-wave 3s linear infinite;
}
@keyframes c-rot-wave { to { background-position:40px 50%; } }
.c-note .pp-body { color:#2c4058; font-size:clamp(1.02rem,1.2vw,1.15rem); line-height:1.8; }
.c-note .pp-body strong { color:#003366; }
.c-note-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem 1.4rem; flex-wrap:wrap; margin-top:1.5rem; }
.c-note-sign { margin:0; font-family:'Caveat',cursive; font-weight:600; font-size:2rem; line-height:1; color:#003366; }
.c-note .c-cta { margin-top:0; }
@media (max-width:600px) {
    .c-note { transform:none; }
    .c-note:hover { transform:none; }
    .c-note-quote { display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .c-note, .c-rot > span { transition:none; }
    .c-rot > span::after { animation:none; }
}

/* =============================================================================
   Recommandations : mosaïque presque pleine largeur (vidéo + 6 équipements)
   ========================================================================== */
.reco-mosaic { background:#f6f6f6; padding:clamp(2.6rem,4.5vw,4.4rem) clamp(1rem,2vw,1.6rem) clamp(3rem,5vw,4.8rem); }
.ra-wrap { max-width:1680px; margin:0 auto; }
.ra-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem 3rem; flex-wrap:wrap; margin-bottom:clamp(1.4rem,2.4vw,2.2rem); }
.ra-kicker {
    display:flex; align-items:center; gap:.7rem; margin:0 0 1rem;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:#2f5f9e;
}
.ra-kicker::before { content:""; width:28px; height:2px; border-radius:2px; background:#668ECB; }
.ra-head h2 { font-size:clamp(2rem,3.2vw,3rem); line-height:1.08; color:#003366; margin:0; letter-spacing:-.01em; }
.ra-lead { max-width:470px; margin:0; color:#5a6b7d; font-size:1rem; line-height:1.65; }
.ra-grid {
    display:grid; gap:14px;
    grid-template-columns:1.15fr 1fr 1fr 1fr 1fr;
    grid-template-rows:repeat(2, clamp(230px,17.5vw,310px));
    grid-template-areas:
        "vid pvc  pvc   eau volet"
        "vid filt pompe pac pac";
}
.ra-tile {
    position:relative; overflow:hidden; border-radius:20px; background:#0b2742; text-decoration:none; color:#fff;
    display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate;
    box-shadow:0 10px 26px rgba(0,40,80,.10); transition:box-shadow .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.ra-tile:hover { transform:translateY(-4px); box-shadow:0 22px 44px rgba(0,40,80,.2); }
.ra-tile > img, .ra-tile > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s cubic-bezier(.2,.8,.2,1); }
.ra-tile:hover > img { transform:scale(1.06); }
.ra-tile::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,20,45,0) 35%, rgba(0,20,45,.78) 100%); }
.ra-body { padding:clamp(1rem,1.5vw,1.4rem); }
.ra-title { display:flex; align-items:center; gap:.65rem; }
.ra-tile h3 { margin:0; font-size:clamp(1.05rem,1.25vw,1.3rem); line-height:1.25; color:inherit; }
.ra-tile p { margin:0; font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.88); max-height:0; opacity:0; overflow:hidden;
    transition:max-height .5s ease, opacity .4s ease, margin .4s ease; }
.ra-tile:hover p, .ra-tile:focus-visible p { max-height:5em; opacity:1; margin-top:.55rem; }
.ra-go {
    position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
    background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); color:#fff;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background-color .3s, color .3s, transform .3s;
}
.ra-go svg { width:16px; height:16px; }
.ra-tile:hover .ra-go { background:#fff; color:#003366; transform:rotate(-45deg); }
/* visuels « produit » détourés sur fond clair */
.ra-tile.is-product { background:#fff; color:#003366; }
.ra-tile.is-product > img { object-fit:contain; padding:14px 14px 90px; }
.ra-tile.is-product::after { display:none; }
.ra-tile.is-product p { color:#5a6b7d; }
.ra-tile.is-product .ra-go { background:#eef3f9; border-color:#dbe5f0; color:#003366; }
/* grande case vidéo */
.ra-video:hover { transform:none; }
.ra-video p { max-height:none; opacity:1; margin-top:.5rem; }
.ra-badge {
    position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:.45rem;
    padding:.4rem .75rem; border-radius:999px; background:rgba(255,255,255,.92); color:#003366; font-size:.75rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
}
.ra-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#e8622c; animation:ra-blink 1.6s ease-in-out infinite; }
@keyframes ra-blink { 50% { opacity:.25; } }
.ra-a-vid { grid-area:vid; } .ra-a-pvc { grid-area:pvc; } .ra-a-eau { grid-area:eau; } .ra-a-volet { grid-area:volet; }
.ra-a-filt { grid-area:filt; } .ra-a-pompe { grid-area:pompe; } .ra-a-pac { grid-area:pac; }
@media (max-width:1100px) {
    .ra-grid { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3, 240px);
        grid-template-areas: "vid pvc pvc" "vid eau volet" "filt pompe pac"; }
}
@media (max-width:700px) {
    .ra-grid { grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:190px; gap:10px;
        grid-template-areas: "vid vid" "vid vid" "pvc pvc" "eau volet" "filt pompe" "pac pac"; }
    .ra-tile p { display:none; }
    .ra-video p { display:block; }
    .ra-tile h3 { font-size:1rem; }
    .ra-tile .reco-icon { display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .ra-badge::before { animation:none; }
}

/* -----------------------------------------------------------------------------
   « Notre engagement » : place fixe de chaque photo autour du texte, dans
   l'ordre du HTML : 1 en haut à gauche, 2 dessous, 3 à 6 sur la ligne du bas,
   7 à droite, 8 en haut à droite.
   -------------------------------------------------------------------------- */
@media (min-width:1151px) {
    .c-photos .m-ph:nth-child(1) { grid-column:1; grid-row:1; }
    .c-photos .m-ph:nth-child(2) { grid-column:1; grid-row:2; }
    .c-photos .m-ph:nth-child(3) { grid-column:1; grid-row:3; }
    .c-photos .m-ph:nth-child(4) { grid-column:2; grid-row:3; }
    .c-photos .m-ph:nth-child(5) { grid-column:3; grid-row:3; }
    .c-photos .m-ph:nth-child(6) { grid-column:4; grid-row:3; }
    .c-photos .m-ph:nth-child(7) { grid-column:4; grid-row:2; }
    .c-photos .m-ph:nth-child(8) { grid-column:4; grid-row:1; }
}