/*** Ajustements sur les classes du systeme de design ***/

/* Le gabarit met en <em> le suffixe « .fr » d'un titre de site qui se termine
   ainsi. Le nom de la classe suit le portage : .sdcd-header__service. */
.sdcd-header__service em {
    font-weight: lighter
}

/*** Fixes to Wagtail/Draftail output ***/
/* cf. https://github.com/wagtail/wagtail/issues/4431 */
p:empty {
    display: none;
}

.flex {
    display: flex;
}
/*** Prefix the classes defined here with cmsfr- ***/

/* Text alignment classes */
.cmsfr-text-left {
    text-align: left !important;
}

.cmsfr-text-center {
    text-align: center !important;
}

.cmsfr-text-right {
    text-align: right !important;
}

.cmsfr-hero {
    background-size: cover;
    background-repeat: no-repeat;
}

.cmsfr-hero-position--center {
    background-position: center;
}

.cmsfr-hero-position--top {
    background-position: top;
}

.cmsfr-hero-position--bottom {
    background-position: bottom;
}

.cmsfr-hero-large {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.cmsfr-hero-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cmsfr-hero-btns {
    display: flex;
}

.cmsfr-hero-btns--center {
    justify-content: center;
    align-items: center;
}

/* `left` et `right` ne sont pas des valeurs d'align-items : en colonne (mobile),
   les boutons d'un en-tete aligne a gauche se retrouvaient centres. */
.cmsfr-hero-btns--left {
    justify-content: flex-start;
    align-items: flex-start;
}

.cmsfr-hero-btns--right {
    justify-content: flex-end;
    align-items: flex-end;
}

.cmsfr-text-content--left {
    text-align: left;
}

.cmsfr-text-content--right {
    text-align: right;
}

.cmsfr-text-content--center {
    text-align: center;
}


.cmsfr-background-dark h1,
.cmsfr-background-dark p,
.cmsfr-background-dark button,
.cmsfr-background-dark ul {
    color: white;
}

/* This style rule prevents user agents from applying a margin-top to the figure tag while complying with dsfr */
/* L'image de l'en-tete large etait remontee de 40 px pour mordre sur
   l'en-tete du site : avec un bandeau d'information affiche, elle le
   recouvrait. Elle reste dans le flux. */
.cmsfr-without-margin {
    margin-top: 0;
}

/* Boutons poses sur une image assombrie : le secondaire (bleu sur bleu nuit)
   disparaissait. La regle ne valait que pour data-theme="light" pose
   explicitement — pas pour le reglage « systeme », qui n'ecrit rien sur <html>. */
.cmsfr-background-dark .sdcd-button--secondaire {
    color: #fff;
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
}
.cmsfr-background-dark .sdcd-button--secondaire:hover,
.cmsfr-background-dark .sdcd-button--secondaire:focus-visible {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.cmsfr-background-dark h1, .cmsfr-background-dark p { color: #fff; }

.cmsfr-author_card__header {
    flex: 0 0 6rem !important;
    width: 6rem !important;
}

.cmsfr-author-img {
    border-radius: 50%;
    height: 4.5rem !important;
    margin: 1.5rem;
    width: 4.5rem;
}

.cmsfr-vertical_contact_card__header {
    background: var(--background-default-grey);
}

/* Le portrait (rendu carre) est un medaillon de 120 px, centre. Etire a 100 %
   de la hauteur du media et a 50 % de sa largeur, il devenait une ellipse
   rognee. */
/* Selecteur a trois classes : .sdcd-card__media > div > img (SDCD) impose
   sinon width/height 100 % avec une specificite superieure. */
.sdcd-card__media .cmsfr-vertical_contact_card__header .cmsfr-vertical_contact_card-img,
.cmsfr-vertical_contact_card-img {
    border-radius: 50%;
    height: 120px;
    width: 120px;
    margin: auto;
    max-width: none;
    padding: 0; /* sdcd-py-4 est pose sur l'image : en border-box, il l'aplatissait en ellipse */
    object-fit: cover;
    aspect-ratio: 1 / 1 !important;
}
.cmsfr-vertical_contact_card__header { display: flex; justify-content: center; }

/* Le navigateur applique `margin-inline-start: 40px` a tout <dd>. Dans un
   etapier, ce retrait decale la description de son propre intitule, sans rien
   apporter : la hierarchie est deja portee par la graisse du <dt>. La regle
   d'origine ne remettait a zero que le padding, jamais pose par le navigateur. */
.cmsfr-block-stepper dd,
.cmsfr-stepper__details dd {
    margin-inline-start: 0;
    padding-left: 0;
    /* Sans marge basse, la description d'une etape touchait l'intitule de la
       suivante : les six etapes se lisaient comme un seul bloc. Mesure : 0 px. */
    margin-bottom: var(--sdcd-3);
}

.cmsfr-stepper__details {
    display: inherit;
    margin-top: 1rem;
    width: 100%;
}

.cmsfr-display__inline {
    display: inline;
}

@media all and (max-width: 575px) {
    .cmsfr-order-mobile__2 {
        order: 2;
}
}

@media all and (min-width: 768px) {
    .cmsfr-order__2 {
        order: 2;
    }
}
.cmsfr-image-focus-left {
    object-position: left;
}

.cmsfr-image-focus-center {
    object-position: center;
}

.cmsfr-image-focus-right {
    object-position: right; 
}

.cmsfr-image-focus-top {
    object-position: top;
}

.cmsfr-image-focus-bottom {
    object-position: bottom;
}

/* Custom styling for multi-select filter tags */
/* Une etiquette de filtre active doit se distinguer : le gabarit rend un <a>
   porteur de aria-pressed, pas un <label>, et les couleurs viennent des jetons
   du systeme. L'ancienne regle visait label.fr-tag et des variables du DSFR :
   plus rien ne la declenchait, et tous les filtres avaient la meme apparence. */
.sdcd-tag[aria-pressed="true"] {
    background-color: var(--sdcd-action);
    color: var(--sdcd-sur-action);
    border-color: var(--sdcd-action);
}

.sdcd-tag[aria-pressed="false"] {
    background-color: var(--sdcd-fond-alt);
    color: var(--sdcd-encre-2);
}

/* La feuille du menu de compte du DSFR — 233 lignes ecrites contre
   .fr-usermenu, .fr-menu et .fr-header__tools-links — a ete retiree : plus aucun
   gabarit n'emet ces classes. Le menu rend maintenant .sdcd-dropdown, que le
   systeme de design habille lui-meme, impression comprise. Garder ces regles
   revenait a laisser croire que le composant etait style alors qu'il ne l'etait
   plus. */
/* wagtail-honeypot masque son champ piege avec `margin-left: 100vw` : il le
   pousse d'une largeur d'ecran vers la droite. Toute page portant un formulaire
   deborde donc horizontalement — mesure a 375 px, ou la page defilait jusqu'a
   552. La doctrine responsive du systeme l'interdit.

   On le decoupe sur place : sans surface, sans contribution au flux, et
   toujours soumis avec le formulaire, ce qui est tout l'interet du piege. Il
   porte deja aria-hidden et tabindex="-1", donc lecteurs d'ecran et clavier
   l'ignorent.

   Selecteur double a dessein : la feuille de la bibliotheque se charge apres la
   notre, et a specificite egale c'est l'ordre qui tranche. */
input[data-whf_name][data-whf_name] {
  /* `!important` sur cette seule propriete : le gabarit de la bibliotheque pose
     `margin-left: 100%` en style EN LIGNE, qu'aucun selecteur ne peut battre.
     C'est le seul cas ou la regle se justifie — et il est circonscrit a une
     declaration. */
  margin-left: 0 !important;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Cases a cocher et boutons radio des formulaires Wagtail : le widget natif
   fait 13 px, sous le minimum tactile de 24 px. */
.sdcd-checkbox input[type="checkbox"],
.sdcd-radio input[type="radio"],
.sdcd-champ input[type="checkbox"],
.sdcd-champ input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 2px 8px 2px 0;
    accent-color: var(--sdcd-action);
    vertical-align: middle;
}

/* Deux listes de boutons qui se suivent dans le flux : chacune est enveloppee
   par le flux de blocs, la regle du systeme sur `.sdcd-boutons + .sdcd-boutons`
   ne les voit donc pas. */
.cmsfr-block-buttons_list + .cmsfr-block-buttons_list { margin-top: var(--sdcd-3); }
/* Une liste de boutons dans le flux : un peu d'air apres elle, sinon le titre
   suivant lui collait. */
.cmsfr-block-buttons_list { margin-bottom: var(--sdcd-4); }

/* En-tete image et texte : sous 900 px, l'image passe sous les boutons et les
   touchait. */
@media (max-width: 900px) {
    .cmsfr-hero-image { margin-top: var(--sdcd-4); }
}