/* ==========================================================================
   DDEC — finitions (relecture « directeur artistique », 23 octobre 2026)
   Règles génériques : un composant = un même rendu sur toutes les pages.
   Chargée après ddec.css et compositions.css (site et éditeur).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Menu mobile ouvert : les sous-menus reprenaient le style « carte flottante
      centrée » du bureau (décalés de 50 %, coupés à gauche). On les remet dans
      le flux, alignés à gauche, en liste simple sous leur rubrique.
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open{--navigation-layout-justification-setting:flex-start;--navigation-layout-justify:flex-start}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{align-items:stretch!important;text-align:left}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:0!important;width:100%}
.ddec-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container>.wp-block-navigation-item{
	display:block;width:100%;border-radius:0;background:none!important;padding:1rem 0;border-top:1px solid var(--ddec-line-strong)
}
.ddec-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container>.wp-block-navigation-item:first-child{border-top:0;padding-top:0}
.ddec-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content{padding:0!important;border-radius:0}
.ddec-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container>.wp-block-navigation-submenu>.wp-block-navigation__submenu-container{
	position:static!important;top:auto!important;left:auto!important;right:auto!important;translate:none!important;
	box-shadow:none!important;background:transparent!important;border-radius:0!important;padding:.5rem 0 0!important;min-width:0!important;width:100%;
	opacity:1!important;visibility:visible!important;height:auto!important;gap:0!important
}
.ddec-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before{display:none}
.ddec-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
	padding:.45rem 0!important;border-radius:0;white-space:normal;color:var(--ddec-encre)
}
.ddec-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.ddec-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .current-menu-item>.wp-block-navigation-item__content{background:none;text-decoration:underline;text-decoration-color:var(--ddec-jaune);text-decoration-thickness:2px;text-underline-offset:5px}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{font-size:1.25rem}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{font-size:1rem}

/* --------------------------------------------------------------------------
   2. Sections arrondies : même retrait latéral partout. Posées dans un contenu
      à marges globales (pages composées, accueil, corps des pages), elles
      étaient décalées de la marge du site en plus (52 px au lieu de 20 px à
      1440) : l'en-tête brume des pages et les sections suivantes ne
      s'alignaient pas.
   -------------------------------------------------------------------------- */
@media (min-width:782px){
	.has-global-padding>.is-style-section-arrondie.alignfull{
		margin-left:calc(var(--wp--style--root--padding-left) * -1 + clamp(.5rem,1.5vw,1.25rem))!important;
		margin-right:calc(var(--wp--style--root--padding-right) * -1 + clamp(.5rem,1.5vw,1.25rem))!important
	}
}

/* --------------------------------------------------------------------------
   3. Étiquettes (« ddec-tag ») : jamais étirées sur toute la largeur d'une carte
      en colonne, et toujours une pastille visible (blanche sur fond brume).
   -------------------------------------------------------------------------- */
.ddec-tag{align-self:flex-start;width:fit-content;max-width:100%}
.is-style-carte-survol:not(.has-background) .ddec-tag,.is-style-carte-survol.has-brume-background-color .ddec-tag,
.has-brume-background-color .is-style-carte-survol:not(.has-background) .ddec-tag{background:#fff}
.is-style-carte-blanche .ddec-tag,.is-style-carte-survol.has-blanc-background-color .ddec-tag{background:var(--ddec-brume)}

/* --------------------------------------------------------------------------
   4. Boutons : le bouton « flèche » (pastille de 18 px) mesurait 53 px contre
      52 px pour ses voisins (contour, clair) : même hauteur dans un groupe.
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-fleche>.wp-block-button__link::before{margin-block:-2px}

/* --------------------------------------------------------------------------
   5. Cartes côte à côte dans des colonnes : même hauteur (une carte seule dans
      sa colonne remplit la colonne), sauf si l'on a choisi un alignement vertical.
   -------------------------------------------------------------------------- */
.wp-block-columns:not([class*="are-vertically-aligned"])>.wp-block-column:not([class*="is-vertically-aligned"])>:is(.is-style-carte,.is-style-carte-blanche,.is-style-encadre):only-child{height:100%;box-sizing:border-box}

/* --------------------------------------------------------------------------
   6. Colonnes à filets (engagements…) : le lien fléché se cale en pied de
      colonne, à la même hauteur dans toutes les colonnes.
   -------------------------------------------------------------------------- */
.ddec-filets>.wp-block-column{display:flex;flex-direction:column}
.ddec-filets>.wp-block-column>.is-style-lien-fleche:last-child{margin-top:auto!important;padding-top:var(--wp--preset--spacing--30)}

/* --------------------------------------------------------------------------
   7. Frise d'étapes : le pointillé s'arrête sur la dernière pastille (il
      dépassait vers la droite quel que soit le nombre d'étapes).
   -------------------------------------------------------------------------- */
@media (min-width:782px){
	.ddec-etapes:has(>.wp-block-column:nth-child(2):last-child)::before{right:calc(50% - 3rem)}
	.ddec-etapes:has(>.wp-block-column:nth-child(3):last-child)::before{right:calc(100% / 3 - 3rem)}
	.ddec-etapes:has(>.wp-block-column:nth-child(4):last-child)::before{right:calc(25% - 3rem)}
	.ddec-etapes:has(>.wp-block-column:nth-child(5):last-child)::before{right:calc(20% - 3rem)}
}

/* --------------------------------------------------------------------------
   8. En-tête aux largeurs intermédiaires (tablette, petit portable) : le menu
      passait sur deux lignes et le bouton se cassait entre 782 et 1279 px.
      Le bouton « Trouver un établissement » (déjà dans le menu Familles) se
      retire sous 1280 px, et le menu passe en « burger » sous 1100 px.
   -------------------------------------------------------------------------- */
@media (max-width:1279px){.ddec-entete .ddec-entete__cta{display:none}}
@media (min-width:600px) and (max-width:1099px){
	.ddec-entete .wp-block-navigation__responsive-container-open:not(.always-shown){display:inline-grid}
	.ddec-entete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
	.ddec-entete .wp-block-navigation__responsive-container.is-menu-open{display:flex;position:fixed;inset:0;z-index:100000;flex-direction:column}
	.ddec-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{display:grid}
}
.has-encre-background-color .ddec-tag,.has-encre-nuit-background-color .ddec-tag{background:rgba(255,255,255,.14);color:#fff}

/* --------------------------------------------------------------------------
   9. En-tête de page en mobile : la photo en arche (4/5, pleine largeur)
      occupait tout le premier écran ; on la ramène à 300 px de large.
   -------------------------------------------------------------------------- */
@media (max-width:781px){
	main>.is-style-section-arrondie:first-child :is(.wp-block-post-featured-image,.wp-block-image).is-style-arche,
	.wp-block-post-content>.is-style-section-arrondie:first-child .wp-block-image.is-style-arche{max-width:300px}
}

/* --------------------------------------------------------------------------
   10. Lien fléché sur deux lignes : la flèche suit le texte au lieu d'être
       rejetée au bord droit (l'ancien inline-flex séparait texte et flèche).
   -------------------------------------------------------------------------- */
.is-style-lien-fleche a,.ddec-lien-fleche{display:inline}
.is-style-lien-fleche a::after,.ddec-lien-fleche::after{display:inline-block;margin-left:.5rem}

/* --------------------------------------------------------------------------
   11. Mobile : les illustrations posées en colonne (à côté d'un texte)
       s'empilent au-dessus du texte ; on les garde à une taille d'appoint.
   -------------------------------------------------------------------------- */
@media (max-width:781px){
	.wp-block-column>.ddec-illustration img{max-width:min(100%,220px)}
}