/* =========================================================
Diwan Reem — page d'accueil « pro » (mobile d'abord)
========================================================= */
/* Ouverture : image en premier sur mobile, à droite sur ordinateur */
.diwan-hero__titre {
font-size: clamp(2.25rem, 6vw, 4rem);
line-height: 1.08;
margin-top: 0.5rem;
max-width: 14ch;
}
.diwan-hero__accroche {
font-size: 1.0625rem;
max-width: 38ch;
}
.diwan-hero .is-style-arche {
max-width: 520px;
margin-inline: auto;
}
@media (min-width: 782px) {
.diwan-hero__colonnes {
flex-direction: row-reverse;
}
.diwan-hero {
min-height: min(88vh, 900px);
display: flex;
flex-direction: column;
justify-content: center;
}
}
.diwan-hero__preuves {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin-top: var(--wp--preset--spacing--40);
color: var(--wp--preset--color--gris-chaud);
}
.diwan-hero__preuves span {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.diwan-hero__preuves span::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wp--preset--color--champagne);
}
/* Bouton secondaire « lien discret » : texte souligné, sans fond */
.wp-block-button.is-style-diwan-lien .wp-block-button__link {
background: transparent;
color: var(--wp--preset--color--nuit);
padding: 0.75rem 0;
min-height: 44px;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--wp--preset--color--champagne);
}
.wp-block-button.is-style-diwan-lien .wp-block-button__link:hover {
background: transparent;
color: var(--wp--preset--color--bronze);
}
/* Lien avec flèche */
.diwan-lien-fleche a {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 44px;
color: var(--wp--preset--color--nuit);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid var(--wp--preset--color--champagne);
}
.diwan-lien-fleche a::after {
content: "\2192";
transition: transform 0.25s ease;
}
.diwan-lien-fleche a:hover::after {
transform: translateX(4px);
}
.diwan-lien-fleche--clair a {
color: var(--wp--preset--color--champagne);
}
/* Engagements : 2 × 2 sur mobile, 4 sur ordinateur */
.diwan-engagements__grille {
gap: 1rem !important;
}
.diwan-engagement {
text-align: center;
align-items: center !important;
gap: 0.25rem !important;
padding: 1.25rem 0.5rem;
}
.diwan-engagement::before {
content: "";
width: 28px;
height: 28px;
margin-bottom: 0.5rem;
background-color: var(--wp--preset--color--bronze);
-webkit-mask: var(--diwan-icone) no-repeat center / contain;
mask: var(--diwan-icone) no-repeat center / contain;
}
.diwan-engagement__titre {
margin: 0;
font-weight: 500;
font-size: 0.9375rem;
}
.diwan-engagement__texte {
margin: 0;
font-size: 0.8125rem;
color: var(--wp--preset--color--gris-chaud);
}
.diwan-icone--livraison { --diwan-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
.diwan-icone--paiement { --diwan-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); }
.diwan-icone--taille { --diwan-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E"); }
.diwan-icone--conseil { --diwan-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); }
/* Section « La maison » sur fond nuit */
.diwan-maison .diwan-maison__texte {
color: rgba(242, 234, 226, 0.82);
max-width: 46ch;
}
.diwan-maison .diwan-maison__vers {
text-align: left;
max-width: 46ch;
color: var(--wp--preset--color--champagne);
margin: var(--wp--preset--spacing--40) 0;
}
.diwan-cadre {
position: relative;
max-width: 460px;
margin-inline: auto;
}
.diwan-cadre img {
aspect-ratio: 4 / 5;
object-fit: cover;
width: 100%;
}
.diwan-cadre::after {
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(204, 175, 152, 0.55);
pointer-events: none;
}
/* Étapes */
.diwan-etapes__grille {
gap: var(--wp--preset--spacing--40) !important;
}
.diwan-etape {
gap: 0.5rem !important;
padding-top: 1.25rem;
border-top: 1px solid var(--wp--preset--color--champagne);
}
.diwan-etape h3,
.diwan-etape p {
margin: 0;
}
.diwan-etape__numero {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 2.25rem;
line-height: 1;
color: var(--wp--preset--color--bronze);
}
/* FAQ (blocs « Détails » natifs) */
.diwan-faq__item {
border-bottom: 1px solid var(--wp--preset--color--perle-profond);
padding: 0;
margin: 0 !important;
}
.diwan-faq__item summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
min-height: 56px;
padding: 0.75rem 0;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.25rem;
font-weight: 500;
}
.diwan-faq__item summary::-webkit-details-marker {
display: none;
}
.diwan-faq__item summary::after {
content: "+";
font-family: var(--wp--preset--font-family--ibm-plex-sans);
font-size: 1.25rem;
color: var(--wp--preset--color--bronze);
transition: transform 0.25s ease;
}
.diwan-faq__item[open] summary::after {
transform: rotate(45deg);
}
.diwan-faq__item p {
margin: 0 0 1.25rem;
color: var(--wp--preset--color--gris-chaud);
}
/* Texte réservé aux lecteurs d'écran */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.diwan-lien-fleche a::after,
.diwan-faq__item summary::after {
transition: none;
}
}
/* Engagements : 4 colonnes égales sur ordinateur */
@media (min-width: 782px) {
.diwan-engagements__grille {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
/* Vers de la section sombre centré sur mobile */
@media (max-width: 781px) {
.diwan-maison .diwan-maison__vers {
text-align: center;
}
}
/* ==========================================================================
Accueil « البيت الأول » (v1.11) — sections diwan-a2-*
========================================================================== */
/* Ouverture */
.diwan-a2-ouverture .is-style-arche {
max-width: 440px;
margin-inline: auto;
}
.diwan-a2-titre {
letter-spacing: 0.01em;
line-height: 1.05;
}
.diwan-a2-ouverture .diwan-a2-sous-titre,
.diwan-a2-hero .diwan-a2-sous-titre {
font-family: var(--wp--preset--font-family--amiri);
font-size: clamp(1.25rem, 4.5vw, 1.6rem);
line-height: 1.7;
color: var(--wp--preset--color--bronze);
}
.diwan-a2-sous-titre .diwan-a2-fr {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-style: italic;
unicode-bidi: isolate;
}
/* Réassurance : une ligne, séparateurs « · » */
.diwan-a2-reassurance p {
margin: 0;
font-size: 0.8125rem;
letter-spacing: 0.04em;
}
.diwan-a2-reassurance p + p::before {
content: "·";
margin-inline-end: 0.75rem;
color: var(--wp--preset--color--champagne);
}
.diwan-a2-reassurance a {
color: inherit;
text-underline-offset: 0.2em;
}
/* Grille de la collection */
.diwan-a2-collection .wc-block-product {
position: relative;
}
.diwan-a2-collection .wc-block-product .diwan-nom-arabe {
margin: 0;
text-align: center;
font-size: 1.125rem;
line-height: 1.5;
}
.diwan-vendue {
margin: 0;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--wp--preset--color--nuit);
}
.wc-block-product .diwan-vendue {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 2;
padding: 0.35rem 0.6rem;
background: var(--wp--preset--color--perle);
}
.wc-block-product:has(.diwan-vendue) .wc-block-components-product-image img {
opacity: 0.55;
}
/* Votre taille ? */
.diwan-a2-tailles .wp-block-button__link {
min-width: 9.5rem;
min-height: 48px;
}
/* Les deux sœurs : côte à côte, même sur mobile */
.diwan-a2-soeurs .wp-block-image img {
aspect-ratio: 4 / 5;
object-fit: cover;
width: 100%;
}
.diwan-a2-soeurs .diwan-nom-arabe-fixe {
margin-top: 0;
font-family: var(--wp--preset--font-family--amiri);
font-size: 1.125rem;
color: var(--wp--preset--color--bronze);
}
/* Maison : petite ligne sous le vers */
.diwan-a2-signature {
font-size: 0.8125rem;
letter-spacing: 0.06em;
color: var(--wp--preset--color--champagne);
}
/* Réassurance sur mobile : les éléments passent sur deux lignes, sans point orphelin */
@media (max-width: 599px) {
.diwan-a2-reassurance {
column-gap: 1.25rem !important;
row-gap: 0.4rem !important;
}
.diwan-a2-reassurance p + p::before {
content: none;
}
}
/* Chaîne WhatsApp : le bouton reste masqué tant qu'il n'a pas de lien (il réapparaît dès qu'un lien est ajouté) */
.diwan-a2-whatsapp .wp-block-button:has(> .wp-block-button__link:not([href])),
.diwan-a2-whatsapp .wp-block-buttons:not(:has(.wp-block-button__link[href])) {
display: none;
}
/* ==========================================================================
Hero « les 12 abayas » (v1.13) — photo entière, jamais coupée
Mobile : photo sur toute la largeur (format d'origine), texte en dessous.
Tablette : photo entière centrée, côtés remplis par la même photo floutée.
Ordinateur (≥ 1200 px) : section à la hauteur de l'écran, texte en bas à
gauche sur un léger dégradé, dans la marge floutée (il ne cache aucune abaya).
========================================================================== */
.diwan-a2-hero {
position: relative;
overflow: hidden;
isolation: isolate;
}
.diwan-a2-hero .diwan-a2-hero__photo {
position: relative;
z-index: 1;
margin: 0;
}
.diwan-a2-hero .diwan-a2-hero__photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: contain;
}
.diwan-a2-hero__texte {
position: relative;
z-index: 2;
background: var(--wp--preset--color--perle);
}
.diwan-a2-hero__texte .diwan-a2-titre {
margin: 0;
}
@media (min-width: 600px) {
/* Fond : la même photo, très floutée */
.diwan-a2-hero::before {
content: "";
position: absolute;
inset: -60px;
z-index: 0;
background: url("../images/hero-abayas-flou.webp") center / cover no-repeat;
filter: blur(28px) saturate(0.9);
transform: scale(1.08);
}
.diwan-a2-hero .diwan-a2-hero__photo {
display: flex;
justify-content: center;
height: min(80svh, 900px);
}
.diwan-a2-hero .diwan-a2-hero__photo img {
width: auto;
height: 100%;
}
}
@media (min-width: 1200px) {
.diwan-a2-hero {
--diwan-hero-h: clamp(560px, calc(100svh - 80px), 1000px);
height: var(--diwan-hero-h);
}
.diwan-a2-hero .diwan-a2-hero__photo {
height: 100%;
}
/* Léger dégradé sombre en bas */
.diwan-a2-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to top, rgba(22, 16, 27, 0.62) 0%, rgba(22, 16, 27, 0.28) 28%, rgba(22, 16, 27, 0) 55%);
}
/* Texte dans la marge de gauche : largeur = (écran − photo) / 2 */
.diwan-a2-hero__texte {
position: absolute;
left: 0;
bottom: 0;
width: calc((100% - var(--diwan-hero-h) * 0.75) / 2);
padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important;
background: none;
color: var(--wp--preset--color--perle);
text-align: left;
}
.diwan-a2-hero__texte .diwan-a2-titre {
text-align: left !important;
color: var(--wp--preset--color--perle);
font-size: clamp(2.5rem, 3.4vw, 3.5rem) !important;
}
.diwan-a2-hero__texte .diwan-a2-sous-titre {
text-align: left !important;
color: var(--wp--preset--color--champagne) !important;
}
.diwan-a2-hero__texte .wp-block-buttons {
justify-content: flex-start !important;
}
}
/* ==========================================================================
Propositions de hero (v1.15) — aperçus
diwan-a3-arcs : 3 abayas dans des arcs (fond Perle ou Nuit)
diwan-a3-ambiance : photo d'ambiance (Unsplash, Pawel Czerwinski), texte par-dessus
========================================================================== */
.diwan-a3-arcs .diwan-a3-arcs__rangee {
gap: var(--wp--preset--spacing--40);
margin-block: var(--wp--preset--spacing--40);
}
.diwan-a3-arcs .diwan-a3-arcs__rangee .is-style-arche {
margin-bottom: 0.75rem;
}
.diwan-a3-arcs .diwan-a3-arcs__nom {
margin: 0;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: 1.125rem;
}
.diwan-a3-arcs .diwan-a3-arcs__nom-ar {
margin: 0;
font-family: var(--wp--preset--font-family--amiri);
color: var(--wp--preset--color--bronze);
}
.diwan-a3-arcs.has-nuit-background-color .diwan-a3-arcs__nom-ar,
.diwan-a3-arcs.has-nuit-background-color .diwan-a2-sous-titre {
color: var(--wp--preset--color--champagne);
}
/* Mobile : défilement horizontal des 3 arcs (la 2e est entrevue pour inviter au geste) */
@media (max-width: 781px) {
.diwan-a3-arcs .diwan-a3-arcs__rangee {
flex-wrap: nowrap !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin-inline: calc(-1 * var(--wp--style--root--padding-left, 16px));
padding-inline: 16px;
gap: 14px;
}
.diwan-a3-arcs .diwan-a3-arcs__rangee::-webkit-scrollbar {
display: none;
}
.diwan-a3-arcs .diwan-a3-arcs__rangee > .wp-block-column {
flex: 0 0 70% !important;
scroll-snap-align: center;
}
}
.diwan-a3-ambiance {
position: relative;
overflow: hidden;
isolation: isolate;
min-height: min(88svh, 760px);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.diwan-a3-ambiance .diwan-a3-ambiance__photo {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
}
.diwan-a3-ambiance .diwan-a3-ambiance__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
}
/* Dégradé sombre en bas pour la lisibilité du texte */
.diwan-a3-ambiance::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to top, rgba(22, 16, 27, 0.72) 0%, rgba(22, 16, 27, 0.35) 34%, rgba(22, 16, 27, 0) 62%);
}
.diwan-a3-ambiance .diwan-a3-ambiance__texte {
position: relative;
z-index: 2;
color: var(--wp--preset--color--perle);
}
.diwan-a3-ambiance .diwan-a3-ambiance__texte .diwan-a2-titre {
color: var(--wp--preset--color--perle);
}
.diwan-a3-ambiance .diwan-a3-ambiance__texte .diwan-a2-sous-titre {
color: var(--wp--preset--color--champagne);
}
@media (min-width: 782px) {
.diwan-a3-ambiance {
min-height: clamp(560px, calc(100svh - 80px), 900px);
}
/* Ordinateur : version paysage de la photo */
.diwan-a3-ambiance .diwan-a3-ambiance__photo img {
visibility: hidden;
}
.diwan-a3-ambiance .diwan-a3-ambiance__photo {
background: url("../images/ambiance-ordinateur.webp") center 35% / cover no-repeat;
}
}
/* ==========================================================================
Accueil v4 (2026-10-18) : entêtes numérotés, réassurance avec icônes,
tailles en liste, FAQ en accordéon, manifeste (citation + vers).
========================================================================== */
.diwan-a4-index{margin:0;font-family:var(--wp--preset--font-family--ibm-plex-sans);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wp--preset--color--bronze)}
.has-nuit-background-color .diwan-a4-index{color:var(--wp--preset--color--champagne)}
.diwan-a4-entete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:var(--wp--preset--spacing--50)!important}
.diwan-a4-entete h2{margin:.4rem 0 0}
.diwan-a4-entete p{margin:0}
.diwan-a4-entete__texte{max-width:34rem}
.diwan-a4-lien a{font-family:var(--wp--preset--font-family--ibm-plex-sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--wp--preset--color--nuit);border-bottom:1px solid currentColor;padding-bottom:.2rem;transition:color .2s}
.diwan-a4-lien a:hover{color:var(--wp--preset--color--zellige)}
.diwan-a4-lien a::after{content:" \2192"}
.diwan-a4-reassurance{gap:.75rem 2.75rem!important}
.diwan-a4-reassurance p{display:flex;align-items:center;gap:.6rem;margin:0;font-family:var(--wp--preset--font-family--ibm-plex-sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.diwan-a4-reassurance.diwan-a4-reassurance p::before{content:"";margin:0;width:20px;height:20px;flex:none;background:var(--wp--preset--color--bronze);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.diwan-a4-reassurance a{color:inherit}
.diwan-a4-ico-livraison{--ico:url("data:image/svg+xml,")}
.diwan-a4-ico-paiement{--ico:url("data:image/svg+xml,")}
.diwan-a4-ico-echange{--ico:url("data:image/svg+xml,")}
.diwan-a4-ico-taille{--ico:url("data:image/svg+xml,")}
.diwan-a4-manifeste{text-align:center}
.diwan-a4-manifeste__phrase{max-width:17ch;margin:1.25rem auto 0!important;font-size:clamp(2rem,6vw,3.6rem)!important;line-height:1.15;font-weight:400}
.diwan-a4-manifeste__phrase em{color:var(--wp--preset--color--bronze)}
.diwan-a4-manifeste .is-style-vers{margin-top:var(--wp--preset--spacing--50)!important}
.diwan-a4-manifeste__note{margin-top:1rem!important;color:var(--wp--preset--color--gris-chaud)}
.diwan-a4-soeurs .wp-block-column:nth-child(2){margin-top:clamp(2.5rem,9vw,7rem)}
.diwan-a4-soeurs h3{font-size:1.35rem}
.diwan-a4-soeurs h3 a{text-decoration:none;color:inherit}
.diwan-a4-tailles__liste{margin-top:var(--wp--preset--spacing--40)}
.diwan-a4-tailles__ligne{margin:0!important;border-top:1px solid rgba(22,16,27,.14)}
.diwan-a4-tailles__ligne:last-child{border-bottom:1px solid rgba(22,16,27,.14)}
.diwan-a4-tailles__ligne a{display:grid;grid-template-columns:4.5rem 1fr 1.5rem;align-items:center;gap:1rem;padding:1.15rem .5rem;min-height:44px;text-decoration:none;color:var(--wp--preset--color--nuit);transition:padding-left .25s ease,background-color .25s ease}
.diwan-a4-tailles__ligne a:hover,.diwan-a4-tailles__ligne a:focus-visible{padding-left:1rem;background:rgba(242,234,226,.6)}
.diwan-a4-t-num{font-family:var(--wp--preset--font-family--cormorant-garamond);font-size:2.4rem;line-height:1;color:var(--wp--preset--color--bronze)}
.diwan-a4-t-haut{font-size:1.2rem;white-space:nowrap}
.diwan-a4-t-haut small{display:block;margin-top:.15rem;font-size:.85rem;color:var(--wp--preset--color--gris-chaud)}
.diwan-a4-t-fleche{justify-self:end;color:var(--wp--preset--color--bronze);transition:transform .25s ease}
.diwan-a4-tailles__ligne a:hover .diwan-a4-t-fleche{transform:translateX(4px)}
.diwan-a4-tailles__note{margin-top:var(--wp--preset--spacing--40)!important;color:var(--wp--preset--color--gris-chaud)}
.diwan-a4-faq .wp-block-details{border-top:1px solid rgba(22,16,27,.14);margin-top:0!important;margin-bottom:0!important;padding:0}
.diwan-a4-faq .wp-block-details:last-of-type{border-bottom:1px solid rgba(22,16,27,.14)}
.diwan-a4-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 0;min-height:44px;font-family:var(--wp--preset--font-family--cormorant-garamond);font-size:1.35rem;line-height:1.3}
.diwan-a4-faq summary::-webkit-details-marker{display:none}
.diwan-a4-faq summary::after{content:"+";flex:none;font-family:var(--wp--preset--font-family--ibm-plex-sans);font-size:1.4rem;font-weight:300;color:var(--wp--preset--color--bronze);transition:transform .25s ease}
.diwan-a4-faq details[open] summary::after{transform:rotate(45deg)}
.diwan-a4-faq summary:focus-visible{outline:2px solid var(--wp--preset--color--zellige);outline-offset:4px}
.diwan-a4-faq .wp-block-details p{margin:0 0 1.25rem!important;max-width:62ch;color:var(--wp--preset--color--gris-chaud)}
.diwan-a4-faq .wp-block-details p a{color:var(--wp--preset--color--zellige)}
@media (max-width:599px){.diwan-a4-tailles__ligne a{grid-template-columns:3.25rem 1fr 1.25rem;gap:.75rem}.diwan-a4-t-num{font-size:2rem}.diwan-a4-reassurance{justify-content:flex-start!important;gap:.65rem!important}}
@media (prefers-reduced-motion:reduce){.diwan-a4-tailles__ligne a,.diwan-a4-t-fleche,.diwan-a4-faq summary::after{transition:none}}
/* ==========================================================================
Hero « Les deux sœurs » (2026-10-19)
Mobile et tablette : photo puis texte dessous.
Ordinateur (≥ 782 px) : photo panoramique en fond (préchargée, voir inc/blocs.php).
Grand écran (≥ 1200 px) : texte foncé posé à gauche, sur le mur clair.
========================================================================== */
.diwan-a5-hero {
position: relative;
}
.diwan-a5-hero .diwan-a5-hero__photo {
position: relative;
margin: 0;
}
.diwan-a5-hero .diwan-a5-hero__photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 570 / 613;
object-fit: cover;
}
.diwan-a5-hero .diwan-a5-hero__texte {
text-align: center;
color: var(--wp--preset--color--nuit);
}
.diwan-a5-hero .diwan-a2-titre {
margin: 0;
color: var(--wp--preset--color--nuit);
}
.diwan-a5-hero .diwan-a2-sous-titre {
margin-top: 0.5rem;
}
@media (min-width: 782px) {
.diwan-a5-hero .diwan-a5-hero__photo {
aspect-ratio: 1584 / 613;
background: url("../images/hero-deux-soeurs-ordinateur.webp") center / cover no-repeat;
}
.diwan-a5-hero .diwan-a5-hero__photo img {
position: absolute;
inset: 0;
height: 100%;
visibility: hidden;
}
}
@media (min-width: 1200px) {
.diwan-a5-hero {
display: grid;
}
.diwan-a5-hero > .diwan-a5-hero__photo,
.diwan-a5-hero > .diwan-a5-hero__texte {
grid-area: 1 / 1;
}
.diwan-a5-hero > .diwan-a5-hero__texte {
z-index: 1;
align-self: center;
justify-self: start;
width: min(30vw, 440px);
margin-left: clamp(2rem, 4.5vw, 5rem) !important;
padding: 0 !important;
text-align: left;
}
.diwan-a5-hero .diwan-a2-titre {
text-align: left !important;
font-size: clamp(3rem, 4.5vw, 4.5rem) !important;
}
.diwan-a5-hero .diwan-a2-sous-titre {
text-align: left !important;
}
.diwan-a5-hero .wp-block-buttons {
justify-content: flex-start !important;
}
}