@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}.elementor-shape{direction:ltr;left:0;line-height:0;overflow:hidden;position:absolute;width:100%}.elementor-shape-top{top:-1px}.elementor-shape-top:not([data-negative=false]) svg{z-index:-1}.elementor-shape-bottom{bottom:-1px}.elementor-shape-bottom:not([data-negative=true]) svg{z-index:-1}.elementor-shape[data-negative=false].elementor-shape-bottom,.elementor-shape[data-negative=true].elementor-shape-top{transform:rotate(180deg)}.elementor-shape svg{display:block;left:50%;position:relative;transform:translateX(-50%);width:calc(100% + 1.3px)}.elementor-shape .elementor-shape-fill{fill:#fff;transform:rotateY(0deg);transform-origin:center}.df-portraits {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 20px;
align-items: start;
} .df-portraits .df-portraits__item button.df-portraits__carte,
.df-portraits .df-portraits__item button.df-portraits__carte:hover,
.df-portraits .df-portraits__item button.df-portraits__carte:focus {
all: unset;
box-sizing: border-box;
display: block;
width: 100%;
margin: 0;
padding: 0 !important;
line-height: normal !important;
border: 0;
background: none;
cursor: pointer;
text-align: left;
} .df-portraits .df-portraits__item button.df-portraits__carte:focus-visible {
outline: 3px solid var(--df-lien, #0700DD);
outline-offset: 3px;
}
.df-portraits__cadre {
display: block;
overflow: hidden;
border-bottom: 4px solid var(--df-accent, #00FF83);
}
.df-portraits .df-portraits__photo {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
transition: transform .25s;
}
.df-portraits__carte:hover .df-portraits__photo,
.df-portraits__carte:focus-visible .df-portraits__photo {
transform: scale(1.04);
} .df-portraits__nom {
display: block;
margin-top: 8px;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
}
.df-portraits__lien {
display: block;
margin-top: 2px;
font-size: 15px;
color: var(--df-lien, #0700DD);
} .df-portraits__modal {
border: 0;
padding: 0;
width: min(760px, calc(100% - 32px));
max-height: calc(100% - 32px);
overflow: auto;
background: #fff;
color: #000;
box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.df-portraits__modal::backdrop {
background: rgba(0, 0, 0, .7);
}
.df-portraits__modal-grille {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.df-portraits__modal .df-portraits__modal-photo {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
border-right: 6px solid var(--df-accent, #00FF83);
}
.df-portraits__modal-texte {
padding: 28px 26px 24px;
}
.df-portraits__modal .df-portraits__modal-titre {
margin: 0 44px 14px 0;
font-size: 26px;
line-height: 1.15;
color: inherit;
}
.df-portraits__modal-corps {
font-size: 16px;
line-height: 1.45;
}
.df-portraits__modal-corps p {
margin: 0 0 10px;
}
.df-portraits__modal-corps ul {
margin: 0 0 14px;
padding-left: 20px;
}
.df-portraits__modal-corps a {
color: var(--df-lien, #0700DD);
text-decoration: underline;
}
.df-portraits__modal button.df-portraits__fermer,
.df-portraits__modal button.df-portraits__fermer:hover,
.df-portraits__modal button.df-portraits__fermer:focus {
all: unset;
margin: 0;
padding: 0 !important;
border: 0;
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
text-align: center;
font-size: 30px;
line-height: 40px !important;
cursor: pointer;
color: #000;
background: var(--df-accent, #00FF83);
}
.df-portraits__modal button.df-portraits__fermer:focus-visible {
outline: 3px solid var(--df-lien, #0700DD);
}
@media (max-width: 600px) {
.df-portraits__modal-grille {
grid-template-columns: 1fr;
}
.df-portraits__modal .df-portraits__modal-photo {
height: auto;
aspect-ratio: 4 / 3;
border-right: 0;
border-bottom: 6px solid var(--df-accent, #00FF83);
}
.df-portraits__modal-texte {
padding: 20px 18px;
}
}