/** * Page À propos : visuel fixe à gauche (image et forme qui changent par bloc), blocs minéraux à droite, * puis les polaroïds « Hors du code » et le contact dans deux encarts emboîtés. Chargé sur tout le site (navigation AJAX). * Formes : les blocs utilisent les clipPath de img/a-propos-formes.svg (7 à 9 sommets, arêtes irrégulières, * coins arrondis comme les blobs du fond) ; le visuel fixe (carré, pans francs comme le portrait de l'accueil) utilise des polygon() à 21 sommets * (7 coins × 3 points), même nombre partout pour que le navigateur fasse glisser une forme vers l'autre. * Générateur : prototype-fond/formes/apropos_formes.py. */ .apropos{ --forme-portrait:polygon(7.76% 14.13%, 8.46% 12.40%, 10.08% 11.47%, 52.92% 0.53%, 55.00% 0.25%, 57.09% 0.46%, 97.91% 9.54%, 99.41% 10.42%, 99.75% 12.13%, 95.25% 49.87%, 94.98% 52.00%, 94.68% 54.12%, 88.32% 95.88%, 87.55% 97.49%, 85.86% 98.08%, 34.14% 99.92%, 32.06% 99.74%, 30.08% 99.04%, 1.92% 84.96%, 0.54% 83.71%, 0.24% 81.87%); --forme-communaute:polygon(0.23% 8.13%, 0.59% 6.60%, 2.13% 6.27%, 45.87% 11.73%, 47.99% 11.80%, 50.07% 11.46%, 91.93% 0.54%, 93.55% 0.67%, 94.28% 2.12%, 99.72% 43.88%, 99.77% 45.98%, 99.35% 48.04%, 86.65% 87.96%, 85.64% 89.59%, 83.89% 90.38%, 44.11% 97.62%, 41.99% 97.94%, 39.86% 98.13%, 12.14% 99.87%, 10.48% 99.43%, 9.77% 97.87%); --forme-clients:polygon(11.78% 2.13%, 12.47% 0.62%, 14.11% 0.35%, 57.89% 7.65%, 60.00% 7.84%, 62.12% 7.72%, 95.88% 3.28%, 97.49% 3.61%, 98.07% 5.14%, 99.93% 59.86%, 99.87% 61.99%, 99.56% 64.10%, 92.44% 97.90%, 91.58% 99.38%, 89.89% 99.61%, 40.11% 90.39%, 38.00% 90.19%, 35.89% 90.35%, 4.11% 95.65%, 2.58% 95.38%, 2.22% 93.87%); padding-top:2rem; font-family:'Muli', sans-serif; } /* Deux colonnes : le visuel collant, les blocs qui défilent */ .apropos__defile{ display:grid; grid-template-columns:minmax(0, 400px) minmax(0, 1fr); gap:4rem; align-items:start; } .apropos__visuel{ position:sticky; top:5rem; margin:0; /* Carré : les pans coupés font la silhouette, pas le format de la photo. */ aspect-ratio:1; background:#0b2530; clip-path:var(--forme-portrait); transition:clip-path .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); } /* Le visuel se décale un peu à chaque bloc, comme un bloc qui se décroche. */ .apropos__visuel[data-forme="communaute"]{clip-path:var(--forme-communaute);transform:translate(-2.5rem, 1.5rem);} .apropos__visuel[data-forme="clients"]{clip-path:var(--forme-clients);transform:translate(1.5rem, -1rem);} .apropos__image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease-out; } .apropos__visuel[data-forme="portrait"] .apropos__image[data-forme="portrait"], .apropos__visuel[data-forme="communaute"] .apropos__image[data-forme="communaute"], .apropos__visuel[data-forme="clients"] .apropos__image[data-forme="clients"]{ opacity:1; } /* Blocs minéraux : chacun sa matière et sa coupe */ .apropos__bloc{ position:relative; isolation:isolate; padding:2.75rem 3rem 3rem; margin-bottom:7rem; font-size:1.15rem; line-height:1.65; } .apropos__bloc::before{ content:''; position:absolute; inset:0; z-index:-1; } .apropos__bloc--portrait{color:#1a2a30;} .apropos__bloc--portrait::before{background:rgba(255,255,255,.9);clip-path:url(#ap-bloc-1);} .apropos__bloc--communaute{color:#dfe9ec;} .apropos__bloc--communaute::before{background:#0b2530;clip-path:url(#ap-bloc-2);} .apropos__bloc--clients{color:#06171c;} .apropos__bloc--clients::before{background:#36bcd3;clip-path:url(#ap-bloc-3);} .apropos__bloc-image{display:none;} .apropos__titre{ font-family:'Bebas', sans-serif; font-weight:400; line-height:1; text-wrap:balance; margin:0 0 1.5rem; } h1.apropos__titre{font-size:3.4rem;} h2.apropos__titre{font-size:2.6rem;} .apropos__bloc p + p, .apropos__bloc ul + p, .apropos__bloc p + ul{margin-top:1rem;} .apropos__bloc li{position:relative;padding-left:1.5rem;} .apropos__bloc li::before{content:'–';position:absolute;left:0;} .apropos__bloc--communaute li::before{color:#36bcd3;} .apropos__bloc strong{font-weight:800;} .apropos__bloc a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em;} /* Fin de page : deux encarts emboîtés, stylés par le thème comme les 5e et 6e encarts de l'accueil. Les cales vides occupent les positions 3 et 4 du
pour que nth-child(5) et (6) tombent juste. */ .apropos__cale{display:none;} /* Icônes de pied de page ajoutées (GitHub, WordPress.org), sur le modèle de .linkedin. */ .github{background-image:url(../img/icon/github.svg);} .wordpress{background-image:url(../img/icon/wordpress.svg);} .apropos .encart-home{ color:#fff; margin-top:3rem; } .apropos .encart-home + .encart-home{margin-top:0;} /* Le thème dimensionne le bloc de texte sur son contenu (60vw au plus) : les deux blocs sont courts ici, la crête latérale flottait entre le texte et la bande de l'autre encart. On fixe la largeur. */ @media (min-width:781px){ .apropos .encart-home .encart-home__text{width:60vw;} /* Hors emboîtement (petits écrans), les 115px réservés sous les polaroïds ne servent à rien. */ .apropos .encart-home--loisirs .encart-home__text{padding-bottom:3rem;} } @media (min-width:1200px) and (min-height:800px){ /* Emboîtement : l'encart contact remonte sur ces 115px et mord sur le bas de la pile, c'est voulu. */ .apropos .encart-home--loisirs .encart-home__text{padding-bottom:115px;} } /* Teintes sombres, plus proches des blocs de la page que du dégradé de l'accueil : les trois premiers bleus du thème (bande de gauche, polaroïds, contact), crêtes comprises (mêmes tracés que formes-2026.css). */ /* Sur l'accueil, la bande de gauche du 5e encart prolonge le 4e : ici il n'y a rien à prolonger. */ .apropos .encart-home--loisirs::before{display:none;} .apropos .encart-home--loisirs .encart-home__text, .apropos .encart-home--contact::before{background:rgb(28,42,56);} .apropos .encart-home--contact .encart-home__text{background:rgb(40,76,112);} .apropos .encart-home--loisirs .encart-home__text::before{background-image:url('data:image/svg+xml;charset=UTF-8,');} .apropos .encart-home--loisirs .encart-home__text::after{background-image:url('data:image/svg+xml;charset=UTF-8,');} .apropos .encart-home--contact .encart-home__text::before{background-image:url('data:image/svg+xml;charset=UTF-8,');} .apropos .encart-home--contact .encart-home__text::after{background-image:url('data:image/svg+xml;charset=UTF-8,');} /* Le thème force l'affichage des h2 d'encart : le titre reste pour les lecteurs d'écran seulement. */ .apropos .encart-home--loisirs h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;} /* Le thème estompe un encart (.next) dès que le suivant arrive : pas pour les polaroïds, on les regarde. */ .apropos .encart-home.next .encart-home__text *{opacity:1;} /* …sauf la phrase des polaroïds, qui reste réservée au survol. */ .apropos .encart-home.next .polaroid__mot{opacity:0;} .apropos .encart-home.next .polaroid:hover .polaroid__mot, .apropos .encart-home.next .polaroid:focus-within .polaroid__mot{opacity:1;} /* Les polaroïds : petits, posés en désordre, qui se chevauchent franchement */ .polaroids{ list-style:none; display:flex; flex-wrap:wrap; /* Sans étirement : une carte décalée vers le bas allongerait toutes celles de sa rangée. */ align-items:flex-start; gap:0; margin:0 auto; /* Les cartes mordent les unes sur les autres : on leur laisse de la place à droite pour ne pas sortir de l'encart. */ padding:.5rem 2rem 0 0; /* Six cartes, toujours en deux rangées de trois (3 × 168px, moins les deux chevauchements). */ max-width:calc(460px + 2rem); } .polaroid{ position:relative; width:168px; /* Les rangées se mordent aussi, légèrement. */ margin:0 -22px -6px 0; padding:7px 7px 2.1rem; background:#f4efe6; color:#0b2530; box-shadow:4px 7px 12px rgba(5,15,20,.45); transform:translate(var(--depart, 0), 0) rotate(var(--inclinaison, 0deg)); transition:transform .8s cubic-bezier(.2, .8, .2, 1); } .polaroid--en-place{transform:translate(0, 0) rotate(var(--inclinaison, 0deg));} .polaroid:nth-child(odd){--depart:-2.5rem;} .polaroid:nth-child(even){--depart:2.5rem;} .polaroid:hover, .polaroid:focus-within{z-index:5;transform:translate(0, -.35rem) rotate(0deg);} /* Le désordre des cartes suit leur rang, pas leur sujet : les cartes se gèrent dans l'admin. */ .polaroid:nth-child(1){--inclinaison:-6deg;} .polaroid:nth-child(2){--inclinaison:3deg;margin-top:1.25rem;} .polaroid:nth-child(3){--inclinaison:-4deg;margin-top:.5rem;} .polaroid:nth-child(4){--inclinaison:4deg;margin-top:1.25rem;} .polaroid:nth-child(5){--inclinaison:-2deg;} .polaroid:nth-child(6){--inclinaison:5deg;margin-top:.75rem;} .polaroid__photo{ display:block; aspect-ratio:7 / 9; overflow:hidden; background:#0b2530; } .polaroid__photo img{display:block;width:100%;height:100%;object-fit:cover;} .polaroid__legende{ position:absolute; left:7px; right:7px; bottom:.55rem; font-family:'Bebas', sans-serif; font-size:1.15rem; line-height:1; letter-spacing:.03em; text-align:center; } .polaroid__legende a{color:#00717a;text-decoration:none;} /* La phrase n'apparaît qu'au survol ou au focus : la carte reste une photo. */ .polaroid__mot{ position:absolute; left:7px; right:7px; top:7px; bottom:2.1rem; display:flex; align-items:center; padding:.6rem; background:rgba(11,37,48,.86); color:#fff; font-size:.82rem; line-height:1.4; text-align:center; opacity:0; transition:opacity .25s ease-out; } .polaroid:hover .polaroid__mot, .polaroid:focus-within .polaroid__mot{opacity:1;} .polaroid__mot a{color:#7ef3ff;} .polaroid__legende a:focus-visible, .polaroid__mot a:focus-visible{outline:2px solid #36bcd3;outline-offset:2px;} .apropos .encart-home--contact p{max-width:30rem;} .apropos a:focus-visible{outline:2px solid #36bcd3;outline-offset:2px;} @media (max-width:1050px){ .apropos__defile{grid-template-columns:minmax(0, 300px) minmax(0, 1fr);gap:2.5rem;} } @media (max-width:860px){ /* Pas de colonne fixe : chaque bloc porte son image, au-dessus de son texte. */ .apropos__defile{display:block;} .apropos__visuel{display:none;} .apropos__bloc{min-height:0;padding:2.5rem 1.5rem 3rem;margin-bottom:3rem;} .apropos__bloc-image{ display:block; width:min(60%, 260px); /* L'attribut height de l'image prendrait le pas sur le ratio. */ height:auto; aspect-ratio:1; object-fit:cover; margin:-5rem auto 1.5rem; clip-path:var(--forme-portrait); } .apropos__bloc--communaute .apropos__bloc-image{clip-path:var(--forme-communaute);} .apropos__bloc--clients .apropos__bloc-image{clip-path:var(--forme-clients);} .apropos__bloc{margin-top:5rem;} h1.apropos__titre{font-size:2.6rem;} h2.apropos__titre{font-size:2.1rem;} .polaroid{width:132px;margin-right:-14px;padding-bottom:1.8rem;} .polaroid__legende{font-size:1rem;} } @media (max-width:500px){ } @media (prefers-reduced-motion:reduce){ .apropos__visuel, .apropos__image, .polaroid, .polaroid__mot{transition:none;} .polaroid{--depart:0;} }