<div class="accordion " id="accacc1" >
<div class="card with-subtitle" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc1" aria-expanded="true" aria-controls="collapseAccacc1">
<button class="btn btn-link btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc1" aria-expanded="true" aria-controls="collapseAccacc1">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccacc1">Titre de l'accordéon</span>
<span class="card-subtitle w-100">...et son sous-titre</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc1" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc1" data-parent="#accacc1">
<div class="card-body">
Contenu de l'accordéon
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc1" aria-expanded="true" aria-controls="collapseAccacc1">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc2" >
<div class="card primary" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc2" aria-expanded="true" aria-controls="collapseAccacc2">
<button class="btn btn-link btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc2" aria-expanded="true" aria-controls="collapseAccacc2">
<span class="d-flex align-items-center flex-1">
<span class="card-title d-block main-info-color" id="headingAccacc2">accordéon avec titleClass et header...</span>
<p class="ms-auto text-danger fw-bold">Header</p>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc2" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc2" data-parent="#accacc2">
<div class="card-body">
Contenu de l'accordéon
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc2" aria-expanded="true" aria-controls="collapseAccacc2">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc3" >
<div class="card with-subtitle" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc3" aria-expanded="true" aria-controls="collapseAccacc3">
<button class="btn btn-link btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc3" aria-expanded="true" aria-controls="collapseAccacc3">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccacc3">accordéon avec bouton action</span>
<span class="card-subtitle w-100 text-muted">Sous titre</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion btn-secondary">
<svg class="paris-icon paris-icon-arrow-bottom btn-secondary"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc3" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc3" data-parent="#accacc3">
<div class="card-body">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc3" aria-expanded="true" aria-controls="collapseAccacc3">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc31" role="status" >
<div class="card outline" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc31" aria-expanded="true" aria-controls="collapseAccacc31">
<button class="btn btn-link btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc31" aria-expanded="true" aria-controls="collapseAccacc31">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-info"data-mce-svg="paris-icon paris-icon-alert-info" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-info"></use>
</svg> </span>
<span id="headingAccacc31">accordéon avec outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc31" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc31" data-parent="#accacc31">
<div class="card-body">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc31" aria-expanded="true" aria-controls="collapseAccacc31">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accaccCollapse" >
<div class="card unfold" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccaccCollapse" aria-expanded="true" aria-controls="collapseAccaccCollapse">
<button class="btn btn-link btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccaccCollapse" aria-expanded="true" aria-controls="collapseAccaccCollapse">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccaccCollapse">accordéon collapse</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccaccCollapse" class="m-0 collapse show" role="region" aria-labelledby="headingAccaccCollapse" data-parent="#accaccCollapse">
<div class="card-body">
Contenu de l'accordéon type "Déplié"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccaccCollapse" aria-expanded="true" aria-controls="collapseAccaccCollapse">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc32" role="status" >
<div class="card alert alert-outline alert-primary" >
<h3 class="card-header m-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseAccacc32" aria-expanded="false" aria-controls="collapseAccacc32">
<button class="btn btn-link btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc32" aria-expanded="false" aria-controls="collapseAccacc32">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-info"data-mce-svg="paris-icon paris-icon-alert-info" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-info"></use>
</svg> </span>
<span id="headingAccacc32">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc32" class="m-0 collapse " role="region" aria-labelledby="headingAccacc32" data-parent="#accacc32">
<div class="card-body">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc32" aria-expanded="false" aria-controls="collapseAccacc32">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc33" role="alert" >
<div class="card alert alert-outline alert-warning" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc33" aria-expanded="true" aria-controls="collapseAccacc33">
<button class="btn btn-link btn-header-accordion w-100 main-warning-color-text" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc33" aria-expanded="true" aria-controls="collapseAccacc33">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-warning"></use>
</svg> </span>
<span id="headingAccacc33">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-label-accordion d-none d-md-inline-block main-warning-color-text">Voir le détail</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-warning-color-text"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc33" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc33" data-parent="#accacc33">
<div class="card-body" style="border-color:var(--main-warning-color-text)">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc33" aria-expanded="true" aria-controls="collapseAccacc33">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc34" role="status" >
<div class="card alert alert-outline alert-success" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc34" aria-expanded="true" aria-controls="collapseAccacc34">
<button class="btn btn-link btn-header-accordion w-100 main-success-color-text" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc34" aria-expanded="true" aria-controls="collapseAccacc34">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-success"data-mce-svg="paris-icon paris-icon-alert-success" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-success"></use>
</svg> </span>
<span id="headingAccacc34">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-label-accordion d-none d-md-inline-block main-success-color-text">Voir le détail</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-success-color-text"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc34" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc34" data-parent="#accacc34">
<div class="card-body" style="border-color:var(--main-success-color-text)">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc34" aria-expanded="true" aria-controls="collapseAccacc34">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc35" role="alert" >
<div class="card alert alert-outline alert-danger" >
<h3 class="card-header m-0" data-bs-toggle="collapse" data-bs-target="#collapseAccacc35" aria-expanded="true" aria-controls="collapseAccacc35">
<button class="btn btn-link btn-header-accordion w-100 main-danger-color-text" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc35" aria-expanded="true" aria-controls="collapseAccacc35">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-danger"></use>
</svg> </span>
<span id="headingAccacc35">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-label-accordion d-none d-md-inline-block main-danger-color-text">Voir le détail</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-danger-color-text"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc35" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc35" data-parent="#accacc35">
<div class="card-body" style="border-color:var(--main-danger-color-text)">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc35" aria-expanded="true" aria-controls="collapseAccacc35">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="accordion " id="accacc6" >
<div class="card with-border with-subtitle" >
<h3 class="card-header m-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseAccacc6" aria-expanded="false" aria-controls="collapseAccacc6">
<button class="btn btn-link btn-header-accordion w-100" type="button" data-bs-toggle="collapse" data-show-label="Show details" data-hide-label="Hide details" data-bs-target="#collapseAccacc6" aria-expanded="false" aria-controls="collapseAccacc6">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccacc6">Exemple avec bordure</span>
<span class="card-subtitle w-100">...et son sous-titre</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom"data-mce-svg="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-bottom"></use>
</svg> </span>
</span>
</button>
</h3>
<div id="collapseAccacc6" class="m-0 collapse " role="region" aria-labelledby="headingAccacc6" data-parent="#accacc6">
<div class="card-body">
Contenu de l'accordéon
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccacc6" aria-expanded="false" aria-controls="collapseAccacc6">
<svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</button>
</div>
</div>
</div>

<div class="alert alert-outline alert-primary " role="status" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-info"data-mce-svg="paris-icon paris-icon-alert-info" aria-labelledby="paris-icon-alert-info-paris-title-144964957149421" focusable="false" role="img">
<title id="paris-icon-alert-info-paris-title-144964957149421">Information</title>
<use href="#paris-icon-alert-info"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Titre de l'alerte</p>
</div>
</div>
</div>
<div class="alert alert-outline alert-danger danger" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-149507673609191" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-149507673609191">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message erreur</p>
</div>
</div>
</div>
<div class="alert alert-outline alert-danger danger" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-155050390068961" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-155050390068961">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message d'erreur</p>
</div>
</div>
<div class="alert-content">
Contenu de l'erreur</div>
</div>
<div class="alert alert-outline alert-danger dismissible fade show danger" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-160593106528731" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-160593106528731">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message d'erreur</p>
</div>
<div class="alert-dismiss">
<button class="btn btn-close py-xs px-xs" type="button"data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<div class="alert-content">
Message d'erreur et bouton de fermeture</div>
</div>
<div class="alert alert-outline alert-warning warning" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-166135822988501" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-166135822988501">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message attention...</p>
</div>
</div>
</div>
<div class="alert alert-outline alert-warning dismissible fade show warning" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-171678539448271" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-171678539448271">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message attention...</p>
</div>
<div class="alert-dismiss">
<button class="btn btn-close py-xs px-xs" type="button"data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<div class="alert-content">
Contenu du message "warning"</div>
</div>
<div class="alert alert-outline alert-success success" role="status" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-check"data-mce-svg="paris-icon paris-icon-alert-check" aria-labelledby="paris-icon-alert-check-paris-title-177221255908041" focusable="false" role="img">
<title id="paris-icon-alert-check-paris-title-177221255908041">Success</title>
<use href="#paris-icon-alert-check"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message validation...</p>
</div>
</div>
<div class="alert-content">
Confirmation...</div>
</div>
<div class="alert alert-outline alert-success dismissible fade show success" role="status" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-check"data-mce-svg="paris-icon paris-icon-alert-check" aria-labelledby="paris-icon-alert-check-paris-title-182763972367811" focusable="false" role="img">
<title id="paris-icon-alert-check-paris-title-182763972367811">Success</title>
<use href="#paris-icon-alert-check"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message validation...</p>
</div>
<div class="alert-dismiss">
<button class="btn btn-close py-xs px-xs" type="button"data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<div class="alert-content">
Confirmation...</div>
</div>
<!-- Avec nouveau paramètre type -->
<div class="alert alert-outline alert-warning dismissible fade show mt-xxl" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-188306688827581" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-188306688827581">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Message validation...</p>
</div>
<div class="alert-dismiss">
<button class="btn btn-close py-xs px-xs" type="button"data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<div class="alert-content">
Confirmation...</div>
</div>
<!-- Avec nouveau paramètre isHtmlTitle -->
<div class="alert alert-outline alert-warning dismissible fade show " role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-193849405287351" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-193849405287351">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<h3 class="alert-title mt-0">
Message avec titre HTML de niveau 3</h3>
</div>
<div class="alert-dismiss">
<button class="btn btn-close py-xs px-xs" type="button"data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>
<div class="alert-content">
<ul >
<li>
Contenu du message avec un titre HTML personnalisé</li>
<li>
Le titre est de niveau 3 grâce au paramètre htmlTitleLevel</li>
<li>
Le paramètre isHtmlTitle doit être à true pour que le titre soit interprété comme du HTML</li>
</ul>
</div>
</div>

<div class="row ">
<div class="col-12 col-sm-3 ">
<div class="anchors ">
<ul >
<li>
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-xxs" >
<span class="link-label">Item 1</span>
</a>
</li>
<li>
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-2" >
<span class="link-label">Item 2</span>
</a>
</li>
<li>
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-3" >
<span class="link-label">Item 3</span>
</a>
</li>
<li>
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-4" >
<span class="link-label">Item 4</span>
</a>
</li>
<li>
<a href="jsp/site/Portal.jsp?page_id=6#anchor-list-item-5" >
<span class="link-label">Item 5</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col ">
<h4 class="mt-0" id="anchor-list-item-xxs">
Item 1</h4>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="mt-m" id="anchor-list-item-2">
Item 2</h4>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="mt-m" id="anchor-list-item-3">
Item 3</h4>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="mt-m" id="anchor-list-item-4">
Item 4</h4>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="mt-m" id="anchor-list-item-5">
Item 5</h4>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

<div class="badge ">
<p class="badge-label">Badge example</p>
</div>
<div class="badge dismissible">
<div class="badge-content">
<p class="badge-label">Badge example</p>
<button type="button" class="btn-close" onclick="this.parentElement.parentElement.remove();" aria-label="Close"></button>
</div>
</div>
<div class="badge badge-secondary">
<p class="badge-label">Badge example</p>
</div>

<div>
<button class="btn btn-primary m-xxs" type="submit">
<span class="btn-label ">btn-primary</span>
</button>
<button class="btn btn-primary m-xxs" type="submit" disabled>
<span class="btn-label ">btn-primary disabled</span>
</button>
<button class="btn btn-secondary m-xxs" type="submit">
<span class="btn-label ">btn-secondary</span>
</button>
<button class="btn btn-secondary m-xxs" type="submit" disabled>
<span class="btn-label ">btn-secondary disabled</span>
</button>
<button class="btn btn-tertiary m-xxs" type="submit">
<span class="btn-label ">btn-tertiary</span>
</button>
<button class="btn btn-tertiary m-xxs" type="submit" disabled>
<span class="btn-label ">btn-tertiary disabled</span>
</button>
<button class="btn btn-danger m-xxs" type="submit">
<span class="btn-label ">btn-danger</span>
</button>
<button class="btn btn-danger m-xxs" type="submit" disabled>
<span class="btn-label ">btn-danger disabled</span>
</button>
</div>
<div>
<button class="btn btn-expand m-xxs" type="submit">
<span class="btn-label ">btn-expand</span>
</button>
<button class="btn btn-expand m-xxs" type="submit" disabled>
<span class="btn-label ">btn-expand disabled</span>
</button>
</div>
<div>
<button class="btn btn-primary m-xxs btn-mini" type="submit">
<span class="btn-label ">btn-primary</span>
</button>
<button class="btn btn-primary m-xxs btn-mini" type="submit" disabled>
<span class="btn-label ">btn-primary disabled</span>
</button>
<button class="btn btn-secondary m-xxs btn-mini" type="submit">
<span class="btn-label ">btn-secondary</span>
</button>
<button class="btn btn-secondary m-xxs btn-mini" type="submit" disabled>
<span class="btn-label ">btn-secondary disabled</span>
</button>
<button class="btn btn-tertiary m-xxs btn-mini" type="submit">
<span class="btn-label ">btn-tertiary</span>
</button>
<button class="btn btn-tertiary m-xxs btn-mini" type="submit" disabled>
<span class="btn-label ">btn-tertiary disabled</span>
</button>
<button class="btn btn-danger m-xxs btn-mini" type="submit">
<span class="btn-label ">btn-danger</span>
</button>
<button class="btn btn-danger m-xxs btn-mini" type="submit" disabled>
<span class="btn-label ">btn-danger disabled</span>
</button>
</div>
<div>
<!-- Warning : wrong or deprecated argument(s) : btnClass, ... -->
<button class="btn btn-primary m-xxs" type="submit">
<span class="btn-label ">btn-primary btnClass</span>
</button>
<button class="btn btn-primary m-xxs" type="submit">
<span class="btn-label ">btn-primary noClass</span>
</button>
<a href="#" class="btn btn-primary m-xxs" >
<span class="btn-label ">btn-primary href</span>
</a>
<button class="btn btn-primary m-xxs" type="submit">
Before : <span class="btn-label ">btn-primary nestedPos-before</span>
</button>
<button class="btn btn-primary m-xxs" type="submit">
<span class="btn-label ">btn-primary nestedPos-after : </span> After
</button>
</div>
<div>
<h4>
Exemple de bouton flottant</h4>
<div class="btn-floating-toolbar">
<button class="btn btn-primary btn-floating" type="submit">
<span class="btn-label ">Bouton flottant Primary</span>
</button>
</div>
</div>

<div class="mt-xs">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<button class="btn btn-primary btn-img" type="submit">
<span>
Actualités - Flux RSS
</span>
<img src="images/feed.png" alt="" title="" class="after">
</button>
</div>
<div class="mt-xs">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<button class="btn btn-secondary btn-img" type="submit">
<img src="images/feed.png" alt="" title="" class="img-fluid">
<span>
Actualités - Flux RSS
</span>
</button>
</div>
<div class="d-flex mt-xs">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<button class="btn btn-tertiary btn-img" type="submit">
<img src="images/feed.png" alt="" title="" class="img-fluid">
<span>
Actualités - Flux RSS
</span>
</button>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<button class="btn btn-tertiary btn-img" type="submit" disabled>
<img src="images/feed.png" alt="" title="" class="img-fluid">
<span>
Actualités - Flux RSS
</span>
</button>
</div>

<h4>
Example 1</h4>
<div>
<div class="btn-group" role="group" aria-label="Menu Accueil">
<ul class="list-unstyled d-flex flex-wrap m-0" >
<li class="me-xs d-flex">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">A</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-tertiary" type="submit">
<span class="btn-label ">C</span>
</button>
</li>
</ul>
</div>
</div>
<h4>
Example 2</h4>
<div>
<div class="btn-group btn-group-vertical" role="group" aria-label="Menu Accueil">
<ul class="list-unstyled d-flex flex-column m-0" >
<li class="me-xs d-flex">
<button class="btn btn-danger w-100" type="submit">
<span class="btn-label ">Off</span>
</button>
</li>
<li class="me-xs d-flex">
<button class="btn btn-success active w-100" type="submit">
<span class="btn-label ">On</span>
</button>
</li>
</ul>
</div>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Document actions">
<div class="btn-group" role="group" aria-label="Editing">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">Cut</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">Copy</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">Paste</span>
</button>
</div>
<div class="btn-group" role="group" aria-label="Formatting">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">Bold</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">Italic</span>
</button>
</div>
</div>

<h4>
Vertical</h4>
<ul class="list-unstyled" >
<li>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
<li>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</li>
<li>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
</div>
</div>
</li>
<li>
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
</ul>
<h4>
Vertical Secondary</h4>
<ul class="list-unstyled" >
<li>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
<li>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</li>
<li>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
</div>
</div>
</li>
<li>
<div class="card secondary">
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
</ul>
<h4>
Horizontal</h4>
<ul class="list-unstyled" >
<li>
<div class="card ">
<div class="row m-0">
<div class="col-12 col-md-4 p-0">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
</div>
<div class="col-12 col-md-8 p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn btn-primary text-end" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card ">
<div class="row m-0">
<div class="col-12 col-md-4 p-0">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
</div>
<div class="col-12 col-md-8 p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card ">
<div class="row m-0">
<div class="col p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn btn-primary text-end" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<h4>
Horizontal Secondary</h4>
<ul class="list-unstyled" >
<li>
<div class="card secondary">
<div class="row m-0">
<div class="col-12 col-md-4 p-0">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
</div>
<div class="col-12 col-md-8 p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn btn-primary text-end" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card secondary">
<div class="row m-0">
<div class="col-12 col-md-4 p-0">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
</div>
<div class="col-12 col-md-8 p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="card secondary">
<div class="row m-0">
<div class="col p-0">
<div class="card-body">
<h3 class="card-title">
Title example
</h3>
<div class="d-md-flex justify-content-between align-items-end text-end">
<p class="card-text text-start me-l">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn btn-primary text-end" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<h4>
Cartes depliantes</h4>
<ul class="list-unstyled" >
<li>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<details id='cascadSolo1' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo2' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo3' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo4' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo5' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo6' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo7' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo8' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<p class="mt-m">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
<li>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<details id='cascadSolo9' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo10' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo11' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo12' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo13' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo14' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo15' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<details id='cascadSolo16' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">Text example</span></summary>
<div class="cascading-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</details>
<p class="mt-m">
<button class="btn btn-expand" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</li>
</ul>

<div class="row ">
<div class="col ">
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block" id="float-card" >
<div class="card-title-container">
<h3 class="card-title">
Carte Flotante</h3>
<button type="button" class="btn-close" aria-label="Close" data-bs-target="#float-card" data-bs-dismiss="alert" title="Close"></button>
</div>
<div class="card-body">
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col ">
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block" id="float-card" >
<div class="card-title-container">
<h3 class="card-title">
Carte Flotante</h3>
</div>
<div class="card-body">
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col ">
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block" id="float-card" >
<div class="card-title-container">
<h3 class="card-title">
Votre sélection</h3>
</div>
<div class="card-body">
<ul class="list-unstyled" >
<li>
<p class="d-flex align-items-start">
3 x Entrée plein tarif à 3,50 €
<button class="btn btn-link p-0 ms-auto" type="submit">
<svg class="paris-icon paris-icon-close main-danger-color pe-0"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
</button>
</p>
<p class="mt-0 fw-bold">
10,50 €</p>
</li>
<li>
<p class="d-flex align-items-start">
2 x Entrée plein tarif à 28,00 €
<button class="btn btn-link p-0 ms-auto" type="submit">
<svg class="paris-icon paris-icon-close main-danger-color pe-0"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
</button>
</p>
<p class="mt-0 fw-bold">
56,00 €</p>
</li>
<li>
<p>
Total :
<strong>
67,00 €</strong>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block secondary" id="float2-card" >
<div class="card-title-container">
<h3 class="card-title">
Carte Flotante Secondary</h3>
<button type="button" class="btn-close" aria-label="Close" data-bs-target="#float2-card" data-bs-dismiss="alert" title="Close"></button>
</div>
<div class="card-body">
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." target="_blank">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col ">
<div style="height: 450px; position: relative;">
<div class="card card-floating d-block secondary" id="float2-card" >
<div class="card-title-container">
<h3 class="card-title">
Votre sélection</h3>
</div>
<div class="card-body">
<ul class="list-unstyled" >
<li>
<p class="d-flex align-items-start">
3 x Entrée plein tarif à 3,50 €
<button class="btn btn-link p-0 ms-auto" type="submit">
<svg class="paris-icon paris-icon-close main-danger-color pe-0"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
</button>
</p>
<p class="mt-0 fw-bold">
10,50 €</p>
</li>
<li>
<p class="d-flex align-items-start">
2 x Entrée plein tarif à 28,00 €
<button class="btn btn-link p-0 ms-auto" type="submit">
<svg class="paris-icon paris-icon-close main-danger-color pe-0"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg>
</button>
</p>
<p class="mt-0 fw-bold">
56,00 €</p>
</li>
<li>
<p>
Total :
<strong>
67,00 €</strong>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<h4 class="ml-l">
Example défaut</h4>
<div class="row g-4 row-cols-1 row-cols-md-3 mt-0">
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<h4 class="ml-l">
Example avec 3 col pour le breakpoint "md" ou 4 pour le breakpoint "lg"</h4>
<div class="row g-4 row-cols-1 row-cols-md-3 row-lg-4 mt-0">
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" title="" class="card-img-top">
</figure>
<div class="card-body">
<h3 class="card-title">
Title example</h3>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Title example</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="text-end">
<button class="btn btn-primary mt-m" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>

<h4>
Example 1</h4>
<div id="manege1" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<div class="carousel-inner">
<div class="carousel-item active" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/alexander-kagan-t9Td0zfDTwI-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Le hasard</h3>
<p></p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/adrien-xplr-wAScP0OY-yM-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Fait bien</h3>
<p>Mais pas que...</p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Les choses</h3>
<p></p>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-carousel.js"></script>
<h4>
Example 2</h4>
<div id="manege2" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<div class="carousel-inner">
<div class="carousel-item active" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Le hasard</h3>
<p></p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/adrien-xplr-wAScP0OY-yM-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Fait bien</h3>
<p>Mais pas que...</p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/alexander-kagan-t9Td0zfDTwI-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Les choses</h3>
<p></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" data-bs-target="#manege2" data-bs-slide="prev" aria-label="élément précédent">
<span class="carousel-bg-control">
<svg class="paris-icon paris-icon-arrow-left"data-mce-svg="paris-icon paris-icon-arrow-left" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-left"></use>
</svg> <span class="visually-hidden"></span>
</span>
</button>
<button class="carousel-control-next" data-bs-target="#manege2" data-bs-slide="next" aria-label="élément suivant">
<span class="carousel-bg-control">
<svg class="paris-icon paris-icon-arrow-right"data-mce-svg="paris-icon paris-icon-arrow-right" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-right"></use>
</svg> <span class="visually-hidden"></span>
</span>
</button>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-carousel.js"></script>
<h4>
Example 3</h4>
<div id="manege3" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<ol class="carousel-indicators pagination">
<li class="page-item active" data-bs-target="#manege3" data-bs-slide-to="0" aria-label="Slide 0" aria-selected="false" aria-controls="carousel-item-0" tabindex="0"><span class="page-link">1</span></li>
<li class="page-item" data-bs-target="#manege3" data-bs-slide-to="1" aria-label="Slide 1" aria-selected="false" aria-controls="carousel-item-1" tabindex="0"><span class="page-link">2</span></li>
<li class="page-item" data-bs-target="#manege3" data-bs-slide-to="2" aria-label="Slide 2" aria-selected="false" aria-controls="carousel-item-2" tabindex="0"><span class="page-link">3</span></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/adrien-xplr-wAScP0OY-yM-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Le hasard</h3>
<p></p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/alexander-kagan-t9Td0zfDTwI-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Fait bien</h3>
<p>Mais pas que...</p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Les choses</h3>
<p></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" data-bs-target="#manege3" data-bs-slide="prev" aria-label="élément précédent">
<span class="carousel-bg-control">
<svg class="paris-icon paris-icon-arrow-left"data-mce-svg="paris-icon paris-icon-arrow-left" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-left"></use>
</svg> <span class="visually-hidden"></span>
</span>
</button>
<button class="carousel-control-next" data-bs-target="#manege3" data-bs-slide="next" aria-label="élément suivant">
<span class="carousel-bg-control">
<svg class="paris-icon paris-icon-arrow-right"data-mce-svg="paris-icon paris-icon-arrow-right" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-arrow-right"></use>
</svg> <span class="visually-hidden"></span>
</span>
</button>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-carousel.js"></script>
<h4>
Example 4</h4>
<div id="carouselButtons-manege4" class="d-flex justify-content-center py-2">
<button id="playButton-manege4" type="button" class="btn btn-tertiary" size="mini" aria-label="Démarrer la lecture du carrousel">
<svg class="paris-icon paris-icon-play"data-mce-svg="paris-icon paris-icon-play" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-play"></use>
</svg> </button>
<button id="pauseButton-manege4" type="button" class="btn btn-tertiary" size="mini" aria-label="Mettre le carrousel en pause">
<svg class="paris-icon paris-icon-refresh"data-mce-svg="paris-icon paris-icon-refresh" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-refresh"></use>
</svg> </button>
<button id="stopButton-manege4" type="button" class="btn btn-tertiary" size="mini" aria-label="Arrêter le carrousel et revenir à la première diapositive">
<svg class="paris-icon paris-icon-close"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg> </button>
</div>
<div id="manege4" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<div class="carousel-inner">
<div class="carousel-item active" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/adrien-xplr-wAScP0OY-yM-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Le hasard</h3>
<p></p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Fait bien</h3>
<p>Mais pas que...</p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="images/alexander-kagan-t9Td0zfDTwI-unsplash.png" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Les choses</h3>
<p></p>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-carousel.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
var carouselElement = document.getElementById('manege4');
var carousel = bootstrap.Carousel.getOrCreateInstance(carouselElement);
document.getElementById('playButton-manege4').addEventListener('click', function () {
carousel.cycle();
});
document.getElementById('pauseButton-manege4').addEventListener('click', function () {
carousel.pause();
});
document.getElementById('stopButton-manege4').addEventListener('click', function () {
carousel.pause();
carousel.to(0);
});
});
</script>

<details id='cascad1' class="cascading " open aria-expanded="true" >
<summary><span class="cascading-label ">nested 1</span></summary>
<div class="cascading-content"> <details id='cascad2' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">nested 2</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
<details id='cascad3' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">nested 3</span></summary>
<div class="cascading-content">
<h3>
Titre</h3>
<p>
Contenu</p>
</div>
</details>
<details id='cascad4' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">nested 4</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
</div>
</details>
<details id='cascadSolo1' class="cascading " aria-expanded="false" >
<summary><span class="cascading-label ">nested 1</span></summary>
<div class="cascading-content">
<p>
contenu</p>
</div>
</details>
<details id='cascadFile1' class="cascading cascading-files" aria-expanded="false" >
<summary><span class="cascading-label ">Aménagements piétonniers végétalisés</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
<details id='cascadFile2' class="cascading cascading-files" aria-expanded="false" >
<summary><span class="cascading-label ">Passage piétonnier sous porche à conserver</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
<details id='cascadFile3' class="cascading cascading-files" aria-expanded="false" >
<summary><span class="cascading-label ">Plafonnement des hauteurs : 31m</span></summary>
<div class="cascading-content">
<p>
Contenu</p>
</div>
</details>
<details id='cascadFile4' class="cascading cascading-files" open aria-expanded="true" >
<summary><span class="cascading-label ">Secteur de dispositions particulières : Site Miollis</span></summary>
<div class="cascading-content">
<p>
UG 3.1.3 Implantation des constructions en vis-à-vis sur un même terrain</p>
<p>
UG.3.2.6 Gabarit-enveloppe* des constructions en vis-à-vis sur un même terrain*</p>
</div>
</details>

<p class="lead">
La Macro cConsentTac permet la gestion du consentement en utilisant la librairie
<a href="https://tarteaucitron.io/fr/install/" class="" target="_blank" >
<span class="link-label">TarteAuCitron</span>
</a>
.</p>
<p class="lead">
Vous pouvez cliquer sur le bouton "Cookie" situé en bas à droite de cet écran pour visualiser la fenêtre de gestion des cookies.</p>

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Actions
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="jsp/site/Portal.jsp?page=edit">Edit</a></li>
<li><a class="dropdown-item" href="jsp/site/Portal.jsp?page=archive">Archive</a></li>
</ul>
</div>
<br />
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
More options
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="">
Profile
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="">
Logout
</a>
</li>
</ul>
</div>

<div class="container d-flex align-items-center justify-content-center vh-50">
<div class="row ">
<div class="col ">
<div class="alert alert-outline alert-danger danger" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-463713377655161" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-463713377655161">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Page not found</p>
</div>
</div>
<div class="alert-content">
<p>
The page you are looking for does not exist.</p>
</div>
</div>
<p class="text-center mt-l">
<a href="." class="btn btn-secondary" >
<span class="link-label">Home</span>
</a>
</p>
</div>
</div>
</div>
<div class="container d-flex align-items-center justify-content-center vh-50">
<div class="row ">
<div class="col ">
<div class="alert alert-outline alert-danger danger" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger"data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-471356094114931" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-471356094114931">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Access denied</p>
</div>
</div>
<div class="alert-content">
<p>
You do not have permission to view this page.</p>
</div>
</div>
<ul class="list-unstyled d-flex justify-content-center gap-2 mt-l" >
<li>
<a href="." class="btn btn-secondary" >
<span class="link-label">Home</span>
</a>
</li>
<li>
<a href="jsp/site/Portal.jsp?page=login" class="btn btn-primary" >
<span class="link-label">Sign in</span>
</a>
</li>
</ul>
</div>
</div>
</div>

<div class="container filter-wrapper">
<div class="row justify-content-between align-items-center">
<span class="filter-result">
12 results found</span>
<button class="btn btn-secondary m-1 d-flex align-items-center w-auto filter-toggle-button" type="submit">
<svg class="paris-icon paris-icon-filter main-info-color me-3"data-mce-svg="paris-icon paris-icon-filter" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-filter"></use>
</svg><span class="btn-label ">Hide filters</span>
</button>
</div>
<div class="row filters-container ">
<fieldset class="d-flex m-0 px-0 flex-wrap w-auto" id="fieldset-id-517212392873551" role="group" aria-labelledby="legend-id-517212392873551">
<legend class="visually-hidden" id="legend-id-517212392873551" >Filter's list</legend>
<div class=" form-check btn-filter btn-selection">
<div class="selection-check">
<input type="checkbox" id="filter-parks" name="selectCheckbox" class="form-check-input" value="filter">
<label class="form-label form-check-label" for="filter-parks">
Parks
</label>
</div>
</div>
<div class=" form-check btn-filter btn-selection">
<div class="selection-check">
<input type="checkbox" id="filter-libraries" name="selectCheckbox" class="form-check-input" value="filter">
<label class="form-label form-check-label" for="filter-libraries">
Libraries
</label>
</div>
</div>
<div class=" form-check btn-filter btn-selection">
<div class="selection-check">
<input type="checkbox" id="filter-pools" name="selectCheckbox" class="form-check-input" value="filter">
<label class="form-label form-check-label" for="filter-pools">
Swimming pools
</label>
</div>
</div>
</fieldset>
<button class="btn btn-primary w-auto" type="submit">
<span class="btn-label ">Search</span>
</button>
<button class="btn btn-tertiary w-auto filter-erase-button" type="submit">
<span class="btn-label ">Clear all</span>
</button>
</div>
</div>
<script type="module">
import { themeFilter} from './themes/skin/parisfr/js/modules/theme-filter.js';
new themeFilter( null, {
labelShowFilter: 'Show filters',
labelHideFilter: 'Hide filters',
} );
</script>

<form action="jsp/site/Portal.jsp" method="post">
<label class="form-label" for="email">
Email <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="email" class=" form-control" name="email" id="email" value="" required aria-required="true">
<button class="btn btn-btn btn-primary" type="submit">
<span class="btn-label ">Submit</span>
</button>
</form>
<form action="jsp/site/Portal.jsp" method="post" name="contact_form" aria-label="Contact form" enctype="multipart/form-data">
<label class="form-label" for="message">
Message
</label>
<textarea class=" form-control" name="message" id="message" rows="4">
</textarea>
<button class="btn btn-btn btn-primary" type="submit">
<span class="btn-label ">Send</span>
</button>
</form>

<form method="post">
<fieldset id="fieldset-fs1" role="group" aria-labelledby="legend-fs1">
<legend id="legend-fs1" >Etat-civil</legend>
<div class="row ">
<div class="col-12 col-sm-6 ">
<label class="form-label" for="firstNameF1">
Prénom <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="firstNameF1" id="firstNameF1" value="Martine" placeholder="Entrez le prénom" aria-label="Entrez le prénom" required aria-required="true">
</div>
<div class="col-12 col-sm-6 ">
<label class="form-label" for="lastNameF1">
Nom <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="lastNameF1" id="lastNameF1" value="DUPONTEL" placeholder="Entrez le nom" aria-label="Entrez le nom" required aria-required="true">
</div>
</div>
</fieldset>
<fieldset id="fieldset-fs2" role="group" aria-labelledby="legend-fs2">
<legend class=" visually-hidden" id="legend-fs2" >Etat-civil 2</legend>
<div class="row ">
<div class="col-12 col-sm-6 ">
<label class="form-label" for="firstNameF2">
Prénom <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="firstNameF2" id="firstNameF2" value="Martine" placeholder="Entrez le prénom" aria-label="Entrez le prénom" required aria-required="true">
</div>
<div class="col-12 col-sm-6 ">
<label class="form-label" for="lastNameF2">
Nom <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="lastNameF2" id="lastNameF2" value="DUPONTEL" placeholder="Entrez le nom" aria-label="Entrez le nom" required aria-required="true">
</div>
</div>
</fieldset>
<fieldset id="fieldset-fs3" role="group" aria-labelledby="legend-fs3">
<legend class="is-invalide" id="legend-fs3" >Etat-civil 3</legend>
<div class="row ">
<div class="col-12 col-sm-6 ">
<label class="form-label" for="firstNameF3">
Prénom <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="firstNameF3" id="firstNameF3" value="Martine" placeholder="Entrez le prénom" aria-label="Entrez le prénom" required aria-required="true">
</div>
<div class="col-12 col-sm-6 ">
<label class="form-label" for="lastName">
Nom <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="lastName" id="lastName" value="DUPONTEL" placeholder="Entrez le nom" aria-label="Entrez le nom" required aria-required="true">
</div>
</div>
</fieldset>
</form>

<div class="form-check">
<input type="checkbox" id="accept_terms-613124990390791" name="accept_terms" class="form-check-input" >
<label class="form-label form-check-label" for="accept_terms-613124990390791">
I accept the terms and conditions
</label>
</div>
<div class="form-check">
<input type="radio" id="gender-613867706850561" name="gender" class="form-check-input" value="male">
<label class="form-label form-check-label" for="gender-613867706850561">
Male
</label>
</div>
<div class="form-check">
<input type="radio" id="gender-614610423310331" name="gender" class="form-check-input" value="female">
<label class="form-label form-check-label" for="gender-614610423310331">
Female
</label>
</div>
<input type="checkbox" name="newsletter" class="btn-check form-check" id="newsletter-615353139770101" autocomplete="off">
<label class="form-label btn btn-outline-primary" for="newsletter-615353139770101">
Subscribe to newsletter
</label>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="plan-616095856229871" name="plan" class="form-check-input" >
<label class="form-label form-check-label" for="plan-616095856229871">
Premium plan
<p>
Includes all features</p>
<p class="selection-subtitle my-sm">Recommended</p>
</label>
</div>
</div>

<form method="post">
<div class="row ">
<div class="col ">
<fieldset class="form-check-group " id="fieldset-form-check-group-619809438528721" role="group" aria-labelledby="legend-form-check-group-619809438528721">
<legend id="legend-form-check-group-619809438528721" >Horaires</legend>
<p class="form-text " id="help_formcheck1">
Choisir un horaire</p>
<div class="form-check">
<input type="checkbox" id="football31" name="sport" class="form-check-input" value="foot">
<label class="form-label form-check-label" for="football31">
Football
</label>
</div>
<div class="form-check">
<input type="checkbox" id="natation31" name="sport" class="form-check-input" value="nata">
<label class="form-label form-check-label" for="natation31">
Natation
</label>
</div>
</fieldset>
</div>
</div>
</form>

<form method="post">
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-632008453747111" aria-describedby="help_checkboxHelp1" role="group" aria-labelledby="legend-id-632008453747111">
<label class="form-label">
Horaire
</label>
<p class="form-text " id="help_checkboxHelp1">
Choisir un horaire</p>
<div class="form-check">
<input type="checkbox" id="football" name="sport" class="form-check-input" value="foot">
<label class="form-label form-check-label" for="football">
Football
</label>
</div>
<div class="form-check">
<input type="checkbox" id="natation" name="sport" class="form-check-input" value="nata">
<label class="form-label form-check-label" for="natation">
Natation
</label>
</div>
<div class="form-check">
<input type="checkbox" id="tennis" name="sport" class="form-check-input" value="tenn" disabled>
<label class="form-label form-check-label" for="tennis">
Tennis (Disabled)
</label>
</div>
</fieldset>
</div>
</div>
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-633751170206881" aria-describedby="help_checkboxHelp2" role="group" aria-labelledby="legend-id-633751170206881">
<label class="form-label">
Horaire
</label>
<p class="form-text " id="help_checkboxHelp2">
Choisir un horaire</p>
<div class="form-check">
<input type="checkbox" id="judo2" name="sport" class="form-check-input" value="judo">
<label class="form-label form-check-label" for="judo2">
Judo
</label>
</div>
<p class="invalid-feedback" id="error_football2">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Erreur dans le sport !</p>
<div class="form-check is-invalid">
<input type="checkbox" id="football2" name="sport" class="form-check-input" value="foot" aria-invalid="true">
<label class="form-label form-check-label" for="football2">
Football
</label>
</div>
</fieldset>
</div>
</div>
<div class="row ">
<div class="col ">
<fieldset id="fieldset-id-637236603126421" aria-describedby="help_selectHelp" role="group" aria-labelledby="legend-id-637236603126421">
<label class="form-label">
Quel choix ?
</label>
<p class="form-text " id="help_selectHelp">
Faites votre choix</p>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="selectFootball" name="selectCheckbox" class="form-check-input" value="foot">
<label class="form-label form-check-label" for="selectFootball">
Football
<p class="selection-subtitle my-sm">Sport avec un ballon.</p>
</label>
</div>
</div>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="selectJudo" name="selectCheckbox" class="form-check-input" value="judo">
<label class="form-label form-check-label" for="selectJudo">
Judo
<p class="selection-subtitle my-sm">Sport de combat.</p>
</label>
</div>
</div>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="selectNatation" name="selectCheckbox" class="form-check-input" value="nata">
<label class="form-label form-check-label" for="selectNatation">
Natation
<p class="selection-subtitle my-sm">Sport dans l&apos;eau.</p>
</label>
</div>
</div>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="checkbox" id="selectTennis" name="selectCheckbox" class="form-check-input" value="tenn" disabled>
<label class="form-label form-check-label" for="selectTennis">
Tennis
<p class="selection-subtitle my-sm">Sport de raquette.</p>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</form>

<div class="form-check">
<input type="radio" id="gender-670149200643661" name="gender" class="form-check-input" value="male">
<label class="form-label form-check-label" for="gender-670149200643661">
Male
</label>
</div>
<div class="form-check">
<input type="radio" id="gender-672891917103431" name="gender" class="form-check-input" value="female">
<label class="form-label form-check-label" for="gender-672891917103431">
Female
</label>
</div>
<div class="form-check">
<input type="radio" id="gender-675634633563201" name="gender" class="form-check-input" value="other">
<label class="form-label form-check-label" for="gender-675634633563201">
Other
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="size-679377350022971" name="size" class="form-check-input" value="S">
<label class="form-label form-check-label" for="size-679377350022971">
Small
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="size-683120066482741" name="size" class="form-check-input" value="M">
<label class="form-label form-check-label" for="size-683120066482741">
Medium
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="size-686862782942511" name="size" class="form-check-input" value="L">
<label class="form-label form-check-label" for="size-686862782942511">
Large
</label>
</div>
<input type="checkbox" name="plan" class="btn-check form-check" id="plan-690605499402281" autocomplete="off" value="monthly">
<label class="form-label btn btn-outline-primary" for="plan-690605499402281">
Monthly
</label>
<input type="checkbox" name="plan" class="btn-check form-check" id="plan-694348215862051" autocomplete="off" value="yearly">
<label class="form-label btn btn-outline-primary" for="plan-694348215862051">
Yearly
</label>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="radio" id="delivery-698090932321821" name="delivery" class="form-check-input" value="express">
<label class="form-label form-check-label" for="delivery-698090932321821">
Express delivery
<p class="selection-subtitle my-sm">2-3 business days</p>
</label>
</div>
<div class="selection-content">
<p>
Fast shipping option</p>
</div>
</div>

<label class="form-label" for="email">
Email
</label>
<p class="form-text " id="help_email">
We will never share your email with anyone.</p>
<input type="email" class=" form-control" name="email" id="email" value="" aria-describedby="help_email">
<p class="divider">or</p>
<label class="form-label" for="email2">
Email
</label>
<p class="form-text " id="help_email2">
We will never share your email with anyone.</p>
<input type="email" class=" form-control" name="email" id="email2" value="">

<label class="form-label" for="email">
Email
</label>
<p class="invalid-feedback" id="error_email">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Please enter a valid email address.</p>
<input type="email" class=" form-control is-invalid" name="email" id="email" value="" aria-invalid="true" aria-describedby="error_email">
<p class="divider">or</p>
<label class="form-label" for="email2">
Email
</label>
<p class="invalid-feedback" id="error_email2">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Please enter a valid email address.</p>
<input type="email" class=" form-control" name="email" id="email2" value="">

<div class="row ">
<div class="col-6 ">
<label class="form-label" for="firstname">
First name
</label>
<input type="text" class=" form-control" name="firstname" id="firstname" value="">
</div>
<div class="col-6 ">
<label class="form-label" for="lastname">
Last name
</label>
<input type="text" class=" form-control" name="lastname" id="lastname" value="">
</div>
</div>

<label class="form-label" for="email">
Email address
</label>
<input type="email" class=" form-control" name="email" id="email" value="">
<label class="form-label" for="lastname">
Last name<span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="lastname" id="lastname" value="" required aria-required="true">
<label class="form-label visually-hidden" for="search">
Search
</label>
<input type="text" class=" form-control" name="search" id="search" value="" placeholder="Search..." aria-label="Search...">

<form method="post">
<input type="text" class=" form-control" name="firstname" id="firstname" value="" placeholder="Enter your first name" aria-label="Enter your first name">
<p class="form-text " id="help_email">
We will never share your email.</p>
<p class="invalid-feedback" id="error_email">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Please enter a valid email address.</p>
<input type="email" class=" form-control is-invalid" name="email" id="email" value="" required aria-required="true" aria-invalid="true" aria-describedby="error_email">
<input type="tel" class=" form-control fr-number" name="phone" id="phone" value="" placeholder="06 12 34 56 78" aria-label="06 12 34 56 78">
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.fr-number').forEach(function(element) {
element.addEventListener('blur', function() {
var num = element.value;
var numFormatte = num
.replace(/^0(\d)(\s?)(\d{2})(\s?)(\d{2})(\s?)(\d{2})(\s?)(\d{2})$/, '+33 $1 $3 $5 $7 $9')
.replace(/^\+33(\d{9})$/, function(match, p1) {
return '+33 ' + p1.replace(/(\d)(\d{2})(\d{2})(\d{2})(\d{2})/, '$1 $2 $3 $4 $5');
});
element.value = numFormatte;
});
});
});
</script>
<input type="number" class=" form-control" name="quantity" id="quantity" value="1" min="1" max="100">
<script>
function setInvalidMaxMinMessage( input ) {
const value = parseFloat(input.value);
const min = input.hasAttribute('min') ? parseFloat(input.getAttribute('min')) : -Infinity;
const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max')) : Infinity;
if ( value <= min || value >= max ) {
if ( !input.classList.contains('is-invalid') ) {
input.classList.add('is-invalid');
if( input.parentNode.classList.contains('input-group') ) {
input.parentNode.insertAdjacentHTML('beforebegin', '<p class="invalid-feedback"><svg class="paris-icon paris-icon-alert-error main-danger-color" data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img"><use href="#paris-icon-alert-error"></use></svg>La valeur doit être comprise entre ' + input.min + ' et ' + input.max + '</p>' );
} else {
input.insertAdjacentHTML('beforebegin', '<p class="invalid-feedback"><svg class="paris-icon paris-icon-alert-error main-danger-color" data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img"><use href="#paris-icon-alert-error"></use></svg>La valeur doit être comprise entre ' + input.min + ' et ' + input.max + '</p>' );
}
input.setAttribute('aria-invalid', 'true');
input.setAttribute('aria-describedby', 'error_' + input.id);
}
return false;
} else {
if ( input.classList.contains('is-invalid') ) {
input.classList.remove('is-invalid');
input.removeAttribute('aria-invalid');
input.removeAttribute('aria-describedby');
// Remove the error message if it exists
const errorMsg = input.closest('.col').querySelector('.invalid-feedback');
if (errorMsg) {
errorMsg.remove();
}
}
return true;
}
}
document.addEventListener('DOMContentLoaded', function() {
const inputquantity = document.getElementById('quantity');
if ( inputquantity ) {
inputquantity.addEventListener('blur', function() {
setInvalidMaxMinMessage( inputquantity );
});
inputquantity.closest('form').addEventListener('submit', function(e) {
const value = parseFloat(inputquantity.value);
if ( inputquantity && inputquantity.closest('.col').style.display !== 'none' && inputquantity.value !== '' ) {
if( !setInvalidMaxMinMessage( inputquantity ) ) {
inputquantity.focus();
e.preventDefault();
}
}
});
}
});
</script>
</form>

<div class="input-group">
<span class="input-group-text">
@</span>
<input type="text" class=" form-control" name="email" id="email" value="" placeholder="Email address" aria-label="Email address">
</div>
<div class="input-group input-group-lg">
<input type="text" class=" form-control" name="search" id="search" value="" placeholder="Search..." aria-label="Search...">
<span class="input-group-text">
Go</span>
</div>

<textarea class=" form-control" name="message" id="message" placeholder="Enter your message..."rows="5">
</textarea>
<p class="form-text " id="help_comment">
Maximum 50 characters.</p>
<textarea class=" form-control counter" name="comment" id="comment" maxlength="50"rows="4" required aria-required="true" aria-describedby="help_comment">
</textarea>
<p class="invalid-feedback" id="error_description">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>This field is required.</p>
<textarea class=" form-control is-invalid" name="description" id="description" rows="3" is-invalid aria-invalid="true" aria-describedby="error_description">
</textarea>
<textarea class=" form-control" name="notes" id="notes" rows="6">
Default content goes here.
</textarea>

<label class="form-label" for="lastname">
Last name <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="lastname" id="lastname" value="" required aria-required="true">
<label class="form-label" for="email">
Email (professional)
</label>
<input type="email" class=" form-control" name="email" id="email" value="" placeholder="you@example.com" aria-label="you@example.com">
<label class="form-label visually-hidden" for="search">
Search
</label>
<input type="text" class=" form-control" name="search" id="search" value="" placeholder="Search..." aria-label="Search...">

<select name="country" class="form-select" id="country">
<option value="">-- Select a country --</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="ES">Spain</option>
</select>
<p class="invalid-feedback" id="error_category">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Please select a category.</p>
<select name="category" class="form-select is-invalid" id="category" required aria-required="true" aria-invalid="true" aria-describedby="error_category">
<option value="">-- Choose --</option>
<option value="culture">Culture</option>
<option value="sport">Sport</option>
</select>
<select name="languages" class="form-select" id="languages" multiple>
<option value="fr">French</option>
<option value="en">English</option>
<option value="es">Spanish</option>
</select>

<div class="multiselect " id="msg-979056874252851" data-maxoptions="0">
<div class="tags-container mt-s"></div>
<div class="dropdown">
<button class="form-select multi-select " type="button" id='btn-msg-979056874252851' data-bs-toggle="dropdown" aria-expanded="false" params=>
Select options
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<input type="checkbox" name="categories" class="btn-check" id="categories-988799590712621" autocomplete="off" value="sport">
<label class="form-label btn btn-outline-primary my-0" for="categories-988799590712621">
Sport
</label>
</li>
<li>
<input type="checkbox" name="categories" class="btn-check" id="categories-998542307172391" autocomplete="off" value="culture">
<label class="form-label btn btn-outline-primary my-0" for="categories-998542307172391">
Culture
</label>
</li>
<li>
<input type="checkbox" name="categories" class="btn-check" id="categories-1008285023632161" autocomplete="off" value="education">
<label class="form-label btn btn-outline-primary my-0" for="categories-1008285023632161">
Education
</label>
</li>
</ul>
</div>
</div>
<div class="multiselect " id="interests" data-maxoptions="3">
<div class="tags-container mt-s"></div>
<div class="dropdown">
<button class="form-select multi-select " type="button" id='btn-interests' data-bs-toggle="dropdown" aria-expanded="false" params=>
Select options
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<input type="checkbox" name="interests" class="btn-check" id="interests-1018027740091931" autocomplete="off" value="music">
<label class="form-label btn btn-outline-primary my-0" for="interests-1018027740091931">
Music
</label>
</li>
<li>
<input type="checkbox" name="interests" class="btn-check" id="interests-1027770456551701" autocomplete="off" value="travel">
<label class="form-label btn btn-outline-primary my-0" for="interests-1027770456551701">
Travel
</label>
</li>
<li>
<input type="checkbox" name="interests" class="btn-check" id="interests-1037513173011471" autocomplete="off" value="food">
<label class="form-label btn btn-outline-primary my-0" for="interests-1037513173011471">
Food
</label>
</li>
<li>
<input type="checkbox" name="interests" class="btn-check" id="interests-1047255889471241" autocomplete="off" value="art">
<label class="form-label btn btn-outline-primary my-0" for="interests-1047255889471241">
Art
</label>
</li>
</ul>
</div>
</div>

<form method="post">
<div class="row ">
<div class="col ">
<label class="form-label" for="password1">
Mot de passe ( avec suggestion )<span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<div class="input-group password">
<input type="password" class=" form-control pwd form-control-lg" name="password1" id="password1" value="" maxlength="100" autocomplete="off" required aria-required="true">
<button class="btn btn-secondary toggle-password" type="button"data-bs-toggle="#password1" aria-pressed="false" title="Show password" tabindex="0">
<svg class="paris-icon paris-icon-eye-off main-info-color"data-mce-svg="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-eye-off"></use>
</svg>
</button>
</div>
<label class="form-label" for="passwordConfirm">
Confirmation de mot de passe<span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<p class="form-text " id="help_passwordConfirm">
Please enter your new password. It must contain at least 8 characters, and consist of at least 1 lowercase, 1 uppercase, 1 number and 1 special character.</p>
<div class="input-group password">
<input type="password" class=" form-control pwd form-control-lg" name="passwordConfirm" id="passwordConfirm" value="" maxlength="100" autocomplete="off" required aria-required="true">
<button class="btn btn-secondary toggle-password" type="button"data-bs-toggle="#passwordConfirm" aria-pressed="false" title="Show password" tabindex="0">
<svg class="paris-icon paris-icon-eye-off main-info-color"data-mce-svg="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-eye-off"></use>
</svg>
</button>
</div>
<hr>
<label class="form-label" for="password2">
Mot de passe<span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<p class="form-text " id="help_password2">
Saisissez votre mot de passe</p>
<div class="input-group password">
<input type="password" class=" form-control pwd form-control-lg" name="password2" id="password2" value="" maxlength="100" autocomplete="off" required aria-required="true">
<button class="btn btn-secondary toggle-password" type="button"data-bs-toggle="#password2" aria-pressed="false" title="Show password" tabindex="0">
<svg class="paris-icon paris-icon-eye-off main-info-color"data-mce-svg="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-eye-off"></use>
</svg>
</button>
</div>
</div>
</div>
</form>

<label class="form-label" for="new_password">
Mot de passe
</label>
<label class="form-label" for="new_password">
<span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<p class="form-text " id="help_new_password">
Please enter your new password. It must contain at least 8 characters, and consist of at least 1 lowercase, 1 uppercase, 1 number and 1 special character.</p>
<div class="input-group password">
<input type="password" class=" form-control pwd form-control-lg" name="new_password" id="new_password" value="" maxlength="100" autocomplete="off" required aria-required="true">
<button class="btn btn-secondary toggle-password" type="button"data-bs-toggle="#new_password" aria-pressed="false" title="Show password" tabindex="0">
<svg class="paris-icon paris-icon-eye-off main-info-color"data-mce-svg="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-eye-off"></use>
</svg>
</button>
</div>
<p class="form-text " id="help_new_password_checkpassword">
<span class="charlength">
<svg class="paris-icon paris-icon-check"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-check"></use>
</svg> 8 letters</span>
<span class="uppercase">
<svg class="paris-icon paris-icon-check"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-check"></use>
</svg> a capital letter </span>
<span class="digit">
<svg class="paris-icon paris-icon-check"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-check"></use>
</svg> a digit</span>
</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
initPasswordCheck('new_password', [{ selector: ".charlength", test: function(v) { return v.length >= 8; } },{ selector: ".uppercase", test: function(v) { return /[A-Z]/.test(v); } },{ selector: ".digit",test: function(v) { return /\d/.test(v); } }]);
});
</script>
<script src='themes/skin/parisfr/js/themeparisfr.util.min.js'></script>

<div class="alert alert-outline alert-warning warning" role="alert" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning"data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-1100281084505721" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-1100281084505721">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Attention</p>
</div>
</div>
<div class="alert-content">
Cette macro nécessite le plugin <a class="font-weight-bold mx-xs" href="https://github.com/lutece-platform/lutece-tech-plugin-asynchronousupload"><small><strong>AsynchronousUpload</strong></small></a> pour fonctionner !
<!-- Si vous utilisez une librairie autre que JQuery FileUpload inclue dans le plugin, il vous faudra modifier le HTML et ajouter le javascript nécessaire. -->
</div>
</div>
<script src="js/plugins/asynchronousupload/config.js"></script>
<script>
/* Maps to manage files field errors */
var mapFileErrors = new Map();
var mapFilesNumber = new Map();
var mapFilesNumber = new Map();
var labelFileSize = 'File size :';
</script>
<script src="jsp/site/plugins/asynchronousupload/GetMainUploadJs.jsp?handler=formsAsynchronousUploadHandler" ></script>
<div id="liveFileToastContainer" class="toast-container position-fixed p-3 top-0 end-0" style="position-fixed">
<div id="liveFileToast" class="toast" role="alert" data-autohide="true" data-delay="2000" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Attention</strong>
<button type="button" class="ms-auto btn-close" data-bs-dismiss="toast" aria-label="Close">&times;</button>
</div>
<div class="toast-body">
Pas d'upload possible sur la démo
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Récupérer le conteneur spécifique par son identifiant
var container = document.getElementById('liveFileToastContainer');
var toastElList = [].slice.call(container.querySelectorAll('.toast'));
var option = { delay: 0, animation: true, autohide: false };
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl, option);
});
});
</script>
<form method="post">
<h4 class="main-info-color">
Zone de drop de fichiers</h4>
<div class="row ">
<div class="col ">
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="group-files dropzone ">
<div class="col">
<label id="lbdomicile" class="form-label" for="domicile">Upload files&nbsp;<span class="main-danger-color" tabindex="0" title="Mandatory">*</span></label>
<div id="_file_status_files_domicile" role="status" class="visually-hidden" aria-live="polite"></div>
<p class="form-text " id="help_domicile">
Télécharger vos fichiers !</p>
<div id="_file_error_box_domicile"></div>
<div id="group-domicile" class="d-flex align-items-center file-input">
<input type="file" class="form-control my-xs is-required formsAsynchronousUploadHandler"aria-required="true" aria-describedby="help_domicile" data-nbuploadedfiles="0" name="files_domicile" id="domicile" multiple="multiple" data-nof="10">
<svg class="paris-icon paris-icon-upload white-color" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-upload"></use>
</svg>
<p class="flex-1 text-start ms-xs my-0">Drop your files here or  <span class="main-info-color text-underline">Select</span></p>
</div>
<div id="progress_domicile" class="progress mt-s" style="display:none;">
<div id="progress-bar_domicile" class="progress-bar progress-bar-success progress-bar-striped"></div>
</div>
<div class="form-files-group" id="_file_deletion_label_domicile" style="display:none;">
<ul id="_file_deletion_domicile" class="files-group">
</ul>
</div>
</div>
</div>
</div>
</div>
<h4 class="main-info-color">
Zone + liste de fichiers upload</h4>
<div class="row ">
<div class="col ">
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="group-files dropzone no-file">
<div class="col">
<label id="lbdomicile2" class="form-label" for="domicile2">Upload files</label>
<div id="_file_status_files_domicile" role="status" class="visually-hidden" aria-live="polite"></div>
<div id="_file_error_box_domicile2"></div>
<div id="group-domicile2" class="d-flex align-items-center file-input">
<input type="file" class="form-control my-xs formsAsynchronousUploadHandler" data-nbuploadedfiles="2" name="files_domicile" id="domicile2" multiple="multiple" data-nof="2">
<svg class="paris-icon paris-icon-upload white-color" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-upload"></use>
</svg>
<p class="flex-1 text-start ms-xs my-0">Drop your files here or  <span class="main-info-color text-underline">Select</span></p>
</div>
<div id="progress_domicile2" class="progress mt-s" style="display:none;">
<div id="progress-bar_domicile2" class="progress-bar progress-bar-success progress-bar-striped"></div>
</div>
<div class="form-files-group" id="_file_deletion_label_domicile2">
<ul id="_file_deletion_domicile2" class="files-group">
<li class="files-item" id="_file_uploaded_files_domicile21">
<label class="files-item-label" for="_form_upload_checkbox_files_domicile21">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=files_domicile2&field_index=1&fileName=Mon attestation.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" data-type="DOCX" data-img="">
<span class="file-item-label">Mon attestation.docx</span>
<span class="file-item-info">File size : 3 Ko</span>
</a>
</label>
<button type="button" class="btn btn-link main-color deleteSingleFile p-0" data-item="#_file_uploaded_files_domicile21" fieldName="files_domicile2" handlerName="formsAsynchronousUploadHandler" index="1" title="Delete Mon attestation.docx">
<svg class="paris-icon paris-icon-close" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</li>
<li class="files-item" id="_file_uploaded_files_domicile31">
<label class="files-item-label" for="_form_upload_checkbox_files_domicile31">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=files_domicile3&field_index=1&fileName=Justificatif.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" data-type="DOCX" data-img="">
<span class="file-item-label">Justificatif.docx</span>
<span class="file-item-info">File size : 60 o</span>
</a>
</label>
<button type="button" class="btn btn-link main-color deleteSingleFile p-0" data-item="#_file_uploaded_files_domicile31" fieldName="files_domicile3" handlerName="formsAsynchronousUploadHandler" index="1" title="Delete Justificatif.docx">
<svg class="paris-icon paris-icon-close" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<button class="btn btn-action" type="submit" id="doSaveForm">
<span class="btn-label ">Valider</span>
</button>
<button class="btn btn-link-action" type="submit">
<svg class="paris-icon paris-icon-close"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg><span class="btn-label ">Annuler</span>
</button>
</div>
</div>
</form>
<script>
document.addEventListener( 'DOMContentLoaded', function(){
const filesSelector = document.querySelectorAll('[name="files_domicile"]');
filesSelector.forEach( f => f.addEventListener('click', function(event) {
event.preventDefault();
// Show toast using Bootstrap 5 vanilla JS
const toastElement = document.getElementById('liveFileToast');
if (toastElement) {
const toast = new bootstrap.Toast(toastElement);
toast.show();
}
})
)
});
</script>

<div class="row ">
<div class="col-4 ">
<label class="form-label" for="datepicker">
Date picker
</label>
<div class="input-group">
<input type="text" class=" form-control" name="date1" id="datepicker_1" value="2026-05-23">
<span class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use href="#paris-icon-agenda"></use>
</svg></span>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
pickLevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const elemdatepicker_1 = document.querySelector('#datepicker_1')
const dtOptionsdatepicker_1 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_1 = new themeDatepicker( elemdatepicker_1, dtOptionsdatepicker_1 );
});
</script>
</div>
<div class="col-4 ">
<label class="form-label" for="datepicker">
Date picker sans icone<span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<div class="input-group">
<input type="text" class=" form-control" name="date2" id="datepicker_2" value="" placeholder="jj/mm/yyyy" aria-label="jj/mm/yyyy" aria-required="true">
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
pickLevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const elemdatepicker_2 = document.querySelector('#datepicker_2')
const dtOptionsdatepicker_2 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_2 = new themeDatepicker( elemdatepicker_2, dtOptionsdatepicker_2 );
});
</script>
</div>
<div class="col-4 ">
<label class="form-label" for="datepicker">
Date picker HTML
</label>
<div class="input-group">
<input type="date" class=" form-control" name="date3" id="datepicker_3" value="">
</div>
</div>
<div class="col-4 ">
<label class="form-label" for="datepicker">
Date picker avec séparateur
</label>
<div class="input-group">
<input type="text" class=" form-control" name="date4" id="datepicker_4" value="">
</div>
<script>
(function() {
const el = document.getElementById('datepicker_4');
if (!el) return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const localeSample = new Date(yr, 11, 31).toLocaleDateString(document.documentElement.lang || navigator.language);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
if (el.placeholder === '') {
el.placeholder = localeSample.replace(/31/, 'jj').replace(/12/, 'mm').replace(String(yr), 'aaaa');
}
el.addEventListener('input', function(e) {
if (e.inputType === 'deleteContentBackward' || e.inputType === 'deleteContentForward') return;
const digits = el.value.replace(/[^0-9]/g, '');
let result = '', di = 0;
for (let i = 0; i < partLengths.length; i++) {
const chunk = digits.substring(di, di + partLengths[i]);
if (chunk.length === 0) break;
if (i > 0) result += sep;
result += chunk;
di += partLengths[i];
}
if (result !== el.value) {
el.value = result;
}
});
})();
</script>
</div>
</div>

<form method="post">
<div class="row ">
<div class="col-12 col-lg-6 ">
<label class="form-label" for="dtRangeA11y">
Période A
</label>
<div class="daterange " id="dtRangeA11yA">
<div class="row ">
<div class="col pe-0">
<label class="form-label visually-hidden" for="dtRangeA11yA_range_start">
#i8n{theme.labelDateStart}
</label>
</div>
<div class="col ps-0">
<label class="form-label visually-hidden" for="dtRangeA11yA_range_end">
#i8n{theme.labelDateEnd}
</label>
</div>
</div>
<div class="row ">
<div class="col pe-0">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeA11yA" id="dtRangeA11yA_range_start" value="">
</div>
</div>
<div class="col ps-0">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeA11yA_range_end" id="dtRangeA11yA_range_end" value="">
<div class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use href="#paris-icon-agenda"></use>
</svg></div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
pickLevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeDefaultOptions = {
title: '',
format: showFormat,
dateDelimiter: '|',
language: `${navigator.language.split('-')[0]}`,
dataFormat: dataFormat,
daysOfWeekDisabled: [],
buttonClass: 'btn',
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
defaultViewDate: 'today',
todayButton: false,
clearButton: true,
pickLevel: 0,
startView: 0,
todayHighlight: true,
minDate: null,
maxDate: null,
weekNumbers: 0,
weekStart: 1,
}
const dtRangeOptionsdtRangeA11yA = setDatePickerOptions( themeOptions, customOptions, dtRangeDefaultOptions );
const elDtPickerWrapperdtRangeA11yA = document.getElementById( 'dtRangeA11yA' );
const rangepickerdtRangeA11yA = new DateRangePickerA11y( elDtPickerWrapperdtRangeA11yA, dtRangeOptionsdtRangeA11yA );
});
</script>
</div>
<div class="col-12 col-lg-6 ">
<label class="form-label" for="dtRangeA11y">
Période B
</label>
<p class="form-text " id="help_dtRangeA11yB">
Période donnée</p>
<div class="daterange " id="dtRangeA11yB">
<div class="row ">
<div class="col pe-0">
<label class="form-label visually-hidden" for="dtRangeA11yB_range_start">
#i8n{theme.labelDateStart}
</label>
</div>
<div class="col ps-0">
<label class="form-label visually-hidden" for="dtRangeA11yB_range_end">
#i8n{theme.labelDateEnd}
</label>
</div>
</div>
<div class="row ">
<div class="col pe-0">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeA11yB" id="dtRangeA11yB_range_start" value="">
</div>
</div>
<div class="col ps-0">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeA11yB_range_end" id="dtRangeA11yB_range_end" value="">
<div class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use href="#paris-icon-agenda"></use>
</svg></div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
pickLevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeDefaultOptions = {
title: '',
format: showFormat,
dateDelimiter: '|',
language: `${navigator.language.split('-')[0]}`,
dataFormat: dataFormat,
daysOfWeekDisabled: [],
buttonClass: 'btn',
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
defaultViewDate: 'today',
todayButton: false,
clearButton: true,
pickLevel: 0,
startView: 0,
todayHighlight: true,
minDate: null,
maxDate: null,
weekNumbers: 0,
weekStart: 1,
}
const dtRangeOptionsdtRangeA11yB = setDatePickerOptions( themeOptions, customOptions, dtRangeDefaultOptions );
const elDtPickerWrapperdtRangeA11yB = document.getElementById( 'dtRangeA11yB' );
const rangepickerdtRangeA11yB = new DateRangePickerA11y( elDtPickerWrapperdtRangeA11yB, dtRangeOptionsdtRangeA11yB );
});
</script>
</div>
<div class="col-12 col-lg-6 ">
<label class="form-label" for="dtRangeLabeled">
Période C avec labels<span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<div class="daterange " id="dtRangeLabeled">
<div class="row ">
<div class="col pe-0">
<label class="form-label" for="dtRangeLabeled_range_start">
Début
</label>
</div>
<div class="col ps-0">
<label class="form-label" for="dtRangeLabeled_range_end">
Fin
</label>
</div>
</div>
<div class="row ">
<div class="col pe-0">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeLabeled" id="dtRangeLabeled_range_start" value="">
</div>
</div>
<div class="col ps-0">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeLabeled_range_end" id="dtRangeLabeled_range_end" value="">
<div class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use href="#paris-icon-agenda"></use>
</svg></div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
pickLevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeDefaultOptions = {
title: '',
format: showFormat,
dateDelimiter: '|',
language: `${navigator.language.split('-')[0]}`,
dataFormat: dataFormat,
daysOfWeekDisabled: [],
buttonClass: 'btn',
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
defaultViewDate: 'today',
todayButton: false,
clearButton: true,
pickLevel: 0,
startView: 0,
todayHighlight: true,
minDate: null,
maxDate: null,
weekNumbers: 0,
weekStart: 1,
}
const dtRangeOptionsdtRangeLabeled = setDatePickerOptions( themeOptions, customOptions, dtRangeDefaultOptions );
const elDtPickerWrapperdtRangeLabeled = document.getElementById( 'dtRangeLabeled' );
const rangepickerdtRangeLabeled = new DateRangePickerA11y( elDtPickerWrapperdtRangeLabeled, dtRangeOptionsdtRangeLabeled );
});
</script>
</div>
<div class="col-12 col-lg-6 ">
<label class="form-label" for="dtRangeLabeled2">
Période C avec Erreur<span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<p class="invalid-feedback" id="error_dtRangeLabeled_range_end">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Une erreur est survenue</p>
<div class="daterange is-invalid" id="dtRangeLabeled2">
<div class="row ">
<div class="col pe-0">
<label class="form-label" for="dtRangeLabeled2_range_start">
Début
</label>
</div>
<div class="col ps-0">
<label class="form-label" for="dtRangeLabeled2_range_end">
Fin
</label>
</div>
</div>
<div class="row ">
<div class="col pe-0">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeLabeled2" id="dtRangeLabeled2_range_start" value="">
</div>
</div>
<div class="col ps-0">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeLabeled2_range_end" id="dtRangeLabeled2_range_end" value="">
<div class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use href="#paris-icon-agenda"></use>
</svg></div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
pickLevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeDefaultOptions = {
title: '',
format: showFormat,
dateDelimiter: '|',
language: `${navigator.language.split('-')[0]}`,
dataFormat: dataFormat,
daysOfWeekDisabled: [],
buttonClass: 'btn',
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
defaultViewDate: 'today',
todayButton: false,
clearButton: true,
pickLevel: 0,
startView: 0,
todayHighlight: true,
minDate: null,
maxDate: null,
weekNumbers: 0,
weekStart: 1,
}
const dtRangeOptionsdtRangeLabeled2 = setDatePickerOptions( themeOptions, customOptions, dtRangeDefaultOptions );
const elDtPickerWrapperdtRangeLabeled2 = document.getElementById( 'dtRangeLabeled2' );
const rangepickerdtRangeLabeled2 = new DateRangePickerA11y( elDtPickerWrapperdtRangeLabeled2, dtRangeOptionsdtRangeLabeled2 );
});
</script>
</div>
</div>
</form>

<form method="post">
<fieldset id="fieldset-error" role="group" aria-labelledby="legend-error">
<legend id="legend-error" aria-required="true">Meeting error <span class="main-danger-color" tabindex="-1" title="Mandatory">*</span></legend>
<p class="invalid-feedback mt-xs" id="error_error">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Une erreur s'est produite !</p>
<div class="row is-invalid mt-0">
<div class="col-6 col-md-4 col-lg-2 ">
<div id="label_error_begin" >
<label class="form-label visually-hidden" for="error_begin!">
From <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<p class="invalid-feedback visually-hidden" id="error_error_begin">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Une erreur s'est produite !</p>
<input type="time" class=" form-control is-invalid" name="error_begin" id="error_begin" value="08:00" title="From" min="08:00" max="18:00" step="900" aria-required="true" aria-invalid="true" aria-describedby="error_error_begin">
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 ">
<div id="label_error_end" >
<label class="form-label visually-hidden" for="error_end!">
To <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<p class="invalid-feedback visually-hidden" id="error_error_end">
<svg class="paris-icon paris-icon-alert-error main-danger-color"data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Une erreur s'est produite !</p>
<input type="time" class=" form-control is-invalid" name="error_end" id="error_end" value="18:00" title="To" min="08:00" max="18:00" step="900" aria-required="true" aria-invalid="true" aria-describedby="error_error_end">
</div>
</div>
</div>
</fieldset>
<script src="themes/skin/parisfr/js/themeparisfr.util.min.js"></script>
<script src="themes/skin/parisfr/js/plugins/forms/input-time-polyfill.y11.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const browserInfo = getBrowserInfo();
// Polyfill for IE / FF / Safari
if ( browserInfo.name.includes( 'IE') || browserInfo.name.includes('Firefox') || browserInfo.name.includes('Safari') ) {
const btnSendStep = document.querySelector('[name="action_doSaveStep"]');
const timeInputs = document.querySelectorAll('input[type="time"]');
// Replace time inputs with text inputs with class "time-polyfill"
timeInputs.forEach( input => {
input.classList.add('time-polyfill');
input.type = 'text';
});
// Add event listener for keydown event to handle tabbing between inputs
document.addEventListener('keydown', function( e ) {
if( e.target.classList.contains('time-polyfill') ) {
switch (e.keyCode) {
case 9:
const inputName = e.target.name;
const nextInputName = inputName.endsWith('_begin') ? inputName.replace('_begin', '_end') : inputName.replace('_end', '_begin');
const nextInput = document.querySelector(`input[name="${nextInputName}"]`);
if (nextInput) {
nextInput.focus();
}
e.stopImmediatePropagation();
break;
default:
break;
}
}
// Validate before submitting the form
if( btnSendStep != null ){
btnSendStep.on('click', function(e) {
// Replace time inputs with text inputs with class "time-polyfill"
timeInputs.forEach( input => {
input.value = input.value === ('--:--') ? '' : input.value;
});
});
}
});
}
});
</script>
<fieldset id="fieldset-meeting" role="group" aria-labelledby="legend-meeting" aria-describedby="help_meeting">
<legend id="legend-meeting" aria-required="true">Meeting time <span class="main-danger-color" tabindex="-1" title="Mandatory">*</span></legend>
<p class="form-text " id="help_meeting">
Veuillez sélectionner une heure de réunion</p>
<div class="row ">
<div class="col-6 col-md-4 col-lg-2 ">
<div id="label_meeting_begin" >
<label class="form-label visually-hidden" for="meeting_begin!">
From <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="time" class=" form-control" name="meeting_begin" id="meeting_begin" value="08:00" title="From" min="08:00" max="18:00" step="900" aria-required="true">
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 ">
<div id="label_meeting_end" >
<label class="form-label visually-hidden" for="meeting_end!">
To <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="time" class=" form-control" name="meeting_end" id="meeting_end" value="18:00" title="To" min="08:00" max="18:00" step="900" aria-required="true">
</div>
</div>
</div>
</fieldset>
<script src="themes/skin/parisfr/js/themeparisfr.util.min.js"></script>
<script src="themes/skin/parisfr/js/plugins/forms/input-time-polyfill.y11.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const browserInfo = getBrowserInfo();
// Polyfill for IE / FF / Safari
if ( browserInfo.name.includes( 'IE') || browserInfo.name.includes('Firefox') || browserInfo.name.includes('Safari') ) {
const btnSendStep = document.querySelector('[name="action_doSaveStep"]');
const timeInputs = document.querySelectorAll('input[type="time"]');
// Replace time inputs with text inputs with class "time-polyfill"
timeInputs.forEach( input => {
input.classList.add('time-polyfill');
input.type = 'text';
});
// Add event listener for keydown event to handle tabbing between inputs
document.addEventListener('keydown', function( e ) {
if( e.target.classList.contains('time-polyfill') ) {
switch (e.keyCode) {
case 9:
const inputName = e.target.name;
const nextInputName = inputName.endsWith('_begin') ? inputName.replace('_begin', '_end') : inputName.replace('_end', '_begin');
const nextInput = document.querySelector(`input[name="${nextInputName}"]`);
if (nextInput) {
nextInput.focus();
}
e.stopImmediatePropagation();
break;
default:
break;
}
}
// Validate before submitting the form
if( btnSendStep != null ){
btnSendStep.on('click', function(e) {
// Replace time inputs with text inputs with class "time-polyfill"
timeInputs.forEach( input => {
input.value = input.value === ('--:--') ? '' : input.value;
});
});
}
});
}
});
</script>
<fieldset id="fieldset-slot" role="group" aria-labelledby="legend-slot">
<div class="row ">
<div class="col-6 col-md-4 col-lg-2 ">
<div id="label_slot_begin" >
<label class="form-label" for="slot_begin!">
Start Time
</label>
<input type="time" class=" form-control" name="slot_begin" id="slot_begin" value="09:00" title="Start Time" min="09:00" max="17:00">
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 ">
<div id="label_slot_end" >
<label class="form-label" for="slot_end!">
End Time
</label>
<input type="time" class=" form-control" name="slot_end" id="slot_end" value="17:00" title="End Time" min="09:00" max="17:00">
</div>
</div>
</div>
</fieldset>
<script src="themes/skin/parisfr/js/themeparisfr.util.min.js"></script>
<script src="themes/skin/parisfr/js/plugins/forms/input-time-polyfill.y11.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const browserInfo = getBrowserInfo();
// Polyfill for IE / FF / Safari
if ( browserInfo.name.includes( 'IE') || browserInfo.name.includes('Firefox') || browserInfo.name.includes('Safari') ) {
const btnSendStep = document.querySelector('[name="action_doSaveStep"]');
const timeInputs = document.querySelectorAll('input[type="time"]');
// Replace time inputs with text inputs with class "time-polyfill"
timeInputs.forEach( input => {
input.classList.add('time-polyfill');
input.type = 'text';
});
// Add event listener for keydown event to handle tabbing between inputs
document.addEventListener('keydown', function( e ) {
if( e.target.classList.contains('time-polyfill') ) {
switch (e.keyCode) {
case 9:
const inputName = e.target.name;
const nextInputName = inputName.endsWith('_begin') ? inputName.replace('_begin', '_end') : inputName.replace('_end', '_begin');
const nextInput = document.querySelector(`input[name="${nextInputName}"]`);
if (nextInput) {
nextInput.focus();
}
e.stopImmediatePropagation();
break;
default:
break;
}
}
// Validate before submitting the form
if( btnSendStep != null ){
btnSendStep.on('click', function(e) {
// Replace time inputs with text inputs with class "time-polyfill"
timeInputs.forEach( input => {
input.value = input.value === ('--:--') ? '' : input.value;
});
});
}
});
}
});
</script>
<fieldset id="fieldset-creneau" role="group" aria-labelledby="legend-creneau" aria-describedby="help_creneau">
<legend id="legend-creneau" >Choisir un créneau</legend>
<p class="form-text " id="help_creneau">
Prendre un rendez-vous sur le créneau choisi</p>
<div class="row ">
<div class="col-6 col-md-4 col-lg-2 ">
<div id="label_creneau_begin" >
<label class="form-label visually-hidden" for="creneau_begin!">
From
</label>
<input type="time" class=" form-control" name="creneau_begin" id="creneau_begin" value="00:00" title="From" min="00:00" max="23:59">
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 ">
<div id="label_creneau_end" >
<label class="form-label visually-hidden" for="creneau_end!">
To
</label>
<input type="time" class=" form-control" name="creneau_end" id="creneau_end" value="23:59" title="To" min="00:00" max="23:59">
</div>
</div>
</div>
</fieldset>
<script src="themes/skin/parisfr/js/themeparisfr.util.min.js"></script>
<script src="themes/skin/parisfr/js/plugins/forms/input-time-polyfill.y11.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const browserInfo = getBrowserInfo();
// Polyfill for IE / FF / Safari
if ( browserInfo.name.includes( 'IE') || browserInfo.name.includes('Firefox') || browserInfo.name.includes('Safari') ) {
const btnSendStep = document.querySelector('[name="action_doSaveStep"]');
const timeInputs = document.querySelectorAll('input[type="time"]');
// Replace time inputs with text inputs with class "time-polyfill"
timeInputs.forEach( input => {
input.classList.add('time-polyfill');
input.type = 'text';
});
// Add event listener for keydown event to handle tabbing between inputs
document.addEventListener('keydown', function( e ) {
if( e.target.classList.contains('time-polyfill') ) {
switch (e.keyCode) {
case 9:
const inputName = e.target.name;
const nextInputName = inputName.endsWith('_begin') ? inputName.replace('_begin', '_end') : inputName.replace('_end', '_begin');
const nextInput = document.querySelector(`input[name="${nextInputName}"]`);
if (nextInput) {
nextInput.focus();
}
e.stopImmediatePropagation();
break;
default:
break;
}
}
// Validate before submitting the form
if( btnSendStep != null ){
btnSendStep.on('click', function(e) {
// Replace time inputs with text inputs with class "time-polyfill"
timeInputs.forEach( input => {
input.value = input.value === ('--:--') ? '' : input.value;
});
});
}
});
}
});
</script>
</form>

<form method="post">
<div class="row ">
<div class="col ">
<div class="quantity-picker ">
<label class="form-label" for="seats">
Number of seats<span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<div class="input-group w-auto">
<button class="btn btn-light quantity-btn decrement-quantity" type="submit"aria-label="Decrease quantity" data-direction="-1">
<span class="btn-label ">&#8722;</span>
</button>
<input type="number" class=" form-control quantity-input" name="seats" id="seats" value="1" data-min="1" data-max="20" aria-required="true">
<button class="btn btn-light quantity-btn increment-quantity" type="submit"aria-label="Increase quantity" data-direction="1">
<span class="btn-label ">&#43;</span>
</button>
</div>
</div>
<script>
document.addEventListener( 'DOMContentLoaded', function() {
document.addEventListener( 'click', function(ev) {
if ( ev.target.classList.contains('quantity-btn') ) {
const parentDiv = ev.target.closest('.quantity-picker');
const input = parentDiv.querySelector('input[name="seats"]');
const currentQty = parseInt(input.value);
const qtyDirection = parseInt(ev.target.getAttribute("data-direction"));
let newQty = currentQty + qtyDirection;
let minQty = parseInt(input.getAttribute("data-min"));
let maxQty = parseInt(input.getAttribute("data-max"));
newQty = Math.max(minQty, Math.min(maxQty, newQty));
parentDiv.querySelector(".decrement-quantity").disabled = (newQty === minQty);
parentDiv.querySelector(".increment-quantity").disabled = (newQty === maxQty);
input.value = newQty;
}
});
document.addEventListener("blur", function(ev) {
if ( ev.target.name ==='quantity') {
const input = ev.target;
const parentDiv = input.closest('.quantity-picker');
let minQty = parseInt(input.getAttribute("data-min"));
if (input.value.trim() === "") {
input.value = minQty;
parentDiv.querySelector(".decrement-quantity").disabled = true;
}
}
}, true);
});
</script>
</div>
</div>
<div class="row ">
<div class="col ">
<label class="form-label" for="quantity">
Quantité
</label>
<p class="form-text " id="help_seats">
Information exemple</p>
<div class="quantity-picker ">
<label class="form-label visually-hidden" for="quantity">
Choose a quantity
</label>
<div class="input-group w-auto">
<button class="btn btn-light quantity-btn decrement-quantity" type="submit"aria-label="Decrease quantity" data-direction="-1">
<span class="btn-label ">&#8722;</span>
</button>
<input type="number" class=" form-control quantity-input" name="quantity" id="quantity" value="0" data-min="0" data-max="10" >
<button class="btn btn-light quantity-btn increment-quantity" type="submit"aria-label="Increase quantity" data-direction="1">
<span class="btn-label ">&#43;</span>
</button>
</div>
</div>
<script>
document.addEventListener( 'DOMContentLoaded', function() {
document.addEventListener( 'click', function(ev) {
if ( ev.target.classList.contains('quantity-btn') ) {
const parentDiv = ev.target.closest('.quantity-picker');
const input = parentDiv.querySelector('input[name="quantity"]');
const currentQty = parseInt(input.value);
const qtyDirection = parseInt(ev.target.getAttribute("data-direction"));
let newQty = currentQty + qtyDirection;
let minQty = parseInt(input.getAttribute("data-min"));
let maxQty = parseInt(input.getAttribute("data-max"));
newQty = Math.max(minQty, Math.min(maxQty, newQty));
parentDiv.querySelector(".decrement-quantity").disabled = (newQty === minQty);
parentDiv.querySelector(".increment-quantity").disabled = (newQty === maxQty);
input.value = newQty;
}
});
document.addEventListener("blur", function(ev) {
if ( ev.target.name ==='quantity') {
const input = ev.target;
const parentDiv = input.closest('.quantity-picker');
let minQty = parseInt(input.getAttribute("data-min"));
if (input.value.trim() === "") {
input.value = minQty;
parentDiv.querySelector(".decrement-quantity").disabled = true;
}
}
}, true);
});
</script>
</div>
</div>
</form>

<section class="step step-done ">
<section class="step-title">
<div class="container d-flex justify-content-between align-items-center">
<h2 class="title mt-0" title="Personal information">
<span class="step-number">
<svg width="32" height="32" role="img" aria-hidden="true" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.9607 23.9932L5.33203 16.3882L7.67726 14.0502L12.9607 19.3173L24.3201 7.99316L26.6654 10.3311L12.9607 23.9932Z" fill="white"/></svg></span>
<span>
Personal information</span>
</h2>
<span class="d-none d-sm-block">
<button class="btn btn-secondary btn-sm-block" type="submit"name="action_doGoToStep"value="0" aria-label="Update step Personal information" formnovalidate>
<span class="btn-label ">Update</span>
</button>
</span>
</div>
</section>
<div class="container mt-0">
<div class="step-content">
<ul class="list-unstyled" >
<p>
John Doe - john.doe@email.com</p>
</ul>
<div class="d-block d-sm-none mt-m">
<button class="btn btn-secondary btn-sm-block" type="submit"name="action_doGoToStep"value="0" aria-label="Update step Personal information" formnovalidate>
<span class="btn-label ">Update</span>
</button>
</div>
</div>
</div>
</section>
<section class="step step-done ">
<section class="step-title">
<div class="container d-flex justify-content-between align-items-center">
<h2 class="title mt-0" title="Account details">
<span class="step-number">
<svg width="32" height="32" role="img" aria-hidden="true" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.9607 23.9932L5.33203 16.3882L7.67726 14.0502L12.9607 19.3173L24.3201 7.99316L26.6654 10.3311L12.9607 23.9932Z" fill="white"/></svg></span>
<span>
Account details</span>
</h2>
<span class="d-none d-sm-block">
<a href="jsp/site/Portal.jsp?page=form&step=1" class="btn btn-secondary btn-sm-block " aria-label="Update step Account details" >
<span class="link-label">Edit</span>
</a>
</span>
</div>
</section>
<div class="container mt-0">
<div class="step-content">
<ul class="list-unstyled" >
<p>
Username: johndoe</p>
</ul>
<div class="d-block d-sm-none mt-m">
<a href="jsp/site/Portal.jsp?page=form&step=1" class="btn btn-secondary btn-sm-block " aria-label="Update step Account details" >
<span class="link-label">Edit</span>
</a>
</div>
</div>
</div>
</section>

<section class="step step-current " id="current_step">
<div class="step-title">
<div class="container ">
<h2 class="title h3" data-step="2" title="Contact information - current step" aria-current="step" tabindex="0">
<span class="step-number">
2</span>
<span>
Contact information</span>
</h2>
</div>
</div>
<div class="step-content">
<div class="container ">
<p class="mandatory-warning visually-hidden">
Fields followed  by an asterisk  *  are mandatory.</p>
<label class="form-label" for="email">
Email <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="email" class=" form-control" name="email" id="email" value="" required aria-required="true">
<label class="form-label" for="phone">
Phone
</label>
<input type="tel" class=" form-control fr-number" name="phone" id="phone" value="">
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.fr-number').forEach(function(element) {
element.addEventListener('blur', function() {
var num = element.value;
var numFormatte = num
.replace(/^0(\d)(\s?)(\d{2})(\s?)(\d{2})(\s?)(\d{2})(\s?)(\d{2})$/, '+33 $1 $3 $5 $7 $9')
.replace(/^\+33(\d{9})$/, function(match, p1) {
return '+33 ' + p1.replace(/(\d)(\d{2})(\d{2})(\d{2})(\d{2})/, '$1 $2 $3 $4 $5');
});
element.value = numFormatte;
});
});
});
</script>
</div>
</div>
<div class="step-footer">
<div class="container ">
<p class="mandatory-warning ms-xs">
Fields followed  by an asterisk  *  are mandatory.</p>
<div class="step-current-toolbar d-flex justify-content-center justify-content-sm-end">
<ul class="list-unstyled d-flex justify-content-end flex-column flex-sm-row align-items-center mt-0 me-xs" >
<li>
<button class="btn btn-tertiary ms-sm" type="submit" id="action_doPrevStep" name="action_doPrevStep" formnovalidate>
<span class="btn-label ">Next step</span>
</button>
</li>
<li>
<button class="btn btn-primary ms-sm" type="submit" id="action_doNextStep" name="action_doNextStep">
<span class="btn-label ">Previous step</span>
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="modal cmodal fade" id="reset-stepModal" tabindex="-1" aria-labelledby="modalreset-stepTitle" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title h5 main-color" id="modalreset-stepTitle">
Remove the saved step</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-tertiary m-1" type="button"data-bs-dismiss="modal">
<span class="btn-label ">No save, return to my process</span>
</button>
<button class="btn btn-primary" id="modal-reset-backup" type="button"><span class="btn-label">Yes remove those informations</span></button>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
/* Error Scroll */
// Add smooth scrolling to all links
const invalidElements = document.querySelectorAll('.step-current .step-content .is-invalid');
const currentStepId = document.querySelector('#current_step .step-title .step-number').textContent.trim();
if ( invalidElements.length > 0 ) {
const firstInvalidElements = invalidElements[0];
const invalidElementStatusMsg = `<p class="visually-hidden" id="step-alert" tabindex="-1">There are validation errors in this step. Your step has not been validated, please correct the errors before continuing.</p>`
document.querySelector('.step-current .step-content .container').insertAdjacentHTML( 'afterbegin', invalidElementStatusMsg );
document.querySelector('#step-alert').focus();
firstInvalidElements.scrollIntoView({ behavior: 'smooth', block: 'center' });
switch(firstInvalidElements.tagName.toLowerCase()) {
case 'legend':
firstInvalidElements.parentElement.querySelector('input').focus();
break;
case 'div':
firstInvalidElements.querySelector('input').focus();
break;
default:
firstInvalidElements.focus();
break;
}
} else if ( !isNaN(parseInt(currentStepId) ) && parseInt( currentStepId ) > 1 ) {
const current = document.querySelector('#current_step');
const y = current.offsetTop - 220;
window.scrollBy(0, y);
// Déplacer le focus sur le titre de l'étape courante
// pour assurer sa restitution par les technologies d'assistance.
const stepTitle = document.querySelector('.step-current .step-title .title');
if ( stepTitle ) {
stepTitle.focus();
}
}
const formValidate = document.getElementById('form-validate'), formValidateButton = document.getElementById('action_doNextStep');
formValidateButton.addEventListener('click', (e) => {
const invalids = document.querySelectorAll('.form-control:invalid','.form-control:user-invalid');
const arrInvalids = Array.prototype.slice.call(invalids);
arrInvalids.forEach( function( invalid ){
invalid.classList.add('is-invalid')
invalid.setAttribute('aria-invalid', 'true');
const isRequired = invalid.getAttributeNode('required');
if( isRequired !='' ){
let pInvalid = document.createElement("p");
pInvalid.classList.add( 'invalid-feedback' );
pInvalid.innerHTML = `Fields followed  by an asterisk  *  are mandatory.`;
if (invalid.closest('.input-group') != null) {
invalid.closest('.input-group').after(pInvalid);
} else {
invalid.after(pInvalid);
}
}
});
})
const saveStep = document.getElementById('save-step-status');
if(saveStep){
const at = saveStep.querySelector('.alert-title');
const btnReset = document.createElement('button');
btnReset.classList.add('btn', 'btn-tertiary', 'ms-sm');
btnReset.innerHTML = 'Remove the saved step';
btnReset.setAttribute('type', 'button');
btnReset.setAttribute('data-bs-target', '#reset-stepModal');
btnReset.setAttribute('data-bs-toggle', 'modal');
at.appendChild(btnReset);
const btnModalReset = document.querySelector('#modal-reset-backup');
btnModalReset.addEventListener('click', (e) => {
const resetBackup = document.getElementById('');
resetBackup.click();
});
}
const btnValidateHidden = '<button class="visually-hidden" name="action_doNextStep" aria-hidden="true" tabindex="-1" ></button>'
formValidate.insertAdjacentHTML('afterbegin', btnValidateHidden );
});
</script>
<script type="module" src="themes/skin/parisfr/js/modules/theme-form-validation.js"></script>
</section>
<section class="step step-current " id="current_step">
<div class="step-title">
<div class="container ">
<h2 class="title h3" data-step="1" title="Personal information - current step" aria-current="step" tabindex="0">
<span class="step-number">
1</span>
<span>
Personal information</span>
</h2>
</div>
</div>
<div class="step-content">
<div class="container ">
<p class="mandatory-warning visually-hidden">
Fields followed  by an asterisk  *  are mandatory.</p>
<label class="form-label" for="name">
Name <span aria-hidden="true" class="main-danger-color ms-xxs" title="Mandatory">*</span>
</label>
<input type="text" class=" form-control" name="name" id="name" value="" required aria-required="true">
</div>
</div>
<div class="step-footer">
<div class="container ">
<p class="mandatory-warning ms-xs">
Fields followed  by an asterisk  *  are mandatory.</p>
<div class="step-current-toolbar d-flex justify-content-center justify-content-sm-end">
<ul class="list-unstyled d-flex justify-content-end flex-column flex-sm-row align-items-center mt-0 me-xs" >
<li>
<button class="btn btn-primary ms-sm" type="submit" id="action_doNextStep" name="action_doNextStep">
<span class="btn-label ">Previous step</span>
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="modal cmodal fade" id="reset-stepModal" tabindex="-1" aria-labelledby="modalreset-stepTitle" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title h5 main-color" id="modalreset-stepTitle">
Remove the saved step</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-tertiary m-1" type="button"data-bs-dismiss="modal">
<span class="btn-label ">No save, return to my process</span>
</button>
<button class="btn btn-primary" id="modal-reset-backup" type="button"><span class="btn-label">Yes remove those informations</span></button>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
/* Error Scroll */
// Add smooth scrolling to all links
const invalidElements = document.querySelectorAll('.step-current .step-content .is-invalid');
const currentStepId = document.querySelector('#current_step .step-title .step-number').textContent.trim();
if ( invalidElements.length > 0 ) {
const firstInvalidElements = invalidElements[0];
const invalidElementStatusMsg = `<p class="visually-hidden" id="step-alert" tabindex="-1">There are validation errors in this step. Your step has not been validated, please correct the errors before continuing.</p>`
document.querySelector('.step-current .step-content .container').insertAdjacentHTML( 'afterbegin', invalidElementStatusMsg );
document.querySelector('#step-alert').focus();
firstInvalidElements.scrollIntoView({ behavior: 'smooth', block: 'center' });
switch(firstInvalidElements.tagName.toLowerCase()) {
case 'legend':
firstInvalidElements.parentElement.querySelector('input').focus();
break;
case 'div':
firstInvalidElements.querySelector('input').focus();
break;
default:
firstInvalidElements.focus();
break;
}
} else if ( !isNaN(parseInt(currentStepId) ) && parseInt( currentStepId ) > 1 ) {
const current = document.querySelector('#current_step');
const y = current.offsetTop - 220;
window.scrollBy(0, y);
// Déplacer le focus sur le titre de l'étape courante
// pour assurer sa restitution par les technologies d'assistance.
const stepTitle = document.querySelector('.step-current .step-title .title');
if ( stepTitle ) {
stepTitle.focus();
}
}
const formValidate = document.getElementById('form-validate'), formValidateButton = document.getElementById('action_doNextStep');
const saveStep = document.getElementById('save-step-status');
if(saveStep){
const at = saveStep.querySelector('.alert-title');
const btnReset = document.createElement('button');
btnReset.classList.add('btn', 'btn-tertiary', 'ms-sm');
btnReset.innerHTML = 'Remove the saved step';
btnReset.setAttribute('type', 'button');
btnReset.setAttribute('data-bs-target', '#reset-stepModal');
btnReset.setAttribute('data-bs-toggle', 'modal');
at.appendChild(btnReset);
const btnModalReset = document.querySelector('#modal-reset-backup');
btnModalReset.addEventListener('click', (e) => {
const resetBackup = document.getElementById('');
resetBackup.click();
});
}
const btnValidateHidden = '<button class="visually-hidden" name="action_doNextStep" aria-hidden="true" tabindex="-1" ></button>'
formValidate.insertAdjacentHTML('afterbegin', btnValidateHidden );
});
</script>
<script type="module" src="themes/skin/parisfr/js/modules/theme-form-validation.js"></script>
</section>

<p class="lead">
Contenu d'une étape : Avec bulle d'aide</p>
<section class="step step-current " id="current_step">
<div class="step-title">
<div class="container ">
<h2 class="title h3" data-step="2" title="Dossier - current step" aria-current="step" tabindex="0">
<span class="step-number">
2</span>
<span>
Dossier</span>
</h2>
</div>
</div>
<div class="step-content">
<div class="container ">
<p class="mandatory-warning visually-hidden">
Fields followed  by an asterisk  *  are mandatory.</p>
<div class="step-group">
<fieldset class="w-100 flex-fill " id="fieldset-id-1322760608735601" role="group" aria-labelledby="legend-id-1322760608735601">
<legend id="legend-id-1322760608735601">
<span class="h3 group-title">
Information
</span>
</legend>
<div class="row ">
<div class="col ">
Lorem ipsum Help</div>
</div>
<div class="row ">
<div class="col ">
<label class="form-label" for="name">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<p class="form-text " id="help_name">
Saisir votre nom de famille</p>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand">
</div>
<div class="col ">
<label class="form-label" for="firstname">
Prénom
</label>
<p class="form-text " id="help_firstname">
Saisir votre prénom</p>
<input type="text" class=" form-control" name="firstname" id="firstname" value="">
</div>
</div>
</fieldset>
</div>
<div class="step-group">
<div class="w-100 flex-fill " id="id-1329703325195371">
<h3 class="mt-0 mt-0 group-title" tabindex="-1" >
Information sans Fieldset
</h3>
<div class="row ">
<div class="col ">
Lorem ipsum Help</div>
</div>
<div class="row ">
<div class="col ">
<label class="form-label" for="name">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<p class="form-text " id="help_name">
Saisir votre nom de famille</p>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand">
</div>
<div class="col ">
<label class="form-label" for="firstname">
Prénom
</label>
<p class="form-text " id="help_firstname">
Saisir votre prénom</p>
<input type="text" class=" form-control" name="firstname" id="firstname" value="">
</div>
</div>
</div>
</div>
<p class="lead">
Contenu d'une étape avec au moins une itération</p>
<div class="step-group">
<fieldset class="w-100 flex-fill " id="fieldset-id-1336646041655141" role="group" aria-labelledby="legend-id-1336646041655141">
<legend class="d-flex justify-content-between align-items-center" id="legend-id-1336646041655141">
<span class="h3 group-title">
Information avec Itération (2)
<div class="btn btn-group ms-auto mt-0">
<button class="btn btn-danger me-sm ms-auto mt-0" type="submit"name="action_removeIteration" value="rm_1">
<svg class="paris-icon paris-icon-trash"data-mce-svg="paris-icon paris-icon-trash" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-trash"></use>
</svg>
<span class="btn-label">
</span>
</button>
<button class="btn btn-primary ms-auto" type="submit"name="action_addIteration" value="add_1">
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-plus"></use>
</svg>
<span class="btn-label">
</span>
</button>
</div>
</span>
</legend>
<div class="row ">
<div class="col ">
<label class="form-label" for="name635">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<p class="form-text " id="help_name635">
Saisir votre nom de famille</p>
<input type="text" class=" form-control" name="name635" id="name635" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand">
</div>
<div class="col ">
<label class="form-label" for="firstname-2">
Prénom
</label>
<p class="form-text " id="help_firstname-2">
Saisir votre prénom</p>
<input type="text" class=" form-control" name="firstname-2" id="firstname-2" value="">
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="step-footer">
<div class="container ">
<p class="mandatory-warning ms-xs">
Fields followed  by an asterisk  *  are mandatory.</p>
<div class="step-current-toolbar d-flex justify-content-center justify-content-sm-end">
<ul class="list-unstyled d-flex justify-content-end flex-column flex-sm-row align-items-center mt-0 me-xs" >
<li>
<button class="btn btn-primary ms-sm" type="submit" id="valid" name="valid">
<span class="btn-label ">Previous step</span>
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="modal cmodal fade" id="reset-stepModal" tabindex="-1" aria-labelledby="modalreset-stepTitle" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title h5 main-color" id="modalreset-stepTitle">
Remove the saved step</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-tertiary m-1" type="button"data-bs-dismiss="modal">
<span class="btn-label ">No save, return to my process</span>
</button>
<button class="btn btn-primary" id="modal-reset-backup" type="button"><span class="btn-label">Yes remove those informations</span></button>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
/* Error Scroll */
// Add smooth scrolling to all links
const invalidElements = document.querySelectorAll('.step-current .step-content .is-invalid');
const currentStepId = document.querySelector('#current_step .step-title .step-number').textContent.trim();
if ( invalidElements.length > 0 ) {
const firstInvalidElements = invalidElements[0];
const invalidElementStatusMsg = `<p class="visually-hidden" id="step-alert" tabindex="-1">There are validation errors in this step. Your step has not been validated, please correct the errors before continuing.</p>`
document.querySelector('.step-current .step-content .container').insertAdjacentHTML( 'afterbegin', invalidElementStatusMsg );
document.querySelector('#step-alert').focus();
firstInvalidElements.scrollIntoView({ behavior: 'smooth', block: 'center' });
switch(firstInvalidElements.tagName.toLowerCase()) {
case 'legend':
firstInvalidElements.parentElement.querySelector('input').focus();
break;
case 'div':
firstInvalidElements.querySelector('input').focus();
break;
default:
firstInvalidElements.focus();
break;
}
} else if ( !isNaN(parseInt(currentStepId) ) && parseInt( currentStepId ) > 1 ) {
const current = document.querySelector('#current_step');
const y = current.offsetTop - 220;
window.scrollBy(0, y);
// Déplacer le focus sur le titre de l'étape courante
// pour assurer sa restitution par les technologies d'assistance.
const stepTitle = document.querySelector('.step-current .step-title .title');
if ( stepTitle ) {
stepTitle.focus();
}
}
const formValidate = document.getElementById('form-validate'), formValidateButton = document.getElementById('valid');
formValidateButton.addEventListener('click', (e) => {
const invalids = document.querySelectorAll('.form-control:invalid','.form-control:user-invalid');
const arrInvalids = Array.prototype.slice.call(invalids);
arrInvalids.forEach( function( invalid ){
invalid.classList.add('is-invalid')
invalid.setAttribute('aria-invalid', 'true');
const isRequired = invalid.getAttributeNode('required');
if( isRequired !='' ){
let pInvalid = document.createElement("p");
pInvalid.classList.add( 'invalid-feedback' );
pInvalid.innerHTML = `Fields followed  by an asterisk  *  are mandatory.`;
if (invalid.closest('.input-group') != null) {
invalid.closest('.input-group').after(pInvalid);
} else {
invalid.after(pInvalid);
}
}
});
})
const saveStep = document.getElementById('save-step-status');
if(saveStep){
const at = saveStep.querySelector('.alert-title');
const btnReset = document.createElement('button');
btnReset.classList.add('btn', 'btn-tertiary', 'ms-sm');
btnReset.innerHTML = 'Remove the saved step';
btnReset.setAttribute('type', 'button');
btnReset.setAttribute('data-bs-target', '#reset-stepModal');
btnReset.setAttribute('data-bs-toggle', 'modal');
at.appendChild(btnReset);
const btnModalReset = document.querySelector('#modal-reset-backup');
btnModalReset.addEventListener('click', (e) => {
const resetBackup = document.getElementById('');
resetBackup.click();
});
}
const btnValidateHidden = '<button class="visually-hidden" name="valid" aria-hidden="true" tabindex="-1" ></button>'
formValidate.insertAdjacentHTML('afterbegin', btnValidateHidden );
});
</script>
<script type="module" src="themes/skin/parisfr/js/modules/theme-form-validation.js"></script>
</section>

<section class="step step-next">
<section class="step-title">
<div class="container ">
<h2 class="title" title="Payment details" data-step="3">
<span class="step-number">
3</span>
<span>
Payment details</span>
</h2>
</div>
</section>
</section>
<section class="step step-next">
<section class="step-title">
<div class="container ">
<h3 class="title" title="Confirmation" data-step="4">
<span class="step-number">
4</span>
<span>
Confirmation</span>
</h3>
</div>
</section>
</section>

<div class="mb-m">
<a href="http://paris.fr" class="btn btn-primary" title="Site de la Ville de Paris [New window]" target="_blank" >
<span class="link-label">Link primary</span>
</a>
</div>
<div class="mb-m">
<a href="http://paris.fr" class="btn btn-primary disabled" title="Site de la Ville de Paris [New window]" target="_blank" >
<span class="link-label">Link primary</span>
</a>
</div>
<div class="mb-m">
<a href="http://fr.lutece.paris.fr" class="link-secondary" target="_blank" >
<span class="link-label">Link secondary</span>
</a>
</div>
<div class="mb-m">
<!-- Warning : wrong or deprecated argument(s) : titleClass, ... -->
<a href="http://fr.lutece.paris.fr" class="link-secondary disabled" target="_blank" >
<span class="link-label">Link secondary</span>
</a>
</div>
<div class="mb-m">
<a href="http://paris.fr" class="link-secondary" title="Site de la Ville de Paris" >
<svg class="paris-icon paris-icon-like"data-mce-svg="paris-icon paris-icon-like" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-like"></use>
</svg><span class="link-label">Decouvrir Paris.fr</span>
</a>
</div>
<div class="mb-m">
<a href="http://paris.fr" class="btn btn-action" title="Site de la Ville de Paris" >
<svg class="paris-icon paris-icon-check"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-check"></use>
</svg><span class="link-label">Decouvrir Paris.fr</span>
</a>
</div>
<div class="mb-m">
<a href="https://www.ow2.org/" class="btn btn-outline-primary" title="OW2 is an independent, global, open-source software community [New window]" target="_blank" >
<span class="link-label">OW2</span>
</a>
</div>

<div class="card ">
<div class="card-body">
<h3 class="card-title">
Liste de liens </h3>
<ul class="custom-list list-default" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Page de Paris.fr dédiée aux régles d'urbanisme" target="_blank">
<span>Page de Paris.fr dédiée aux régles d'urbanisme </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.paris.fr/municipalite" title="Consultation du PLU" target="_blank">
<span>Consultation du PLU </span>
</a>
</li>
<li>
<a href="http://paris.fr" class="" title="Site de la Ville de Paris [New window]" target="_blank" >
<span class="link-label">Decouvrir Paris.fr</span>
</a>
</li>
</ul>
<p>
Avec classe "list-highlight-secondary"</p>
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Page de Paris.fr dédiée aux régles d'urbanisme" target="_blank">
<span>Page de Paris.fr dédiée aux régles d'urbanisme </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.paris.fr/municipalite" title="Consultation du PLU" target="_blank">
<span>Consultation du PLU </span>
</a>
</li>
<li>
<a href="http://paris.fr" class="" title="Site de la Ville de Paris [New window]" target="_blank" >
<span class="link-label">Decouvrir Paris.fr</span>
</a>
</li>
</ul>
</div>
</div>
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Liste de fichiers </h3>
<ul class="custom-list list-files" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Régles d'urbanisme.pdf" target="_blank" download="Régles_d_urbanisme.pdf">
<span>Régles d'urbanisme.pdf </span>
<div class="files-info">
<small class='fw-bold'>80ko</small>
<svg class="paris-icon paris-icon-file-text ms-m main-color"data-mce-svg="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-text"></use>
</svg> </div>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.paris.fr/" title="PLU.docx" download="PLU.docx">
<span>PLU.docx </span>
<div class="files-info">
<small class='fw-bold'>80ko</small>
<svg class="paris-icon paris-icon-file-text ms-m main-color"data-mce-svg="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-text"></use>
</svg> </div>
</a>
</li>
</ul>
<p>
Avec classe "list-highlight-secondary"</p>
<ul class="custom-list list-files list-highlight-secondary" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Régles d'urbanisme.pdf" target="_blank" download="Régles_d_urbanisme.pdf">
<span>Régles d'urbanisme.pdf </span>
<div class="files-info">
<small class='fw-bold'>80ko</small>
<svg class="paris-icon paris-icon-file-text ms-m main-color"data-mce-svg="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-text"></use>
</svg> </div>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.paris.fr/" title="PLU.docx" download="PLU.docx">
<span>PLU.docx </span>
<div class="files-info">
<small class='fw-bold'>80ko</small>
<svg class="paris-icon paris-icon-file-text ms-m main-color"data-mce-svg="paris-icon paris-icon-file-text" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-file-text"></use>
</svg> </div>
</a>
</li>
</ul>
</div>
</div>
<div class="card ">
<div class="card-body">
<h3 class="card-title">
Liste de liens</h3>
<ul class="custom-list list-more more-list" >
<li class="custom-list-item ">
<a class="list-info" href="https://teleservices2.rec.apps.paris.fr/forms" title="Tout sur le thème" target="_blank">
<span>Tout sur le thème </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://lutece.paris.fr/" title="Tout sur Lutece" >
<span>Tout sur Lutece </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.allocine.fr/film/fichefilm_gen_cfilm=7868.html" title="Tout sur ma mère" >
<span>Tout sur ma mère </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://teleservices2.rec.apps.paris.fr/forms" title="Tout sur le thème" target="_blank">
<span>Tout sur le thème </span>
</a>
</li>
<li class="custom-list-item extra hidden">
<a class="list-info" href="https://lutece.paris.fr/" title="Tout sur Lutece" >
<span>Tout sur Lutece </span>
</a>
</li>
<li class="custom-list-item extra hidden">
<a class="list-info" href="https://www.allocine.fr/film/fichefilm_gen_cfilm=7868.html" title="Tout sur ma mère" >
<span>Tout sur ma mère </span>
</a>
</li>
<li class="more">
<a href="#" class="btn-more" title="Show more" data-plus="Show more" data-minus="Close" >
<svg xmlns="http://www.w3.org/2000/svg" class="plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="minus" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /></svg>
<span class="link-label">Show more</span>
</a>
</li>
</ul>
</div>
</div>

<ul class="custom-list list-default" >
<li class="custom-list-item">
<a href="http://paris.fr" class="" title="Site de la Ville de Paris [New window]" target="_blank" >
<span class="link-label">Decouvrir Paris.fr</span>
</a>
</li>
</ul>

<p class="text-cap">
Cliquer sur les boutons ci-dessous pour afficher les boîtes de dialogue.</p>
<button class="btn btn-primary m-xxs" type="submit" data-bs-toggle="modal" data-bs-target="#example1Modal">
<span class="btn-label ">Modal 1</span>
</button>
<button class="btn btn-primary m-xxs" type="submit" data-bs-toggle="modal" data-bs-target="#example2Modal">
<span class="btn-label ">Modal 2</span>
</button>
<button class="btn btn-primary m-xxs" type="submit" data-bs-toggle="modal" data-bs-target="#example3Modal">
<span class="btn-label ">Modal 3</span>
</button>